From 6fc13dd14faf77be06d699afd566a8049c4cf353 Mon Sep 17 00:00:00 2001 From: sealday Date: Thu, 13 Jun 2024 02:00:46 +0800 Subject: [PATCH] fix: collection undefined (#1169) Co-authored-by: sealday Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1169 --- .../collection/CollectionProvider.tsx | 6 +- .../antd/AntdSchemaComponentProvider.tsx | 2 - .../hooks/useGetAriaLabelOfBlockItem.ts | 6 +- .../schema-component/antd/g2plot/G2Plot.tsx | 183 ------------------ .../antd/g2plot/G2PlotDesigner.tsx | 120 ------------ .../antd/g2plot/__tests__/g2plot.test.tsx | 15 -- .../antd/g2plot/demos/demo1.tsx | 91 --------- .../src/schema-component/antd/g2plot/index.md | 9 - .../src/schema-component/antd/g2plot/index.ts | 1 - .../antd/g2plot/requestChartData.ts | 12 -- .../client/src/schema-component/antd/index.ts | 1 - 11 files changed, 6 insertions(+), 440 deletions(-) delete mode 100644 packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx delete mode 100644 packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx delete mode 100644 packages/core/client/src/schema-component/antd/g2plot/__tests__/g2plot.test.tsx delete mode 100644 packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx delete mode 100644 packages/core/client/src/schema-component/antd/g2plot/index.md delete mode 100644 packages/core/client/src/schema-component/antd/g2plot/index.ts delete mode 100644 packages/core/client/src/schema-component/antd/g2plot/requestChartData.ts diff --git a/packages/core/client/src/data-source/collection/CollectionProvider.tsx b/packages/core/client/src/data-source/collection/CollectionProvider.tsx index 249ffdf1c..5192bfac8 100644 --- a/packages/core/client/src/data-source/collection/CollectionProvider.tsx +++ b/packages/core/client/src/data-source/collection/CollectionProvider.tsx @@ -1,8 +1,8 @@ -import React, { FC, ReactNode, createContext, useContext, useMemo } from 'react'; +import React, { createContext, FC, ReactNode, useContext, useMemo } from 'react'; -import { useCollectionManager } from './CollectionManagerProvider'; import { CollectionDeletedPlaceholder } from '../components/CollectionDeletedPlaceholder'; -import type { CollectionOptions, Collection, GetCollectionFieldPredicate } from './Collection'; +import type { Collection, CollectionOptions, GetCollectionFieldPredicate } from './Collection'; +import { useCollectionManager } from './CollectionManagerProvider'; export const CollectionContext = createContext(null); CollectionContext.displayName = 'CollectionContext'; diff --git a/packages/core/client/src/schema-component/antd/AntdSchemaComponentProvider.tsx b/packages/core/client/src/schema-component/antd/AntdSchemaComponentProvider.tsx index aa4978f68..584fdceae 100644 --- a/packages/core/client/src/schema-component/antd/AntdSchemaComponentProvider.tsx +++ b/packages/core/client/src/schema-component/antd/AntdSchemaComponentProvider.tsx @@ -6,7 +6,6 @@ import { useFilterActionProps } from './filter/useFilterActionProps'; import { formV1Settings } from './form'; import { filterFormItemSettings, formItemSettings } from './form-item'; import { formDetailsSettings, formSettings, readPrettyFormSettings } from './form-v2'; -import { requestChartData } from './g2plot/requestChartData'; import { pageSettings, pageTabSettings } from './page'; export class AntdSchemaComponentPlugin extends Plugin { @@ -25,7 +24,6 @@ export class AntdSchemaComponentPlugin extends Plugin { addScopes() { this.app.addScopes({ - requestChartData, useFilterActionProps, }); } diff --git a/packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts b/packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts index 779477b8b..a06acce53 100644 --- a/packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts +++ b/packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts @@ -22,16 +22,16 @@ export const useGetAriaLabelOfBlockItem = (defaultName?: string) => { const collection = useCollection(); const name = defaultName || blockName; - const title = compile(fieldSchema['title']) || compile(collection.getField(fieldSchema.name)?.uiSchema?.title); + const title = compile(fieldSchema['title']) || compile(collection?.getField(fieldSchema.name)?.uiSchema?.title); const getAriaLabel = useCallback( (postfix?: string) => { postfix = postfix ? `-${postfix}` : ''; - return ['block-item', component, collection.name, name, collectionField, title, postfix] + return ['block-item', component, collection?.name, name, collectionField, title, postfix] .filter(Boolean) .join('-'); }, - [component, collection.name, name, collectionField, title], + [component, collection?.name, name, collectionField, title], ); return { diff --git a/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx b/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx deleted file mode 100644 index f8fb38d9c..000000000 --- a/packages/core/client/src/schema-component/antd/g2plot/G2Plot.tsx +++ /dev/null @@ -1,183 +0,0 @@ -import { - Area, - Bar, - BidirectionalBar, - Box, - Bullet, - Chord, - CirclePacking, - Column, - DualAxes, - Facet, - Funnel, - Gauge, - Heatmap, - Histogram, - Line, - Liquid, - Mix, - Pie, - Progress, - Radar, - RadialBar, - RingProgress, - Rose, - Sankey, - Scatter, - Stock, - Sunburst, - TinyArea, - TinyColumn, - TinyLine, - Treemap, - Venn, - Violin, - Waterfall, - WordCloud, -} from '@antv/g2plot'; -import { Field } from '@tachybase/schema'; -import { observer, useField } from '@tachybase/schema'; -import { Spin } from 'antd'; -import cls from 'classnames'; -import React, { forwardRef, useEffect, useRef } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useAPIClient } from '../../../api-client'; -import { G2PlotDesigner } from './G2PlotDesigner'; - -export type ReactG2PlotProps = { - readonly className?: string; - readonly plot: any; - readonly config: O; -}; - -const plots = { - Line, - Area, - Column, - Bar, - Pie, - Rose, - WordCloud, - Scatter, - Radar, - DualAxes, - TinyLine, - TinyColumn, - TinyArea, - Histogram, - Progress, - RingProgress, - Heatmap, - Box, - Violin, - Venn, - Stock, - Funnel, - Liquid, - Bullet, - Sunburst, - Gauge, - Waterfall, - RadialBar, - BidirectionalBar, - Treemap, - Sankey, - Chord, - CirclePacking, - Mix, - Facet, -}; - -export const G2PlotRenderer = forwardRef(function (props: ReactG2PlotProps, ref: any) { - const { className, plot, config } = props; - const containerRef = useRef(undefined); - const plotRef = useRef(undefined); - - function syncRef(source, target) { - if (typeof target === 'function') { - target(source.current); - } else if (target) { - target.current = source.current; - } - } - - function renderPlot() { - if (plotRef.current) { - plotRef.current.update(config); - } else { - plotRef.current = new plot(containerRef.current, config); - plotRef?.current?.render(); - } - - syncRef(plotRef, ref); - } - - function destoryPlot() { - if (plotRef.current) { - plotRef.current.destroy(); - plotRef.current = undefined; - } - } - - useEffect(() => { - renderPlot(); - return () => destoryPlot(); - }, [config, plot]); - - return
; -}); -G2PlotRenderer.displayName = 'G2PlotRenderer'; - -export const G2Plot: any = observer( - (props: any) => { - const { plot, config } = props; - const field = useField(); - const { t } = useTranslation(); - const api = useAPIClient(); - useEffect(() => { - field.data = field.data || {}; - field.data.loading = true; - const fn = config?.data; - if (typeof fn === 'function') { - const result = fn.bind({ api })(); - if (result?.then) { - result - .then((data) => { - if (Array.isArray(data)) { - field.componentProps.config.data = data; - } - field.data.loading = false; - }) - .catch(console.error); - } else { - field.data.loading = false; - } - } else { - field.data.loading = false; - } - }, []); - - if (!plot || !config) { - return
{t('In configuration')}...
; - } - if (field?.data?.loading !== false) { - return ; - } - return ( -
- {field.title &&

{field.title}

} - -
- ); - }, - { displayName: 'G2Plot' }, -); - -G2Plot.Designer = G2PlotDesigner; -G2Plot.plots = plots; diff --git a/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx b/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx deleted file mode 100644 index e8d3f0185..000000000 --- a/packages/core/client/src/schema-component/antd/g2plot/G2PlotDesigner.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { ISchema, useField, useFieldSchema } from '@tachybase/schema'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { useAPIClient } from '../../../api-client'; -import { - GeneralSchemaDesigner, - SchemaSettingsDivider, - SchemaSettingsModalItem, - SchemaSettingsRemove, -} from '../../../schema-settings'; -import { useCompile, useDesignable } from '../../hooks'; -import _ from 'lodash'; - -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")}}', -}; - -export const G2PlotDesigner = () => { - const { t } = useTranslation(); - const { dn } = useDesignable(); - const fieldSchema = useFieldSchema(); - const field = useField(); - const compile = useCompile(); - const api = useAPIClient(); - return ( - - { - field.title = compile(title); - field.componentProps.plot = plot; - const conf = compile(JSON.parse(config)); - const fn = conf?.data; - if (typeof fn === 'function') { - const result = fn.bind({ api })(); - if (result?.then) { - result - .then((data) => { - if (Array.isArray(data)) { - field.componentProps.config.data = data; - } - }) - .catch(console.error); - } - } else { - field.componentProps.config = conf; - } - _.set(fieldSchema, 'title', title); - _.set(fieldSchema, 'x-component-props.plot', plot); - _.set(fieldSchema, 'x-component-props.config', JSON.parse(config)); - dn.emit('patch', { - schema: { - title, - 'x-uid': fieldSchema['x-uid'], - 'x-component-props': fieldSchema['x-component-props'], - }, - }); - dn.refresh(); - }} - /> - - - - ); -}; diff --git a/packages/core/client/src/schema-component/antd/g2plot/__tests__/g2plot.test.tsx b/packages/core/client/src/schema-component/antd/g2plot/__tests__/g2plot.test.tsx deleted file mode 100644 index fdc0f5a45..000000000 --- a/packages/core/client/src/schema-component/antd/g2plot/__tests__/g2plot.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render, waitFor } from '@tachybase/test/client'; -import React from 'react'; -import App1 from '../demos/demo1'; - -// jsdom does not support canvas, so we need to skip this test -describe.skip('G2Plot', () => { - it('basic', async () => { - render(); - - await waitFor(() => { - const g2plot = document.querySelector('.g2plot') as HTMLDivElement; - expect(g2plot).toBeInTheDocument(); - }); - }); -}); diff --git a/packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx deleted file mode 100644 index 2ea6a2647..000000000 --- a/packages/core/client/src/schema-component/antd/g2plot/demos/demo1.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { - APIClient, - APIClientProvider, - CardItem, - G2Plot, - SchemaComponent, - SchemaComponentProvider, -} from '@tachybase/client'; -import React from 'react'; -import { mockAPIClient } from '../../../../testUtils'; - -const { apiClient, mockRequest } = mockAPIClient(); - -mockRequest.onGet('/test').reply(200, { - data: [ - { - Date: '2010-01', - scales: 1998, - }, - { - Date: '2010-02', - scales: 1850, - }, - { - Date: '2010-03', - scales: 1720, - }, - { - Date: '2010-04', - scales: 1818, - }, - { - Date: '2010-05', - scales: 1920, - }, - { - Date: '2010-06', - scales: 1802, - }, - { - Date: '2010-07', - scales: 1945, - }, - { - Date: '2010-08', - scales: 1856, - }, - { - Date: '2010-09', - scales: 2107, - }, - ], -}); - -const requestChartData = (options) => { - return async function (this: { api: APIClient }) { - const response = await this.api.request(options); - return response?.data?.data; - }; -}; - -const schema = { - type: 'void', - name: 'line', - 'x-designer': 'G2Plot.Designer', - 'x-decorator': 'CardItem', - 'x-component': 'G2Plot', - 'x-component-props': { - plot: 'Line', - config: { - data: '{{ requestChartData({ url: "/test" }) }}', - padding: 'auto', - xField: 'Date', - yField: 'scales', - xAxis: { - // type: 'timeCat', - tickCount: 5, - }, - }, - }, -}; - -export default () => { - return ( - - - - - - ); -}; diff --git a/packages/core/client/src/schema-component/antd/g2plot/index.md b/packages/core/client/src/schema-component/antd/g2plot/index.md deleted file mode 100644 index 14fe2efa9..000000000 --- a/packages/core/client/src/schema-component/antd/g2plot/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -group: - title: Schema Components - order: 3 ---- - -# G2Plot - - diff --git a/packages/core/client/src/schema-component/antd/g2plot/index.ts b/packages/core/client/src/schema-component/antd/g2plot/index.ts deleted file mode 100644 index c3dc4811c..000000000 --- a/packages/core/client/src/schema-component/antd/g2plot/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './G2Plot'; diff --git a/packages/core/client/src/schema-component/antd/g2plot/requestChartData.ts b/packages/core/client/src/schema-component/antd/g2plot/requestChartData.ts deleted file mode 100644 index f1970db5b..000000000 --- a/packages/core/client/src/schema-component/antd/g2plot/requestChartData.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { APIClient } from '../../../api-client'; - -export const requestChartData = (options) => { - return async function (this: { api: APIClient }) { - try { - const response = await this.api.request(options); - return response?.data?.data; - } catch (error) { - return []; - } - }; -}; diff --git a/packages/core/client/src/schema-component/antd/index.ts b/packages/core/client/src/schema-component/antd/index.ts index 87e67a6a7..625a43b04 100644 --- a/packages/core/client/src/schema-component/antd/index.ts +++ b/packages/core/client/src/schema-component/antd/index.ts @@ -23,7 +23,6 @@ export * from './form'; export * from './form-dialog'; export * from './form-item'; export * from './form-v2'; -export * from './g2plot'; export * from './grid'; export * from './grid-card'; export * from './icon-picker';