@nutui/nutui-react-taro 3.0.19-cpp-beta.1 → 3.0.19-cpp-beta.2

package/dist/cjs/packages/imagepreview/imagepreview.js

@@ -0,0 +1,265 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ImagePreview", {
+    enumerable: true,
+    get: function() {
+        return ImagePreview;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
+var _components = require("@tarojs/components");
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
+var _index1 = /*#__PURE__*/ _interop_require_default._(require("../image/index"));
+var _index2 = /*#__PURE__*/ _interop_require_default._(require("../swiper/index"));
+var _index3 = /*#__PURE__*/ _interop_require_default._(require("../swiperitem/index"));
+var _typings = require("../../utils/typings");
+var _usepropsvalue = require("../../hooks/use-props-value");
+var _utils = require("../../utils");
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    images: [],
+    videos: [],
+    visible: false,
+    autoPlay: false,
+    defaultValue: 1,
+    closeOnContentClick: false,
+    pagination: true,
+    indicator: false,
+    indicatorColor: '#fff',
+    closeIcon: false,
+    closeIconPosition: 'top-right',
+    showMenuByLongpress: false,
+    onChange: function onChange() {},
+    onClose: function onClose() {}
+});
+var ImagePreview = function ImagePreview(props) {
+    var _mergeProps = (0, _utils.mergeProps)(defaultProps, props), value = _mergeProps.value, className = _mergeProps.className, style = _mergeProps.style, images = _mergeProps.images, videos = _mergeProps.videos, visible = _mergeProps.visible, defaultValue = _mergeProps.defaultValue, indicatorColor = _mergeProps.indicatorColor, pagination = _mergeProps.pagination, indicator = _mergeProps.indicator, autoPlay = _mergeProps.autoPlay, loop = _mergeProps.loop, closeOnContentClick = _mergeProps.closeOnContentClick, closeIcon = _mergeProps.closeIcon, closeIconPosition = _mergeProps.closeIconPosition, showMenuByLongpress = _mergeProps.showMenuByLongpress, onClose = _mergeProps.onClose, onChange = _mergeProps.onChange, rest = (0, _object_without_properties._)(_mergeProps, [
+        "value",
+        "className",
+        "style",
+        "images",
+        "videos",
+        "visible",
+        "defaultValue",
+        "indicatorColor",
+        "pagination",
+        "indicator",
+        "autoPlay",
+        "loop",
+        "closeOnContentClick",
+        "closeIcon",
+        "closeIconPosition",
+        "showMenuByLongpress",
+        "onClose",
+        "onChange"
+    ]);
+    var classPrefix = 'nut-imagepreview';
+    var ref = (0, _react.useRef)(null);
+    var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
+        value: value,
+        defaultValue: defaultValue,
+        finalValue: defaultValue,
+        onChange: onChange
+    }), 2), innerNo = _usePropsValue[0], setInnerNo = _usePropsValue[1];
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), showPop = _useState[0], setShowPop = _useState[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), active = _useState1[0], setActive = _useState1[1];
+    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)(images.length + videos.length), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
+    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)({
+        scale: 1,
+        moveable: false,
+        oriDistance: 0,
+        originScale: 1
+    }), 2), store = _useState3[0], setStore = _useState3[1];
+    var lastTouchEndTime = (0, _react.useRef)(0) // 用来辅助监听双击
+    ;
+    var onTouchStart = function onTouchStart(event) {
+        var touches = event.touches;
+        var events = touches[0];
+        var events2 = touches[1];
+        // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
+        var curTouchTime = Date.now();
+        if (curTouchTime - lastTouchEndTime.current < 100) {
+            var store1 = store;
+            store1.scale = store1.scale === 1 ? 2 : 1;
+            scaleNow();
+        }
+        var store11 = store;
+        store11.moveable = true;
+        if (events2) {
+            // 如果开始两指操作，记录初始时刻两指间的距离
+            store11.oriDistance = getDistance(events, events2);
+        }
+        // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
+        store11.originScale = store11.scale;
+    };
+    var onTouchMove = function onTouchMove(event) {
+        if (!store.moveable) return;
+        var touches = event.touches;
+        var events = touches[0];
+        var events2 = touches[1];
+        var store1 = store;
+        // 双指移动
+        if (events2) {
+            var curDistance = getDistance(events, events2);
+            /** 此处计算倍数，距离放大（缩小） k 倍则 scale 也 扩大（缩小） k 倍。距离放大（缩小）倍数 = 结束时两点距离 除以 开始时两点距离
+       * 注意此处的 scale 变化是基于 store.scale 的。
+       * store.scale 是一个暂存值，比如第一次放大 2 倍，则 store.scale 为 2。
+       * 再次两指触碰的时候，store.originScale 就为 store.scale 的值，基于此时的 store.scale 继续放大缩小。 * */ var curScale = curDistance / store1.oriDistance;
+            // 最大放大 3 倍，缩小后松手要弹回原比例
+            store1.scale = Math.min(store1.originScale * curScale, 3);
+            scaleNow();
+        }
+    };
+    var onTouchEnd = function onTouchEnd() {
+        lastTouchEndTime.current = Date.now();
+        var store1 = store;
+        store1.moveable = false;
+        if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
+            store1.scale = 1;
+            scaleNow();
+        }
+    };
+    (0, _react.useEffect)(function() {
+        init();
+    }, []);
+    var init = function init() {
+        document.addEventListener('touchmove', onTouchMove);
+        document.addEventListener('touchend', onTouchEnd);
+        document.addEventListener('touchcancel', onTouchEnd);
+        return function() {
+            document.removeEventListener('touchcancel', onTouchEnd);
+            document.removeEventListener('touchmove', onTouchMove);
+            document.removeEventListener('touchend', onTouchEnd);
+        };
+    };
+    (0, _react.useEffect)(function() {
+        setShowPop(visible);
+    }, [
+        visible
+    ]);
+    (0, _react.useEffect)(function() {
+        setInnerNo(defaultValue || 1);
+    }, [
+        defaultValue
+    ]);
+    (0, _react.useEffect)(function() {
+        setActive(innerNo);
+    }, [
+        innerNo
+    ]);
+    (0, _react.useEffect)(function() {
+        setMaxNo(images.length + videos.length);
+    }, [
+        images,
+        videos
+    ]);
+    var scaleNow = function scaleNow() {
+        if (ref.current) {
+            ref.current.style.transform = "scale(".concat(store.scale, ")");
+        }
+    };
+    var getDistance = function getDistance(first, second) {
+        return Math.hypot(Math.abs(second.pageX - first.pageX), Math.abs(second.pageY - first.pageY));
+    };
+    var slideChangeEnd = function slideChangeEnd(page) {
+        setActive(page + 1);
+        onChange === null || onChange === void 0 ? void 0 : onChange(page + 1);
+    };
+    var onCloseInner = function onCloseInner(e) {
+        e.stopPropagation();
+        setShowPop(false);
+        setActive(innerNo);
+        scaleNow();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        setStore((0, _object_spread_props._)((0, _object_spread._)({}, store), {
+            scale: 1
+        }));
+    };
+    var closeOnImg = function closeOnImg(e) {
+        e.stopPropagation();
+        // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
+        if (closeOnContentClick) onCloseInner(e);
+    };
+    return /*#__PURE__*/ _react.default.createElement(_index.default, {
+        visible: showPop,
+        className: "".concat(classPrefix, "-pop"),
+        onClick: onCloseInner
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: (0, _classnames.default)(classPrefix, className),
+        style: style,
+        ref: ref,
+        onTouchStart: onTouchStart,
+        onTouchMove: onTouchMove,
+        onTouchEnd: onTouchEnd,
+        onTouchCancel: onTouchEnd
+    }, /*#__PURE__*/ _react.default.createElement(_index2.default, {
+        autoplay: autoPlay,
+        loop: loop,
+        direction: "horizontal",
+        className: "".concat(classPrefix, "-swiper"),
+        height: "100%",
+        style: {
+            display: showPop ? 'block' : 'none',
+            '--nutui-indicator-color': indicatorColor,
+            width: '100%',
+            height: '100%'
+        },
+        onChange: function onChange(e) {
+            return slideChangeEnd(e.detail.current);
+        },
+        defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
+        indicator: indicator
+    }, (0, _to_consumable_array._)(videos.map(function(item) {
+        return {
+            type: 'video',
+            data: item
+        };
+    })).concat((0, _to_consumable_array._)(images.map(function(item) {
+        return {
+            type: 'image',
+            data: item
+        };
+    }))).sort(function(a, b) {
+        var _a_data, _b_data;
+        var _a_data_index, _b_data_index;
+        return ((_a_data_index = (_a_data = a.data) === null || _a_data === void 0 ? void 0 : _a_data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = (_b_data = b.data) === null || _b_data === void 0 ? void 0 : _b_data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
+    }).map(function(item, index) {
+        return /*#__PURE__*/ _react.default.createElement(_index3.default, {
+            key: index,
+            className: "nut-imagepreview-swiper-item"
+        }, item.type === 'video' ? /*#__PURE__*/ _react.default.createElement(_components.Video, {
+            src: item.data.source.src,
+            onClick: closeOnImg,
+            controls: item.data.options.controls,
+            autoplay: false,
+            loop: false,
+            muted: item.data.options.muted
+        }) : /*#__PURE__*/ _react.default.createElement(_index1.default, (0, _object_spread._)({
+            src: item.data.src,
+            mode: "widthFix",
+            onClick: closeOnImg,
+            style: {
+                width: '100%'
+            }
+        }, _taro.default.getEnv() !== 'WEB' && {
+            showMenuByLongpress: showMenuByLongpress
+        })));
+    }))), pagination && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-index")
+    }, active, "/", maxNo), closeIcon !== false && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-close ").concat(closeIconPosition),
+        onClick: onCloseInner
+    }, closeIcon === true ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null) : closeIcon));
+};
+ImagePreview.displayName = 'NutImagePreview';

package/dist/cjs/packages/imagepreview/index.d.ts

@@ -0,0 +1,3 @@
+import { ImagePreview } from "./imagepreview";
+export type { TaroImagePreviewProps as ImagePreviewProps, ImagePreviewCloseIconPosition, } from "../../types";
+export default ImagePreview;

package/dist/cjs/packages/imagepreview/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _imagepreview = require("./imagepreview");
+var _default = _imagepreview.ImagePreview;

package/dist/cjs/packages/imagepreview/style/css.js

@@ -0,0 +1,5 @@
+import '../../popup/style/css';
+import '../../swiper/style/css';
+import '../../video/style/css';
+import '../../image/style/css';
+import './style.css';

package/dist/cjs/packages/imagepreview/style/imagepreview.scss

@@ -0,0 +1,116 @@
+.nut-imagepreview {
+  width: 100%;
+  height: 100%;
+
+  &-swiper {
+    height: 100%;
+    width: 100vw;
+    background-color: transparent;
+  }
+
+  &-index {
+    position: fixed;
+    z-index: 2002;
+    top: 50px;
+    text-align: center;
+    left: 0;
+    right: 0;
+    background: transparent;
+    color: $white;
+
+    .arrow {
+      position: absolute;
+      left: 15px;
+      transform: rotateZ(180deg);
+    }
+  }
+
+  &-close {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2002;
+    background: transparent;
+    color: $white;
+
+    .nut-icon {
+      color: $white;
+    }
+
+    &.top-right {
+      top: 50px;
+      right: 20px;
+    }
+
+    &.top-left {
+      top: 50px;
+      left: 20px;
+    }
+
+    &.bottom {
+      bottom: 50px;
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+  }
+
+  &-pop {
+    width: 100%;
+    height: 100%;
+    max-width: 100% !important;
+    background: transparent !important;
+    display: flex;
+    align-items: center;
+  }
+
+  &-swiper {
+    .nut-imagepreview-swiper-item,
+    .nut-swiper-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      .nut-image,
+      .nut-video {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .nut-image-preview-box {
+        width: 100%;
+      }
+
+      .nut-video {
+        video {
+          object-fit: contain;
+        }
+      }
+    }
+  }
+}
+
+[dir='rtl'] .nut-imagepreview,
+.nut-rtl .nut-imagepreview {
+  &-index {
+    .arrow {
+      left: auto;
+      right: 15px;
+      transform: rotateZ(-180deg);
+    }
+  }
+  &-close {
+    &.top-right {
+      right: auto;
+      left: 20px;
+    }
+
+    &.top-left {
+      left: auto;
+      right: 20px;
+    }
+  }
+}

package/dist/cjs/packages/imagepreview/style/index.js

@@ -0,0 +1,5 @@
+import '../../popup/style';
+import '../../swiper/style';
+import '../../video/style';
+import '../../image/style';
+import './imagepreview.scss';

package/dist/cjs/packages/imagepreview/style/style.css

@@ -0,0 +1,102 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-imagepreview {
+  width: 100%;
+  height: 100%;
+}
+.nut-imagepreview-swiper {
+  height: 100%;
+  width: 100vw;
+  background-color: transparent;
+}
+.nut-imagepreview-index {
+  position: fixed;
+  z-index: 2002;
+  top: 50px;
+  text-align: center;
+  left: 0;
+  right: 0;
+  background: transparent;
+  color: #ffffff;
+}
+.nut-imagepreview-index .arrow {
+  position: absolute;
+  left: 15px;
+  transform: rotateZ(180deg);
+}
+.nut-imagepreview-close {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2002;
+  background: transparent;
+  color: #ffffff;
+}
+.nut-imagepreview-close .nut-icon {
+  color: #ffffff;
+}
+.nut-imagepreview-close.top-right {
+  top: 50px;
+  right: 20px;
+}
+.nut-imagepreview-close.top-left {
+  top: 50px;
+  left: 20px;
+}
+.nut-imagepreview-close.bottom {
+  bottom: 50px;
+  left: 0;
+  right: 0;
+  text-align: center;
+}
+.nut-imagepreview-pop {
+  width: 100%;
+  height: 100%;
+  max-width: 100% !important;
+  background: transparent !important;
+  display: flex;
+  align-items: center;
+}
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item,
+.nut-imagepreview-swiper .nut-swiper-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image,
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video,
+.nut-imagepreview-swiper .nut-swiper-item .nut-image,
+.nut-imagepreview-swiper .nut-swiper-item .nut-video {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image-preview-box,
+.nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box {
+  width: 100%;
+}
+.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video video,
+.nut-imagepreview-swiper .nut-swiper-item .nut-video video {
+  object-fit: contain;
+}
+
+[dir=rtl] .nut-imagepreview-index .arrow,
+.nut-rtl .nut-imagepreview-index .arrow {
+  left: auto;
+  right: 15px;
+  transform: rotateZ(-180deg);
+}
+[dir=rtl] .nut-imagepreview-close.top-right,
+.nut-rtl .nut-imagepreview-close.top-right {
+  right: auto;
+  left: 20px;
+}
+[dir=rtl] .nut-imagepreview-close.top-left,
+.nut-rtl .nut-imagepreview-close.top-left {
+  left: auto;
+  right: 20px;
+}