feat(client): add new demo for the filter component
This commit is contained in:
parent
8e10d7ae73
commit
53900c1e9e
@ -2,6 +2,7 @@ import { ObjectField as ObjectFieldModel } from '@formily/core';
|
|||||||
import { observer, useField, useFieldSchema } from '@formily/react';
|
import { observer, useField, useFieldSchema } from '@formily/react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useRequest } from '../../../api-client';
|
import { useRequest } from '../../../api-client';
|
||||||
|
import { useProps } from '../../hooks/useProps';
|
||||||
import { FilterContext } from './context';
|
import { FilterContext } from './context';
|
||||||
import { FilterActionDesigner } from './Filter.Action.Designer';
|
import { FilterActionDesigner } from './Filter.Action.Designer';
|
||||||
import { FilterAction } from './FilterAction';
|
import { FilterAction } from './FilterAction';
|
||||||
@ -14,7 +15,8 @@ const useDef = (options) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const Filter: any = observer((props: any) => {
|
export const Filter: any = observer((props: any) => {
|
||||||
const { useDataSource = useDef, dynamicComponent } = props;
|
const { useDataSource = useDef } = props;
|
||||||
|
const { options, dynamicComponent } = useProps(props);
|
||||||
const field = useField<ObjectFieldModel>();
|
const field = useField<ObjectFieldModel>();
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
useDataSource({
|
useDataSource({
|
||||||
@ -24,7 +26,9 @@ export const Filter: any = observer((props: any) => {
|
|||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<FilterContext.Provider value={{ field, fieldSchema, dynamicComponent, options: field.dataSource || [] }}>
|
<FilterContext.Provider
|
||||||
|
value={{ field, fieldSchema, dynamicComponent, options: options || field.dataSource || [] }}
|
||||||
|
>
|
||||||
<FilterGroup {...props} />
|
<FilterGroup {...props} />
|
||||||
</FilterContext.Provider>
|
</FilterContext.Provider>
|
||||||
</div>
|
</div>
|
||||||
|
105
packages/client/src/schema-component/antd/filter/demos/demo6.tsx
Normal file
105
packages/client/src/schema-component/antd/filter/demos/demo6.tsx
Normal file
@ -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 (
|
||||||
|
<div>
|
||||||
|
<Select
|
||||||
|
options={[
|
||||||
|
{ label: 'test1', value: 'test1' },
|
||||||
|
{ label: 'test2', value: 'test2' },
|
||||||
|
]}
|
||||||
|
defaultValue={'test1'}
|
||||||
|
onChange={(value) => {
|
||||||
|
setCollection(getCollection(value));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<CollectionProvider collection={collection}>{props.children}</CollectionProvider>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<SchemaComponentProvider>
|
||||||
|
<AntdSchemaComponentProvider>
|
||||||
|
<CollectionManagerProvider collections={collections}>
|
||||||
|
<SwitchCollection>
|
||||||
|
<SchemaComponent components={{ Input, Filter }} schema={schema} />
|
||||||
|
</SwitchCollection>
|
||||||
|
</CollectionManagerProvider>
|
||||||
|
</AntdSchemaComponentProvider>
|
||||||
|
</SchemaComponentProvider>
|
||||||
|
);
|
||||||
|
};
|
@ -24,3 +24,7 @@ group:
|
|||||||
### FilterAction
|
### FilterAction
|
||||||
|
|
||||||
<code src="./demos/demo5.tsx" />
|
<code src="./demos/demo5.tsx" />
|
||||||
|
|
||||||
|
### Dynamic options
|
||||||
|
|
||||||
|
<code src="./demos/demo6.tsx" />
|
||||||
|
@ -1 +1,3 @@
|
|||||||
export * from './Filter';
|
export * from './Filter';
|
||||||
|
export * from './useFilterActionProps';
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@ export const useValues = () => {
|
|||||||
const [operatorValue] = otherPath.split('.', 2);
|
const [operatorValue] = otherPath.split('.', 2);
|
||||||
const dataIndex = fieldPath.split('.');
|
const dataIndex = fieldPath.split('.');
|
||||||
const option = findOption(dataIndex, options);
|
const option = findOption(dataIndex, options);
|
||||||
const operators = option.operators;
|
const operators = option?.operators;
|
||||||
const operator = operators?.find?.((item) => item.value === `$${operatorValue}`);
|
const operator = operators?.find?.((item) => item.value === `$${operatorValue}`);
|
||||||
field.data = field.data || {};
|
field.data = field.data || {};
|
||||||
field.data.dataIndex = dataIndex;
|
field.data.dataIndex = dataIndex;
|
||||||
|
Loading…
Reference in New Issue
Block a user