feat: search (#10)

Author: NasgulNexus

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;
+};