@hero-design/rn 7.27.1 → 8.0.0-rc.0

package/src/components/Select/MultiSelect/Option.tsx

@@ -2,30 +2,43 @@ import React from 'react';
 import type { ReactElement } from 'react';
 import { useTheme } from '../../../theme';
 import List from '../../List';
+import Icon from '../../Icon';
 
 const Option = ({
   text,
   disabled = false,
   selected,
   onPress,
+  highlighted = false,
 }: {
   text: string | ReactElement;
   disabled?: boolean;
   selected: boolean;
   onPress: () => void;
+  highlighted?: boolean;
 }) => {
   const theme = useTheme();
-  return (
-    <List.BasicItem
-      selected={selected}
-      disabled={disabled}
-      onPress={onPress}
-      title={text}
-      suffix={selected ? 'checkmark' : undefined}
-      style={{
-        marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin,
-      }}
-    />
+  const props = {
+    selected,
+    disabled,
+    onPress,
+    title: text,
+    suffix:
+      selected === true ? (
+        <Icon
+          icon="checkmark"
+          intent={disabled ? 'disabled-text' : 'primary'}
+          size="small"
+          style={{
+            marginRight: theme.__hd__.select.space.suffixMarginRight,
+          }}
+        />
+      ) : undefined,
+  };
+  return highlighted === true ? (
+    <List.Item {...props} />
+  ) : (
+    <List.BasicItem {...props} />
   );
 };
 

package/src/components/Select/MultiSelect/OptionList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SectionListRenderItemInfo, SectionList } from 'react-native';
-import StyledOptionList from '../StyledOptionList';
+import BaseOptionList from '../BaseOptionList';
 import Option from './Option';
 import type { MultiSelectProps } from '.';
 import type { OptionType, SectionData, SectionType } from '../types';
@@ -49,12 +49,13 @@ const OptionList = <V, T extends OptionType<V>>({
         text={item.text}
         disabled={item.disabled}
         onPress={onItemPress}
+        highlighted={item.highlighted}
       />
     );
   };
 
   return (
-    <StyledOptionList
+    <BaseOptionList
       keyExtractor={keyExtractor}
       loading={loading}
       onEndReached={onEndReached}

package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -19,7 +19,6 @@ exports[`Option renders correctly 1`] = `
       "backgroundColor": "#ece8ef",
       "borderRadius": 4,
       "flexDirection": "row",
-      "marginHorizontal": 12,
       "opacity": 1,
       "padding": 16,
     }
@@ -74,7 +73,9 @@ exports[`Option renders correctly 1`] = `
             "color": "#401960",
             "fontSize": 20,
           },
-          undefined,
+          Object {
+            "marginRight": 12,
+          },
         ]
       }
       themeIntent="primary"

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -61,7 +61,14 @@ exports[`OptionList render isLoading correctly 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -197,7 +204,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -252,7 +258,9 @@ exports[`OptionList render isLoading correctly 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -442,7 +450,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -554,7 +561,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -854,7 +860,14 @@ exports[`OptionList renders correctly 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -990,7 +1003,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1045,7 +1057,9 @@ exports[`OptionList renders correctly 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -1235,7 +1249,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1347,7 +1360,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1487,7 +1499,14 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -1623,7 +1642,6 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1678,7 +1696,9 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -1868,7 +1888,6 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1923,7 +1942,9 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -2005,7 +2026,6 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2145,7 +2165,14 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -2281,7 +2308,6 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2336,7 +2362,9 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
                     "color": "#401960",
                     "fontSize": 20,
                   },
-                  undefined,
+                  Object {
+                    "marginRight": 12,
+                  },
                 ]
               }
               themeIntent="primary"
@@ -2526,7 +2554,6 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2638,7 +2665,6 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }