feat(client): add new demo for the filter component

This commit is contained in:
chenos 2022-04-07 11:07:07 +08:00
parent 8e10d7ae73
commit 53900c1e9e
5 changed files with 118 additions and 3 deletions

View File

@ -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<ObjectFieldModel>();
const fieldSchema = useFieldSchema();
useDataSource({
@ -24,7 +26,9 @@ export const Filter: any = observer((props: any) => {
});
return (
<div>
<FilterContext.Provider value={{ field, fieldSchema, dynamicComponent, options: field.dataSource || [] }}>
<FilterContext.Provider
value={{ field, fieldSchema, dynamicComponent, options: options || field.dataSource || [] }}
>
<FilterGroup {...props} />
</FilterContext.Provider>
</div>

View 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>
);
};

View File

@ -24,3 +24,7 @@ group:
### FilterAction
<code src="./demos/demo5.tsx" />
### Dynamic options
<code src="./demos/demo6.tsx" />

View File

@ -1 +1,3 @@
export * from './Filter';
export * from './useFilterActionProps';

View File

@ -37,7 +37,7 @@ export const useValues = () => {
const [operatorValue] = otherPath.split('.', 2);
const dataIndex = fieldPath.split('.');
const option = findOption(dataIndex, options);
const operators = option.operators;
const operators = option?.operators;
const operator = operators?.find?.((item) => item.value === `$${operatorValue}`);
field.data = field.data || {};
field.data.dataIndex = dataIndex;