react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/image-preview/ImagePreview.js

@@ -0,0 +1,362 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Image as RNImage, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import Popup from '../popup';
+import Swiper from '../swiper';
+import { useImagePreviewTokens } from './tokens';
+import { isString } from '../../utils/validate';
+const clampIndex = (index, total) => total <= 0 ? 0 : Math.max(0, Math.min(total - 1, index));
+const IS_WEB = Platform.OS === 'web';
+const TAP_MOVE_THRESHOLD_PX = 8;
+const TAP_MOVE_THRESHOLD_SQ = TAP_MOVE_THRESHOLD_PX * TAP_MOVE_THRESHOLD_PX;
+const SlideContent = /*#__PURE__*/React.memo(props => {
+  const {
+    source,
+    rendered,
+    pressableHandlers
+  } = props;
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    style: styles.slidePressable
+  }, pressableHandlers), rendered ? /*#__PURE__*/React.createElement(RNImage, {
+    source: source,
+    resizeMode: "contain",
+    style: styles.image
+  }) : /*#__PURE__*/React.createElement(View, {
+    style: styles.imagePlaceholder
+  }));
+}, (prev, next) => prev.source === next.source && prev.rendered === next.rendered && prev.pressableHandlers === next.pressableHandlers);
+const ImagePreview = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    visible,
+    images = [],
+    startPosition = 0,
+    swipeDuration = 300,
+    tokensOverride,
+    lazyRender = false,
+    lazyRenderBuffer = 1,
+    showIndex = true,
+    indexRender,
+    showIndicators = false,
+    closeable = false,
+    closeIcon,
+    closeIconPosition = 'top-right',
+    closeOnlyClickCloseIcon = false,
+    overlay = true,
+    overlayStyle,
+    closeOnBackPress,
+    closeOnPopstate,
+    zIndex,
+    duration,
+    safeAreaInsetTop = true,
+    safeAreaInsetBottom = true,
+    onChange,
+    onClose,
+    onClosed,
+    beforeClose
+  } = props;
+  const {
+    colors
+  } = useImagePreviewTokens(tokensOverride);
+  const swiperRef = useRef(null);
+  const popupCloseReason = useRef('close');
+  const tapStartRef = useRef(null);
+  const tapMovedRef = useRef(false);
+  const imagesLen = images.length;
+  const [active, setActive] = useState(() => clampIndex(startPosition, imagesLen));
+  const safeActive = clampIndex(active, imagesLen);
+  const latestRef = useRef({
+    images,
+    index: safeActive,
+    beforeClose,
+    onClose
+  });
+  latestRef.current = {
+    images,
+    index: safeActive,
+    beforeClose,
+    onClose
+  };
+  const resolvedImages = useMemo(() => images.map(img => isString(img) ? {
+    uri: img
+  } : img), [images]);
+  useEffect(() => {
+    setActive(current => clampIndex(current, imagesLen));
+  }, [imagesLen]);
+  useEffect(() => {
+    if (!visible) return;
+    const next = clampIndex(startPosition, imagesLen);
+    setActive(next);
+    if (typeof requestAnimationFrame !== 'undefined') {
+      const raf = requestAnimationFrame(() => {
+        swiperRef.current?.swipeTo(next, false);
+      });
+      return () => cancelAnimationFrame(raf);
+    }
+  }, [imagesLen, startPosition, visible]);
+  const runBeforeClose = useCallback(async reason => {
+    const {
+      beforeClose: currentBeforeClose,
+      images: currentImages,
+      index
+    } = latestRef.current;
+    if (!currentBeforeClose) return true;
+    const result = await currentBeforeClose({
+      reason,
+      index,
+      image: currentImages[index]
+    });
+    return result !== false;
+  }, []);
+  const emitClose = useCallback(async (reason, bypassCheck = false) => {
+    const {
+      onClose: currentOnClose,
+      images: currentImages,
+      index
+    } = latestRef.current;
+    if (!bypassCheck) {
+      const allow = await runBeforeClose(reason);
+      if (!allow) return;
+    }
+    currentOnClose?.({
+      index,
+      image: currentImages[index]
+    });
+  }, [runBeforeClose]);
+  const handlePopupBeforeClose = useCallback(async reason => {
+    const mapped = reason === 'close-icon' ? 'close-icon' : reason === 'overlay' ? 'overlay' : 'close';
+    popupCloseReason.current = mapped;
+    return runBeforeClose(mapped);
+  }, [runBeforeClose]);
+  const handlePopupClose = useCallback(() => {
+    void emitClose(popupCloseReason.current, true);
+  }, [emitClose]);
+  useImperativeHandle(ref, () => ({
+    swipeTo: (index, animated = true) => {
+      const next = clampIndex(index, imagesLen);
+      setActive(next);
+      swiperRef.current?.swipeTo(next, animated);
+    }
+  }), [imagesLen]);
+  const handleSwiperChange = useCallback(idx => {
+    if (safeActive === idx) return;
+    setActive(idx);
+    onChange?.(idx);
+  }, [onChange, safeActive]);
+  const handleImagePress = useCallback(() => {
+    if (closeOnlyClickCloseIcon) return;
+    void emitClose('content');
+  }, [closeOnlyClickCloseIcon, emitClose]);
+  const resetTap = useCallback(() => {
+    tapStartRef.current = null;
+    tapMovedRef.current = false;
+  }, []);
+  const markTapStart = useCallback((x, y) => {
+    tapStartRef.current = {
+      x,
+      y
+    };
+    tapMovedRef.current = false;
+  }, []);
+  const markTapMove = useCallback((x, y) => {
+    const start = tapStartRef.current;
+    if (!start) return;
+    const dx = x - start.x;
+    const dy = y - start.y;
+    if (dx * dx + dy * dy >= TAP_MOVE_THRESHOLD_SQ) {
+      tapMovedRef.current = true;
+    }
+  }, []);
+  const tryTapEnd = useCallback((x, y) => {
+    const start = tapStartRef.current;
+    const moved = tapMovedRef.current;
+    resetTap();
+    if (!start || moved) return;
+    const dx = x - start.x;
+    const dy = y - start.y;
+    if (dx * dx + dy * dy >= TAP_MOVE_THRESHOLD_SQ) return;
+    handleImagePress();
+  }, [handleImagePress, resetTap]);
+  const pressableHandlers = useMemo(() => {
+    const handlers = {
+      onTouchStart: e => {
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) markTapStart(pageX, pageY);
+      },
+      onTouchMove: e => {
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) markTapMove(pageX, pageY);
+      },
+      onTouchEnd: e => {
+        const {
+          pageX,
+          pageY
+        } = e.nativeEvent;
+        if (pageX != null && pageY != null) tryTapEnd(pageX, pageY);
+      },
+      onTouchCancel: resetTap
+    };
+    if (IS_WEB) {
+      handlers.onMouseDown = e => {
+        const ne = e.nativeEvent;
+        if (ne?.pageX != null && ne?.pageY != null) markTapStart(ne.pageX, ne.pageY);
+      };
+      handlers.onMouseMove = e => {
+        const ne = e.nativeEvent;
+        if (ne?.buttons !== 1) return;
+        if (ne?.pageX != null && ne?.pageY != null) markTapMove(ne.pageX, ne.pageY);
+      };
+      handlers.onMouseUp = e => {
+        const ne = e.nativeEvent;
+        if (ne?.pageX != null && ne?.pageY != null) tryTapEnd(ne.pageX, ne.pageY);
+      };
+    }
+    return handlers;
+  }, [markTapMove, markTapStart, resetTap, tryTapEnd]);
+  const renderIndex = useCallback((current, total) => {
+    if (!showIndex || total === 0) return null;
+    const indexText = `${current + 1} / ${total}`;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.index,
+      testID: "rv-image-preview-index"
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.indexBadge, {
+        backgroundColor: colors.indexBackground
+      }]
+    }, indexRender ? indexRender({
+      index: current,
+      len: total
+    }) : /*#__PURE__*/React.createElement(Text, {
+      style: [styles.indexText, {
+        color: colors.indexText
+      }]
+    }, indexText)));
+  }, [colors.indexBackground, colors.indexText, indexRender, showIndex]);
+  const lazyBuffer = lazyRender ? Math.max(0, lazyRenderBuffer | 0) : 0;
+  return /*#__PURE__*/React.createElement(Popup, {
+    visible: visible,
+    overlay: overlay,
+    overlayStyle: overlayStyle,
+    closeOnOverlayPress: !closeOnlyClickCloseIcon,
+    closeOnBackPress: closeOnBackPress,
+    closeOnPopstate: closeOnPopstate,
+    zIndex: zIndex,
+    duration: duration,
+    closeable: closeable,
+    closeIcon: closeIcon,
+    closeIconPosition: closeIconPosition,
+    stopPropagation: false,
+    round: false,
+    safeAreaInsetTop: safeAreaInsetTop,
+    safeAreaInsetBottom: safeAreaInsetBottom,
+    overlayTestID: "rv-image-preview-overlay",
+    style: styles.popup,
+    beforeClose: handlePopupBeforeClose,
+    onClose: handlePopupClose,
+    onClosed: onClosed
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.content, {
+      backgroundColor: colors.background
+    }]
+  }, imagesLen === 1 ? renderIndex(0, 1) : null, imagesLen === 0 ? /*#__PURE__*/React.createElement(View, {
+    style: styles.empty,
+    testID: "rv-image-preview-empty"
+  }) : /*#__PURE__*/React.createElement(Swiper, {
+    ref: swiperRef,
+    style: styles.swiper,
+    initialSwipe: clampIndex(startPosition, imagesLen),
+    loop: false,
+    autoplay: false,
+    duration: swipeDuration,
+    touchable: imagesLen > 1,
+    indicator: (total, current) => /*#__PURE__*/React.createElement(React.Fragment, null, renderIndex(current, total), showIndicators && total > 1 && /*#__PURE__*/React.createElement(Swiper.PagIndicator, {
+      total: total,
+      current: current,
+      activeColor: colors.indicatorActive,
+      inactiveColor: colors.indicatorInactive,
+      style: {
+        bottom: 32
+      },
+      testID: "rv-image-preview-indicators"
+    })),
+    onChange: handleSwiperChange,
+    testID: "rv-image-preview-swiper"
+  }, resolvedImages.map((source, idx) => /*#__PURE__*/React.createElement(Swiper.Item, {
+    key: idx,
+    style: styles.slide,
+    testID: `rv-image-preview-slide-${idx}`
+  }, /*#__PURE__*/React.createElement(SlideContent, {
+    source: source,
+    rendered: !lazyRender || Math.abs(idx - safeActive) <= lazyBuffer,
+    pressableHandlers: pressableHandlers
+  }))))));
+});
+ImagePreview.displayName = 'ImagePreview';
+export default ImagePreview;
+const styles = StyleSheet.create({
+  popup: {
+    padding: 0,
+    borderRadius: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    backgroundColor: 'transparent'
+  },
+  content: {
+    flex: 1
+  },
+  swiper: {
+    flex: 1
+  },
+  slide: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1
+  },
+  slidePressable: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  imagePlaceholder: {
+    width: '100%',
+    height: '100%'
+  },
+  empty: {
+    flex: 1
+  },
+  index: {
+    position: 'absolute',
+    top: 24,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 1
+  },
+  indexBadge: {
+    borderRadius: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 4
+  },
+  indexText: {
+    fontSize: 14,
+    fontWeight: '500'
+  }
+});

package/dist/es/image-preview/imperative.js

@@ -0,0 +1,67 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useState } from 'react';
+import Portal from '../portal/Portal';
+import ImagePreview from './ImagePreview';
+const activeKeys = new Set();
+const closers = new Map();
+const removeInstance = key => {
+  Portal.remove(key);
+  activeKeys.delete(key);
+  closers.delete(key);
+};
+const requestClose = key => {
+  const close = closers.get(key);
+  if (close) {
+    close();
+    return;
+  }
+  removeInstance(key);
+};
+const ImagePreviewPortal = ({
+  id,
+  options
+}) => {
+  const [visible, setVisible] = useState(true);
+  const close = useCallback(() => {
+    setVisible(false);
+  }, []);
+  useEffect(() => {
+    closers.set(id, close);
+    return () => {
+      const current = closers.get(id);
+      if (current === close) {
+        closers.delete(id);
+      }
+    };
+  }, [close, id]);
+  const handleClose = useCallback(params => {
+    options.onClose?.(params);
+    setVisible(false);
+  }, [options]);
+  const handleClosed = useCallback(() => {
+    options.onClosed?.();
+    removeInstance(id);
+  }, [id, options]);
+  return /*#__PURE__*/React.createElement(ImagePreview, _extends({}, options, {
+    visible: visible,
+    onClose: handleClose,
+    onClosed: handleClosed
+  }));
+};
+export const ImagePreviewImperative = {
+  open: (options = {}) => {
+    activeKeys.forEach(key => requestClose(key));
+    activeKeys.clear();
+    const key = Portal.add(null);
+    activeKeys.add(key);
+    Portal.update(key, /*#__PURE__*/React.createElement(ImagePreviewPortal, {
+      id: key,
+      options: options
+    }));
+    return () => requestClose(key);
+  },
+  clear: () => {
+    activeKeys.forEach(key => requestClose(key));
+    activeKeys.clear();
+  }
+};

package/dist/es/image-preview/index.js

@@ -0,0 +1,11 @@
+import ImagePreviewBase from './ImagePreview';
+import { PortalHost } from '../portal';
+import { ImagePreviewImperative } from './imperative';
+const ImagePreviewWithStatics = Object.assign(ImagePreviewBase, {
+  Host: PortalHost,
+  open: ImagePreviewImperative.open,
+  clear: ImagePreviewImperative.clear
+});
+const ImagePreview = ImagePreviewWithStatics;
+export default ImagePreview;
+export { ImagePreview };

package/dist/es/image-preview/tokens.js

@@ -0,0 +1,16 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette
+  } = foundations;
+  return {
+    colors: {
+      background: 'rgba(0,0,0,0.95)',
+      indexBackground: 'rgba(0,0,0,0.35)',
+      indexText: '#fff',
+      indicatorActive: palette.primary?.[500] ?? '#1989fa',
+      indicatorInactive: 'rgba(255,255,255,0.4)'
+    }
+  };
+};
+export const useImagePreviewTokens = createComponentTokensHook('imagePreview', createTokens);

package/dist/es/index-bar/IndexAnchor.js

@@ -0,0 +1,54 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useIndexBarTokens } from './tokens';
+const IndexAnchor = props => {
+  const {
+    index,
+    title,
+    children,
+    active,
+    highlightColor,
+    onLayoutCapture,
+    style,
+    onLayout,
+    tokensOverride,
+    ...rest
+  } = props;
+  const {
+    colors,
+    layout
+  } = useIndexBarTokens(tokensOverride);
+  const textColor = active && highlightColor ? highlightColor : colors.anchorText;
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    onLayout: event => {
+      onLayoutCapture?.(index, event?.nativeEvent?.layout?.y ?? 0);
+      onLayout?.(event);
+    },
+    style: [styles.container, style]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.header, {
+      height: layout.anchorHeight,
+      backgroundColor: colors.anchorBackground
+    }]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.title, {
+      color: textColor
+    }]
+  }, title ?? index)), children);
+};
+const styles = StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  header: {
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600'
+  }
+});
+IndexAnchor.displayName = 'IndexBar.Anchor';
+export default IndexAnchor;