@ant-design/icons#MonitorOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#MonitorOutlined.
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: Toolbar.tsx From datart with Apache License 2.0 | 4 votes |
|
Toolbar = memo(({ allowManage, allowEnableViz }: ToolbarProps) => {
const { actions } = useViewSlice();
const dispatch = useDispatch();
const { onRun, onSave } = useContext(EditorContext);
const { showSaveForm } = useContext(SaveFormContext);
const sources = useSelector(selectSources);
const history = useHistory();
const histState = history.location.state as any;
const viewsData = useSelector(selectViews);
const t = useI18NPrefix('view.editor');
const saveAsView = useSaveAsView();
const startAnalysis = useStartAnalysis();
const id = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'id' }),
) as string;
const name = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'name' }),
) as string;
const parentId = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'parentId' }),
) as string;
const config = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'config' }),
) as object;
const sourceId = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'sourceId' }),
) as string;
const stage = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'stage' }),
) as ViewViewModelStages;
const status = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'status' }),
) as ViewStatus;
const script = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'script' }),
) as string;
const fragment = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'fragment' }),
) as string;
const size = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'size' }),
) as number;
const error = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'error' }),
) as string;
const ViewIndex = useSelector(state =>
selectCurrentEditingViewAttr(state, { name: 'index' }),
) as number;
const isArchived = status === ViewStatus.Archived;
const formatSQL = useCallback(() => {
dispatch(
actions.changeCurrentEditingView({
script: format(script),
}),
);
}, [dispatch, actions, script]);
const showEdit = useCallback(() => {
showSaveForm({
type: CommonFormTypes.Edit,
visible: true,
initialValues: {
name,
parentId,
config,
},
parentIdLabel: t('folder'),
onSave: (values, onClose) => {
let index = ViewIndex;
if (isParentIdEqual(parentId, values.parentId)) {
index = getInsertedNodeIndex(values, viewsData);
}
dispatch(
actions.changeCurrentEditingView({
...values,
parentId: values.parentId || null,
index,
}),
);
dispatch(saveView({ resolve: onClose }));
},
});
}, [
showSaveForm,
actions,
dispatch,
name,
parentId,
config,
viewsData,
ViewIndex,
t,
]);
const sourceChange = useCallback(
value => {
dispatch(actions.changeCurrentEditingView({ sourceId: value }));
},
[dispatch, actions],
);
const sizeMenuClick = useCallback(
({ key }) => {
dispatch(actions.changeCurrentEditingView({ size: Number(key) }));
},
[dispatch, actions],
);
useEffect(() => {
if (histState?.sourcesId && sources) {
sourceChange(histState.sourcesId);
}
}, [histState?.sourcesId, sourceChange, sources]);
return (
<Container>
<Operates>
<Space split={<Divider type="vertical" className="divider" />}>
{allowManage && (
<Select
placeholder={t('source')}
value={sourceId}
bordered={false}
disabled={isArchived}
onChange={sourceChange}
className="source"
>
{sources.map(({ id, name }) => (
<Select.Option key={id} value={id}>
{name}
</Select.Option>
))}
</Select>
)}
<Space>
<Tooltip
title={
<TipTitle
title={[
`${fragment ? t('runSelection') : t('run')}`,
t('runWinTip'),
t('runMacTip'),
]}
/>
}
placement="bottom"
>
<ToolbarButton
icon={
stage === ViewViewModelStages.Running ? (
<PauseOutlined />
) : (
<CaretRightOutlined />
)
}
color={fragment ? WARNING : INFO}
onClick={onRun}
/>
</Tooltip>
<Tooltip title={t('beautify')} placement="bottom">
<ToolbarButton
icon={<AlignCenterOutlined />}
disabled={isArchived}
onClick={formatSQL}
/>
</Tooltip>
</Space>
<Dropdown
trigger={['click']}
overlay={
<Menu onClick={sizeMenuClick}>
{PREVIEW_SIZE_LIST.map(s => (
<Menu.Item key={s}>{s}</Menu.Item>
))}
</Menu>
}
>
<ToolbarButton size="small">{`Limit: ${size}`}</ToolbarButton>
</Dropdown>
<Chronograph
running={stage === ViewViewModelStages.Running}
status={
error
? 'error'
: stage >= ViewViewModelStages.Running
? stage === ViewViewModelStages.Running
? 'processing'
: 'success'
: 'default'
}
/>
</Space>
</Operates>
<Actions>
<Space>
{allowManage && (
<Tooltip
title={
<TipTitle
title={[t('save'), t('saveWinTip'), t('saveMacTip')]}
/>
}
placement="bottom"
>
<ToolbarButton
icon={<SaveFilled />}
disabled={isArchived || stage !== ViewViewModelStages.Saveable}
color={INFO}
onClick={onSave}
/>
</Tooltip>
)}
{allowManage && (
<Tooltip title={t('info')} placement="bottom">
<ToolbarButton
icon={<SettingFilled />}
disabled={isArchived || isNewView(id)}
color={INFO}
onClick={showEdit}
/>
</Tooltip>
)}
{allowManage && (
<Tooltip title={t('saveAs')} placement="bottom">
<ToolbarButton
icon={<CopyFilled />}
onClick={() => saveAsView(id)}
disabled={isNewView(id)}
color={INFO}
/>
</Tooltip>
)}
{/* <Tooltip title={t('saveFragment')} placement="bottom">
<ToolbarButton icon={<SnippetsFilled />} />
</Tooltip> */}
{allowEnableViz && (
<Tooltip title={t('startAnalysis')} placement="bottom">
<ToolbarButton
disabled={isNewView(id)}
icon={<MonitorOutlined />}
color={INFO}
onClick={() => {
startAnalysis(id);
}}
/>
</Tooltip>
)}
</Space>
</Actions>
</Container>
);
})
Example #3
| Source File: FolderTree.tsx From datart with Apache License 2.0 | 4 votes |
|
FolderTree = memo(({ treeData }: FolderTreeProps) => {
const dispatch = useDispatch();
const history = useHistory();
const { showSaveForm } = useContext(SaveFormContext);
const loading = useSelector(selectViewListLoading);
const currentEditingViewKey = useSelector(selectCurrentEditingViewKey);
const orgId = useSelector(selectOrgId);
const viewsData = useSelector(selectViews);
const isOwner = useSelector(selectIsOrgOwner);
const permissionMap = useSelector(selectPermissionMap);
const t = useI18NPrefix('view');
const tg = useI18NPrefix('global');
const saveAsView = useSaveAsView();
const startAnalysis = useStartAnalysis();
const allowEnableViz = useAccess({
type: 'module',
module: ResourceTypes.Viz,
id: '',
level: PermissionLevels.Enable,
})(true);
useEffect(() => {
dispatch(getViews(orgId));
}, [dispatch, orgId]);
const redirect = useCallback(
currentEditingViewKey => {
if (currentEditingViewKey) {
history.push(`/organizations/${orgId}/views/${currentEditingViewKey}`);
} else {
history.push(`/organizations/${orgId}/views`);
}
},
[history, orgId],
);
const archive = useCallback(
(id, isFolder) => e => {
e.stopPropagation();
dispatch(
deleteView({
id,
archive: !isFolder,
resolve: () => {
dispatch(removeEditingView({ id, resolve: redirect }));
message.success(
isFolder
? tg('operation.deleteSuccess')
: tg('operation.archiveSuccess'),
);
},
}),
);
},
[dispatch, redirect, tg],
);
const moreMenuClick = useCallback(
({ id, name, parentId, index, isFolder }) =>
({ key, domEvent }) => {
domEvent.stopPropagation();
switch (key) {
case 'info':
showSaveForm({
type: CommonFormTypes.Edit,
visible: true,
simple: isFolder,
initialValues: {
id,
name,
parentId,
},
parentIdLabel: t('saveForm.folder'),
onSave: (values, onClose) => {
if (isParentIdEqual(parentId, values.parentId)) {
index = getInsertedNodeIndex(values, viewsData);
}
dispatch(
updateViewBase({
view: {
id,
...values,
parentId: values.parentId || null,
index,
},
resolve: onClose,
}),
);
},
});
break;
case 'delete':
break;
case 'saveAs':
saveAsView(id);
break;
case 'startAnalysis':
startAnalysis(id);
break;
default:
break;
}
},
[dispatch, showSaveForm, viewsData, t, saveAsView, startAnalysis],
);
const renderTreeTitle = useCallback(
node => {
const { title, path, isFolder, id } = node;
const isAuthorized = getCascadeAccess(
isOwner,
permissionMap,
ResourceTypes.View,
path,
PermissionLevels.Manage,
);
return (
<TreeTitle>
<h4>{`${title}`}</h4>
{isAuthorized || allowEnableViz ? (
<Popup
trigger={['click']}
placement="bottom"
content={
<Menu
prefixCls="ant-dropdown-menu"
selectable={false}
onClick={moreMenuClick(node)}
>
{isAuthorized && (
<MenuListItem
key="info"
prefix={<EditOutlined className="icon" />}
>
{tg('button.info')}
</MenuListItem>
)}
{isAuthorized && !isFolder && (
<MenuListItem
key="saveAs"
prefix={<CopyFilled className="icon" />}
>
{tg('button.saveAs')}
</MenuListItem>
)}
{allowEnableViz && !isFolder && (
<MenuListItem
prefix={<MonitorOutlined className="icon" />}
key="startAnalysis"
>
{t('editor.startAnalysis')}
</MenuListItem>
)}
{isAuthorized && (
<MenuListItem
key="delete"
prefix={<DeleteOutlined className="icon" />}
>
<Popconfirm
title={
isFolder
? tg('operation.deleteConfirm')
: tg('operation.archiveConfirm')
}
onConfirm={archive(id, isFolder)}
>
{isFolder ? tg('button.delete') : tg('button.archive')}
</Popconfirm>
</MenuListItem>
)}
</Menu>
}
>
<span className="action" onClick={stopPPG}>
<MoreOutlined />
</span>
</Popup>
) : (
''
)}
</TreeTitle>
);
},
[archive, moreMenuClick, tg, allowEnableViz, t, isOwner, permissionMap],
);
const treeSelect = useCallback(
(_, { node }) => {
if (!node.isFolder && node.id !== currentEditingViewKey) {
history.push(`/organizations/${orgId}/views/${node.id}`);
}
},
[history, orgId, currentEditingViewKey],
);
const onDrop = info => {
onDropTreeFn({
info,
treeData,
callback: (id, parentId, index) => {
dispatch(
updateViewBase({
view: {
id,
parentId,
index: index,
name: info.dragNode.name,
},
resolve: () => {},
}),
);
},
});
};
return (
<Tree
loading={loading}
treeData={treeData}
titleRender={renderTreeTitle}
selectedKeys={[currentEditingViewKey]}
onSelect={treeSelect}
defaultExpandAll
onDrop={onDrop}
draggable
/>
);
})
