@ant-design/icons#FieldStringOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#FieldStringOutlined.
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: SchemaTable.tsx From datart with Apache License 2.0 | 5 votes |
|
SchemaTable = memo(
({
height,
width: propsWidth,
model,
hierarchy,
dataSource,
hasCategory,
getExtraHeaderActions,
onSchemaTypeChange,
...tableProps
}: SchemaTableProps) => {
const dataSourceWithKey = useMemo(
() => dataSource?.map(o => ({ ...o, [ROW_KEY]: uuidv4() })),
[dataSource],
);
const columnWidthMap = useMemo(
() => getColumnWidthMap(model, dataSource || []),
[model, dataSource],
);
const t = useI18NPrefix('view.schemaTable');
const tg = useI18NPrefix('global');
const {
columns,
tableWidth,
}: {
columns: TableColumnType<object>[];
tableWidth: number;
} = useMemo(() => {
let tableWidth = 0;
const columns = Object.entries(model).map(([name, column]) => {
const hierarchyColumn = getHierarchyColumn(name, hierarchy) || column;
const width = columnWidthMap[name];
tableWidth += width;
let icon;
switch (hierarchyColumn.type) {
case DataViewFieldType.NUMERIC:
icon = <NumberOutlined />;
break;
case DataViewFieldType.DATE:
icon = <CalendarOutlined />;
break;
default:
icon = <FieldStringOutlined />;
break;
}
const extraActions =
getExtraHeaderActions && getExtraHeaderActions(name, hierarchyColumn);
const title = (
<>
<span className="content">{name}</span>
<Dropdown
trigger={['click']}
overlay={
<Menu
selectedKeys={[
hierarchyColumn.type,
`category-${hierarchyColumn.category}`,
]}
className="datart-schema-table-header-menu"
onClick={onSchemaTypeChange(name, hierarchyColumn)}
>
{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('type')}>
<ToolbarButton
size="small"
iconSize={FONT_SIZE_BASE}
className="suffix"
icon={icon}
/>
</Tooltip>
</Dropdown>
{extraActions}
</>
);
return {
title,
dataIndex: name,
width,
align:
column.type === DataViewFieldType.NUMERIC
? ('right' as const)
: ('left' as const),
};
});
return { columns, tableWidth };
}, [
model,
hierarchy,
columnWidthMap,
hasCategory,
getExtraHeaderActions,
onSchemaTypeChange,
t,
tg,
]);
return (
<VirtualTable
{...tableProps}
rowKey={ROW_KEY}
size="small"
components={{ header: { cell: TableHeader } }}
dataSource={dataSourceWithKey}
columns={columns}
scroll={{ x: tableWidth, y: height }}
width={propsWidth}
/>
);
},
)
Example #2
| 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 #3
| 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 #4
| 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>
);
},
)
Example #5
| Source File: Resource.tsx From datart with Apache License 2.0 | 4 votes |
|
Resource = memo(() => {
const t = useI18NPrefix('view.resource');
const dispatch = useDispatch();
const { editorCompletionItemProviderRef } = useContext(EditorContext);
const isDatabaseSchemaLoading = useSelector(selectDatabaseSchemaLoading);
const sourceId = useSelector<RootState>(state =>
selectCurrentEditingViewAttr(state, { name: 'sourceId' }),
) as string;
const databaseSchemas = useSelector(state =>
selectSourceDatabaseSchemas(state, { id: sourceId }),
);
const { height, ref: treeWrapperRef } = useResizeObserver({
refreshMode: 'debounce',
refreshRate: 200,
});
const buildTableNode = useCallback((database: DatabaseSchema) => {
const children =
database?.tables?.map(table => {
return buildTableColumnNode([database.dbName], table);
}) || [];
return buildAntdTreeNodeModel([], database.dbName, children, false);
}, []);
const buildTableColumnNode = (ancestors: string[] = [], table) => {
const children =
table?.columns?.map(column => {
return buildAntdTreeNodeModel(
ancestors.concat(table.tableName),
column?.name,
[],
true,
);
}) || [];
return buildAntdTreeNodeModel(ancestors, table.tableName, children, false);
};
const databaseTreeModel = useMemo(() => {
return (databaseSchemas || []).map(buildTableNode);
}, [buildTableNode, databaseSchemas]);
const { filteredData, onExpand, debouncedSearch, expandedRowKeys } =
useSearchAndExpand(
databaseTreeModel,
(keywords, data) => (data.title as string).includes(keywords),
DEFAULT_DEBOUNCE_WAIT,
true,
);
useEffect(() => {
if (databaseTreeModel && editorCompletionItemProviderRef) {
editorCompletionItemProviderRef.current?.dispose();
dispatch(
getEditorProvideCompletionItems({
sourceId,
resolve: getItem => {
editorCompletionItemProviderRef.current =
monaco.languages.registerCompletionItemProvider('sql', {
provideCompletionItems: getItem,
});
},
}),
);
}
}, [dispatch, sourceId, databaseTreeModel, editorCompletionItemProviderRef]);
const renderIcon = useCallback(({ value }) => {
if (Array.isArray(value)) {
switch (value.length) {
case 1:
return <DatabaseOutlined />;
case 2:
return <TableOutlined />;
}
} else {
switch (value.type as DataViewFieldType) {
case DataViewFieldType.STRING:
return <FieldStringOutlined />;
case DataViewFieldType.NUMERIC:
return <FieldNumberOutlined />;
case DataViewFieldType.DATE:
return <CalendarOutlined />;
}
}
}, []);
return (
<Container title="reference">
<Searchbar>
<Col span={24}>
<Input
prefix={<SearchOutlined className="icon" />}
placeholder={t('search')}
className="input"
bordered={false}
onChange={debouncedSearch}
/>
</Col>
</Searchbar>
<TreeWrapper ref={treeWrapperRef}>
<Tree
className="medium"
treeData={filteredData}
loading={isDatabaseSchemaLoading}
icon={renderIcon}
selectable={false}
defaultExpandedKeys={expandedRowKeys}
height={height}
onExpand={onExpand}
/>
</TreeWrapper>
</Container>
);
})
