@hero-design/rn 7.12.1 → 7.13.0

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -0,0 +1,513 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatePickerIOS renders correctly 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="none"
+    testID="datePickerInputIOS"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        Array [
+          Object {
+            "marginVertical": 8,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "padding": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#292a2b",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
+          }
+          themeVariant="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -10,
+                "zIndex": 1,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            testID="input-label"
+            themeFontSize="small"
+            themeFontWeight="regular"
+            themeIntent="body"
+            themeVariant="filled"
+          >
+            Start date
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "flexGrow": 2,
+              },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            editable={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignSelf": "stretch",
+                  "flexGrow": 2,
+                  "fontSize": 14,
+                  "marginHorizontal": 8,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "#292a2b",
+                },
+              ]
+            }
+            testID="text-input"
+            value="21/12/1995"
+          />
+        </View>
+        <HeroIcon
+          name="calendar-dates-outlined"
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "paddingLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <RCTModalHostView
+    animationType="none"
+    hardwareAccelerated={false}
+    identifier={0}
+    onRequestClose={[Function]}
+    onStartShouldSetResponder={[Function]}
+    presentationStyle="overFullScreen"
+    style={
+      Object {
+        "position": "absolute",
+      }
+    }
+    transparent={true}
+  >
+    <View
+      collapsable={false}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "left": 0,
+            "top": 0,
+          },
+          Object {
+            "backgroundColor": "transparent",
+          },
+        ]
+      }
+    >
+      <View
+        pointerEvents="box-none"
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          collapsable={true}
+          pointerEvents="box-none"
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        >
+          <View
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "bottom": 0,
+                  "flexDirection": "column-reverse",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              nativeID="animatedComponent"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "backgroundColor": "#292a2b",
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 0.48,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            />
+            <View
+              collapsable={false}
+              nativeID="animatedComponent"
+              onLayout={[Function]}
+              style={
+                Object {
+                  "backgroundColor": "#ffffff",
+                  "borderTopLeftRadius": 16,
+                  "borderTopRightRadius": 16,
+                  "elevation": 10,
+                  "maxHeight": "94%",
+                  "shadowColor": "#292a2b",
+                  "shadowOffset": Object {
+                    "height": 3,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.27,
+                  "shadowRadius": 4.65,
+                  "transform": Array [
+                    Object {
+                      "scaleY": 0,
+                    },
+                    Object {
+                      "translateY": 0,
+                    },
+                  ],
+                  "width": "100%",
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "flexDirection": "row",
+                      "minHeight": 64,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  adjacentIcon={true}
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "justifyContent": "center",
+                        "paddingLeft": 24,
+                        "paddingRight": 0,
+                        "paddingVertical": 8,
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <Text
+                    style={
+                      Array [
+                        Object {
+                          "color": "#292a2b",
+                          "fontFamily": "BeVietnamPro-SemiBold",
+                          "fontSize": 16,
+                          "letterSpacing": 0.48,
+                          "lineHeight": 24,
+                        },
+                        undefined,
+                      ]
+                    }
+                    themeFontSize="large"
+                    themeFontWeight="semi-bold"
+                    themeIntent="body"
+                  >
+                    Start date
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "justifyContent": "center",
+                        "width": 72,
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <View
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    nativeID="animatedComponent"
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Object {
+                        "opacity": 1,
+                      }
+                    }
+                    testID="bottom-sheet-close-icon"
+                  >
+                    <HeroIcon
+                      name="cancel"
+                      style={
+                        Array [
+                          Object {
+                            "color": "#292a2b",
+                            "fontSize": 24,
+                          },
+                          undefined,
+                        ]
+                      }
+                      themeIntent="text"
+                      themeSize="medium"
+                    />
+                  </View>
+                </View>
+              </View>
+              <View
+                style={
+                  Array [
+                    Object {
+                      "borderBottomColor": "#dadbde",
+                      "borderBottomWidth": 1,
+                      "maxWidth": "100%",
+                    },
+                    undefined,
+                  ]
+                }
+              />
+              <View
+                style={
+                  Array [
+                    Object {
+                      "height": 176,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <Picker
+                  display="spinner"
+                  mode="date"
+                  onChange={[Function]}
+                  style={
+                    Object {
+                      "flex": 1,
+                    }
+                  }
+                  testID="datePickerIOS"
+                  value={1995-12-21T00:00:00.000Z}
+                />
+              </View>
+              <View>
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "borderBottomColor": "#dadbde",
+                        "borderBottomWidth": 1,
+                        "maxWidth": "100%",
+                      },
+                      undefined,
+                    ]
+                  }
+                />
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "flexDirection": "row",
+                        "justifyContent": "flex-end",
+                        "minHeight": 64,
+                        "paddingHorizontal": 24,
+                        "paddingVertical": 8,
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <View
+                    accessible={true}
+                    collapsable={false}
+                    focusable={true}
+                    nativeID="animatedComponent"
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Object {
+                        "opacity": 1,
+                      }
+                    }
+                  >
+                    <Text
+                      style={
+                        Array [
+                          Object {
+                            "color": "#7622d7",
+                            "fontFamily": "BeVietnamPro-SemiBold",
+                            "fontSize": 16,
+                            "letterSpacing": 0.48,
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ]
+                      }
+                      themeFontSize="large"
+                      themeFontWeight="semi-bold"
+                      themeIntent="primary"
+                    >
+                      Confirm
+                    </Text>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RCTModalHostView>
+</View>
+`;

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import DatePickerAndroid from './DatePickerAndroid';
+import DatePickerIOS from './DatePickerIOS';
+import { DatePickerProps } from './types';
+
+const DatePicker = (props: DatePickerProps) => {
+  if (Platform.OS === 'ios') {
+    return <DatePickerIOS {...props} />;
+  }
+
+  return <DatePickerAndroid {...props} />;
+};
+
+export default DatePicker;

package/src/components/DatePicker/types.ts

@@ -0,0 +1,49 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface DatePickerProps {
+  /**
+   * Date picker input label.
+   */
+  label: string;
+  /**
+   * Current date value. Must be in correct default format or format provided via format prop.
+   */
+  value?: Date;
+  /**
+   * Input placeholder. Date format will be used as placeholder if not specified.
+   */
+  placeholder?: string;
+  /**
+   * Callback that is called when new value is selected.
+   */
+  onChange: (value: Date) => void;
+  /**
+   * Confirm label text. iOS only.
+   */
+  confirmLabel: string;
+  /**
+   * Date format. Default format is dd/MM/yyyy.
+   * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format).
+   */
+  displayFormat?: string;
+  /**
+   * Whether the Date picker is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Error message to display.
+   */
+  error?: string;
+  /**
+   *  Whether the value is required, if true, an asterisk will be appended to the label.
+   */
+  required?: boolean;
+  /**
+   * Addtional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component..
+   */
+  testID?: string;
+}

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -22,7 +22,7 @@ const TimePickerIOS = ({
   style,
   testID,
 }: TimePickerProps) => {
-  const [selectingDate, setSelectingDate] = useState<Date | null>(value);
+  const [selectingDate, setSelectingDate] = useState<Date | undefined>(value);
   const [open, setOpen] = useState(false);
 
   const is12Hour = displayFormat.includes('hh');

package/src/components/TimePicker/types.ts

@@ -8,7 +8,7 @@ export interface TimePickerProps {
   /**
    * Current time value. Must be in correct default format or format provided via format prop.
    */
-  value: Date | null;
+  value?: Date;
   /**
    * Input placeholder. Time format will be used as placeholder if not specified.
    */

package/src/index.ts

@@ -11,6 +11,7 @@ import Card from './components/Card';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
+import DatePicker from './components/DatePicker';
 import Divider from './components/Divider';
 import Drawer from './components/Drawer';
 import FAB from './components/FAB';
@@ -47,6 +48,7 @@ export {
   Collapse,
   Checkbox,
   ContentNavigator,
+  DatePicker,
   Divider,
   Drawer,
   FAB,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -145,6 +145,18 @@ Object {
         "pressedSecondary": "#d1d9fe",
         "primary": "#7622d7",
         "secondary": "#4568fb",
+        "underlayColors": Object {
+          "basic-transparent": "#c8a7ef",
+          "filled-danger": "#f2ae9d",
+          "filled-primary": "#c8a7ef",
+          "filled-secondary": "#d1d9fe",
+          "outlined-danger": "#fcebe7",
+          "outlined-primary": "#f1e9fb",
+          "outlined-secondary": "#ecf0ff",
+          "text-danger": "#fcebe7",
+          "text-primary": "#f1e9fb",
+          "text-secondary": "#ecf0ff",
+        },
         "utilityBackground": "#fafbfb",
       },
       "fontSize": Object {
@@ -214,6 +226,11 @@ Object {
         "valueHorizontalPadding": 8,
       },
     },
+    "datePicker": Object {
+      "sizes": Object {
+        "height": 176,
+      },
+    },
     "divider": Object {
       "borderWidths": Object {
         "default": 1,
@@ -742,6 +759,7 @@ Object {
     "primaryDark": "#a26fb0",
     "primaryLight": "#c8a7ef",
     "secondary": "#4568fb",
+    "secondaryBackground": "#ecf0ff",
     "secondaryLight": "#d1d9fe",
     "shadow": "#dadbde",
     "subduedText": "#727478",

package/src/theme/components/button.ts

@@ -48,6 +48,18 @@ const getButtonTheme = (theme: GlobalTheme) => {
     disabledBackground: theme.colors.disabledLightText,
     invertedText: theme.colors.invertedText,
     utilityBackground: theme.colors.backgroundLight,
+    underlayColors: {
+      'filled-primary': theme.colors.primaryLight,
+      'filled-secondary': theme.colors.secondaryLight,
+      'filled-danger': theme.colors.dangerLight,
+      'outlined-primary': theme.colors.primaryBackground,
+      'outlined-secondary': theme.colors.secondaryBackground,
+      'outlined-danger': theme.colors.dangerBackground,
+      'text-primary': theme.colors.primaryBackground,
+      'text-secondary': theme.colors.secondaryBackground,
+      'text-danger': theme.colors.dangerBackground,
+      'basic-transparent': theme.colors.primaryLight,
+    },
   };
 
   return {

package/src/theme/components/datePicker.ts

@@ -0,0 +1,11 @@
+import { scale } from '../../utils/scale';
+
+const getDatePickerTheme = () => {
+  const sizes = {
+    height: scale(176),
+  };
+
+  return { sizes };
+};
+
+export default getDatePickerTheme;

package/src/theme/global/colors.ts

@@ -9,6 +9,7 @@ const systemPalette = {
   primaryBackground: palette.violetLight90,
   secondary: palette.dodgerBlue,
   secondaryLight: palette.dodgerBlueLight75,
+  secondaryBackground: palette.dodgerBlueLight90,
   info: palette.dodgerBlue,
   infoMediumLight: mobilePalette.vodka,
   infoLight: palette.dodgerBlueLight75,