@hero-design/rn 7.16.2 → 7.17.1

package/src/components/Select/types.ts

@@ -0,0 +1,99 @@
+import { ReactElement } from 'react';
+import {
+  ListRenderItemInfo,
+  SectionListData,
+  SectionListRenderItemInfo,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { TextInputProps } from '../TextInput';
+
+export type OptionType<V> = {
+  value: V;
+  text: string;
+  key?: string;
+  disabled?: boolean;
+};
+
+export type SectionType = { category: string };
+export type SectionData<V, T extends OptionType<V>> = SectionListData<
+  T,
+  SectionType
+>;
+
+export type CombinedOptionsType<V, T extends OptionType<V>> =
+  | T[]
+  | SectionData<V, T>[];
+
+export type ListRenderOptionInfo<
+  V,
+  T extends OptionType<V>
+> = ListRenderItemInfo<T> & { selected: boolean; onPress: () => void };
+
+export type SectionListRenderOptionInfo<
+  V,
+  T extends OptionType<V>
+> = SectionListRenderItemInfo<T, SectionType> & {
+  selected: boolean;
+  onPress: () => void;
+};
+
+export interface SelectProps<V, T extends OptionType<V>>
+  extends Pick<
+    TextInputProps,
+    'editable' | 'disabled' | 'numberOfLines' | 'error'
+  > {
+  /**
+   * An array of options to be selected.
+   */
+  options: CombinedOptionsType<V, T>;
+  /**
+   * Customize option renderer.
+   */
+  renderOption?:
+    | ((info: ListRenderOptionInfo<V, T>) => ReactElement)
+    | ((info: SectionListRenderOptionInfo<V, T>) => ReactElement);
+  /**
+   * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+   * The default extractor checks option.key, and then falls back to using the index, like React does.
+   */
+  keyExtractor?: (option: T, index?: number) => string;
+  /**
+   * Current search value.
+   */
+  query?: string;
+  /**
+   * Search bar onChangeText event handler
+   */
+  onQueryChange?: (value: string) => void;
+  /**
+   * Event handler when selection dismiss
+   */
+  onDimiss?: () => void;
+  /**
+   * Event handler when end of the list reached
+   */
+  onEndReached?: () => void;
+  /**
+   * Show loading indicator at bottom of option list
+   */
+  loading?: boolean;
+  /**
+   * Props that are passed to TextInput.
+   */
+  inputProps?: {
+    loading?: boolean;
+  };
+  /**
+   * Field label.
+   */
+  label: string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}

package/src/components/Spinner/__tests__/__snapshots__/AnimatedSpinner.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#8505a2",
             "borderRadius": 8,
             "height": 16,
             "opacity": 1,
@@ -51,7 +51,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#8505a2",
             "borderRadius": 8,
             "height": 16,
             "marginLeft": 8,
@@ -84,7 +84,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#8505a2",
             "borderRadius": 8,
             "height": 16,
             "opacity": 0.5,
@@ -101,7 +101,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#8505a2",
             "borderRadius": 8,
             "height": 16,
             "marginLeft": 8,

package/src/components/Spinner/__tests__/__snapshots__/StyledSpinner.spec.tsx.snap

@@ -46,7 +46,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#8505a2",
               "borderRadius": 8,
               "height": 16,
               "opacity": 1,
@@ -63,7 +63,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#8505a2",
               "borderRadius": 8,
               "height": 16,
               "marginLeft": 8,
@@ -96,7 +96,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#8505a2",
               "borderRadius": 8,
               "height": 16,
               "opacity": 0.5,
@@ -113,7 +113,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#8505a2",
               "borderRadius": 8,
               "height": 16,
               "marginLeft": 8,
@@ -165,7 +165,7 @@ exports[`StyledSpinnerText renders correctly when position is bottomLeft 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 8,
         "height": 16,
         "opacity": 0.5,
@@ -183,7 +183,7 @@ exports[`StyledSpinnerText renders correctly when position is bottomRight 1`] =
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 8,
         "height": 16,
         "marginLeft": 8,
@@ -202,7 +202,7 @@ exports[`StyledSpinnerText renders correctly when position is topLeft 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 8,
         "height": 16,
         "opacity": 1,
@@ -220,7 +220,7 @@ exports[`StyledSpinnerText renders correctly when position is topRight 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 8,
         "height": 16,
         "marginLeft": 8,

package/src/components/Spinner/__tests__/__snapshots__/index.spec.tsx.snap

@@ -55,7 +55,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#8505a2",
                 "borderRadius": 8,
                 "height": 16,
                 "opacity": 1,
@@ -72,7 +72,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#8505a2",
                 "borderRadius": 8,
                 "height": 16,
                 "marginLeft": 8,
@@ -105,7 +105,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#8505a2",
                 "borderRadius": 8,
                 "height": 16,
                 "opacity": 0.5,
@@ -122,7 +122,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#8505a2",
                 "borderRadius": 8,
                 "height": 16,
                 "marginLeft": 8,

package/src/components/Switch/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -59,7 +59,7 @@ exports[`StyledWrapper renders correct style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 999,
         "height": 28.799999999999997,
         "paddingHorizontal": 4,

package/src/components/Switch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`Switch renders correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#727478",
+        "backgroundColor": "#808f91",
         "borderRadius": 999,
         "height": 28.799999999999997,
         "paddingHorizontal": 4,
@@ -83,7 +83,7 @@ exports[`Switch trigger press function correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#727478",
+        "backgroundColor": "#808f91",
         "borderRadius": 999,
         "height": 28.799999999999997,
         "paddingHorizontal": 4,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderBottomColor": "#dadbde",
+            "borderBottomColor": "#e8e9ea",
             "borderBottomWidth": 1,
             "paddingHorizontal": 0,
           },
@@ -148,7 +148,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   nativeID="animatedComponent"
                   style={
                     Object {
-                      "backgroundColor": "#f1e9fb",
+                      "backgroundColor": "#f3e6f6",
                       "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
@@ -178,14 +178,14 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 14,
                           "letterSpacing": 0.42,
                           "lineHeight": 22,
                         },
                         Object {
-                          "color": "#7622d7",
+                          "color": "#8505a2",
                         },
                       ]
                     }
@@ -302,7 +302,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontSize": 20,
                         },
                         undefined,
@@ -419,7 +419,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontSize": 20,
                         },
                         undefined,

package/src/components/Tabs/__tests__/__snapshots__/index.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`Tabs renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderBottomColor": "#dadbde",
+            "borderBottomColor": "#e8e9ea",
             "borderBottomWidth": 1,
             "paddingHorizontal": 0,
           },
@@ -82,14 +82,14 @@ exports[`Tabs renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                       "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 14,
                       "letterSpacing": 0.42,
                       "lineHeight": 22,
                     },
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                     },
                   ]
                 }
@@ -150,14 +150,14 @@ exports[`Tabs renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
                       "letterSpacing": 0.42,
                       "lineHeight": 22,
                     },
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                     },
                   ]
                 }
@@ -218,14 +218,14 @@ exports[`Tabs renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
                       "letterSpacing": 0.42,
                       "lineHeight": 22,
                     },
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                     },
                   ]
                 }
@@ -265,7 +265,7 @@ exports[`Tabs renders correctly 1`] = `
           nativeID="animatedComponent"
           style={
             Object {
-              "backgroundColor": "#292a2b",
+              "backgroundColor": "#001f23",
               "bottom": 0,
               "height": 2,
               "position": "absolute",

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -43,8 +43,8 @@ exports[`Tag has archived style when intent is primary 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#f1e9fb",
-        "borderColor": "#7622d7",
+        "backgroundColor": "#f3e6f6",
+        "borderColor": "#8505a2",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -59,7 +59,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#7622d7",
+          "color": "#8505a2",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,
@@ -120,7 +120,7 @@ exports[`Tag has default style when intent is default 1`] = `
     Array [
       Object {
         "backgroundColor": undefined,
-        "borderColor": "#292a2b",
+        "borderColor": "#001f23",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -135,7 +135,7 @@ exports[`Tag has default style when intent is default 1`] = `
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,
@@ -233,8 +233,8 @@ exports[`Tag has warning style when intent is warning 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#fff6eb",
-        "borderColor": "#d98a2c",
+        "backgroundColor": "#ebf4ff",
+        "borderColor": "#ffa234",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -249,7 +249,7 @@ exports[`Tag has warning style when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#d98a2c",
+          "color": "#ffa234",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,