feat: search

src/lib/core/components/Form/Controller.tsx

@@ -4,6 +4,7 @@ import {isCorrectSpec} from '../../helpers';
 import {Spec} from '../../types';
 
 import {useComponents, useDynamicFormsCtx, useField, useRender, useValidate} from './hooks';
+import {useSearch} from './hooks/useSearch';
 import {FieldValue, ValidateError} from './types';
 
 export interface ControllerProps<Value extends FieldValue, SpecType extends Spec> {
@@ -40,9 +41,10 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
         parentOnChange,
         parentOnUnmount,
     });
+    const withSearch = useSearch(spec, renderProps.input.value, name);
 
     if (_.isString(name) && isCorrectSpec(spec)) {
-        return render(renderProps);
+        return withSearch(render(renderProps));
     }
 
     return null;

src/lib/core/components/Form/DynamicField.tsx

@@ -8,21 +8,25 @@ import {isCorrectSpec} from '../../helpers';
 import {Spec} from '../../types';
 
 import {Controller} from './Controller';
-import {isCorrectConfig} from './helpers';
-import {useCreateContext, useStore} from './hooks';
-import {DynamicFormConfig} from './types';
+import {useCreateContext, useCreateSearchContext, useSearchStore, useStore} from './hooks';
+import {DynamicFormConfig, FieldValue} from './types';
+import {getDefaultSearchFunction, isCorrectConfig} from './utils';
 
 export interface DynamicFieldProps {
     name: string;
     spec: Spec;
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
+    search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
 }
 
-export const DynamicField: React.FC<DynamicFieldProps> = ({name, spec, config, Monaco}) => {
+export const DynamicField: React.FC<DynamicFieldProps> = ({name, spec, config, Monaco, search}) => {
     const DynamicFormsCtx = useCreateContext();
+    const SearchContext = useCreateSearchContext();
     const {tools, watcher} = useStore(name);
 
+    const {setField, removeField, isHiddenField} = useSearchStore(name);
+
     const context = React.useMemo(
         () => ({
             config,
@@ -32,6 +36,16 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({name, spec, config, M
         [tools, config, Monaco],
     );
 
+    const searchContext = React.useMemo(
+        () => ({
+            setField,
+            removeField,
+            isHiddenField,
+            searchFunction: _.isFunction(search) ? search : getDefaultSearchFunction(search),
+        }),
+        [isHiddenField, removeField, search, setField],
+    );
+
     const correctParams = React.useMemo(
         () => _.isString(name) && isCorrectSpec(spec) && isCorrectConfig(config),
         [name, spec, config],
@@ -40,14 +54,16 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({name, spec, config, M
     if (correctParams) {
         return (
             <DynamicFormsCtx.Provider value={context}>
-                <Controller
-                    spec={spec}
-                    name={name}
-                    parentOnChange={null}
-                    parentOnUnmount={null}
-                    initialValue={_.get(tools.initialValue, name)}
-                />
-                {watcher}
+                <SearchContext.Provider value={searchContext}>
+                    <Controller
+                        spec={spec}
+                        name={name}
+                        parentOnChange={null}
+                        parentOnUnmount={null}
+                        initialValue={_.get(tools.initialValue, name)}
+                    />
+                    {watcher}
+                </SearchContext.Provider>
             </DynamicFormsCtx.Provider>
         );
     }

src/lib/core/components/Form/hooks/index.tsx

@@ -6,3 +6,7 @@ export * from './useRender';
 export * from './useStore';
 export * from './useValidate';
 export * from './useMonaco';
+export * from './useSearchStore';
+export * from './useSearchContext';
+export * from './useSearch';
+export * from './useCreateSearchContext';

src/lib/core/components/Form/hooks/useComponents.tsx

@@ -5,8 +5,8 @@ import {isValidElementType} from 'react-is';
 
 import {isCorrectSpec} from '../../../helpers';
 import {FormValue, Spec} from '../../../types';
-import {isCorrectConfig} from '../helpers';
 import {FieldValue, IndependentInputEntity, InputEntity, LayoutType, TypeConfig} from '../types';
+import {isCorrectConfig} from '../utils';
 
 import {useDynamicFormsCtx} from './';
 

src/lib/core/components/Form/hooks/useCreateSearchContext.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import _ from 'lodash';
+
+import {SearchContext} from '../types';
+
+const createContext = _.once(() => React.createContext({} as unknown as SearchContext));
+
+export const useCreateSearchContext = () => createContext();

src/lib/core/components/Form/hooks/useField.tsx

@@ -5,14 +5,14 @@ import _ from 'lodash';
 import {isArraySpec, isObjectSpec} from '../../../helpers';
 import {Spec} from '../../../types';
 import {OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM} from '../constants';
-import {isArrayItem, transformArrIn, transformArrOut} from '../helpers';
 import {
     DynamicFormsContext,
     FieldArrayValue,
     FieldRenderProps,
     FieldValue,
     ValidateError,
 } from '../types';
+import {isArrayItem, transformArrIn, transformArrOut} from '../utils';
 
 export interface FieldProps<Value extends FieldValue, SpecType extends Spec> {
     name: string;

src/lib/core/components/Form/hooks/useSearch/index.ts

@@ -0,0 +1 @@
+export * from './useSearch';

src/lib/core/components/Form/hooks/useSearch/useSearch.scss

@@ -0,0 +1,13 @@
+@import '../../../../../kit/styles/variables.scss';
+
+.#{$ns}use-search {
+    margin-bottom: 15px;
+
+    &_hidden {
+        display: none;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}

src/lib/core/components/Form/hooks/useSearch/useSearch.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {block} from '../../../../../kit/utils';
+import {Spec} from '../../../../types';
+import {FieldValue} from '../../types';
+import {useSearchContext} from '../useSearchContext';
+
+import './useSearch.scss';
+
+const b = block('use-search');
+
+export const useSearch = (spec: Spec, value: FieldValue, name: string) => {
+    const {setField, removeField, isHiddenField, searchFunction} = useSearchContext();
+
+    const searchResult = React.useMemo(
+        () => !searchFunction(spec, value, name),
+        [name, searchFunction, spec, value],
+    );
+
+    const hidden = React.useMemo(() => isHiddenField(name), [isHiddenField, name]);
+
+    const withSearch = React.useCallback(
+        (children: JSX.Element | null) => <div className={b({hidden: hidden})}>{children}</div>,
+        [hidden],
+    );
+
+    React.useEffect(() => {
+        setField(name, searchResult);
+    }, [searchResult]);
+
+    React.useEffect(() => {
+        return () => removeField(name);
+    }, []);
+
+    return withSearch;
+};

src/lib/core/components/Form/hooks/useSearchContext.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import {useCreateSearchContext} from './index';
+
+export const useSearchContext = () => {
+    const SearchContext = useCreateSearchContext();
+    const context = React.useContext(SearchContext);
+
+    return context;
+};

src/lib/core/components/Form/hooks/useSearchStore.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import _ from 'lodash';
+
+import {getParentName} from '../';
+
+export const useSearchStore = (name: string) => {
+    const [store, setStore] = React.useState({[name]: false});
+
+    const isHiddenField = React.useCallback(
+        (name: string) => {
+            const selfFlag = store[name];
+
+            if (selfFlag === false) {
+                return false;
+            }
+
+            let parentName = getParentName(name);
+
+            while (parentName) {
+                if (store[parentName] === false) {
+                    return false;
+                }
+
+                parentName = getParentName(parentName);
+            }
+
+            for (const key of Object.keys(store)) {
+                if (key.includes(name + '.') && !store[key]) {
+                    return false;
+                }
+            }
+
+            return true;
+        },
+        [store],
+    );
+
+    return {
+        store,
+        setField: (name: string, search: boolean) =>
+            setStore((store) => ({...store, [name]: search})),
+        removeField: (name: string) => {
+            setStore((store) => _.omit(store, name));
+        },
+        isHiddenField,
+    };
+};

src/lib/core/components/Form/hooks/useStore.tsx

@@ -3,14 +3,14 @@ import React from 'react';
 import _ from 'lodash';
 import {Field as FinalFormField, useForm} from 'react-final-form';
 
-import {transformArrIn, transformArrOut} from '../helpers';
 import {
     AsyncValidateError,
     BaseValidateError,
     FieldObjectValue,
     FieldValue,
     ValidateError,
 } from '../types';
+import {transformArrIn, transformArrOut} from '../utils';
 
 export interface DynamicFieldStore {
     name: string;

src/lib/core/components/Form/hooks/useValidate.ts

@@ -4,8 +4,8 @@ import _ from 'lodash';
 
 import {isCorrectSpec} from '../../../helpers';
 import {FormValue, Spec} from '../../../types';
-import {isCorrectConfig} from '../helpers';
 import {FieldValue, TypeConfig} from '../types';
+import {isCorrectConfig} from '../utils';
 
 import {useDynamicFormsCtx} from './';
 

src/lib/core/components/Form/index.ts

@@ -1,5 +1,5 @@
 export * from './constants';
 export * from './Controller';
 export * from './DynamicField';
-export * from './helpers';
 export * from './types';
+export * from './utils';

src/lib/core/components/Form/types/index.ts

@@ -10,3 +10,4 @@ export * from './object';
 export * from './string';
 export * from './validators';
 export * from './value';
+export * from './search';

src/lib/core/components/Form/types/search.ts

@@ -0,0 +1,10 @@
+import {Spec} from '../../../types';
+
+import {FieldValue} from './value';
+
+export interface SearchContext {
+    setField: (name: string, search: boolean) => void;
+    removeField: (name: string) => void;
+    isHiddenField: (name: string) => boolean;
+    searchFunction: (spec: Spec, value: FieldValue, name: string) => boolean;
+}

src/lib/core/components/Form/helpers.ts → src/lib/core/components/Form/utils/common.ts

@@ -1,9 +1,8 @@
 import _ from 'lodash';
 
-import {SpecTypes} from '../../constants';
-import {FormValue, ObjectValue} from '../../types';
-
-import {OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM} from './constants';
+import {SpecTypes} from '../../../constants';
+import {FormValue, ObjectValue} from '../../../types';
+import {OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, REMOVED_ITEM} from '../constants';
 
 export const isCorrectConfig = (candidate: any) =>
     Object.values(SpecTypes).every(

src/lib/core/components/Form/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './search';

src/lib/core/components/Form/utils/search.ts

@@ -0,0 +1,21 @@
+import {Spec} from '../../../types';
+
+export const getParentName = (name: string) => {
+    const index = name.lastIndexOf('.');
+
+    if (index !== -1) {
+        return name.substring(0, index);
+    }
+
+    return undefined;
+};
+
+export const getDefaultSearchFunction = (search?: string) => (spec: Spec) => {
+    if (search) {
+        return Boolean(
+            spec.viewSpec.layoutTitle?.toLowerCase().includes(search.trim().toLowerCase()),
+        );
+    }
+
+    return true;
+};

src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss

@@ -3,6 +3,21 @@
 .#{$ns}table-array {
     &__table {
         margin-bottom: 10px;
+
+        .yc-table__cell {
+            border-bottom: 0px transparent;
+        }
+    }
+
+    &__row {
+        .yc-table__cell {
+            border-bottom: 0px transparent;
+            border-top: 1px solid var(--yc-color-line-generic);
+        }
+
+        &_hidden {
+            display: none;
+        }
     }
 
     &__cell {