@estuary-solutions/rn-core-ui 0.0.4 → 0.1.0

package/src/hooks/ImageView/useDoubleTapToZoom.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  ScrollView,
+  NativeTouchEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+
+import {
+  windowHeight as height,
+  windowWidth as width,
+} from '../../utils/ImageView/window';
+
+const DOUBLE_TAP_DELAY = 300;
+let lastTapTS: number | null = null;
+
+/**
+ * This is iOS only.
+ * Same functionality for Android implemented inside usePanResponder hook.
+ */
+function useDoubleTapToZoom(
+  scrollViewRef: React.RefObject<ScrollView>,
+  scaled: boolean,
+) {
+  const handleDoubleTap = React.useCallback(
+    (event: NativeSyntheticEvent<NativeTouchEvent>) => {
+      const nowTS = new Date().getTime();
+      const scrollResponderRef = scrollViewRef?.current?.getScrollResponder();
+
+      if (lastTapTS && nowTS - lastTapTS < DOUBLE_TAP_DELAY) {
+        const { pageX, pageY } = event.nativeEvent;
+        let targetX = 0;
+        let targetY = 0;
+        let targetWidth = width;
+        let targetHeight = height;
+
+        // Zooming in
+        // TODO: Add more precise calculation of targetX, targetY based on touch
+        if (!scaled) {
+          targetX = pageX / 2;
+          targetY = pageY / 2;
+          targetWidth = width / 2;
+          targetHeight = height / 2;
+        }
+
+        // @ts-ignore
+        scrollResponderRef?.scrollResponderZoomTo({
+          x: targetX,
+          y: targetY,
+          width: targetWidth,
+          height: targetHeight,
+          animated: true,
+        });
+      } else {
+        lastTapTS = nowTS;
+      }
+    },
+    [scaled],
+  );
+
+  return handleDoubleTap;
+}
+
+export default useDoubleTapToZoom;

package/src/hooks/ImageView/useImageDimensions.ts

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Image as RNImage, ImageURISource } from 'react-native';
+
+import { createCache } from '../../utils/ImageView';
+import { Dimensions, ImageSource } from '../../Images/ImageView/types';
+import { WEB } from '../../utils';
+
+const CACHE_SIZE = 50;
+const imageDimensionsCache = createCache(CACHE_SIZE);
+
+const useImageDimensions = (image: ImageSource): Dimensions | null => {
+  const [dimensions, setDimensions] = React.useState<Dimensions | null>(null);
+
+  const getImageDimensions = (image: ImageSource): Promise<Dimensions> => {
+    return new Promise(resolve => {
+      if (typeof image === 'number') {
+        const cacheKey = `${image}`;
+        let imageDimensions = imageDimensionsCache.get(cacheKey);
+
+        if (!imageDimensions) {
+          const { width, height } = RNImage.resolveAssetSource(image);
+          imageDimensions = { width, height };
+          imageDimensionsCache.set(cacheKey, imageDimensions);
+        }
+
+        resolve(imageDimensions);
+
+        return;
+      }
+
+      // @ts-ignore
+      if (image.uri) {
+        const source = image as ImageURISource;
+
+        const cacheKey = source.uri as string;
+
+        const imageDimensions = imageDimensionsCache.get(cacheKey);
+
+        if (imageDimensions) {
+          resolve(imageDimensions);
+        } else {
+          if (WEB) {
+            // const img = new window.Image();
+            // // @ts-ignore
+            // img.src = source.uri;
+            // img.onload = () => {
+            //   imageDimensionsCache.set(cacheKey, {
+            //     width: img.naturalWidth,
+            //     height: img.naturalHeight,
+            //   });
+            //   console.log('check img', img.naturalWidth, img.naturalHeight);
+
+            //   resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            // };
+            // img.onerror = () => resolve({ width: 0, height: 0 });
+            const img = new Image();
+            img.crossOrigin = 'anonymous'; // needed for remote images
+            img.onload = () => {
+              // Draw to canvas to get exact width/height
+              const canvas = document.createElement('canvas');
+              canvas.width = img.width;
+              canvas.height = img.height;
+              const ctx = canvas.getContext('2d');
+              ctx?.drawImage(img, 0, 0);
+
+              resolve({ width: canvas.width, height: canvas.height });
+            };
+            img.onerror = () => resolve({ width: 0, height: 0 });
+            img.src = source.uri || '';
+          } else {
+            RNImage.getSizeWithHeaders(
+              // @ts-ignore
+              source.uri,
+              source.headers,
+              (width: number, height: number) => {
+                imageDimensionsCache.set(cacheKey, { width, height });
+                resolve({ width, height });
+              },
+              () => {
+                resolve({ width: 0, height: 0 });
+              },
+            );
+          }
+        }
+      } else {
+        resolve({ width: 0, height: 0 });
+      }
+    });
+  };
+
+  let isImageUnmounted = false;
+
+  React.useEffect(() => {
+    getImageDimensions(image).then(dimensions => {
+      if (!isImageUnmounted) {
+        setDimensions(dimensions);
+      }
+    });
+
+    return () => {
+      isImageUnmounted = true;
+    };
+  }, [image]);
+
+  return dimensions;
+};
+
+export default useImageDimensions;

package/src/hooks/ImageView/useImageIndexChange.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+
+import { windowWidth as width } from '../../utils/ImageView/window';
+
+const useImageIndexChange = (imageIndex: number) => {
+  const [currentImageIndex, setImageIndex] = React.useState(imageIndex);
+  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const {
+      nativeEvent: {
+        contentOffset: { x: scrollX },
+      },
+    } = event;
+
+    if (width) {
+      const nextIndex = Math.round(scrollX / width);
+      setImageIndex(nextIndex < 0 ? 0 : nextIndex);
+    }
+  };
+
+  return [currentImageIndex, onScroll] as const;
+};
+
+export default useImageIndexChange;

package/src/hooks/ImageView/useImagePrefetch.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import { ImageSource } from '../../Images/ImageView/types';
+
+const useImagePrefetch = (images: ImageSource[]) => {
+  React.useEffect(() => {
+    images.forEach(image => {
+      //@ts-ignore
+      if (image.uri) {
+        //@ts-ignore
+        return Image.prefetch(image.uri);
+      }
+    });
+  }, []);
+};
+
+export default useImagePrefetch;

package/src/hooks/ImageView/usePanResponder.ts

@@ -0,0 +1,390 @@
+import React from 'react';
+import {
+  Animated,
+  GestureResponderEvent,
+  GestureResponderHandlers,
+  NativeTouchEvent,
+  PanResponderGestureState,
+} from 'react-native';
+
+import { Position } from '../../Images/ImageView/types';
+import {
+  createPanResponder,
+  getDistanceBetweenTouches,
+  getImageTranslate,
+  getImageDimensionsByTranslate,
+} from '../../utils/ImageView';
+import {
+  windowHeight as height,
+  windowWidth as width,
+} from '../../utils/ImageView/window';
+
+const MIN_DIMENSION = Math.min(width, height);
+
+const SCALE_MAX = 2;
+const DOUBLE_TAP_DELAY = 300;
+const OUT_BOUND_MULTIPLIER = 0.75;
+
+type Props = {
+  initialScale: number;
+  initialTranslate: Position;
+  onZoom: (isZoomed: boolean) => void;
+  doubleTapToZoomEnabled: boolean;
+  onLongPress: () => void;
+  delayLongPress: number;
+};
+
+const usePanResponder = ({
+  initialScale,
+  initialTranslate,
+  onZoom,
+  doubleTapToZoomEnabled,
+  onLongPress,
+  delayLongPress,
+}: Props): Readonly<
+  [GestureResponderHandlers, Animated.Value, Animated.ValueXY]
+> => {
+  let numberInitialTouches = 1;
+  let initialTouches: NativeTouchEvent[] = [];
+  let currentScale = initialScale;
+  let currentTranslate = initialTranslate;
+  let tmpScale = 0;
+  let tmpTranslate: Position | null = null;
+  let isDoubleTapPerformed = false;
+  let lastTapTS: number | null = null;
+  let longPressHandlerRef: string | number | NodeJS.Timeout | undefined;
+
+  const meaningfulShift = MIN_DIMENSION * 0.01;
+  const scaleValue = new Animated.Value(initialScale);
+  const translateValue = new Animated.ValueXY(initialTranslate);
+
+  const imageDimensions = getImageDimensionsByTranslate(initialTranslate);
+
+  const getBounds = (scale: number) => {
+    const scaledImageDimensions = {
+      width: imageDimensions.width * scale,
+      height: imageDimensions.height * scale,
+    };
+    const translateDelta = getImageTranslate(scaledImageDimensions);
+
+    const left = initialTranslate.x - translateDelta.x;
+    const right = left - (scaledImageDimensions.width - width);
+    const top = initialTranslate.y - translateDelta.y;
+    const bottom = top - (scaledImageDimensions.height - height);
+
+    return [top, left, bottom, right];
+  };
+
+  const getTranslateInBounds = (translate: Position, scale: number) => {
+    const inBoundTranslate = { x: translate.x, y: translate.y };
+    const [topBound, leftBound, bottomBound, rightBound] = getBounds(scale);
+
+    if (translate.x > leftBound) {
+      inBoundTranslate.x = leftBound;
+    } else if (translate.x < rightBound) {
+      inBoundTranslate.x = rightBound;
+    }
+
+    if (translate.y > topBound) {
+      inBoundTranslate.y = topBound;
+    } else if (translate.y < bottomBound) {
+      inBoundTranslate.y = bottomBound;
+    }
+
+    return inBoundTranslate;
+  };
+
+  const fitsScreenByWidth = () => imageDimensions.width * currentScale < width;
+  const fitsScreenByHeight = () =>
+    imageDimensions.height * currentScale < height;
+
+  React.useEffect(() => {
+    scaleValue.addListener(({ value }) => {
+      if (typeof onZoom === 'function') {
+        onZoom(value !== initialScale);
+      }
+    });
+
+    return () => scaleValue.removeAllListeners();
+  });
+
+  const cancelLongPressHandle = () => {
+    longPressHandlerRef && clearTimeout(longPressHandlerRef);
+  };
+
+  const handlers = {
+    onGrant: (
+      _: GestureResponderEvent,
+      gestureState: PanResponderGestureState,
+    ) => {
+      numberInitialTouches = gestureState.numberActiveTouches;
+
+      if (gestureState.numberActiveTouches > 1) {
+        return;
+      }
+
+      longPressHandlerRef = setTimeout(onLongPress, delayLongPress);
+    },
+    onStart: (
+      event: GestureResponderEvent,
+      gestureState: PanResponderGestureState,
+    ) => {
+      initialTouches = event.nativeEvent.touches;
+      numberInitialTouches = gestureState.numberActiveTouches;
+
+      if (gestureState.numberActiveTouches > 1) {
+        return;
+      }
+
+      const tapTS = Date.now();
+      // Handle double tap event by calculating diff between first and second taps timestamps
+
+      isDoubleTapPerformed = Boolean(
+        lastTapTS && tapTS - lastTapTS < DOUBLE_TAP_DELAY,
+      );
+
+      if (doubleTapToZoomEnabled && isDoubleTapPerformed) {
+        const isScaled = currentTranslate.x !== initialTranslate.x; // currentScale !== initialScale;
+        const { pageX: touchX, pageY: touchY } = event.nativeEvent.touches[0];
+        const targetScale = SCALE_MAX;
+        const nextScale = isScaled ? initialScale : targetScale;
+        const nextTranslate = isScaled
+          ? initialTranslate
+          : getTranslateInBounds(
+              {
+                x:
+                  initialTranslate.x +
+                  (width / 2 - touchX) * (targetScale / currentScale),
+                y:
+                  initialTranslate.y +
+                  (height / 2 - touchY) * (targetScale / currentScale),
+              },
+              targetScale,
+            );
+
+        onZoom(!isScaled);
+
+        Animated.parallel(
+          [
+            Animated.timing(translateValue.x, {
+              toValue: nextTranslate.x,
+              duration: 300,
+              useNativeDriver: true,
+            }),
+            Animated.timing(translateValue.y, {
+              toValue: nextTranslate.y,
+              duration: 300,
+              useNativeDriver: true,
+            }),
+            Animated.timing(scaleValue, {
+              toValue: nextScale,
+              duration: 300,
+              useNativeDriver: true,
+            }),
+          ],
+          { stopTogether: false },
+        ).start(() => {
+          currentScale = nextScale;
+          currentTranslate = nextTranslate;
+        });
+
+        lastTapTS = null;
+      } else {
+        lastTapTS = Date.now();
+      }
+    },
+    onMove: (
+      event: GestureResponderEvent,
+      gestureState: PanResponderGestureState,
+    ) => {
+      const { dx, dy } = gestureState;
+
+      if (Math.abs(dx) >= meaningfulShift || Math.abs(dy) >= meaningfulShift) {
+        cancelLongPressHandle();
+      }
+
+      // Don't need to handle move because double tap in progress (was handled in onStart)
+      if (doubleTapToZoomEnabled && isDoubleTapPerformed) {
+        cancelLongPressHandle();
+        return;
+      }
+
+      if (
+        numberInitialTouches === 1 &&
+        gestureState.numberActiveTouches === 2
+      ) {
+        numberInitialTouches = 2;
+        initialTouches = event.nativeEvent.touches;
+      }
+
+      const isTapGesture =
+        numberInitialTouches == 1 && gestureState.numberActiveTouches === 1;
+      const isPinchGesture =
+        numberInitialTouches === 2 && gestureState.numberActiveTouches === 2;
+
+      if (isPinchGesture) {
+        cancelLongPressHandle();
+
+        const initialDistance = getDistanceBetweenTouches(initialTouches);
+        const currentDistance = getDistanceBetweenTouches(
+          event.nativeEvent.touches,
+        );
+
+        let nextScale = (currentDistance / initialDistance) * currentScale;
+
+        /**
+         * In case image is scaling smaller than initial size ->
+         * slow down this transition by applying OUT_BOUND_MULTIPLIER
+         */
+        if (nextScale < initialScale) {
+          nextScale =
+            nextScale + (initialScale - nextScale) * OUT_BOUND_MULTIPLIER;
+        }
+
+        /**
+         * In case image is scaling down -> move it in direction of initial position
+         */
+        if (currentScale > initialScale && currentScale > nextScale) {
+          const k = (currentScale - initialScale) / (currentScale - nextScale);
+
+          const nextTranslateX =
+            nextScale < initialScale
+              ? initialTranslate.x
+              : currentTranslate.x -
+                (currentTranslate.x - initialTranslate.x) / k;
+
+          const nextTranslateY =
+            nextScale < initialScale
+              ? initialTranslate.y
+              : currentTranslate.y -
+                (currentTranslate.y - initialTranslate.y) / k;
+
+          translateValue.x.setValue(nextTranslateX);
+          translateValue.y.setValue(nextTranslateY);
+
+          tmpTranslate = { x: nextTranslateX, y: nextTranslateY };
+        }
+
+        scaleValue.setValue(nextScale);
+        tmpScale = nextScale;
+      }
+
+      if (isTapGesture && currentScale > initialScale) {
+        const { x, y } = currentTranslate;
+        const { dx, dy } = gestureState;
+        const [topBound, leftBound, bottomBound, rightBound] =
+          getBounds(currentScale);
+
+        let nextTranslateX = x + dx;
+        let nextTranslateY = y + dy;
+
+        if (nextTranslateX > leftBound) {
+          nextTranslateX =
+            nextTranslateX -
+            (nextTranslateX - leftBound) * OUT_BOUND_MULTIPLIER;
+        }
+
+        if (nextTranslateX < rightBound) {
+          nextTranslateX =
+            nextTranslateX -
+            (nextTranslateX - rightBound) * OUT_BOUND_MULTIPLIER;
+        }
+
+        if (nextTranslateY > topBound) {
+          nextTranslateY =
+            nextTranslateY - (nextTranslateY - topBound) * OUT_BOUND_MULTIPLIER;
+        }
+
+        if (nextTranslateY < bottomBound) {
+          nextTranslateY =
+            nextTranslateY -
+            (nextTranslateY - bottomBound) * OUT_BOUND_MULTIPLIER;
+        }
+
+        if (fitsScreenByWidth()) {
+          nextTranslateX = x;
+        }
+
+        if (fitsScreenByHeight()) {
+          nextTranslateY = y;
+        }
+
+        translateValue.x.setValue(nextTranslateX);
+        translateValue.y.setValue(nextTranslateY);
+
+        tmpTranslate = { x: nextTranslateX, y: nextTranslateY };
+      }
+    },
+    onRelease: () => {
+      cancelLongPressHandle();
+
+      if (isDoubleTapPerformed) {
+        isDoubleTapPerformed = false;
+      }
+
+      if (tmpScale > 0) {
+        if (tmpScale < initialScale || tmpScale > SCALE_MAX) {
+          tmpScale = tmpScale < initialScale ? initialScale : SCALE_MAX;
+          Animated.timing(scaleValue, {
+            toValue: tmpScale,
+            duration: 100,
+            useNativeDriver: true,
+          }).start();
+        }
+
+        currentScale = tmpScale;
+        tmpScale = 0;
+      }
+
+      if (tmpTranslate) {
+        const { x, y } = tmpTranslate;
+        const [topBound, leftBound, bottomBound, rightBound] =
+          getBounds(currentScale);
+
+        let nextTranslateX = x;
+        let nextTranslateY = y;
+
+        if (!fitsScreenByWidth()) {
+          if (nextTranslateX > leftBound) {
+            nextTranslateX = leftBound;
+          } else if (nextTranslateX < rightBound) {
+            nextTranslateX = rightBound;
+          }
+        }
+
+        if (!fitsScreenByHeight()) {
+          if (nextTranslateY > topBound) {
+            nextTranslateY = topBound;
+          } else if (nextTranslateY < bottomBound) {
+            nextTranslateY = bottomBound;
+          }
+        }
+
+        Animated.parallel([
+          Animated.timing(translateValue.x, {
+            toValue: nextTranslateX,
+            duration: 100,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateValue.y, {
+            toValue: nextTranslateY,
+            duration: 100,
+            useNativeDriver: true,
+          }),
+        ]).start();
+
+        currentTranslate = { x: nextTranslateX, y: nextTranslateY };
+        tmpTranslate = null;
+      }
+    },
+  };
+
+  const panResponder = React.useMemo(
+    () => createPanResponder(handlers),
+    [handlers],
+  );
+
+  return [panResponder.panHandlers, scaleValue, translateValue];
+};
+
+export default usePanResponder;

package/src/hooks/ImageView/useRequestClose.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const useRequestClose = (onRequestClose: () => void) => {
+  const [opacity, setOpacity] = React.useState(1);
+
+  return [
+    opacity,
+    () => {
+      setOpacity(0);
+      onRequestClose();
+      setTimeout(() => setOpacity(1), 0);
+    },
+  ] as const;
+};
+
+export default useRequestClose;

package/src/icons/Icon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { resolveIcon } from './registry';
+import type { IconName, IconProps } from './types';
+
+declare const __DEV__: boolean | undefined;
+
+export interface IconComponentProps extends IconProps {
+  /** A generated Lucide icon name or one added through `registerIcons`. */
+  name: IconName;
+}
+
+const warned = new Set<string>();
+
+/**
+ * Renders an icon by name. Generated icons live in `src/icons/generated`
+ * (see assets/icons/manifest.json); apps add their own with `registerIcons`.
+ */
+const Icon = ({ name, ...props }: IconComponentProps) => {
+  const Component = resolveIcon(name);
+
+  if (!Component) {
+    if ((typeof __DEV__ === 'undefined' || __DEV__) && !warned.has(name)) {
+      warned.add(name);
+      console.warn(
+        `[rn-core-ui] <Icon name="${name}"> is not in the icon manifest and was not registered with registerIcons(); rendering nothing.`,
+      );
+    }
+    return null;
+  }
+
+  return <Component {...props} />;
+};
+
+Icon.displayName = 'Icon';
+
+export default Icon;

package/src/icons/createIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { useTheme } from '../theme/useTheme';
+import type { IconComponent, IconProps, RawIconProps } from './types';
+
+export const DEFAULT_STROKE_WIDTH = 2;
+
+/**
+ * Wraps a raw SVG component (generated by tools/icons/build.mjs or written by an
+ * app) so that size, colour and stroke width fall back to the active theme and
+ * the icon is announced to screen readers only when it has a label.
+ */
+export function createIcon(
+  name: string,
+  Raw: React.ComponentType<RawIconProps>,
+): IconComponent {
+  const IconComponentImpl = ({
+    size,
+    color,
+    strokeWidth = DEFAULT_STROKE_WIDTH,
+    accessibilityLabel,
+    ...rest
+  }: IconProps) => {
+    const theme = useTheme();
+
+    return (
+      <Raw
+        size={size ?? theme.size.icon.md}
+        color={color ?? theme.color.text.primary}
+        strokeWidth={strokeWidth}
+        accessible={accessibilityLabel !== undefined}
+        accessibilityRole={accessibilityLabel !== undefined ? 'image' : undefined}
+        accessibilityLabel={accessibilityLabel}
+        {...rest}
+      />
+    );
+  };
+  IconComponentImpl.displayName = `Icon(${name})`;
+
+  return Object.assign(IconComponentImpl, { iconName: name });
+}