@tuya/miniapp-smart-ui 2.13.5-beta-0

package/lib/datetime-picker/index.js

@@ -0,0 +1,526 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var validator_1 = require("../common/validator");
+var shared_1 = require("../picker/shared");
+var utils_1 = require("../common/utils");
+var currentYear = new Date().getFullYear();
+function isValidDate(date) {
+    return (0, validator_1.isDef)(date) && !isNaN(new Date(date).getTime());
+}
+function padZero(val) {
+    return "00".concat(val).slice(-2);
+}
+function times(n, iteratee) {
+    var index = -1;
+    var result = Array(n < 0 ? 0 : n);
+    while (++index < n) {
+        result[index] = iteratee(index);
+    }
+    return result;
+}
+function getTrueValue(formattedValue) {
+    if (formattedValue === undefined) {
+        formattedValue = '1';
+    }
+    while (isNaN(parseInt(formattedValue, 10))) {
+        formattedValue = formattedValue.slice(1);
+    }
+    return parseInt(formattedValue, 10);
+}
+function getMonthEndDay(year, month) {
+    return 32 - new Date(year, month - 1, 32).getDate();
+}
+function findIntersection(range1, range2) {
+    var start1 = range1[0], end1 = range1[1];
+    var start2 = range2[0], end2 = range2[1];
+    // 确定交集的开始和结束
+    var intersectionStart = Math.max(start1, start2);
+    var intersectionEnd = Math.min(end1, end2);
+    // 检查是否有交集
+    if (intersectionStart <= intersectionEnd) {
+        return [intersectionStart, intersectionEnd];
+    }
+    return []; // 没有交集
+}
+var defaultFormatter = function (type, value) {
+    return value;
+};
+(0, component_1.SmartComponent)({
+    classes: ['active-class', 'toolbar-class', 'column-class'],
+    props: __assign(__assign({}, shared_1.pickerProps), { value: {
+            type: null,
+            observer: 'updateValue',
+        }, filter: null, type: {
+            type: String,
+            value: 'datetime',
+            observer: 'updateValue',
+        }, showToolbar: {
+            type: Boolean,
+            value: true,
+        }, locale: {
+            type: Object,
+        }, formatter: {
+            type: null,
+            value: defaultFormatter,
+        }, amText: {
+            type: String,
+            value: 'AM',
+        }, pmText: {
+            type: String,
+            value: 'PM',
+        }, columnsOrder: {
+            type: Array,
+            value: [],
+        }, is12HourClock: {
+            type: Boolean,
+            value: false,
+        }, minDate: {
+            type: Number,
+            value: new Date(currentYear - 10, 0, 1).getTime(),
+            observer: 'updateValue',
+        }, maxDate: {
+            type: Number,
+            value: new Date(currentYear + 10, 11, 31).getTime(),
+            observer: 'updateValue',
+        }, minHour: {
+            type: Number,
+            value: 0,
+            observer: 'updateValue',
+        }, maxHour: {
+            type: Number,
+            value: 23,
+            observer: 'updateValue',
+        }, minMinute: {
+            type: Number,
+            value: 0,
+            observer: 'updateValue',
+        }, maxMinute: {
+            type: Number,
+            value: 59,
+            observer: 'updateValue',
+        }, formatterMap: {
+            type: Object,
+            value: undefined,
+        }, columnStyles: {
+            type: Object,
+            value: undefined,
+        }, fontStyles: {
+            type: Object,
+            value: undefined,
+        }, loopMap: {
+            type: Object,
+            value: undefined,
+            observer: 'updateValue',
+        } }),
+    data: {
+        part: 'am',
+        innerValue: Date.now(),
+        isCreated: false,
+        columns: [],
+    },
+    created: function () {
+        var innerValue = this.correctValue(this.data.value);
+        this.updateColumnValue(innerValue);
+        if (innerValue !== this.data.value) {
+            this.$emit('input', innerValue);
+        }
+        this.setData({
+            isCreated: true,
+        });
+    },
+    methods: {
+        updateValue: function () {
+            var _a = this.data, value = _a.value, innerValue = _a.innerValue, isCreated = _a.isCreated;
+            if (!isCreated)
+                return;
+            var val = this.correctValue(value);
+            var isEqual = val === innerValue;
+            this.updateColumnValue(val);
+            if (!isEqual) {
+                this.$emit('input', val);
+            }
+        },
+        getPicker: function () {
+            if (this.picker == null) {
+                this.picker = this.selectComponent('.smart-datetime-picker');
+                var picker_1 = this.picker;
+                var setColumnValues_1 = picker_1.setColumnValues;
+                picker_1.setColumnValues = function () {
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
+                    return setColumnValues_1.apply(picker_1, __spreadArray(__spreadArray([], args, true), [false], false));
+                };
+            }
+            return this.picker;
+        },
+        getTimeBoundary: function () {
+            var _a = this.data, type = _a.type, is12HourClock = _a.is12HourClock, minHour = _a.minHour, maxHour = _a.maxHour, minMinute = _a.minMinute, maxMinute = _a.maxMinute;
+            if (type === 'time' && is12HourClock) {
+                if (minHour === 1 && maxHour === 24) {
+                    return {
+                        minHour: 0,
+                        maxHour: 23,
+                        minMinute: minMinute,
+                        maxMinute: maxMinute,
+                    };
+                }
+            }
+            return {
+                minHour: minHour,
+                maxHour: maxHour,
+                minMinute: minMinute,
+                maxMinute: maxMinute,
+            };
+        },
+        formatterFunc: function (type, value, data) {
+            var _a;
+            var _b, _c;
+            if (type === 'part') {
+                return value === 'am' ? data.amText : data.pmText;
+            }
+            var _d = (_b = this === null || this === void 0 ? void 0 : this.data) !== null && _b !== void 0 ? _b : data, formatterMap = _d.formatterMap, _e = _d.formatter, formatter = _e === void 0 ? defaultFormatter : _e;
+            var mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
+            if (typeof mapDetail === 'string') {
+                return (0, utils_1.replacePlaceholders)(mapDetail, (_a = {}, _a[type] = value, _a));
+            }
+            if (typeof mapDetail === 'object') {
+                return (_c = mapDetail[value]) !== null && _c !== void 0 ? _c : formatter(type, value);
+            }
+            return formatter(type, value);
+        },
+        // 某一列是否循环滚动，loopMap 未配置该列时使用默认值（年份、12 小时制上下午不循环）
+        getColumnLoop: function (type) {
+            var _a;
+            var loopMap = this.data.loopMap;
+            var loop = (_a = loopMap === null || loopMap === void 0 ? void 0 : loopMap[type]) !== null && _a !== void 0 ? _a : (type === '12HourClock' ? loopMap === null || loopMap === void 0 ? void 0 : loopMap.part : undefined);
+            if (typeof loop === 'boolean') {
+                return loop;
+            }
+            return !['12HourClock', 'year'].includes(type);
+        },
+        updateColumns: function (values) {
+            var _this = this;
+            var _a = this.data, locale = _a.locale, columnStyles = _a.columnStyles, fontStyles = _a.fontStyles;
+            var results = this.getOriginColumns().map(function (column, index) {
+                var value = values[index];
+                var list = column.values.map(function (value) { return _this.formatterFunc(column.type, value, _this.data); });
+                var activeIndex = list.findIndex(function (item) { return item === value; });
+                return {
+                    values: list,
+                    order: column.order,
+                    unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
+                    style: columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[column.type],
+                    fontStyle: fontStyles === null || fontStyles === void 0 ? void 0 : fontStyles[column.type],
+                    activeIndex: activeIndex === -1 ? 0 : activeIndex,
+                    loop: _this.getColumnLoop(column.type),
+                };
+            });
+            return this.setData({ columns: results });
+        },
+        getOriginColumns: function () {
+            var _a = this.data, part = _a.part, filter = _a.filter, is12HourClock = _a.is12HourClock, type = _a.type, amText = _a.amText, pmText = _a.pmText, columnsOrder = _a.columnsOrder;
+            var _b = this.getTimeBoundary(), minHour = _b.minHour, maxHour = _b.maxHour;
+            var results = this.getRanges().map(function (_a, index) {
+                var timeType = _a.type, range = _a.range;
+                var order = columnsOrder[index];
+                var values = times(range[1] - range[0] + 1, function (index) {
+                    var value = range[0] + index;
+                    if (is12HourClock && type === 'time' && timeType === 'hour') {
+                        if (part === 'pm') {
+                            if (value === 12)
+                                return '12';
+                            return padZero(value - 12);
+                        }
+                        if (value === 0)
+                            return '12';
+                        return padZero(value);
+                    }
+                    return timeType === 'year' ? "".concat(value) : padZero(value);
+                });
+                if (filter) {
+                    values = filter(timeType, values);
+                }
+                return { type: timeType, values: values, order: order };
+            });
+            if (is12HourClock && type === 'time') {
+                return __spreadArray([
+                    {
+                        type: '12HourClock',
+                        values: minHour > 11 ? [pmText] : maxHour < 12 ? [amText] : [amText, pmText],
+                        order: columnsOrder[0],
+                    }
+                ], results.map(function (item, index) { return (__assign(__assign({}, item), { order: columnsOrder[index + 1] })); }), true).filter(Boolean);
+            }
+            return results;
+        },
+        getRanges: function () {
+            var data = this.data;
+            if (data.type === 'time' && data.is12HourClock) {
+                var _a = this.getTimeBoundary(), minHour_1 = _a.minHour, maxHour_1 = _a.maxHour, minMinute_1 = _a.minMinute, maxMinute_1 = _a.maxMinute;
+                var part = data.part;
+                var time12Range = part === 'pm' ? [12, 23] : [0, 11];
+                return [
+                    {
+                        type: 'hour',
+                        range: findIntersection(time12Range, [minHour_1, maxHour_1]),
+                    },
+                    {
+                        type: 'minute',
+                        range: [minMinute_1, maxMinute_1],
+                    },
+                ];
+            }
+            if (data.type === 'time') {
+                var _b = this.getTimeBoundary(), minHour_2 = _b.minHour, maxHour_2 = _b.maxHour, minMinute_2 = _b.minMinute, maxMinute_2 = _b.maxMinute;
+                return [
+                    {
+                        type: 'hour',
+                        range: [minHour_2, maxHour_2],
+                    },
+                    {
+                        type: 'minute',
+                        range: [minMinute_2, maxMinute_2],
+                    },
+                ];
+            }
+            var _c = this.getBoundary('max', data.innerValue), maxYear = _c.maxYear, maxDate = _c.maxDate, maxMonth = _c.maxMonth, maxHour = _c.maxHour, maxMinute = _c.maxMinute;
+            var _d = this.getBoundary('min', data.innerValue), minYear = _d.minYear, minDate = _d.minDate, minMonth = _d.minMonth, minHour = _d.minHour, minMinute = _d.minMinute;
+            var result = [
+                {
+                    type: 'year',
+                    range: [minYear, maxYear],
+                },
+                {
+                    type: 'month',
+                    range: [minMonth, maxMonth],
+                },
+                {
+                    type: 'day',
+                    range: [minDate, maxDate],
+                },
+                {
+                    type: 'hour',
+                    range: [minHour, maxHour],
+                },
+                {
+                    type: 'minute',
+                    range: [minMinute, maxMinute],
+                },
+            ];
+            if (data.type === 'date')
+                result.splice(3, 2);
+            if (data.type === 'year-month')
+                result.splice(2, 3);
+            return result;
+        },
+        correctValue: function (value) {
+            var data = this.data;
+            // validate value
+            var isDateType = data.type !== 'time';
+            if (isDateType && !isValidDate(value)) {
+                value = data.minDate;
+            }
+            else if (!isDateType && !value) {
+                var minHour = data.minHour;
+                value = "".concat(padZero(minHour), ":00");
+            }
+            // time type
+            if (!isDateType) {
+                var _a = this.getTimeBoundary(), minHour = _a.minHour, maxHour = _a.maxHour, minMinute = _a.minMinute, maxMinute = _a.maxMinute;
+                var _b = value.split(':'), hour = _b[0], minute = _b[1];
+                if (Number(hour) === 24) {
+                    hour = 0;
+                }
+                hour = padZero((0, utils_1.range)(hour, minHour, maxHour));
+                minute = padZero((0, utils_1.range)(minute, minMinute, maxMinute));
+                return "".concat(hour, ":").concat(minute);
+            }
+            // date type
+            value = Math.max(value, data.minDate);
+            value = Math.min(value, data.maxDate);
+            return value;
+        },
+        getBoundary: function (type, innerValue) {
+            var _a;
+            var value = new Date(innerValue);
+            var boundary = new Date(this.data["".concat(type, "Date")]);
+            var year = boundary.getFullYear();
+            var month = 1;
+            var date = 1;
+            var hour = 0;
+            var minute = 0;
+            if (type === 'max') {
+                month = 12;
+                date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+                hour = 23;
+                minute = 59;
+            }
+            if (value.getFullYear() === year) {
+                month = boundary.getMonth() + 1;
+                if (value.getMonth() + 1 === month) {
+                    date = boundary.getDate();
+                    if (value.getDate() === date) {
+                        hour = boundary.getHours();
+                        if (value.getHours() === hour) {
+                            minute = boundary.getMinutes();
+                        }
+                    }
+                }
+            }
+            return _a = {},
+                _a["".concat(type, "Year")] = year,
+                _a["".concat(type, "Month")] = month,
+                _a["".concat(type, "Date")] = date,
+                _a["".concat(type, "Hour")] = hour,
+                _a["".concat(type, "Minute")] = minute,
+                _a;
+        },
+        onCancel: function () {
+            this.$emit('cancel');
+        },
+        onConfirm: function () {
+            this.$emit('confirm', this.data.innerValue);
+        },
+        onChange: function () {
+            var data = this.data;
+            var value;
+            var picker = this.getPicker();
+            var indexes = picker.getIndexes();
+            if (data.type === 'time' && data.is12HourClock) {
+                var originColumns_1 = this.getOriginColumns();
+                var _a = indexes.map(function (item, index) { return originColumns_1[index].values[item]; }), partText = _a[0], hour = _a[1], minute = _a[2];
+                var part = partText === this.data.pmText ? 'pm' : 'am';
+                this.setData({
+                    part: part,
+                });
+                value = "".concat(part === 'pm'
+                    ? hour === '12'
+                        ? 12
+                        : Number(hour) + 12
+                    : hour === '12'
+                        ? 0
+                        : Number(hour), ":").concat(Number(minute));
+            }
+            else if (data.type === 'time') {
+                var originColumns = this.getOriginColumns();
+                value = "".concat(+originColumns[0].values[indexes[0]], ":").concat(+originColumns[1].values[indexes[1]]);
+            }
+            else {
+                var originColumns_2 = this.getOriginColumns();
+                var values = indexes.map(function (value, index) { return originColumns_2[index].values[value]; });
+                var year = getTrueValue(values[0]);
+                var month = getTrueValue(values[1]);
+                var maxDate = getMonthEndDay(year, month);
+                var date = getTrueValue(values[2]);
+                if (data.type === 'year-month') {
+                    date = 1;
+                }
+                date = date > maxDate ? maxDate : date;
+                var hour = 0;
+                var minute = 0;
+                if (data.type === 'datetime') {
+                    hour = getTrueValue(values[3]);
+                    minute = getTrueValue(values[4]);
+                }
+                value = new Date(year, month - 1, date, hour, minute);
+            }
+            value = this.correctValue(value);
+            this.updateColumnValue(value);
+            picker.value = value;
+            this.$emit('input', value);
+            this.$emit('change', picker);
+        },
+        updateColumnValue: function (value) {
+            var values = [];
+            var _a = this.data, columns = _a.columns, part = _a.part, outerValue = _a.value, rest = __rest(_a, ["columns", "part", "value"]);
+            rest.innerValue = value;
+            var dataStr = JSON.stringify(rest);
+            if (dataStr === this.preDataStr)
+                return;
+            this.preDataStr = dataStr;
+            var _b = this.data, type = _b.type, is12HourClock = _b.is12HourClock;
+            var formatter = this.formatterFunc;
+            if (type === 'time' && is12HourClock) {
+                var _c = value.split(':'), hour = _c[0], minute = _c[1];
+                var part_1 = Number(hour) < 12 ? 'am' : 'pm';
+                this.setData({
+                    part: part_1,
+                });
+                values = [
+                    formatter('part', part_1, this.data),
+                    formatter('hour', part_1 === 'am'
+                        ? hour === '0'
+                            ? '12'
+                            : hour
+                        : hour === '12'
+                            ? '12'
+                            : padZero(Number(hour) - 12), this.data),
+                    formatter('minute', minute, this.data),
+                ];
+            }
+            else if (type === 'time') {
+                var pair = value.split(':');
+                values = [formatter('hour', pair[0], this.data), formatter('minute', pair[1], this.data)];
+            }
+            else {
+                var date = new Date(value);
+                values = [
+                    formatter('year', "".concat(date.getFullYear()), this.data),
+                    formatter('month', padZero(date.getMonth() + 1), this.data),
+                ];
+                if (type === 'date') {
+                    values.push(formatter('day', padZero(date.getDate()), this.data));
+                }
+                if (type === 'datetime') {
+                    values.push(formatter('day', padZero(date.getDate()), this.data), formatter('hour', padZero(date.getHours()), this.data), formatter('minute', padZero(date.getMinutes()), this.data));
+                }
+            }
+            this.setData({ innerValue: value });
+            this.updateColumns(values);
+            // picker.setValues(values);
+            // return this.set({ innerValue: value })
+            //   .then(() => this.updateColumns())
+            //   .then(() => picker.setValues(values));
+        },
+        onAnimationStart: function () {
+            this.$emit('animation-start');
+        },
+        onAnimationEnd: function () {
+            this.$emit('animation-end');
+        },
+    },
+});

package/lib/datetime-picker/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-picker": "../picker/index"
+  }
+}

package/lib/datetime-picker/index.wxml

@@ -0,0 +1,22 @@
+<smart-picker
+  class="smart-datetime-picker"
+  active-class="active-class"
+  toolbar-class="toolbar-class"
+  column-class="column-class"
+  hairline-class="smart-datetime-picker-hairline"
+  title="{{ title }}"
+  columns="{{ columns }}"
+  item-height="{{ itemHeight }}"
+  active-style="{{ activeStyle }}"
+  animation-time="{{ animationTime }}"
+  show-toolbar="{{ showToolbar }}"
+  visible-item-count="{{ visibleItemCount }}"
+  confirm-button-text="{{ confirmButtonText }}"
+  cancel-button-text="{{ cancelButtonText }}"
+  change-animation="{{ changeAnimation }}"
+  bind:change="onChange"
+  bind:confirm="onConfirm"
+  bind:cancel="onCancel"
+  bind:animation-start="onAnimationStart"
+  bind:animation-end="onAnimationEnd"
+/>

package/lib/datetime-picker/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}:host{width:100%}.smart-datetime-picker{--hairline-color:transparent}.smart-datetime-picker-hairline{border-image-slice:1;border-image-source:var(--hairline-border-image-color,var(--smart-ui-border-image,linear-gradient(to right,transparent,rgba(0,0,0,.3),transparent)));border-style:solid;border-width:.5px 0;position:absolute}:root[data-a11y=true] .smart-datetime-picker-hairline{border:none}

package/lib/definitions/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="miniprogram-api-typings" />
+interface SmartComponentInstance {
+    parent: WechatMiniprogram.Component.TrivialInstance;
+    children: WechatMiniprogram.Component.TrivialInstance[];
+    index: number;
+    $emit: (name: string, detail?: unknown, options?: WechatMiniprogram.Component.TriggerEventOption) => void;
+    setView: (value: Record<string, any>, callback?: () => void) => void;
+}
+export type SmartComponentOptions<Data extends WechatMiniprogram.Component.DataOption, Props extends WechatMiniprogram.Component.PropertyOption, Methods extends WechatMiniprogram.Component.MethodOption> = {
+    data?: Data;
+    field?: boolean;
+    classes?: string[];
+    mixins?: string[];
+    props?: Props;
+    relation?: {
+        relations: Record<string, WechatMiniprogram.Component.RelationOption>;
+        mixin: string;
+    };
+    watch?: Record<string, (...args: any[]) => any>;
+    methods?: Methods;
+    beforeCreate?: () => void;
+    created?: () => void;
+    mounted?: () => void;
+    destroyed?: () => void;
+} & ThisType<SmartComponentInstance & WechatMiniprogram.Component.Instance<Data & {
+    name: string;
+    value: any;
+} & Record<string, any>, Props, Methods> & Record<string, any>>;
+export {};

package/lib/definitions/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });