react-feather#PlusCircle TypeScript Examples

The following examples show how to use react-feather#PlusCircle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: QuestionHelper.tsx    From interface-v2 with GNU General Public License v3.0 6 votes vote down vote up 
PlusHelper: React.FC<{ text: string; color?: string }> = ({
  text,
  color,
}) => {
  const classes = useStyles({ color });

  return (
    <CustomTooltip title={text}>
      <Box className={classes.questionWrapper}>
        <PlusCircle size={16} />
      </Box>
    </CustomTooltip>
  );
}
Example #2
Source File: UploadArea.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
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>
      )}
    </>
  )
}