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