@hero-design/rn 7.16.0 → 7.16.2

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.16.0",
+  "version": "7.16.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "react-native": "src/index.ts",
   "types": "types/index.d.ts",
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
@@ -21,18 +20,18 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.16.0",
+    "@hero-design/colors": "7.16.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"
   },
   "peerDependencies": {
+    "@react-native-community/datetimepicker": "^3.5.2",
     "react": "17.0.2",
     "react-native": "0.65.1",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
-    "@react-native-community/datetimepicker": "^3.5.2",
     "react-native-webview": "^11.15.0"
   },
   "devDependencies": {

package/rollup.config.js

@@ -29,6 +29,8 @@ export default {
     'react-native-safe-area-context',
     '@react-native-community/datetimepicker',
     'react-native-webview',
+    'react-native-pager-view',
+    'react-native-vector-icons',
   ],
   plugins: [
     replace({

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -23,7 +23,7 @@ const DatePickerIOS = ({
   style,
   testID,
 }: DatePickerProps) => {
-  const [selectingDate, setSelectingDate] = useState<Date | undefined>(value);
+  const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const [open, setOpen] = useState(false);
 
   const displayValue = value ? formatDate(displayFormat, value) : '';
@@ -70,7 +70,7 @@ const DatePickerIOS = ({
         <StyledPickerWrapper>
           <DateTimePicker
             testID="datePickerIOS"
-            value={selectingDate || new Date()}
+            value={selectingDate}
             mode="date"
             onChange={(_: any, date: Date | undefined) => {
               if (date) {

package/src/components/List/StyledBasicListItem.tsx

@@ -18,8 +18,8 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
   alignItems: 'center',
   flexDirection: 'row',
   backgroundColor: themeSelected
-    ? theme.__hd__.select.colors.checkedOption
-    : theme.__hd__.select.colors.option,
+    ? theme.__hd__.list.colors.checkedListItemContainerBackground
+    : theme.__hd__.list.colors.listItemContainerBackground,
   padding: theme.__hd__.list.space.listItemContainerPadding,
   opacity: themeDisabled
     ? theme.__hd__.list.opacity.disabled

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

@@ -1,9 +1,6 @@
 import React from 'react';
-import { View } from 'react-native';
 import Icon from '../../Icon';
-
-import Typography from '../../Typography';
-import { OptionWrapper } from '../StyledSelect';
+import List from '../../List';
 
 const Option = ({
   text,
@@ -14,12 +11,12 @@ const Option = ({
   selected: boolean;
   onPress: () => void;
 }) => (
-  <OptionWrapper themeSelected={selected} onPress={onPress}>
-    <View style={{ flex: 1 }}>
-      <Typography.Text fontSize="large">{text}</Typography.Text>
-    </View>
-    {selected && <Icon icon="checkmark" size="small" />}
-  </OptionWrapper>
+  <List.BasicItem
+    selected={selected}
+    onPress={onPress}
+    title={text}
+    suffix={selected ? <Icon icon="checkmark" size="small" /> : undefined}
+  />
 );
 
 export default Option;

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

@@ -2,10 +2,13 @@
 
 exports[`Option renders correctly 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -14,22 +17,26 @@ exports[`Option renders correctly 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f1e9fb",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f1e9fb",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View
     style={
-      Object {
-        "flex": 1,
-      }
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
     }
   >
     <Text
@@ -52,19 +59,30 @@ exports[`Option renders correctly 1`] = `
       testOption
     </Text>
   </View>
-  <HeroIcon
-    name="checkmark"
+  <View
     style={
       Array [
         Object {
-          "color": "#292a2b",
-          "fontSize": 20,
+          "marginLeft": 8,
         },
         undefined,
       ]
     }
-    themeIntent="text"
-    themeSize="small"
-  />
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+  </View>
 </View>
 `;