@hero-design/rn 7.10.2 → 7.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.10.2",
+  "version": "7.12.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,16 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.10.2"
+    "@hero-design/colors": "7.12.0",
+    "date-fns": "^2.16.1"
   },
   "peerDependencies": {
     "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-vector-icons": "^9.1.0",
+    "@react-native-community/datetimepicker": "^3.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -37,6 +39,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
+    "@react-native-community/datetimepicker": "^3.5.2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -68,6 +71,7 @@
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.5"
   }

package/rollup.config.js

@@ -5,6 +5,7 @@ import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
 import copy from 'rollup-plugin-copy';
+import flow from 'rollup-plugin-flow';
 
 import pkg from './package.json';
 
@@ -22,12 +23,18 @@ export default {
       format: 'esm',
     },
   ],
-  external: ['react', 'react-native', 'react-native-safe-area-context'],
+  external: [
+    'react',
+    'react-native',
+    'react-native-safe-area-context',
+    '@react-native-community/datetimepicker',
+  ],
   plugins: [
     replace({
       'process.env.NODE_ENV': JSON.stringify('production'),
     }),
     nodeResolve({ extensions, browser: true }),
+    flow(),
     commonjs(),
     json(),
     typescript(),

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

@@ -65,6 +65,7 @@ exports[`rendering renders correctly 1`] = `
         ],
       ]
     }
+    testID="content-navigator-value"
     themeFontSize="medium"
     themeFontWeight="semi-bold"
     themeIntent="body"
@@ -173,6 +174,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
         ],
       ]
     }
+    testID="content-navigator-value"
     themeFontSize="medium"
     themeFontWeight="semi-bold"
     themeIntent="body"

package/src/components/ContentNavigator/__tests__/index.spec.tsx

@@ -36,7 +36,7 @@ describe('rendering', () => {
 });
 
 describe('behavior', () => {
-  it('calls press handlers', () => {
+  it('calls press handlers of prev and next buttons', () => {
     const prevHandler = jest.fn();
     const nextHandler = jest.fn();
     const { getByTestId } = renderWithTheme(
@@ -53,7 +53,7 @@ describe('behavior', () => {
     expect(prevHandler).toBeCalledTimes(1);
   });
 
-  it('does NOT call press handlers when icon buttons are disabled', () => {
+  it('does NOT call press handlers of prev and next buttons when icon buttons are disabled', () => {
     const prevHandler = jest.fn();
     const nextHandler = jest.fn();
     const { getByTestId } = renderWithTheme(
@@ -71,4 +71,21 @@ describe('behavior', () => {
     fireEvent.press(getByTestId('next-icon-button'));
     expect(prevHandler).toBeCalledTimes(0);
   });
+
+  it('calls press handler of content navigator value', () => {
+    const prevHandler = jest.fn();
+    const nextHandler = jest.fn();
+    const pressHandler = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <ContentNavigator
+        value={20}
+        onPreviousPress={prevHandler}
+        onNextPress={nextHandler}
+        onPress={pressHandler}
+      />
+    );
+
+    fireEvent.press(getByTestId('content-navigator-value'));
+    expect(pressHandler).toBeCalledTimes(1);
+  });
 });

package/src/components/ContentNavigator/index.tsx

@@ -16,6 +16,10 @@ interface ContentNavigatorProps {
    * Handler to handle press event of next icon.
    */
   onNextPress: () => void;
+  /**
+   * Handler to handle press event of content navigator value.
+   */
+  onPress?: () => void;
   /**
    * Whether the previous icon is disabled.
    */
@@ -37,6 +41,7 @@ interface ContentNavigatorProps {
 function ContentNavigator({
   onPreviousPress,
   onNextPress,
+  onPress,
   value,
   previousDisabled = false,
   nextDisabled = false,
@@ -51,7 +56,13 @@ function ContentNavigator({
         disabled={previousDisabled}
         testID="previous-icon-button"
       />
-      <Value fontWeight="semi-bold">{value}</Value>
+      <Value
+        fontWeight="semi-bold"
+        onPress={onPress}
+        testID="content-navigator-value"
+      >
+        {value}
+      </Value>
       <Button.Icon
         icon="arrow-right"
         onPress={onNextPress}

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -38,10 +38,12 @@ exports[`ActionGroup has active false 1`] = `
   <View
     collapsable={false}
     nativeID="animatedComponent"
+    pointerEvents="none"
     style={
       Object {
         "alignItems": "flex-end",
         "justifyContent": "flex-end",
+        "opacity": 0,
         "transform": Array [
           Object {
             "translateX": 400,
@@ -568,10 +570,12 @@ exports[`ActionGroup has active true 1`] = `
   <View
     collapsable={false}
     nativeID="animatedComponent"
+    pointerEvents="auto"
     style={
       Object {
         "alignItems": "flex-end",
         "justifyContent": "flex-end",
+        "opacity": 1,
         "transform": Array [
           Object {
             "translateX": 0,

package/src/components/FAB/ActionGroup/index.tsx

@@ -88,21 +88,32 @@ const ActionGroup = ({
       outputRange: [400, 0],
     }
   );
-  const interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.9],
-  });
+  const interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate(
+    {
+      inputRange: [0, 1],
+      outputRange: [0, 0.9],
+    }
+  );
+
+  const interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate(
+    {
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+    }
+  );
 
   return (
     <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
       <StyledBackdrop
         pointerEvents={active ? 'auto' : 'box-none'}
         testID="back-drop"
-        style={{ opacity: interpolatedOpacityAnimation }}
+        style={{ opacity: interpolatedBackdropOpacityAnimation }}
       />
       <StyledActionGroupContainer
+        pointerEvents={active ? 'auto' : 'none'}
         testID="action-group"
         style={{
+          opacity: interpolatedActionGroupOpacityAnimation,
           transform: [{ translateX: interpolatedTranlateXAnimation }],
         }}
       >