@hero-design/rn 8.4.0 → 8.5.0-alpha.0

package/src/components/Swipeable/index.tsx

@@ -1,160 +1,555 @@
-import React, {
-  ComponentProps,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
-import { Animated, useWindowDimensions } from 'react-native';
+import React, { useEffect } from 'react';
 import {
-  Swipeable as RnghSwipeable,
-  GestureHandlerRootView,
-  RectButton,
-} from 'react-native-gesture-handler';
+  Animated,
+  Easing,
+  GestureResponderEvent,
+  PanResponder,
+  PanResponderGestureState,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import { noop } from '../../utils/functions';
+import { scale } from '../../utils/scale';
+import Buttons from './Buttons';
+import { StyledContent, StyledWrapper } from './StyledSwipeable';
 import SwipeableAction from './SwipeableAction';
 
-type State = 'closed' | 'leftOpen' | 'rightOpen';
-// We are supporting both v1 and v2 of RNGH at the same time.
-// SwipeableProps is only exported in v2, so we have to use ComponentProps.
-type RnghSwipeableProps = ComponentProps<typeof RnghSwipeable>;
-export interface SwipeableProps
-  extends Pick<
-    RnghSwipeableProps,
-    | 'enableTrackpadTwoFingerGesture'
-    | 'friction'
-    | 'leftThreshold'
-    | 'rightThreshold'
-    | 'overshootLeft'
-    | 'overshootRight'
-    | 'overshootFriction'
-    | 'useNativeAnimations'
-    | 'containerStyle'
-    | 'childrenContainerStyle'
-  > {
-  /**
-   * React node that is swipeable.
-   */
-  children: ReactNode;
-  /**
-   * State of the component.
-   */
-  state?: 'closed' | 'leftOpen' | 'rightOpen';
-  /**
-   * Callback when the state of the component changes.
-   */
-  onStateChange?: (state: State) => void;
-  /**
-   * Action panel that is going to be revealed from the left side when user swipes right.
-   */
-  leftActions?: ReactNode;
-  /**
-   * Width of the left action panel.
-   * By default, it will take up the whole width of the device.
-   */
+export type SwipeState = 'closed' | 'leftOpen' | 'rightOpen';
+
+const swipeStartMinDistance = 15;
+
+export type SwipeableProps = {
+  leftContent?: React.ReactNode;
+  rightContent?: React.ReactNode;
+
+  leftActions?: [typeof SwipeableAction][];
+  rightActions?: [typeof SwipeableAction][];
+
+  onSwipeLeftStart?: (
+    event: GestureResponderEvent,
+    gestureState: PanResponderGestureState
+  ) => void;
+  onSwipeLeftEnd?: (
+    event: GestureResponderEvent,
+    gestureState: PanResponderGestureState
+  ) => void;
+
   leftActionsWidth?: number;
-  /**
-   * Action panel that is going to be revealed from the right side when user swipes left.
-   */
-  rightActions?: ReactNode;
-  /**
-   * Width of the right action panel.
-   * By default, it will take up the whole width of the device.
-   */
   rightActionsWidth?: number;
-  /**
-   * Testing ID of the component
-   */
-  testID?: string;
-}
-
-const renderActions = (
-  actions: ReactNode,
-  width: number,
-  progress: Animated.AnimatedInterpolation,
-  direction: 'left' | 'right'
+
+  onStateChange?: (state: SwipeState) => void;
+
+  onSwipeRightStart?: (
+    event: GestureResponderEvent,
+    gestureState: PanResponderGestureState
+  ) => void;
+  onSwipeRightEnd?: (
+    event: GestureResponderEvent,
+    gestureState: PanResponderGestureState
+  ) => void;
+
+  leftButtonWidth?: number;
+  rightButtonWidth?: number;
+
+  swipeState?: SwipeState;
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+};
+
+type State = {
+  pan: Animated.ValueXY;
+  lastOffset: { x: number; y: number };
+  leftActionActivated: boolean;
+  rightActionActivated: boolean;
+  swipeState: SwipeState;
+};
+
+const getReleaseAnimationConfig = (
+  swipeState: SwipeState,
+  props: {
+    totalLeftButtonsWidth: number;
+    totalRightButtonsWidth: number;
+  }
 ) => {
-  const trans = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: direction === 'left' ? [-width, 0] : [width, 0],
-    extrapolate: 'clamp',
-  });
+  const { totalLeftButtonsWidth, totalRightButtonsWidth } = props;
 
-  return (
-    <Animated.View
-      style={{
-        width,
-        flexDirection: 'row',
-        transform: [{ translateX: trans }],
-      }}
-    >
-      {actions}
-    </Animated.View>
-  );
+  const swipeReleaseAnimationConfig = {
+    toValue: { x: 0, y: 0 },
+    duration: 100,
+    easing: Easing.elastic(0.5),
+    useNativeDriver: true,
+  };
+
+  if (swipeState === 'leftOpen') {
+    return {
+      ...swipeReleaseAnimationConfig,
+      toValue: {
+        x: totalLeftButtonsWidth,
+        y: 0,
+      },
+    };
+  }
+
+  if (swipeState === 'rightOpen') {
+    return {
+      ...swipeReleaseAnimationConfig,
+      toValue: {
+        x: totalRightButtonsWidth * -1,
+        y: 0,
+      },
+    };
+  }
+
+  return swipeReleaseAnimationConfig;
+};
+
+const getPos = ({
+  swipeState,
+  totalLeftButtonsWidth,
+  totalRightButtonsWidth,
+}: {
+  swipeState: SwipeState;
+  totalLeftButtonsWidth: number;
+  totalRightButtonsWidth: number;
+}) => {
+  if (swipeState === 'leftOpen') {
+    return {
+      x: totalLeftButtonsWidth,
+      y: 0,
+    };
+  }
+
+  if (swipeState === 'rightOpen') {
+    return {
+      x: totalRightButtonsWidth * -1,
+      y: 0,
+    };
+  }
+
+  return { x: 0, y: 0 };
+};
+
+type PropsWithDefaultValue = Required<
+  Omit<SwipeableProps, 'leftContent' | 'rightContent' | 'style'>
+> &
+  Pick<SwipeableProps, 'leftContent' | 'rightContent' | 'style'>;
+type ContextValues = PropsWithDefaultValue & {
+  canSwipeLeft: boolean;
+  canSwipeRight: boolean;
+  totalLeftButtonsWidth: number;
+  totalRightButtonsWidth: number;
+  hasLeftButtons: boolean;
+  hasRightButtons: boolean;
+  unmountedRef: React.MutableRefObject<boolean>;
 };
 
 const Swipeable = ({
   children,
-  state,
-  onStateChange,
-  leftActions,
-  leftActionsWidth,
-  rightActions,
-  rightActionsWidth,
-  ...swipeableProps
+  leftActions = [],
+  leftContent,
+  rightActions = [],
+  rightContent,
+  style,
+  leftActionsWidth = scale(85),
+  leftButtonWidth = scale(85),
+  onSwipeLeftStart = noop,
+  onSwipeLeftEnd = noop,
+  rightActionsWidth = scale(85),
+  rightButtonWidth = scale(85),
+  onSwipeRightStart = noop,
+  onSwipeRightEnd = noop,
+  swipeState = 'closed',
+  onStateChange = noop,
+  ...rest
 }: SwipeableProps) => {
-  const { width } = useWindowDimensions();
-  const swipeableRef = useRef<RnghSwipeable>(null);
+  const propsWithDefaultValue: PropsWithDefaultValue = {
+    children,
+    leftActions,
+    leftContent,
+    rightActions,
+    rightContent,
+    style,
+    leftActionsWidth,
+    leftButtonWidth,
+    onSwipeLeftStart,
+    onSwipeLeftEnd,
+    rightActionsWidth,
+    rightButtonWidth,
+    onSwipeRightStart,
+    onSwipeRightEnd,
+    swipeState,
+    onStateChange,
+    ...rest,
+  };
 
-  const renderLeftActions = useCallback(
-    (progress: Animated.AnimatedInterpolation) =>
-      renderActions(leftActions, leftActionsWidth || width, progress, 'left'),
-    [leftActions, leftActionsWidth, width]
-  );
-  const renderRightActions = useCallback(
-    (progress: Animated.AnimatedInterpolation) =>
-      renderActions(
-        rightActions,
-        rightActionsWidth || width,
-        progress,
-        'right'
-      ),
-    [rightActions, rightActionsWidth, width]
+  const unmountedRef = React.useRef(false);
+  useEffect(() => {
+    return () => {
+      unmountedRef.current = true;
+    };
+  }, []);
+
+  const totalLeftButtonsWidth = leftActions.length * leftButtonWidth;
+  const totalRightButtonsWidth = rightActions.length * rightButtonWidth;
+
+  const [width, setWidth] = React.useState(0);
+  const hasLeftButtons = !leftContent && leftActions && leftActions.length > 0;
+
+  const hasRightButtons =
+    !rightContent && rightActions && rightActions.length > 0;
+  const canSwipeRight = !!leftContent || !!hasLeftButtons;
+
+  const canSwipeLeft = !!rightContent || !!hasRightButtons;
+
+  const propsRef = React.useRef<ContextValues>(
+    undefined as unknown as ContextValues
   );
 
+  const [state, setState] = React.useState<State>({
+    pan: new Animated.ValueXY(
+      getPos({
+        swipeState,
+        totalLeftButtonsWidth,
+        totalRightButtonsWidth,
+      })
+    ),
+    lastOffset: { x: 0, y: 0 },
+    leftActionActivated: false,
+    rightActionActivated: true,
+    swipeState: 'closed',
+  });
+
+  propsRef.current = {
+    ...propsWithDefaultValue,
+    canSwipeLeft,
+    canSwipeRight,
+    totalLeftButtonsWidth,
+    totalRightButtonsWidth,
+    hasLeftButtons,
+    hasRightButtons,
+    unmountedRef,
+  };
+
   useEffect(() => {
-    if (swipeableRef.current === null) return;
-
-    switch (state) {
-      case 'leftOpen':
-        swipeableRef.current.openLeft();
-        break;
-      case 'rightOpen':
-        swipeableRef.current.openRight();
-        break;
-      case 'closed':
-        swipeableRef.current.close();
-        break;
+    let animation: Animated.CompositeAnimation | null = null;
+    if (state.swipeState !== swipeState) {
+      animation = animationToNewState(
+        swipeState,
+        state.pan,
+        totalLeftButtonsWidth,
+        totalRightButtonsWidth
+      );
+      animation.start();
     }
-  }, [state]);
+    return () => {
+      if (animation) {
+        animation.stop();
+      }
+    };
+  }, [swipeState]);
+
+  const transform = [
+    {
+      translateX: state.pan.x.interpolate({
+        inputRange: [canSwipeLeft ? -width : 0, canSwipeRight ? width : 0],
+        outputRange: [
+          canSwipeLeft ? -width + StyleSheet.hairlineWidth : 0,
+          canSwipeRight ? width - StyleSheet.hairlineWidth : 0,
+        ],
+        extrapolate: 'clamp',
+      }),
+    },
+  ];
+
+  const panResponder = React.useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (
+        _: GestureResponderEvent,
+        gestureState: PanResponderGestureState
+      ) => {
+        return Math.abs(gestureState.dx) > swipeStartMinDistance;
+      },
+      onMoveShouldSetPanResponderCapture: (
+        _: GestureResponderEvent,
+        gestureState: PanResponderGestureState
+      ) => {
+        return Math.abs(gestureState.dx) > swipeStartMinDistance;
+      },
+      onPanResponderGrant: () => {
+        setState((prevState) => {
+          prevState.pan.setOffset(prevState.lastOffset);
+          return prevState;
+        });
+      },
+      onPanResponderMove: (event, gestureState) => {
+        setState((prevState) => {
+          return hanleOnPanResponderMove(
+            prevState,
+            propsRef.current,
+            event,
+            gestureState
+          );
+        });
+      },
+
+      onPanResponderRelease: (event, gestureState) => {
+        setState((prevState) => {
+          return hanleOnPanResponderEnd(
+            prevState,
+            propsRef.current,
+            event,
+            gestureState
+          );
+        });
+      },
+      onPanResponderTerminationRequest: () => {
+        return false;
+      },
+      onPanResponderTerminate: (event, gestureState) => {
+        setState((prevState) => {
+          return hanleOnPanResponderEnd(
+            prevState,
+            propsRef.current,
+            event,
+            gestureState
+          );
+        });
+      },
+    })
+  ).current;
 
   return (
-    <GestureHandlerRootView>
-      <RnghSwipeable
-        {...swipeableProps}
-        ref={swipeableRef}
-        {...(leftActions !== undefined && { renderLeftActions })}
-        {...(rightActions !== undefined && { renderRightActions })}
-        onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
-        onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
-        onSwipeableClose={() => onStateChange?.('closed')}
-      >
-        {children}
-      </RnghSwipeable>
-    </GestureHandlerRootView>
+    <StyledWrapper
+      onLayout={(event) => {
+        const { width } = event.nativeEvent.layout;
+        setWidth(width);
+      }}
+      style={[
+        {
+          flexDirection: 'row',
+        },
+        style,
+      ]}
+      {...panResponder.panHandlers}
+      {...rest}
+    >
+      {canSwipeRight && (
+        <Animated.View style={[{ transform, marginLeft: -width, width }]}>
+          {leftContent || (
+            <Buttons
+              buttons={leftActions}
+              isLeftButtons
+              panAnimatedValue={state.pan}
+              width={width}
+              canSwipeLeft={canSwipeLeft}
+              canSwipeRight={canSwipeRight}
+              buttonWidth={leftButtonWidth}
+            />
+          )}
+        </Animated.View>
+      )}
+      <StyledContent style={{ transform }}>{children}</StyledContent>
+      {canSwipeLeft && (
+        <Animated.View style={[{ transform, marginRight: -width, width }]}>
+          {rightContent || (
+            <Buttons
+              buttons={rightActions}
+              isLeftButtons={false}
+              panAnimatedValue={state.pan}
+              width={width}
+              canSwipeRight={canSwipeRight}
+              canSwipeLeft={canSwipeLeft}
+              buttonWidth={rightButtonWidth}
+            />
+          )}
+        </Animated.View>
+      )}
+    </StyledWrapper>
   );
 };
 
-export default Object.assign(Swipeable, {
+const animationToNewState = (
+  swipeState: SwipeState,
+  pan: Animated.ValueXY,
+  totalLeftButtonsWidth: number,
+  totalRightButtonsWidth: number
+) => {
+  const animationConfig = getReleaseAnimationConfig(swipeState, {
+    totalLeftButtonsWidth,
+    totalRightButtonsWidth,
+  });
+
+  pan.flattenOffset();
+
+  return Animated.timing(pan, animationConfig);
+};
+
+const hanleOnPanResponderEnd = (
+  state: State,
+  contextValues: ContextValues,
+  event: GestureResponderEvent,
+  gestureState: PanResponderGestureState
+) => {
+  const {
+    totalLeftButtonsWidth,
+    totalRightButtonsWidth,
+    unmountedRef,
+    onSwipeLeftEnd,
+    onSwipeRightEnd,
+    onStateChange,
+  } = contextValues;
+  const { leftActionActivated, rightActionActivated, pan, swipeState } = state;
+  const animationConfig = getReleaseAnimationConfig(swipeState, {
+    totalLeftButtonsWidth,
+    totalRightButtonsWidth,
+  });
+
+  animationToNewState(
+    swipeState,
+    pan,
+    totalLeftButtonsWidth,
+    totalRightButtonsWidth
+  ).start(() => {
+    if (unmountedRef.current) {
+      return;
+    }
+
+    if (leftActionActivated && onSwipeLeftEnd) {
+      onSwipeLeftEnd(event, gestureState);
+    }
+
+    if (rightActionActivated && onSwipeRightEnd) {
+      onSwipeRightEnd(event, gestureState);
+    }
+
+    onStateChange(swipeState);
+  });
+
+  return {
+    ...state,
+    lastOffset: {
+      x: animationConfig.toValue.x,
+      y: animationConfig.toValue.y,
+    },
+    leftActionActivated: false,
+    rightActionActivated: false,
+  };
+};
+
+const hanleOnPanResponderMove = (
+  state: State,
+  contextValues: ContextValues,
+  event: GestureResponderEvent,
+  gestureState: PanResponderGestureState
+) => {
+  const {
+    leftActionsWidth,
+    rightActionsWidth,
+    onSwipeLeftStart,
+    onSwipeRightStart,
+    canSwipeRight,
+    canSwipeLeft,
+    hasLeftButtons,
+    hasRightButtons,
+  } = contextValues;
+  const { lastOffset, leftActionActivated, swipeState, rightActionActivated } =
+    state;
+
+  const { dx, vx } = gestureState;
+  const x = dx + lastOffset.x;
+  const isSwipingLeft = vx < 0;
+  const isSwipingRight = vx > 0;
+
+  const leftActionsActivated = swipeState === 'leftOpen';
+  const rightActionsActivated = swipeState === 'rightOpen';
+  let nextLeftActionActivated = leftActionActivated;
+  let nextLeftButtonsActivated = leftActionsActivated;
+  let nextRightActionActivated = rightActionActivated;
+  let nextRightButtonsActivated = rightActionsActivated;
+
+  Animated.event(
+    [
+      null,
+      {
+        dx: state.pan.x,
+        dy: state.pan.y,
+      },
+    ],
+    { useNativeDriver: false }
+  )(event, gestureState);
+
+  if (!leftActionActivated && canSwipeRight && x >= leftActionsWidth) {
+    nextLeftActionActivated = true;
+    onSwipeRightStart(event, gestureState);
+  }
+
+  if (leftActionActivated && canSwipeRight && x < leftActionsWidth) {
+    nextLeftActionActivated = false;
+  }
+
+  if (!rightActionActivated && canSwipeLeft && x <= -rightActionsWidth) {
+    nextRightActionActivated = true;
+    onSwipeLeftStart(event, gestureState);
+  }
+
+  if (rightActionActivated && canSwipeLeft && x > -rightActionsWidth) {
+    nextRightActionActivated = false;
+  }
+
+  if (
+    !leftActionsActivated &&
+    hasLeftButtons &&
+    !isSwipingLeft &&
+    x >= leftActionsWidth
+  ) {
+    nextLeftButtonsActivated = true;
+  }
+
+  if (leftActionsActivated && hasLeftButtons && isSwipingLeft) {
+    nextLeftButtonsActivated = false;
+  }
+
+  if (
+    !rightActionsActivated &&
+    hasRightButtons &&
+    !isSwipingRight &&
+    x <= -rightActionsWidth
+  ) {
+    nextRightButtonsActivated = true;
+  }
+
+  if (rightActionsActivated && hasRightButtons && isSwipingRight) {
+    nextRightButtonsActivated = false;
+  }
+  const needsUpdate =
+    nextLeftActionActivated !== leftActionActivated ||
+    nextLeftButtonsActivated !== leftActionsActivated ||
+    nextRightActionActivated !== rightActionActivated ||
+    nextRightButtonsActivated !== rightActionsActivated;
+
+  if (needsUpdate) {
+    const nextSwipeState = ((): SwipeState => {
+      if (nextLeftButtonsActivated) {
+        return 'leftOpen';
+      } else if (nextRightButtonsActivated) {
+        return 'rightOpen';
+      } else {
+        return 'closed';
+      }
+    })();
+
+    return {
+      ...state,
+      leftActionActivated: nextLeftActionActivated,
+      rightActionActivated: nextRightActionActivated,
+      swipeState: nextSwipeState,
+    };
+  } else {
+    return state;
+  }
+};
+
+export default Object.assign(React.memo(Swipeable), {
   Action: SwipeableAction,
-  Content: RectButton,
 });

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

@@ -258,7 +258,7 @@ Object {
         "paginatorBackgroundColor": "#401960",
       },
       "fontSizes": Object {
-        "heading": 36,
+        "heading": 32,
       },
       "fonts": Object {
         "heading": "RebondGrotesque-SemiBold",

package/src/theme/components/carousel.ts

@@ -25,7 +25,7 @@ const getCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
-    heading: theme.fontSizes['6xlarge'],
+    heading: theme.fontSizes['xxxxxlarge'],
   };
 
   const fonts = {