@ant-design/icons#EyeFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#EyeFilled.
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: CodeDebugger.tsx From jitsu with MIT License | 4 votes |
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>
)
}