fix: fixed styles for transperant and toggler oneof (#60)

gravity-ui · Jun 7, 2023 · 64ca12a · 64ca12a
1 parent b7a584d
commit 64ca12a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 10 deletions.
diff --git a/src/lib/kit/components/Inputs/OneOf/OneOf.tsx b/src/lib/kit/components/Inputs/OneOf/OneOf.tsx
@@ -44,7 +44,7 @@ const OneOfComponent: React.FC<OneOfProps> = (props) => {
                 flat: props.withoutIndent,
             })}
         >
-            <div>{toggler}</div>
+            {toggler}
             {specProperties[oneOfValue] ? (
                 <GroupIndent>
                     <Controller

diff --git a/src/lib/kit/components/Layouts/Transparent/Transparent.scss b/src/lib/kit/components/Layouts/Transparent/Transparent.scss
@@ -14,6 +14,10 @@
 
     &_without-max-width {
         max-width: unset;
+
+        & > .df-error-wrapper {
+            width: unset;
+        }
     }
 
     &__remove-button {

diff --git a/src/lib/kit/hooks/useOneOf/index.ts b/src/lib/kit/hooks/useOneOf/index.ts
@@ -0,0 +1 @@
+export * from './useOneOf';
diff --git a/src/lib/kit/hooks/useOneOf/useOneOf.scss b/src/lib/kit/hooks/useOneOf/useOneOf.scss
@@ -0,0 +1,12 @@
+@import '../../styles/variables.scss';
+
+.#{$ns}use-oneof {
+    &__toggler {
+        &_radio {
+            & > .df-row {
+                width: unset;
+                max-width: unset;
+            }
+        }
+    }
+}
diff --git a/src/lib/kit/hooks/useOneOf.tsx → src/lib/kit/hooks/useOneOf/useOneOf.tsx b/src/lib/kit/hooks/useOneOf.tsx → src/lib/kit/hooks/useOneOf/useOneOf.tsx
@@ -3,7 +3,12 @@ import React from 'react';
 import {RadioButton, Select} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
-import {ObjectIndependentInputProps} from '../../core';
+import {ObjectIndependentInputProps} from '../../../core';
+import {block} from '../../utils';
+
+import './useOneOf.scss';
+
+const b = block('use-oneof');
 
 const MAX_TAB_TITLE_LENGTH = 20;
 
@@ -63,13 +68,17 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
         [spec.description, spec.viewSpec.order, specProperties],
     );
 
-    const togglerInput = React.useMemo(() => {
-        if (
+    const selectToggler = React.useMemo(
+        () =>
             spec.viewSpec.oneOfParams?.toggler !== 'radio' &&
             (spec.viewSpec.oneOfParams?.toggler === 'select' ||
                 options.length > 3 ||
-                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH))
-        ) {
+                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH)),
+        [options, spec.viewSpec.oneOfParams?.toggler],
+    );
+
+    const togglerInput = React.useMemo(() => {
+        if (selectToggler) {
             return (
                 <Select
                     width="max"
@@ -97,15 +106,23 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
                 ))}
             </RadioButton>
         );
-    }, [options, oneOfValue, onOneOfChange, name, spec.viewSpec.oneOfParams?.toggler]);
+    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
 
     const toggler = React.useMemo(() => {
         if (Layout) {
-            return <Layout {...props}>{togglerInput}</Layout>;
+            return (
+                <div
+                    className={b('toggler', {
+                        radio: !selectToggler,
+                    })}
+                >
+                    <Layout {...props}>{togglerInput}</Layout>
+                </div>
+            );
         }
 
-        return togglerInput;
-    }, [Layout, togglerInput, props]);
+        return <div>{togglerInput}</div>;
+    }, [Layout, togglerInput, selectToggler, props]);
 
     return {oneOfValue, specProperties, toggler, togglerInput};
 };