Switch on icon click fix

wri · Nov 11, 2024 · 4dd0dfe · 4dd0dfe
1 parent 264f13e
commit 4dd0dfe
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 204 deletions.
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
@@ -1,5 +1,5 @@
 # Button
-
+[Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/button--docs)
 
 ## Import
 ```

diff --git a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
@@ -58,48 +58,48 @@ export const LayerGroupOpen: Story = {
   },
 }
 
-// export const Radio: Story = {
-//   args: {
-//     name: 'radio-layer',
-//     label: 'Layer name',
-//     caption: 'Caption',
-//     variant: 'radio',
-//   },
-// }
-
-// export const Disabled: Story = {
-//   args: {
-//     name: 'switch-layer-1',
-//     label: 'Layer name',
-//     caption: 'Caption',
-//     isDisabled: true,
-//   },
-// }
-
-// export const RadioDisabeld: Story = {
-//   args: {
-//     name: 'radio-layer',
-//     label: 'Layer name',
-//     caption: 'Caption',
-//     variant: 'radio',
-//     isDisabled: true,
-//   },
-// }
-
-// export const NoInfoButton: Story = {
-//   args: {
-//     name: 'switch-layer-2',
-//     label: 'Layer name',
-//     caption: 'Caption',
-//     showInfoButton: false,
-//   },
-// }
-
-// export const CustomInfoButtonLabel: Story = {
-//   args: {
-//     name: 'switch-layer-3',
-//     label: 'Layer name',
-//     caption: 'Caption',
-//     infoButtonLabel: 'Another Label',
-//   },
-// }
+export const LayerGroupWithRadios: Story = {
+  args: {
+    defaultIndex: [0],
+    allowMultiple: true,
+    allowToggle: true,
+    children: (
+      <>
+        <LayerGroup
+          label='Title 1'
+          caption='Caption 1'
+          layerItems={[
+            {
+              name: 'layer-1-item-11',
+              label: 'Layer name 1',
+              caption: 'Caption',
+            },
+            {
+              name: 'layer-1-item-12',
+              label: 'Layer name 2',
+              caption: 'Caption',
+            },
+          ]}
+        />
+        <LayerGroup
+          label='Title 2'
+          caption='Caption 2'
+          layerItems={[
+            {
+              name: 'layer-2-item-21',
+              label: 'Layer name 1',
+              caption: 'Caption',
+              variant: 'radio',
+            },
+            {
+              name: 'layer-2-item-22',
+              label: 'Layer name 2',
+              caption: 'Caption',
+              variant: 'radio',
+            },
+          ]}
+        />
+      </>
+    )
+  },
+}
diff --git a/src/components/Layer/LayerGroup/index.tsx b/src/components/Layer/LayerGroup/index.tsx
@@ -6,7 +6,7 @@ import {
   useTheme,
   RadioGroup,
 } from '@chakra-ui/react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { LayerGroupProps } from './types'
 import { LayerGroupCaption, LayerGroupTitle } from './styled'
 import { getThemedColor } from '../../../lib/theme'
@@ -21,6 +21,18 @@ const LayerGroup = ({
   const [activeItems, setActiveItems] = useState<{ key?: string, value?: boolean }>({})
   const theme = useTheme()
 
+  useEffect(() => {
+    let newActiveItems = { ...activeItems }
+    layerItems.forEach(item => {
+      newActiveItems = {
+        ...newActiveItems,
+        [item.name]: item.isDefaultSelected,
+      }
+    })
+
+    setActiveItems(newActiveItems)
+  }, [])
+
   const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>, onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined) => {
     const newActiveItems = {
       ...activeItems,

diff --git a/src/components/Layer/LayerItem/index.tsx b/src/components/Layer/LayerItem/index.tsx
@@ -20,7 +20,7 @@ const LayerItem = ({
   variant = 'switch',
   isDisabled,
   onInfoClick,
-  isDefaultSelected,
+  isDefaultSelected = false,
   onChange,
 }: LayerItemProps) => {
   const isSwitch = variant === 'switch'
@@ -36,7 +36,7 @@ const LayerItem = ({
           <Switch
             name={name}
             isDisabled={isDisabled}
-            isChecked={isDefaultSelected}
+            defaultChecked={isDefaultSelected}
             onChange={onChange ? (e) => onChange(e) : () => { }}
           />
         </SwitchContainer>

diff --git a/src/components/Switch/Switch.stories.ts b/src/components/Switch/Switch.stories.ts
@@ -18,14 +18,14 @@ type Story = StoryObj<typeof meta>
 export const On: Story = {
   args: {
     name: 'switch-on',
-    isChecked: true,
+    defaultChecked: true,
   },
 }
 
 export const DisabledOn: Story = {
   args: {
     name: 'switch-disabled-on',
-    isChecked: true,
+    defaultChecked: true,
     isDisabled: true,
   },
 }

diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx
@@ -1,103 +1,41 @@
-import React, { useEffect, useState } from 'react'
-import { Switch as ChakraSwitch, FormLabel, useTheme } from '@chakra-ui/react'
+import React from 'react'
+import { FormLabel } from '@chakra-ui/react'
 import { SwitchProps } from './types'
-import {
-  SwitchAndLabelContainer,
-  SwitchContainer,
-  SwitchContent,
-  SwitchIcon,
-  SwitchIconContainer,
-  SwitchIconHover,
-} from './styled'
-import { getThemedColor } from '../../lib/theme'
+import { StyledSwitch, SwitchAndLabelContainer } from './styled'
 
 const Switch = ({
   name,
   label,
-  isChecked = false,
+  defaultChecked = false,
   onChange,
   isDisabled = false,
   isLabelOnRight = false,
   ...rest
 }: SwitchProps) => {
-  const [isLocalChecked, setIsLocalChecked] = useState(isChecked)
-  const [isFocused, setIsFocused] = useState(false)
-  const theme = useTheme()
-
-  useEffect(() => {
-    setIsLocalChecked(isChecked)
-  }, [isChecked])
-
   const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsLocalChecked(e.target.checked)
-
     if (onChange) {
       onChange(e)
     }
   }
 
-  const handleOnIconClick = () => {
-    setIsLocalChecked(!isLocalChecked)
-  }
-
-  const getBackgroundColor = () => {
-    let backgroundColor = getThemedColor(theme.colors, 'neutral', 500)
-    if (isLocalChecked) {
-      backgroundColor = getThemedColor(theme.colors, 'primary', 500)
-    }
-
-    return isDisabled
-      ? getThemedColor(theme.colors, 'neutral', 300)
-      : backgroundColor
-  }
-
   return (
     <SwitchAndLabelContainer>
-      {!isLabelOnRight ? (
+      {!isLabelOnRight && label ? (
         <FormLabel htmlFor={name} mb='0'>
           {label}
         </FormLabel>
       ) : null}
-      <SwitchContainer
-        isChecked={isLocalChecked}
-        isFocused={isFocused}
+      <StyledSwitch
+        id={name}
+        name={name}
+        aria-label={label || rest['aria-label']}
+        defaultChecked={defaultChecked}
+        onChange={handleOnChange}
         isDisabled={isDisabled}
-        backgroundColor={getBackgroundColor()}
-        checkedAndDisabledColor={
-          isChecked && isDisabled
-            ? getThemedColor(theme.colors, 'primary', 200)
-            : getThemedColor(theme.colors, 'neutral', 100)
-        }
-      >
-        <SwitchContent>
-          {!isDisabled ? (
-            <SwitchIconHover className='switch-icon-hover' />
-          ) : null}
-          <SwitchIconContainer
-            className={isLocalChecked && !isDisabled ? 'move-me' : ''}
-          >
-            {isLocalChecked && !isDisabled ? (
-              <SwitchIcon
-                onClick={handleOnIconClick}
-                color={getThemedColor(theme.colors, 'primary', 700)}
-              />
-            ) : null}
-          </SwitchIconContainer>
-          <ChakraSwitch
-            id={name}
-            name={name}
-            aria-label={label || rest['aria-label']}
-            isChecked={isLocalChecked}
-            onChange={handleOnChange}
-            isDisabled={isDisabled}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            {...rest}
-          />
-        </SwitchContent>
-      </SwitchContainer>
-      {isLabelOnRight ? (
-        <FormLabel htmlFor={name} mb='0' ml={label ? '5' : '0'}>
+        {...rest}
+      />
+      {isLabelOnRight && label ? (
+        <FormLabel htmlFor={name} mb='0' ml={label ? '5' : '0'} mr={0}>
           {label}
         </FormLabel>
       ) : null}