From 53900c1e9e407c50955e2b47e0e880d30e1f0b99 Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 7 Apr 2022 11:07:07 +0800 Subject: [PATCH] feat(client): add new demo for the filter component --- .../schema-component/antd/filter/Filter.tsx | 8 +- .../antd/filter/demos/demo6.tsx | 105 ++++++++++++++++++ .../src/schema-component/antd/filter/index.md | 4 + .../src/schema-component/antd/filter/index.ts | 2 + .../schema-component/antd/filter/useValues.ts | 2 +- 5 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 packages/client/src/schema-component/antd/filter/demos/demo6.tsx diff --git a/packages/client/src/schema-component/antd/filter/Filter.tsx b/packages/client/src/schema-component/antd/filter/Filter.tsx index 0bc1ea2da..3aeed8ab8 100644 --- a/packages/client/src/schema-component/antd/filter/Filter.tsx +++ b/packages/client/src/schema-component/antd/filter/Filter.tsx @@ -2,6 +2,7 @@ import { ObjectField as ObjectFieldModel } from '@formily/core'; import { observer, useField, useFieldSchema } from '@formily/react'; import React from 'react'; import { useRequest } from '../../../api-client'; +import { useProps } from '../../hooks/useProps'; import { FilterContext } from './context'; import { FilterActionDesigner } from './Filter.Action.Designer'; import { FilterAction } from './FilterAction'; @@ -14,7 +15,8 @@ const useDef = (options) => { }; export const Filter: any = observer((props: any) => { - const { useDataSource = useDef, dynamicComponent } = props; + const { useDataSource = useDef } = props; + const { options, dynamicComponent } = useProps(props); const field = useField(); const fieldSchema = useFieldSchema(); useDataSource({ @@ -24,7 +26,9 @@ export const Filter: any = observer((props: any) => { }); return (
- +
diff --git a/packages/client/src/schema-component/antd/filter/demos/demo6.tsx b/packages/client/src/schema-component/antd/filter/demos/demo6.tsx new file mode 100644 index 000000000..a228d70d7 --- /dev/null +++ b/packages/client/src/schema-component/antd/filter/demos/demo6.tsx @@ -0,0 +1,105 @@ +import { + AntdSchemaComponentProvider, + CollectionManagerProvider, + CollectionProvider, + Filter, + Input, + SchemaComponent, + SchemaComponentProvider, + useCollection, + useCollectionManager, + useFilterOptions +} from '@nocobase/client'; +import { Select } from 'antd'; +import React, { useState } from 'react'; + +const collections = [ + { + name: 'test1', + fields: [ + { + type: 'string', + name: 'title1', + interface: 'input', + uiSchema: { + title: 'Title1', + type: 'string', + 'x-component': 'Input', + required: true, + }, + }, + ], + }, + { + name: 'test2', + fields: [ + { + type: 'string', + name: 'title2', + interface: 'input', + uiSchema: { + title: 'Title2', + type: 'string', + 'x-component': 'Input', + required: true, + }, + }, + ], + }, +]; + +const schema: any = { + type: 'void', + properties: { + demo: { + name: 'filter', + type: 'object', + 'x-component': 'Filter', + 'x-component-props': { + useProps: () => { + const { name } = useCollection(); + const options = useFilterOptions(name); + return { + options, + }; + }, + }, + }, + }, +}; + +const SwitchCollection = (props) => { + const [collection, setCollection] = useState(collections[0]); + const { getCollection } = useCollectionManager(); + return ( +
+