react-feather#FilePlus TypeScript Examples

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>
  );
}

export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement {
  const { setFiles, setUploadOrigin } = useContext(Context)
  const classes = useStyles()
  const navigate = useNavigate()
  const { enqueueSnackbar } = useSnackbar()
  const [strictWebsiteMode, setStrictWebsiteMode] = useState(false)
  const [version, setVersion] = useState(0)

  const getDropzoneInputDomElement = () => document.querySelector('.MuiDropzoneArea-root input') as HTMLInputElement

  const onUploadCollectionClick = () => {
    const element = getDropzoneInputDomElement()

    if (element) {
      element.setAttribute('directory', '')
      element.setAttribute('webkitdirectory', '')
      element.setAttribute('mozdirectory', '')
      element.click()
    }
  }

  const onUploadWebsiteClick = () => {
    onUploadCollectionClick()
    setStrictWebsiteMode(true)
  }

  const onUploadFolderClick = () => {
    onUploadCollectionClick()
    setStrictWebsiteMode(false)
  }

  const onUploadFileClick = () => {
    const element = getDropzoneInputDomElement()

    if (element) {
      element.removeAttribute('directory')
      element.removeAttribute('webkitdirectory')
      element.removeAttribute('mozdirectory')
      element.click()
    }
  }

  const resetComponentOnAddingInvalidContent = () => {
    setTimeout(() => {
      setVersion(x => x + 1)
      setFiles([])
    }, 0)
  }

  const handleChange = (files?: File[]) => {
    if (files) {
      const FilePaths = files as FilePath[]
      const indexDocument = files.length === 1 ? files[0].name : detectIndexHtml(FilePaths) || undefined

      if (files.length && strictWebsiteMode && !indexDocument) {
        enqueueSnackbar('To upload a website, there must be an index.html or index.htm in the root of the folder.', {
          variant: 'error',
        })
        resetComponentOnAddingInvalidContent()

        return
      }

      setFiles(FilePaths)

      if (files.length) {
        setUploadOrigin(uploadOrigin)
        navigate(ROUTES.UPLOAD_IN_PROGRESS)
      }
    }
  }

  return (
    <>
      <div className={classes.areaWrapper}>
        <DropzoneArea
          key={version}
          dropzoneClass={classes.dropzone}
          onChange={handleChange}
          filesLimit={1e9}
          maxFileSize={MAX_FILE_SIZE}
          showPreviews={false}
        />
        <div className={classes.buttonWrapper}>
          <SwarmButton className={classes.button} onClick={onUploadFileClick} iconType={FilePlus}>
            Add File
          </SwarmButton>
          <SwarmButton className={classes.button} onClick={onUploadFolderClick} iconType={FolderPlus}>
            Add Folder
          </SwarmButton>
          <SwarmButton className={classes.button} onClick={onUploadWebsiteClick} iconType={PlusCircle}>
            Add Website
          </SwarmButton>
        </div>
      </div>
      {showHelp && (
        <DocumentationText>
          You can click the buttons above or simply drag and drop to add a file or folder. To upload a website to Swarm,
          make sure that your folder contains an “index.html” file.
        </DocumentationText>
      )}
    </>
  )
}

EditorTreeFolderItem = ({ item, children }: ItemProps) => {
  const { dispatch, setCurrentFile } = useEditorTreeContext();
  const [isEditing, setEditing] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [childrenCopy, setChildrenCopy] = useState<ReactNode[]>([]);

  useEffect(() => {
    setChildrenCopy([children]);
  }, [children]);

  const commitAddFile = (name: string) => {
    if (dispatch) {
      dispatch({ type: FILE.CREATE, payload: { parentId: item.id, newName: name } });
      setCurrentFile(null);
    }
  };
  const commitUpdateFolderName = (name: string) => {
    if (dispatch) {
      dispatch({ type: FOLDER.UPDATE, payload: { parentId: item.parentId, nodeId: item.id, newName: name } });
      setEditing(false);
    }
  };
  const commitAddFolder = (name: string) => {
    if (dispatch) {
      dispatch({ type: FOLDER.CREATE, payload: { parentId: item.id, newName: name } });
    }
  };
  const handleDelete = () => {
    // TODO: change to modal lib
    // eslint-disable-next-line no-alert
    if (window.confirm('Are you sure?') && dispatch) {
      dispatch({ type: FOLDER.DELETE, payload: { parentId: item.parentId, nodeId: item.id } });
      setCurrentFile(null);
    }
  };

  function handleClick() {
    setIsOpen(!isOpen);
  }

  function handleEdit(event: React.SyntheticEvent) {
    event.stopPropagation();
    setEditing(true);
  }

  function handleCancel() {
    setEditing(false);
    setChildrenCopy([children]);
  }

  function handleAddFile(event: React.SyntheticEvent) {
    event.stopPropagation();
    setIsOpen(true);
    /* eslint-disable react/jsx-no-bind */
    setChildrenCopy([
      ...childrenCopy,
      <EditorTreeInput
        type={EditorTypes.file}
        onSubmit={commitAddFile}
        onCancel={handleCancel}
        key={`editor-file-input-${item.id}`}
      />,
    ]);
  }

  function handleAddFolder(event: React.SyntheticEvent) {
    event.stopPropagation();
    setIsOpen(true);
    /* eslint-disable react/jsx-no-bind */
    setChildrenCopy([
      ...childrenCopy,
      <EditorTreeInput
        key={`editor-folder-input-${item.id}`}
        type={EditorTypes.folder}
        onSubmit={commitAddFolder}
        onCancel={handleCancel}
      />,
    ]);
  }

  /* eslint-disable react/jsx-no-bind */
  return (
    <div className={clsx('editor-tree__folder', isOpen && 'is-open')}>
      <div role="button" tabIndex={0} aria-hidden="true" className="editor-tree__item is-folder" onClick={handleClick}>
        <div className="editor-tree__line">
          <Folder size={12} />
          &nbsp;
          {isEditing ? (
            <EditorTreeInput
              type={EditorTypes.folder}
              onSubmit={commitUpdateFolderName}
              onCancel={handleCancel}
              value={item.name}
            />
          ) : (
            <>
              <span>{item.name}</span>
            </>
          )}
        </div>
        <div className="tree-actions">
          &nbsp;
          <button className="tree-actions__btn" onClick={handleAddFolder} type="button">
            <FolderPlus size={12} color="#fff" />
          </button>
          &nbsp;
          <button className="tree-actions__btn" onClick={handleAddFile} type="button">
            <FilePlus size={12} color="#fff" />
          </button>
          &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>
      <div className="editor-tree__folder-items">{childrenCopy}</div>
    </div>
  );
}