tachybase_todo/packages/plugins/charts/src/client/ChartBlockEngineDesigner.tsx
被雨水过滤的空气-Rairn fd36c970bc
refactor(client)!: upgrade antd to v5 (#2078)
* refactor: change moment to dayjs

* refactor: remove antd css

* refactor: change @formily/antd to @formily/antd-v5

* chore: add dep

* chore: upgrade babel/core and typescript

* refactor: rename moment to dayjs

* fix(dayjs): add plugins

* refactor: fix type errors

* refactor: change default export to named export

* chore: upgrade ts-loader

* refactor: rename moment to dayjs

* refactor: fix type errors

* chore: upgrade deps for build

* fix: fix build errors

* fix: add antd reset css

* fix: fix build error

* chore: add __builtins__

* chore: optimize genStyleHook

* refactor(Calendar): less to css-in-js

* refactor(acl): less to css-in-js

* refactor(board): less to css-in-js

* chore: add antd-style

* refactor(acl): use antd-style

* refactor(board): use antd-style

* refactor: schema-initializer

* refactor: refactor genStyleHook

* refactor: kanban

* refactor: filter

* refactor: upload

* refactor: markdown

* refactor: rename className to componentCls

* refactor: rich-text

* style: fix style

* fix: fix merge error

* chore: update yarn.lock

* chore: upgrade formily

* style: fix pageHeader

* style: fix add button style

* style: fix header menu color

* chore: update yarn.lock

* chore: upgrade deps

* test: fix tests

* test: fix tests

* fix: fix build error

* fix: fix style of plugin doc

* fix: fix tests

* fix: fix drag bug

* refactor: remove useless code

* fix: fix Modal style (T-621)

* fix: fix box-shadow of subMenu (T-622)

* fix: fix style of linkage rules (T-623)

* fix: fix style of DataTemplate

* fix: fix style of variable (T-620)

* chore: update yarn.lock

* fix: avoid test failed

* test: fix error

* chore: update yarn.lock

* test: fix error

* test(dayjs): fix error

* fix: should delay show menu to avoid the menu not hidden

* test: skip failure test

* fix(mouseEnterDelay): change default value from 100 to 150

* test: avoid failed

* refactor: rename component names

* chore: optimize types

* chore: lock antd version

* fix: fix build

* fix: fix build

* fix: layout bg color use variable

* fix: fix style of buttons

* feat: remove theme config

* fix(calendar): fix style

* fix(mobile-client): fix dialog style

* fix: fix test

* refactor: make code gooder

* chore: change code

* fix: fix T-847

* fix: fix T-845

* fix: display block

* fix: danger button

* refactor: make tester better

* fix: change moment to dayjs

* fix: build error

* fix: import dayjs/plugin/isSameOrBefore

* refactor: downgrade @testing-library/react to fix warning

* fix: fix CI

* fix: upgrade deps to fix build

* fix: fix test

* fix: skip some filed tests to avoid error

* fix: fix build errors that maked by merge code

* refactor: remove moment

* fix: error

* feat: update doc

---------

Co-authored-by: chenos <chenlinxh@gmail.com>
2023-07-08 08:26:27 +08:00

239 lines
8.3 KiB
TypeScript

import { FormDialog, FormLayout } from '@formily/antd-v5';
import { SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
import {
APIClientProvider,
GeneralSchemaDesigner,
SchemaComponent,
SchemaComponentOptions,
SchemaSettings,
css,
i18n,
useAPIClient,
useCompile,
useDesignable,
} from '@nocobase/client';
import { Card } from 'antd';
import JSON5 from 'json5';
import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ChartBlockEngineMetaData } from './ChartBlockEngine';
import { Options } from './ChartBlockInitializer';
import DataSetPreviewTable from './DataSetPreviewTable';
import { useFieldsById } from './hooks';
import { lang } from './locale';
import { templates } from './templates';
export const jsonConfigDesc = (title: string, link: string) => {
return (
<span>
{lang('Json config references: ')}
<a href={link} target="_blank" rel="noreferrer">
{lang(title)}
</a>
</span>
);
};
const validateJSON = {
validator: `{{(value, rule)=> {
if (!value) {
return '';
}
try {
const val = JSON.parse(value);
if(!isNaN(val)) {
return false;
}
return true;
} catch(error) {
console.error(error);
return false;
}
}}}`,
message: '{{t("Invalid JSON format",{ ns: "charts" })}}',
};
export const ChartBlockEngineDesigner = () => {
const fieldSchema = useFieldSchema();
const { chartBlockEngineMetaData } = fieldSchema?.['x-component-props'];
return (
<GeneralSchemaDesigner>
<ChartBlockEngineDesignerInitializer chartBlockEngineMetaData={chartBlockEngineMetaData} />
<SchemaSettings.Divider />
<SchemaSettings.Remove
removeParentsIfNoChildren
breakRemoveOn={{
'x-component': 'Grid',
}}
/>
</GeneralSchemaDesigner>
);
};
export const ChartBlockEngineDesignerInitializer = (props) => {
const { chartBlockEngineMetaData }: { chartBlockEngineMetaData: ChartBlockEngineMetaData } = props;
const { t } = useTranslation();
const options = useContext(SchemaOptionsContext);
const { dn } = useDesignable();
const fieldSchema = useFieldSchema();
const api = useAPIClient();
const field = useField();
const compile = useCompile();
const { chart, query } = chartBlockEngineMetaData;
const { fields } = useFieldsById(query.id);
const dataSource = fields.map((field) => {
return {
label: field.name,
value: field.name,
};
});
return (
<SchemaSettings.Item
onClick={async () => {
FormDialog(
{
okText: compile('{{t("Submit")}}'),
title: lang('Edit chart block'),
width: 1200,
bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
},
(form) => {
const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);
useEffect(() => {
const chartBlockEngineMetaData = {
query: {
id: query?.id,
},
chart: form.values, //TODO
};
setChartBlockEngineMetaData(chartBlockEngineMetaData);
}, [form.values.type]);
return (
<APIClientProvider apiClient={api}>
<SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
<section
className={css`
display: flex;
gap: 24px;
`}
>
{/* left*/}
<Card
bordered={false}
title={i18n.t('Chart config')}
size={'default'}
className={css`
flex: 1;
`}
>
<FormLayout layout={'vertical'}>
<SchemaComponent
scope={{ dataSource, JSON5, jsonConfigDesc }}
components={{ Options }}
schema={{
properties: {
// title: {
// title: lang('Chart title'),
// 'x-component': 'Input',
// 'x-decorator': 'FormItem',
// },
type: {
title: t('Chart type'),
required: true,
'x-component': 'CustomSelect',
'x-decorator': 'FormItem',
enum: [...templates.values()].map((template) => {
return {
title: template.title,
key: template.type,
description: template.description,
group: template.group,
iconId: template.iconId,
};
}),
},
options: {
type: 'void',
'x-component': 'Options',
},
},
}}
/>
</FormLayout>
</Card>
{/* right*/}
<div
className={css`
flex: 1;
min-width: 600px;
`}
>
<Card size={'default'} title={lang('Chart preview')}>
{/* Chart Preview*/}
{chartBlockEngineMetaData && (
<>
<SchemaComponent
schema={{
properties: {
chartPreview: {
type: 'void',
'x-decorator': 'CardItem',
'x-component': 'ChartBlockEngine',
'x-component-props': {
chartBlockEngineMetaData: chartBlockEngineMetaData,
},
},
},
}}
/>
</>
)}
</Card>
<Card
size={'default'}
title={lang('Data preview')}
className={css`
margin-top: 24px;
overflow: scroll;
`}
>
{/*Data preview*/}
{chartBlockEngineMetaData?.query?.id && (
<DataSetPreviewTable queryId={chartBlockEngineMetaData?.query?.id} fields={fields} />
)}
</Card>
</div>
</section>
</SchemaComponentOptions>
</APIClientProvider>
);
},
)
.open({
initialValues: { ...chart }, //reset before chartBlockMetaData
})
.then((values) => {
//patch updates
values = {
query,
chart: values,
};
field.title = values.chart.title;
fieldSchema['title'] = values.chart.title;
field.componentProps.chartBlockEngineMetaData = values;
fieldSchema['x-component-props'].chartBlockEngineMetaData = values;
dn.emit('patch', {
schema: {
'x-uid': fieldSchema['x-uid'],
'x-component-props': fieldSchema['x-component-props'],
},
});
dn.refresh();
});
}}
>
{props.children || props.title || lang('Edit chart block')}
</SchemaSettings.Item>
);
};