react-feather#Trash TypeScript Examples

ViewMode = ({
  label,
  addBookmark,
  onRemove,
  onEdit,
  bookmarkCount,
}: ViewModeProps) => (
  <TitleLayout>
    <GroupName>{label}</GroupName>
    <div>
      <IconButton
        icon={Plus}
        label={`Add new bookmark to ${label}`}
        onClick={addBookmark}
        disabled={bookmarkCount >= 4}
      />
      <IconButton icon={Edit3} label={`Edit group ${label}`} onClick={onEdit} />
      <IconButton
        icon={Trash}
        label={`Remove group ${label}`}
        onClick={onRemove}
      />
    </div>
  </TitleLayout>
)

ItemViewMode = ({
  label,
  url,
  designator,
  onRemoveClick,
  onEditClick,
}: ItemViewModeProps) => (
  <Wrapper>
    <Label>{label}</Label>
    <Url url={url} />
    <Actions>
      <IconButton
        icon={Edit3}
        label={`Edit ${label} ${designator}`}
        onClick={onEditClick}
      />
      <IconButton
        icon={Trash}
        label={`Remove ${label} ${designator}`}
        onClick={onRemoveClick}
      />
    </Actions>
  </Wrapper>
)

export function DeleteFeedDialog({ identity, onConfirm, onClose }: Props): ReactElement {
  return (
    <SwarmDialog>
      <Box mb={4}>
        <TitleWithClose onClose={onClose}>Delete</TitleWithClose>
      </Box>
      <Box mb={2}>
        <Typography align="center">{`You are about to delete feed ${identity.name} Website. It is strongly advised to export this feed first.`}</Typography>
      </Box>
      <ExpandableListItemActions>
        <SwarmButton iconType={Trash} onClick={() => onConfirm(identity)}>
          Delete
        </SwarmButton>
        <SwarmButton iconType={X} onClick={onClose} cancel>
          Cancel
        </SwarmButton>
      </ExpandableListItemActions>
    </SwarmDialog>
  )
}

TrashIcon = styled(Trash)`
  height: 16px;
  width: 18px;
  margin-left: 10px;
  stroke: ${({ theme }) => theme.text3};

  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: flex;

  :hover {
    opacity: 0.7;
  }
`

TrashIcon = styled(Trash)`
  height: 16px;
  width: 18px;
  margin-left: 10px;
  stroke: ${({ theme }) => theme.text3};

  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: flex;

  :hover {
    opacity: 0.7;
  }
`

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

TrashStyled = chakra(Trash)

function Controls() {
  const dietFormActions = useDietFormActions()
  const exportModalDisclosure = useDisclosure()
  const missingFoodsModalDisclosure = useDisclosure()
  const { onLoadFromFile } = useImportDietForm({ missingFoodsModalDisclosure })
  const foodsListModalDisclosure = useDisclosure()
  const importFoods = useImportFoods({ foodsListModalDisclosure })
  const foodsDrawerDisclosure = useDisclosure()
  const screenSize = useScreenSize()

  useKeyboard()

  function onClear() {
    dietFormActions.setDietForm(getDietForm())
  }

  return (
    <Flex width="100%" alignItems="center">
      <Flex flex={1} mr={2}>
        <UndoRedoButtons />
      </Flex>

      <Flex flexShrink={1} justifyContent="center" flex={4}>
        <Name />
      </Flex>

      <Flex ml={2} justifyContent="flex-end" spacing={3} flex={1}>
        <MenuOrDrawer
          onImport={onLoadFromFile}
          onClear={onClear}
          onViewFoods={foodsDrawerDisclosure.onOpen}
        />

        {screenSize >= ScreenSize.Medium && (
          <Button
            leftIcon={<Trash size={16} />}
            size="md"
            onClick={onClear}
            mr={2}
          >
            Clear
          </Button>
        )}

        <ExportButton onClick={exportModalDisclosure.onOpen} />
      </Flex>

      <MissingFoodsModal
        isOpen={missingFoodsModalDisclosure.isOpen}
        onClose={missingFoodsModalDisclosure.onClose}
        onImport={importFoods.onImport}
      />

      <FoodsListModal
        isOpen={foodsListModalDisclosure.isOpen}
        onClose={foodsListModalDisclosure.onClose}
        foodsToImport={importFoods.foodsToImport}
      />

      <FoodsDrawer
        isOpen={foodsDrawerDisclosure.isOpen}
        onClose={foodsDrawerDisclosure.onClose}
        canSelect={false}
      />

      <ExportModal
        isOpen={exportModalDisclosure.isOpen}
        onClose={exportModalDisclosure.onClose}
      />
    </Flex>
  )
}

export default function Feeds(): ReactElement {
  const { identities, setIdentities } = useContext(IdentityContext)
  const { status } = useContext(BeeContext)

  const navigate = useNavigate()

  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
  const [showImport, setShowImport] = useState(false)
  const [showExport, setShowExport] = useState(false)
  const [showDelete, setShowDelete] = useState(false)

  function createNewFeed() {
    return navigate(ROUTES.FEEDS_NEW)
  }

  function viewFeed(uuid: string) {
    navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
  }

  function onDialogClose() {
    setShowDelete(false)
    setShowExport(false)
    setShowImport(false)
    setSelectedIdentity(null)
  }

  function onDelete(identity: Identity) {
    onDialogClose()
    const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
    setIdentities(updatedFeeds)
    persistIdentitiesWithoutUpdate(updatedFeeds)
  }

  function onShowExport(identity: Identity) {
    setSelectedIdentity(identity)
    setShowExport(true)
  }

  function onShowDelete(identity: Identity) {
    setSelectedIdentity(identity)
    setShowDelete(true)
  }

  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />

  return (
    <div>
      {showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
      {showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
      {showDelete && selectedIdentity && (
        <DeleteFeedDialog
          identity={selectedIdentity}
          onClose={onDialogClose}
          onConfirm={(identity: Identity) => onDelete(identity)}
        />
      )}
      <Box mb={4}>
        <Typography variant="h1">Feeds</Typography>
      </Box>
      <Box mb={4}>
        <ExpandableListItemActions>
          <SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
            Create New Feed
          </SwarmButton>
          <SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
            Import Feed
          </SwarmButton>
        </ExpandableListItemActions>
      </Box>
      {identities.map((x, i) => (
        <ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
          <Box mb={0.5}>
            <ExpandableList label={x.name} level={1}>
              <ExpandableListItemKey label="Identity address" value={x.address} />
              <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
            </ExpandableList>
          </Box>
          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
          {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
          <Box mt={0.75}>
            <ExpandableListItemActions>
              <SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
                View Feed Page
              </SwarmButton>
              <SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
                Export...
              </SwarmButton>
              <SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
                Delete...
              </SwarmButton>
            </ExpandableListItemActions>
          </Box>
        </ExpandableList>
      ))}
    </div>
  )
}

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