@nutui/nutui-react 1.2.1-beta.1 → 1.2.2-beta.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## v1.2.2
+`2022-08-10`
+
+* :zap: feat: range组件props补齐+国际化 (#201) @vickyYE
+* :zap: feat: signature组件增加单元测试、文档和demo国际化 (#205) @irisSong
+* :zap: test(navbar): navbar unit test (#203) @szg2008
+* :zap: test(tabbar): tabbar unit test (#204) @szg2008
+* :zap: feat: 新增 searchbar 组件 (#186) @Ymm0008
+* :zap: feat(numberkeyboard): new components (#192) @Drjingfubo
+* :zap: feat(tabbar): 组件能力补齐 (#178) @szg2008
+* :zap: feat: progress 组件 (#187) @ailululu
+* :zap: chore: tag 组件 eslint 修复 (#200) @libin0824
+* :zap: feat: datepicker 功能补齐 (#182) @yangxiaolu1993
+* :zap: feat: tag 组件新增 onClick 事件，closeable 支持非受控(#195) @libin0824
+* :zap: feat: divider组件增加单元测试 (#194) @vickyYE
+* :zap: feat: Dialog组件增加在线调试能力,文档多语言支持 (#193) @libin0824
+
 ## v1.2.1
 `2022-08-03`
 

package/dist/esm/ConfigProvider.js

@@ -103,6 +103,17 @@ var zhCN = {
     additionalImages: function additionalImages(length) {
       return "".concat(length, "\u5F20\u8FFD\u8BC4\u56FE\u7247");
     }
+  },
+  searchbar: {
+    basePlaceholder: '上京东，购好物',
+    text: '文本',
+    test: '测试',
+    title1: '基础用法',
+    title2: '搜索框形状及最大长度',
+    title3: '搜索框内外背景设置',
+    title4: '搜索框文本设置',
+    title5: '自定义图标设置',
+    title6: '数据改变监听'
   }
 };
 var defaultProps = {

package/dist/esm/DatePicker.js

@@ -1,7 +1,8 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["minDate", "maxDate", "type", "isShowChinese", "minuteStep", "modelValue", "visible", "title", "onCloseDatePicker", "onConfirmDatePicker", "className", "style"];
+var _excluded = ["minDate", "maxDate", "type", "isShowChinese", "minuteStep", "modelValue", "visible", "title", "formatter", "onCloseDatePicker", "onConfirmDatePicker", "filter", "threeDimensional", "className", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -11,17 +12,15 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import Picker from './Picker.js';
 var currentYear = new Date().getFullYear();
 var defaultProps = {
-  modelValue: new Date(),
+  modelValue: null,
   visible: false,
   title: '',
   type: 'date',
-  isShowChinese: true,
+  isShowChinese: false,
+  threeDimensional: true,
   minuteStep: 1,
   minDate: new Date(currentYear - 10, 0, 1),
-  maxDate: new Date(currentYear + 10, 11, 31),
-  onCloseDatePicker: function onCloseDatePicker() {
-    return void 0;
-  }
+  maxDate: new Date(currentYear + 10, 11, 31)
 };
 
 var DatePicker = function DatePicker(props) {
@@ -34,8 +33,11 @@ var DatePicker = function DatePicker(props) {
       modelValue = _defaultProps$props.modelValue,
       visible = _defaultProps$props.visible,
       title = _defaultProps$props.title,
+      formatter = _defaultProps$props.formatter,
       onCloseDatePicker = _defaultProps$props.onCloseDatePicker,
       onConfirmDatePicker = _defaultProps$props.onConfirmDatePicker,
+      filter = _defaultProps$props.filter,
+      threeDimensional = _defaultProps$props.threeDimensional,
       className = _defaultProps$props.className,
       style = _defaultProps$props.style,
       rest = _objectWithoutProperties(_defaultProps$props, _excluded);
@@ -45,7 +47,7 @@ var DatePicker = function DatePicker(props) {
       show = _useState2[0],
       setShow = _useState2[1];
 
-  var _useState3 = useState(new Date()),
+  var _useState3 = useState(modelValue),
       _useState4 = _slicedToArray(_useState3, 2),
       currentDate = _useState4[0],
       setCurrentDate = _useState4[1];
@@ -61,6 +63,11 @@ var DatePicker = function DatePicker(props) {
       setListData = _useState8[1];
 
   var pickerRef = useRef(null);
+
+  var isDate = function isDate(val) {
+    return Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN(val.getTime());
+  };
+
   var zhCNType = {
     day: '日',
     year: '年',
@@ -70,6 +77,18 @@ var DatePicker = function DatePicker(props) {
     seconds: '秒'
   };
 
+  var formatValue = function formatValue(value) {
+    var cvalue = value;
+
+    if (!cvalue || cvalue && !isDate(cvalue)) {
+      cvalue = minDate;
+    }
+
+    var timestmp = Math.max(cvalue.getTime(), minDate.getTime());
+    timestmp = Math.min(timestmp, maxDate.getTime());
+    return new Date(timestmp);
+  };
+
   function getMonthEndDay(year, month) {
     return new Date(year, month, 0).getDate();
   }
@@ -114,6 +133,8 @@ var DatePicker = function DatePicker(props) {
 
   var ranges = function ranges(date) {
     var curDate = date || currentDate;
+    console.log(11, currentDate);
+    if (!curDate) return [];
 
     var _getBoundary = getBoundary('max', curDate),
         maxYear = _getBoundary.maxYear,
@@ -150,169 +171,190 @@ var DatePicker = function DatePicker(props) {
       type: 'seconds',
       range: [minSeconds, maxSeconds]
     }];
-    var start = 0;
-    var end = 0;
 
-    switch (type) {
+    switch (type.toLocaleLowerCase()) {
       case 'date':
-        start = 0;
-        end = 3;
+        result = result.slice(0, 3);
         break;
 
       case 'datetime':
-        start = 0;
-        end = 5;
+        result = result.slice(0, 5);
         break;
 
       case 'time':
-        start = 3;
-        end = 6;
+        result = result.slice(3, 6);
+        break;
+
+      case 'year-month':
+        result = result.slice(0, 2);
         break;
 
       case 'month-day':
-        start = 1;
-        end = 3;
+        result = result.slice(1, 3);
         break;
 
       case 'datehour':
-        start = 0;
-        end = 4;
+        result = result.slice(0, 4);
         break;
     }
 
-    return result.slice(start, end);
+    return result;
   };
 
-  var initDefault = function initDefault() {
-    if (['date', 'datetime', 'time'].includes(type)) {
-      var formatDate = [modelValue.getFullYear(), modelValue.getMonth() + 1, modelValue.getDate(), modelValue.getHours(), modelValue.getMinutes(), modelValue.getSeconds()];
-      var year = formatDate[0],
-          month = formatDate[1],
-          day = formatDate[2],
-          hour = formatDate[3],
-          minute = formatDate[4],
-          seconds = formatDate[5];
-      day = Math.min(day, getMonthEndDay(year, month));
-      var val = formatDate;
-
-      if (isShowChinese) {
-        val = [year + zhCNType.year, month + zhCNType.month, day + zhCNType.day, hour + zhCNType.hour, minute + zhCNType.minute, seconds + zhCNType.seconds];
+  var updateChooseValueCustmer = function updateChooseValueCustmer(index, selectedValue, cacheValueData) {
+    if (['date', 'datetime', 'datehour', 'month-day', 'year-month'].includes(type.toLocaleLowerCase())) {
+      var _date;
+
+      var formatDate = [];
+      selectedValue.forEach(function (item) {
+        formatDate.push(item);
+      });
+
+      if (type.toLocaleLowerCase() === 'month-day' && formatDate.length < 3) {
+        formatDate.unshift(new Date(modelValue || minDate || maxDate).getFullYear());
       }
 
-      if (type === 'date') {
-        setDefaultValue(val.splice(0, 3));
-      } else if (type === 'datetime') {
-        setDefaultValue(val.splice(0, 5));
-      } else if (type === 'time') {
-        setDefaultValue(val.splice(3, 3));
+      if (type.toLocaleLowerCase() === 'year-month' && formatDate.length < 3) {
+        formatDate.push(new Date(modelValue || minDate || maxDate).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 (type.toLocaleLowerCase() === 'date' || type.toLocaleLowerCase() === 'month-day' || type.toLocaleLowerCase() === 'year-month') {
+        date = new Date(year, month, day);
+      } else if (type.toLocaleLowerCase() === 'datetime') {
+        date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+      } else if (type.toLocaleLowerCase() === 'datehour') {
+        date = new Date(year, month, day, Number(formatDate[3]));
       }
-    }
-  };
 
-  var updateChooseValueCustmer = function updateChooseValueCustmer(index, resValue, cacheValueData) {
-    // 只有月份变化时，需要重新计算日期区间
-    if (index === 1 && (type === 'date' || type === 'datetime')) {
-      var _modelValue = new Date(cacheValueData.slice(0, 3).join('-').replace(/[^0-9\-]/g, ''));
+      var isEqual = (currentDate === null || currentDate === void 0 ? void 0 : currentDate.getTime()) === ((_date = date) === null || _date === void 0 ? void 0 : _date.getTime());
+      date && isDate(date) && !isEqual && setCurrentDate(formatValue(date));
+    }
 
-      setTimeout(function () {
-        var data = columns(_modelValue);
-        var val = [];
+    props.onChangeDatePicker && props.onChangeDatePicker(index, selectedValue, cacheValueData);
+  };
 
-        if (isShowChinese) {
-          val = [_modelValue.getFullYear() + zhCNType.year, resValue, _modelValue.getDate() + zhCNType.day];
-        } else {
-          val = [_modelValue.getFullYear(), resValue, _modelValue.getDate()];
-        }
+  var padZero = function padZero(num) {
+    var targetLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+    var str = "".concat(num);
 
-        setDefaultValue(val);
-        setListData(data); // 更新第二列位置
+    while (str.length < targetLength) {
+      str = "0".concat(str);
+    }
 
-        setTimeout(function () {
-          var _pickerRef$current;
+    return str;
+  };
 
-          (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : _pickerRef$current.updateChooseValue(index + 1, data[1] ? data[1][0].toString() : '0', cacheValueData);
-        }, 200);
-      }, 100);
+  var formatterOption = function formatterOption(type, value) {
+    var fOption = null;
+
+    if (formatter) {
+      fOption = formatter(type, {
+        text: padZero(value, 2),
+        value: padZero(value, 2)
+      });
+    } else {
+      var padMin = padZero(value, 2);
+      var fatter = isShowChinese ? zhCNType[type] : '';
+      fOption = {
+        text: padMin + fatter,
+        value: padMin
+      };
     }
+
+    return fOption;
   };
 
-  var generateValue = function generateValue(min, max, val, type) {
-    if (!(max > min)) return;
+  var generateValue = function generateValue(min, max, val, type, columnIndex) {
+    var cmin = min;
     var arr = [];
+    var index = 0;
 
-    while (min <= max) {
-      if (isShowChinese) {
-        arr.push(min + zhCNType[type]);
-      } else {
-        arr.push(min);
-      }
+    while (cmin <= max) {
+      arr.push(formatterOption(type, cmin));
 
       if (type === 'minute') {
-        min += minuteStep;
+        cmin += minuteStep;
       } else {
-        min++;
+        cmin++;
       }
-    }
-
-    return arr;
-  };
-
-  var getDateIndex = function getDateIndex(type, date) {
-    var curDate = date || currentDate;
-
-    switch (type) {
-      case 'year':
-        return curDate.getFullYear();
 
-      case 'month':
-        return curDate.getMonth();
-
-      case 'day':
-        return curDate.getDate();
+      if (cmin <= val) {
+        index++;
+      }
+    }
 
-      case 'hour':
-        return curDate.getHours();
+    defaultValue[columnIndex] = arr[index].value;
+    setDefaultValue(_toConsumableArray(defaultValue));
 
-      case 'minute':
-        return curDate.getMinutes();
+    if (props.filter && props.filter(type, arr)) {
+      return props.filter(type, arr);
+    }
 
-      case 'seconds':
-        return curDate.getSeconds();
+    return arr;
+  };
 
-      default:
-        return 0;
+  var getDateIndex = function getDateIndex(type) {
+    if (!currentDate) return 0;
+    var d = 0;
+
+    if (type === 'year') {
+      d = currentDate.getFullYear();
+    } else if (type === 'month') {
+      d = currentDate.getMonth() + 1;
+    } else if (type === 'day') {
+      d = currentDate.getDate();
+    } else if (type === 'hour') {
+      d = currentDate.getHours();
+    } else if (type === 'minute') {
+      d = currentDate.getMinutes();
+    } else if (type === 'seconds') {
+      d = currentDate.getSeconds();
     }
+
+    return d;
   };
 
   var columns = function columns(date) {
-    var val = ranges(date).map(function (res) {
-      return generateValue(res.range[0], res.range[1], getDateIndex(res.type, date), res.type);
+    var val = ranges(date).map(function (res, columnIndex) {
+      return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
     });
     return val || [];
   };
 
   useEffect(function () {
-    setCurrentDate(modelValue);
-    setListData(columns());
-    initDefault();
+    setCurrentDate(formatValue(modelValue)); // initDefault()
   }, []);
+  useEffect(function () {
+    setCurrentDate(formatValue(modelValue));
+  }, [modelValue]);
   useEffect(function () {
     setShow(visible);
   }, [visible]);
+  useEffect(function () {
+    if (currentDate) {
+      setListData(columns());
+    }
+  }, [currentDate]);
   return React__default.createElement("div", _objectSpread({
     className: "nut-datepicker ".concat(className || ''),
     style: style
-  }, rest), React__default.createElement(Picker, {
+  }, rest), listData.length > 0 && React__default.createElement(Picker, {
     isVisible: show,
     listData: listData,
     onClose: onCloseDatePicker,
     defaultValueData: defaultValue,
-    onConfirm: function onConfirm(list) {
-      return onConfirmDatePicker && onConfirmDatePicker(list);
+    onConfirm: function onConfirm(values, options) {
+      return onConfirmDatePicker && onConfirmDatePicker(values, options);
     },
-    onChoose: function onChoose(index, value, list) {
+    onChange: function onChange(index, value, list) {
       return updateChooseValueCustmer(index, value, list);
     },
+    threeDimensional: threeDimensional,
     ref: pickerRef
   }));
 };

package/dist/esm/Divider.js

@@ -1,4 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "contentPosition", "dashed", "hairline", "styles", "className", "direction"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -25,14 +27,15 @@ var Divider = function Divider(props) {
       hairline = _defaultProps$props.hairline,
       styles = _defaultProps$props.styles,
       className = _defaultProps$props.className,
-      direction = _defaultProps$props.direction;
+      direction = _defaultProps$props.direction,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
 
   var dividerBem = cn('divider');
   var classes = direction === 'horizontal' ? classNames((_classNames = {}, _defineProperty(_classNames, dividerBem(), true), _defineProperty(_classNames, dividerBem('center'), children), _defineProperty(_classNames, dividerBem('left'), contentPosition === 'left'), _defineProperty(_classNames, dividerBem('right'), contentPosition === 'right'), _defineProperty(_classNames, dividerBem('dashed'), dashed), _defineProperty(_classNames, dividerBem('hairline'), hairline), _classNames)) : classNames((_classNames2 = {}, _defineProperty(_classNames2, dividerBem(), true), _defineProperty(_classNames2, dividerBem('vertical'), direction === 'vertical'), _classNames2));
-  return React__default.createElement("div", {
+  return React__default.createElement("div", _objectSpread({
     className: "".concat(classes, " ").concat(className || ''),
     style: styles
-  }, children);
+  }, rest), children);
 };
 
 Divider.defaultProps = defaultProps;

package/dist/esm/Icon.js

@@ -1,73 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "size", "classPrefix", "color", "tag", "children", "className", "fontClassName", "style", "click"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default from 'react';
-import { c as cn } from './bem-893ad28d.js';
+import { I as Icon } from './icon-62bd7379.js';
+export { I as default } from './icon-62bd7379.js';
+import 'react';
+import './bem-893ad28d.js';
 import '@bem-react/classname';
-var defaultProps = {
-  name: '',
-  size: '',
-  classPrefix: 'nutui-icon',
-  fontClassName: 'nutui-iconfont',
-  color: '',
-  tag: 'i',
-  click: function click(e) {},
-  className: ''
-};
-
-function pxCheck(value) {
-  return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
-}
-
-var Icon = function Icon(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      name = _defaultProps$props.name,
-      size = _defaultProps$props.size,
-      classPrefix = _defaultProps$props.classPrefix,
-      color = _defaultProps$props.color,
-      tag = _defaultProps$props.tag,
-      children = _defaultProps$props.children,
-      className = _defaultProps$props.className,
-      fontClassName = _defaultProps$props.fontClassName,
-      style = _defaultProps$props.style,
-      click = _defaultProps$props.click,
-      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-
-  var isImage = name ? name.indexOf('/') !== -1 : false;
-  var type = isImage ? 'img' : tag;
-  var b = cn('icon');
-
-  var handleClick = function handleClick(e) {
-    if (props.click) {
-      props.click(e);
-    }
-  };
-
-  var hasSrc = function hasSrc() {
-    if (isImage) return {
-      src: name
-    };
-    return {};
-  };
-
-  return React__default.createElement(type, _objectSpread(_objectSpread({
-    className: isImage ? "".concat(className || '', " ").concat(b('img')) : "".concat(className || '', " ").concat(fontClassName, " ").concat(b(null, [classPrefix]), " nut-icon-").concat(name, " "),
-    style: _objectSpread({
-      color: color,
-      fontSize: pxCheck(size),
-      width: pxCheck(size),
-      height: pxCheck(size)
-    }, style)
-  }, rest), {}, {
-    onClick: handleClick
-  }, hasSrc()), children);
-};
-
-Icon.defaultProps = defaultProps;
-Icon.displayName = 'NutIcon';
-export { Icon as default };

package/dist/esm/NumberKeyboard/style/index.js

@@ -0,0 +1,2 @@
+
+require('../../../packages/numberkeyboard/numberkeyboard.scss')