react-native-system-ui 1.0.2 → 1.0.3

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

@@ -1,388 +1 @@
-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, isText } from '../../utils/validate';
-const clampIndex = (index, total) => total <= 0 ? 0 : Math.max(0, Math.min(total - 1, index));
-const indicatorSpacing = {
-  bottom: 32
-};
-const IS_WEB = Platform.OS === 'web';
-const TOUCH_MOVE_THRESHOLD = 8;
-const TOUCH_MOVE_THRESHOLD_SQUARED = TOUCH_MOVE_THRESHOLD * TOUCH_MOVE_THRESHOLD;
-const ImageSlide = /*#__PURE__*/React.memo(props => {
-  const {
-    source,
-    rendered,
-    pressableHandlers,
-    index,
-    total
-  } = props;
-  return /*#__PURE__*/React.createElement(Pressable, _extends({
-    accessibilityRole: "image",
-    accessibilityLabel: `image ${index + 1} of ${total}`,
-    style: S.slidePressable
-  }, pressableHandlers), rendered ? /*#__PURE__*/React.createElement(RNImage, {
-    source: source,
-    resizeMode: "contain",
-    style: S.image,
-    accessible: true,
-    accessibilityRole: "image"
-  }) : /*#__PURE__*/React.createElement(View, {
-    style: S.imagePlaceholder
-  }));
-}, (prev, next) => prev.source === next.source && prev.rendered === next.rendered && prev.pressableHandlers === next.pressableHandlers && prev.index === next.index && prev.total === next.total);
-const ImagePreviewImpl = (props, ref) => {
-  const {
-    visible,
-    images = [],
-    startPosition = 0,
-    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,
-    layout,
-    radii,
-    typography,
-    spacing
-  } = useImagePreviewTokens(tokensOverride);
-  const swiperRef = useRef(null);
-  const pendingCloseReason = useRef('close');
-  const touchStartRef = useRef(null);
-  const touchMovedRef = useRef(false);
-  const imgLen = images.length;
-  const [activeIndex, setActiveIndex] = useState(() => clampIndex(startPosition, imgLen));
-  const safeIdx = clampIndex(activeIndex, imgLen);
-  const latestRef = useRef({
-    images,
-    index: safeIdx,
-    beforeClose,
-    onClose
-  });
-  latestRef.current = {
-    images,
-    index: safeIdx,
-    beforeClose,
-    onClose
-  };
-  const resolvedImages = useMemo(() => images.map(img => isString(img) ? {
-    uri: img
-  } : img), [images]);
-  useEffect(() => {
-    setActiveIndex(cur => clampIndex(cur, imgLen));
-  }, [imgLen]);
-  useEffect(() => {
-    if (!visible) return;
-    const next = clampIndex(startPosition, imgLen);
-    setActiveIndex(next);
-    if (typeof requestAnimationFrame !== 'undefined') {
-      const raf = requestAnimationFrame(() => {
-        swiperRef.current?.swipeTo(next, false);
-      });
-      return () => cancelAnimationFrame(raf);
-    }
-  }, [imgLen, startPosition, visible]);
-  const runBeforeClose = useCallback(async reason => {
-    const {
-      beforeClose: bc,
-      images: imgs,
-      index
-    } = latestRef.current;
-    if (!bc) return true;
-    const res = await bc({
-      reason,
-      index,
-      image: imgs[index]
-    });
-    return res !== false;
-  }, []);
-  const executeClose = useCallback(async (reason, bypassBeforeClose = false) => {
-    const {
-      onClose: oc,
-      images: imgs,
-      index
-    } = latestRef.current;
-    if (!bypassBeforeClose) {
-      const allowed = await runBeforeClose(reason);
-      if (!allowed) return;
-    }
-    oc?.({
-      index,
-      image: imgs[index]
-    });
-  }, [runBeforeClose]);
-  const handlePopupBeforeClose = useCallback(async reason => {
-    pendingCloseReason.current = reason;
-    return runBeforeClose(reason);
-  }, [runBeforeClose]);
-  const handlePopupClose = useCallback(() => {
-    void executeClose(pendingCloseReason.current, true);
-  }, [executeClose]);
-  useImperativeHandle(ref, () => ({
-    swipeTo: (index, anim = true) => {
-      const next = clampIndex(index, imgLen);
-      setActiveIndex(next);
-      swiperRef.current?.swipeTo(next, anim);
-    }
-  }), [imgLen]);
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const safeIdxRef = useRef(safeIdx);
-  safeIdxRef.current = safeIdx;
-  const handleSwiperChange = useCallback(index => {
-    if (safeIdxRef.current === index) return;
-    setActiveIndex(index);
-    onChangeRef.current?.(index);
-  }, []);
-  const handleImagePress = useCallback(() => {
-    if (closeOnlyClickCloseIcon) return;
-    void executeClose('content');
-  }, [closeOnlyClickCloseIcon, executeClose]);
-  const resetTouch = useCallback(() => {
-    touchStartRef.current = null;
-    touchMovedRef.current = false;
-  }, []);
-  const handleTouchStart = useCallback((x, y) => {
-    touchStartRef.current = {
-      x,
-      y
-    };
-    touchMovedRef.current = false;
-  }, []);
-  const handleTouchMove = useCallback((x, y) => {
-    const start = touchStartRef.current;
-    if (!start) return;
-    const dx = x - start.x;
-    const dy = y - start.y;
-    if (dx * dx + dy * dy >= TOUCH_MOVE_THRESHOLD_SQUARED) touchMovedRef.current = true;
-  }, []);
-  const handleTouchEnd = useCallback((x, y) => {
-    const start = touchStartRef.current;
-    const moved = touchMovedRef.current;
-    resetTouch();
-    if (!start || moved) return;
-    const dx = x - start.x;
-    const dy = y - start.y;
-    if (dx * dx + dy * dy >= TOUCH_MOVE_THRESHOLD_SQUARED) return;
-    handleImagePress();
-  }, [handleImagePress, resetTouch]);
-  const pressableHandlers = useMemo(() => {
-    const handlers = {
-      onTouchStart: e => {
-        const {
-          pageX,
-          pageY
-        } = e.nativeEvent;
-        if (pageX != null && pageY != null) handleTouchStart(pageX, pageY);
-      },
-      onTouchMove: e => {
-        const {
-          pageX,
-          pageY
-        } = e.nativeEvent;
-        if (pageX != null && pageY != null) handleTouchMove(pageX, pageY);
-      },
-      onTouchEnd: e => {
-        const {
-          pageX,
-          pageY
-        } = e.nativeEvent;
-        if (pageX != null && pageY != null) handleTouchEnd(pageX, pageY);
-      },
-      onTouchCancel: resetTouch
-    };
-    if (IS_WEB) {
-      handlers.onMouseDown = e => {
-        const nativeEvent = e.nativeEvent;
-        if (nativeEvent?.pageX != null && nativeEvent?.pageY != null) handleTouchStart(nativeEvent.pageX, nativeEvent.pageY);
-      };
-      handlers.onMouseMove = e => {
-        const nativeEvent = e.nativeEvent;
-        if (nativeEvent?.buttons !== 1) return;
-        if (nativeEvent?.pageX != null && nativeEvent?.pageY != null) handleTouchMove(nativeEvent.pageX, nativeEvent.pageY);
-      };
-      handlers.onMouseUp = e => {
-        const nativeEvent = e.nativeEvent;
-        if (nativeEvent?.pageX != null && nativeEvent?.pageY != null) handleTouchEnd(nativeEvent.pageX, nativeEvent.pageY);
-      };
-    }
-    return handlers;
-  }, [handleTouchMove, handleTouchStart, resetTouch, handleTouchEnd]);
-  const renderIndex = useCallback((current, total) => {
-    if (!showIndex || total === 0) return null;
-    const indexText = `${current + 1} / ${total}`;
-    return /*#__PURE__*/React.createElement(View, {
-      style: [S.index, {
-        top: spacing.indexTop
-      }],
-      testID: "rv-image-preview-index"
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [S.indexBadge, {
-        backgroundColor: colors.indexBackground,
-        borderRadius: radii.indexBadge,
-        paddingHorizontal: spacing.indexPaddingHorizontal,
-        paddingVertical: spacing.indexPaddingVertical
-      }]
-    }, (() => {
-      if (!indexRender) return /*#__PURE__*/React.createElement(Text, {
-        style: [S.indexText, {
-          color: colors.indexText,
-          fontFamily: typography.fontFamily,
-          fontSize: typography.indexTextSize
-        }]
-      }, indexText);
-      const node = indexRender({
-        index: current,
-        len: total
-      });
-      return isText(node) ? /*#__PURE__*/React.createElement(Text, {
-        style: [S.indexText, {
-          color: colors.indexText,
-          fontFamily: typography.fontFamily,
-          fontSize: typography.indexTextSize
-        }]
-      }, node) : node;
-    })()));
-  }, [colors.indexBackground, colors.indexText, indexRender, radii.indexBadge, showIndex, spacing.indexPaddingHorizontal, spacing.indexPaddingVertical, spacing.indexTop, typography.indexTextSize]);
-  const lazyBuffer = lazyRender ? Math.max(0, lazyRenderBuffer | 0) : 0;
-  const renderIndicator = useCallback((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: indicatorSpacing,
-    testID: "rv-image-preview-indicators"
-  })), [colors.indicatorActive, colors.indicatorInactive, renderIndex, showIndicators]);
-  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: [S.popup, {
-      backgroundColor: colors.transparent,
-      padding: layout.popupPadding,
-      borderRadius: layout.popupRadius
-    }],
-    beforeClose: handlePopupBeforeClose,
-    onClose: handlePopupClose,
-    onClosed: onClosed
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [S.content, {
-      backgroundColor: colors.background
-    }]
-  }, imgLen === 1 && renderIndex(0, 1), imgLen === 0 ? /*#__PURE__*/React.createElement(View, {
-    style: S.empty,
-    testID: "rv-image-preview-empty"
-  }) : /*#__PURE__*/React.createElement(Swiper, {
-    ref: swiperRef,
-    style: S.swiper,
-    initialSwipe: clampIndex(startPosition, imgLen),
-    loop: false,
-    autoplay: false,
-    touchable: imgLen > 1,
-    indicator: renderIndicator,
-    onChange: handleSwiperChange,
-    testID: "rv-image-preview-swiper"
-  }, resolvedImages.map((source, index) => /*#__PURE__*/React.createElement(Swiper.Item, {
-    key: index,
-    style: S.slide,
-    testID: `rv-image-preview-slide-${index}`
-  }, /*#__PURE__*/React.createElement(ImageSlide, {
-    source: source,
-    rendered: !lazyRender || Math.abs(index - safeIdx) <= lazyBuffer,
-    pressableHandlers: pressableHandlers,
-    index: index,
-    total: resolvedImages.length
-  }))))));
-};
-const ImagePreviewForwardRef = /*#__PURE__*/React.forwardRef(ImagePreviewImpl);
-const ImagePreview = /*#__PURE__*/React.memo(ImagePreviewForwardRef);
-export default ImagePreview;
-const S = StyleSheet.create({
-  popup: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: '100%',
-    height: '100%',
-    maxWidth: '100%',
-    maxHeight: '100%'
-  },
-  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',
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    zIndex: 1
-  },
-  indexBadge: {},
-  indexText: {
-    fontWeight: '500'
-  }
-});
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},_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,isText}from"../../utils/validate";const clampIndex=(e,t)=>t<=0?0:Math.max(0,Math.min(t-1,e)),indicatorSpacing={bottom:32},IS_WEB="web"===Platform.OS,TOUCH_MOVE_THRESHOLD=8,TOUCH_MOVE_THRESHOLD_SQUARED=64,ImageSlide=React.memo(e=>{const{source:t,rendered:n,pressableHandlers:a,index:r,total:o}=e;return React.createElement(Pressable,_extends({accessibilityRole:"image",accessibilityLabel:`image ${r+1} of ${o}`,style:S.slidePressable},a),n?React.createElement(RNImage,{source:t,resizeMode:"contain",style:S.image,accessible:!0,accessibilityRole:"image"}):React.createElement(View,{style:S.imagePlaceholder}))},(e,t)=>e.source===t.source&&e.rendered===t.rendered&&e.pressableHandlers===t.pressableHandlers&&e.index===t.index&&e.total===t.total),ImagePreviewImpl=(e,t)=>{const{visible:n,images:a=[],startPosition:r=0,tokensOverride:o,lazyRender:i=!1,lazyRenderBuffer:l=1,showIndex:s=!0,indexRender:c,showIndicators:d=!1,closeable:u=!1,closeIcon:p,closeIconPosition:m="top-right",closeOnlyClickCloseIcon:g=!1,overlay:x=!0,overlayStyle:f,closeOnBackPress:v,closeOnPopstate:y,zIndex:I,duration:b,safeAreaInsetTop:w=!0,safeAreaInsetBottom:R=!0,onChange:h,onClose:C,onClosed:P,beforeClose:E}=e,{colors:T,layout:k,radii:O,typography:H,spacing:M}=useImagePreviewTokens(o),z=useRef(null),B=useRef("close"),V=useRef(null),_=useRef(!1),A=a.length,[D,F]=useState(()=>clampIndex(r,A)),X=clampIndex(D,A),Y=useRef({images:a,index:X,beforeClose:E,onClose:C});Y.current={images:a,index:X,beforeClose:E,onClose:C};const $=useMemo(()=>a.map(e=>isString(e)?{uri:e}:e),[a]);useEffect(()=>{F(e=>clampIndex(e,A))},[A]),useEffect(()=>{if(!n)return;const e=clampIndex(r,A);if(F(e),"undefined"!=typeof requestAnimationFrame){const t=requestAnimationFrame(()=>{z.current?.swipeTo(e,!1)});return()=>cancelAnimationFrame(t)}},[A,r,n]);const j=useCallback(async e=>{const{beforeClose:t,images:n,index:a}=Y.current;if(!t)return!0;return!1!==await t({reason:e,index:a,image:n[a]})},[]),U=useCallback(async(e,t=!1)=>{const{onClose:n,images:a,index:r}=Y.current;if(!t){if(!await j(e))return}n?.({index:r,image:a[r]})},[j]),W=useCallback(async e=>(B.current=e,j(e)),[j]),L=useCallback(()=>{U(B.current,!0)},[U]);useImperativeHandle(t,()=>({swipeTo:(e,t=!0)=>{const n=clampIndex(e,A);F(n),z.current?.swipeTo(n,t)}}),[A]);const q=useRef(h);q.current=h;const N=useRef(X);N.current=X;const Q=useCallback(e=>{N.current!==e&&(F(e),q.current?.(e))},[]),G=useCallback(()=>{g||U("content")},[g,U]),J=useCallback(()=>{V.current=null,_.current=!1},[]),K=useCallback((e,t)=>{V.current={x:e,y:t},_.current=!1},[]),Z=useCallback((e,t)=>{const n=V.current;if(!n)return;const a=e-n.x,r=t-n.y;a*a+r*r>=64&&(_.current=!0)},[]),ee=useCallback((e,t)=>{const n=V.current,a=_.current;if(J(),!n||a)return;const r=e-n.x,o=t-n.y;r*r+o*o>=64||G()},[G,J]),te=useMemo(()=>{const e={onTouchStart:e=>{const{pageX:t,pageY:n}=e.nativeEvent;null!=t&&null!=n&&K(t,n)},onTouchMove:e=>{const{pageX:t,pageY:n}=e.nativeEvent;null!=t&&null!=n&&Z(t,n)},onTouchEnd:e=>{const{pageX:t,pageY:n}=e.nativeEvent;null!=t&&null!=n&&ee(t,n)},onTouchCancel:J};return IS_WEB&&(e.onMouseDown=e=>{const t=e.nativeEvent;null!=t?.pageX&&null!=t?.pageY&&K(t.pageX,t.pageY)},e.onMouseMove=e=>{const t=e.nativeEvent;1===t?.buttons&&null!=t?.pageX&&null!=t?.pageY&&Z(t.pageX,t.pageY)},e.onMouseUp=e=>{const t=e.nativeEvent;null!=t?.pageX&&null!=t?.pageY&&ee(t.pageX,t.pageY)}),e},[Z,K,J,ee]),ne=useCallback((e,t)=>{if(!s||0===t)return null;const n=`${e+1} / ${t}`;return React.createElement(View,{style:[S.index,{top:M.indexTop}],testID:"rv-image-preview-index"},React.createElement(View,{style:[S.indexBadge,{backgroundColor:T.indexBackground,borderRadius:O.indexBadge,paddingHorizontal:M.indexPaddingHorizontal,paddingVertical:M.indexPaddingVertical}]},(()=>{if(!c)return React.createElement(Text,{style:[S.indexText,{color:T.indexText,fontFamily:H.fontFamily,fontSize:H.indexTextSize}]},n);const a=c({index:e,len:t});return isText(a)?React.createElement(Text,{style:[S.indexText,{color:T.indexText,fontFamily:H.fontFamily,fontSize:H.indexTextSize}]},a):a})()))},[T.indexBackground,T.indexText,c,O.indexBadge,s,M.indexPaddingHorizontal,M.indexPaddingVertical,M.indexTop,H.indexTextSize]),ae=i?Math.max(0,0|l):0,re=useCallback((e,t)=>React.createElement(React.Fragment,null,ne(t,e),d&&e>1&&React.createElement(Swiper.PagIndicator,{total:e,current:t,activeColor:T.indicatorActive,inactiveColor:T.indicatorInactive,style:indicatorSpacing,testID:"rv-image-preview-indicators"})),[T.indicatorActive,T.indicatorInactive,ne,d]);return React.createElement(Popup,{visible:n,overlay:x,overlayStyle:f,closeOnOverlayPress:!g,closeOnBackPress:v,closeOnPopstate:y,zIndex:I,duration:b,closeable:u,closeIcon:p,closeIconPosition:m,stopPropagation:!1,round:!1,safeAreaInsetTop:w,safeAreaInsetBottom:R,overlayTestID:"rv-image-preview-overlay",style:[S.popup,{backgroundColor:T.transparent,padding:k.popupPadding,borderRadius:k.popupRadius}],beforeClose:W,onClose:L,onClosed:P},React.createElement(View,{style:[S.content,{backgroundColor:T.background}]},1===A&&ne(0,1),0===A?React.createElement(View,{style:S.empty,testID:"rv-image-preview-empty"}):React.createElement(Swiper,{ref:z,style:S.swiper,initialSwipe:clampIndex(r,A),loop:!1,autoplay:!1,touchable:A>1,indicator:re,onChange:Q,testID:"rv-image-preview-swiper"},$.map((e,t)=>React.createElement(Swiper.Item,{key:t,style:S.slide,testID:`rv-image-preview-slide-${t}`},React.createElement(ImageSlide,{source:e,rendered:!i||Math.abs(t-X)<=ae,pressableHandlers:te,index:t,total:$.length}))))))},ImagePreviewForwardRef=React.forwardRef(ImagePreviewImpl),ImagePreview=React.memo(ImagePreviewForwardRef);export default ImagePreview;const S=StyleSheet.create({popup:{position:"absolute",top:0,left:0,right:0,bottom:0,width:"100%",height:"100%",maxWidth:"100%",maxHeight:"100%"},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",left:0,right:0,alignItems:"center",zIndex:1},indexBadge:{},indexText:{fontWeight:"500"}});

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

@@ -1,58 +1 @@
-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 c = closers.get(key);
-  c ? c() : removeInstance(key);
-};
-const ImagePreviewPortal = ({
-  id,
-  options
-}) => {
-  const [visible, setVisible] = useState(true);
-  const close = useCallback(() => setVisible(false), []);
-  useEffect(() => {
-    closers.set(id, close);
-    return () => {
-      if (closers.get(id) === 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();
-  }
-};
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var r in s)({}).hasOwnProperty.call(s,r)&&(e[r]=s[r])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useState}from"react";import Portal from"../portal/Portal";import ImagePreview from"./ImagePreview";const activeKeys=new Set,closers=new Map,removeInstance=e=>{Portal.remove(e),activeKeys.delete(e),closers.delete(e)},requestClose=e=>{const t=closers.get(e);t?t():removeInstance(e)},ImagePreviewPortal=({id:e,options:t})=>{const[s,r]=useState(!0),a=useCallback(()=>r(!1),[]);useEffect(()=>(closers.set(e,a),()=>{closers.get(e)===a&&closers.delete(e)}),[a,e]);const o=useCallback(e=>{t.onClose?.(e),r(!1)},[t]),l=useCallback(()=>{t.onClosed?.(),removeInstance(e)},[e,t]);return React.createElement(ImagePreview,_extends({},t,{visible:s,onClose:o,onClosed:l}))};export const ImagePreviewImperative={open:(e={})=>{activeKeys.forEach(e=>requestClose(e)),activeKeys.clear();const t=Portal.add(null);return activeKeys.add(t),Portal.update(t,React.createElement(ImagePreviewPortal,{id:t,options:e})),()=>requestClose(t)},clear:()=>{activeKeys.forEach(e=>requestClose(e)),activeKeys.clear()}};

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

@@ -1,11 +1 @@
-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 };
+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}),ImagePreview=ImagePreviewWithStatics;export default ImagePreview;export{ImagePreview};

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

@@ -1,37 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createTokens = foundations => {
-  const {
-    palette,
-    radii,
-    fontSize,
-    spacing,
-    typography
-  } = 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)',
-      transparent: 'transparent'
-    },
-    spacing: {
-      indexTop: 24,
-      indexPaddingHorizontal: spacing.lg,
-      indexPaddingVertical: spacing.xs
-    },
-    layout: {
-      popupPadding: 0,
-      popupRadius: 0
-    },
-    radii: {
-      indexBadge: radii.pill
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      indexTextSize: fontSize.sm
-    }
-  };
-};
-export const useImagePreviewTokens = createComponentTokensHook('imagePreview', createTokens);
+import{createComponentTokensHook}from"../../design-system";const createTokens=e=>{const{palette:n,radii:a,fontSize:i,spacing:o,typography:t}=e;return{colors:{background:"rgba(0,0,0,0.95)",indexBackground:"rgba(0,0,0,0.35)",indexText:"#fff",indicatorActive:n.primary?.[500]??"#1989fa",indicatorInactive:"rgba(255,255,255,0.4)",transparent:"transparent"},spacing:{indexTop:24,indexPaddingHorizontal:o.lg,indexPaddingVertical:o.xs},layout:{popupPadding:0,popupRadius:0},radii:{indexBadge:a.pill},typography:{fontFamily:t.fontFamily,indexTextSize:i.sm}}};export const useImagePreviewTokens=createComponentTokensHook("imagePreview",createTokens);

package/dist/es/components/index.js

@@ -1,110 +1 @@
-export { default as Button } from './button';
-export { useButtonTokens } from './button/tokens';
-export { default as Cell } from './cell';
-export { useCellTokens } from './cell/tokens';
-export { CellGroup } from './cell';
-export { default as Flex } from './flex';
-export { useFlexTokens } from './flex/tokens';
-export { default as Space } from './space';
-export { useSpaceTokens } from './space/tokens';
-export { default as Divider } from './divider';
-export { useDividerTokens } from './divider/tokens';
-export { default as Tag } from './tag';
-export { useTagTokens } from './tag/tokens';
-export { Checkbox } from './checkbox';
-export { CheckboxGroup } from './checkbox';
-export { useCheckboxTokens } from './checkbox/tokens';
-export { Radio } from './radio';
-export { RadioGroup } from './radio';
-export { useRadioTokens } from './radio/tokens';
-export { default as Field } from './field';
-export { FieldGroup } from './field';
-export { useFieldTokens } from './field/tokens';
-export { default as Input } from './input';
-export { useInputTokens } from './input/tokens';
-export { default as Form } from './form';
-export { default as Switch } from './switch';
-export { useSwitchTokens } from './switch/tokens';
-export { default as Badge } from './badge';
-export { useBadgeTokens } from './badge/tokens';
-export { default as Avatar } from './avatar';
-export { useAvatarTokens } from './avatar/tokens';
-export { default as Grid } from './grid';
-export { useGridTokens } from './grid/tokens';
-export { default as Typography } from './typography';
-export { useTypographyTokens } from './typography/tokens';
-export { default as Loading } from './loading';
-export { useLoadingTokens } from './loading/tokens';
-export { default as Empty } from './empty';
-export { useEmptyTokens } from './empty/tokens';
-export { default as Image } from './image';
-export { useImageTokens } from './image';
-export { default as Progress } from './progress';
-export { useProgressTokens } from './progress/tokens';
-export { default as Circle } from './circle';
-export { useCircleTokens } from './circle/tokens';
-export { default as NoticeBar } from './notice-bar';
-export { useNoticeBarTokens } from './notice-bar/tokens';
-export { default as Slider } from './slider';
-export { useSliderTokens } from './slider/tokens';
-export { default as Stepper } from './stepper';
-export { useStepperTokens } from './stepper/tokens';
-export { default as Selector } from './selector';
-export { useSelectorTokens } from './selector/tokens';
-export { default as Search } from './search';
-export { useSearchTokens } from './search/tokens';
-export { default as PasswordInput } from './password-input';
-export { default as Picker } from './picker';
-export { usePickerTokens } from './picker/tokens';
-export { default as NumberKeyboard } from './number-keyboard';
-export { useNumberKeyboardTokens } from './number-keyboard/tokens';
-export { default as Collapse } from './collapse';
-export { useCollapseTokens } from './collapse/tokens';
-export { default as Popup } from './popup';
-export { usePopupTokens } from './popup/tokens';
-export { default as Overlay, OverlayProvider } from './overlay';
-export { default as Dialog } from './dialog';
-export { useDialogTokens } from './dialog/tokens';
-export { default as Toast } from './toast';
-export { useToastTokens } from './toast/tokens';
-export { default as Notify } from './notify';
-export { useNotifyTokens } from './notify/tokens';
-export { Portal } from './portal';
-export { PortalHost } from './portal';
-export { SafeAreaView } from './safe-area-view';
-export { ConfigProvider } from './config-provider';
-export { useLocale } from './config-provider';
-export { useDirection } from './config-provider';
-export { zhCN } from './config-provider';
-export { enUS } from './config-provider';
-export { default as DatetimePicker } from './datetime-picker';
-export { default as Calendar } from './calendar';
-export { useCalendarTokens } from './calendar/tokens';
-export { default as Cascader } from './cascader';
-export { useCascaderTokens } from './cascader/tokens';
-export { default as Tabs } from './tabs';
-export { useTabsTokens } from './tabs/tokens';
-export { default as Tabbar } from './tabbar';
-export { useTabbarTokens } from './tabbar/tokens';
-export { default as NavBar } from './nav-bar';
-export { useNavBarTokens } from './nav-bar/tokens';
-export { default as Sidebar } from './sidebar';
-export { useSidebarTokens } from './sidebar/tokens';
-export { default as ActionSheet } from './action-sheet';
-export { useActionSheetTokens } from './action-sheet/tokens';
-export { default as ShareSheet } from './share-sheet';
-export { useShareSheetTokens } from './share-sheet/tokens';
-export { default as Area } from './area';
-export { default as ImagePreview } from './image-preview';
-export { useImagePreviewTokens } from './image-preview/tokens';
-export { default as Swiper } from './swiper';
-export { SwiperItem } from './swiper';
-export { SwiperPagIndicator } from './swiper';
-export { useSwiperPagIndicatorTokens } from './swiper';
-export { default as Skeleton } from './skeleton';
-export { useSkeletonTokens } from './skeleton';
-export { default as CountDown } from './count-down';
-export { useCountDownTokens } from './count-down/tokens';
-export { default as WaterMark } from './water-mark';
-export { useWaterMarkTokens } from './water-mark/tokens';
-export { default as ErrorBoundary } from './error-boundary';
+export{default as Button}from"./button";export{useButtonTokens}from"./button/tokens";export{default as Cell}from"./cell";export{useCellTokens}from"./cell/tokens";export{CellGroup}from"./cell";export{default as Flex}from"./flex";export{useFlexTokens}from"./flex/tokens";export{default as Space}from"./space";export{useSpaceTokens}from"./space/tokens";export{default as Divider}from"./divider";export{useDividerTokens}from"./divider/tokens";export{default as Tag}from"./tag";export{useTagTokens}from"./tag/tokens";export{Checkbox}from"./checkbox";export{CheckboxGroup}from"./checkbox";export{useCheckboxTokens}from"./checkbox/tokens";export{Radio}from"./radio";export{RadioGroup}from"./radio";export{useRadioTokens}from"./radio/tokens";export{default as Field}from"./field";export{FieldGroup}from"./field";export{useFieldTokens}from"./field/tokens";export{default as Input}from"./input";export{useInputTokens}from"./input/tokens";export{default as Form}from"./form";export{default as Switch}from"./switch";export{useSwitchTokens}from"./switch/tokens";export{default as Badge}from"./badge";export{useBadgeTokens}from"./badge/tokens";export{default as Avatar}from"./avatar";export{useAvatarTokens}from"./avatar/tokens";export{default as Grid}from"./grid";export{useGridTokens}from"./grid/tokens";export{default as Typography}from"./typography";export{useTypographyTokens}from"./typography/tokens";export{default as Loading}from"./loading";export{useLoadingTokens}from"./loading/tokens";export{default as Empty}from"./empty";export{useEmptyTokens}from"./empty/tokens";export{default as Image}from"./image";export{useImageTokens}from"./image";export{default as Progress}from"./progress";export{useProgressTokens}from"./progress/tokens";export{default as Circle}from"./circle";export{useCircleTokens}from"./circle/tokens";export{default as NoticeBar}from"./notice-bar";export{useNoticeBarTokens}from"./notice-bar/tokens";export{default as Slider}from"./slider";export{useSliderTokens}from"./slider/tokens";export{default as Stepper}from"./stepper";export{useStepperTokens}from"./stepper/tokens";export{default as Selector}from"./selector";export{useSelectorTokens}from"./selector/tokens";export{default as Search}from"./search";export{useSearchTokens}from"./search/tokens";export{default as PasswordInput}from"./password-input";export{default as Picker}from"./picker";export{usePickerTokens}from"./picker/tokens";export{default as NumberKeyboard}from"./number-keyboard";export{useNumberKeyboardTokens}from"./number-keyboard/tokens";export{default as Collapse}from"./collapse";export{useCollapseTokens}from"./collapse/tokens";export{default as Popup}from"./popup";export{usePopupTokens}from"./popup/tokens";export{default as Overlay,OverlayProvider}from"./overlay";export{default as Dialog}from"./dialog";export{useDialogTokens}from"./dialog/tokens";export{default as Toast}from"./toast";export{useToastTokens}from"./toast/tokens";export{default as Notify}from"./notify";export{useNotifyTokens}from"./notify/tokens";export{Portal}from"./portal";export{PortalHost}from"./portal";export{SafeAreaView}from"./safe-area-view";export{ConfigProvider}from"./config-provider";export{useLocale}from"./config-provider";export{useDirection}from"./config-provider";export{zhCN}from"./config-provider";export{enUS}from"./config-provider";export{default as DatetimePicker}from"./datetime-picker";export{default as Calendar}from"./calendar";export{useCalendarTokens}from"./calendar/tokens";export{default as Cascader}from"./cascader";export{useCascaderTokens}from"./cascader/tokens";export{default as Tabs}from"./tabs";export{useTabsTokens}from"./tabs/tokens";export{default as Tabbar}from"./tabbar";export{useTabbarTokens}from"./tabbar/tokens";export{default as NavBar}from"./nav-bar";export{useNavBarTokens}from"./nav-bar/tokens";export{default as Sidebar}from"./sidebar";export{useSidebarTokens}from"./sidebar/tokens";export{default as ActionSheet}from"./action-sheet";export{useActionSheetTokens}from"./action-sheet/tokens";export{default as ShareSheet}from"./share-sheet";export{useShareSheetTokens}from"./share-sheet/tokens";export{default as Area}from"./area";export{default as ImagePreview}from"./image-preview";export{useImagePreviewTokens}from"./image-preview/tokens";export{default as Swiper}from"./swiper";export{SwiperItem}from"./swiper";export{SwiperPagIndicator}from"./swiper";export{useSwiperPagIndicatorTokens}from"./swiper";export{default as Skeleton}from"./skeleton";export{useSkeletonTokens}from"./skeleton";export{default as CountDown}from"./count-down";export{useCountDownTokens}from"./count-down/tokens";export{default as WaterMark}from"./water-mark";export{useWaterMarkTokens}from"./water-mark/tokens";export{default as ErrorBoundary}from"./error-boundary";