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

package/src/DraggableFlatList/RowItem.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { typedMemo } from '../utils/DraggableFlatList/typedMemo';
+import { RenderItem } from '../constants/DraggableFlatList/types';
+import { useStableCallback } from '../hooks/DraggableFlatList/useStableCallback';
+import { useRefs } from '../context/DraggableFlatList/refContext';
+import { useDraggableFlatListContext } from '../context/DraggableFlatList/draggableFlatListContext';
+
+type Props<T> = {
+  extraData?: any;
+  drag: (itemKey: string) => void;
+  item: T;
+  renderItem: RenderItem<T>;
+  itemKey: string;
+  debug?: boolean;
+};
+
+function RowItem<T>(props: Props<T>) {
+  const propsRef = React.useRef(props);
+  propsRef.current = props;
+
+  const { activeKey } = useDraggableFlatListContext();
+  const activeKeyRef = React.useRef(activeKey);
+  activeKeyRef.current = activeKey;
+  const { keyToIndexRef } = useRefs();
+
+  const drag = useStableCallback(() => {
+    const { drag, itemKey, debug } = propsRef.current;
+    if (activeKeyRef.current) {
+      // already dragging an item, noop
+      if (debug) {
+        console.log(
+          '## attempt to drag item while another item is already active, noop',
+        );
+      }
+    }
+    drag(itemKey);
+  });
+
+  const { renderItem, item, itemKey, extraData } = props;
+
+  const getIndex = useStableCallback(() => {
+    return keyToIndexRef.current.get(itemKey);
+  });
+
+  return (
+    <MemoizedInner
+      isActive={activeKey === itemKey}
+      drag={drag}
+      renderItem={renderItem}
+      item={item}
+      getIndex={getIndex}
+      extraData={extraData}
+    />
+  );
+}
+
+type InnerProps<T> = {
+  isActive: boolean;
+  item: T;
+  getIndex: () => number | undefined;
+  drag: () => void;
+  renderItem: RenderItem<T>;
+  extraData?: any;
+};
+
+function Inner<T>({
+  renderItem,
+  extraData: _extraData,
+  ...rest
+}: InnerProps<T>) {
+  return renderItem({ ...rest }) as JSX.Element;
+}
+
+const MemoizedInner = typedMemo(Inner);
+
+export default typedMemo(RowItem);

package/src/DraggableFlatList/ScrollOffsetListener.tsx

@@ -0,0 +1,33 @@
+import {
+  runOnJS,
+  useAnimatedReaction,
+  SharedValue,
+} from 'react-native-reanimated';
+
+import { typedMemo } from '../utils/DraggableFlatList/typedMemo';
+
+type Props = {
+  scrollOffset: SharedValue<number>;
+  onScrollOffsetChange: (offset: number) => void;
+};
+
+const ScrollOffsetListener = ({
+  scrollOffset,
+  onScrollOffsetChange,
+}: Props) => {
+  useAnimatedReaction(
+    () => {
+      return scrollOffset.value;
+    },
+    (cur, prev) => {
+      if (cur !== prev) {
+        runOnJS(onScrollOffsetChange)(cur);
+      }
+    },
+    [scrollOffset],
+  );
+
+  return null;
+};
+
+export default typedMemo(ScrollOffsetListener);

package/src/DraggableFlatList/index.ts

@@ -0,0 +1,13 @@
+// Entry point for "@estuary-solutions/rn-core-ui/draggable-flat-list".
+// Kept out of the root barrel so apps that never use it do not need
+// react-native-reanimated and react-native-gesture-handler (ADR-0004).
+export { default } from './DraggableFlatList';
+export { default as DraggableFlatList } from './DraggableFlatList';
+export {
+  OpacityDecorator,
+  ScaleDecorator,
+  ShadowDecorator,
+} from './CellDecorators';
+export { NestableDraggableFlatList } from './NestableDraggableFlatList';
+export { NestableScrollContainer } from './NestableScrollContainer';
+export type * from '../constants/DraggableFlatList/types';

package/src/Flex/Flex.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import { FlexProps } from './Flex.types';
+
+const Flex = React.forwardRef<View, FlexProps>(
+  (
+    {
+      align,
+      children,
+      flex = 0,
+      gap = 0,
+      justify = 'flex-start',
+      style,
+      vertical = false,
+      wrap = false,
+      ...rest
+    },
+    ref,
+  ) => {
+    const containerStyle: ViewStyle = {
+      alignItems: align,
+      flex,
+      flexDirection: vertical ? 'column' : 'row',
+      flexWrap: wrap ? 'wrap' : 'nowrap',
+      gap,
+      justifyContent: justify,
+    };
+
+    return (
+      <View ref={ref} style={[containerStyle, style]} {...rest}>
+        {children}
+      </View>
+    );
+  },
+);
+
+Flex.displayName = 'Flex';
+
+export default Flex;

package/src/Flex/Flex.types.ts

@@ -0,0 +1,10 @@
+import { FlexStyle, ViewProps } from 'react-native';
+
+export type FlexProps = ViewProps & {
+  align?: FlexStyle['alignItems'];
+  flex?: FlexStyle['flex'];
+  gap?: number;
+  justify?: FlexStyle['justifyContent'];
+  vertical?: boolean;
+  wrap?: boolean;
+};

package/src/Flex/index.ts

@@ -0,0 +1,5 @@
+import Flex from './Flex';
+
+export default Flex;
+
+export * from './Flex.types';

package/src/Images/ImageView/ImageView.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import {
+  Animated,
+  StyleSheet,
+  View,
+  VirtualizedList,
+  ModalProps,
+  Modal,
+} from 'react-native';
+
+import ImageItem from './components/ImageItem/ImageItem';
+import ImageDefaultHeader from './components/ImageDefaultHeader';
+import StatusBarManager from './components/StatusBarManager';
+import useAnimatedComponents from '../../hooks/ImageView/useAnimatedComponents';
+import useImageIndexChange from '../../hooks/ImageView/useImageIndexChange';
+import useRequestClose from '../../hooks/ImageView/useRequestClose';
+import { ImageSource } from './types';
+import { windowWidth as width } from '../../utils/ImageView/window';
+
+export type ImageViewProps = {
+  images: ImageSource[];
+  keyExtractor?: (imageSrc: ImageSource, index: number) => string;
+  imageIndex: number;
+  visible: boolean;
+  onRequestClose: () => void;
+  onLongPress?: (image: ImageSource) => void;
+  onImageIndexChange?: (imageIndex: number) => void;
+  presentationStyle?: ModalProps['presentationStyle'];
+  animationType?: ModalProps['animationType'];
+  backgroundColor?: string;
+  swipeToCloseEnabled?: boolean;
+  doubleTapToZoomEnabled?: boolean;
+  delayLongPress?: number;
+  HeaderComponent?: React.ComponentType<{ imageIndex: number }>;
+  FooterComponent?: React.ComponentType<{ imageIndex: number }>;
+};
+
+const DEFAULT_ANIMATION_TYPE = 'fade';
+// The viewer backdrop stays black in both schemes, like every native photo viewer.
+const DEFAULT_BG_COLOR = '#000000';
+const DEFAULT_DELAY_LONG_PRESS = 800;
+
+function ImageView({
+  images,
+  keyExtractor,
+  imageIndex,
+  visible,
+  onRequestClose,
+  onLongPress = () => {},
+  onImageIndexChange,
+  animationType = DEFAULT_ANIMATION_TYPE,
+  backgroundColor = DEFAULT_BG_COLOR,
+  presentationStyle,
+  swipeToCloseEnabled,
+  doubleTapToZoomEnabled,
+  delayLongPress = DEFAULT_DELAY_LONG_PRESS,
+  HeaderComponent,
+  FooterComponent,
+}: ImageViewProps) {
+  const imageList = React.useRef<VirtualizedList<ImageSource>>(null);
+  const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
+  const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex);
+  const [headerTransform, footerTransform, toggleBarsVisible] =
+    useAnimatedComponents();
+
+  React.useEffect(() => {
+    if (onImageIndexChange) {
+      onImageIndexChange(currentImageIndex);
+    }
+  }, [currentImageIndex]);
+
+  // Fabric has no setNativeProps on composite components; drive scrollEnabled through state instead.
+  const [scrollEnabled, setScrollEnabled] = React.useState(true);
+  const onZoom = React.useCallback(
+    (isScaled: boolean) => {
+      setScrollEnabled(!isScaled);
+      toggleBarsVisible(!isScaled);
+    },
+    [toggleBarsVisible],
+  );
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      transparent={presentationStyle === 'overFullScreen'}
+      visible={visible}
+      presentationStyle={presentationStyle}
+      animationType={animationType}
+      onRequestClose={onRequestCloseEnhanced}
+      supportedOrientations={['portrait']}
+      hardwareAccelerated>
+      <StatusBarManager presentationStyle={presentationStyle} />
+      <View style={[styles.container, { opacity, backgroundColor }]}>
+        <Animated.View style={[styles.header, { transform: headerTransform }]}>
+          {typeof HeaderComponent !== 'undefined' ? (
+            React.createElement(HeaderComponent, {
+              imageIndex: currentImageIndex,
+            })
+          ) : (
+            <ImageDefaultHeader onRequestClose={onRequestCloseEnhanced} />
+          )}
+        </Animated.View>
+        <VirtualizedList
+          ref={imageList}
+          data={images}
+          horizontal
+          pagingEnabled
+          scrollEnabled={scrollEnabled}
+          windowSize={2}
+          initialNumToRender={1}
+          maxToRenderPerBatch={1}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          initialScrollIndex={imageIndex}
+          getItem={(_: unknown, index: number) => images[index]}
+          getItemCount={() => images.length}
+          getItemLayout={(_: unknown, index: number) => ({
+            length: width,
+            offset: width * index,
+            index,
+          })}
+          renderItem={({ item: imageSrc }: { item: ImageSource }) => (
+            <ImageItem
+              onZoom={onZoom}
+              imageSrc={imageSrc}
+              onRequestClose={onRequestCloseEnhanced}
+              onLongPress={onLongPress}
+              delayLongPress={delayLongPress}
+              swipeToCloseEnabled={swipeToCloseEnabled}
+              doubleTapToZoomEnabled={doubleTapToZoomEnabled}
+            />
+          )}
+          onMomentumScrollEnd={onScroll}
+          keyExtractor={(imageSrc: ImageSource, index: number) =>
+            keyExtractor
+              ? keyExtractor(imageSrc, index)
+              : typeof imageSrc === 'number'
+              ? `${imageSrc}`
+              : imageSrc.uri
+          }
+        />
+        {typeof FooterComponent !== 'undefined' && (
+          <Animated.View
+            style={[styles.footer, { transform: footerTransform }]}>
+            {React.createElement(FooterComponent, {
+              imageIndex: currentImageIndex,
+            })}
+          </Animated.View>
+        )}
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  header: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 1,
+    top: 0,
+  },
+  footer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 1,
+    bottom: 0,
+  },
+});
+
+const EnhancedImageViewing = (props: ImageViewProps) => (
+  <ImageView key={props.imageIndex} {...props} />
+);
+
+export default EnhancedImageViewing;

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

@@ -0,0 +1,217 @@
+import React from 'react';
+
+import { ImageSource } from './types';
+import ImageItem from './components/ImageItem/ImageItem';
+import ImageDefaultHeader from './components/ImageDefaultHeader';
+
+const SWIPE_X_THRESHOLD = 80;
+const SWIPE_Y_CLOSE_THRESHOLD = 140;
+
+type Props = {
+  images: ImageSource[];
+  imageIndex: number;
+  visible: boolean;
+  onRequestClose: () => void;
+  onImageIndexChange?: (index: number) => void;
+  onLongPress?: (image: ImageSource) => void;
+  swipeToCloseEnabled?: boolean;
+  doubleTapToZoomEnabled?: boolean;
+  delayLongPress?: number;
+  backgroundColor?: string;
+  HeaderComponent?: React.ComponentType<{ imageIndex: number }>;
+  FooterComponent?: React.ComponentType<{ imageIndex: number }>;
+};
+
+const ImageView = ({
+  images,
+  imageIndex,
+  visible,
+  onRequestClose,
+  onImageIndexChange,
+  onLongPress = () => {},
+  swipeToCloseEnabled = true,
+  doubleTapToZoomEnabled = true,
+  delayLongPress = 800,
+  backgroundColor = '#000',
+  HeaderComponent,
+  FooterComponent,
+}: Props) => {
+  const [currentIndex, setCurrentIndex] = React.useState(imageIndex);
+  const [dragX, setDragX] = React.useState(0);
+  const [dragY, setDragY] = React.useState(0);
+  const [dragStart, setDragStart] = React.useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragXRef = React.useRef(0);
+  const dragYRef = React.useRef(0);
+
+  /** ---------------- Drag start ---------------- */
+  const onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.button !== 0) {
+      return;
+    }
+
+    setDragStart({ x: e.clientX, y: e.clientY });
+    setIsDragging(true);
+  };
+
+  React.useEffect(() => {
+    setCurrentIndex(imageIndex);
+  }, [imageIndex]);
+
+  React.useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      //@ts-ignore
+      const dx = e.clientX - dragStart?.x || 0;
+      //@ts-ignore
+      const dy = e.clientY - dragStart?.y || 0;
+
+      if (Math.abs(dy) > Math.abs(dx) && swipeToCloseEnabled) {
+        setDragY(dy);
+        setDragX(0);
+      } else {
+        setDragX(dx);
+        setDragY(0);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      const currentDragX = dragXRef.current;
+      const currentDragY = dragYRef.current;
+
+      if (
+        swipeToCloseEnabled &&
+        Math.abs(currentDragY) > SWIPE_Y_CLOSE_THRESHOLD
+      ) {
+        onRequestClose();
+      } else if (Math.abs(currentDragX) > SWIPE_X_THRESHOLD) {
+        let nextIndex = currentIndex;
+
+        if (
+          currentDragX < -SWIPE_X_THRESHOLD &&
+          currentIndex < images.length - 1
+        ) {
+          nextIndex = currentIndex + 1;
+        } else if (currentDragX > SWIPE_X_THRESHOLD && currentIndex > 0) {
+          nextIndex = currentIndex - 1;
+        }
+
+        if (nextIndex !== currentIndex) {
+          setCurrentIndex(nextIndex);
+          onImageIndexChange?.(nextIndex);
+        }
+      }
+
+      setDragX(0);
+      setDragY(0);
+      setDragStart(null);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, dragStart, currentIndex, images.length]);
+
+  React.useEffect(() => {
+    dragXRef.current = dragX;
+    dragYRef.current = dragY;
+  }, [dragX, dragY]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      onMouseDown={onMouseDown}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        backgroundColor,
+        overflow: 'hidden',
+        cursor: 'grab',
+        userSelect: 'none',
+        zIndex: 9999,
+        display: 'flex',
+        flexDirection: 'column',
+      }}>
+      <div
+        style={{
+          width: '100vw',
+          zIndex: 20,
+        }}>
+        {typeof HeaderComponent !== 'undefined' ? (
+          React.createElement(HeaderComponent, {
+            imageIndex: currentIndex,
+          })
+        ) : (
+          <ImageDefaultHeader onRequestClose={onRequestClose} />
+        )}
+      </div>
+
+      {/* Horizontal slider */}
+      <div
+        onMouseDown={onMouseDown}
+        style={{
+          flex: 1,
+          display: 'flex',
+          width: '100%',
+          minHeight: 0,
+          transform: `translate3d(calc(${
+            -currentIndex * 100
+          }vw + ${dragX}px), ${dragY}px, 0)`,
+          transition: isDragging
+            ? 'none'
+            : 'transform 0.3s cubic-bezier(0.15, 0, 0.15, 1)',
+          cursor: isDragging ? 'grabbing' : 'grab',
+        }}>
+        {images.map((image, index) => (
+          <div
+            key={index}
+            style={{
+              width: '100vw',
+              height: '100%',
+              flexShrink: 0,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}>
+            <ImageItem
+              imageSrc={image}
+              onRequestClose={onRequestClose}
+              onLongPress={onLongPress}
+              delayLongPress={delayLongPress}
+              swipeToCloseEnabled={swipeToCloseEnabled}
+              doubleTapToZoomEnabled={doubleTapToZoomEnabled}
+            />
+          </div>
+        ))}
+      </div>
+
+      {typeof FooterComponent !== 'undefined' && (
+        <div
+          style={{
+            width: '100vw',
+            zIndex: 20,
+            pointerEvents: 'auto',
+          }}>
+          {React.createElement(FooterComponent, {
+            imageIndex: currentIndex,
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageView;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { SafeAreaView, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+type Props = {
+  onRequestClose: () => void;
+};
+
+const HIT_SLOP = { top: 16, left: 16, bottom: 16, right: 16 };
+
+const ImageDefaultHeader = ({ onRequestClose }: Props) => (
+  <SafeAreaView style={styles.root}>
+    <TouchableOpacity
+      style={styles.closeButton}
+      onPress={onRequestClose}
+      hitSlop={HIT_SLOP}>
+      <Text style={styles.closeText}>✕</Text>
+    </TouchableOpacity>
+  </SafeAreaView>
+);
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'flex-end',
+  },
+  closeButton: {
+    marginRight: 8,
+    marginTop: 8,
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 22,
+    backgroundColor: '#00000077',
+  },
+  closeText: {
+    lineHeight: 22,
+    fontSize: 19,
+    textAlign: 'center',
+    color: '#ffffff', // always on the black backdrop
+    includeFontPadding: false,
+  },
+});
+
+export default ImageDefaultHeader;