@nutui/nutui-react-taro 2.6.13 → 3.0.0-beta.0

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

@@ -0,0 +1,35 @@
+.nut-countdown {
+  display: var(--nutui-countdown-display, flex);
+  flex-direction: row;
+  align-items: center;
+  color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23));
+  font-size: var(--nutui-countdown-font-size, 10px);
+}
+.nut-countdown-number-primary, .nut-countdown-number, .nut-countdown-unit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--nutui-countdown-height, 14px);
+  font-weight: var(--nutui-countdown-font-weight, 400);
+  font-size: var(--nutui-countdown-font-size, 10px);
+}
+.nut-countdown-number, .nut-countdown-number-primary {
+  min-width: var(--nutui-countdown-width, 20px);
+  padding: var(--nutui-countdown-number-padding, 0 1px);
+  border-radius: var(--nutui-countdown-number-border-radius, 2px);
+  margin: var(--nutui-countdown-number-margin, 0 2px);
+}
+.nut-countdown-number {
+  border: 1px solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-light, #ffebf1));
+  background-color: var(--nutui-countdown-number-background-color, transparent);
+  color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23));
+  text-align: center;
+}
+.nut-countdown-number-primary {
+  border: 1px solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-countdown-number-primary-color, #ffffff);
+}
+.nut-countdown-unit {
+  color: var(--nutui-color-primary, #ff0f23);
+}

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

@@ -0,0 +1,57 @@
+.nut-countdown {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: #ff0f23;
+  font-size: 10px;
+}
+.nut-countdown-number-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-unit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-number {
+  min-width: 20px;
+  padding: 0 1px;
+  border-radius: 2px;
+  margin: 0 2px;
+}
+.nut-countdown-number-primary {
+  min-width: 20px;
+  padding: 0 1px;
+  border-radius: 2px;
+  margin: 0 2px;
+}
+.nut-countdown-number {
+  border: 1px solid #ffebf1;
+  background-color: transparent;
+  color: #ff0f23;
+  text-align: center;
+}
+.nut-countdown-number-primary {
+  border: 1px solid #ff0f23;
+  background-color: #ff0f23;
+  color: #ffffff;
+}
+.nut-countdown-unit {
+  color: #ff0f23;
+}

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

@@ -0,0 +1,42 @@
+.nut-countup {
+  &-list {
+    display: inline-flex;
+    height: $countup-height;
+    overflow: hidden;
+    direction: ltr;
+  }
+
+  &-listitem {
+    height: $countup-height;
+    overflow: hidden;
+    color: $color-title;
+    font-size: $countup-base-size;
+    font-weight: $font-weight-bold;
+
+    &-number {
+      margin: 0 $countup-lr-margin;
+      border-radius: $countup-border-radius;
+      color: $countup-color;
+      background-color: $countup-bg-color;
+    }
+  }
+
+  &-separator {
+    display: flex;
+    height: 80%;
+    align-items: flex-end;
+    color: $countup-bg-color;
+  }
+
+  &-number {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: $countup-width;
+
+    span {
+      height: $countup-height;
+      line-height: $countup-height;
+    }
+  }
+}

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

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

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

@@ -0,0 +1 @@
+import './countup.scss';

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

@@ -0,0 +1,35 @@
+.nut-countup-list {
+  display: inline-flex;
+  height: var(--nutui-countup-height, 32px);
+  overflow: hidden;
+  direction: ltr;
+}
+.nut-countup-listitem {
+  height: var(--nutui-countup-height, 32px);
+  overflow: hidden;
+  color: var(--nutui-gray-7, #1a1a1a);
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 500);
+}
+.nut-countup-listitem-number {
+  margin: 0 var(--nutui-countup-lr-margin, 0);
+  border-radius: var(--nutui-countup-border-radius, 4px);
+  color: var(--nutui-countup-color, var(--nutui-gray-7, #1a1a1a));
+  background-color: var(--nutui-countup-bg-color, inherit);
+}
+.nut-countup-separator {
+  display: flex;
+  height: 80%;
+  align-items: flex-end;
+  color: var(--nutui-countup-bg-color, inherit);
+}
+.nut-countup-number {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--nutui-countup-width, auto);
+}
+.nut-countup-number span {
+  height: var(--nutui-countup-height, 32px);
+  line-height: var(--nutui-countup-height, 32px);
+}

package/dist/es/packages/datepicker/datepicker.d.ts

@@ -0,0 +1,91 @@
+import React, { FunctionComponent } from 'react';
+import { PickerOption, PickerProps } from "../picker/index";
+import { BasicComponent } from "../../utils/typings";
+export interface DatePickerProps extends BasicComponent {
+    /**
+    * 受控
+    * @default null
+    */
+    value?: Date
+    /**
+    * 初始值
+    * @default null
+    */
+    defaultValue?: Date
+    /**
+    * 是否可见
+    * @default false
+    */
+    visible: boolean
+    /**
+    * 设置标题
+    * @default null
+    */
+    title: string
+    /**
+    * 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes
+    * @default date
+    */
+    type: 'date' | 'time' | 'year-month' | 'month-day' | 'datehour' | 'datetime' | 'hour-minutes'
+    /**
+    * 每列是否展示中文
+    * @default false
+    */
+    showChinese: boolean
+    /**
+    * 分钟步进值
+    * @default 1
+    */
+    minuteStep: number
+    /**
+    * 开始日期
+    * @default 十年前
+    */
+    startDate: Date
+    /**
+    * 结束日期
+    * @default 十年后
+    */
+    endDate: Date
+    /**
+    * 是否开启3D效果
+    * @default true
+    */
+    threeDimensional: boolean
+    /**
+    * 透传picker属性
+    * @default -
+    */
+    pickerProps: Partial<Omit<PickerProps, 'defaultValue' | 'threeDimensional' | 'title' | 'value' | 'onConfirm' | 'onClose' | 'onCancel' | 'onChange'>>
+    /**
+    * 选项格式化函数
+    * @default -
+    */
+    formatter: (type: string, option: PickerOption) => PickerOption
+    /**
+    * 选项过滤函数
+    * @default -
+    */
+    filter: (type: string, option: PickerOption[]) => PickerOption[]
+    /**
+    * 确定和取消时，都触发
+    * @default -
+    */
+    onClose: () => void
+    /**
+    * 点击取消按钮时触发
+    * @default -
+    */
+    onCancel: () => void
+    /**
+    * 点击确定按钮时触发
+    * @default -
+    */
+    onConfirm: (selectedOptions: PickerOption[], selectedValue: (string | number)[]) => void
+    /**
+    * 选项改变时触发
+    * @default -
+    */
+    onChange?: (selectedOptions: PickerOption[], selectedValue: (string | number)[], columnIndex: number) => void
+}
+export declare const DatePicker: FunctionComponent<Partial<DatePickerProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>>;

package/dist/es/packages/datepicker/datepicker.js

@@ -0,0 +1,320 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import React, { useState, useEffect } from "react";
+import { View } from "@tarojs/components";
+import Picker from "../picker/index";
+import { useConfig } from "../configprovider/index";
+import { usePropsValue } from "../../utils/use-props-value";
+import { ComponentDefaults } from "../../utils/typings";
+import { isDate } from "../../utils/is-date";
+import { padZero } from "../../utils/pad-zero";
+var currentYear = new Date().getFullYear();
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    visible: false,
+    title: '',
+    type: 'date',
+    showChinese: false,
+    threeDimensional: true,
+    minuteStep: 1,
+    startDate: new Date(currentYear - 10, 0, 1),
+    endDate: new Date(currentYear + 10, 11, 31)
+});
+export var DatePicker = function(props) {
+    var getMonthEndDay = function getMonthEndDay(year, month) {
+        return new Date(year, month, 0).getDate();
+    };
+    var _ref = _object_spread({}, defaultProps, props), startDate = _ref.startDate, endDate = _ref.endDate, type = _ref.type, showChinese = _ref.showChinese, minuteStep = _ref.minuteStep, visible = _ref.visible, title = _ref.title, defaultValue = _ref.defaultValue, _ref_pickerProps = _ref.pickerProps, pickerProps = _ref_pickerProps === void 0 ? {} : _ref_pickerProps, formatter = _ref.formatter, onClose = _ref.onClose, onCancel = _ref.onCancel, onConfirm = _ref.onConfirm, filter = _ref.filter, onChange = _ref.onChange, threeDimensional = _ref.threeDimensional, className = _ref.className, style = _ref.style, rest = _object_without_properties(_ref, [
+        "startDate",
+        "endDate",
+        "type",
+        "showChinese",
+        "minuteStep",
+        "visible",
+        "title",
+        "defaultValue",
+        "pickerProps",
+        "formatter",
+        "onClose",
+        "onCancel",
+        "onConfirm",
+        "filter",
+        "onChange",
+        "threeDimensional",
+        "className",
+        "style"
+    ]);
+    var locale = useConfig().locale;
+    var lang = locale.datepicker;
+    var zhCNType = {
+        day: lang.day,
+        year: lang.year,
+        month: lang.month,
+        hour: lang.hour,
+        minute: lang.min,
+        seconds: lang.seconds
+    };
+    var _useState = _sliced_to_array(useState([]), 2), pickerValue = _useState[0], setPickerValue = _useState[1];
+    var _useState1 = _sliced_to_array(useState([]), 2), pickerOptions = _useState1[0], setPickerOptions = _useState1[1];
+    var formatValue = function(value) {
+        if (!value || value && !isDate(value)) {
+            value = startDate;
+        }
+        return Math.min(Math.max(value.getTime(), startDate.getTime()), endDate.getTime());
+    };
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: props.value && formatValue(props.value),
+        defaultValue: props.defaultValue && formatValue(props.defaultValue),
+        finalValue: 0
+    }), 2), selectedDate = _usePropsValue[0], setSelectedDate = _usePropsValue[1];
+    var getBoundary = function(type, value) {
+        var boundary = type === 'min' ? startDate : endDate;
+        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;
+        }
+        var seconds = minute;
+        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();
+                    }
+                }
+            }
+        }
+        var _obj;
+        return _obj = {}, _define_property(_obj, "".concat(type, "Year"), year), _define_property(_obj, "".concat(type, "Month"), month), _define_property(_obj, "".concat(type, "Date"), date), _define_property(_obj, "".concat(type, "Hour"), hour), _define_property(_obj, "".concat(type, "Minute"), minute), _define_property(_obj, "".concat(type, "Seconds"), seconds), _obj;
+    };
+    var ranges = function() {
+        var selected = new Date(selectedDate);
+        if (!selected) return [];
+        var _getBoundary = getBoundary('max', selected), maxYear = _getBoundary.maxYear, maxDate = _getBoundary.maxDate, maxMonth = _getBoundary.maxMonth, maxHour = _getBoundary.maxHour, maxMinute = _getBoundary.maxMinute, maxSeconds = _getBoundary.maxSeconds;
+        var _getBoundary1 = getBoundary('min', selected), minYear = _getBoundary1.minYear, minDate = _getBoundary1.minDate, minMonth = _getBoundary1.minMonth, minHour = _getBoundary1.minHour, minMinute = _getBoundary1.minMinute, minSeconds = _getBoundary1.minSeconds;
+        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
+                ]
+            },
+            {
+                type: 'seconds',
+                range: [
+                    minSeconds,
+                    maxSeconds
+                ]
+            }
+        ];
+        switch(type.toLocaleLowerCase()){
+            case 'date':
+                return result.slice(0, 3);
+            case 'datetime':
+                return result.slice(0, 5);
+            case 'time':
+                return result.slice(3, 6);
+            case 'year-month':
+                return result.slice(0, 2);
+            case 'hour-minutes':
+                return result.slice(3, 5);
+            case 'month-day':
+                return result.slice(1, 3);
+            case 'datehour':
+                return result.slice(0, 4);
+            default:
+                return result;
+        }
+    };
+    var compareDateChange = function(currentDate, newDate, selectedOptions, index) {
+        var _this;
+        var isEqual = ((_this = new Date(currentDate)) === null || _this === void 0 ? void 0 : _this.getTime()) === (newDate === null || newDate === void 0 ? void 0 : newDate.getTime());
+        if (newDate && isDate(newDate)) {
+            if (!isEqual) {
+                setSelectedDate(formatValue(newDate));
+            }
+            props.onChange && props.onChange(selectedOptions, [
+                String(newDate.getFullYear()),
+                String(newDate.getMonth() + 1),
+                String(newDate.getDate())
+            ], index);
+        }
+    };
+    var handlePickerChange = function(selectedOptions, selectedValue, index) {
+        var rangeType = type.toLocaleLowerCase();
+        if ([
+            'date',
+            'datetime',
+            'datehour',
+            'month-day',
+            'year-month'
+        ].includes(rangeType)) {
+            var formatDate = [];
+            selectedValue.forEach(function(item) {
+                formatDate.push(item);
+            });
+            if (rangeType === 'month-day' && formatDate.length < 3) {
+                formatDate.unshift(new Date(defaultValue || startDate || endDate).getFullYear());
+            }
+            if (rangeType === 'year-month' && formatDate.length < 3) {
+                formatDate.push(new Date(defaultValue || startDate || endDate).getDate());
+            }
+            var year = Number(formatDate[0]);
+            var month = Number(formatDate[1]) - 1;
+            var day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+            var date = null;
+            if (rangeType === 'date' || rangeType === 'month-day' || rangeType === 'year-month') {
+                date = new Date(year, month, day);
+            } else if (rangeType === 'datetime') {
+                date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+            } else if (rangeType === 'datehour') {
+                date = new Date(year, month, day, Number(formatDate[3]));
+            }
+            compareDateChange(selectedDate, date, selectedOptions, index);
+        } else {
+            // 'hour-minutes' 'time'
+            var _selectedValue = _sliced_to_array(selectedValue, 3), hour = _selectedValue[0], minute = _selectedValue[1], seconds = _selectedValue[2];
+            var currentDate = new Date(selectedDate);
+            var year1 = currentDate.getFullYear();
+            var month1 = currentDate.getMonth();
+            var day1 = currentDate.getDate();
+            var date1 = new Date(year1, month1, day1, Number(hour), Number(minute), rangeType === 'time' ? Number(seconds) : 0);
+            compareDateChange(selectedDate, date1, selectedOptions, index);
+        }
+    };
+    var formatOption = function(type, value) {
+        if (formatter) {
+            return formatter(type, {
+                text: padZero(value, 2),
+                value: padZero(value, 2)
+            });
+        }
+        var padMin = padZero(value, 2);
+        var fatter = showChinese ? zhCNType[type] : '';
+        return {
+            text: padMin + fatter,
+            value: padMin
+        };
+    };
+    var generateColumn = function(min, max, val, type, columnIndex) {
+        var _arr_index;
+        var cmin = min;
+        var arr = [];
+        var index = 0;
+        while(cmin <= max){
+            arr.push(formatOption(type, cmin));
+            if (type === 'minute') {
+                cmin += minuteStep;
+            } else {
+                cmin++;
+            }
+            if (cmin <= Number(val)) {
+                index++;
+            }
+        }
+        pickerValue[columnIndex] = (_arr_index = arr[index]) === null || _arr_index === void 0 ? void 0 : _arr_index.value;
+        setPickerValue(_to_consumable_array(pickerValue));
+        if (props.filter && props.filter(type, arr)) {
+            return props.filter(type, arr);
+        }
+        return arr;
+    };
+    var getDateIndex = function(type) {
+        var date = new Date(selectedDate);
+        if (!selectedDate) return 0;
+        if (type === 'year') {
+            return date.getFullYear();
+        }
+        if (type === 'month') {
+            return date.getMonth() + 1;
+        }
+        if (type === 'day') {
+            return date.getDate();
+        }
+        if (type === 'hour') {
+            return date.getHours();
+        }
+        if (type === 'minute') {
+            return date.getMinutes();
+        }
+        if (type === 'seconds') {
+            return date.getSeconds();
+        }
+        return 0;
+    };
+    var columns = function() {
+        var val = ranges().map(function(res, columnIndex) {
+            return generateColumn(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
+        });
+        return val || [];
+    };
+    useEffect(function() {
+        setPickerOptions(columns());
+    }, [
+        selectedDate,
+        startDate,
+        endDate
+    ]);
+    return /*#__PURE__*/ React.createElement(View, _object_spread({
+        className: "nut-datepicker ".concat(className),
+        style: style,
+        catchMove: true
+    }, rest), pickerOptions.length && /*#__PURE__*/ React.createElement(Picker, _object_spread_props(_object_spread({}, pickerProps), {
+        title: title,
+        visible: visible,
+        options: pickerOptions,
+        onClose: onClose,
+        onCancel: onCancel,
+        value: pickerValue,
+        onConfirm: function(options, value) {
+            return onConfirm && onConfirm(options, value);
+        },
+        onChange: function(options, value, index) {
+            return handlePickerChange(options, value, index);
+        },
+        threeDimensional: threeDimensional
+    })));
+};
+DatePicker.defaultProps = defaultProps;
+DatePicker.displayName = 'NutDatePicker';

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

@@ -0,0 +1,3 @@
+import { DatePicker } from "./datepicker";
+export type { DatePickerProps } from "./datepicker";
+export default DatePicker;

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

@@ -0,0 +1,2 @@
+import { DatePicker } from "./datepicker";
+export default DatePicker;

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

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,2 @@
+import '../../picker/style';
+import './datepicker.scss';