@ant-design/icons#CloudSyncOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#CloudSyncOutlined.
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: QueueListSharedComponents.tsx From office-hours with GNU General Public License v3.0 | 6 votes |
|
function QueueUpToDateInfo({ queueId }: { queueId: number }): ReactElement {
const [lastUpdated, setLastUpdated] = useState(null);
const { isLive } = useQueue(queueId, setLastUpdated);
return (
<QueuePropertyRow className="hide-in-percy">
{isLive || lastUpdated ? <CloudSyncOutlined /> : <FrownOutlined />}
<QueuePropertyText className="hide-in-percy">
{isLive ? (
"Queue up to date"
) : lastUpdated ? (
<RenderEvery
render={() => {
const secondsAgo = (Date.now() - lastUpdated.getTime()) / 1000;
return `Queue updated ${
secondsAgo < 60
? Math.ceil(secondsAgo) + "s"
: moment(lastUpdated).fromNow(true)
} ago`;
}}
interval={1000}
/>
) : (
"Queue may be out of date"
)}
</QueuePropertyText>
</QueuePropertyRow>
);
}
Example #2
| Source File: sample.tsx From drip-table with MIT License | 5 votes |
|
Demo = () => (
<DripTableGenerator
mockDataSource
style={{ height: 756 }}
driver={DripTableDriverAntDesign}
schema={initialSchema}
dataSource={mockData}
dataFields={['id', 'name', 'status', 'description', 'ext.state']}
onExportSchema={(schema) => { message.success('已导出'); console.log(schema); }}
customComponents={{ custom: { TextComponent } }}
customComponentPanel={components}
customGlobalConfigPanel={CustomGlobalConfigPanel}
slots={{
'header-slot-sample': React.memo((props) => {
const [state, setState] = React.useState({ count: 0 });
return (
<div className={props.className} style={{ border: '1px solid #1890ff', borderRadius: '3px' }}>
<Button type="primary" onClick={() => setState(st => ({ count: st.count + 1 }))}>Header Slot Sample</Button>
<span style={{ padding: '0 8px', color: '#1890ff' }}>{ `Count: ${state.count}` }</span>
</div>
);
}),
default: props => <div>{ `未知插槽类型：${props.slotType}` }</div>,
}}
subtableTitle={(record, index, parent, subtable) => <div style={{ textAlign: 'center' }}>{ `“表格(id:${parent.id})”行“${record.name}”的子表 （${subtable.dataSource.length} 条）` }</div>}
subtableFooter={(record, index, parent, subtable) => (
subtable.id === 'sample-table-sub-level-1'
? (
<div
style={{ cursor: 'pointer', textAlign: 'center', userSelect: 'none' }}
onClick={() => {
message.info(`加载更多“表格(id:${parent.id})”行“${record.name}”(${index})的子表数据，已有 ${subtable.dataSource.length} 条`);
console.log('expandable-footer-click', record, index, parent, subtable);
}}
>
<CloudSyncOutlined />
<span style={{ marginLeft: '5px' }}>加载更多</span>
</div>
)
: void 0
)}
rowExpandable={(record, parent) => parent.id === 'sample-table' && record.id === 5}
expandedRowRender={(record, index, parent) => (<div style={{ textAlign: 'center', margin: '20px 0' }}>{ `“表格(id:${parent.id})”行“${record.name}”的展开自定义渲染` }</div>)}
ajv={{ additionalProperties: true }}
/>
)
Example #3
| Source File: sample.tsx From drip-table with MIT License | 4 votes |
|
Demo = () => {
const [loading, setLoading] = React.useState(false);
const [filters, setFilters] = React.useState<{ key: string; values: unknown[] }[] | undefined>(void 0);
const [pageNum, setPageNum] = React.useState(1);
const [pageSize, setPageSize] = React.useState(10);
const [dataBase, setDataBase] = React.useState(mockData);
const [totalNum, setTotalNum] = React.useState(dataBase.length);
const [dataSource, setDataSource] = React.useState(dataBase);
const [schema, setSchema] = React.useState(initSchema);
const [editVisible, setEditVisible] = React.useState(false);
const [allSelected, setAllSelected] = React.useState(false);
const dripTable: React.MutableRefObject<DripTableInstance | null> = React.useRef(null);
React.useEffect(
() => {
setDataBase(mockData);
},
[mockData],
);
React.useEffect(
() => {
const filteredDataSource = dataBase.filter(ds => !filters?.length || filters.some(f => f.values?.includes(ds[f.key])));
setTotalNum(filteredDataSource.length);
setDataSource(filteredDataSource.slice((pageNum - 1) * pageSize, Math.min(pageNum * pageSize, filteredDataSource.length)));
},
[dataBase, filters, pageSize, pageNum],
);
const fetchPageData = (nextFilters: Record<string, string[]>, nextPageSize: number, nextPageNum: number) => {
if (loading) {
return;
}
setTimeout(
() => {
setLoading(false);
setFilters(Object.entries(nextFilters).map(([key, values]) => ({ key, values })));
setPageSize(nextPageSize);
setPageNum(nextPageNum);
},
500,
);
setLoading(true);
};
function selectAllRecord() {
const tableInstance = dripTable.current;
const allKeys = dataSource.map((rec, idx) => idx);
if (tableInstance) {
const selectedKeys = tableInstance.selectedRowKeys;
if (selectedKeys.length < allKeys.length) {
tableInstance.select(allKeys);
setAllSelected(true);
} else {
tableInstance.select([]);
setAllSelected(false);
}
}
}
return (
<React.Fragment>
<div style={{ padding: '0 0 30px', textAlign: 'left' }}>
<Button style={{ marginRight: '5px' }} type="primary" onClick={() => { setEditVisible(!editVisible); }}>编辑</Button>
<Button style={{ marginRight: '5px' }} type="primary" onClick={selectAllRecord}>
{ allSelected && '取消' }
全选
</Button>
</div>
<DripTable<SampleRecordType, {
CustomColumnSchema: CustomColumnSchema;
CustomComponentEvent: CustomComponentEvent;
SubtableDataSourceKey: SubtableDataSourceKey;
}>
ref={dripTable}
driver={DripTableDriverAntDesign}
schema={schema}
loading={loading}
total={totalNum}
dataSource={dataSource}
components={{ custom: CustomComponents }}
slots={{
'header-slot-sample': React.memo((props) => {
const [state, setState] = React.useState({ count: 0 });
return (
<div className={props.className} style={{ border: '1px solid #1890ff', borderRadius: '3px' }}>
<Button type="primary" onClick={() => setState(st => ({ count: st.count + 1 }))}>Header Slot Sample</Button>
<span style={{ padding: '0 8px', color: '#1890ff' }}>{ `Count: ${state.count}` }</span>
</div>
);
}),
default: props => <div>{ `未知插槽类型：${props.slotType}` }</div>,
}}
subtableTitle={(record, index, parent, subtable) => <div style={{ textAlign: 'center' }}>{ `“表格(id:${parent.id})”行“${record.name}”的子表 （${subtable.dataSource.length} 条）` }</div>}
subtableFooter={(record, index, parent, subtable) => (
subtable.id === 'sample-table-sub-level-1'
? (
<div
style={{ cursor: 'pointer', textAlign: 'center', userSelect: 'none' }}
onClick={() => {
message.info(`加载更多“表格(id:${parent.id})”行“${record.name}”(${index})的子表数据，已有 ${subtable.dataSource.length} 条`);
console.log('expandable-footer-click', record, index, parent, subtable);
}}
>
<CloudSyncOutlined />
<span style={{ marginLeft: '5px' }}>加载更多</span>
</div>
)
: void 0
)}
rowExpandable={(record, parent) => parent.id === 'sample-table' && record.id === 5}
expandedRowRender={(record, index, parent) => (<div style={{ textAlign: 'center', margin: '20px 0' }}>{ `“表格(id:${parent.id})”行“${record.name}”的展开自定义渲染` }</div>)}
onEvent={(event, record, index) => {
if (event.type === 'drip-link-click') {
const name = event.payload;
message.info(`你点击了第${index + 1}行“${record.name} (ID: ${record.id})”的“${name}”事件按钮。`);
console.log(name, record, index);
} else if (event.type === 'custom') {
message.info(`自定义事件“${event.name}”触发于行“${record.name} (ID: ${record.id})”的自定义组件。`);
console.log(event, record, index);
}
}}
onFilterChange={(...args) => { console.log('onFilterChange', ...args); }}
onPageChange={(...args) => { console.log('onPageChange', ...args); }}
onChange={(nextPagination, nextFilters) => {
console.log('onChange', nextPagination, nextFilters);
fetchPageData(nextFilters, nextPagination.pageSize ?? pageSize, nextPagination.current ?? pageNum);
}}
onSelectionChange={(selectedKeys, selectedRows) => {
setAllSelected(selectedRows.length >= dataSource.length);
}}
onSearch={searchParams => console.log(searchParams)}
onInsertButtonClick={event => console.log(event)}
/>
<div className={styles['popup-wrapper']} style={{ height: editVisible ? '70vh' : '0' }} />
<div className={styles['popup-layer']} style={{ height: editVisible ? '70%' : '0' }}>
<div style={{ position: 'absolute', right: '10px', top: '8px', zIndex: 1 }}>
<CloseCircleTwoTone style={{ fontSize: '24px' }} onClick={() => { setEditVisible(!editVisible); }} />
</div>
<div className={styles['popup-main']}>
<Tabs className={styles['popup-tabs']} size="small">
<Tabs.TabPane key="SCHEMA" tab="SCHEMA" className={styles['json-edit-tab']}>
<JsonEditor
value={schema}
onChange={(d: typeof schema) => {
setSchema(d);
setPageSize(d.pagination ? d.pagination.pageSize || 0 : 10);
}}
/>
</Tabs.TabPane>
<Tabs.TabPane key="DATA" tab="DATA" className={styles['json-edit-tab']}>
<JsonEditor
value={dataBase}
onChange={(d: typeof dataBase) => { setDataBase(d); }}
/>
</Tabs.TabPane>
</Tabs>
</div>
</div>
</React.Fragment>
);
}
Example #4
| 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>
);
}
