@xhsreds/reds-rn-next 0.2.7 → 0.2.9

package/lib/types/components/ImagePreview/ImageViewer3.d.ts

@@ -1,219 +0,0 @@
-import * as React from "react";
-import { GestureResponderEvent, LayoutChangeEvent, PanResponderGestureState, ViewStyle } from "react-native";
-export interface ICenterOn {
-    x: number;
-    y: number;
-    scale: number;
-    duration: number;
-}
-export interface IOnMove {
-    type: string;
-    positionX: number;
-    positionY: number;
-    scale: number;
-    zoomCurrentDistance: number;
-}
-export interface IOnClick {
-    locationX: number;
-    locationY: number;
-    pageX: number;
-    pageY: number;
-}
-export declare class ImageZoomProps {
-    /**
-     * 操作区域宽度
-     */
-    cropWidth: number;
-    /**
-     * 操作区域高度
-     */
-    cropHeight: number;
-    /**
-     * 图片宽度
-     */
-    imageWidth: number;
-    /**
-     * 图片高度
-     */
-    imageHeight: number;
-    /**
-     * 单手是否能移动图片
-     */
-    panToMove?: boolean;
-    /**
-     * 多手指是否能缩放
-     */
-    pinchToZoom?: boolean;
-    /**
-     * 双击能否放大
-     */
-    enableDoubleClickZoom?: boolean;
-    /**
-     * 单击最大位移
-     */
-    clickDistance?: number;
-    /**
-     * 最大滑动阈值
-     */
-    maxOverflow?: number;
-    /**
-     * 长按的阈值（毫秒）
-     */
-    longPressTime?: number;
-    /**
-     * 双击计时器最大间隔
-     */
-    doubleClickInterval?: number;
-    /**
-     * If provided this will cause the view to zoom and pan to the center point
-     * Duration is optional and defaults to 300 ms.
-     */
-    centerOn?: ICenterOn;
-    style?: ViewStyle;
-    /**
-     * threshold for firing swipe down function
-     */
-    swipeDownThreshold?: number;
-    /**
-     * for enabling vertical movement if user doesn't want it
-     */
-    enableSwipeDown?: boolean;
-    /**
-     * for disabling focus on image center if user doesn't want it
-     */
-    enableCenterFocus?: boolean;
-    /**
-     * for disabling rendering to hardware texture on Android
-     */
-    useHardwareTextureAndroid?: boolean;
-    /**
-     * minimum zoom scale
-     */
-    minScale?: number;
-    /**
-     * maximum zoom scale
-     */
-    maxScale?: number;
-    /**
-     * 是否启用原生动画驱动
-     * Whether to use native code to perform animations.
-     */
-    useNativeDriver?: boolean;
-    /**
-     * 单击的回调
-     */
-    onClick?: (eventParams: IOnClick) => void;
-    /**
-     * 双击的回调
-     */
-    onDoubleClick?: (eventParams: IOnClick) => void;
-    /**
-     * 长按的回调
-     */
-    onLongPress?: (eventParams: IOnClick) => void;
-    /**
-     * 横向超出的距离，父级做图片切换时，可以监听这个函数
-     * 当此函数触发时，可以做切换操作
-     */
-    horizontalOuterRangeOffset?: (offsetX: number) => void;
-    /**
-     * 触发想切换到左边的图，向左滑动速度超出阈值时触发
-     */
-    onDragLeft?: () => void;
-    /**
-     * 松手但是没有取消看图的回调
-     */
-    responderRelease?: (vx: number, scale: number) => void;
-    /**
-     * If provided, this will be called everytime the map is moved
-     */
-    onMove?: (position: IOnMove) => void;
-    /**
-     * If provided, this method will be called when the onLayout event fires
-     */
-    layoutChange?: (event: LayoutChangeEvent) => void;
-    /**
-     * function that fires when user swipes down
-     */
-    onSwipeDown?: () => void;
-    /**
-     * Allows defining the onMoveShouldSetResponder behavior.
-     */
-    onMoveShouldSetPanResponder?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;
-    /**
-     * Allows overriding the default onStartShouldSetPanResponder behavior.
-     * By default, always becomes the responder
-     */
-    onStartShouldSetPanResponder?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;
-    /**
-     * Allows overriding the default onPanResponderTerminationRequest behavior.
-     * By default, doesn't terminate until the press ends
-     */
-    onPanResponderTerminationRequest?: (event: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;
-}
-export declare class ImageZoomState {
-    /**
-     * 中心 x 坐标
-     */
-    centerX?: number;
-    /**
-     * 中心 y 坐标
-     */
-    centerY?: number;
-}
-export default class ImageViewer extends React.Component<ImageZoomProps, ImageZoomState> {
-    static defaultProps: ImageZoomProps;
-    state: ImageZoomState;
-    private lastPositionX;
-    private positionX;
-    private animatedPositionX;
-    private lastPositionY;
-    private positionY;
-    private animatedPositionY;
-    private scale;
-    private animatedScale;
-    private zoomLastDistance;
-    private zoomCurrentDistance;
-    private lastTouchStartTime;
-    private horizontalWholeOuterCounter;
-    private swipeDownOffset;
-    private horizontalWholeCounter;
-    private verticalWholeCounter;
-    private centerDiffX;
-    private centerDiffY;
-    private singleClickTimeout;
-    private longPressTimeout;
-    private lastClickTime;
-    private doubleClickX;
-    private doubleClickY;
-    private isDoubleClick;
-    private isLongPress;
-    private isHorizontalWrap;
-    private imagePanResponder;
-    resetScale: () => void;
-    panResponderReleaseResolve: () => void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ImageZoomProps): void;
-    imageDidMove(type: string): void;
-    didCenterOnChange(params: {
-        x: number;
-        y: number;
-        scale: number;
-        duration: number;
-    }, paramsNext: {
-        x: number;
-        y: number;
-        scale: number;
-        duration: number;
-    }): boolean;
-    centerOn(params: ICenterOn): void;
-    /**
-     * 图片区域视图渲染完毕
-     */
-    handleLayout(event: LayoutChangeEvent): void;
-    /**
-     * 重置大小和位置
-     */
-    reset(): void;
-    render(): React.ReactNode;
-}

package/lib/types/components/ImagePreview/demo/index.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export default function App(): React.JSX.Element;

package/lib/types/components/ImagePreview/index.d.ts

@@ -1,5 +0,0 @@
-import ImagePreview from "./ImagePreview";
-import ImageViewer from "./ImageViewer";
-import * as ImagePreviewType from "./interface";
-export default ImagePreview;
-export { ImagePreview, ImagePreviewType, ImageViewer };

package/lib/types/components/ImagePreview/test/index.bench.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/types/components/ImagePreview/test/index.test.d.ts

@@ -1 +0,0 @@
-import "@testing-library/react-native/extend-expect";

package/src/components/ImagePreview/Gesture/Pan.ts

@@ -1,61 +0,0 @@
-import { GestureResponderEvent, PanResponderGestureState } from "react-native";
-import { GestureCtx, GestureOption } from "./types";
-
-export const defaultConfig: GestureOption = {
-  type: "Pan",
-  numberOfPointers: 1,
-  gestureCtx: {},
-};
-
-export const handler = {
-  start: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {},
-  update: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {
-    if (
-      gestureOption.numberOfPointers === gestureState.numberActiveTouches &&
-      Math.sqrt(gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy) >
-        Math.abs(gestureOption.minDistance || 0)
-    ) {
-      const lastPanInfo = gestureCtx.panInfo;
-      gestureCtx.panInfo = {
-        absoluteX: evt.nativeEvent.pageX,
-        absoluteY: evt.nativeEvent.pageY,
-        numberOfPointers: gestureState.numberActiveTouches,
-        translationX: lastPanInfo ? gestureState.dx : 0,
-        translationY: lastPanInfo ? gestureState.dy : 0,
-        velocityX: lastPanInfo ? gestureState.vx : 0,
-        velocityY: lastPanInfo ? gestureState.vy : 0,
-        x: lastPanInfo ? gestureState.x0 : evt.nativeEvent.pageX,
-        y: lastPanInfo ? gestureState.y0 : evt.nativeEvent.pageY,
-      };
-      if (gestureCtx.enabled) {
-        gestureOption.onUpdate?.(gestureCtx.panInfo);
-      } else {
-        gestureCtx.enabled = true;
-        gestureOption.onStart?.(gestureCtx.panInfo);
-      }
-    }
-  },
-
-  end: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {
-    if (gestureCtx.enabled) {
-      gestureOption.onEnd?.(gestureCtx.panInfo);
-      gestureCtx.enabled = false;
-      delete gestureCtx.panInfo;
-    }
-  },
-};

package/src/components/ImagePreview/Gesture/Pinch.ts

@@ -1,57 +0,0 @@
-import { GestureResponderEvent, PanResponderGestureState } from "react-native";
-import { GestureCtx, GestureOption } from "./types";
-
-export const defaultConfig: GestureOption = {
-  type: "Pinch",
-  numberOfPointers: 2,
-  gestureCtx: {},
-};
-export const handler = {
-  start: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {},
-  update: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {
-    if (gestureOption.numberOfPointers === gestureState.numberActiveTouches) {
-      const touches = evt.nativeEvent.touches;
-      const dx = touches[0].pageX - touches[1].pageX;
-      const dy = touches[0].pageY - touches[1].pageY;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-      const lastPinchInfo = gestureCtx.pinchInfo;
-      gestureCtx.pinchInfo = {
-        scale: lastPinchInfo ? (distance / lastPinchInfo.distance) * (lastPinchInfo.scale || 1) : 1,
-        distance: distance,
-        dx: dx,
-        dy: dy,
-        focalX: touches[0].pageX + dx / 2,
-        focalY: touches[0].pageY + dy / 2,
-      };
-      if (gestureCtx.enabled) {
-        gestureOption.onUpdate?.(gestureCtx.pinchInfo);
-      } else {
-        gestureCtx.enabled = true;
-        gestureOption.onStart?.(gestureCtx.pinchInfo);
-      }
-    }
-  },
-
-  end: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {
-    if (gestureCtx.enabled) {
-      gestureOption.onEnd?.(gestureCtx.pinchInfo);
-      gestureCtx.enabled = false;
-      delete gestureCtx.pinchInfo;
-    }
-  },
-};

package/src/components/ImagePreview/Gesture/Tap.ts

@@ -1,66 +0,0 @@
-import { GestureResponderEvent, PanResponderGestureState } from "react-native";
-import { GestureCtx, GestureOption } from "./types";
-
-export const defaultConfig: GestureOption = {
-  type: "Tap",
-  numberOfPointers: 1,
-  numberOfTaps: 1,
-  maxDuration: 500,
-  maxDelay: 500,
-  gestureCtx: {},
-};
-
-export const handler = {
-  start: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {
-    gestureCtx.tapInfo = {
-      timestamp: evt.nativeEvent.timestamp,
-      numberActiveTouches: gestureState.numberActiveTouches,
-    };
-    console.log(`gestureCtx.tapInfo`, gestureCtx.tapInfo);
-  },
-  update: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {
-    if (gestureOption.numberOfPointers === gestureState.numberActiveTouches) {
-      const lastPanInfo = gestureCtx.panInfo;
-      gestureCtx.panInfo = {
-        absoluteX: evt.nativeEvent.pageX,
-        absoluteY: evt.nativeEvent.pageY,
-        numberOfPointers: gestureState.numberActiveTouches,
-        translationX: lastPanInfo ? gestureState.dx : 0,
-        translationY: lastPanInfo ? gestureState.dy : 0,
-        velocityX: lastPanInfo ? gestureState.vx : 0,
-        velocityY: lastPanInfo ? gestureState.vy : 0,
-        x: lastPanInfo ? gestureState.x0 : evt.nativeEvent.pageX,
-        y: lastPanInfo ? gestureState.y0 : evt.nativeEvent.pageY,
-      };
-      if (gestureCtx.enabled) {
-        gestureOption.onUpdate?.(gestureCtx.panInfo);
-      } else {
-        gestureCtx.enabled = true;
-        gestureOption.onStart?.(gestureCtx.panInfo);
-      }
-    }
-  },
-
-  end: (
-    evt: GestureResponderEvent,
-    gestureState: PanResponderGestureState,
-    gestureOption: GestureOption,
-    gestureCtx: GestureCtx,
-  ) => {
-    if (gestureCtx.enabled) {
-      gestureOption.onEnd?.(gestureCtx.panInfo);
-      gestureCtx.enabled = false;
-      delete gestureCtx.panInfo;
-    }
-  },
-};

package/src/components/ImagePreview/Gesture/types.ts

@@ -1,35 +0,0 @@
-export interface GestureOption {
-  onStart?: (e: any) => void;
-  onUpdate?: (e: any) => void;
-  onEnd?: (e: any) => void;
-  numberOfPointers?: number;
-  numberOfTaps?: number;
-  minDistance?: number;
-  maxDuration?: number;
-  maxDelay?: number;
-  type?: "Tap" | "Pan" | "Pinch";
-  gestureCtx?: GestureCtx;
-}
-export interface GestureCtx {
-  tapInfo?: { timestamp: number; numberActiveTouches: number };
-  panInfo?: {
-    absoluteX: number;
-    absoluteY: number;
-    numberOfPointers: number;
-    translationX: number;
-    translationY: number;
-    velocityX: number;
-    velocityY: number;
-    x: number;
-    y: number;
-  };
-  pinchInfo?: {
-    scale: number;
-    distance: number;
-    dx: number;
-    dy: number;
-    focalX: number;
-    focalY: number;
-  };
-  enabled?: boolean;
-}

package/src/components/ImagePreview/Gesture/useGesture.tsx

@@ -1,65 +0,0 @@
-import { create } from "domain";
-import React, { useRef } from "react";
-import { GestureResponderEvent, PanResponder, PanResponderGestureState } from "react-native";
-import { GestureCtx, GestureOption } from "./types";
-import * as Pinch from "./Pinch";
-import * as Pan from "./Pan";
-import * as Tap from "./Tap";
-
-export default () => {
-  const gestureList: GestureOption[] = useRef([]).current;
-
-  const panResponder = React.useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: (evt, gestureState) => true,
-      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
-      onMoveShouldSetPanResponder: (evt, gestureState) => true,
-      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
-      onShouldBlockNativeResponder: (evt, gestureState) => true,
-      onPanResponderTerminationRequest: (evt, gestureState) => true,
-
-      onPanResponderGrant: (evt, gestureState) => {
-        gestureList.forEach(({ gestureCtx = {}, type, ...gestureOption }) => {
-          type === "Pan" && Pan.handler.start(evt, gestureState, gestureOption, gestureCtx);
-          type === "Pinch" && Pinch.handler.start(evt, gestureState, gestureOption, gestureCtx);
-          type === "Tap" && Tap.handler.start(evt, gestureState, gestureOption, gestureCtx);
-        });
-      },
-      onPanResponderMove: (evt, gestureState) => {
-        gestureList.forEach(({ gestureCtx = {}, type, ...gestureOption }) => {
-          type === "Pan" && Pan.handler.update(evt, gestureState, gestureOption, gestureCtx);
-          type === "Pinch" && Pinch.handler.update(evt, gestureState, gestureOption, gestureCtx);
-          type === "Tap" && Tap.handler.update(evt, gestureState, gestureOption, gestureCtx);
-        });
-      },
-      onPanResponderRelease: (evt, gestureState) => {
-        gestureList.forEach(({ gestureCtx = {}, type, ...gestureOption }) => {
-          type === "Pan" && Pan.handler.end(evt, gestureState, gestureOption, gestureCtx);
-          type === "Pinch" && Pinch.handler.end(evt, gestureState, gestureOption, gestureCtx);
-          type === "Tap" && Tap.handler.end(evt, gestureState, gestureOption, gestureCtx);
-        });
-      },
-      onPanResponderTerminate: (evt, gestureState) => {},
-    }),
-  ).current;
-
-  return {
-    createPan(option: GestureOption) {
-      gestureList.push({ ...Pan.defaultConfig, ...option });
-      return this;
-    },
-    createPinch(option: GestureOption) {
-      gestureList.push({ ...Pinch.defaultConfig, ...option });
-      return this;
-    },
-    createTap(option: GestureOption) {
-      gestureList.push({
-        ...Tap.defaultConfig,
-
-        ...option,
-      });
-      return this;
-    },
-    panResponder,
-  };
-};

package/src/components/ImagePreview/ImageContainer.tsx

@@ -1,22 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { View, Text, TouchableWithoutFeedback, Animated, GestureResponderEvent } from "react-native";
-import styles from "./styles";
-
-const ImageContainer = ({ children }: any) => {
-  return (
-    <View
-      style={{
-        position: "absolute",
-        backgroundColor: "#131ee133",
-        width: "100%",
-        height: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <View></View>
-    </View>
-  );
-};
-
-export default ImageContainer;

package/src/components/ImagePreview/ImagePreview.tsx

@@ -1,37 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { View, Text, TouchableWithoutFeedback, Animated, GestureResponderEvent, PanResponder } from "react-native";
-import { RedsImagePreview, ImagePreviewDefaultProps } from "./interface/index";
-import styles from "./styles";
-import ImageContainer from "./ImageContainer";
-import ImageViewer from "./ImageViewer";
-// import ImageViewer2 from "./ImageViewer2";
-import { Image } from "../../";
-// import { GestureHandlerRootView } from "react-native-gesture-handler";
-import useMounted from "../../pvCount/useUnmountedProcess";
-
-const ImagePreview = ({ removePortal }: any) => {
-  useMounted("ImagePreview");
-  return (
-    <View
-      style={{
-        position: "absolute",
-        backgroundColor: "#00000033",
-        width: "100%",
-        height: "100%",
-      }}
-    >
-      <ImageViewer onClose={removePortal}>
-        <Image
-          width="100%"
-          height="100%"
-          resizeMode="contain"
-          src="https://picasso-static.xiaohongshu.com/fe-platform/167754d83b112dc155edd2ae5dc7f9ced481bba3.webp"
-        />
-      </ImageViewer>
-    </View>
-  );
-};
-
-ImagePreview.defaultProps = ImagePreviewDefaultProps;
-
-export default ImagePreview;

package/src/components/ImagePreview/ImageViewer.tsx

@@ -1,96 +0,0 @@
-import { Animated, PanResponder, View } from "react-native";
-import React, { useRef } from "react";
-import useGesture from "./Gesture/useGesture";
-import useMounted from "../../pvCount/useUnmountedProcess";
-
-export default ({ children, onClose }: any) => {
-  useMounted("ImageViewer");
-  const position = useRef(new Animated.ValueXY()).current;
-  const startPostion = useRef({ x: 0, y: 0 }).current;
-
-  const scale = useRef(new Animated.Value(1)).current;
-  const startScale = useRef(1);
-
-  const animatedStyles = {
-    transform: [{ translateX: position.x }, { translateY: position.y }, { scale: scale }],
-  };
-
-  const gesture = useGesture();
-  gesture.createPan({
-    onStart: (e) => {
-      // console.log(`onStart`, e);
-    },
-    onUpdate: (e) => {
-      // console.log(`onUpdate`, e);
-      position.x.setValue(startPostion.x + e.translationX);
-      position.y.setValue(startPostion.y + e.translationY);
-    },
-    onEnd: (e) => {
-      // console.log(`onEnd`, e);
-      if (startScale.current === 1) {
-        position.setValue({ x: 0, y: 0 });
-        startPostion.x = 0;
-        startPostion.y = 0;
-        if (e.translationY > 150) {
-          onClose?.();
-          return;
-        }
-        return;
-      }
-      startPostion.x += e.translationX;
-      startPostion.y += e.translationY;
-    },
-  });
-
-  gesture.createPinch({
-    onStart: (e) => {
-      // console.log(`onStart`, e);
-    },
-    onUpdate: (e) => {
-      // console.log(`onUpdate`, e);
-      let _scale = startScale.current * e.scale;
-      scale.setValue(_scale);
-    },
-    onEnd: (e) => {
-      // console.log(`onEnd`, e);
-      let _scale = startScale.current * e.scale;
-      if (_scale > 3) _scale = 3;
-      if (_scale < 1) {
-        _scale = 1;
-        position.setValue({ x: 0, y: 0 });
-        startPostion.x = 0;
-        startPostion.y = 0;
-      }
-      scale.setValue(_scale);
-      startScale.current = _scale;
-    },
-  });
-
-  // gesture.createTap({
-  //   numberOfTaps: 2,
-  //   onStart: (e) => {},
-  //   onUpdate: (e) => {},
-  //   onEnd: (e) => {
-  //     console.log(`onEnd`, e);
-  //     if (startScale.current === 1) {
-  //       scale.setValue(3);
-  //       startScale.current = 3;
-  //       return;
-  //     }
-  //     if (startScale.current > 1) {
-  //       scale.setValue(1);
-  //       startScale.current = 1;
-  //       position.setValue({ x: 0, y: 0 });
-  //       startPostion.x = 0;
-  //       startPostion.y = 0;
-  //       return;
-  //     }
-  //   },
-  // });
-
-  return (
-    <Animated.View style={[animatedStyles]}>
-      <View {...gesture.panResponder.panHandlers}>{children}</View>
-    </Animated.View>
-  );
-};