@ant-design/icons#FileUnknownOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#FileUnknownOutlined.
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: ChartDraggableSourceContainer.tsx From datart with Apache License 2.0 | 4 votes |
|
ChartDraggableSourceContainer: FC<
{
availableSourceFunctions?: string[];
onDeleteComputedField?: (fieldName) => void;
onEditComputedField?: (fieldName) => void;
onSelectionChange?: (dataItemId, cmdKeyActive, shiftKeyActive) => void;
onClearCheckedList?: () => void;
} & ChartDataViewMeta
> = memo(function ChartDraggableSourceContainer({
id,
name: colName,
type,
subType,
category,
expression,
selectedItems,
isActive,
availableSourceFunctions,
role,
children,
onDeleteComputedField,
onEditComputedField,
onSelectionChange,
onClearCheckedList,
}) {
const t = useI18NPrefix(`viz.workbench.dataview`);
const [showChild, setShowChild] = useToggle(false);
const isHierarchyField = role === ColumnRole.Hierarchy;
const [, drag] = useDrag(
() => ({
type: isHierarchyField
? CHART_DRAG_ELEMENT_TYPE.DATASET_COLUMN_GROUP
: CHART_DRAG_ELEMENT_TYPE.DATASET_COLUMN,
canDrag: true,
item: selectedItems?.length
? selectedItems.map(item => buildDragItem(item))
: buildDragItem({ id: colName, type, subType, category }, children),
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
end: onClearCheckedList,
}),
[selectedItems],
);
const styleClasses: Array<string> = useMemo(() => {
let styleArr: Array<string> = [];
if (isActive) {
styleArr.push('container-active');
}
return styleArr;
}, [isActive]);
const renderContent = useMemo(() => {
const _handleMenuClick = (e, fieldName) => {
if (e.key === 'delete') {
onDeleteComputedField?.(fieldName);
} else {
onEditComputedField?.(fieldName);
}
};
const _isAllowMoreAction = () => {
return (
ChartDataViewFieldCategory.Field === category ||
ChartDataViewFieldCategory.Hierarchy === category
);
};
const _getIconStyle = () => {
if (role === ColumnRole.Hierarchy) {
return WARNING;
}
if (
ChartDataViewFieldCategory.ComputedField === category ||
ChartDataViewFieldCategory.AggregateComputedField === category
) {
return WARNING;
} else {
switch (type) {
case DataViewFieldType.NUMERIC:
return SUCCESS;
default:
return INFO;
}
}
};
const _getExtraActionMenus = () => {
return (
<Menu onClick={e => _handleMenuClick(e, colName)}>
<Menu.Item key="edit">{t('editField')}</Menu.Item>
<Menu.Item key="delete">{t('deleteField')}</Menu.Item>
</Menu>
);
};
let icon = <FileUnknownOutlined />;
const props = {
style: {
alignSelf: 'center',
color: _getIconStyle(),
},
};
if (role === ColumnRole.Hierarchy) {
if (!showChild) {
icon = (
<FolderAddOutlined
{...props}
onClick={() => {
setShowChild(!showChild);
}}
/>
);
} else {
icon = (
<FolderOpenOutlined
{...props}
onClick={() => {
setShowChild(!showChild);
}}
/>
);
}
} else {
switch (type) {
case DataViewFieldType.STRING:
icon = <FieldStringOutlined {...props} />;
break;
case DataViewFieldType.NUMERIC:
icon = <NumberOutlined {...props} />;
break;
case DataViewFieldType.DATE:
icon = <CalendarOutlined {...props} />;
break;
default:
icon = <FileUnknownOutlined {...props} />;
}
}
return type === 'DATE' && category === 'field' ? (
<Row align="middle" style={{ width: '100%' }}>
<CollapseWrapper
defaultActiveKey={[colName]}
ghost
expandIconPosition="right"
expandIcon={({ isActive }) => {
return <DownOutlined rotate={isActive ? -180 : 0} />;
}}
>
<Panel
key={colName}
header={
<div ref={drag}>
<IW fontSize={FONT_SIZE_HEADING}>{icon}</IW>
<p>{colName}</p>
</div>
}
>
{DATE_LEVELS.map((item, i) => {
if (availableSourceFunctions?.includes(item.expression)) {
return (
<DateLevelFieldContainer
colName={colName}
key={i}
item={item}
onClearCheckedList={onClearCheckedList}
/>
);
}
return null;
})}
</Panel>
</CollapseWrapper>
</Row>
) : (
<Row align="middle" style={{ width: '100%' }}>
<IW fontSize={FONT_SIZE_HEADING}>{icon}</IW>
<StyledFieldContent>{colName}</StyledFieldContent>
<div onClick={stopPPG}>
<Dropdown
disabled={_isAllowMoreAction()}
overlay={_getExtraActionMenus()}
trigger={['click']}
>
<ToolbarButton
icon={<MoreOutlined />}
iconSize={FONT_SIZE_BASE}
className="setting"
onClick={e => e.preventDefault()}
/>
</Dropdown>
</div>
</Row>
);
}, [
type,
role,
colName,
showChild,
setShowChild,
onDeleteComputedField,
onEditComputedField,
category,
t,
onClearCheckedList,
drag,
availableSourceFunctions,
]);
const renderChildren = useMemo(() => {
return (children || []).map(item => (
<ChartDraggableSourceContainer
key={item.id}
id={item.id}
name={item.id}
category={item.category}
expression={item.expression}
type={item.type}
role={item.role}
children={item.children}
onDeleteComputedField={onDeleteComputedField}
onClearCheckedList={onClearCheckedList}
selectedItems={selectedItems}
/>
));
}, [children, onDeleteComputedField, onClearCheckedList, selectedItems]);
return (
<Container
flexDirection={children ? 'column' : 'row'}
onClick={e => {
if (isHierarchyField) {
return;
}
onSelectionChange?.(colName, e.metaKey || e.ctrlKey, e.shiftKey);
}}
ref={type === 'DATE' && category === 'field' ? null : drag}
className={
type === 'DATE' && category === 'field' ? '' : styleClasses.join(' ')
}
>
{renderContent}
{showChild && renderChildren}
</Container>
);
})
Example #3
| Source File: DataModelNode.tsx From datart with Apache License 2.0 | 4 votes |
|
DataModelNode: FC<{
node: Column;
className?: string;
onNodeTypeChange: (type: any, name: string) => void;
onMoveToHierarchy: (node: Column) => void;
onCreateHierarchy?: (node: Column) => void;
onDeleteFromHierarchy?: (node: Column) => void;
}> = memo(
({
node,
className,
onCreateHierarchy,
onMoveToHierarchy,
onNodeTypeChange,
onDeleteFromHierarchy,
}) => {
const t = useI18NPrefix('view.model');
const tg = useI18NPrefix('global');
const [isHover, setIsHover] = useState(false);
const hasCategory = true;
const renderNode = (node, isDragging) => {
let icon;
switch (node.type) {
case DataViewFieldType.NUMERIC:
icon = (
<NumberOutlined style={{ alignSelf: 'center', color: SUCCESS }} />
);
break;
case DataViewFieldType.STRING:
icon = (
<FieldStringOutlined style={{ alignSelf: 'center', color: INFO }} />
);
break;
case DataViewFieldType.DATE:
icon = (
<CalendarOutlined style={{ alignSelf: 'center', color: INFO }} />
);
break;
default:
icon = (
<FileUnknownOutlined
style={{ alignSelf: 'center', color: WARNING }}
/>
);
break;
}
const isAllowCreateHierarchy = node => {
return ALLOW_COMBINE_COLUMN_TYPES.includes(node.type);
};
return (
<div
className="content"
onMouseEnter={() => {
setIsHover(true);
}}
onMouseLeave={() => {
setIsHover(false);
}}
>
<Dropdown
trigger={['click']}
overlay={
<Menu
selectedKeys={[node.type, `category-${node.category}`]}
className="datart-schema-table-header-menu"
onClick={({ key }) => onNodeTypeChange(key, node?.name)}
>
{Object.values(DataViewFieldType).map(t => (
<Menu.Item key={t}>
{tg(`columnType.${t.toLowerCase()}`)}
</Menu.Item>
))}
{hasCategory && (
<>
<Menu.Divider />
<Menu.SubMenu
key="categories"
title={t('category')}
popupClassName="datart-schema-table-header-menu"
>
{Object.values(ColumnCategories).map(t => (
<Menu.Item key={`category-${t}`}>
{tg(`columnCategory.${t.toLowerCase()}`)}
</Menu.Item>
))}
</Menu.SubMenu>
</>
)}
</Menu>
}
>
<Tooltip
title={hasCategory ? t('typeAndCategory') : t('category')}
placement="left"
>
<StyledIW fontSize={FONT_SIZE_TITLE}>{icon}</StyledIW>
</Tooltip>
</Dropdown>
<span>{node.name}</span>
<div className="action">
{isHover &&
!isDragging &&
isAllowCreateHierarchy(node) &&
onCreateHierarchy && (
<Tooltip title={t('newHierarchy')}>
<Button
type="link"
onClick={() => onCreateHierarchy(node)}
icon={<BranchesOutlined />}
/>
</Tooltip>
)}
{isHover && !isDragging && isAllowCreateHierarchy(node) && (
<Tooltip title={t('addToHierarchy')}>
<Button
type="link"
onClick={() => onMoveToHierarchy(node)}
icon={<SisternodeOutlined />}
/>
</Tooltip>
)}
{isHover && !isDragging && onDeleteFromHierarchy && (
<Tooltip title={t('delete')}>
<Button
type="link"
onClick={() => onDeleteFromHierarchy(node)}
icon={<DeleteOutlined />}
/>
</Tooltip>
)}
</div>
</div>
);
};
return (
<Draggable key={node?.name} draggableId={node?.name} index={node?.index}>
{(draggableProvided, draggableSnapshot) => (
<StyledDataModelNode
isDragging={draggableSnapshot.isDragging}
className={className}
style={draggableProvided.draggableProps.style}
ref={draggableProvided.innerRef}
{...draggableProvided.draggableProps}
{...draggableProvided.dragHandleProps}
>
{renderNode(node, draggableSnapshot.isDragging)}
</StyledDataModelNode>
)}
</Draggable>
);
},
)
