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

package/src/components/Swipeable/index.tsx

@@ -1,555 +1,160 @@
-import React, { useEffect } from 'react';
+import React, {
+  ComponentProps,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
+import { Animated, useWindowDimensions } from 'react-native';
 import {
-  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';
+  Swipeable as RnghSwipeable,
+  GestureHandlerRootView,
+  RectButton,
+} from 'react-native-gesture-handler';
 import SwipeableAction from './SwipeableAction';
 
-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;
-
+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.
+   */
   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;
-
-  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;
-  }
+  /**
+   * Testing ID of the component
+   */
+  testID?: string;
+}
+
+const renderActions = (
+  actions: ReactNode,
+  width: number,
+  progress: Animated.AnimatedInterpolation,
+  direction: 'left' | 'right'
 ) => {
-  const { totalLeftButtonsWidth, totalRightButtonsWidth } = props;
-
-  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 };
-};
+  const trans = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: direction === 'left' ? [-width, 0] : [width, 0],
+    extrapolate: 'clamp',
+  });
 
-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>;
+  return (
+    <Animated.View
+      style={{
+        width,
+        flexDirection: 'row',
+        transform: [{ translateX: trans }],
+      }}
+    >
+      {actions}
+    </Animated.View>
+  );
 };
 
 const Swipeable = ({
   children,
-  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
+  state,
+  onStateChange,
+  leftActions,
+  leftActionsWidth,
+  rightActions,
+  rightActionsWidth,
+  ...swipeableProps
 }: SwipeableProps) => {
-  const propsWithDefaultValue: PropsWithDefaultValue = {
-    children,
-    leftActions,
-    leftContent,
-    rightActions,
-    rightContent,
-    style,
-    leftActionsWidth,
-    leftButtonWidth,
-    onSwipeLeftStart,
-    onSwipeLeftEnd,
-    rightActionsWidth,
-    rightButtonWidth,
-    onSwipeRightStart,
-    onSwipeRightEnd,
-    swipeState,
-    onStateChange,
-    ...rest,
-  };
-
-  const unmountedRef = React.useRef(false);
-  useEffect(() => {
-    return () => {
-      unmountedRef.current = true;
-    };
-  }, []);
-
-  const totalLeftButtonsWidth = leftActions.length * leftButtonWidth;
-  const totalRightButtonsWidth = rightActions.length * rightButtonWidth;
+  const { width } = useWindowDimensions();
+  const swipeableRef = useRef<RnghSwipeable>(null);
 
-  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 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 [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(() => {
-    let animation: Animated.CompositeAnimation | null = null;
-    if (state.swipeState !== swipeState) {
-      animation = animationToNewState(
-        swipeState,
-        state.pan,
-        totalLeftButtonsWidth,
-        totalRightButtonsWidth
-      );
-      animation.start();
+    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;
     }
-    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;
+  }, [state]);
 
   return (
-    <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>
+    <GestureHandlerRootView>
+      <RnghSwipeable
+        {...swipeableProps}
+        ref={swipeableRef}
+        {...(leftActions !== undefined && { renderLeftActions })}
+        {...(rightActions !== undefined && { renderRightActions })}
+        onSwipeableLeftOpen={() => onStateChange?.('leftOpen')}
+        onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
+        onSwipeableClose={() => onStateChange?.('closed')}
+      >
+        {children}
+      </RnghSwipeable>
+    </GestureHandlerRootView>
   );
 };
 
-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), {
+export default Object.assign(Swipeable, {
   Action: SwipeableAction,
+  Content: RectButton,
 });

package/src/components/SwipeableV2/StyledSwipeable.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/native';
+import { Animated, View } from 'react-native';
+
+export type ActionIntent = 'primary' | 'success' | 'danger';
+
+const StyledWrapper = styled(View)(() => ({
+  flexDirection: 'row',
+}));
+
+const StyledContent = styled(Animated.View)(() => ({
+  flex: 1,
+}));
+
+export { StyledWrapper, StyledContent };