@nutui/nutui-react 3.0.0 → 3.0.2

package/dist/es/packages/datepickerview/datepickerview.js

@@ -0,0 +1,106 @@
+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 _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import isEqual from "react-fast-compare";
+import { padZero } from "../../utils/pad-zero";
+import PickerView from "../pickerview/index";
+import { useConfig } from "../configprovider";
+import { usePropsValue } from "../../hooks/use-props-value";
+import { ComponentDefaults } from "../../utils/typings";
+import { isDate } from "../../utils/is-date";
+import { formatValue, generateDatePickerRanges, generatePickerColumnWithCallback, getDatePartValue, handlePickerValueChange } from "../datepicker/utils";
+var currentYear = new Date().getFullYear();
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    type: 'date',
+    showChinese: false,
+    threeDimensional: true,
+    minuteStep: 1,
+    startDate: new Date(currentYear - 10, 0, 1),
+    endDate: new Date(currentYear + 10, 11, 31)
+});
+export var DatePickerView = function(props) {
+    var _$_object_spread = _object_spread({}, defaultProps, props), startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, type = _$_object_spread.type, showChinese = _$_object_spread.showChinese, minuteStep = _$_object_spread.minuteStep, defaultValue = _$_object_spread.defaultValue, formatter = _$_object_spread.formatter, filter = _$_object_spread.filter, onChange = _$_object_spread.onChange, threeDimensional = _$_object_spread.threeDimensional, className = _$_object_spread.className, style = _$_object_spread.style;
+    var classPrefix = 'nut-datepickerview';
+    var cls = classNames(classPrefix, className);
+    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 _usePropsValue = _sliced_to_array(usePropsValue({
+        value: props.value && formatValue(props.value, startDate, endDate),
+        defaultValue: defaultValue && formatValue(defaultValue, startDate, endDate),
+        finalValue: 0
+    }), 2), selectedDate = _usePropsValue[0], setSelectedDate = _usePropsValue[1];
+    var handleDateComparison = function(newDate, selectedOptions, index) {
+        if (newDate && isDate(newDate)) {
+            var _this;
+            if (!isEqual((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), newDate === null || newDate === void 0 ? void 0 : newDate.getTime())) {
+                setSelectedDate(formatValue(newDate, startDate, endDate));
+                onChange === null || onChange === void 0 ? void 0 : onChange(selectedOptions, [
+                    String(newDate.getFullYear()),
+                    padZero(newDate.getMonth() + 1),
+                    padZero(newDate.getDate())
+                ], index);
+            }
+        }
+    };
+    var handleChange = function(selectedOptions, selectedValue, index) {
+        handlePickerValueChange(selectedOptions, selectedValue, index, type, defaultValue || startDate || endDate, handleDateComparison);
+    };
+    var generatePickerColumns = function() {
+        var dateRanges = generateDatePickerRanges(type, selectedDate, startDate, endDate);
+        var columns = dateRanges.map(function(rangeConfig, columnIndex) {
+            var columnType = rangeConfig.type, range = rangeConfig.range;
+            var selectedValue = getDatePartValue(columnType, selectedDate);
+            var pickerColumn = 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(_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 columns || [];
+    };
+    useEffect(function() {
+        var _this, _this1;
+        if (!isEqual((_this = new Date(selectedDate)) === null || _this === void 0 ? void 0 : _this.getTime(), (_this1 = new Date(selectedDate)) === null || _this1 === void 0 ? void 0 : _this1.getTime())) {
+            setSelectedDate(selectedDate);
+        }
+    }, [
+        selectedDate
+    ]);
+    useEffect(function() {
+        setPickerOptions(generatePickerColumns());
+    }, [
+        selectedDate,
+        startDate,
+        endDate
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: cls,
+        style: style
+    }, pickerOptions.length && /*#__PURE__*/ React.createElement(PickerView, {
+        value: pickerValue,
+        options: pickerOptions,
+        onChange: function(param) {
+            var selectedOptions = param.selectedOptions, value = param.value, index = param.index;
+            handleChange(selectedOptions, value, index);
+        },
+        threeDimensional: threeDimensional
+    }));
+};
+DatePickerView.displayName = 'NutDatePickerView';

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

@@ -0,0 +1,3 @@
+import { DatePickerView } from './datepickerview';
+export type { DatePickerViewProps } from './types';
+export default DatePickerView;

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

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

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

@@ -0,0 +1,4 @@
+.nut-datepickerview {
+  display: flex;
+  width: 100%;
+}

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

@@ -0,0 +1,2 @@
+import '../../pickerview/style';
+import './datepickerview.scss';

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

@@ -0,0 +1,78 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 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% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nut-datepickerview {
+  display: flex;
+  width: 100%;
+}

package/dist/es/packages/datepickerview/types.d.ts

@@ -0,0 +1,15 @@
+import { BasicComponent } from "../../utils/typings";
+import { PickerOptions, PickerValue, PickerOption } from "../pickerview/types";
+export interface DatePickerViewProps extends BasicComponent {
+    value?: Date;
+    defaultValue?: Date;
+    type: 'date' | 'time' | 'year-month' | 'month-day' | 'datehour' | 'datetime' | 'hour-minutes';
+    showChinese: boolean;
+    minuteStep: number;
+    startDate: Date;
+    endDate: Date;
+    threeDimensional: boolean;
+    formatter: (type: string, option: PickerOption) => PickerOption;
+    filter: (type: string, options: PickerOptions) => PickerOptions;
+    onChange: (selectedOptions: PickerOptions, selectedValue: PickerValue[], columnIndex: number) => void;
+}

package/dist/es/packages/datepickerview/types.js

@@ -0,0 +1 @@
+export { };

package/dist/es/packages/dialog/dialogwrap.js

@@ -51,6 +51,9 @@ export var DialogWrap = function(props) {
         unmountOnExit: true,
         appear: true
     }, /*#__PURE__*/ React.createElement(Content, _object_spread_props(_object_spread({}, restProps), {
+        style: {
+            zIndex: zIndex
+        },
         visible: visible
     }))));
 };

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

@@ -26,7 +26,6 @@
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     border-radius: $dialog-border-radius;
-    z-index: $dialog-z-index;
     animation-duration: 0.3s;
   }
 

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

@@ -470,7 +470,6 @@
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   border-radius: var(--nutui-dialog-border-radius, var(--nutui-radius-xl, 12px));
-  z-index: var(--nutui-dialog-z-index, 1200);
   animation-duration: 0.3s;
 }
 .nut-dialog-close {

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

@@ -10,5 +10,6 @@
     display: inline-flex;
     width: fit-content;
     height: fit-content;
+    touch-action: none;
   }
 }

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

@@ -15,4 +15,5 @@
   display: inline-flex;
   width: fit-content;
   height: fit-content;
+  touch-action: none;
 }

package/dist/es/packages/fixednav/fixednav.js

@@ -7,6 +7,7 @@ import { ArrowLeft } from "@nutui/icons-react";
 import Overlay from "../overlay/index";
 import { useConfig } from "../configprovider";
 import { defaultOverlayProps } from "../overlay/overlay";
+import Badge from "../badge/index";
 var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     activeText: '',
     inactiveText: '',
@@ -43,6 +44,20 @@ export var FixedNav = function(props) {
     var classes = classNames(classPrefix, {
         active: visible
     }, type, className);
+    var renderListItem = function(item, index) {
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-list-item"),
+            onClick: function(event) {
+                return onSelect(item, event);
+            },
+            key: item.id || index
+        }, /*#__PURE__*/ React.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ React.createElement("img", {
+            src: item.icon,
+            alt: ""
+        }), /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(classPrefix, "-list-text")
+        }, item.text));
+    };
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         className: classes,
         style: _object_spread({}, position, style)
@@ -57,20 +72,11 @@ export var FixedNav = function(props) {
     }, children || /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-list")
     }, list.map(function(item, index) {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-list-item"),
-            onClick: function(event) {
-                return onSelect(item, event);
-            },
-            key: item.id || index
-        }, /*#__PURE__*/ React.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ React.createElement("img", {
-            src: item.icon,
-            alt: ""
-        }), /*#__PURE__*/ React.createElement("div", {
-            className: "".concat(classPrefix, "-list-text")
-        }, item.text), item.num && /*#__PURE__*/ React.createElement("div", {
-            className: "b"
-        }, item.num));
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, item.num ? /*#__PURE__*/ React.createElement(Badge, {
+            value: item.num,
+            top: 8,
+            right: 6
+        }, renderListItem(item, index)) : /*#__PURE__*/ React.createElement(React.Fragment, null, renderListItem(item, index)));
     }))), /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-btn"),
         onClick: function() {

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

@@ -95,21 +95,6 @@
       .nut-fixednav-list-text {
         font-size: 10px;
       }
-
-      .b {
-        position: absolute;
-        right: 0;
-        top: 1px;
-        height: 14px;
-        line-height: 14px;
-        font-size: 10px;
-        padding: 0 3px;
-        color: white;
-        background: $color-primary;
-        border-radius: 7px;
-        text-align: center;
-        min-width: 12px;
-      }
     }
   }
 

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

@@ -136,20 +136,6 @@
 .nut-fixednav-list-item .nut-fixednav-list-text {
   font-size: 10px;
 }
-.nut-fixednav-list-item .b {
-  position: absolute;
-  right: 0;
-  top: 1px;
-  height: 14px;
-  line-height: 14px;
-  font-size: 10px;
-  padding: 0 3px;
-  color: white;
-  background: var(--nutui-color-primary, #ff0f23);
-  border-radius: 7px;
-  text-align: center;
-  min-width: 12px;
-}
 .nut-fixednav.left {
   right: auto;
   left: 0;

package/dist/es/packages/form/__tests__/merge.spec.d.ts

@@ -0,0 +1 @@
+export {};