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

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

@@ -0,0 +1,382 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _popup = _interopRequireDefault(require("../popup"));
+var _swiper = _interopRequireDefault(require("../swiper"));
+var _tokens = require("./tokens");
+var _validate = require("../../utils/validate");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+const clampIndex = (index, total) => total <= 0 ? 0 : Math.max(0, Math.min(total - 1, index));
+const IS_WEB = _reactNative().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().default.memo(props => {
+  const {
+    source,
+    rendered,
+    pressableHandlers
+  } = props;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+    style: styles.slidePressable
+  }, pressableHandlers), rendered ? /*#__PURE__*/_react().default.createElement(_reactNative().Image, {
+    source: source,
+    resizeMode: "contain",
+    style: styles.image
+  }) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.imagePlaceholder
+  }));
+}, (prev, next) => prev.source === next.source && prev.rendered === next.rendered && prev.pressableHandlers === next.pressableHandlers);
+const ImagePreview = /*#__PURE__*/_react().default.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
+  } = (0, _tokens.useImagePreviewTokens)(tokensOverride);
+  const swiperRef = (0, _react().useRef)(null);
+  const popupCloseReason = (0, _react().useRef)('close');
+  const tapStartRef = (0, _react().useRef)(null);
+  const tapMovedRef = (0, _react().useRef)(false);
+  const imagesLen = images.length;
+  const [active, setActive] = (0, _react().useState)(() => clampIndex(startPosition, imagesLen));
+  const safeActive = clampIndex(active, imagesLen);
+  const latestRef = (0, _react().useRef)({
+    images,
+    index: safeActive,
+    beforeClose,
+    onClose
+  });
+  latestRef.current = {
+    images,
+    index: safeActive,
+    beforeClose,
+    onClose
+  };
+  const resolvedImages = (0, _react().useMemo)(() => images.map(img => (0, _validate.isString)(img) ? {
+    uri: img
+  } : img), [images]);
+  (0, _react().useEffect)(() => {
+    setActive(current => clampIndex(current, imagesLen));
+  }, [imagesLen]);
+  (0, _react().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 = (0, _react().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 = (0, _react().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 = (0, _react().useCallback)(async reason => {
+    const mapped = reason === 'close-icon' ? 'close-icon' : reason === 'overlay' ? 'overlay' : 'close';
+    popupCloseReason.current = mapped;
+    return runBeforeClose(mapped);
+  }, [runBeforeClose]);
+  const handlePopupClose = (0, _react().useCallback)(() => {
+    void emitClose(popupCloseReason.current, true);
+  }, [emitClose]);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    swipeTo: (index, animated = true) => {
+      const next = clampIndex(index, imagesLen);
+      setActive(next);
+      swiperRef.current?.swipeTo(next, animated);
+    }
+  }), [imagesLen]);
+  const handleSwiperChange = (0, _react().useCallback)(idx => {
+    if (safeActive === idx) return;
+    setActive(idx);
+    onChange?.(idx);
+  }, [onChange, safeActive]);
+  const handleImagePress = (0, _react().useCallback)(() => {
+    if (closeOnlyClickCloseIcon) return;
+    void emitClose('content');
+  }, [closeOnlyClickCloseIcon, emitClose]);
+  const resetTap = (0, _react().useCallback)(() => {
+    tapStartRef.current = null;
+    tapMovedRef.current = false;
+  }, []);
+  const markTapStart = (0, _react().useCallback)((x, y) => {
+    tapStartRef.current = {
+      x,
+      y
+    };
+    tapMovedRef.current = false;
+  }, []);
+  const markTapMove = (0, _react().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 = (0, _react().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 = (0, _react().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 = (0, _react().useCallback)((current, total) => {
+    if (!showIndex || total === 0) return null;
+    const indexText = `${current + 1} / ${total}`;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: styles.index,
+      testID: "rv-image-preview-index"
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [styles.indexBadge, {
+        backgroundColor: colors.indexBackground
+      }]
+    }, indexRender ? indexRender({
+      index: current,
+      len: total
+    }) : /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_popup.default, {
+    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().default.createElement(_reactNative().View, {
+    style: [styles.content, {
+      backgroundColor: colors.background
+    }]
+  }, imagesLen === 1 ? renderIndex(0, 1) : null, imagesLen === 0 ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.empty,
+    testID: "rv-image-preview-empty"
+  }) : /*#__PURE__*/_react().default.createElement(_swiper.default, {
+    ref: swiperRef,
+    style: styles.swiper,
+    initialSwipe: clampIndex(startPosition, imagesLen),
+    loop: false,
+    autoplay: false,
+    duration: swipeDuration,
+    touchable: imagesLen > 1,
+    indicator: (total, current) => /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, renderIndex(current, total), showIndicators && total > 1 && /*#__PURE__*/_react().default.createElement(_swiper.default.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().default.createElement(_swiper.default.Item, {
+    key: idx,
+    style: styles.slide,
+    testID: `rv-image-preview-slide-${idx}`
+  }, /*#__PURE__*/_react().default.createElement(SlideContent, {
+    source: source,
+    rendered: !lazyRender || Math.abs(idx - safeActive) <= lazyBuffer,
+    pressableHandlers: pressableHandlers
+  }))))));
+});
+ImagePreview.displayName = 'ImagePreview';
+var _default = exports.default = ImagePreview;
+const styles = _reactNative().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/cjs/image-preview/imperative.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImagePreviewImperative = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _ImagePreview = _interopRequireDefault(require("./ImagePreview"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+const activeKeys = new Set();
+const closers = new Map();
+const removeInstance = key => {
+  _Portal.default.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] = (0, _react().useState)(true);
+  const close = (0, _react().useCallback)(() => {
+    setVisible(false);
+  }, []);
+  (0, _react().useEffect)(() => {
+    closers.set(id, close);
+    return () => {
+      const current = closers.get(id);
+      if (current === close) {
+        closers.delete(id);
+      }
+    };
+  }, [close, id]);
+  const handleClose = (0, _react().useCallback)(params => {
+    options.onClose?.(params);
+    setVisible(false);
+  }, [options]);
+  const handleClosed = (0, _react().useCallback)(() => {
+    options.onClosed?.();
+    removeInstance(id);
+  }, [id, options]);
+  return /*#__PURE__*/_react().default.createElement(_ImagePreview.default, _extends({}, options, {
+    visible: visible,
+    onClose: handleClose,
+    onClosed: handleClosed
+  }));
+};
+const ImagePreviewImperative = exports.ImagePreviewImperative = {
+  open: (options = {}) => {
+    activeKeys.forEach(key => requestClose(key));
+    activeKeys.clear();
+    const key = _Portal.default.add(null);
+    activeKeys.add(key);
+    _Portal.default.update(key, /*#__PURE__*/_react().default.createElement(ImagePreviewPortal, {
+      id: key,
+      options: options
+    }));
+    return () => requestClose(key);
+  },
+  clear: () => {
+    activeKeys.forEach(key => requestClose(key));
+    activeKeys.clear();
+  }
+};

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImagePreview = void 0;
+var _ImagePreview = _interopRequireDefault(require("./ImagePreview"));
+var _portal = require("../portal");
+var _imperative = require("./imperative");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ImagePreviewWithStatics = Object.assign(_ImagePreview.default, {
+  Host: _portal.PortalHost,
+  open: _imperative.ImagePreviewImperative.open,
+  clear: _imperative.ImagePreviewImperative.clear
+});
+const ImagePreview = exports.ImagePreview = ImagePreviewWithStatics;
+var _default = exports.default = ImagePreview;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useImagePreviewTokens = void 0;
+var _designSystem = require("../../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)'
+    }
+  };
+};
+const useImagePreviewTokens = exports.useImagePreviewTokens = (0, _designSystem.createComponentTokensHook)('imagePreview', createTokens);

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const IndexAnchor = props => {
+  const {
+    index,
+    title,
+    children,
+    active,
+    highlightColor,
+    onLayoutCapture,
+    style,
+    onLayout,
+    tokensOverride,
+    ...rest
+  } = props;
+  const {
+    colors,
+    layout
+  } = (0, _tokens.useIndexBarTokens)(tokensOverride);
+  const textColor = active && highlightColor ? highlightColor : colors.anchorText;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
+    onLayout: event => {
+      onLayoutCapture?.(index, event?.nativeEvent?.layout?.y ?? 0);
+      onLayout?.(event);
+    },
+    style: [styles.container, style]
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.header, {
+      height: layout.anchorHeight,
+      backgroundColor: colors.anchorBackground
+    }]
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [styles.title, {
+      color: textColor
+    }]
+  }, title ?? index)), children);
+};
+const styles = _reactNative().StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  header: {
+    justifyContent: 'center',
+    paddingHorizontal: 16
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: '600'
+  }
+});
+IndexAnchor.displayName = 'IndexBar.Anchor';
+var _default = exports.default = IndexAnchor;