tachybase_todo/packages/plugins/@tachybase/plugin-data-source-manager/src/client/component/BreadcumbTitle.tsx
sealday ede7ead8b1 chore(version): release v0.21.34 (#1045)
Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#1045
2024-05-24 01:06:06 +08:00

46 lines
1.5 KiB
TypeScript

import React, { useContext, useMemo } from 'react';
import { useApp, useCompile, useDataSourceManager } from '@tachybase/client';
import { RightOutlined } from '@ant-design/icons';
import { Breadcrumb, Space, Tag } from 'antd';
import { Link, useParams } from 'react-router-dom';
import { DataSourceContext } from '../DatabaseConnectionProvider';
import { lang, NAMESPACE } from '../locale';
import { statusEnum } from '../schema';
export const BreadcumbTitle = () => {
const app = useApp();
const { name } = useParams();
const compile = useCompile();
const dm = useDataSourceManager();
const { displayName } = dm.getDataSource(name) || {};
const { dataSource } = useContext(DataSourceContext);
const dataSourceValue = useMemo(() => dataSource || dm.getDataSource(name), [dataSource, name]);
const items = useMemo(() => {
const status = dataSourceValue?.status;
const option = statusEnum.find((v) => v.value === status);
const res = [
{ title: <Link to={app.pluginSettingsManager.getRoutePath(NAMESPACE)}>{lang('Data source manager')}</Link> },
];
if (dataSourceValue) {
res.push({
title: (
<Space>
<span>{compile(displayName)}</span>
{status && (
<Tag key={status} color={option?.color}>
{compile(option?.label)}
</Tag>
)}
</Space>
),
});
}
return res;
}, [dataSourceValue]);
return <Breadcrumb separator={<RightOutlined />} items={items} />;
};