@ant-design/icons#EnterOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#EnterOutlined.
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: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #2
| Source File: index.tsx From memex with MIT License | 4 votes |
|
render() {
const { layout, selectedDoc, resetSelectedDoc } = this.props;
const { tags, tagInputValue, loading } = this.state;
const { width } = layout.drawer;
let readerWidth = '50%';
if (width) {
readerWidth = window.innerWidth - width - 48;
}
return (
<div>
{Object.keys(selectedDoc).length !== 0 ? (
<div style={{ display: 'flex' }}>
<div
style={{
flex: 1,
borderRight: '1px solid #EFEFEF',
padding: 8,
maxWidth: 250,
}}
>
<div style={{ marginBottom: 32 }}>
<div style={{ fontWeight: 600 }}>My Tags</div>
<div
style={{
display: 'flex',
margin: '16px 0',
flexWrap: 'wrap',
}}
>
{selectedDoc.tags.map((tag) => {
return (
<div key={`${tag.label}_${tag.color}`}>
<Tag
style={{ margin: 4 }}
closable
onClose={() => {
this.removeTagFromDoc(tag.label);
}}
color={tag.color}
>
{tag.label}
</Tag>
{/* <div style={{width: '100%', padding: 8, fontSize: 12}}>{highlight.selectedText}</div> */}
</div>
);
})}
</div>
<Select
notFoundContent={
<div className="select-option">
<div>
<span style={{ fontSize: 12, marginRight: 8 }}>
Create
</span>
<Tag>{tagInputValue}</Tag>
</div>
<EnterOutlined />
</div>
}
size="small"
showSearch
placeholder="Type..."
// defaultOpen={true}
style={{ width: 220 }}
// className={contentStyles['tag-input']}
value={tagInputValue}
onChange={(value) => {
this.addTagToDoc(value.split('_')[0], value.split('_')[1]);
}}
onClick={(e) => {
e.stopPropagation();
}}
onSearch={(val) => {
this.setState({ tagInputValue: val });
}}
// onBlur={() => {this.handleEditInputConfirm(result.id)}}
// onInputKeyDown={(e) => console.log(e)}
onKeyDown={(e) => {
if (e.keyCode === 13) {
this.addTag();
}
}}
>
{tags.length > 0 ? (
<span style={{ fontSize: 10 }}>
Choose an existing option or create one
</span>
) : (
<span style={{ fontSize: 10 }}>
Start typing to create a new tag
</span>
)}
{tags.map((tag, index) => {
return (
<Option
key={`unique_tag_selection_${index}`}
value={`${tag.label}_${tag.color}`}
>
<div className="select-option">
<Tag color={tag.color}>{tag.label}</Tag>
<div className="select-option-enter">
<EnterOutlined />
</div>
</div>
</Option>
);
})}
</Select>
</div>
<div style={{ fontWeight: 600 }}>My Highlights</div>
{selectedDoc.highlights.map((highlight) => {
return (
<div
style={{ display: 'flex', margin: '12px 0px' }}
key={highlight.id}
>
<div style={{ width: 4 }} className={highlight.className} />
<div style={{ width: '100%', padding: 8, fontSize: 12 }}>
{highlight.selectedText}
</div>
</div>
);
})}
<div style={{ fontWeight: 600 }}>My Notes</div>
</div>
{/* <div */}
{/* style={{padding: 16, background: '#f4ecd8', flex: 2}} */}
{/* id={'reader'} */}
{/* dangerouslySetInnerHTML={{ __html: selectedDoc.content }} */}
{/* /> */}
<BrowserView
ref={(webview) => {
this.webview = webview;
}}
onDomReady={() => {
// rangy.init()
// let highlighter = rangy.createHighlighter()
// let classApplierModule = rangy.modules.ClassApplier
//
// const highlightPurple = rangy.createClassApplier('inline-tool-bar--highlight-purple')
// const highlightBlue = rangy.createClassApplier('inline-tool-bar--highlight-blue')
// const highlightGreen = rangy.createClassApplier('inline-tool-bar--highlight-green')
// const highlightOrange = rangy.createClassApplier('inline-tool-bar--highlight-orange')
// const highlightRed = rangy.createClassApplier('inline-tool-bar--highlight-red')
//
// highlighter.addClassApplier(highlightPurple)
// highlighter.addClassApplier(highlightBlue)
// highlighter.addClassApplier(highlightGreen)
// highlighter.addClassApplier(highlightOrange)
// highlighter.addClassApplier(highlightRed)
//
// { selectedDoc.highlights.map((highlight => {
// console.log('deserialize')
// highlighter.deserialize(highlight.serializedHighlight)
// })) }
}}
style={{ flex: 2, height: window.innerHeight }}
src={selectedDoc.url}
/>
</div>
) : (
<div style={{ marginTop: 50 }}>
<Empty
description={'<- Select an item in your inbox to preview.'}
/>
</div>
)}
</div>
);
}
Example #3
| Source File: editors.tsx From yakit with GNU Affero General Public License v3.0 | 4 votes |
|
HTTPPacketEditor: React.FC<HTTPPacketEditorProp> = React.memo((props) => {
const isResponse = props.isResponse || (new Buffer(props.originValue.subarray(0, 5)).toString("utf8")).startsWith("HTTP/")
const [mode, setMode] = useState("text");
const [strValue, setStrValue] = useState(new Buffer(props.originValue).toString('utf8'));
const [hexValue, setHexValue] = useState<Uint8Array>(new Buffer(props.originValue))
const [searchValue, setSearchValue] = useState("");
const [monacoEditor, setMonacoEditor] = useState<IMonacoEditor>();
const [fontSize, setFontSize] = useState(12);
const [highlightDecorations, setHighlightDecorations] = useState<any[]>([]);
const [noWordwrap, setNoWordwrap] = useState(false);
const highlightActive = useMemoizedFn((search: string, regexp?: boolean) => {
if (!monacoEditor) {
return
}
// @ts-ignore
// let range = monacoEditor?.getModel().findMatches(search, false, !!regexp, false, null, false)
// if (range && range.length > 0) {
// const decs = monacoEditor.deltaDecorations(highlightDecorations, range.map(i => {
// return {
// id: `highlight[${searchValue}]`,
// range: i.range,
// options: {
// isWholeLine: false,
// inlineClassName: 'monacoInlineHighlight'
// }
// } as any
// }))
// setHighlightDecorations(decs)
// }
})
/*如何实现 monaco editor 高亮？*/
// https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-line-and-inline-decorations
// hex editor
const [nonce, setNonce] = useState(0);
// The callback facilitates updates to the source data.
const handleSetValue = React.useCallback((offset, value) => {
hexValue[offset] = value;
setNonce(v => (v + 1));
setHexValue(new Buffer(hexValue))
}, [hexValue]);
useEffect(() => {
if (!props.defaultHeight) {
return
}
setStrValue(props.defaultStringValue || "")
setHexValue(Buffer.from(props.defaultStringValue || ""))
}, [props.defaultStringValue])
useEffect(() => {
if (monacoEditor) {
props.onEditor && props.onEditor(monacoEditor)
monacoEditor.setSelection({startColumn: 0, startLineNumber: 0, endLineNumber: 0, endColumn: 0})
}
if (!props.simpleMode && !props.hideSearch && monacoEditor) {
setHighlightDecorations(monacoEditor.deltaDecorations(highlightDecorations, []))
}
}, [monacoEditor])
useEffect(() => {
if (props.readOnly) {
setStrValue(new Buffer(props.originValue).toString('utf8'))
setHexValue(new Buffer(props.originValue))
}
if (props.readOnly && monacoEditor) {
monacoEditor.setSelection({startColumn: 0, startLineNumber: 0, endLineNumber: 0, endColumn: 0})
}
}, [
props.originValue,
props.readOnly,
// monacoEditor,
])
useEffect(() => {
if (props.readOnly) {
return
}
setStrValue(new Buffer(props.originValue).toString('utf8'))
setHexValue(new Buffer(props.originValue))
}, [props.refreshTrigger])
useEffect(() => {
props.onChange && props.onChange(Buffer.from(strValue))
}, [strValue])
useEffect(() => {
props.onChange && props.onChange(hexValue)
}, [hexValue])
const empty = !!props.emptyOr && props.originValue.length == 0
return <div style={{width: "100%", height: "100%"}}>
<Card
className={"flex-card"}
size={"small"} loading={props.loading}
bordered={props.bordered}
style={{height: "100%", width: "100%"}}
title={!props.noHeader && <Space>
{!props.noTitle && <span>{isResponse ? "Response" : "Request"}</span>}
{!props.simpleMode ? (!props.noHex && <SelectOne
label={" "}
colon={false} value={mode}
setValue={e => {
if (mode === "text" && e === "hex") {
setHexValue(new Buffer(strValue))
}
if (mode === "hex" && e === "text") {
setStrValue(Buffer.from(hexValue).toString("utf8"))
}
setMode(e)
}}
data={[
{text: "TEXT", value: "text"},
{text: "HEX", value: "hex"},
]} size={"small"} formItemStyle={{marginBottom: 0}}
/>) : <Form.Item style={{marginBottom: 0}}>
<Tag color={"geekblue"}>{mode.toUpperCase()}</Tag>
</Form.Item>}
{mode === "text" && !props.hideSearch && !props.simpleMode && <Input.Search
size={"small"} value={searchValue}
onChange={e => {
setSearchValue(e.target.value)
}} enterButton={true}
onSearch={e => {
highlightActive(searchValue)
}}
/>}
</Space>}
bodyStyle={{padding: 0, width: "100%", display: "flex", flexDirection: "column"}}
extra={!props.noHeader && <Space size={2}>
{props.extra}
{props.sendToWebFuzzer && <Button
size={"small"}
type={"primary"}
icon={<ThunderboltFilled/>}
onClick={() => {
ipcRenderer.invoke("send-to-tab", {
type: "fuzzer",
data: {isHttps: props.defaultHttps || false, request: strValue}
})
}}
>FUZZ</Button>}
<Tooltip title={"不自动换行"}>
<Button
size={"small"}
type={noWordwrap ? "link" : "primary"}
icon={<EnterOutlined/>}
onClick={() => {
setNoWordwrap(!noWordwrap)
}}
/>
</Tooltip>
{!props.simpleMode && <Popover
title={"配置编辑器"}
content={<>
<Form
onSubmitCapture={e => {
e.preventDefault()
}} size={"small"}
layout={"horizontal"}
wrapperCol={{span: 16}}
labelCol={{span: 8}}
>
<SelectOne
formItemStyle={{marginBottom: 4}}
label={"字号"}
data={[
{text: "小", value: 12},
{text: "中", value: 16},
{text: "大", value: 20},
]} value={fontSize} setValue={setFontSize}
/>
<Form.Item label={"全屏"}>
<Button
size={"small"}
type={"link"}
icon={<FullscreenOutlined/>}
onClick={() => {
showDrawer({
title: "全屏", width: "100%",
content: <div style={{height: "100%", width: "100%"}}>
<HTTPPacketEditor
{...props} disableFullscreen={true}
defaultHeight={670}
/>
</div>
})
}}
/>
</Form.Item>
</Form>
</>}
>
<Button
icon={<SettingOutlined/>}
type={"link"} size={"small"}
/>
</Popover>}
</Space>}
>
<div style={{flex: 1}}>
{empty && props.emptyOr}
{mode === "text" && !empty && <YakEditor
loading={props.loading}
type={props.language || (isResponse ? "html" : "http")}
value={
props.readOnly && props.originValue.length > 0 ?
new Buffer(props.originValue).toString() : strValue
}
readOnly={props.readOnly}
setValue={setStrValue} noWordWrap={noWordwrap}
fontSize={fontSize}
actions={[
...(props.actions || []),
...MonacoEditorCodecActions,
...(props.noPacketModifier ? [] : MonacoEditorMutateHTTPRequestActions),
...(props.noPacketModifier ? [] : MonacoEditorFullCodecActions),
]}
editorDidMount={editor => {
setMonacoEditor(editor)
}}
{...props.extraEditorProps}
/>}
{mode === "hex" && !empty && <HexEditor
className={props.system === 'Windows_NT' ? 'hex-editor-style' : ''}
showAscii={true}
data={hexValue}
showRowLabels={true}
showColumnLabels={false}
nonce={nonce}
onSetValue={props.readOnly ? undefined : handleSetValue}
/>}
</div>
</Card>
</div>
})
