@salutejs/plasma-new-hope 0.324.1-canary.1986.15225454757.0 → 0.324.1-canary.1986.15255471728.0

package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx

@@ -11,7 +11,7 @@ import { Combobox } from './Combobox';
 type StorySelectProps = ComponentProps<typeof Combobox> & {
     enableContentLeft?: boolean;
     hasHint?: boolean;
-    enableSelectAll?: boolean;
+    selectAllLabel?: string;
     selectAllSticky?: boolean;
 };
 
@@ -175,13 +175,6 @@ const meta: Meta<StorySelectProps> = {
         emptyStateDescription: {
             control: { type: 'text' },
         },
-        enableSelectAll: {
-            control: 'boolean',
-        },
-        selectAllSticky: {
-            control: 'boolean',
-            if: { arg: 'enableSelectAll', truthy: true },
-        },
     },
     args: {
         label: 'Label',
@@ -211,8 +204,6 @@ const meta: Meta<StorySelectProps> = {
         hintWidth: '10rem',
         hintHasArrow: true,
         emptyStateDescription: '',
-        enableSelectAll: false,
-        selectAllSticky: false,
     },
     parameters: {
         controls: {
@@ -248,8 +239,6 @@ const meta: Meta<StorySelectProps> = {
                 'hintWidth',
                 'hintHasArrow',
                 'emptyStateDescription',
-                'enableSelectAll',
-                'selectAllSticky',
             ],
         },
     },
@@ -472,6 +461,7 @@ const items = [
 
 const SingleStory = (args: StorySelectProps) => {
     const [value, setValue] = useState('');
+
     return (
         <div style={{ width: '400px' }}>
             <Combobox
@@ -492,12 +482,12 @@ export const Single: StoryObj<StorySelectProps> = {
     },
     parameters: {
         controls: {
-            exclude: ['isTargetAmount', 'enableSelectAll'],
+            exclude: ['isTargetAmount'],
         },
     },
 };
 
-const MultipleStory = ({ enableSelectAll, selectAllSticky, ...args }: StorySelectProps) => {
+const MultipleStory = (args: StorySelectProps) => {
     const [value, setValue] = useState([]);
 
     return (
@@ -509,7 +499,6 @@ const MultipleStory = ({ enableSelectAll, selectAllSticky, ...args }: StorySelec
                 value={value}
                 onChange={setValue}
                 contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
-                selectAllOptions={enableSelectAll ? { sticky: selectAllSticky || false } : undefined}
             />
         </div>
     );
@@ -521,3 +510,187 @@ export const Multiple: StoryObj<StorySelectProps> = {
         closeAfterSelect: false,
     },
 };
+
+const flatItems = [
+    {
+        value: 'north_america',
+        label: 'Северная Америка',
+    },
+    {
+        value: 'rio_de_janeiro',
+        label: 'Рио-де-Жанейро',
+    },
+    {
+        value: 'sao_paulo',
+        label: 'Сан-Паулу',
+    },
+    {
+        value: 'buenos_aires',
+        label: 'Буэнос-Айрес',
+    },
+    {
+        value: 'cordoba',
+        label: 'Кордова',
+    },
+    {
+        value: 'bogota',
+        label: 'Богота',
+    },
+    {
+        value: 'medellin',
+        label: 'Медельин',
+    },
+    {
+        value: 'paris',
+        label: 'Париж',
+    },
+    {
+        value: 'lyon',
+        label: 'Лион',
+    },
+    {
+        value: 'berlin',
+        label: 'Берлин',
+    },
+    {
+        value: 'munich',
+        label: 'Мюнхен',
+    },
+    {
+        value: 'rome',
+        label: 'Рим',
+    },
+    {
+        value: 'milan',
+        label: 'Милан',
+    },
+    {
+        value: 'madrid',
+        label: 'Мадрид',
+    },
+    {
+        value: 'barcelona',
+        label: 'Барселона',
+    },
+    {
+        value: 'london',
+        label: 'Лондон',
+    },
+    {
+        value: 'manchester',
+        label: 'Манчестер',
+    },
+    {
+        value: 'beijing',
+        label: 'Пекин',
+    },
+    {
+        value: 'shanghai',
+        label: 'Шанхай',
+    },
+    {
+        value: 'tokyo',
+        label: 'Токио',
+    },
+    {
+        value: 'osaka',
+        label: 'Осака',
+    },
+    {
+        value: 'delhi',
+        label: 'Дели',
+    },
+    {
+        value: 'mumbai',
+        label: 'Мумбаи',
+    },
+    {
+        value: 'seoul',
+        label: 'Сеул',
+    },
+    {
+        value: 'busan',
+        label: 'Пусан',
+    },
+    {
+        value: 'bangkok',
+        label: 'Бангкок',
+    },
+    {
+        value: 'phuket',
+        label: 'Пхукет',
+    },
+    {
+        value: 'africa',
+        label: 'Африка',
+    },
+];
+
+const SelectAllStory = (args: StorySelectProps) => {
+    const [value, setValue] = useState([]);
+    const [checked, setChecked] = useState(false);
+    const [indeterminate, setIndeterminate] = useState(false);
+
+    const handleClick = () => {
+        if (checked && !indeterminate) {
+            setValue([]);
+        } else {
+            setValue(flatItems.map((item) => item.value));
+        }
+    };
+
+    React.useEffect(() => {
+        if (value.length === 0) {
+            setChecked(false);
+            setIndeterminate(false);
+        } else if (value.length === flatItems.length) {
+            setChecked(true);
+            setIndeterminate(false);
+        } else {
+            setChecked(true);
+            setIndeterminate(true);
+        }
+    }, [value]);
+
+    return (
+        <div style={{ width: '400px' }}>
+            <Combobox
+                placeholder="Placeholder"
+                multiple
+                items={flatItems}
+                value={value}
+                onChange={setValue}
+                listOverflow="auto"
+                listMaxHeight="300px"
+                selectAllOptions={{
+                    sticky: args?.selectAllSticky || false,
+                    label: args?.selectAllLabel,
+                    checked,
+                    indeterminate,
+                    onClick: handleClick,
+                }}
+            />
+        </div>
+    );
+};
+
+export const SelectAll: StoryObj<StorySelectProps> = {
+    render: (args) => <SelectAllStory {...args} />,
+    argTypes: {
+        selectAllSticky: {
+            control: 'boolean',
+        },
+        selectAllLabel: {
+            control: 'text',
+        },
+    },
+    args: {
+        selectAllSticky: false,
+        selectAllLabel: 'Выбрать все',
+    },
+    parameters: {
+        controls: {
+            include: ['selectAllSticky', 'selectAllLabel'],
+        },
+    },
+};