@nutui/nutui-react 3.0.0-beta.9 → 3.0.1

package/dist/cjs/packages/datepicker/datepicker.js

@@ -2,27 +2,28 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "DatePicker", {
+Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return DatePicker;
+        return _default;
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _define_property = require("@swc/helpers/_/_define_property");
 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 _reactfastcompare = /*#__PURE__*/ _interop_require_default._(require("react-fast-compare"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _picker = /*#__PURE__*/ _interop_require_default._(require("../picker"));
 var _configprovider = require("../configprovider");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _typings = require("../../utils/typings");
 var _isdate = require("../../utils/is-date");
-var _padzero = require("../../utils/pad-zero");
+var _utils = require("./utils");
 var currentYear = new Date().getFullYear();
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     visible: false,
@@ -34,11 +35,8 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     startDate: new Date(currentYear - 10, 0, 1),
     endDate: new Date(currentYear + 10, 11, 31)
 });
-var DatePicker = function DatePicker(props) {
-    var getMonthEndDay = function getMonthEndDay(year, month) {
-        return new Date(year, month, 0).getDate();
-    };
-    var _ref = (0, _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 = (0, _object_without_properties._)(_ref, [
+var InternalPicker = function InternalPicker(props, ref) {
+    var _ref = (0, _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, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
         "startDate",
         "endDate",
         "type",
@@ -56,7 +54,8 @@ var DatePicker = function DatePicker(props) {
         "onChange",
         "threeDimensional",
         "className",
-        "style"
+        "style",
+        "children"
     ]);
     var locale = (0, _configprovider.useConfig)().locale;
     var lang = locale.datepicker;
@@ -68,122 +67,37 @@ var DatePicker = function DatePicker(props) {
         minute: lang.min,
         seconds: lang.seconds
     };
+    var classPrefix = 'nut-datepicker';
+    var cls = (0, _classnames.default)(classPrefix, className);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)([]), 2), pickerValue = _useState[0], setPickerValue = _useState[1];
     var _useState1 = (0, _sliced_to_array._)((0, _react.useState)([]), 2), pickerOptions = _useState1[0], setPickerOptions = _useState1[1];
-    var formatValue = function formatValue(value) {
-        if (!value || value && !(0, _isdate.isDate)(value)) {
-            value = startDate;
-        }
-        return Math.min(Math.max(value.getTime(), startDate.getTime()), endDate.getTime());
-    };
     var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
-        value: props.value && formatValue(props.value),
-        defaultValue: props.defaultValue && formatValue(props.defaultValue),
+        value: props.value && (0, _utils.formatValue)(props.value, startDate, endDate),
+        defaultValue: props.defaultValue && (0, _utils.formatValue)(props.defaultValue, startDate, endDate),
         finalValue: 0
     }), 2), selectedDate = _usePropsValue[0], setSelectedDate = _usePropsValue[1];
-    var getBoundary = function getBoundary(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 = {}, (0, _define_property._)(_obj, "".concat(type, "Year"), year), (0, _define_property._)(_obj, "".concat(type, "Month"), month), (0, _define_property._)(_obj, "".concat(type, "Date"), date), (0, _define_property._)(_obj, "".concat(type, "Hour"), hour), (0, _define_property._)(_obj, "".concat(type, "Minute"), minute), (0, _define_property._)(_obj, "".concat(type, "Seconds"), seconds), _obj;
-    };
-    var ranges = function ranges() {
-        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 _useState2 = (0, _sliced_to_array._)((0, _react.useState)(selectedDate), 2), innerDate = _useState2[0], setInnerDate = _useState2[1];
+    var _usePropsValue1 = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
+        value: props.visible,
+        defaultValue: false,
+        finalValue: false
+    }), 2), innerVisible = _usePropsValue1[0], setInnerVisible = _usePropsValue1[1];
+    var actions = {
+        open: function open() {
+            setInnerVisible(true);
+        },
+        close: function close() {
+            setInnerVisible(false);
         }
     };
-    var compareDateChange = function compareDateChange(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());
+    (0, _react.useImperativeHandle)(ref, function() {
+        return actions;
+    });
+    var handleDateComparison = function handleDateComparison(newDate, selectedOptions, index) {
         if (newDate && (0, _isdate.isDate)(newDate)) {
-            if (!isEqual) {
-                setSelectedDate(formatValue(newDate));
+            var _this;
+            if (!(0, _reactfastcompare.default)((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
+                setInnerDate((0, _utils.formatValue)(newDate, startDate, endDate));
             }
             onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions, [
                 String(newDate.getFullYear()),
@@ -192,138 +106,75 @@ var DatePicker = function DatePicker(props) {
             ], index);
         }
     };
-    var handlePickerChange = function handlePickerChange(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]));
+    var handleConfirmDateComparison = function handleConfirmDateComparison(newDate) {
+        if (newDate && (0, _isdate.isDate)(newDate)) {
+            var _this;
+            if (!(0, _reactfastcompare.default)((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
+                setSelectedDate((0, _utils.formatValue)(newDate, startDate, endDate));
             }
-            compareDateChange(selectedDate, date, selectedOptions, index);
-        } else {
-            // 'hour-minutes' 'time'
-            var _selectedValue = (0, _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 formatOption(type, value) {
-        if (formatter) {
-            return formatter(type, {
-                text: (0, _padzero.padZero)(value, 2),
-                value: (0, _padzero.padZero)(value, 2)
-            });
-        }
-        var padMin = (0, _padzero.padZero)(value, 2);
-        var fatter = showChinese ? zhCNType[type] : '';
-        return {
-            text: padMin + fatter,
-            value: padMin
-        };
+    var handleCancel = function handleCancel() {
+        setInnerDate(selectedDate);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    var generateColumn = function generateColumn(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((0, _to_consumable_array._)(pickerValue));
-        if (filter === null || filter === void 0 ? void 0 : filter(type, arr)) {
-            return filter === null || filter === void 0 ? void 0 : filter(type, arr);
-        }
-        return arr;
+    var handleClose = function handleClose() {
+        setInnerVisible(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    var getDateIndex = function getDateIndex(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 handleConfirm = function handleConfirm(options, value) {
+        (0, _utils.handlePickerValueChange)(options, value, 0, type, defaultValue || startDate || endDate, handleConfirmDateComparison);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(options, value);
+    };
+    var handleChange = function handleChange(selectedOptions, selectedValue, index) {
+        innerVisible && (0, _utils.handlePickerValueChange)(selectedOptions, selectedValue, index, type, defaultValue || startDate || endDate, handleDateComparison);
     };
-    var columns = function columns() {
-        var val = ranges().map(function(res, columnIndex) {
-            return generateColumn(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
+    var generatePickerColumns = function generatePickerColumns() {
+        var dateRanges = (0, _utils.generateDatePickerRanges)(type, innerDate, startDate, endDate);
+        var columns = dateRanges.map(function(rangeConfig, columnIndex) {
+            var columnType = rangeConfig.type, range = rangeConfig.range;
+            var selectedValue = (0, _utils.getDatePartValue)(columnType, innerDate);
+            var pickerColumn = (0, _utils.generatePickerColumnWithCallback)(range[0], range[1], selectedValue, columnType, minuteStep, function(selectedIndex, options) {
+                var _options_selectedIndex;
+                pickerValue[columnIndex] = (_options_selectedIndex = options[selectedIndex]) === null || _options_selectedIndex === void 0 ? void 0 : _options_selectedIndex.value;
+                setPickerValue((0, _to_consumable_array._)(pickerValue));
+            }, showChinese, zhCNType, formatter);
+            if (filter === null || filter === void 0 ? void 0 : filter(columnType, pickerColumn)) {
+                return filter(columnType, pickerColumn);
+            }
+            return pickerColumn;
         });
-        return val || [];
+        return columns || [];
     };
     (0, _react.useEffect)(function() {
-        setPickerOptions(columns());
+        setInnerDate(selectedDate);
+    }, [
+        selectedDate
+    ]);
+    (0, _react.useEffect)(function() {
+        setPickerOptions(generatePickerColumns());
     }, [
-        selectedDate,
+        innerDate,
         startDate,
         endDate
     ]);
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: "nut-datepicker ".concat(className),
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, typeof children === 'function' && children(selectedDate), /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
+        className: cls,
         style: style
-    }, rest), pickerOptions.length > 0 && /*#__PURE__*/ _react.default.createElement(_picker.default, (0, _object_spread_props._)((0, _object_spread._)({}, pickerProps), {
+    }, rest), pickerOptions.length && /*#__PURE__*/ _react.default.createElement(_picker.default, (0, _object_spread_props._)((0, _object_spread._)({}, pickerProps), {
         title: title,
-        visible: visible,
-        options: pickerOptions,
-        onClose: onClose,
-        onCancel: onCancel,
+        visible: innerVisible,
         value: pickerValue,
-        onConfirm: function onConfirm1(options, value) {
-            return onConfirm && onConfirm(options, value);
-        },
-        onChange: function onChange(options, value, index) {
-            return handlePickerChange(options, value, index);
+        options: pickerOptions,
+        onClose: handleClose,
+        onCancel: handleCancel,
+        onConfirm: handleConfirm,
+        onChange: function onChange(param) {
+            var value = param.value, index = param.index, selectedOptions = param.selectedOptions;
+            handleChange(selectedOptions, value, index);
         },
         threeDimensional: threeDimensional
-    })));
+    }))));
 };
-DatePicker.displayName = 'NutDatePicker';
+var DatePicker = /*#__PURE__*/ _react.default.forwardRef(InternalPicker);
+var _default = DatePicker;

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

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

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

@@ -8,5 +8,6 @@ Object.defineProperty(exports, "default", {
         return _default;
     }
 });
-var _datepicker = require("./datepicker");
-var _default = _datepicker.DatePicker;
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _datepicker = /*#__PURE__*/ _interop_require_default._(require("./datepicker"));
+var _default = _datepicker.default;

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

@@ -4,19 +4,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -67,7 +62,7 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -87,13 +82,13 @@
   align-items: center;
 }
 .nut-popup-title-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
@@ -112,7 +107,7 @@
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
 .nut-popup-title-right:active {
@@ -243,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -264,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -285,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -306,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -377,23 +384,24 @@
 }
 
 .nut-picker {
-  background-color: var(--nutui-gray-1);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;
 }
 .nut-picker-control {
   display: flex;
-  height: var(--nutui-popup-title-height, 50px);
-  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   align-items: center;
   justify-content: space-between;
+  height: var(--nutui-popup-title-height, 50px);
   padding: var(--nutui-popup-title-padding, 16px);
+  box-sizing: border-box;
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-picker-cancel-btn {
-  color: var(--nutui-picker-title-cancel-color, var(--nutui-gray-6));
+  color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-picker-confirm-btn {
-  color: var(--nutui-picker-title-ok-color, var(--nutui-brand-6));
+  color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23));
   font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-picker-title {
@@ -402,117 +410,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: center;
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-picker-panel {
   display: flex;
-  position: relative;
-}
-.nut-picker-indicator {
-  position: absolute;
-  top: 108px;
-  height: var(--nutui-picker-item-height, 36px);
-  width: 100%;
-  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-black-3));
-  border-left: 0;
-  border-right: 0;
-  color: var(--nutui-picker-item-text-color, var(--nutui-gray-7));
-  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
-  z-index: 3;
-}
-.nut-picker-indicator-taro {
-  height: var(--nutui-picker-item-height, 36px);
-  border: 0;
-}
-.nut-picker-indicator-taro::before, .nut-picker-indicator-taro::after {
-  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-black-3));
-  border-left: 0;
-  border-right: 0;
-}
-.nut-picker-list {
-  flex: 1;
-  position: relative;
-  height: var(--nutui-picker-list-height, 252px);
-  overflow: hidden;
-  text-align: center;
-}
-.nut-picker-list-panel {
-  transform-style: preserve-3d;
-}
-.nut-picker-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
-  background-position: top, bottom;
-  background-size: 100% 108px;
-  background-repeat: no-repeat;
-  transform: translateZ(0);
-  z-index: 3;
-}
-.nut-picker-view-panel {
-  height: var(--nutui-picker-list-height, 252px);
-  flex-grow: 1;
-}
-.nut-picker-content, .nut-picker-roller {
-  position: absolute;
-  top: 108px;
-  width: 100%;
-  height: var(--nutui-picker-item-height, 36px);
-}
-.nut-picker-content {
-  background: #fff;
-  z-index: 2;
-  overflow: hidden;
-}
-.nut-picker-item, .nut-picker-roller-item {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: var(--nutui-picker-item-height, 36px);
-  line-height: var(--nutui-picker-item-height, 36px);
-  color: var(--nutui-picker-item-text-color, var(--nutui-gray-7));
-  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
-  text-align: center;
-}
-.nut-picker-item {
-  font-size: 16px;
-  background: #fff;
-}
-.nut-picker-roller {
-  z-index: 1;
-  transform-style: preserve-3d;
-}
-.nut-picker-roller-item {
-  backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-.nut-picker-roller-item-title {
-  display: block;
-  width: 100%;
-  height: var(--nutui-picker-item-height, 36px);
-  line-height: var(--nutui-picker-item-height, 36px);
-  text-align: center;
-  color: var(--nutui-gray-7);
-  font-size: var(--nutui-font-size-base, 14px);
-}
-.nut-picker-roller-item-hidden {
-  visibility: hidden;
-  opacity: 0;
-}
-.nut-picker-placeholder {
-  height: 1px;
-}
-
-[dir=rtl] .nut-picker-mask,
-.nut-rtl .nut-picker-mask {
-  background-image: var(--picker-mask-background, linear-gradient(-180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
 }