@nutui/nutui-react 2.0.0-alpha.5 → 2.0.0-alpha.6

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v2.0.0-alpha.6
+`2023-05-12`
+
+* 🛠 refactor: cascader (#993) @xiaoyatong
+* 🛠 refactor: picker (#975) @xiaoyatong
+* 🛠 refactor: table (#982) @xiaoyatong
+* 🛠 refactor: TextArea (#979) @Eiinu
+* :bug: fix: image src 初始状态未空，导致出发加载失败事件 (#988) @oasis-cloud
+* 📖 docs(progress): demo 代码更新 (#986) @Eiinu
+* 📖 docs(progress): update demo (#987) @Eiinu
+* 📖 docs: tabs 文档中的 titleNode 修改为 title (#995) @oasis-cloud
+* 🔨 chore: taro es 构建移入 vite 配置文件 (#990) @oasis-cloud
+
+
 # v2.0.0-alpha.5
 `2023-05-10`
 

package/dist/esm/Cascader.js

@@ -47,14 +47,11 @@ import React__default, { isValidElement, useState, useEffect } from "react";
 import classNames from "classnames";
 import Popup from "./Popup.js";
 import { T as Tabs } from "./tabs2.js";
-import { T as TabPane } from "./tabpane2.js";
 import { Loading, Checklist } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
-import "./typings.js";
+import { C as ComponentDefaults } from "./typings.js";
 import "./TabPane.js";
 import "./raf.js";
 import "./use-props-value.js";
-import "@bem-react/classname";
 var defaultProps$1 = {
   data: {
     text: "",
@@ -66,25 +63,25 @@ var defaultProps$1 = {
   },
   activeColor: "",
   checked: false,
-  checkedIcon: "checklist",
+  activeIcon: "checklist",
   chooseItem: function chooseItem() {
   }
 };
 var InternalCascaderItem = function InternalCascaderItem2(props, ref) {
-  var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props), data = _defaultProps$1$props.data, checked = _defaultProps$1$props.checked, checkedIcon = _defaultProps$1$props.checkedIcon, chooseItem2 = _defaultProps$1$props.chooseItem, activeColor = _defaultProps$1$props.activeColor;
-  var b = cn("cascader-item");
+  var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props), data = _defaultProps$1$props.data, checked = _defaultProps$1$props.checked, activeIcon = _defaultProps$1$props.activeIcon, chooseItem2 = _defaultProps$1$props.chooseItem, activeColor = _defaultProps$1$props.activeColor;
+  var classPrefix = "nut-cascader-item";
   var classes = classNames({
     active: checked,
     disabled: data.disabled
-  }, b(""));
-  var classesTitle = classNames(_defineProperty({}, "".concat(b(""), "__title"), true));
+  }, classPrefix);
+  var classesTitle = classNames(_defineProperty({}, "".concat(classPrefix, "__title"), true));
   var renderIcon = function renderIcon2() {
     if (checked) {
-      if (isValidElement(checkedIcon)) {
-        return checkedIcon;
+      if (isValidElement(activeIcon)) {
+        return activeIcon;
       }
       return React__default.createElement(Checklist, {
-        className: "".concat(checked ? b("icon-check") : "")
+        className: "".concat(checked ? "".concat(classPrefix, "__icon-check") : "")
       });
     }
     return null;
@@ -244,26 +241,25 @@ var Tree = /* @__PURE__ */ function() {
   return Tree2;
 }();
 var Tree$1 = Tree;
-var defaultProps = _objectSpread({
-  className: "",
-  style: {},
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   activeColor: "",
-  checkedIcon: "checklist",
-  tabsColor: "",
-  poppable: true,
+  activeIcon: "checklist",
+  popup: true,
   visible: false,
   options: [],
   value: [],
   title: "",
-  textKey: "text",
-  valueKey: "value",
-  childrenKey: "children",
-  convertConfig: {},
+  optionKey: {
+    textKey: "text",
+    valueKey: "value",
+    childrenKey: "children"
+  },
+  format: {},
   closeable: false,
   closeIconPosition: "top-right",
   closeIcon: "close",
   lazy: false,
-  lazyLoad: function lazyLoad() {
+  onLoad: function onLoad() {
   },
   onClose: function onClose() {
   },
@@ -273,11 +269,11 @@ var defaultProps = _objectSpread({
   }
 }, Popup.defaultProps);
 var InternalCascader = function InternalCascader2(props, ref) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, tabsColor = _defaultProps$props.tabsColor, poppable = _defaultProps$props.poppable, visible = _defaultProps$props.visible, options = _defaultProps$props.options, value = _defaultProps$props.value, title = _defaultProps$props.title, textKey = _defaultProps$props.textKey, valueKey = _defaultProps$props.valueKey, childrenKey = _defaultProps$props.childrenKey, convertConfig = _defaultProps$props.convertConfig, closeable = _defaultProps$props.closeable, closeIconPosition = _defaultProps$props.closeIconPosition, closeIcon = _defaultProps$props.closeIcon, lazy = _defaultProps$props.lazy, lazyLoad2 = _defaultProps$props.lazyLoad, onClose2 = _defaultProps$props.onClose, onChange2 = _defaultProps$props.onChange, onPathChange2 = _defaultProps$props.onPathChange;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, popup = _defaultProps$props.popup, visible = _defaultProps$props.visible, options = _defaultProps$props.options, value = _defaultProps$props.value, title = _defaultProps$props.title, optionKey = _defaultProps$props.optionKey, format = _defaultProps$props.format, closeable = _defaultProps$props.closeable, closeIconPosition = _defaultProps$props.closeIconPosition, closeIcon = _defaultProps$props.closeIcon, lazy = _defaultProps$props.lazy, onLoad2 = _defaultProps$props.onLoad, onClose2 = _defaultProps$props.onClose, onChange2 = _defaultProps$props.onChange, onPathChange2 = _defaultProps$props.onPathChange;
   var _useState = useState("c1"), _useState2 = _slicedToArray(_useState, 2), tabvalue = _useState2[0], setTabvalue = _useState2[1];
   var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), optionsData = _useState4[0], setOptionsData = _useState4[1];
   var isLazy = function isLazy2() {
-    return state.configs.lazy && Boolean(state.configs.lazyLoad);
+    return state.configs.lazy && Boolean(state.configs.onLoad);
   };
   var _useState5 = useState({
     optionsData: [],
@@ -293,28 +289,22 @@ var InternalCascader = function InternalCascader2(props, ref) {
     currentProcessNode: [],
     configs: {
       lazy,
-      lazyLoad: lazyLoad2,
-      valueKey,
-      textKey,
-      childrenKey,
-      convertConfig
+      onLoad: onLoad2,
+      optionKey,
+      format
     },
     lazyLoadMap: /* @__PURE__ */ new Map()
   }), _useState6 = _slicedToArray(_useState5, 1), state = _useState6[0];
-  var b = cn("cascader");
-  var classes = classNames(b(""));
-  var classesPane = classNames(_defineProperty({}, "".concat(b(""), "-pane"), true));
+  var classPrefix = classNames("nut-cascader");
+  var classesPane = classNames(_defineProperty({}, "".concat(classPrefix, "-pane"), true));
   useEffect(function() {
     initData();
-  }, []);
+  }, [options]);
   useEffect(function() {
     if (value !== state.innerValue) {
       state.innerValue = value;
     }
   }, [value]);
-  useEffect(function() {
-    initData();
-  }, [options]);
   var initData = /* @__PURE__ */ function() {
     var _ref = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -322,15 +312,15 @@ var InternalCascader = function InternalCascader2(props, ref) {
           switch (_context.prev = _context.next) {
             case 0:
               state.lazyLoadMap.clear();
-              if (convertConfig && Object.keys(convertConfig).length > 0) {
-                state.optionsData = convertListToOptions(options, convertConfig);
+              if (format && Object.keys(format).length > 0) {
+                state.optionsData = convertListToOptions(options, format);
               } else {
                 state.optionsData = options;
               }
               state.tree = new Tree$1(state.optionsData, {
-                value: state.configs.valueKey,
-                text: state.configs.textKey,
-                children: state.configs.childrenKey
+                value: state.configs.optionKey.valueKey,
+                text: state.configs.optionKey.textKey,
+                children: state.configs.optionKey.childrenKey
               });
               if (!(isLazy() && !state.tree.nodes.length)) {
                 _context.next = 6;
@@ -467,7 +457,7 @@ var InternalCascader = function InternalCascader2(props, ref) {
               }
               return _context4.abrupt("return");
             case 2:
-              if (state.configs.lazyLoad) {
+              if (state.configs.onLoad) {
                 _context4.next = 5;
                 break;
               }
@@ -485,8 +475,8 @@ var InternalCascader = function InternalCascader2(props, ref) {
               lazyLoadPromise = state.lazyLoadMap.get(node);
               if (!lazyLoadPromise) {
                 lazyLoadPromise = new Promise(function(resolve) {
-                  var _state$configs$lazyLo, _state$configs;
-                  (_state$configs$lazyLo = (_state$configs = state.configs).lazyLoad) === null || _state$configs$lazyLo === void 0 ? void 0 : _state$configs$lazyLo.call(_state$configs, node, resolve);
+                  var _state$configs$onLoad, _state$configs;
+                  (_state$configs$onLoad = (_state$configs = state.configs).onLoad) === null || _state$configs$onLoad === void 0 ? void 0 : _state$configs$onLoad.call(_state$configs, node, resolve);
                 });
                 state.lazyLoadMap.set(node, lazyLoadPromise);
               }
@@ -564,8 +554,8 @@ var InternalCascader = function InternalCascader2(props, ref) {
                 selectedNode: null,
                 paneKey: "c".concat(state.tabsCursor + 1)
               });
-              setTabvalue("c".concat(state.tabsCursor + 1));
               setOptionsData(state.panes);
+              setTabvalue("c".concat(state.tabsCursor + 1));
               if (!type) {
                 _pathNodes = state.panes.map(function(item) {
                   return item.selectedNode;
@@ -604,10 +594,10 @@ var InternalCascader = function InternalCascader2(props, ref) {
   }();
   var renderItem = function renderItem2() {
     return React__default.createElement("div", {
-      className: "".concat(classes, " ").concat(className),
+      className: "".concat(classPrefix, " ").concat(className),
       style
-    }, poppable && React__default.createElement("div", {
-      className: b("title")
+    }, popup && React__default.createElement("div", {
+      className: "nut-cascader__title"
     }, title), React__default.createElement(Tabs, {
       value: tabvalue,
       title: function title2() {
@@ -618,20 +608,17 @@ var InternalCascader = function InternalCascader2(props, ref) {
               setTabvalue(pane.paneKey);
               state.tabsCursor = index;
             },
-            className: "nut-tabs__titles-item ".concat(tabvalue === pane.paneKey ? "active" : ""),
+            className: "nut-tabs__titles-item ".concat(tabvalue === pane.paneKey ? "nut-tabs__titles-item--active" : ""),
             key: pane.paneKey
           }, React__default.createElement("span", {
             className: "nut-tabs__titles-item__text"
           }, !state.initLoading && state.panes.length && (pane === null || pane === void 0 ? void 0 : (_pane$selectedNode = pane.selectedNode) === null || _pane$selectedNode === void 0 ? void 0 : _pane$selectedNode.text), !state.initLoading && state.panes.length && !(pane !== null && pane !== void 0 && (_pane$selectedNode2 = pane.selectedNode) !== null && _pane$selectedNode2 !== void 0 && _pane$selectedNode2.text) && "请选择", !(!state.initLoading && state.panes.length) && "Loading..."), React__default.createElement("span", {
-            className: "nut-tabs__titles-item__line",
-            style: {
-              background: tabsColor
-            }
+            className: "nut-tabs__titles-item__line"
           }));
         });
       }
     }, !state.initLoading && state.panes.length ? optionsData.map(function(pane) {
-      return React__default.createElement(TabPane, {
+      return React__default.createElement(Tabs.TabPane, {
         key: pane.paneKey,
         value: pane.paneKey
       }, React__default.createElement("div", {
@@ -648,18 +635,19 @@ var InternalCascader = function InternalCascader2(props, ref) {
           }
         }));
       })));
-    }) : React__default.createElement(TabPane, null, React__default.createElement("div", {
+    }) : React__default.createElement(Tabs.TabPane, null, React__default.createElement("div", {
       className: classesPane
     }))));
   };
-  return React__default.createElement(React__default.Fragment, null, poppable ? React__default.createElement(Popup, {
-    className: "cascadar-popup",
+  return React__default.createElement(React__default.Fragment, null, popup ? React__default.createElement(Popup, {
+    // className="nut-cascadar-popup"
     visible,
     position: "bottom",
     round: true,
     closeIcon,
     closeable,
     closeIconPosition,
+    // todo 只关闭，不处理逻辑。和popup的逻辑不一致。关闭时需要增加是否要处理回调
     onClickOverlay: closePopup,
     onClickCloseIcon: closePopup
   }, renderItem()) : renderItem());

package/dist/esm/DatePicker.js

@@ -45,7 +45,7 @@ var DatePicker = function DatePicker2(props) {
   var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), show = _useState2[0], setShow = _useState2[1];
   var _useState3 = useState(modelValue), _useState4 = _slicedToArray(_useState3, 2), currentDate = _useState4[0], setCurrentDate = _useState4[1];
   var _useState5 = useState([]), _useState6 = _slicedToArray(_useState5, 2), defaultValue = _useState6[0], setDefaultValue = _useState6[1];
-  var _useState7 = useState([]), _useState8 = _slicedToArray(_useState7, 2), listData = _useState8[0], setListData = _useState8[1];
+  var _useState7 = useState([]), _useState8 = _slicedToArray(_useState7, 2), options = _useState8[0], setListData = _useState8[1];
   var pickerRef = useRef(null);
   var isDate = function isDate2(val) {
     return Object.prototype.toString.call(val) === "[object Date]" && !Number.isNaN(val.getTime());
@@ -150,7 +150,7 @@ var DatePicker = function DatePicker2(props) {
     }
     return result;
   };
-  var updateChooseValueCustmer = function updateChooseValueCustmer2(index, selectedValue, cacheValueData) {
+  var updateChooseValueCustmer = function updateChooseValueCustmer2(cacheValueData, selectedValue, index) {
     if (["date", "datetime", "datehour", "month-day", "year-month"].includes(type.toLocaleLowerCase())) {
       var _date;
       var formatDate = [];
@@ -177,7 +177,7 @@ var DatePicker = function DatePicker2(props) {
       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));
     }
-    props.onChange && props.onChange(index, selectedValue, cacheValueData);
+    props.onChange && props.onChange(cacheValueData, selectedValue, index);
   };
   var padZero = function padZero2(num) {
     var targetLength = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2;
@@ -268,17 +268,17 @@ var DatePicker = function DatePicker2(props) {
   return React__default.createElement("div", _objectSpread({
     className: "nut-datepicker ".concat(className || ""),
     style
-  }, rest), listData.length > 0 && React__default.createElement(Picker, {
+  }, rest), options.length > 0 && React__default.createElement(Picker, {
     title,
     visible: show,
-    listData,
+    options,
     onClose: onCloseDatePicker,
-    defaultValueData: defaultValue,
-    onConfirm: function onConfirm(values, options) {
-      return onConfirmDatePicker && onConfirmDatePicker(values, options);
+    defaultValue,
+    onConfirm: function onConfirm(options2, values) {
+      return onConfirmDatePicker && onConfirmDatePicker(options2, values);
     },
-    onChange: function onChange2(index, value, list) {
-      return updateChooseValueCustmer(index, value, list);
+    onChange: function onChange2(list, value, index) {
+      return updateChooseValueCustmer(list, value, index);
     },
     threeDimensional,
     ref: pickerRef

package/dist/esm/Image.js

@@ -41,18 +41,16 @@ var Image = function Image2(props) {
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, src = _defaultProps$props.src, fit = _defaultProps$props.fit, position = _defaultProps$props.position, alt = _defaultProps$props.alt, width = _defaultProps$props.width, height = _defaultProps$props.height, radius = _defaultProps$props.radius, error = _defaultProps$props.error, loading = _defaultProps$props.loading, lazy = _defaultProps$props.lazy, onClick = _defaultProps$props.onClick, onLoad = _defaultProps$props.onLoad, onError = _defaultProps$props.onError;
   var _useState = useState(true), _useState2 = _slicedToArray(_useState, 2), innerLoading = _useState2[0], setInnerLoading = _useState2[1];
   var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), isError = _useState4[0], setIsError = _useState4[1];
-  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), _src = _useState6[0], setSrc = _useState6[1];
   var imgRef = useRef(null);
   useEffect(function() {
     if (imgRef.current && imgRef.current.complete && imgRef.current.naturalHeight !== 0) {
       setInnerLoading(false);
     } else if (src) {
-      setSrc(src);
-      setIsError(false);
       setInnerLoading(true);
     }
   }, [src]);
   var handleLoad = function handleLoad2() {
+    setIsError(false);
     setInnerLoading(false);
     onLoad && onLoad();
   };
@@ -149,7 +147,7 @@ var Image = function Image2(props) {
     ref: imgRef,
     className: "nut-img lazyload",
     style: imgStyle,
-    "data-src": _src,
+    "data-src": src,
     alt,
     loading: "lazy",
     onLoad: handleLoad,
@@ -158,7 +156,7 @@ var Image = function Image2(props) {
     ref: imgRef,
     className: "nut-img",
     style: imgStyle,
-    src: _src,
+    src,
     alt,
     onLoad: handleLoad,
     onError: handleError