fix: corrected remarks

gravity-ui · Aug 11, 2023 · ef04f78 · ef04f78
1 parent a15419a
commit ef04f78
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 85 deletions.
diff --git a/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.tsx b/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.tsx
@@ -44,11 +44,13 @@ export const MultiOneOf: React.FC<MultiOneOfProps> = (props) => {
             childValue: FieldValue,
             childErrors?: Record<string, ValidateError>,
         ) => {
-            const _value = _.set(value || {}, childName.split(`${name}.`).join(''), childValue);
-
-            onChange(_value, childErrors);
+            onChange(
+                (currentValue) =>
+                    _.set({...currentValue}, childName.split(`${name}.`).join(''), childValue),
+                childErrors,
+            );
         },
-        [name, onChange, value],
+        [name, onChange],
     );
 
     const specProperties = React.useMemo(
@@ -76,8 +78,8 @@ export const MultiOneOf: React.FC<MultiOneOfProps> = (props) => {
 
     const filterable = React.useMemo(() => (options.length || 0) > 9, [options.length]);
 
-    const selectInput = React.useMemo(
-        () => (
+    const selectInput = React.useMemo(() => {
+        const select = (
             <Select
                 width="max"
                 value={valueSelect}
@@ -91,60 +93,52 @@ export const MultiOneOf: React.FC<MultiOneOfProps> = (props) => {
                 className={b('select')}
                 qa={name}
             />
-        ),
-        [
-            filterable,
-            handleOpenChange,
-            name,
-            options,
-            spec.viewSpec.disabled,
-            spec.viewSpec.placeholder,
-            valueSelect,
-        ],
-    );
+        );
 
-    const header = React.useMemo(() => {
         if (Layout) {
-            return <Layout {...props}>{selectInput}</Layout>;
+            return <Layout {...props}>{select}</Layout>;
         }
 
-        return <React.Fragment>{selectInput}</React.Fragment>;
-    }, [Layout, props, selectInput]);
-
-    const content = React.useCallback(
-        (value: string[]) => (
-            <React.Fragment>
-                {value.map((property) => (
-                    <React.Fragment key={property}>
-                        {specProperties && specProperties[property] ? (
-                            <Controller
-                                name={`${name}.${property}`}
-                                spec={specProperties[property]}
-                                parentOnUnmount={parentOnUnmount}
-                                parentOnChange={parentOnChange}
-                                value={input.value?.[property]}
-                            />
-                        ) : null}
-                    </React.Fragment>
-                ))}
-            </React.Fragment>
-        ),
-        [specProperties, name, parentOnUnmount, parentOnChange, input.value],
-    );
+        return <React.Fragment>{select}</React.Fragment>;
+    }, [
+        Layout,
+        filterable,
+        handleOpenChange,
+        name,
+        options,
+        props,
+        spec.viewSpec.disabled,
+        spec.viewSpec.placeholder,
+        valueSelect,
+    ]);
 
     if (!options) {
         return null;
     }
 
     return (
         <React.Fragment>
-            {header}
+            {selectInput}
             <div
                 className={b('content', {
                     flat: withoutIndent,
                 })}
             >
-                <GroupIndent>{content(valueSelect)}</GroupIndent>
+                <GroupIndent>
+                    {valueSelect.map((property) => (
+                        <React.Fragment key={property}>
+                            {specProperties && specProperties[property] ? (
+                                <Controller
+                                    name={`${name}.${property}`}
+                                    spec={specProperties[property]}
+                                    parentOnUnmount={parentOnUnmount}
+                                    parentOnChange={parentOnChange}
+                                    value={input.value?.[property]}
+                                />
+                            ) : null}
+                        </React.Fragment>
+                    ))}
+                </GroupIndent>
             </div>
         </React.Fragment>
     );

diff --git a/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.tsx b/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.tsx
@@ -39,63 +39,59 @@ export const MultiOneOfView: React.FC<MultiOneOfViewProps> = (props) => {
         [spec.description, specProperties, values],
     );
 
-    const content = React.useMemo(
-        () => (
+    const selectView = React.useMemo(() => {
+        const selectView = (
             <React.Fragment>
-                {values.map((value) => (
-                    <React.Fragment key={value}>
-                        {specProperties && specProperties[value] ? (
-                            <ViewController
-                                name={`${name}.${value}`}
-                                spec={specProperties[value]}
-                            />
-                        ) : null}
-                    </React.Fragment>
-                ))}
+                {items.map((item) => {
+                    return (
+                        <Popover
+                            placement={['bottom', 'top']}
+                            key={item}
+                            content={item}
+                            className={b('tooltip-container')}
+                            contentClassName={b('tooltip')}
+                            disabled={item.length < 51}
+                        >
+                            {item}
+                        </Popover>
+                    );
+                })}
             </React.Fragment>
-        ),
-        [name, specProperties, values],
-    );
-
-    const selectView = React.useMemo(
-        () => (
-            <React.Fragment>
-                {items.map((item) => (
-                    <Popover
-                        placement={['bottom', 'top']}
-                        key={item}
-                        content={item}
-                        className={b('tooltip-container')}
-                        contentClassName={b('tooltip')}
-                        disabled={item.length < 51}
-                    >
-                        {item}
-                    </Popover>
-                ))}
-            </React.Fragment>
-        ),
-        [items],
-    );
+        );
 
-    const header = React.useMemo(() => {
         if (Layout) {
-            return <Layout {...props}>{selectView}</Layout>;
+            return (
+                <Layout {...props} value={values as any}>
+                    {selectView}
+                </Layout>
+            );
         }
 
         return <React.Fragment>{selectView}</React.Fragment>;
-    }, [Layout, props, selectView]);
+    }, [Layout, items, props, values]);
 
-    if (!value) {
+    if (values.length === 0) {
         return null;
     }
 
     return (
         <React.Fragment>
-            {header}
+            {selectView}
             <div
                 className={b('content', {flat: withoutIndent, 'multiple-values': items.length > 1})}
             >
-                <GroupIndent>{content}</GroupIndent>
+                <GroupIndent>
+                    {values.map((value) => (
+                        <React.Fragment key={value}>
+                            {specProperties && specProperties[value] ? (
+                                <ViewController
+                                    name={`${name}.${value}`}
+                                    spec={specProperties[value]}
+                                />
+                            ) : null}
+                        </React.Fragment>
+                    ))}
+                </GroupIndent>
             </div>
         </React.Fragment>
     );