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 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>
|
||||
|
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
|
||||
|
||||
<code src="./demos/demo5.tsx" />
|
||||
|
||||
### Dynamic options
|
||||
|
||||
<code src="./demos/demo6.tsx" />
|
||||
|
@ -1 +1,3 @@
|
||||
export * from './Filter';
|
||||
export * from './useFilterActionProps';
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user