@haroldtran/react-native-modals 0.0.6 → 0.0.10

package/src/components/BottomModal.tsx

@@ -1,9 +1,7 @@
-// @flow
-
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import type { ModalProps } from '../type';
 import SlideAnimation from '../animations/SlideAnimation';
+import type { ModalProps } from '../type';
 import BaseModal from './BaseModal';
 
 const styles = StyleSheet.create({
@@ -16,21 +14,27 @@ const styles = StyleSheet.create({
   },
 });
 
-const BottomModal = ({
-  style,
-  modalStyle,
-  ...restProps
-}: ModalProps) => (
-  <BaseModal
-    modalAnimation={new SlideAnimation({
-      slideFrom: 'bottom',
-    })}
-    {...restProps}
-    style={StyleSheet.flatten([styles.container, style])}
-    modalStyle={StyleSheet.flatten([styles.modal, modalStyle])}
-    width={1}
-    swipeDirection="down"
-  />
-);
+const BottomModal = (props: ModalProps) => {
+  const { style, modalStyle, ...restProps } = props;
+
+  const modalAnimation = React.useMemo(
+    () =>
+      new SlideAnimation({
+        slideFrom: 'bottom',
+      }),
+    [],
+  );
+
+  return (
+    <BaseModal
+      modalAnimation={modalAnimation}
+      {...restProps}
+      style={StyleSheet.flatten([styles.container, style])}
+      modalStyle={StyleSheet.flatten([styles.modal, modalStyle])}
+      width={1}
+      swipeDirection="down"
+    />
+  );
+};
 
 export default BottomModal;

package/src/components/DraggableView.tsx

@@ -1,6 +1,6 @@
-import React, { Component } from "react";
-import { Animated, Dimensions, PanResponder } from "react-native";
-import type { DragEvent, SwipeDirection } from "../type";
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated, PanResponder, PanResponderGestureState, useWindowDimensions } from 'react-native';
+import type { DragEvent, SwipeDirection } from '../type';
 
 type Props = {
   style?: any;
@@ -11,238 +11,203 @@ type Props = {
   onSwipeOut?: (event: DragEvent) => void;
   swipeThreshold?: number;
   swipeDirection?: SwipeDirection | Array<SwipeDirection>;
-  children: ({
-    onLayout,
-    pan,
-  }: {
-    onLayout: (event: any) => void;
-    pan: Animated.ValueXY;
-  }) => React.ReactNode;
+  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
+  children: (args: { onLayout: (event: any) => void; pan: Animated.ValueXY }) => React.ReactNode;
 };
 
-export default class DraggableView extends Component<Props> {
-  static defaultProps = {
-    style: null,
-    onMove: () => {},
-    onSwiping: () => {},
-    onSwipingOut: () => {},
-    onSwipeOut: null,
-    onRelease: () => {},
-    swipeThreshold: 100,
-    swipeDirection: [],
-  };
-
-  // instance properties
-  pan: Animated.ValueXY;
-  allowedDirections: SwipeDirection[];
-  layout: { x: number; y: number; width: number; height: number } | null;
-  panEventListenerId: string | number | null = null;
-  currentSwipeDirection: SwipeDirection | null = null;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.pan = new Animated.ValueXY();
-    this.allowedDirections = ([] as SwipeDirection[]).concat(
-      props.swipeDirection || [],
-    );
-    this.layout = null;
-  }
-
-  componentDidMount() {
-    this.panEventListenerId = this.pan.addListener(
-      (axis: { x: number; y: number }) => {
-        this.props.onMove?.(this.createDragEvent(axis));
-      },
-    );
-  }
-
-  componentWillUnmount() {
-    if (this.panEventListenerId != null) {
-      this.pan.removeListener(this.panEventListenerId as string);
-    }
-  }
-
-  onLayout = (event: any) => {
-    this.layout = event.nativeEvent.layout;
-  };
-
-  getSwipeDirection(gestureState: any): SwipeDirection | null {
-    if (this.isValidHorizontalSwipe(gestureState)) {
-      return gestureState.dx > 0 ? "right" : "left";
-    } else if (this.isValidVerticalSwipe(gestureState)) {
-      return gestureState.dy > 0 ? "down" : "up";
-    }
-    return null;
-  }
-
-  getDisappearDirection() {
-    const { width, height } = Dimensions.get("window");
-    const vertical = height / 2 + (this.layout ? this.layout.height / 2 : 0);
-    const horizontal = width / 2 + (this.layout ? this.layout.width / 2 : 0);
-    let toValue;
-    if (this.currentSwipeDirection === "up") {
-      toValue = {
-        x: 0,
-        y: -vertical,
-      };
-    } else if (this.currentSwipeDirection === "down") {
-      toValue = {
-        x: 0,
-        y: vertical,
-      };
-    } else if (this.currentSwipeDirection === "left") {
-      toValue = {
-        x: -horizontal,
-        y: 0,
-      };
-    } else if (this.currentSwipeDirection === "right") {
-      toValue = {
-        x: horizontal,
-        y: 0,
-      };
-    }
-    return toValue;
-  }
-
-  isValidHorizontalSwipe({ vx, dy }: any) {
-    return this.isValidSwipe(vx, dy);
-  }
+const DraggableView = memo((props: Props) => {
+  const {
+    style = null,
+    onMove = () => {},
+    onSwiping = () => {},
+    onSwipingOut = () => {},
+    onSwipeOut = null,
+    onRelease = () => {},
+    swipeThreshold = 100,
+    swipeDirection = [],
+    pointerEvents = 'auto',
+    children: renderContent,
+  } = props;
+
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+  const pan = useRef(new Animated.ValueXY()).current;
+  const layoutRef = useRef<{ x: number; y: number; width: number; height: number } | null>(null);
+  const currentSwipeDirectionRef = useRef<SwipeDirection | null>(null);
+
+  // Track pan values without using ._value
+  const propsRef = useRef(props);
+  propsRef.current = props;
+
+  const panValueRef = useRef({ x: 0, y: 0 });
+
+  const allowedDirections = useMemo(
+    () => ([] as SwipeDirection[]).concat(props.swipeDirection || []),
+    [props.swipeDirection],
+  );
+
+  useEffect(() => {
+    const panListenerId = pan.addListener((value) => {
+      panValueRef.current = value;
+      propsRef.current.onMove?.({
+        axis: value,
+        layout: layoutRef.current,
+        swipeDirection: currentSwipeDirectionRef.current,
+      });
+    });
+    return () => pan.removeListener(panListenerId);
+  }, [pan]);
 
-  isValidVerticalSwipe({ vy, dx }: any) {
-    return this.isValidSwipe(vy, dx);
-  }
+  const onLayout = useCallback((event: any) => {
+    layoutRef.current = event.nativeEvent.layout;
+  }, []);
 
-  // eslint-disable-next-line class-methods-use-this
-  isValidSwipe(velocity: number, directionalOffset: number) {
+  const getSwipeDirection = useCallback((gestureState: PanResponderGestureState): SwipeDirection | null => {
+    const { dx, dy, vx, vy } = gestureState;
     const velocityThreshold = 0.3;
     const directionalOffsetThreshold = 80;
-    // eslint-disable-next-line max-len
-    return (
-      Math.abs(velocity) > velocityThreshold &&
-      Math.abs(directionalOffset) < directionalOffsetThreshold
-    );
-  }
-
-  isAllowedDirection({ dy, dx }: any) {
-    const draggedDown = dy > 0;
-    const draggedUp = dy < 0;
-    const draggedLeft = dx < 0;
-    const draggedRight = dx > 0;
-    const isAllowedDirection = (d: SwipeDirection) =>
-      this.currentSwipeDirection === d && this.allowedDirections.includes(d);
-    if (draggedDown && isAllowedDirection("down")) {
-      return true;
-    } else if (draggedUp && isAllowedDirection("up")) {
-      return true;
-    } else if (draggedLeft && isAllowedDirection("left")) {
-      return true;
-    } else if (draggedRight && isAllowedDirection("right")) {
-      return true;
+
+    if (Math.abs(vx) > velocityThreshold && Math.abs(dy) < directionalOffsetThreshold) {
+      return dx > 0 ? 'right' : 'left';
+    } else if (Math.abs(vy) > velocityThreshold && Math.abs(dx) < directionalOffsetThreshold) {
+      return dy > 0 ? 'down' : 'up';
     }
-    return false;
-  }
-
-  createDragEvent(axis: { x: number; y: number }): DragEvent {
-    return {
-      axis,
-      layout: this.layout,
-      swipeDirection: this.currentSwipeDirection,
-    };
-  }
-
-  panResponder = PanResponder.create({
-    onMoveShouldSetPanResponder: (evt, gestureState) =>
-      gestureState.dx !== 0 && gestureState.dy !== 0,
-    onStartShouldSetPanResponder: () => true,
-    onPanResponderMove: (event: any, gestureState: any) => {
-      const isVerticalSwipe = (d: SwipeDirection | null) =>
-        ["up", "down"].includes(d as string);
-      const isHorizontalSwipe = (d: SwipeDirection | null) =>
-        ["left", "right"].includes(d as string);
-
-      const newSwipeDirection = this.getSwipeDirection(gestureState);
-      const isSameDirection =
-        isVerticalSwipe(this.currentSwipeDirection) ===
-          isVerticalSwipe(newSwipeDirection) ||
-        isHorizontalSwipe(this.currentSwipeDirection) ===
-          isHorizontalSwipe(newSwipeDirection);
-      // newDirection & currentSwipeDirection must be same direction
-      if (newSwipeDirection && isSameDirection) {
-        this.currentSwipeDirection = newSwipeDirection;
-      }
-      if (this.isAllowedDirection(gestureState)) {
-        let animEvent: any;
-        if (isVerticalSwipe(this.currentSwipeDirection)) {
-          animEvent = { dy: this.pan.y };
-        } else if (isHorizontalSwipe(this.currentSwipeDirection)) {
-          animEvent = { dx: this.pan.x };
-        }
-        if (animEvent) {
-          Animated.event([null, animEvent], { useNativeDriver: false })(
-            event,
-            gestureState,
-          );
-        }
-        this.props.onSwiping?.(
-          this.createDragEvent({
-            x: (this.pan.x as any)._value,
-            y: (this.pan.y as any)._value,
-          }),
-        );
-      }
-    },
-    onPanResponderRelease: () => {
-      this.pan.flattenOffset();
-      const event = this.createDragEvent({
-        x: (this.pan.x as any)._value,
-        y: (this.pan.y as any)._value,
-      });
-      // on swipe out
-      const threshold = this.props.swipeThreshold ?? 0;
-      if (
-        (this.props.onSwipeOut &&
-          Math.abs((this.pan.y as any)._value) > threshold) ||
-        Math.abs((this.pan.x as any)._value) > threshold
-      ) {
-        const toValue = this.getDisappearDirection();
-        this.props.onSwipingOut?.(event);
-        if (!toValue) return;
-        Animated.spring(this.pan, {
-          toValue,
-          velocity: 0,
-          tension: 65,
-          friction: 11,
-          useNativeDriver: false,
-        }).start(() => {
-          this.props.onSwipeOut?.(event);
-        });
-        return;
-      }
-      // on release
-      this.currentSwipeDirection = null;
-      this.props.onRelease?.(event);
-      Animated.spring(this.pan, {
-        toValue: { x: 0, y: 0 },
-        velocity: 0,
-        tension: 65,
-        friction: 11,
-        useNativeDriver: false,
-      }).start();
+    return null;
+  }, []);
+
+  const getDisappearDirection = useCallback(() => {
+    const vertical = screenHeight / 2 + (layoutRef.current ? layoutRef.current.height / 2 : 0);
+    const horizontal = screenWidth / 2 + (layoutRef.current ? layoutRef.current.width / 2 : 0);
+
+    switch (currentSwipeDirectionRef.current) {
+      case 'up':
+        return { x: 0, y: -vertical };
+      case 'down':
+        return { x: 0, y: vertical };
+      case 'left':
+        return { x: -horizontal, y: 0 };
+      case 'right':
+        return { x: horizontal, y: 0 };
+      default:
+        return undefined;
+    }
+  }, [screenWidth, screenHeight]);
+
+  const isAllowedDirection = useCallback(
+    (gestureState: PanResponderGestureState) => {
+      const { dx, dy } = gestureState;
+      const draggedDown = dy > 0;
+      const draggedUp = dy < 0;
+      const draggedLeft = dx < 0;
+      const draggedRight = dx > 0;
+
+      const isCurrent = (d: SwipeDirection) => currentSwipeDirectionRef.current === d && allowedDirections.includes(d);
+
+      return (
+        (draggedDown && isCurrent('down')) ||
+        (draggedUp && isCurrent('up')) ||
+        (draggedLeft && isCurrent('left')) ||
+        (draggedRight && isCurrent('right'))
+      );
     },
+    [allowedDirections],
+  );
+
+  const createDragEvent = useCallback(
+    (): DragEvent => ({
+      axis: panValueRef.current,
+      layout: layoutRef.current,
+      swipeDirection: currentSwipeDirectionRef.current,
+    }),
+    [],
+  );
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () =>
+          allowedDirections.length > 0,
+        onMoveShouldSetPanResponder: (_, gestureState) =>
+          allowedDirections.length > 0 &&
+          (gestureState.dx !== 0 || gestureState.dy !== 0),
+        onPanResponderMove: (event, gestureState) => {
+          const isVertical = (d: SwipeDirection | null) => d === 'up' || d === 'down';
+          const isHorizontal = (d: SwipeDirection | null) => d === 'left' || d === 'right';
+
+          const newDir = getSwipeDirection(gestureState);
+          const isSame =
+            isVertical(currentSwipeDirectionRef.current) === isVertical(newDir) ||
+            isHorizontal(currentSwipeDirectionRef.current) === isHorizontal(newDir);
+
+          if (newDir && isSame) {
+            currentSwipeDirectionRef.current = newDir;
+          }
+
+          if (isAllowedDirection(gestureState)) {
+            let animEvent: any;
+            if (isVertical(currentSwipeDirectionRef.current)) {
+              animEvent = { dy: pan.y };
+            } else if (isHorizontal(currentSwipeDirectionRef.current)) {
+              animEvent = { dx: pan.x };
+            }
+
+            if (animEvent) {
+              Animated.event([null, animEvent], { useNativeDriver: false })(event, gestureState);
+            }
+            propsRef.current.onSwiping?.(createDragEvent());
+          }
+        },
+        onPanResponderRelease: () => {
+          pan.flattenOffset();
+          const event = createDragEvent();
+          const threshold = propsRef.current.swipeThreshold ?? 100;
+
+          if (
+            (propsRef.current.onSwipeOut && Math.abs(panValueRef.current.y) > threshold) ||
+            Math.abs(panValueRef.current.x) > threshold
+          ) {
+            const toValue = getDisappearDirection();
+            propsRef.current.onSwipingOut?.(event);
+            if (!toValue) return;
+
+            Animated.spring(pan, {
+              toValue,
+              velocity: 0,
+              tension: 65,
+              friction: 11,
+              useNativeDriver: false,
+            }).start(() => {
+              propsRef.current.onSwipeOut?.(event);
+            });
+            return;
+          }
+
+          currentSwipeDirectionRef.current = null;
+          propsRef.current.onRelease?.(event);
+          Animated.spring(pan, {
+            toValue: { x: 0, y: 0 },
+            velocity: 0,
+            tension: 65,
+            friction: 11,
+            useNativeDriver: false,
+          }).start();
+        },
+      }),
+    [getSwipeDirection, isAllowedDirection, pan, createDragEvent, getDisappearDirection],
+  );
+
+  const content = renderContent({
+    pan,
+    onLayout,
   });
 
-  render() {
-    const { style, children: renderContent } = this.props;
-    const content = renderContent({
-      pan: this.pan,
-      onLayout: this.onLayout,
-    });
+  return (
+    <Animated.View {...panResponder.panHandlers} style={style} pointerEvents={pointerEvents}>
+      {content}
+    </Animated.View>
+  );
+});
+
+DraggableView.displayName = 'DraggableView';
 
-    return (
-      <Animated.View {...this.panResponder.panHandlers} style={style}>
-        {content}
-      </Animated.View>
-    );
-  }
-}
+export default DraggableView;

package/src/components/ModalButton.tsx

@@ -1,39 +1,31 @@
-// @flow
+import React from 'react';
+import { PixelRatio, Platform, StyleSheet, Text, TouchableHighlight } from 'react-native';
+import { Positions } from '../constants/Constants';
+import type { ModalButtonProps } from '../type';
 
-import React from "react";
-import {
-  PixelRatio,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-} from "react-native";
-import { Positions } from "../constants/Constants";
-import type { ModalButtonProps } from "../type";
-
-const isAndroid = Platform.OS === "android";
+const isAndroid = Platform.OS === 'android';
 
 const styles = StyleSheet.create({
   button: {
     flex: 1,
-    width: "100%",
-    justifyContent: "center",
-    alignItems: "center",
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
     paddingTop: 16,
     paddingBottom: 16,
   },
   border: {
-    borderLeftColor: "#CCD0D5",
+    borderLeftColor: '#CCD0D5',
     borderLeftWidth: 1 / PixelRatio.get(),
   },
   text: {
-    fontWeight: isAndroid ? "400" : "500",
-    fontFamily: isAndroid ? "sans-serif-medium" : "System",
+    fontWeight: isAndroid ? '400' : '500',
+    fontFamily: isAndroid ? 'sans-serif-medium' : 'System',
     fontSize: isAndroid ? 19 : 16,
-    color: "#044DE0",
+    color: '#044DE0',
   },
   disable: {
-    color: "#C5C6C5",
+    color: '#C5C6C5',
   },
 });
 
@@ -43,7 +35,7 @@ const ModalButton = ({
   style,
   textStyle,
   activeOpacity = 0.6,
-  align = "center",
+  align = 'center',
   disabled = false,
   bordered = false,
 }: ModalButtonProps) => {
@@ -57,8 +49,7 @@ const ModalButton = ({
       onPress={onPress}
       disabled={disabled}
       activeOpacity={activeOpacity}
-      style={[styles.button, buttonAlign, border, style]}
-    >
+      style={[styles.button, buttonAlign, border, style]}>
       <Text style={[styles.text, disable, textStyle]}>{text}</Text>
     </TouchableHighlight>
   );

package/src/components/ModalContent.tsx

@@ -1,9 +1,7 @@
-// @flow
-
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import ModalContext from './ModalContext';
+import { StyleSheet, View } from 'react-native';
 import type { ModalContentProps } from '../type';
+import ModalContext from './ModalContext';
 
 const styles = StyleSheet.create({
   content: {
@@ -15,16 +13,9 @@ const styles = StyleSheet.create({
   },
 });
 
-const ModalContent = ({
-  style,
-  children,
-}: ModalContentProps) => (
+const ModalContent = ({ style, children }: ModalContentProps) => (
   <ModalContext.Consumer>
-    {({ hasTitle }) => (
-      <View style={[styles.content, hasTitle && styles.noPaddingTop, style]}>
-        {children}
-      </View>
-    )}
+    {({ hasTitle }) => <View style={[styles.content, hasTitle && styles.noPaddingTop, style]}>{children}</View>}
   </ModalContext.Consumer>
 );
 

package/src/components/ModalFooter.tsx

@@ -1,7 +1,5 @@
-// @flow
-
 import React, { Children, cloneElement } from 'react';
-import { View, StyleSheet, PixelRatio } from 'react-native';
+import { PixelRatio, StyleSheet, View } from 'react-native';
 import type { ModalFooterProps } from '../type';
 
 const styles = StyleSheet.create({
@@ -18,31 +16,22 @@ const styles = StyleSheet.create({
   },
 });
 
-const ModalActionList = ({
-  style,
-  children,
-  bordered = true,
-}: ModalFooterProps) => {
-  const containerStyle = children.length > 2
-    ? styles.actionsVertical
-    : styles.actionsHorizontal;
+const ModalActionList = ({ style, children, bordered = true }: ModalFooterProps) => {
+  const containerStyle = children.length > 2 ? styles.actionsVertical : styles.actionsHorizontal;
 
-  const border = bordered
-    ? styles.border
-    : null;
+  const border = bordered ? styles.border : null;
 
   // apply horizontal border if actions legnth is 2 & bordered is true
-  const content = children.length === 2
-    ? Children.map(children, ((child, index) => cloneElement(child, {
-      bordered: (1 % index === 0 && bordered),
-    })))
-    : children;
+  const content =
+    children.length === 2
+      ? Children.map(children, (child, index) =>
+          cloneElement(child, {
+            bordered: 1 % index === 0 && bordered,
+          }),
+        )
+      : children;
 
-  return (
-    <View style={[containerStyle, border, style]}>
-      {content}
-    </View>
-  );
+  return <View style={[containerStyle, border, style]}>{content}</View>;
 };
 
 export default ModalActionList;