feat(OneOfTogglerCard): added new display toggler card (#99)

NasgulNexus · web-flow · commit caa76bc63572 · 2023-08-31T13:56:32.000+02:00
diff --git a/docs/spec.md b/docs/spec.md
@@ -136,9 +136,9 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 
 #### OneOfParams
 
-| Property | Type                 | Required | Description |
-| :------- | :------------------- | :------: | :---------- |
-| toggler  | `'select'` `'radio'` |          | Switch type |
+| Property | Type                          | Required | Description |
+| :------- | :---------------------------- | :------: | :---------- |
+| toggler  | `'select'` `'radio'` `'card'` |          | Switch type |
 
 #### FileInput
 
diff --git a/src/lib/core/types/specs.ts b/src/lib/core/types/specs.ts
@@ -87,7 +87,7 @@ export interface ObjectSpec<LinkType = any> {
         order?: string[];
         link?: LinkType;
         oneOfParams?: {
-            toggler?: 'select' | 'radio';
+            toggler?: 'select' | 'radio' | 'card';
         };
         placeholder?: string;
     };
diff --git a/src/lib/kit/components/TogglerCard/TogglerCard.scss b/src/lib/kit/components/TogglerCard/TogglerCard.scss
@@ -0,0 +1,22 @@
+@import '../../styles/variables.scss';
+
+.#{$ns}toggler-card {
+    width: 254px;
+    padding: 10px;
+    height: 88px;
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+    }
+
+    &__text {
+        margin-top: 12px;
+        display: block;
+        margin-right: 15px;
+        height: 36px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
diff --git a/src/lib/kit/components/TogglerCard/TogglerCard.tsx b/src/lib/kit/components/TogglerCard/TogglerCard.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {HelpPopover} from '@gravity-ui/components';
+import {Card, Text} from '@gravity-ui/uikit';
+
+import {block} from '../../utils';
+
+import './TogglerCard.scss';
+
+const b = block('toggler-card');
+
+interface TogglerCardProps {
+    description?: string;
+    title: string;
+    text: string;
+    onClick: () => void;
+    disabled?: boolean;
+    selected: boolean;
+}
+
+export const TogglerCard: React.FC<TogglerCardProps> = ({
+    description,
+    title,
+    text,
+    onClick,
+    disabled,
+    selected,
+}) => {
+    return (
+        <Card
+            onClick={onClick}
+            type="selection"
+            disabled={disabled ? !selected : disabled}
+            selected={selected}
+            size="m"
+            className={b()}
+        >
+            <div className={b('header')}>
+                <Text variant="subheader-2" ellipsis>
+                    {title}
+                </Text>
+                {description ? (
+                    <HelpPopover htmlContent={description} placement={['bottom', 'top']} />
+                ) : null}
+            </div>
+            <Text variant="body-1" color="secondary" className={b('text')}>
+                {text}
+            </Text>
+        </Card>
+    );
+};
diff --git a/src/lib/kit/components/TogglerCard/index.ts b/src/lib/kit/components/TogglerCard/index.ts
@@ -0,0 +1 @@
+export * from './TogglerCard';
diff --git a/src/lib/kit/components/index.ts b/src/lib/kit/components/index.ts
@@ -7,5 +7,6 @@ export * from './Inputs';
 export * from './Layouts';
 export * from './LongValue';
 export * from './SimpleVerticalAccordeon';
+export * from './TogglerCard';
 export * from './Views';
 export * from './ViewLayouts';
diff --git a/src/lib/kit/hooks/useOneOf/useOneOf.scss b/src/lib/kit/hooks/useOneOf/useOneOf.scss
@@ -8,5 +8,22 @@
                 max-width: unset;
             }
         }
+
+        &_card {
+            & + .#{$ns}group-indent {
+                & > .#{$ns}use-search:not(.#{$ns}group-indent) {
+                    padding-top: 0px;
+                    margin-top: 15px;
+                }
+            }
+        }
+    }
+
+    &__card {
+        display: flex;
+
+        & > :first-child {
+            margin-right: 8px;
+        }
     }
 }
diff --git a/src/lib/kit/hooks/useOneOf/useOneOf.tsx b/src/lib/kit/hooks/useOneOf/useOneOf.tsx
@@ -4,6 +4,7 @@ import {RadioButton, Select} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
 import {ObjectIndependentInputProps} from '../../../core';
+import {TogglerCard} from '../../components';
 import {block} from '../../utils';
 
 import './useOneOf.scss';
@@ -68,17 +69,49 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
         [spec.description, spec.viewSpec.order, specProperties],
     );
 
-    const selectToggler = React.useMemo(
-        () =>
+    const togglerType = React.useMemo(() => {
+        if (spec.viewSpec.oneOfParams?.toggler === 'card' && options.length < 3) {
+            return 'card';
+        }
+
+        if (
             spec.viewSpec.oneOfParams?.toggler !== 'radio' &&
             (spec.viewSpec.oneOfParams?.toggler === 'select' ||
                 options.length > 3 ||
-                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH)),
-        [options, spec.viewSpec.oneOfParams?.toggler],
-    );
+                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH))
+        ) {
+            return 'select';
+        }
+
+        return 'radio';
+    }, [options, spec.viewSpec.oneOfParams?.toggler]);
 
     const togglerInput = React.useMemo(() => {
-        if (selectToggler) {
+        if (togglerType === 'card') {
+            return (
+                <div className={b('card')}>
+                    {options.map(({value}) => {
+                        const onClick = () => {
+                            onOneOfChange([value]);
+                        };
+
+                        return (
+                            <TogglerCard
+                                title={specProperties[value]?.viewSpec.layoutTitle || ''}
+                                disabled={spec.viewSpec.disabled}
+                                text={spec.description?.[value] || ''}
+                                description={specProperties[value]?.viewSpec.layoutDescription}
+                                onClick={onClick}
+                                selected={oneOfValue === value}
+                                key={value}
+                            />
+                        );
+                    })}
+                </div>
+            );
+        }
+
+        if (togglerType === 'select') {
             return (
                 <Select
                     width="max"
@@ -106,14 +139,23 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
                 ))}
             </RadioButton>
         );
-    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
+    }, [
+        togglerType,
+        oneOfValue,
+        spec.viewSpec.disabled,
+        name,
+        options,
+        onOneOfChange,
+        specProperties,
+    ]);
 
     const toggler = React.useMemo(() => {
         if (Layout) {
             return (
                 <div
                     className={b('toggler', {
-                        radio: !selectToggler,
+                        radio: togglerType === 'radio',
+                        card: togglerType === 'card',
                     })}
                 >
                     <Layout {...props}>{togglerInput}</Layout>
@@ -122,7 +164,7 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
         }
 
         return <div>{togglerInput}</div>;
-    }, [Layout, togglerInput, selectToggler, props]);
+    }, [Layout, togglerInput, togglerType, props]);
 
     return {oneOfValue, specProperties, toggler, togglerInput};
 };
diff --git a/src/stories/ObjectMultiOneOf.stories.tsx b/src/stories/ObjectMultiOneOf.stories.tsx
@@ -55,7 +55,13 @@ const spec: ObjectSpec = {
     },
 };
 
-const excludeOptions = ['items', 'viewSpec.type', 'viewSpec.itemLabel', 'viewSpec.table'];
+const excludeOptions = [
+    'items',
+    'viewSpec.type',
+    'viewSpec.itemLabel',
+    'viewSpec.table',
+    'viewSpec.oneOfParams',
+];
 
 const value = {
     person: {
diff --git a/src/stories/ObjectMultiOneOfFlat.stories.tsx b/src/stories/ObjectMultiOneOfFlat.stories.tsx
@@ -55,7 +55,13 @@ const spec: ObjectSpec = {
     },
 };
 
-const excludeOptions = ['items', 'viewSpec.type', 'viewSpec.itemLabel', 'viewSpec.table'];
+const excludeOptions = [
+    'items',
+    'viewSpec.type',
+    'viewSpec.itemLabel',
+    'viewSpec.table',
+    'viewSpec.oneOfParams',
+];
 
 const value = {
     person: {
diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts
@@ -284,7 +284,7 @@ const oneOfParams: ObjectSpec = {
     properties: {
         toggler: {
             type: SpecTypes.String,
-            enum: ['―', 'radio', 'select'],
+            enum: ['―', 'radio', 'select', 'card'],
             viewSpec: {type: 'select', layout: 'row', layoutTitle: 'Switch type'},
         },
     },

Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,22 @@`
`8`	`8`	`max-width: unset;`
`9`	`9`	`}`
`10`	`10`	`}`
	`11`	`+`
	`12`	`+ &_card {`
	`13`	`+ & + .#{$ns}group-indent {`
	`14`	`+ & > .#{$ns}use-search:not(.#{$ns}group-indent) {`
	`15`	`+ padding-top: 0px;`
	`16`	`+ margin-top: 15px;`
	`17`	`+ }`
	`18`	`+ }`
	`19`	`+ }`
	`20`	`+ }`
	`21`	`+`
	`22`	`+ &__card {`
	`23`	`+ display: flex;`
	`24`	`+`
	`25`	`+ & > :first-child {`
	`26`	`+ margin-right: 8px;`
	`27`	`+ }`
`11`	`28`	`}`
`12`	`29`	`}`