taro-ui 3.1.0-beta.5 → 3.1.0-beta.7

package/dist/index.esm.js

@@ -44,6 +44,44 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
 function __read(o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -1426,6 +1464,20 @@ function delayQuerySelector(selectorStr, delayTime) {
         });
     });
 }
+function delayGetClientRect(_a) {
+    var selectorStr = _a.selectorStr, _b = _a.delayTime, delayTime = _b === void 0 ? 500 : _b;
+    var selector = Taro.createSelectorQuery();
+    return new Promise(function (resolve) {
+        delay(delayTime).then(function () {
+            selector
+                .select(selectorStr)
+                .boundingClientRect()
+                .exec(function (res) {
+                resolve(res);
+            });
+        });
+    });
+}
 function uuid(len, radix) {
     if (len === void 0) { len = 8; }
     if (radix === void 0) { radix = 16; }
@@ -3634,7 +3686,7 @@ var AtModal = /** @class */ (function (_super) {
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore
                             dangerouslySetInnerHTML: {
-                                __html: content.replace(/\n/g, '<br/>')
+                                __html: content.replace(/\\n/g, '<br/>')
                             } })) : (React.createElement(Text, null, content))))),
                     isRenderAction && (React.createElement(AtModalAction, { isSimple: true },
                         cancelText && (React.createElement(Button, { onClick: this.handleCancel }, cancelText)),
@@ -5179,7 +5231,8 @@ var AtSwipeAction = /** @class */ (function (_super) {
             }
         };
         _this.onTouchEnd = function (e) {
-            if (_this.moveX === -_this.maxOffsetSize) {
+            var maxOffsetSize = _this.state.maxOffsetSize;
+            if (_this.moveX === -maxOffsetSize) {
                 _this._reset(true);
                 _this.handleOpened(e);
                 return;
@@ -5194,7 +5247,7 @@ var AtSwipeAction = /** @class */ (function (_super) {
                 _this.handleClosed(e);
                 return;
             }
-            if (Math.abs(_this.moveX) < _this.maxOffsetSize * _this.moveRatio) {
+            if (Math.abs(_this.moveX) < maxOffsetSize * _this.moveRatio) {
                 _this._reset(false);
                 _this.handleClosed(e);
             }
@@ -5206,41 +5259,95 @@ var AtSwipeAction = /** @class */ (function (_super) {
         _this.onChange = function (e) {
             _this.moveX = e.detail.x;
         };
-        var isOpened = props.isOpened, maxDistance = props.maxDistance, areaWidth = props.areaWidth, moveRatio = props.moveRatio;
-        _this.maxOffsetSize = maxDistance;
+        var isOpened = props.isOpened, moveRatio = props.moveRatio;
         _this.state = {
             componentId: uuid(),
             // eslint-disable-next-line no-extra-boolean-cast
-            offsetSize: !!isOpened ? -_this.maxOffsetSize : 0,
+            offsetSize: 0,
             _isOpened: !!isOpened,
-            needAnimation: false
+            needAnimation: false,
+            eleWidth: 0,
+            maxOffsetSize: 0
         };
         _this.moveX = _this.state.offsetSize;
-        _this.eleWidth = areaWidth;
         _this.moveRatio = moveRatio || 0.5;
         return _this;
     }
+    AtSwipeAction.prototype.componentDidMount = function () {
+        this.getAreaWidth();
+    };
+    // 当 eleWidth 发生变化时，需要重新计算 maxOffsetSize
+    AtSwipeAction.prototype.componentDidUpdate = function (_, prevState) {
+        var eleWidth = this.state.eleWidth;
+        if (prevState.eleWidth !== eleWidth) {
+            this.getMaxOffsetSize();
+        }
+    };
     AtSwipeAction.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
         var isOpened = nextProps.isOpened;
-        var _isOpened = this.state._isOpened;
+        var _a = this.state, _isOpened = _a._isOpened, maxOffsetSize = _a.maxOffsetSize;
         if (isOpened !== _isOpened) {
-            this.moveX = isOpened ? 0 : this.maxOffsetSize;
+            this.moveX = isOpened ? 0 : maxOffsetSize;
             this._reset(!!isOpened); // TODO: Check behavior
         }
     };
+    /**
+     * 获取滑动区域宽度
+     */
+    AtSwipeAction.prototype.getAreaWidth = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var systemInfo;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, Taro.getSystemInfo()];
+                    case 1:
+                        systemInfo = _a.sent();
+                        this.setState({
+                            eleWidth: systemInfo.windowWidth
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 获取最大偏移量
+     */
+    AtSwipeAction.prototype.getMaxOffsetSize = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var componentId, actionOptionsRect, maxOffsetSize;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        componentId = this.state.componentId;
+                        return [4 /*yield*/, delayGetClientRect({
+                                selectorStr: "#swipeActionOptions-" + componentId
+                            })];
+                    case 1:
+                        actionOptionsRect = _a.sent();
+                        maxOffsetSize = actionOptionsRect[0].width;
+                        this.setState({
+                            maxOffsetSize: maxOffsetSize
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     AtSwipeAction.prototype._reset = function (isOpened) {
         var _this = this;
         if (isOpened) {
+            var maxOffsetSize = this.state.maxOffsetSize;
             if (process.env.TARO_ENV === 'jd') {
                 this.setState({
                     _isOpened: true,
-                    offsetSize: -this.maxOffsetSize + 0.01
+                    offsetSize: -maxOffsetSize + 0.01
                 });
             }
             else {
                 this.setState({
                     _isOpened: true,
-                    offsetSize: -this.maxOffsetSize
+                    offsetSize: -maxOffsetSize
                 });
             }
         }
@@ -5257,24 +5364,21 @@ var AtSwipeAction = /** @class */ (function (_super) {
     };
     AtSwipeAction.prototype.render = function () {
         var _this = this;
-        var _a = this.state, componentId = _a.componentId, offsetSize = _a.offsetSize;
+        var _a = this.state, componentId = _a.componentId, maxOffsetSize = _a.maxOffsetSize, eleWidth = _a.eleWidth, offsetSize = _a.offsetSize;
         var _b = this.props, options = _b.options, disabled = _b.disabled;
         var rootClass = classnames('at-swipe-action', this.props.className);
         return (React.createElement(View, { id: "swipeAction-" + componentId, className: rootClass, style: {
-                width: this.eleWidth + "px"
+                width: eleWidth + "px"
             } },
             React.createElement(MovableArea, { className: 'at-swipe-action__area', style: {
-                    width: this.eleWidth + this.maxOffsetSize + "px",
-                    transform: "translate(-" + this.maxOffsetSize + "px, 0)"
+                    width: eleWidth + "px"
                 } },
                 React.createElement(MovableView, { className: 'at-swipe-action__content', direction: 'horizontal', damping: 50, x: offsetSize, onTouchEnd: this.onTouchEnd, onChange: this.onChange, disabled: disabled, style: {
-                        width: this.eleWidth + "px",
-                        left: this.maxOffsetSize + "px"
+                        width: eleWidth + maxOffsetSize + "px"
                     } },
                     this.props.children,
                     Array.isArray(options) && options.length > 0 ? (React.createElement(AtSwipeActionOptions, { options: options, componentId: componentId, customStyle: {
-                            transform: "translate(" + this.maxOffsetSize + "px, 0)",
-                            opacity: 1
+                            opacity: maxOffsetSize ? 1 : 0
                         } }, options.map(function (item, key) { return (React.createElement(View, { key: item.text + "-" + key, style: item.style, onClick: function (e) { return _this.handleClick(item, key, e); }, className: classnames('at-swipe-action__option', item.className) },
                         React.createElement(Text, { className: 'option__text' }, item.text))); }))) : null))));
     };
@@ -7639,11 +7743,12 @@ function handleActive(args, item) {
     var dayjsEnd = dayjs_min(end);
     var dayjsStart = start ? dayjs_min(start) : dayjsEnd;
     item.isSelected =
-        (_value === null || _value === void 0 ? void 0 : _value.isSame(dayjsEnd)) || (_value === null || _value === void 0 ? void 0 : _value.isSame(dayjsStart)) ||
-            ((_value === null || _value === void 0 ? void 0 : _value.isAfter(dayjsStart)) && (_value === null || _value === void 0 ? void 0 : _value.isBefore(dayjsEnd)));
-    item.isSelectedHead = _value === null || _value === void 0 ? void 0 : _value.isSame(dayjsStart);
-    item.isSelectedTail = _value === null || _value === void 0 ? void 0 : _value.isSame(dayjsEnd);
-    item.isToday = (_value === null || _value === void 0 ? void 0 : _value.diff(dayjs_min(Date.now()).startOf('day'), 'day')) === 0;
+        _value.isSame(dayjsEnd) ||
+            _value.isSame(dayjsStart) ||
+            (_value.isAfter(dayjsStart) && _value.isBefore(dayjsEnd));
+    item.isSelectedHead = _value.isSame(dayjsStart);
+    item.isSelectedTail = _value.isSame(dayjsEnd);
+    item.isToday = _value.diff(dayjs_min(Date.now()).startOf('day'), 'day') === 0;
     return item;
 }
 function handleMarks(args, item) {
@@ -7685,8 +7790,8 @@ function handleDisabled(args, item) {
     var dayjsMinDate = dayjs_min(minDate);
     var dayjsMaxDate = dayjs_min(maxDate);
     item.isDisabled =
-        !!(minDate && (_value === null || _value === void 0 ? void 0 : _value.isBefore(dayjsMinDate))) ||
-            !!(maxDate && (_value === null || _value === void 0 ? void 0 : _value.isAfter(dayjsMaxDate)));
+        !!(minDate && _value.isBefore(dayjsMinDate)) ||
+            !!(maxDate && _value.isAfter(dayjsMaxDate));
     return item;
 }
 function handleValid(args, item) {
@@ -7699,7 +7804,7 @@ function handleValid(args, item) {
         });
         item.isDisabled = !isInclude;
     }
-    delete item._value;
+    // delete item._value
     return item;
 }
 var plugins = [handleActive, handleMarks, handleDisabled, handleValid];