fix: switch toggling issue with value

GeekyAnts · Dec 6, 2021 · e4d5832 · Strato · Jan 21, 2022 · e4d5832
1 parent b3553df
commit e4d5832
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 50 deletions.
diff --git a/src/components/primitives/Switch/index.tsx b/src/components/primitives/Switch/index.tsx
@@ -1,6 +1,6 @@
 import React, { memo, forwardRef } from 'react';
 import { useToggleState } from '@react-stately/toggle';
-import { StyleSheet, ViewStyle, Switch as RNSwitch } from 'react-native';
+import { Switch as RNSwitch } from 'react-native';
 import isNil from 'lodash.isnil';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
 import { useToken } from '../../../hooks';
@@ -15,30 +15,24 @@ const StyledNBSwitch = makeStyledComponent(RNSwitch);
 // TODO: Needs proper refactor
 const Switch = (
   {
-    style,
-    onToggle,
+    disabled,
     isDisabled,
     isInvalid,
     isChecked,
     defaultIsChecked,
     accessibilityLabel,
     accessibilityHint,
+    onToggle,
+    value,
+    onValueChange,
     ...props
   }: ISwitchProps,
   ref: any
 ) => {
   const state = useToggleState({
     defaultSelected: !isNil(defaultIsChecked) ? defaultIsChecked : false,
   });
-
-  const borderColorInvalid = useToken('colors', 'danger.600');
   const checked = !isNil(isChecked) ? isChecked : state.isSelected;
-  const inValidPropFactors = {
-    borderWidth: 1,
-    borderRadius: 16,
-    borderColor: borderColorInvalid,
-  };
-
   const _ref = React.useRef(null);
   const { isHovered } = useHover({}, _ref);
 
@@ -47,21 +41,14 @@ const Switch = (
     offTrackColor: _offTrackColor,
     onThumbColor: _onThumbColor,
     offThumbColor: _offThumbColor,
-    style: themeStyle,
     ...resolvedProps
   } = usePropsResolution('Switch', props, {
     isHovered,
-    isDisabled,
+    isDisabled: disabled || isDisabled,
     isInvalid,
     isChecked: checked,
   });
 
-  const computedStyle: ViewStyle = StyleSheet.flatten([
-    themeStyle,
-    style,
-    isInvalid ? inValidPropFactors : {},
-  ]);
-
   const onTrackColor = useToken('colors', _onTrackColor);
   const offTrackColor = useToken('colors', _offTrackColor);
   const onThumbColor = useToken('colors', _onThumbColor);
@@ -90,12 +77,13 @@ const Switch = (
       activeThumbColor={onThumbColor} // react-native-web prop for active thumbColor
       ios_backgroundColor={offTrackColor}
       {...resolvedProps}
-      disabled={isDisabled}
-      onValueChange={onToggle ? onToggle : state.toggle}
-      value={checked}
-      style={computedStyle}
+      disabled={disabled || isDisabled}
+      onValueChange={(val: boolean) => {
+        onValueChange && onValueChange(val);
+        onToggle ? onToggle() : state.toggle();
+      }}
+      value={value || checked}
       ref={mergeRefs([ref, _ref])}
-      opacity={isDisabled ? 0.4 : 1}
     />
   );
 };

diff --git a/src/theme/components/switch.ts b/src/theme/components/switch.ts
@@ -2,34 +2,33 @@ import { mode, getColorScheme } from '../tools';
 import { Platform } from 'react-native';
 
 const baseStyle = (props: Record<string, any>) => {
-  const { onTrackColor, offTrackColor, onThumbColor, offThumbColor } = props;
   const colorScheme = getColorScheme(props);
-
+  //TODO: Use of Platform can be removed
   return {
-    offTrackColor:
-      offTrackColor ??
-      mode(
-        Platform.OS !== 'ios' ? 'gray.400' : 'gray.200',
-        Platform.OS !== 'ios' ? 'gray.700' : 'gray.600'
-      )(props),
-    onTrackColor:
-      onTrackColor ??
-      mode(
-        Platform.OS !== 'ios' ? `${colorScheme}.300` : `${colorScheme}.500`,
-        Platform.OS !== 'ios' ? `${colorScheme}.700` : `${colorScheme}.500`
-      )(props),
-    onThumbColor:
-      onThumbColor ??
-      mode(
-        Platform.OS !== 'ios' ? `${colorScheme}.600` : 'white',
-        Platform.OS !== 'ios' ? `${colorScheme}.500` : 'white'
-      )(props),
-    offThumbColor:
-      offThumbColor ??
-      mode(
-        Platform.OS !== 'ios' ? 'gray.100' : 'white',
-        Platform.OS !== 'ios' ? 'gray.200' : 'white'
-      )(props),
+    _disabled: {
+      opacity: 0.4,
+    },
+    _invalid: {
+      borderWidth: 1,
+      borderRadius: 16,
+      borderColor: 'danger.600',
+    },
+    offTrackColor: mode(
+      Platform.OS !== 'ios' ? 'gray.400' : 'gray.200',
+      Platform.OS !== 'ios' ? 'gray.700' : 'gray.600'
+    )(props),
+    onTrackColor: mode(
+      Platform.OS !== 'ios' ? `${colorScheme}.300` : `${colorScheme}.500`,
+      Platform.OS !== 'ios' ? `${colorScheme}.700` : `${colorScheme}.500`
+    )(props),
+    onThumbColor: mode(
+      Platform.OS !== 'ios' ? `${colorScheme}.600` : 'white',
+      Platform.OS !== 'ios' ? `${colorScheme}.500` : 'white'
+    )(props),
+    offThumbColor: mode(
+      Platform.OS !== 'ios' ? 'gray.100' : 'white',
+      Platform.OS !== 'ios' ? 'gray.200' : 'white'
+    )(props),
   };
 };