fix: fix select list item multi and single select

Author: minheq

src/components/Checkbox/Checkbox.tsx

@@ -9,36 +9,50 @@ import {
 import { Icon } from '../../icons';
 import { Theme, withTheme } from '../../theme';
 
+export type CheckboxShape = 'circle' | 'square';
+
 export interface CheckboxProps {
   theme: Theme;
   isChecked?: boolean;
   isDisabled?: boolean;
+  /** Sometimes we just want the display of the checkbox  */
+  isInteractive?: boolean;
   checkedIcon?: React.ReactNode;
+  /** @default square */
+  shape?: CheckboxShape;
   onChange?: (e: GestureResponderEvent) => void | undefined;
 }
 
 const CheckboxBase = (props: CheckboxProps & TouchableHighlightProps) => {
   const {
     isChecked = false,
     isDisabled = false,
+    isInteractive = true,
     checkedIcon,
     onChange = () => null,
+    shape = 'square',
     theme,
     ...touchableHighlightProps
   } = props;
 
   const {
     checkboxStyle,
     checkboxFocusBackgroundColor,
-  } = theme.getCheckboxStyles(isChecked, isDisabled);
+  } = theme.getCheckboxStyles(isChecked, isDisabled, shape);
 
   return (
     <TouchableHighlight
       accessible
       style={checkboxStyle}
       underlayColor={checkboxFocusBackgroundColor}
-      onPress={onChange}
-      disabled={isDisabled}
+      {...(isInteractive
+        ? {
+            disabled: isDisabled,
+            onPress: onChange,
+          }
+        : {
+            disabled: true,
+          })}
       {...touchableHighlightProps}
     >
       <View

src/components/SelectList/SelectList.mdx

@@ -6,21 +6,53 @@ menu: Components
 import { Playground, PropsTable } from 'docz';
 import SelectList from './SelectList';
 import SelectListItem from './SelectListItem';
+import { State } from 'react-powerplug';
 
 ## Usage
 
-### Default
+### Multi select
 
 <Playground>
-  <SelectList
-    selectedValue="js"
-    onValueChange={(itemValue, itemIndex) =>
-      console.log('itemValue', itemValue)
-    }
-  >
-    <SelectListItem label="Java" value="java" />
-    <SelectListItem label="JavaScript" value="js" />
-  </SelectList>
+  <State initial={{ selectedValue: ['js', 'go'] }}>
+    {({ state, setState }) => (
+      <SelectList
+        isMulti
+        selectedValue={state.selectedValue}
+        onValueChange={(newValue, itemIndex) => {
+          setState({ selectedValue: newValue });
+        }}
+      >
+        <SelectListItem label="Java" value="java" />
+        <SelectListItem label="JavaScript" value="js" />
+        <SelectListItem label="Elixir" value="elixir" />
+        <SelectListItem label="Haskell" value="haskell" />
+        <SelectListItem label="Rust" value="rust" />
+        <SelectListItem label="Go" value="go" />
+      </SelectList>
+    )}
+  </State>
+</Playground>
+
+### Single select
+
+<Playground>
+  <State initial={{ selectedValue: 'go' }}>
+    {({ state, setState }) => (
+      <SelectList
+        selectedValue={state.selectedValue}
+        onValueChange={(newValue, itemIndex) => {
+          setState({ selectedValue: newValue });
+        }}
+      >
+        <SelectListItem label="Java" value="java" />
+        <SelectListItem label="JavaScript" value="js" />
+        <SelectListItem label="Elixir" value="elixir" />
+        <SelectListItem label="Haskell" value="haskell" />
+        <SelectListItem label="Rust" value="rust" />
+        <SelectListItem label="Go" value="go" />
+      </SelectList>
+    )}
+  </State>
 </Playground>
 
 ## Props

src/components/SelectList/SelectList.tsx

@@ -22,7 +22,7 @@ const SelectListBase = (props: SelectListProps): any => {
     if (isMulti && Array.isArray(selectedValue)) {
       if (isSelected) {
         onValueChange(
-          selectedValue.filter(val => val === itemValue),
+          selectedValue.filter(val => val !== itemValue),
           itemIndex,
         );
       } else {

src/components/SelectList/SelectListItem.tsx

@@ -1,50 +1,45 @@
 import * as React from 'react';
 import {
-  TextStyle,
   TouchableHighlight,
   TouchableHighlightProps,
   View,
-  ViewStyle,
 } from 'react-native';
 
-import { Icon } from '../../icons';
 import { Theme, withTheme } from '../../theme';
 import { SelectListSize } from '../../theme/component-variables/selectListVariables';
-import { Box } from '../Layout';
+import { SelectListStyles } from '../../theme/style-getters/getSelectListStyles';
+import { Checkbox } from '../Checkbox';
 import { Text } from '../Typography';
 
-export interface SelectListItemProps extends TouchableHighlightProps {
+export interface SelectListItemBaseProps {
+  index?: number;
+  isSelected?: boolean;
+  onSelect?: (value: string, index: number, isSelected: boolean) => void;
+}
+
+export interface SelectListItemProps
+  extends SelectListItemBaseProps,
+    TouchableHighlightProps {
   theme: Theme;
   size?: SelectListSize;
   isDisabled?: boolean;
-  onSelect?: (value: string, index: number, isSelected: boolean) => void;
-  testID?: string;
   label: string;
-  isSelected?: boolean;
-  index?: number;
   value: string;
-  checkedIcon?: React.ReactNode;
   /**
    * Inline styles for components
    */
-  dangerouslySetInlineStyle?: {
-    containerStyle?: ViewStyle;
-    wrapperStyle?: ViewStyle;
-    textStyle?: TextStyle;
-  };
+  dangerouslySetInlineStyle?: Partial<SelectListStyles>;
 }
 
 const SelectListItemBase = (props: SelectListItemProps) => {
   const {
-    checkedIcon,
     dangerouslySetInlineStyle,
     index = 0,
     isDisabled = false,
     isSelected = false,
     label,
     onSelect = () => null,
     size = 'medium',
-    testID,
     theme,
     value,
     ...touchableHighlightProps
@@ -54,6 +49,7 @@ const SelectListItemBase = (props: SelectListItemProps) => {
     containerStyle,
     textStyle,
     focusBackgroundColor,
+    wrapperStyle,
   } = theme.getSelectListStyles(size, isDisabled, isSelected);
 
   return (
@@ -66,11 +62,11 @@ const SelectListItemBase = (props: SelectListItemProps) => {
         ...(dangerouslySetInlineStyle &&
           dangerouslySetInlineStyle.containerStyle),
       }}
-      testID={testID}
       {...touchableHighlightProps}
     >
       <View
         style={{
+          ...wrapperStyle,
           ...(dangerouslySetInlineStyle &&
             dangerouslySetInlineStyle.wrapperStyle),
         }}
@@ -86,17 +82,7 @@ const SelectListItemBase = (props: SelectListItemProps) => {
         >
           {label}
         </Text>
-        {isSelected && (
-          <Box position="absolute" right={0} marginRight={4}>
-            {checkedIcon || (
-              <Icon
-                name="check"
-                size={22}
-                color={theme.themeVariables.colors.text.success}
-              />
-            )}
-          </Box>
-        )}
+        <Checkbox isInteractive={false} shape="circle" isChecked={isSelected} />
       </View>
     </TouchableHighlight>
   );

src/theme/component-variables/checkboxVariables.ts

@@ -2,22 +2,18 @@ import { ViewStyle } from 'react-native';
 
 import { ThemeVariables } from '../ThemeInterface';
 
-export type CheckboxAppearanceStyles = ViewStyle & {
-  backgroundColor: string;
-  borderColor: string;
-};
-
-export type BaseState = CheckboxAppearanceStyles;
-export type DisabledState = Partial<CheckboxAppearanceStyles>;
-export type FocusState = Partial<CheckboxAppearanceStyles>;
-export type CheckedState = Partial<CheckboxAppearanceStyles>;
+export interface ShapeStyle {
+  circle: ViewStyle;
+  square: ViewStyle;
+}
 
 export interface CheckboxVariables {
-  base: BaseState;
-  disabled: DisabledState;
-  checked: CheckedState;
-  checkedFocus: CheckedState;
-  uncheckedFocus: CheckedState;
+  base: ViewStyle;
+  disabled: ViewStyle;
+  checked: ViewStyle;
+  checkedFocus: ViewStyle;
+  uncheckedFocus: ViewStyle;
+  shape: ShapeStyle;
 }
 
 export const getCheckboxVariables = (
@@ -27,14 +23,13 @@ export const getCheckboxVariables = (
     base: {
       backgroundColor: themeVariables.colors.background.plain,
       borderColor: themeVariables.colors.border.default,
-      borderRadius: themeVariables.controlBorderRadius.small,
       borderWidth: 1,
       height: 32,
       width: 32,
     },
     checked: {
       backgroundColor: themeVariables.colors.background.primary.default,
-      borderColor: themeVariables.colors.border.primary,
+      borderColor: 'transparent',
     },
     checkedFocus: {
       backgroundColor: themeVariables.colors.background.primary.focus,
@@ -43,6 +38,14 @@ export const getCheckboxVariables = (
       backgroundColor: themeVariables.colors.background.disabled,
       borderColor: themeVariables.colors.border.default,
     },
+    shape: {
+      circle: {
+        borderRadius: 999,
+      },
+      square: {
+        borderRadius: themeVariables.controlBorderRadius.small,
+      },
+    },
     uncheckedFocus: {
       backgroundColor: themeVariables.colors.background.tint1,
     },

src/theme/component-variables/selectListVariables.ts

@@ -35,6 +35,7 @@ export interface TextSizes {
 export type SelectListSize = keyof SelectListSizes;
 
 export interface SelectListVariables {
+  wrapper: ViewStyle;
   base: BaseState;
   disabled: DisabledState;
   selected: SelectedState;
@@ -82,5 +83,10 @@ export const getSelectListVariables = (
       },
     },
     textSizes: textSizes.size,
+    wrapper: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
   };
 };

src/theme/style-getters/getCheckboxStyles.ts

@@ -1,18 +1,20 @@
 import { ViewStyle } from 'react-native';
 
+import { CheckboxShape } from '../../components/Checkbox/Checkbox';
 import { CheckboxVariables } from '../component-variables/checkboxVariables';
 
 export type GetCheckboxStyles = (
   isChecked: boolean,
   isDisabled: boolean,
+  shape: CheckboxShape,
 ) => {
   checkboxStyle: ViewStyle;
   checkboxFocusBackgroundColor?: string;
 };
 
 export const getCheckboxStyles = (
   checkboxVariables: CheckboxVariables,
-): GetCheckboxStyles => (isChecked, isDisabled) => {
+): GetCheckboxStyles => (isChecked, isDisabled, shape) => {
   return {
     checkboxFocusBackgroundColor: isChecked
       ? checkboxVariables.checkedFocus.backgroundColor
@@ -21,6 +23,7 @@ export const getCheckboxStyles = (
       ...checkboxVariables.base,
       ...(isChecked ? checkboxVariables.checked : {}),
       ...(isDisabled ? checkboxVariables.disabled : {}),
+      ...checkboxVariables.shape[shape],
     },
   };
 };

src/theme/style-getters/getSelectListStyles.ts

@@ -6,6 +6,7 @@ import {
 } from '../component-variables/selectListVariables';
 
 export interface SelectListStyles {
+  wrapperStyle: ViewStyle;
   containerStyle: ViewStyle;
   focusBackgroundColor: string;
   textStyle: TextStyle;
@@ -40,5 +41,6 @@ export const getSelectListStyles = (
     },
     focusBackgroundColor,
     textStyle: textSizes[size],
+    wrapperStyle: selectListVariables.wrapper,
   };
 };