@ant-design/icons#EyeFilled TypeScript Examples

ControlsComponent: React.FC<ControlsProps> = ({
  inputChecked,
  codeChecked,
  outputChecked,
  codeSaved,
  toggleInput,
  toggleCode,
  toggleOutput,
  handleExit: handleCloseWithoutSaving,
  handleSave,
  handleRun,
}) => {
  const [isClosePopoverVisible, setIsClosePopoverVisible] = useState(false)

  const handleClose = () => {
    if (!codeSaved.current) {
      setIsClosePopoverVisible(true)
      return
    }
    handleCloseWithoutSaving()
  }

  useEffect(() => {
    const handleToggleInput = () => {
      toggleInput()
      return false // to prevent browsers' default behaviour
    }
    const handleToggleCode = () => {
      toggleCode()
      return false
    }
    const handleToggleOutput = () => {
      toggleOutput()
      return false
    }
    const _handleSave = (e: KeyboardEvent) => {
      e.preventDefault()
      handleSave()
      return false
    }
    const _handleRun = (e: KeyboardEvent) => {
      e.stopPropagation()
      handleRun()
      return false
    }
    const handleEscape = e => {
      if (e.key === "Escape") {
        handleClose()
      }
    }

    hotkeys.filter = () => true // to enable hotkeys everywhere, even in input fields

    hotkeys("cmd+i,ctrl+i", handleToggleInput)
    hotkeys("cmd+u,ctrl+u", handleToggleCode)
    hotkeys("cmd+o,ctrl+o", handleToggleOutput)
    hotkeys("cmd+s,ctrl+s", _handleSave)
    hotkeys("cmd+enter,ctrl+enter", _handleRun)
    document.addEventListener("keydown", handleEscape, true)

    return () => {
      hotkeys.unbind("cmd+i,ctrl+i", handleToggleInput)
      hotkeys.unbind("cmd+u,ctrl+u", handleToggleCode)
      hotkeys.unbind("cmd+o,ctrl+o", handleToggleOutput)
      hotkeys.unbind("cmd+s,ctrl+s", _handleSave)
      hotkeys.unbind("cmd+enter,ctrl+enter", _handleRun)
      document.removeEventListener("keydown", handleEscape, true)
    }
  }, [])

  return (
    <div className="flex items-stretch w-full h-full">
      <Popconfirm
        title="You have some unsaved expression code. Do you want to quit?"
        placement="rightBottom"
        className="max-w-xs mr-4"
        visible={isClosePopoverVisible}
        onCancel={() => setIsClosePopoverVisible(false)}
        onConfirm={() => {
          handleCloseWithoutSaving()
          setIsClosePopoverVisible(false)
        }}
      >
        <Button size="middle" className="flex-grow-0" onClick={handleClose}>
          <CloseOutlined className={styles.adaptiveIcon} />
          <span className={`${styles.adaptiveLabel} ${styles.noMargins}`}>{"Close"}</span>
        </Button>
      </Popconfirm>
      <div className="flex justify-center items-center flex-auto min-w-0">
        <Tooltip title={`${OS_CMD_CTRL_KEY}+I`} mouseEnterDelay={1}>
          <Checkbox
            checked={inputChecked}
            className={cn("relative", styles.checkbox, styles.hideAntdCheckbox, styles.checkboxLabel, {
              [styles.checkboxChecked]: inputChecked,
            })}
            onClick={toggleInput}
          >
            <i className="block absolute left-0.5">{inputChecked ? <EyeFilled /> : <EyeInvisibleFilled />}</i>
            <span className={styles.adaptiveIcon}>{"{ }"}</span>
            <span className={`${styles.adaptiveLabel} ${styles.noMargins}`}>{"Input"}</span>
          </Checkbox>
        </Tooltip>
        <Tooltip title={`${OS_CMD_CTRL_KEY}+U`} mouseEnterDelay={1}>
          <Checkbox
            checked={codeChecked}
            className={cn("relative", styles.checkbox, styles.hideAntdCheckbox, styles.checkboxLabel, {
              [styles.checkboxChecked]: codeChecked,
            })}
            onClick={toggleCode}
          >
            <i className="block absolute left-0.5">{codeChecked ? <EyeFilled /> : <EyeInvisibleFilled />}</i>
            <span className={styles.adaptiveIcon}>{"</>"}</span>
            <span className={`${styles.adaptiveLabel} ${styles.noMargins}`}>{"Expression"}</span>
          </Checkbox>
        </Tooltip>
        <Tooltip title={`${OS_CMD_CTRL_KEY}+O`} mouseEnterDelay={1}>
          <Checkbox
            checked={outputChecked}
            className={cn("relative", styles.checkbox, styles.hideAntdCheckbox, styles.checkboxLabel, {
              [styles.checkboxChecked]: outputChecked,
            })}
            onClick={toggleOutput}
          >
            <i className="block absolute left-0.5">{outputChecked ? <EyeFilled /> : <EyeInvisibleFilled />}</i>
            <CodeOutlined className={styles.adaptiveIcon} />
            <span className={`${styles.adaptiveLabel} ${styles.noMargins}`}>{"Result"}</span>
          </Checkbox>
        </Tooltip>
      </div>
      <div className="flex-grow-0 ant-btn-group">
        <Tooltip title={`${OS_CMD_CTRL_KEY}+↵`} mouseEnterDelay={1}>
          <Button
            size="middle"
            type="primary"
            icon={<CaretRightOutlined />}
            className={`${styles.buttonGreen}`}
            onClick={handleRun}
          >
            <span className={`${styles.adaptiveLabel}`}>{"Run"}</span>
          </Button>
        </Tooltip>
        <Tooltip title={`${OS_CMD_CTRL_KEY}+S`} mouseEnterDelay={1}>
          <Button size="middle" type="primary" onClick={handleSave} icon={<DownloadOutlined />}>
            <span className={`${styles.adaptiveLabel}`}>{"Save"}</span>
          </Button>
        </Tooltip>
      </div>
    </div>
  )
}