@hero-design/rn 8.55.1-rc2.3 → 8.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.55.1-rc2.3",
+  "version": "8.56.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
-    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage",
+    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage && cat ./coverage/lcov.info",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json",
     "build": "yarn build:js && yarn build:types",
@@ -22,14 +22,14 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.42.6-rc2.3",
+    "@hero-design/colors": "8.42.5",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.7-rc2.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "9.0.1-rc2.2",
-    "@hero-design/react-native-month-year-picker": "^8.42.7-rc2.2",
+    "@hero-design/eslint-plugin": "9.0.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.6",
     "@react-native-community/datetimepicker": "3.5.2",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
@@ -66,12 +66,12 @@
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.5-rc2.2",
+    "eslint-config-hd": "8.42.4",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.5-rc2.2",
+    "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-native": "0.71.14",
     "react-native-gesture-handler": "~2.5.0",

package/sonar-project.properties

@@ -7,3 +7,4 @@ sonar.sources=.
 sonar.inclusions=**/*
 sonar.exclusions=**/__tests__/**,**/public/**
 sonar.java.binaries=**/src/main/java
+sonar.javascript.lcov.reportPaths=./coverage/lcov.info

package/src/components/AnimatedScroller/AnimatedFAB.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import FAB from '../FAB';
+import ActionGroup, {
+  ActionGroupHandles,
+  ActionGroupProps,
+} from '../FAB/ActionGroup';
+import { FABHandles, FABProps } from '../FAB/FAB';
+
+const COLLAPSE_BREAKPOINT = 10;
+const SHOW_AND_HIDE_BREAKPOINT = 200;
+const REF_ACTIONS_BY_COMPONENT = {
+  FAB: {
+    show: 'show',
+    hide: 'hide',
+    collapse: 'collapse',
+  },
+  ActionGroup: {
+    show: 'showFAB',
+    hide: 'hideFAB',
+    collapse: 'collapseFAB',
+  },
+} as const;
+
+interface AnimatedFABProps {
+  fabProps: FABProps | ActionGroupProps;
+  contentOffsetY: Animated.Value;
+}
+
+const AnimatedFAB = ({ fabProps, contentOffsetY }: AnimatedFABProps) => {
+  const component = 'items' in fabProps ? 'ActionGroup' : 'FAB';
+  const [currentScrollDirection, setCurrentScrollDirection] = React.useState<
+    'up' | 'down'
+  >('down');
+  const [lastScrollY, setLastScrollY] = React.useState(0);
+  const [fabState, setFabState] = React.useState<'show' | 'hide' | 'collapse'>(
+    'show'
+  );
+  const [remainingScrollOffset, setRemainingScrollOffset] = React.useState(
+    SHOW_AND_HIDE_BREAKPOINT
+  );
+  const ref = React.useRef<FABHandles & ActionGroupHandles>(null);
+
+  const animateFab = React.useCallback(
+    (newState: 'show' | 'hide' | 'collapse') => {
+      if (fabState !== newState) {
+        if (newState === 'show') {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].show]();
+        } else if (newState === 'hide') {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].hide]();
+        } else {
+          ref.current?.[REF_ACTIONS_BY_COMPONENT[component].collapse]();
+        }
+        setFabState(newState);
+      }
+    },
+    [fabState, component]
+  );
+
+  // Listen to ScrollView's contentOffsetY value
+  contentOffsetY.addListener(({ value }) => {
+    if (value < 0) {
+      return;
+    }
+
+    const newScrollDirection = value > lastScrollY ? 'down' : 'up';
+    const isScrollingDown = newScrollDirection === 'down';
+
+    if (newScrollDirection !== currentScrollDirection || lastScrollY === 0) {
+      setLastScrollY(value);
+      setCurrentScrollDirection(newScrollDirection);
+    }
+    const offsetFromLastDirection = Math.abs(value - lastScrollY);
+    const offsetDiff = Math.round(
+      Math.max(remainingScrollOffset - offsetFromLastDirection, 0)
+    );
+
+    if (remainingScrollOffset > 0) {
+      if (offsetDiff === SHOW_AND_HIDE_BREAKPOINT) {
+        animateFab(isScrollingDown ? 'show' : 'hide');
+      } else if (
+        offsetDiff <= SHOW_AND_HIDE_BREAKPOINT &&
+        offsetDiff > COLLAPSE_BREAKPOINT
+      ) {
+        animateFab('collapse');
+      } else if (offsetDiff <= COLLAPSE_BREAKPOINT) {
+        animateFab(isScrollingDown ? 'hide' : 'show');
+      }
+
+      setRemainingScrollOffset(offsetDiff);
+    }
+  });
+
+  React.useEffect(() => {
+    setRemainingScrollOffset(SHOW_AND_HIDE_BREAKPOINT);
+  }, [currentScrollDirection]);
+
+  return component === 'FAB' ? (
+    <FAB ref={ref} {...(fabProps as FABProps)} />
+  ) : (
+    <ActionGroup ref={ref} {...(fabProps as ActionGroupHandles)} />
+  );
+};
+
+export default AnimatedFAB;

package/src/components/AnimatedScroller/AnimatedScrollable.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  Animated,
+  FlatListProps,
+  ScrollViewProps as RnScrollViewProps,
+  SectionListProps,
+} from 'react-native';
+import { FABProps } from '../FAB/FAB';
+import AnimatedFAB from './AnimatedFAB';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+
+export interface AnimatedScrollerProps<T> {
+  /**
+   * Scroll component, it can be ScrollView, FlatList or SectionList.
+   */
+  ScrollComponent: React.ReactElement<
+    RnScrollViewProps | FlatListProps<T> | SectionListProps<T>
+  >;
+  /**
+   * FAB or FAB.ActionGroup props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function AnimatedScroller<T>({
+  ScrollComponent,
+  fabProps,
+}: AnimatedScrollerProps<T>) {
+  const contentOffsetY = React.useRef(new Animated.Value(0)).current;
+
+  // Common props for all ScrollView, FlatList and SectionList.
+  const { onScroll, scrollEventThrottle } = ScrollComponent.props;
+
+  return (
+    <>
+      {React.cloneElement(ScrollComponent, {
+        ...ScrollComponent.props,
+        scrollEventThrottle: scrollEventThrottle || 100,
+        onScroll: Animated.event(
+          [{ nativeEvent: { contentOffset: { y: contentOffsetY } } }],
+          {
+            useNativeDriver: false,
+            listener: onScroll,
+          }
+        ),
+      })}
+
+      {!!fabProps && (
+        <AnimatedFAB fabProps={fabProps} contentOffsetY={contentOffsetY} />
+      )}
+    </>
+  );
+}
+
+export default AnimatedScroller;

package/src/components/AnimatedScroller/FlatListWithFAB.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+import { FABProps } from '../FAB/FAB';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+
+export interface FlatListWithFABProps<T> extends FlatListProps<T> {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function FlatListWithFAB<T>({ fabProps, ...props }: FlatListWithFABProps<T>) {
+  return (
+    <AnimatedScroller
+      ScrollComponent={<FlatList {...props} />}
+      fabProps={fabProps}
+    />
+  );
+}
+
+export default FlatListWithFAB;

package/src/components/AnimatedScroller/ScrollViewWithFAB.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ScrollView, ScrollViewProps } from 'react-native';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+
+export interface ScrollViewWithFABProps extends ScrollViewProps {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+const ScrollViewWithFAB = ({ fabProps, ...props }: ScrollViewWithFABProps) => (
+  <AnimatedScroller
+    ScrollComponent={<ScrollView {...props} />}
+    fabProps={fabProps}
+  />
+);
+
+export default ScrollViewWithFAB;

package/src/components/AnimatedScroller/SectionListWithFAB.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SectionList, SectionListProps } from 'react-native';
+import AnimatedScroller from './AnimatedScrollable';
+import { ActionGroupProps } from '../FAB/ActionGroup';
+import { FABProps } from '../FAB/FAB';
+
+export interface SectionListWithFABProps<T> extends SectionListProps<T> {
+  /**
+   * FAB or FAB.ActionGroup props props.
+   */
+  fabProps: FABProps | ActionGroupProps;
+}
+
+function SectionListWithFAB<T>({
+  fabProps,
+  ...props
+}: SectionListWithFABProps<T>) {
+  return (
+    <AnimatedScroller
+      ScrollComponent={<SectionList {...props} />}
+      fabProps={fabProps}
+    />
+  );
+}
+
+export default SectionListWithFAB;

package/src/components/AnimatedScroller/index.tsx

@@ -0,0 +1,5 @@
+import ScrollViewWithFAB from './ScrollViewWithFAB';
+import FlatListWithFAB from './FlatListWithFAB';
+import SectionListWithFAB from './SectionListWithFAB';
+
+export { ScrollViewWithFAB, FlatListWithFAB, SectionListWithFAB };