fix: add spec correctness check for view controller (#127)

Author: bocembocem

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

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 
-import {isCorrectSpec} from '../../helpers';
 import {Spec} from '../../types';
 
 import {
@@ -63,9 +62,5 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
         __mirror,
     );
 
-    if (_.isString(name) && isCorrectSpec(spec) && !spec.viewSpec.hidden) {
-        return withSearch(render(renderProps));
-    }
-
-    return null;
+    return withSearch(render(renderProps));
 };

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

@@ -64,9 +64,7 @@ describe('Form/hooks/useSearch', () => {
             'name.surname': true,
             'name.username': false,
         });
-        expect(mirror.controller['name.surname']?.useSearch?.(null).props.className).toBe(
-            'df-use-search',
-        );
+        expect(mirror.controller['name.surname']?.useSearch?.(null)).toBe(null);
 
         rerender(
             <Form initialValues={value} onSubmit={_.noop}>
@@ -88,8 +86,6 @@ describe('Form/hooks/useSearch', () => {
             'name.surname': true,
             'name.username': false,
         });
-        expect(mirror.controller['name.surname']?.useSearch?.(null).props.className).toBe(
-            'df-use-search df-use-search_hidden',
-        );
+        expect(mirror.controller['name.surname']?.useSearch?.(null)).toBe(null);
     });
 });

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

@@ -28,24 +28,28 @@ export const useRender = <Value extends FieldValue, SpecType extends Spec>({
     const render = React.useCallback(
         (props: FieldRenderProps<Value>) => {
             if (inputEntity && isCorrectSpec(spec) && _.isString(name)) {
-                if (inputEntity.independent) {
-                    const InputComponent = inputEntity.Component;
+                if (!spec.viewSpec.hidden) {
+                    if (inputEntity.independent) {
+                        const InputComponent = inputEntity.Component;
 
-                    return <InputComponent spec={spec} name={name} Layout={Layout} {...props} />;
-                }
+                        return (
+                            <InputComponent spec={spec} name={name} Layout={Layout} {...props} />
+                        );
+                    }
 
-                const InputComponent = inputEntity.Component;
-                const input = <InputComponent spec={spec} name={name} {...props} />;
+                    const InputComponent = inputEntity.Component;
+                    const input = <InputComponent spec={spec} name={name} {...props} />;
 
-                if (Layout) {
-                    return (
-                        <Layout spec={spec} name={name} {...props}>
-                            {input}
-                        </Layout>
-                    );
-                }
+                    if (Layout) {
+                        return (
+                            <Layout spec={spec} name={name} {...props}>
+                                {input}
+                            </Layout>
+                        );
+                    }
 
-                return input;
+                    return input;
+                }
             }
 
             return null;

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

@@ -20,7 +20,8 @@ export const useSearch = (spec: Spec, value: FieldValue, name: string) => {
     const hidden = React.useMemo(() => isHiddenField(name), [isHiddenField, name]);
 
     const withSearch = React.useCallback(
-        (children: JSX.Element | null) => <div className={b({hidden: hidden})}>{children}</div>,
+        (children: JSX.Element | null) =>
+            children ? <div className={b({hidden: hidden})}>{children}</div> : null,
         [hidden],
     );
 

src/lib/core/components/View/ViewController.tsx

@@ -19,9 +19,5 @@ export const ViewController = <SpecType extends Spec>({
     const {viewEntity, Layout} = useComponents(spec, config);
     const render = useRender({name, value, spec, viewEntity, Layout, Link});
 
-    if (!spec.viewSpec.hidden) {
-        return <React.Fragment>{render}</React.Fragment>;
-    }
-
-    return null;
+    return <React.Fragment>{render}</React.Fragment>;
 };

src/lib/core/components/View/hooks/useRender.tsx

@@ -26,45 +26,47 @@ export const useRender = <Value extends FormValue, SpecType extends Spec>({
 }: UseRenderParams<Value, SpecType>) => {
     const render = React.useMemo(() => {
         if (viewEntity && isCorrectSpec(spec) && _.isString(name)) {
-            const currentValue = name ? _.get(value, name) : value;
-            const linkValue =
-                isValidElementType(Link) && spec?.viewSpec?.link ? (
-                    <Link value={currentValue} link={spec.viewSpec.link} />
-                ) : undefined;
+            if (!spec.viewSpec.hidden) {
+                const currentValue = name ? _.get(value, name) : value;
+                const linkValue =
+                    isValidElementType(Link) && spec?.viewSpec?.link ? (
+                        <Link value={currentValue} link={spec.viewSpec.link} />
+                    ) : undefined;
 
-            if (viewEntity.independent) {
-                const InputComponent = viewEntity.Component;
+                if (viewEntity.independent) {
+                    const InputComponent = viewEntity.Component;
+
+                    return (
+                        <InputComponent
+                            spec={spec}
+                            name={name}
+                            Layout={Layout}
+                            value={currentValue}
+                            linkValue={linkValue}
+                        />
+                    );
+                }
 
-                return (
+                const InputComponent = viewEntity.Component;
+                const input = (
                     <InputComponent
                         spec={spec}
                         name={name}
-                        Layout={Layout}
                         value={currentValue}
                         linkValue={linkValue}
                     />
                 );
-            }
 
-            const InputComponent = viewEntity.Component;
-            const input = (
-                <InputComponent
-                    spec={spec}
-                    name={name}
-                    value={currentValue}
-                    linkValue={linkValue}
-                />
-            );
+                if (Layout) {
+                    return (
+                        <Layout spec={spec} name={name} value={currentValue}>
+                            {input}
+                        </Layout>
+                    );
+                }
 
-            if (Layout) {
-                return (
-                    <Layout spec={spec} name={name} value={currentValue}>
-                        {input}
-                    </Layout>
-                );
+                return input;
             }
-
-            return input;
         }
 
         return null;