react-feather Minus TypeScript Examples

Source File: Order.tsx From ke with MIT License

6 votes

export function Order({ value, onChange }: OrderProps): ReactElement<OrderProps> {
  switch (value) {
    case 'asc':
      return (
        <IconButton
          background={{}}
          aria-label="По возрастанию"
          icon={<ChevronsDown />}
          onClick={() => onChange('desc')}
          size="xs"
        />
      )
    case 'desc':
      return (
        <IconButton
          background={{}}
          aria-label="По убыванию"
          icon={<ChevronsUp />}
          onClick={() => onChange(null)}
          size="xs"
        />
      )
    case null:
      return (
        <IconButton
          background={{}}
          aria-label="Сортировать"
          icon={<Minus />}
          onClick={() => onChange('asc')}
          size="xs"
        />
      )
    default:
      throw new TypeError(`Unknown order direction: ${value}. Awaiting for 'asc' | 'desc' | null`)
  }
}

Source File: SortDirection.tsx From ke with MIT License

6 votes

export function SortDirection({ value, onChange }: OrderProps): JSX.Element {
  switch (value) {
    case 'asc':
      return (
        <IconButton
          background={{}}
          aria-label="По возрастанию"
          icon={<ChevronsDown />}
          onClick={() => onChange('desc')}
          size="xs"
        />
      )
    case 'desc':
      return (
        <IconButton
          background={{}}
          aria-label="По убыванию"
          icon={<ChevronsUp />}
          onClick={() => onChange(null)}
          size="xs"
        />
      )
    case null:
      return (
        <IconButton
          background={{}}
          aria-label="Сортировать"
          icon={<Minus />}
          onClick={() => onChange('asc')}
          size="xs"
        />
      )
    default:
      throw new TypeError(`Unknown sort direction: ${value}. Awaiting for 'asc' | 'desc' | null`)
  }
}

Source File: SortHandler.tsx From ke with MIT License

6 votes

function SortDirection({ value, onChange }: SortDirectionProps): JSX.Element {
  switch (value) {
    case 'asc':
      return (
        <IconButton
          background={{}}
          aria-label="По возрастанию"
          icon={<ChevronsDown />}
          onClick={() => onChange('desc')}
          size="xs"
        />
      )
    case 'desc':
      return (
        <IconButton
          background={{}}
          aria-label="По убыванию"
          icon={<ChevronsUp />}
          onClick={() => onChange(null)}
          size="xs"
        />
      )
    case null:
      return (
        <IconButton
          background={{}}
          aria-label="Сортировать"
          icon={<Minus />}
          onClick={() => onChange('asc')}
          size="xs"
        />
      )
    default:
      throw new TypeError(`Unknown sort direction: ${value}. Awaiting for 'asc' | 'desc' | null`)
  }
}

Source File: index.tsx From Aragorn with MIT License

6 votes

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

Source File: ExpandableListItemKey.tsx From bee-dashboard with BSD 3-Clause "New" or "Revised" License

5 votes

export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
  const classes = useStyles()
  const [open, setOpen] = useState(expanded || false)
  const [copied, setCopied] = useState(false)
  const toggleOpen = () => setOpen(!open)

  const tooltipClickHandler = () => setCopied(true)
  const tooltipCloseHandler = () => setCopied(false)

  const splitValues = split(value)
  const hasPrefix = isPrefixedHexString(value)
  const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${
    splitValues[splitValues.length - 1]
  }`

  return (
    <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
        <Grid container direction="row" justifyContent="space-between" alignItems="center">
          {label && <Typography variant="body1">{label}</Typography>}
          <Typography variant="body2">
            <div>
              {!open && (
                <span className={classes.copyValue}>
                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
                    <CopyToClipboard text={value}>
                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
                    </CopyToClipboard>
                  </Tooltip>
                </span>
              )}
              <IconButton size="small" className={classes.copyValue}>
                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
              </IconButton>
            </div>
          </Typography>
        </Grid>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <div className={classes.content}>
            <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
              <CopyToClipboard text={value}>
                {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
                <span onClick={tooltipClickHandler}>
                  <span className={classes.copyValue}>
                    {splitValues.map((s, i) => (
                      <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
                        {s}
                      </Typography>
                    ))}
                  </span>
                </span>
              </CopyToClipboard>
            </Tooltip>
          </div>
        </Collapse>
      </Grid>
    </ListItem>
  )
}

Source File: ExpandableListItemInput.tsx From bee-dashboard with BSD 3-Clause "New" or "Revised" License

4 votes

export default function ExpandableListItemKey({
  label,
  value,
  onConfirm,
  onChange,
  confirmLabel,
  confirmLabelDisabled,
  expandedOnly,
  helperText,
  placeholder,
  loading,
  mapperFn,
  locked,
}: Props): ReactElement | null {
  const classes = useStyles()
  const [open, setOpen] = useState(Boolean(expandedOnly))
  const [inputValue, setInputValue] = useState<string>(value || '')
  const toggleOpen = () => setOpen(!open)
  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    if (mapperFn) {
      e.target.value = mapperFn(e.target.value)
    }

    setInputValue(e.target.value)

    if (onChange) onChange(e.target.value)
  }

  return (
    <>
      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
          <Grid container direction="row" justifyContent="space-between" alignItems="center">
            {label && (
              <Typography variant="body1" className={classes.unselectableLabel}>
                {label}
              </Typography>
            )}
            <Typography variant="body2">
              <div>
                {!open && value}
                {!expandedOnly && !locked && (
                  <IconButton size="small" className={classes.copyValue}>
                    {open ? (
                      <Minus onClick={toggleOpen} strokeWidth={1} />
                    ) : (
                      <Edit onClick={toggleOpen} strokeWidth={1} />
                    )}
                  </IconButton>
                )}
              </div>
            </Typography>
          </Grid>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <InputBase
              value={inputValue}
              placeholder={placeholder}
              onChange={handleChange}
              fullWidth
              className={classes.content}
              autoFocus
              hidden={locked}
            />
          </Collapse>
        </Grid>
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
        <ExpandableListItemActions>
          <SwarmButton
            disabled={
              loading ||
              inputValue === value ||
              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
            }
            loading={loading}
            iconType={Search}
            onClick={() => {
              if (onConfirm) onConfirm(inputValue)
            }}
          >
            {confirmLabel || 'Save'}
          </SwarmButton>
          <SwarmButton
            disabled={loading || inputValue === value || inputValue === ''}
            iconType={X}
            onClick={() => setInputValue(value || '')}
            cancel
          >
            Cancel
          </SwarmButton>
        </ExpandableListItemActions>
      </Collapse>
    </>
  )
}

react-feather#Minus TypeScript Examples