refactor: code improve

This commit is contained in:
katherinehhh 2023-05-11 19:15:53 +08:00
parent 515e730048
commit df4d84348a
5 changed files with 15 additions and 17 deletions

View File

@ -1,12 +1,13 @@
import { useField, useFieldSchema } from '@formily/react'; import { useField, useFieldSchema, observer } from '@formily/react';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { useCollectionManager } from '../../../collection-manager'; import { useCollectionManager } from '../../../collection-manager';
import { AssociationFieldContext } from './context'; import { AssociationFieldContext } from './context';
export function AssociationFieldProvider(props) { export const AssociationFieldProvider = observer((props) => {
const field = useField(); const field = useField();
const { getCollectionJoinField, getCollection } = useCollectionManager(); const { getCollectionJoinField, getCollection } = useCollectionManager();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const collectionField = useMemo( const collectionField = useMemo(
() => getCollectionJoinField(fieldSchema['x-collection-field']), () => getCollectionJoinField(fieldSchema['x-collection-field']),
[fieldSchema['x-collection-field'], fieldSchema.name], [fieldSchema['x-collection-field'], fieldSchema.name],
@ -15,9 +16,13 @@ export function AssociationFieldProvider(props) {
() => getCollection(collectionField?.target)?.template === 'file', () => getCollection(collectionField?.target)?.template === 'file',
[fieldSchema['x-collection-field']], [fieldSchema['x-collection-field']],
); );
const currentMode = useMemo(
() => fieldSchema['x-component-props'].mode || (isFileCollection ? 'FileManager' : 'Select'),
[fieldSchema['x-component-props'].mode],
);
return collectionField ? ( return collectionField ? (
<AssociationFieldContext.Provider value={{ options: collectionField, field, isFileCollection }}> <AssociationFieldContext.Provider value={{ options: collectionField, field, currentMode }}>
{props.children} {props.children}
</AssociationFieldContext.Provider> </AssociationFieldContext.Provider>
) : null; ) : null;
} });

View File

@ -11,16 +11,12 @@ import { InternalFileManager } from './FileManager';
import { useAssociationFieldContext } from './hooks'; import { useAssociationFieldContext } from './hooks';
const EditableAssociationField = observer((props: any) => { const EditableAssociationField = observer((props: any) => {
useEffect(() => {
props.mode && setCurrentMode(props.mode);
}, [props.mode]);
const { multiple } = props; const { multiple } = props;
const field: any = useField(); const field: any = useField();
const form = useForm(); const form = useForm();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
console.log(useAssociationFieldContext()); const { options: collectionField, currentMode } = useAssociationFieldContext();
const { options: collectionField, isFileCollection } = useAssociationFieldContext();
const [currentMode, setCurrentMode] = useState(props.mode || (isFileCollection ? 'FileManager' : 'Select'));
const useCreateActionProps = () => { const useCreateActionProps = () => {
const { onClick } = useCAP(); const { onClick } = useCAP();
const actionField: any = useField(); const actionField: any = useField();

View File

@ -8,11 +8,8 @@ import { FileManageReadPretty } from './FileManager';
import { useAssociationFieldContext } from './hooks'; import { useAssociationFieldContext } from './hooks';
const ReadPrettyAssociationField = observer((props: any) => { const ReadPrettyAssociationField = observer((props: any) => {
const { isFileCollection } = useAssociationFieldContext(); const { currentMode } = useAssociationFieldContext();
const [currentMode, setCurrentMode] = useState(props.mode || (isFileCollection ? 'FileManager' : 'Select'));
useEffect(() => {
props.mode && setCurrentMode(props.mode);
}, [props.mode]);
return ( return (
<> <>
{['Select', 'Picker'].includes(currentMode) && <ReadPrettyInternalViewer {...props} />} {['Select', 'Picker'].includes(currentMode) && <ReadPrettyInternalViewer {...props} />}

View File

@ -4,7 +4,7 @@ import { createContext } from 'react';
export interface AssociationFieldContextProps { export interface AssociationFieldContextProps {
options?: any; options?: any;
field?: GeneralField; field?: GeneralField;
isFileCollection?: boolean; currentMode?:string;
} }
export const AssociationFieldContext = createContext<AssociationFieldContextProps>({}); export const AssociationFieldContext = createContext<AssociationFieldContextProps>({});

View File

@ -30,7 +30,7 @@ export const useInsertSchema = (component) => {
}; };
export function useAssociationFieldContext<F extends GeneralField>() { export function useAssociationFieldContext<F extends GeneralField>() {
return useContext(AssociationFieldContext) as { options: any; field: F; isFileCollection: boolean }; return useContext(AssociationFieldContext) as { options: any; field: F; currentMode: string };
} }
export default function useServiceOptions(props) { export default function useServiceOptions(props) {