react-feather#File TypeScript Examples

// TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)

export function AssetPreview({ metadata, previewUri }: Props): ReactElement | null {
  let previewComponent = <File />
  let type = metadata?.type

  if (metadata?.isWebsite) {
    previewComponent = <Web />
    type = 'Website'
  } else if (metadata?.type === 'folder') {
    previewComponent = <Folder />
    type = 'Folder'
  }

  return (
    <Box mb={4}>
      <Box bgcolor="background.paper">
        <Grid container direction="row">
          {previewUri ? (
            <FitImage maxWidth="250px" maxHeight="175px" alt="Upload Preview" src={previewUri} />
          ) : (
            <AssetIcon icon={previewComponent} />
          )}
          <Box p={2}>
            {metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
            {metadata?.name && metadata?.name !== metadata?.hash && (
              <Typography>
                {metadata?.type === 'folder' ? 'Folder Name' : 'Filename'}: {shortenText(metadata?.name)}
              </Typography>
            )}
            <Typography>Kind: {type}</Typography>
            {metadata?.size ? <Typography>Size: {getHumanReadableFileSize(metadata.size)}</Typography> : null}
          </Box>
        </Grid>
      </Box>
      {metadata?.type === 'folder' && metadata.count && (
        <Box mt={0.25} p={2} bgcolor="background.paper">
          <Grid container justifyContent="space-between" alignItems="center" direction="row">
            <Typography variant="subtitle2">Folder content</Typography>
            <Typography variant="subtitle2">{metadata.count} items</Typography>
          </Grid>
        </Box>
      )}
    </Box>
  )
}

// TODO: add optional prop for indexDocument when it is already known (e.g. downloading a manifest)

export function AssetPreview({ previewUri, metadata }: Props): ReactElement {
  let previewComponent = <File />
  let type = mimeToKind(metadata?.type)

  if (metadata?.isWebsite) {
    previewComponent = <Monitor />
    type = text.uploadFile.headerWebsite
  } else if (metadata?.type === 'folder') {
    previewComponent = <Folder />
    type = text.uploadFile.headerFolder
  }

  return (
    <Box mb={0.25}>
      <Box bgcolor="background.paper">
        <Grid container direction="row">
          <div style={{ width: PREVIEW_DIMENSIONS.maxWidth, height: PREVIEW_DIMENSIONS.maxHeight }}>
            {previewUri ? <FitImage alt="Upload Preview" src={previewUri} /> : <AssetIcon icon={previewComponent} />}
          </div>
          <Box p={2} textAlign="left">
            {metadata?.hash && <Typography>Swarm Hash: {shortenHash(metadata.hash)}</Typography>}
            <Typography>
              {metadata?.type === 'folder' ? text.previewDetails.folderName : text.previewDetails.fileName}:{' '}
              {metadata?.name}
            </Typography>
            <Typography>
              {text.previewDetails.type}: {type}
            </Typography>
            {metadata?.size && (
              <Typography>
                {text.previewDetails.size}: {shortenBytes(metadata.size)}
              </Typography>
            )}
          </Box>
        </Grid>
      </Box>
      {metadata?.type === 'folder' && metadata.count && (
        <Box mt={0.25} p={2} bgcolor="background.paper">
          <Grid container justifyContent="space-between" alignItems="center" direction="row">
            <Typography variant="subtitle2">{text.previewDetails.folderContent}</Typography>
            <Typography variant="subtitle2">
              {metadata.count} {text.previewDetails.items}
            </Typography>
          </Grid>
        </Box>
      )}
    </Box>
  )
}

EditorTree = () => {
  const { state, dispatch } = useEditorTreeContext();

  const [showAddFolder, setShowAddFolder] = useState(false);
  const [showAddFile, setShowAddFile] = useState(false);

  const handleFolderSubmit = (name: string) => {
    if (state.tree) {
      dispatch({ type: FOLDER.CREATE, payload: { parentId: 'root', newName: name } });
      setShowAddFolder(false);
    }
  };
  const handleFileSubmit = (name: string) => {
    if (state.tree) {
      dispatch({ type: FILE.CREATE, payload: { parentId: 'root', newName: name } });
      setShowAddFile(false);
    }
  };

  const handleCancel = () => {
    setShowAddFolder(false);
    setShowAddFile(false);
  };

  return (
    <div className="editor-tree">
      {state.error && <div className="tree-error">{state.error}</div>}
      <div className="tree-actions is-top">
        <button
          className="tree-actions__btn"
          onClick={() => {
            setShowAddFolder(true);
            setShowAddFile(false);
          }}
          type="button"
        >
          <FolderPlus size={12} color="#fff" />
          &nbsp;New folder
        </button>
        &nbsp;
        <button
          className="tree-actions__btn"
          onClick={() => {
            setShowAddFile(true);
            setShowAddFolder(false);
          }}
          type="button"
        >
          <FilePlus size={12} color="#fff" />
          &nbsp;New file
        </button>
      </div>
      {state.tree && <EditorRecursiveTree files={state.tree.root.children} />}
      {showAddFolder && (
        <div className="editor-tree__item">
          <Folder size={12} />
          &nbsp;
          <EditorTreeInput onSubmit={handleFolderSubmit} type={EditorTypes.folder} onCancel={handleCancel} />
        </div>
      )}
      {showAddFile && (
        <div className="editor-tree__item">
          <File size={12} />
          &nbsp;
          <EditorTreeInput onSubmit={handleFileSubmit} type={EditorTypes.file} onCancel={handleCancel} />
        </div>
      )}
    </div>
  );
}

EditorTreeFileItem = ({ item, isActive }: ItemProps) => {
  const { dispatch, onNodeClick, setCurrentFile } = useEditorTreeContext();
  const [isEditing, setEditing] = useState(false);

  function handleEdit() {
    setEditing(true);
  }

  function handleDelete() {
    // TODO: change to modal lib
    // eslint-disable-next-line no-alert
    if (window.confirm('Are you sure?') && dispatch) {
      dispatch({ type: FILE.DELETE, payload: { parentId: item.parentId, nodeId: item.id } });
      setCurrentFile(null);
    }
  }

  const handleCancel = () => {
    setEditing(false);
  };

  const handleSubmit = (name: string) => {
    if (dispatch) {
      dispatch({ type: FILE.UPDATE, payload: { parentId: item.parentId, nodeId: item.id, newName: name } });
      setEditing(false);
    }
  };

  const handleNodeClick = React.useCallback(() => {
    onNodeClick(item);
  }, [item, onNodeClick]);

  return (
    <div className={clsx('editor-tree__item', isActive && 'is-active')}>
      <div className="editor-tree__line" onClick={handleNodeClick} role="button" tabIndex={0} aria-hidden="true">
        <File size={12} />
        &nbsp;
        {isEditing ? (
          <EditorTreeInput onCancel={handleCancel} onSubmit={handleSubmit} value={item.name} type={EditorTypes.file} />
        ) : (
          <>{`${item.name}`}</>
        )}
      </div>
      <div className="tree-actions">
        &nbsp;
        <button className="tree-actions__btn" onClick={handleEdit} type="button">
          <Edit size={12} color="#fff" />
        </button>
        &nbsp;
        <button className="tree-actions__btn" onClick={handleDelete} type="button">
          <Trash size={12} color="#fff" />
        </button>
      </div>
    </div>
  );
}