feat: program controlled Switch

taskany-inc · May 13, 2024 · 700e095 · 700e095
1 parent cce5d29
commit 700e095
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/harmony/Switch/Switch.stories.tsx b/src/harmony/Switch/Switch.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { IconGridLayoutOutline, IconListUnorderedOutline, IconMessagePlusOutline } from '@taskany/icons';
 
@@ -62,3 +62,29 @@ export const ControlsWithCounter: Story = (props) => {
         </Switch>
     );
 };
+
+export const ProgramControlled: Story = () => {
+    const [state, setState] = useState('kanban');
+
+    const onUpdatesClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {
+        // eslint-disable-next-line no-alert, no-restricted-globals
+        const result = confirm('Сonfirm to continue');
+
+        if (result) {
+            setState('updates');
+        }
+    }, []);
+
+    return (
+        <Switch value={state}>
+            <SwitchControl iconLeft={<IconListUnorderedOutline size="s" />} text="List" value="list" />
+            <SwitchControl iconLeft={<IconGridLayoutOutline size="s" />} text="Kanban" value="kanban" />
+            <SwitchControl
+                onClick={onUpdatesClick}
+                iconLeft={<IconMessagePlusOutline size="s" />}
+                text="Updates"
+                value="updates"
+            />
+        </Switch>
+    );
+};
diff --git a/src/harmony/Switch/Switch.tsx b/src/harmony/Switch/Switch.tsx
@@ -39,7 +39,7 @@ interface SwitchControlProps extends Omit<React.ComponentProps<typeof Button>, '
     count?: number;
 }
 
-export const SwitchControl: React.FC<SwitchControlProps> = ({ text, value, className, count, ...props }) => {
+export const SwitchControl: React.FC<SwitchControlProps> = ({ text, value, className, count, onClick, ...props }) => {
     const { active, register, onChange, name, animated } = useContext(SwitchContext);
     const controlRef = useRef<HTMLButtonElement>(null);
 
@@ -80,7 +80,7 @@ export const SwitchControl: React.FC<SwitchControlProps> = ({ text, value, class
                 ),
                 props.iconRight,
             )}
-            onClick={handleClick}
+            onClick={onClick || handleClick}
         />
     );
 };
@@ -102,6 +102,10 @@ export const Switch: React.FC<PropsWithChildren<SwitchProps>> = ({
     const nodesMapRef = useRef<Map<string, HTMLButtonElement>>(new Map());
     const pinRef = useRef<HTMLSpanElement>(null);
 
+    useEffect(() => {
+        setActive(value);
+    }, [value]);
+
     const updatePinStyles = useEventCallback(() => {
         if (!active) {
             return;