@nutui/nutui-react-taro 3.0.18-cpp.beta.0 → 3.0.18

package/dist/es/packages/swipe/swipe.js

@@ -0,0 +1,323 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { nextTick, useReady } from "@tarojs/taro";
+import { useTouch } from "../../hooks/use-touch";
+import { getRectInMultiPlatform } from "../../utils/taro/get-rect";
+import { ComponentDefaults } from "../../utils/typings";
+import { harmony } from "../../utils/taro/platform";
+import { useRefState } from "../../hooks/use-ref-state";
+import { useUuid } from "../../hooks/use-uuid";
+function preventDefault(event, isStopPropagation) {
+    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+        event.preventDefault();
+    }
+    if (isStopPropagation) {
+        event.stopPropagation();
+    }
+}
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    name: ''
+});
+export var Swipe = /*#__PURE__*/ forwardRef(function(props, instanceRef) {
+    var classPrefix = 'nut-swipe';
+    var touch = useTouch();
+    var uid = useUuid();
+    var leftId = "swipe-left-".concat(uid);
+    var rightId = "swipe-right-".concat(uid);
+    // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
+    useReady(function() {
+        var getWidth = /*#__PURE__*/ function() {
+            var _ref = _async_to_generator(function() {
+                var leftRect, rightRect;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            if (!leftWrapper.current) return [
+                                3,
+                                2
+                            ];
+                            return [
+                                4,
+                                getRectInMultiPlatform(leftWrapper.current, leftId)
+                            ];
+                        case 1:
+                            leftRect = _state.sent();
+                            leftRect && setActionWidth(function(v) {
+                                return _object_spread_props(_object_spread({}, v), {
+                                    left: leftRect.width
+                                });
+                            });
+                            _state.label = 2;
+                        case 2:
+                            if (!rightWrapper.current) return [
+                                3,
+                                4
+                            ];
+                            return [
+                                4,
+                                getRectInMultiPlatform(rightWrapper.current, rightId)
+                            ];
+                        case 3:
+                            rightRect = _state.sent();
+                            rightRect && setActionWidth(function(v) {
+                                return _object_spread_props(_object_spread({}, v), {
+                                    right: rightRect.width
+                                });
+                            });
+                            _state.label = 4;
+                        case 4:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function getWidth() {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        nextTick(function() {
+            return getWidth();
+        });
+    });
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
+    var root = useRef();
+    var opened = useRef(false);
+    var lockClick = useRef(false);
+    var startOffset = useRef(0);
+    var _useState = _sliced_to_array(useState({
+        offset: 0,
+        dragging: false
+    }), 2), state = _useState[0], setState = _useState[1];
+    var _useRefState = _sliced_to_array(useRefState({
+        left: 0,
+        right: 0
+    }), 2), actionWidth = _useRefState[0], updateState = _useRefState[1];
+    var setActionWidth = function(fn) {
+        var res = fn();
+        if (res.left !== undefined) {
+            updateState(_object_spread_props(_object_spread({}, actionWidth.current), {
+                left: res.left
+            }));
+        }
+        if (res.right !== undefined) {
+            updateState(_object_spread_props(_object_spread({}, actionWidth.current), {
+                right: res.right
+            }));
+        }
+    };
+    var wrapperStyle = {
+        transform: "translate(".concat(state.offset).concat(!harmony() ? 'px' : '', ", 0)"),
+        transitionDuration: state.dragging ? '0s' : '.6s'
+    };
+    var onTouchStart = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(event) {
+            var leftRect, rightRect, _props_onTouchStart;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (!leftWrapper.current) return [
+                            3,
+                            2
+                        ];
+                        return [
+                            4,
+                            getRectInMultiPlatform(leftWrapper.current, leftId)
+                        ];
+                    case 1:
+                        leftRect = _state.sent();
+                        leftRect && setActionWidth(function(v) {
+                            return _object_spread_props(_object_spread({}, v), {
+                                left: leftRect.width
+                            });
+                        });
+                        _state.label = 2;
+                    case 2:
+                        if (!rightWrapper.current) return [
+                            3,
+                            4
+                        ];
+                        return [
+                            4,
+                            getRectInMultiPlatform(rightWrapper.current, rightId)
+                        ];
+                    case 3:
+                        rightRect = _state.sent();
+                        rightRect && setActionWidth(function(v) {
+                            return _object_spread_props(_object_spread({}, v), {
+                                right: rightRect.width
+                            });
+                        });
+                        _state.label = 4;
+                    case 4:
+                        if (!props.disabled) {
+                            ;
+                            startOffset.current = state.offset;
+                            touch.start(event);
+                            (_props_onTouchStart = props.onTouchStart) === null || _props_onTouchStart === void 0 ? void 0 : _props_onTouchStart.call(props, event);
+                        }
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function onTouchStart(event) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    var onTouchMove = function(event) {
+        var _props_onTouchMove;
+        if (props.disabled) {
+            return;
+        }
+        touch.move(event);
+        (_props_onTouchMove = props.onTouchMove) === null || _props_onTouchMove === void 0 ? void 0 : _props_onTouchMove.call(props, event);
+        if (touch.isHorizontal()) {
+            lockClick.current = true;
+            var newState = _object_spread_props(_object_spread({}, state), {
+                dragging: true
+            });
+            var isEdge = !opened || touch.deltaX.current * startOffset.current < 0;
+            if (isEdge) {
+                preventDefault(event, true);
+            }
+            newState.offset = rangeCalculation(touch.deltaX.current + startOffset.current, -actionWidth.current.right || 0, actionWidth.current.left || 0);
+            setState(newState);
+        }
+    };
+    var onTouchEnd = function(event) {
+        if (state.dragging) {
+            var _props_onTouchEnd;
+            setState(function(v) {
+                return _object_spread_props(_object_spread({}, v), {
+                    dragging: false
+                });
+            });
+            toggle(state.offset > 0 ? 'left' : 'right');
+            setTimeout(function() {
+                lockClick.current = false;
+            }, 0);
+            (_props_onTouchEnd = props.onTouchEnd) === null || _props_onTouchEnd === void 0 ? void 0 : _props_onTouchEnd.call(props, event);
+        }
+    };
+    var toggle = function(side) {
+        var offset = Math.abs(state.offset);
+        var base = 0.3;
+        var baseNum = opened ? 1 - base : base;
+        var width = side === 'left' ? actionWidth.current.left : actionWidth.current.right;
+        if (width && offset > Number(width) * baseNum) {
+            open(side);
+        } else {
+            close(side);
+        }
+    };
+    var open = function(side) {
+        var _props_onOpen;
+        opened.current = true;
+        var offset = side === 'left' ? actionWidth.current.left : -actionWidth.current.right;
+        var name = props.name;
+        (_props_onOpen = props.onOpen) === null || _props_onOpen === void 0 ? void 0 : _props_onOpen.call(props, {
+            name: name,
+            position: side
+        });
+        setState(function(v) {
+            return _object_spread_props(_object_spread({}, v), {
+                offset: Number(offset) || 0
+            });
+        });
+    };
+    var close = function(position) {
+        if (opened.current) {
+            var _props_onClose;
+            opened.current = false;
+            (_props_onClose = props.onClose) === null || _props_onClose === void 0 ? void 0 : _props_onClose.call(props, {
+                name: props.name,
+                position: position || 'left'
+            });
+        }
+        setState(function(v) {
+            return _object_spread_props(_object_spread({}, v), {
+                offset: 0
+            });
+        });
+    };
+    var rangeCalculation = function(num, min, max) {
+        return Math.min(Math.max(Number(num), Number(min)), Number(max));
+    };
+    var leftWrapper = useRef(null);
+    var rightWrapper = useRef(null);
+    var renderActionContent = function(side) {
+        if (props["".concat(side, "Action")]) {
+            return /*#__PURE__*/ React.createElement(View, {
+                ref: side === 'left' ? leftWrapper : rightWrapper,
+                className: "".concat(classPrefix, "-").concat(side),
+                id: side === 'left' ? leftId : rightId,
+                onClick: function(e) {
+                    return handleOperate(e, side);
+                }
+            }, props["".concat(side, "Action")]);
+        }
+        return null;
+    };
+    var handleOperate = function(event, position) {
+        event.stopPropagation();
+        if (props.beforeClose) {
+            props.beforeClose(position);
+        } else {
+            var _props_onActionClick;
+            (_props_onActionClick = props.onActionClick) === null || _props_onActionClick === void 0 ? void 0 : _props_onActionClick.call(props, event, position);
+        }
+    };
+    useImperativeHandle(instanceRef, function() {
+        return {
+            open: open,
+            close: function() {
+                return close();
+            }
+        };
+    });
+    useEffect(function() {
+        if (harmony()) return;
+        var handler = function(event) {
+            var targets = [
+                root
+            ];
+            if (targets.some(function(targetItem) {
+                var targetElement = targetItem.current || targetItem;
+                return !targetElement || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.contains(event.target));
+            })) {
+                return;
+            }
+            close();
+        };
+        document.addEventListener('touchstart', handler);
+        return function() {
+            document.removeEventListener('touchstart', handler);
+        };
+    }, []);
+    return /*#__PURE__*/ React.createElement(View, {
+        ref: root,
+        className: classNames(classPrefix, className),
+        onTouchStart: function(e) {
+            return onTouchStart(e);
+        },
+        onTouchMove: function(e) {
+            return onTouchMove(e);
+        },
+        onTouchEnd: function(e) {
+            return onTouchEnd(e);
+        },
+        style: style
+    }, /*#__PURE__*/ React.createElement(View, {
+        className: "".concat(classPrefix, "-wrapper"),
+        style: wrapperStyle
+    }, renderActionContent('left'), children, renderActionContent('right')));
+});
+Swipe.displayName = 'NutSwipe';

package/dist/es/packages/swiper/context.d.ts

@@ -0,0 +1 @@
+export declare const DataContext: import("react").Context<{}>;

package/dist/es/packages/swiper/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export var DataContext = createContext({});

package/dist/es/packages/swiper/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import SwiperItem from "../swiperitem/index";
+import { TaroSwiperProps } from "../../types";
+export type { TaroSwiperProps as SwiperProps } from "../../types";
+type CompoundedComponent = React.ForwardRefExoticComponent<Partial<TaroSwiperProps> & React.RefAttributes<any>> & {
+    Item: typeof SwiperItem;
+};
+declare const InnerSwiper: CompoundedComponent;
+export default InnerSwiper;

package/dist/es/packages/swiper/index.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { Swiper } from "./swiper";
+import SwiperItem from "../swiperitem/index";
+var InnerSwiper = Swiper;
+InnerSwiper.Item = SwiperItem;
+export default InnerSwiper;

package/dist/es/packages/swiper/style/css.js

@@ -0,0 +1,2 @@
+import '../../indicator/style/css';
+import './style.css';

package/dist/es/packages/swiper/style/index.js

@@ -0,0 +1,2 @@
+import '../../indicator/style';
+import './swiper.scss';

package/dist/es/packages/swiper/style/style.css

@@ -0,0 +1,68 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.nut-swiper-canmove-horizontal {
+  touch-action: pan-y;
+}
+.nut-swiper-canmove-vertical {
+  touch-action: pan-x;
+}
+.nut-swiper-indicator {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  position: absolute;
+  height: 4px;
+  width: 100%;
+  top: 89.33%;
+  z-index: 10;
+}
+.nut-swiper-indicator-vertical {
+  width: 8px;
+  height: 100%;
+  top: 0;
+  left: 12px;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 1;
+}
+
+.nut-swiper-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+.nut-swiper-inner-vertical {
+  flex-direction: column;
+}
+
+.nut-swiper-slide {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.nut-swiper-item {
+  width: 100%;
+  height: 100%;
+}
+
+[dir=rtl] .nut-swiper-indicator,
+.nut-rtl .nut-swiper-indicator {
+  left: auto;
+  right: 50%;
+}
+[dir=rtl] .nut-swiper-indicator-vertical,
+.nut-rtl .nut-swiper-indicator-vertical {
+  left: auto;
+  right: 12px;
+}

package/dist/es/packages/swiper/style/style.harmony.css

@@ -0,0 +1,196 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-indicator {
+  display: flex;
+  width: auto;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.nut-indicator-fixed-width {
+  width: 21px;
+}
+.nut-indicator-dot, .nut-indicator-line {
+  display: inline-block;
+  vertical-align: middle;
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-size, 3px);
+  border-radius: 50%;
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  opacity: 0.4;
+}
+.nut-indicator-dot-0, .nut-indicator-line-0 {
+  margin-left: 0px;
+}
+.nut-indicator-dot-active, .nut-indicator-line-active {
+  width: var(--nutui-indicator-dot-active-size, 6px);
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
+  opacity: 1;
+}
+.nut-indicator-fixed-width .nut-indicator-dot {
+  width: 12px;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+}
+.nut-indicator-fixed-width .nut-indicator-dot-active {
+  width: 6px;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width {
+  justify-content: flex-start;
+  height: 21px;
+  width: auto;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
+  width: 3px;
+  height: 12px;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+}
+.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
+  height: 6px;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
+  height: 6px;
+}
+.nut-indicator-line {
+  width: var(--nutui-indicator-dot-active-size, 6px);
+  margin: 0;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background-color: transparent;
+}
+.nut-indicator-line-active {
+  transition: transform 0.3s ease-in-out;
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
+}
+
+.nut-indicator-track {
+  position: relative;
+}
+.nut-indicator-track:after {
+  display: block;
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  opacity: 0.4;
+}
+
+.nut-indicator-white .nut-indicator-dot, .nut-indicator-white .nut-indicator-line {
+  position: relative;
+  box-sizing: content-box;
+  background: rgba(255, 255, 255, 0.4);
+  opacity: 1;
+}
+.nut-indicator-white .nut-indicator-line {
+  opacity: 0;
+}
+.nut-indicator-white .nut-indicator-line-active {
+  opacity: 1;
+  background: rgb(255, 255, 255);
+}
+.nut-indicator-white .nut-indicator-dot-active {
+  background: rgb(255, 255, 255);
+}
+
+.nut-indicator-track.nut-indicator-white:after {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.nut-indicator-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.nut-indicator-vertical .nut-indicator-dot {
+  margin: 0px;
+  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+}
+.nut-indicator-vertical .nut-indicator-dot-0 {
+  margin-top: 0px;
+}
+.nut-indicator-vertical .nut-indicator-dot-active {
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-active-size, 6px);
+}
+.nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-active-size, 6px);
+}
+
+[dir=rtl] .nut-indicator-dot-0,
+.nut-rtl .nut-indicator-dot-0 {
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  margin-left: 0px;
+}
+
+.nut-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.nut-swiper-canmove-horizontal {
+  touch-action: pan-y;
+}
+.nut-swiper-canmove-vertical {
+  touch-action: pan-x;
+}
+.nut-swiper-indicator {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  position: absolute;
+  height: 4px;
+  width: 100%;
+  top: 89.33%;
+  z-index: 10;
+}
+.nut-swiper-indicator-vertical {
+  width: 8px;
+  height: 100%;
+  top: 0;
+  left: 12px;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 1;
+}
+
+.nut-swiper-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+.nut-swiper-inner-vertical {
+  flex-direction: column;
+}
+
+.nut-swiper-slide {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.nut-swiper-item {
+  width: 100%;
+  height: 100%;
+}
+
+[dir=rtl] .nut-swiper-indicator,
+.nut-rtl .nut-swiper-indicator {
+  left: auto;
+  right: 50%;
+}
+[dir=rtl] .nut-swiper-indicator-vertical,
+.nut-rtl .nut-swiper-indicator-vertical {
+  left: auto;
+  right: 12px;
+}

package/dist/es/packages/swiper/style/swiper.scss

@@ -0,0 +1,71 @@
+.nut-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+
+  &-canmove-horizontal {
+    touch-action: pan-y;
+  }
+
+  &-canmove-vertical {
+    touch-action: pan-x;
+  }
+
+  &-indicator {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    position: absolute;
+    height: 4px;
+    width: 100%;
+    top: 89.33%;
+    z-index: 10;
+  }
+
+  &-indicator-vertical {
+    width: 8px;
+    height: 100%;
+    top: 0;
+    left: 12px;
+    flex-direction: column;
+    justify-content: center;
+    z-index: 1;
+  }
+}
+
+.nut-swiper-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+
+  &-vertical {
+    flex-direction: column;
+  }
+}
+
+.nut-swiper-slide {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.nut-swiper-item {
+  width: 100%;
+  height: 100%;
+}
+
+[dir='rtl'] .nut-swiper,
+.nut-rtl .nut-swiper {
+  &-indicator {
+    left: auto;
+    right: 50%;
+  }
+
+  &-indicator-vertical {
+    left: auto;
+    right: 12px;
+  }
+}

package/dist/es/packages/swiper/style-jmapp/css.js

@@ -0,0 +1,2 @@
+import '../../indicator/style-jmapp/css';
+import './style.css';

package/dist/es/packages/swiper/style-jmapp/index.js

@@ -0,0 +1,2 @@
+import '../../indicator/style-jmapp';
+import './swiper.scss';