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

package/src/Images/ImageView/components/ImageItem/ImageItem.android.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  NativeMethodsMixin,
+} from 'react-native';
+
+import useImageDimensions from '../../../../hooks/ImageView/useImageDimensions';
+import usePanResponder from '../../../../hooks/ImageView/usePanResponder';
+import { getImageStyles, getImageTransform } from '../../../../utils/ImageView';
+import { ImageSource } from '../../types';
+import { ImageLoading } from './ImageLoading';
+import {
+  windowHeight as height,
+  windowWidth as width,
+} from '../../../../utils/ImageView/window';
+
+const SWIPE_CLOSE_OFFSET = 75;
+const SWIPE_CLOSE_VELOCITY = 1.75;
+
+type Props = {
+  imageSrc: ImageSource;
+  onRequestClose: () => void;
+  onZoom: (isZoomed: boolean) => void;
+  onLongPress: (image: ImageSource) => void;
+  delayLongPress: number;
+  swipeToCloseEnabled?: boolean;
+  doubleTapToZoomEnabled?: boolean;
+};
+
+const ImageItem = ({
+  imageSrc,
+  onZoom,
+  onRequestClose,
+  onLongPress,
+  delayLongPress,
+  swipeToCloseEnabled = true,
+  doubleTapToZoomEnabled = true,
+}: Props) => {
+  const imageContainer = React.useRef<ScrollView & NativeMethodsMixin>(null);
+  const imageDimensions = useImageDimensions(imageSrc);
+  const [translate, scale] = getImageTransform(imageDimensions);
+  const scrollValueY = new Animated.Value(0);
+  const [isLoaded, setLoadEnd] = React.useState(false);
+
+  const onLoaded = React.useCallback(() => setLoadEnd(true), []);
+  const onZoomPerformed = React.useCallback(
+    (isZoomed: boolean) => {
+      onZoom(isZoomed);
+      if (imageContainer?.current) {
+        imageContainer.current.setNativeProps({
+          scrollEnabled: !isZoomed,
+        });
+      }
+    },
+    [imageContainer],
+  );
+
+  const onLongPressHandler = React.useCallback(() => {
+    onLongPress(imageSrc);
+  }, [imageSrc, onLongPress]);
+
+  const [panHandlers, scaleValue, translateValue] = usePanResponder({
+    initialScale: scale || 1,
+    initialTranslate: translate || { x: 0, y: 0 },
+    onZoom: onZoomPerformed,
+    doubleTapToZoomEnabled,
+    onLongPress: onLongPressHandler,
+    delayLongPress,
+  });
+
+  const imagesStyles = getImageStyles(
+    imageDimensions,
+    translateValue,
+    scaleValue,
+  );
+  const imageOpacity = scrollValueY.interpolate({
+    inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+    outputRange: [0.7, 1, 0.7],
+  });
+  const imageStylesWithOpacity = { ...imagesStyles, opacity: imageOpacity };
+
+  const onScrollEndDrag = ({
+    nativeEvent,
+  }: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const velocityY = nativeEvent?.velocity?.y ?? 0;
+    const offsetY = nativeEvent?.contentOffset?.y ?? 0;
+
+    if (
+      (Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY &&
+        offsetY > SWIPE_CLOSE_OFFSET) ||
+      offsetY > height / 2
+    ) {
+      onRequestClose();
+    }
+  };
+
+  const onScroll = ({
+    nativeEvent,
+  }: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const offsetY = nativeEvent?.contentOffset?.y ?? 0;
+
+    scrollValueY.setValue(offsetY);
+  };
+
+  return (
+    <ScrollView
+      ref={imageContainer}
+      style={styles.listItem}
+      pagingEnabled
+      nestedScrollEnabled
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      contentContainerStyle={styles.imageScrollContainer}
+      scrollEnabled={swipeToCloseEnabled}
+      {...(swipeToCloseEnabled && {
+        onScroll,
+        onScrollEndDrag,
+      })}>
+      <Animated.Image
+        {...panHandlers}
+        source={imageSrc}
+        style={imageStylesWithOpacity}
+        onLoad={onLoaded}
+      />
+      {(!isLoaded || !imageDimensions) && <ImageLoading />}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  listItem: {
+    width: width,
+    height: height,
+  },
+  imageScrollContainer: {
+    height: height * 2,
+  },
+});
+
+export default React.memo(ImageItem);

package/src/Images/ImageView/components/ImageItem/ImageItem.ios.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import {
+  Animated,
+  ScrollView,
+  StyleSheet,
+  View,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+import useDoubleTapToZoom from '../../../../hooks/ImageView/useDoubleTapToZoom';
+import useImageDimensions from '../../../../hooks/ImageView/useImageDimensions';
+import { getImageStyles, getImageTransform } from '../../../../utils/ImageView';
+import { ImageSource } from '../../types';
+import { ImageLoading } from './ImageLoading';
+import {
+  windowHeight as height,
+  windowWidth as width,
+} from '../../../../utils/ImageView/window';
+
+const SWIPE_CLOSE_OFFSET = 75;
+const SWIPE_CLOSE_VELOCITY = 1.55;
+
+type Props = {
+  imageSrc: ImageSource;
+  onRequestClose: () => void;
+  onZoom: (scaled: boolean) => void;
+  onLongPress: (image: ImageSource) => void;
+  delayLongPress: number;
+  swipeToCloseEnabled?: boolean;
+  doubleTapToZoomEnabled?: boolean;
+};
+
+const ImageItem = ({
+  imageSrc,
+  onZoom,
+  onRequestClose,
+  onLongPress,
+  delayLongPress,
+  swipeToCloseEnabled = true,
+  doubleTapToZoomEnabled = true,
+}: Props) => {
+  const scrollViewRef = React.useRef<ScrollView>(null);
+  const [loaded, setLoaded] = React.useState(false);
+  const [scaled, setScaled] = React.useState(false);
+  const imageDimensions = useImageDimensions(imageSrc);
+  const handleDoubleTap = useDoubleTapToZoom(scrollViewRef, scaled);
+
+  const [translate, scale] = getImageTransform(imageDimensions);
+  const scrollValueY = new Animated.Value(0);
+  const scaleValue = new Animated.Value(scale || 1);
+  const translateValue = new Animated.ValueXY(translate);
+  const maxScale = scale && scale > 0 ? Math.max(1 / scale, 1) : 1;
+
+  const imageOpacity = scrollValueY.interpolate({
+    inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+    outputRange: [0.5, 1, 0.5],
+  });
+  const imagesStyles = getImageStyles(
+    imageDimensions,
+    translateValue,
+    scaleValue,
+  );
+  const imageStylesWithOpacity = { ...imagesStyles, opacity: imageOpacity };
+
+  const onScrollEndDrag = React.useCallback(
+    ({ nativeEvent }: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const velocityY = nativeEvent?.velocity?.y ?? 0;
+      const scaled = nativeEvent?.zoomScale > 1;
+
+      onZoom(scaled);
+      setScaled(scaled);
+
+      if (
+        !scaled &&
+        swipeToCloseEnabled &&
+        Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY
+      ) {
+        onRequestClose();
+      }
+    },
+    [scaled],
+  );
+
+  const onScroll = ({
+    nativeEvent,
+  }: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const offsetY = nativeEvent?.contentOffset?.y ?? 0;
+
+    if (nativeEvent?.zoomScale > 1) {
+      return;
+    }
+
+    scrollValueY.setValue(offsetY);
+  };
+
+  const onLongPressHandler = React.useCallback(() => {
+    onLongPress(imageSrc);
+  }, [imageSrc, onLongPress]);
+
+  return (
+    <View>
+      <ScrollView
+        ref={scrollViewRef}
+        style={styles.listItem}
+        pinchGestureEnabled
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        maximumZoomScale={maxScale}
+        contentContainerStyle={styles.imageScrollContainer}
+        scrollEnabled={swipeToCloseEnabled}
+        onScrollEndDrag={onScrollEndDrag}
+        scrollEventThrottle={1}
+        {...(swipeToCloseEnabled && {
+          onScroll,
+        })}>
+        {(!loaded || !imageDimensions) && <ImageLoading />}
+        <TouchableWithoutFeedback
+          onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined}
+          onLongPress={onLongPressHandler}
+          delayLongPress={delayLongPress}>
+          <Animated.Image
+            source={imageSrc}
+            style={imageStylesWithOpacity}
+            onLoad={() => setLoaded(true)}
+          />
+        </TouchableWithoutFeedback>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  listItem: {
+    width: width,
+    height: height,
+  },
+  imageScrollContainer: {
+    height: height,
+  },
+});
+
+export default React.memo(ImageItem);

package/src/Images/ImageView/components/ImageItem/ImageItem.tsx

@@ -0,0 +1 @@
+export { default } from './ImageItem.web';

package/src/Images/ImageView/components/ImageItem/ImageItem.web.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+
+import { ImageSource } from '../../types';
+import useImageDimensions from '../../../../hooks/ImageView/useImageDimensions';
+import { ImageLoading } from './ImageLoading';
+
+type Props = {
+  imageSrc: ImageSource;
+  onRequestClose: () => void;
+  onZoom?: (isZoomed: boolean) => void;
+  onLongPress: (image: ImageSource) => void;
+  delayLongPress: number;
+  swipeToCloseEnabled?: boolean;
+  doubleTapToZoomEnabled?: boolean;
+};
+
+const ZOOM_SCALE = 2;
+
+const ImageItem = ({
+  imageSrc,
+  onZoom,
+  onLongPress,
+  delayLongPress,
+  doubleTapToZoomEnabled = true,
+}: Props) => {
+  const imageDimensions = useImageDimensions(imageSrc);
+  const [loaded, setLoaded] = React.useState(false);
+  const [zoomed, setZoomed] = React.useState(false);
+  //@ts-ignore
+  const longPressTimeout = React.useRef<NodeJS.Timeout | null>(null);
+
+  const [offsets, setOffsets] = React.useState({ x: 0, y: 0 });
+
+  const handleMouseDown = () => {
+    longPressTimeout.current = setTimeout(() => {
+      onLongPress(imageSrc);
+    }, delayLongPress);
+  };
+
+  const handleMouseUp = () => {
+    if (longPressTimeout.current) {
+      clearTimeout(longPressTimeout.current);
+    }
+  };
+
+  const onDoubleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!doubleTapToZoomEnabled) {
+      return;
+    }
+
+    if (!zoomed) {
+      const { clientWidth, clientHeight } = e.currentTarget;
+
+      const clickX = e.clientX;
+      const clickY = e.clientY;
+
+      const targetX = (clientWidth / 2 - clickX) * (ZOOM_SCALE - 1);
+      const targetY = (clientHeight / 2 - clickY) * (ZOOM_SCALE - 1);
+
+      setOffsets({ x: targetX, y: targetY });
+      setZoomed(true);
+      onZoom && onZoom(true);
+    } else {
+      setOffsets({ x: 0, y: 0 });
+      setZoomed(false);
+      onZoom && onZoom(false);
+    }
+  };
+
+  if (!imageDimensions) {
+    return <ImageLoading />;
+  }
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        zIndex: 10,
+        overflow: 'hidden',
+      }}>
+      <div
+        onDoubleClick={onDoubleClick}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          height: '100%',
+          pointerEvents: 'auto',
+          cursor: zoomed ? 'zoom-out' : 'zoom-in',
+        }}>
+        <img
+          src={typeof imageSrc === 'number' ? '' : imageSrc.uri}
+          draggable={false}
+          style={{
+            maxWidth: '100%',
+            maxHeight: '100%',
+            width: 'auto',
+            height: 'auto',
+            objectFit: 'contain',
+            userSelect: 'none',
+            transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+            transform: zoomed
+              ? `translate(${offsets.x}px, ${offsets.y}px) scale(${ZOOM_SCALE})`
+              : 'none',
+          }}
+          onLoad={() => setLoaded(true)}
+        />
+      </div>
+      {!loaded && <ImageLoading />}
+    </div>
+  );
+};
+
+export default React.memo(ImageItem);

package/src/Images/ImageView/components/ImageItem/ImageLoading.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+import {
+  windowHeight as height,
+  windowWidth as width,
+} from '../../../../utils/ImageView/window';
+
+export const ImageLoading = () => (
+  <View style={styles.loading}>
+    <ActivityIndicator size="small" color="#ffffff" />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  listItem: {
+    width: width,
+    height: height,
+  },
+  loading: {
+    width: width,
+    height: height,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  imageScrollContainer: {
+    height: height,
+  },
+});

package/src/Images/ImageView/components/StatusBarManager.tsx

@@ -0,0 +1,24 @@
+import { IOS } from '../../../utils/getOS';
+import React from 'react';
+import { ModalProps, StatusBar } from 'react-native';
+
+const StatusBarManager = ({
+  presentationStyle,
+}: {
+  presentationStyle?: ModalProps['presentationStyle'];
+}) => {
+  // RN cannot read the current status bar state; assume it is visible when the modal is overFullScreen.
+  const shouldHide = !IOS && presentationStyle === 'overFullScreen';
+
+  React.useEffect(() => {
+    if (!shouldHide) {
+      return undefined;
+    }
+    StatusBar.setHidden(true);
+    return () => StatusBar.setHidden(false);
+  }, [shouldHide]);
+
+  return null;
+};
+
+export default StatusBarManager;

package/src/Images/ImageView/index.ts

@@ -0,0 +1,5 @@
+// Entry point for "@estuary-solutions/rn-core-ui/image-view" (ADR-0004).
+export { default } from './ImageView';
+export { default as ImageView } from './ImageView';
+export type { ImageViewProps } from './ImageView';
+export type { ImageSource } from './types';

package/src/Images/ImageView/types/extensions.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+declare module 'react-native' {
+  class VirtualizedList<ItemT> extends React.Component<
+    VirtualizedListProps<ItemT>
+  > {}
+}

package/src/Images/ImageView/types/index.ts

@@ -0,0 +1,13 @@
+import { ImageURISource, ImageRequireSource } from 'react-native';
+
+export type Dimensions = {
+  width: number;
+  height: number;
+};
+
+export type Position = {
+  x: number;
+  y: number;
+};
+
+export type ImageSource = ImageURISource | ImageRequireSource;

package/src/Tables/Cell.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { useTheme } from '../theme/useTheme';
+import { CellProps } from './types/TableTypes';
+
+const Cell: React.FC<CellProps> = ({
+  data,
+  width,
+  height,
+  flex,
+  style,
+  textStyle,
+  borderStyle,
+  ...props
+}) => {
+  const textDom = React.isValidElement(data) ? (
+    data
+  ) : (
+    <Text style={[styles.text, textStyle]} {...props}>
+      {data}
+    </Text>
+  );
+
+  const theme = useTheme();
+  const borderTopWidth = borderStyle?.borderWidth ?? 0;
+  const borderRightWidth = borderTopWidth;
+  const borderColor = borderStyle?.borderColor ?? theme.color.border.strong;
+
+  return (
+    <View
+      style={[
+        {
+          borderTopWidth,
+          borderRightWidth,
+          borderColor,
+        },
+        styles.cell,
+        !!width && { width },
+        !!height && { height },
+        !!flex && { flex },
+        !width && !flex && !height && !style && { flex: 1 },
+        style,
+      ]}>
+      {textDom}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cell: {
+    justifyContent: 'center',
+  },
+  text: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default Cell;

package/src/Tables/Col.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import Cell from './Cell';
+import { ColProps } from './types/TableTypes';
+
+const Col: React.FC<ColProps> = ({
+  data,
+  style,
+  width,
+  heightArr,
+  flex,
+  textStyle,
+  ...props
+}) => {
+  if (!data) {
+    return null;
+  }
+
+  const containerStyle: ViewStyle = {
+    ...(width !== undefined && { width }),
+    ...(flex !== undefined && { flex }),
+  };
+
+  return (
+    <View style={[containerStyle, style]}>
+      {data.map((item, i) => {
+        const height = heightArr?.[i];
+        return (
+          <Cell
+            key={i}
+            data={item}
+            width={width}
+            height={height}
+            textStyle={textStyle}
+            {...props}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default Col;

package/src/Tables/Cols.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { sum } from '../utils';
+import { ColsProps } from './types/TableTypes';
+import Col from './Col';
+
+const Cols: React.FC<ColsProps> = ({
+  data,
+  style,
+  widthArr,
+  heightArr,
+  flexArr,
+  textStyle,
+  ...props
+}) => {
+  if (!data) {
+    return null;
+  }
+
+  const width = widthArr ? sum(widthArr) : undefined;
+
+  return (
+    <View style={[styles.cols, width !== undefined ? { width } : undefined]}>
+      {data.map((item, i) => {
+        const flex = flexArr?.[i];
+        const wth = widthArr?.[i];
+
+        return (
+          <Col
+            key={i}
+            data={item}
+            width={wth}
+            heightArr={heightArr}
+            flex={flex}
+            style={style}
+            textStyle={textStyle}
+            {...props}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cols: {
+    flexDirection: 'row',
+  },
+});
+
+export default Cols;