react-feather#X TypeScript Examples

WindowButton = () => {
  function minWindow() {
    mainWindow.minimize();
  }
  function maxWindow() {
    if (mainWindow.isMaximized()) {
      mainWindow.unmaximize();
    } else {
      mainWindow.maximize();
    }
  }
  function closeWindow() {
    mainWindow.close();
  }

  return (
    <div className="window-button-wrapper">
      <div className="btn" onClick={minWindow}>
        <Minus className="icon" />
      </div>
      <div className="btn" onClick={maxWindow}>
        <Maximize2 className="icon icon-max" />
      </div>
      <div className="btn btn-close" onClick={closeWindow}>
        <X className="icon" />
      </div>
    </div>
  );
}

StyledClose = styled(X)`
  position: absolute;
  right: 16px;
  top: 16px;

  :hover {
    cursor: pointer;
  }
`

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

StyledClose = styled(X)`
  position: absolute;
  right: 10px;
  top: 10px;

  :hover {
    cursor: pointer;
  }
`

StyledClose = styled(X)`
  position: absolute;
  right: 10px;
  top: 10px;

  :hover {
    cursor: pointer;
  }
`

StyledClose = styled(X)`
  position: absolute;
  right: 10px;
  top: 10px;

  :hover {
    cursor: pointer;
  }
`

StyledClose = styled(X)`
  position: absolute;
  right: 10px;
  top: 10px;

  :hover {
    cursor: pointer;
  }
`

StyledClose = styled(X)`
  position: absolute;
  right: 16px;
  top: 16px;

  :hover {
    cursor: pointer;
  }
`

StyledCloseIcon = styled(X)`
  height: 20px;
  width: 20px;
  :hover {
    cursor: pointer;
  }

  > * {
    stroke: ${({ theme }) => theme.text1};
  }
`

StyledClose = styled(X)`
  position: absolute;
  right: 16px;
  top: 16px;

  :hover {
    cursor: pointer;
  }
`

StyledCloseIcon = styled(X)`
  height: 20px;
  width: 20px;
  :hover {
    cursor: pointer;
  }

  > * {
    stroke: ${({ theme }) => theme.colors.text1};
  }
`

StyledCloseIcon = styled(X)`
  height: 20px;
  width: 20px;
  :hover {
    cursor: pointer;
  }

  > * {
    stroke: ${({ theme }) => theme.text1};
  }
`

StyledClose = styled(X)`
  position: absolute;
  right: 10px;
  top: 10px;

  :hover {
    cursor: pointer;
  }
`

EditMode = ({ label, onSave, onAbort }: EditModeProps) => {
  const [newLabel, setNewLabel] = useState(label)

  return (
    <TitleLayout>
      <div>
        <TextInput value={newLabel} onChange={setNewLabel} />
      </div>
      <div>
        <IconButton
          icon={Save}
          label={`Save changes`}
          onClick={() => onSave(newLabel)}
        />
        <IconButton icon={X} label={`Discard changes`} onClick={onAbort} />
      </div>
    </TitleLayout>
  )
}

StyledClose = styled(X)`
  position: absolute;
  right: 10px;
  top: 10px;

  :hover {
    cursor: pointer;
  }
`

export function FilesList({
  value,
  onChange,
  listItemIcon = Paperclip,
  linkProps,
}: FilesListProps): ReactElement<FilesListProps> {
  const deleteFile = (file: FileDescriptor): void => {
    const restFiles = value.filter((f) => f.uuid !== file.uuid)
    onChange(restFiles)
  }

  return (
    <List>
      {value.map((file) => (
        <ListItem display="flex" alignItems="center" className={listItemCss} key={file.uuid}>
          <ListIcon as={listItemIcon} />
          {file?.url ? (
            <Link href={file.url} isExternal {...linkProps}>
              {file.name}
            </Link>
          ) : (
            file.name
          )}
          <IconButton
            aria-label="Удалить"
            variant="unstyled"
            size="xs"
            icon={<X color="red" size={16} />}
            ml={2}
            onClick={() => deleteFile(file)}
          />
        </ListItem>
      ))}
    </List>
  )
}

Dialog: React.FC<Props> = ({ isOpen, onClose, children }) => (
  <Overlay isOpen={isOpen}>
    <Wrapper aria-label="dialog">
      <CloseButton onClick={onClose}>
        <X />
      </CloseButton>
      <div>{children}</div>
    </Wrapper>
  </Overlay>
)

ItemEditMode = ({
  label,
  url,
  onSave,
  onAbort,
}: ItemEditModeProps) => {
  const [newLabel, setNewLabel] = useState(label)
  const [newUrl, setNewUrl] = useState(url)

  const newBookmark: RowElement = {
    label: newLabel,
    url: newUrl,
  }

  return (
    <Wrapper>
      <TextInput label="Label" value={newLabel} onChange={setNewLabel} />
      <TextInput label="Url" value={newUrl} onChange={setNewUrl} />
      <div>
        <IconButton
          icon={Save}
          label="Save changes"
          onClick={() => onSave(newBookmark)}
        />
        <IconButton icon={X} label="Discard changes" onClick={onAbort} />
      </div>
    </Wrapper>
  )
}

CloseIcon = styled(X)<{ onClick?: () => void }>`
  cursor: pointer;

  :active {
    stroke: ${({ theme }) => theme.text1};
  }
`

Filters = ({ values, setValues, isAnySelected }: Props) => {
  const [isOpen, setIsOpen] = useState(false);
  const filters = Object.keys(values);

  const handleChange = ({ target: { name, checked } }: ChangeEvent<HTMLInputElement>) => {
    setValues((prevValues) => {
      const newValues = { ...prevValues, [name]: checked };
      const stringifiedNewValues = JSON.stringify(newValues);

      localStorage.setItem(LOCAL_STORAGE.EVENT_FILTERS, stringifiedNewValues);
      return newValues;
    });
  };

  const getFilters = () =>
    filters.map((filter) => (
      <li key={filter}>
        <Checkbox
          label={filter}
          name={filter}
          className={styles.checkbox}
          checked={values[filter]}
          onChange={handleChange}
        />
      </li>
    ));

  const close = () => {
    setIsOpen(false);
  };

  const toggle = () => {
    setIsOpen((prevValue) => !prevValue);
  };

  const reset = () => {
    setValues(init.filterValues);
    localStorage.removeItem(LOCAL_STORAGE.EVENT_FILTERS);
    close();
  };

  const ref = useOutsideClick(close);
  const toggleButtonClassName = clsx(styles.button, styles.toggleButton);
  const resetButtonClassName = clsx(styles.button, styles.resetButton);

  return (
    <div className={styles.filters} ref={ref}>
      <button type="button" className={toggleButtonClassName} onClick={toggle}>
        <Sliders size={16} strokeWidth={3} />
      </button>
      {isOpen && (
        <div className={styles.body}>
          <ul className={styles.list}>{getFilters()}</ul>
          {isAnySelected && (
            <footer className={styles.footer}>
              <button type="button" className={resetButtonClassName} onClick={reset}>
                <X size={16} strokeWidth={3} className={styles.icon} />
                Clear filters
              </button>
            </footer>
          )}
        </div>
      )}
    </div>
  );
}

CloseIcon = styled(X)<{ onClick: () => void }>`
  cursor: pointer;
`

StyledClosed = styled(X)`
  :hover {
    cursor: pointer;
  }
`

CloseIcon = styled(X)<{ onClick: () => void }>`
  cursor: pointer;
`

CloseIcon = styled(X)<{ onClick: () => void }>`
  cursor: pointer;
`

StyledClose = styled(X)`
  :hover {
    cursor: pointer;
  }
`

CloseIcon = styled(X)<{ onClick: () => void }>`
  cursor: pointer;
`

SnackbarNotification = () => {
  const classes = useStyles({});
  const {
    isOpen,
    message,
    variant,
    closeNotification,
  } = useSnackbarNotification();

  return (
    <Snackbar
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "center",
      }}
      TransitionComponent={SlideTransition}
      open={isOpen}
      autoHideDuration={5000}
      onClose={closeNotification}
      className={classes.root}
    >
      <SnackbarContent
        classes={{
          root: clsx(classes.snackbarContent, classes[variant]),
          message: classes.message,
        }}
        message={
          <>
            <Typography variant="body1" className={classes.messageText}>
              {message}
            </Typography>
            <IconButton
              key="close"
              color="inherit"
              onClick={closeNotification}
              className={classes.closeButton}
            >
              <X />
            </IconButton>
          </>
        }
      />
    </Snackbar>
  );
}

StyledClosed = styled(X)`
  :hover {
    cursor: pointer;
  }
`

export function FeedSubpage(): ReactElement {
  const { identities } = useContext(IdentityContext)
  const { uuid } = useParams()
  const { beeApi } = useContext(SettingsContext)
  const { status } = useContext(BeeContext)

  const navigate = useNavigate()

  const [available, setAvailable] = useState(false)

  const identity = identities.find(x => x.uuid === uuid)

  useEffect(() => {
    if (!identity || !identity.feedHash) {
      return
    }

    try {
      beeApi?.downloadData(identity.feedHash).then(() => setAvailable(true))
    } catch {
      setAvailable(false)
    }
  }, [beeApi, uuid, identity])

  if (!identity || !status.all) {
    navigate(ROUTES.FEEDS, { replace: true })

    return <></>
  }

  function onClose() {
    navigate(ROUTES.FEEDS)
  }

  return (
    <div>
      <HistoryHeader>{`${identity.name} Website`}</HistoryHeader>
      <UploadArea showHelp={false} uploadOrigin={{ origin: 'FEED', uuid }} />
      {available && identity.feedHash ? (
        <>
          <Box mb={0.25}>
            <ExpandableListItemKey label="Feed hash" value={identity.feedHash} />
          </Box>
          <Box mb={4}>
            <ExpandableListItemLink
              label="BZZ Link"
              value={`https://${swarmCid.encodeFeedReference(identity.feedHash)}.bzz.link`}
            />
          </Box>
        </>
      ) : (
        <Box mb={4}>
          <DocumentationText>
            This feed is curently not pointing anywhere, you can update the feed to fix this. Please refer to the{' '}
            <a
              href="https://docs.ethswarm.org/api/#tag/Feed/paths/~1feeds~1{owner}~1{topic}/post"
              target="_blank"
              rel="noreferrer"
            >
              official Bee documentation
            </a>
            .
          </DocumentationText>
        </Box>
      )}
      <ExpandableListItemActions>
        <SwarmButton iconType={X} onClick={onClose} cancel>
          Close
        </SwarmButton>
      </ExpandableListItemActions>
    </div>
  )
}