@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/DatePicker/types.ts

@@ -64,4 +64,12 @@ export interface DatePickerProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Calendar variant prop. Label for the confirm button of the month picker, Android only.
+   */
+  monthPickerConfirmLabel?: string;
+  /**
+   * Calendar variant prop. Label for the cancel button of the month picker, Android only.
+   */
+  monthPickerCancelLabel?: string;
 }

package/src/components/DatePicker/useCalculateDate.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { DatePickerProps } from './types';
+
+export const getDateValue = (
+  value: Date,
+  minDate?: Date | undefined,
+  maxDate?: Date | undefined
+) => {
+  if (minDate && value < minDate) {
+    return minDate;
+  }
+
+  if (maxDate && value > maxDate) {
+    return maxDate;
+  }
+
+  return value;
+};
+
+const useCalculateDate = ({
+  maxDate,
+  minDate,
+  onChange,
+  value,
+}: Pick<DatePickerProps, 'maxDate' | 'minDate' | 'onChange' | 'value'>) => {
+  useEffect(() => {
+    const newDate = getDateValue(value || new Date(), minDate, maxDate);
+    if (value && newDate.toDateString() !== value.toDateString()) {
+      onChange(newDate);
+    }
+  }, [maxDate, minDate, value]);
+};
+
+export default useCalculateDate;

package/src/components/Divider/__tests__/__snapshots__/StyledDivider.spec.tsx.snap

@@ -3,199 +3,535 @@
 exports[`Divider has large marginHorizontal style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginHorizontal": 24,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginHorizontal="large"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginHorizontal": 24,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginHorizontal="large"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has large marginVertical style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginVertical": 24,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginVertical="large"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginVertical": 24,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginVertical="large"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has medium marginHorizontal style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginHorizontal": 16,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginHorizontal="medium"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginHorizontal": 16,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginHorizontal="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has medium marginVertical style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginVertical": 16,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginVertical="medium"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginVertical": 16,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginVertical="medium"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has small marginHorizontal style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginHorizontal": 8,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginHorizontal="small"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginHorizontal": 8,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginHorizontal="small"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has small marginVertical style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginVertical": 8,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginVertical="small"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginVertical": 8,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginVertical="small"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has undefined marginHorizontal style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has undefined marginVertical style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has xlarge marginHorizontal style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginHorizontal": 32,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginHorizontal="xlarge"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginHorizontal": 32,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginHorizontal="xlarge"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has xlarge marginVertical style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginVertical": 32,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginVertical="xlarge"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginVertical": 32,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginVertical="xlarge"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has xsmall marginHorizontal style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginHorizontal": 4,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginHorizontal="xsmall"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginHorizontal": 4,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginHorizontal="xsmall"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Divider has xsmall marginVertical style 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderBottomColor": "#e8e9ea",
-        "borderBottomWidth": 1,
-        "marginVertical": 4,
-        "maxWidth": "100%",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeMarginVertical="xsmall"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderBottomColor": "#e8e9ea",
+          "borderBottomWidth": 1,
+          "marginVertical": 4,
+          "maxWidth": "100%",
+        },
+        undefined,
+      ]
+    }
+    themeMarginVertical="xsmall"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;