@nutui/nutui-react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/esm/Tabbar.js

@@ -21,38 +21,35 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect } from "react";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
-var defaultProps = {
-  visible: 0,
-  bottom: false,
-  size: 20,
-  unactiveColor: "",
+import React__default from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
+import { T as TabbarItem } from "./tabbaritem2.js";
+import "./badge2.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  defaultValue: 0,
+  fixed: false,
+  inactiveColor: "",
   activeColor: "",
-  safeAreaInsetBottom: false,
-  className: "",
-  style: {},
-  onSwitch: function onSwitch(child, activeVisible) {
+  safeArea: false,
+  onSwitch: function onSwitch(value) {
   }
-};
+});
 var Tabbar = function Tabbar2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, visible = _defaultProps$props.visible, activeVisible = _defaultProps$props.activeVisible, bottom = _defaultProps$props.bottom, size = _defaultProps$props.size, activeColor = _defaultProps$props.activeColor, unactiveColor = _defaultProps$props.unactiveColor, safeAreaInsetBottom = _defaultProps$props.safeAreaInsetBottom, className = _defaultProps$props.className, style = _defaultProps$props.style, onSwitch2 = _defaultProps$props.onSwitch;
-  var b = cn("tabbar");
-  var _useState = useState(activeVisible || visible), _useState2 = _slicedToArray(_useState, 2), selectIndex = _useState2[0], setSelectIndex = _useState2[1];
-  var _handleClick = function handleClick(idx) {
-    if (!("activeVisible" in props)) {
-      setSelectIndex(idx);
-    }
-  };
-  useEffect(function() {
-    if (activeVisible !== void 0) {
-      setSelectIndex(activeVisible);
-    }
-  }, [activeVisible]);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, defaultValue = _defaultProps$props.defaultValue, value = _defaultProps$props.value, fixed = _defaultProps$props.fixed, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, safeArea = _defaultProps$props.safeArea, className = _defaultProps$props.className, style = _defaultProps$props.style, onSwitch2 = _defaultProps$props.onSwitch;
+  var classPrefix = "nut-tabbar";
+  var _usePropsValue = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: onSwitch2
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), selectIndex = _usePropsValue2[0], setSelectIndex = _usePropsValue2[1];
   return React__default.createElement("div", {
-    className: ["".concat(b()), bottom ? "".concat(b("bottom")) : "", safeAreaInsetBottom ? "".concat(b("bottom"), " ").concat(b("safebottom")) : "", className].join(" "),
+    className: classNames(classPrefix, className, _defineProperty({}, "".concat(classPrefix, "__fixed"), fixed)),
     style
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__wrap")
   }, React__default.Children.map(children, function(child, idx) {
     if (!React__default.isValidElement(child)) {
       return null;
@@ -60,19 +57,18 @@ var Tabbar = function Tabbar2(props) {
     var childProps = _objectSpread(_objectSpread({}, child.props), {}, {
       active: idx === selectIndex,
       index: idx,
-      unactiveColor,
+      inactiveColor,
       activeColor,
-      size,
-      handleClick: function handleClick() {
-        _handleClick(idx);
-        onSwitch2(child, idx);
-      }
+      handleClick: setSelectIndex
     });
     return React__default.cloneElement(child, childProps);
+  })), (fixed || safeArea) && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__safe-area")
   }));
 };
 Tabbar.defaultProps = defaultProps;
 Tabbar.displayName = "NutTabbar";
+Tabbar.Item = TabbarItem;
 export {
   Tabbar as default
 };

package/dist/esm/TabbarItem.js

@@ -1,78 +1,8 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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), true).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, { useEffect } from "react";
-import { c as cn } from "./bem.js";
-import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  dot: false,
-  className: "",
-  tabTitle: "",
-  icon: null,
-  href: "",
-  num: "",
-  active: false,
-  activeColor: "",
-  unactiveColor: "",
-  index: 0,
-  handleClick: function handleClick(idx) {
-  }
-});
-var TabbarItem = function TabbarItem2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), dot = _defaultProps$props.dot, className = _defaultProps$props.className, style = _defaultProps$props.style, tabTitle = _defaultProps$props.tabTitle, icon = _defaultProps$props.icon, href = _defaultProps$props.href, num = _defaultProps$props.num, active = _defaultProps$props.active, activeColor = _defaultProps$props.activeColor, unactiveColor = _defaultProps$props.unactiveColor, index = _defaultProps$props.index, handleClick2 = _defaultProps$props.handleClick;
-  var b = cn("tabbar-item");
-  var bIcon = cn("tabbar-item__icon-box");
-  useEffect(function() {
-    if (active && href) {
-      window.location.href = href;
-    }
-  }, [active, href]);
-  return React__default.createElement("div", {
-    className: "".concat(b({
-      active
-    }), " ").concat(className),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      color: active ? activeColor : unactiveColor
-    }),
-    onClick: function onClick() {
-      handleClick2(index);
-    }
-  }, React__default.createElement("div", {
-    className: "".concat(bIcon())
-  }, !dot ? React__default.createElement(React__default.Fragment, null, num && num <= 99 && React__default.createElement("div", {
-    className: "".concat(bIcon("tips", [bIcon("num")]))
-  }, num), num && num >= 100 && React__default.createElement("div", {
-    className: "".concat(bIcon("tips", [bIcon("nums")]))
-  }, "99+")) : React__default.createElement("div", {
-    className: "".concat(bIcon("tips", [bIcon("dot")]))
-  }), icon || null), tabTitle && React__default.createElement("div", {
-    className: bIcon({
-      "nav-word": true
-    }, [bIcon({
-      "big-word": !icon
-    })])
-  }, tabTitle));
-};
+import { T as TabbarItem } from "./tabbaritem2.js";
+import "react";
+import "classnames";
+import "./typings.js";
+import "./badge2.js";
 export {
   TabbarItem as default
 };

package/dist/esm/Table.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "style", "columns", "data", "bordered", "summary", "striped", "noData", "onSorter", "sorterIcon", "showHeader"];
+var _excluded = ["children", "className", "style", "columns", "data", "bordered", "summary", "striped", "noData", "sorterIcon", "showHeader", "onSort"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -26,37 +26,34 @@ function _objectSpread(target) {
 import React__default, { useState, useEffect } from "react";
 import classNames from "classnames";
 import { DownArrow } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
 import { useConfig } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: "",
-  style: {},
   columns: [],
   data: [],
   bordered: true,
   striped: false,
-  noData: "无数据",
+  noData: "",
   sorterIcon: null,
   showHeader: true
 });
 var Table = function Table2(props) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
   defaultProps.noData = locale.noData;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, columns = _defaultProps$props.columns, data = _defaultProps$props.data, bordered = _defaultProps$props.bordered, summary = _defaultProps$props.summary, striped = _defaultProps$props.striped, noData = _defaultProps$props.noData, onSorter = _defaultProps$props.onSorter, sorterIcon = _defaultProps$props.sorterIcon, showHeader = _defaultProps$props.showHeader, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, columns = _defaultProps$props.columns, data = _defaultProps$props.data, bordered = _defaultProps$props.bordered, summary = _defaultProps$props.summary, striped = _defaultProps$props.striped, noData = _defaultProps$props.noData, sorterIcon = _defaultProps$props.sorterIcon, showHeader = _defaultProps$props.showHeader, onSort = _defaultProps$props.onSort, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var _useState = useState(data), _useState2 = _slicedToArray(_useState, 2), curData = _useState2[0], setCurData = _useState2[1];
   useEffect(function() {
     if (data && String(data) !== String(curData)) {
       setCurData(data);
     }
   }, [data]);
-  var b = cn("table");
-  var classes = classNames({});
-  var cls = classNames(b(), classes, className);
+  var classPrefix = "nut-table";
+  var headerClassPrefix = "".concat(classPrefix, "__main__head__tr");
+  var bodyClassPrefix = "".concat(classPrefix, "__main__body__tr");
+  var cls = classNames(classPrefix, className);
   var handleSorterClick = function handleSorterClick2(item) {
     if (item.sorter) {
-      onSorter && onSorter(item, curData);
+      onSort && onSort(item, curData);
       if (typeof item.sorter === "function") {
         setCurData(curData.sort(item.sorter));
       } else {
@@ -65,9 +62,8 @@ var Table = function Table2(props) {
     }
   };
   var cellClasses = function cellClasses2(item) {
-    return _defineProperty({
-      "nut-table__main__head__tr--border": props.bordered
-    }, "nut-table__main__head__tr--align".concat(item.align ? item.align : ""), true);
+    var _ref;
+    return _ref = {}, _defineProperty(_ref, "".concat(headerClassPrefix, "--border"), props.bordered), _defineProperty(_ref, "".concat(headerClassPrefix, "--align").concat(item.align ? item.align : ""), true), _ref;
   };
   var getColumnItem = function getColumnItem2(value) {
     return columns.filter(function(item) {
@@ -77,7 +73,7 @@ var Table = function Table2(props) {
   var renderHeadCells = function renderHeadCells2() {
     return columns.map(function(item, index) {
       return React__default.createElement("span", {
-        className: classNames("nut-table__main__head__tr__th", cellClasses(item)),
+        className: classNames("".concat(headerClassPrefix, "__th"), cellClasses(item)),
         key: item.key,
         onClick: function onClick() {
           return handleSorterClick(item);
@@ -97,7 +93,7 @@ var Table = function Table2(props) {
     return sortDataItem().map(function(_ref2, index) {
       var _ref3 = _slicedToArray(_ref2, 2), value = _ref3[0], render = _ref3[1];
       return React__default.createElement("span", {
-        className: classNames("nut-table__main__body__tr__td", cellClasses(getColumnItem(value))),
+        className: classNames("".concat(bodyClassPrefix, "__td"), cellClasses(getColumnItem(value))),
         key: value
       }, typeof item[value] === "function" || typeof render === "function" ? React__default.createElement("div", null, render ? render(item) : item[value](item)) : item[value]);
     });
@@ -105,7 +101,7 @@ var Table = function Table2(props) {
   var renderBoyTrs = function renderBoyTrs2() {
     return curData.map(function(item, index) {
       return React__default.createElement("div", {
-        className: "nut-table__main__body__tr",
+        className: bodyClassPrefix,
         key: index
       }, renderBodyTds(item));
     });
@@ -114,26 +110,16 @@ var Table = function Table2(props) {
     className: cls,
     style
   }, rest), React__default.createElement("div", {
-    className: classNames("nut-table__main", {
-      "nut-table__main--striped": striped
-    })
+    className: classNames("".concat(classPrefix, "__main"), _defineProperty({}, "".concat(classPrefix, "__main--striped"), striped))
   }, showHeader && React__default.createElement("div", {
-    className: "nut-table__main__head"
+    className: "".concat(classPrefix, "__main__head")
   }, React__default.createElement("div", {
-    className: "nut-table__main__head__tr"
+    className: headerClassPrefix
   }, renderHeadCells())), React__default.createElement("div", {
-    className: "nut-table__main__body"
-  }, renderBoyTrs())), summary && React__default.createElement("div", {
-    className: "nut-table__summary"
-  }, React__default.createElement("span", {
-    className: "nut-table__summary__text"
-  }, summary)), curData.length === 0 && React__default.createElement("div", {
-    className: "nut-table__nodata"
-  }, React__default.createElement("div", {
-    className: "nut-table__nodata"
-  }, React__default.createElement("div", {
-    className: "nut-table__nodata__text"
-  }, noData))));
+    className: "".concat(classPrefix, "__main__body")
+  }, renderBoyTrs())), (summary || curData.length === 0) && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__summary")
+  }, summary || noData));
 };
 Table.defaultProps = defaultProps;
 Table.displayName = "NutTable";

package/dist/esm/Tabs.js

@@ -2,10 +2,10 @@ import { T as Tabs } from "./tabs2.js";
 import "react";
 import "classnames";
 import "@nutui/icons-react";
-import "./bem.js";
-import "@bem-react/classname";
 import "./typings.js";
 import "./TabPane.js";
+import "./raf.js";
+import "./use-props-value.js";
 export {
   Tabs as default
 };

package/dist/esm/TextArea.js

@@ -1,7 +1,7 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "value", "defaultValue", "showCount", "maxLength", "rows", "placeholder", "readOnly", "disabled", "autoSize", "style", "onChange", "onBlur", "onFocus"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,131 +23,103 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useRef, useEffect } from "react";
+import React__default, { useRef, useEffect } from "react";
+import classNames from "classnames";
 import { useConfig } from "./ConfigProvider.js";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
-var defaultProps = {
+import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   defaultValue: "",
-  textAlign: "left",
-  limitshow: false,
-  maxlength: "",
-  rows: "",
+  showCount: false,
+  rows: 2,
+  maxLength: 140,
   placeholder: "",
-  readonly: false,
+  readOnly: false,
   disabled: false,
-  autosize: false
-};
+  autoSize: false
+});
 var TextArea = function TextArea2(props) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, defaultValue = _defaultProps$props.defaultValue, textAlign = _defaultProps$props.textAlign, limitshow = _defaultProps$props.limitshow, maxlength = _defaultProps$props.maxlength, rows = _defaultProps$props.rows, placeholder = _defaultProps$props.placeholder, readonly = _defaultProps$props.readonly, disabled = _defaultProps$props.disabled, autosize = _defaultProps$props.autosize, style = _defaultProps$props.style, onChange = _defaultProps$props.onChange, onBlur = _defaultProps$props.onBlur, onFocus = _defaultProps$props.onFocus;
-  var textareaBem = cn("textarea");
-  var _useState = useState(""), _useState2 = _slicedToArray(_useState, 2), inputValue = _useState2[0], SetInputValue = _useState2[1];
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, showCount = _defaultProps$props.showCount, maxLength = _defaultProps$props.maxLength, rows = _defaultProps$props.rows, placeholder = _defaultProps$props.placeholder, readOnly = _defaultProps$props.readOnly, disabled = _defaultProps$props.disabled, autoSize = _defaultProps$props.autoSize, style = _defaultProps$props.style, onChange = _defaultProps$props.onChange, onBlur = _defaultProps$props.onBlur, onFocus = _defaultProps$props.onFocus, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-textarea";
   var textareaRef = useRef(null);
-  var compositingRef = useRef(false);
-  useEffect(function() {
-    var initValue = defaultValue;
-    if (initValue && maxlength && _toConsumableArray(initValue).length > Number(maxlength)) {
-      initValue = initValue.substring(0, Number(maxlength));
-    }
-    SetInputValue(initValue);
-    if (autosize) {
-      setTimeout(function() {
-        setContentHeight();
-      });
+  var compositionRef = useRef(false);
+  var format = function format2(value2) {
+    if (maxLength !== void 0 && value2.length > maxLength) {
+      return value2.substring(0, maxLength);
     }
-  }, [defaultValue, autosize]);
+    return value2;
+  };
+  var _usePropsValue = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: format(defaultValue),
+    onChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), inputValue = _usePropsValue2[0], setInputValue = _usePropsValue2[1];
   useEffect(function() {
-    if (inputValue) {
-      if (autosize) {
-        setContentHeight();
-      }
+    if (autoSize) {
+      setContentHeight();
     }
-  }, [inputValue]);
+  }, [autoSize, defaultValue, inputValue]);
   var setContentHeight = function setContentHeight2() {
     var textarea = textareaRef.current;
     if (textarea) {
       textarea.style.height = "auto";
       var height = textarea === null || textarea === void 0 ? void 0 : textarea.scrollHeight;
-      if (_typeof(autosize) === "object") {
-        var maxHeight = autosize.maxHeight, minHeight = autosize.minHeight;
-        if (maxHeight !== void 0) {
-          height = Math.min(height, maxHeight);
-        }
-        if (minHeight !== void 0) {
-          height = Math.max(height, minHeight);
-        }
-      }
       if (height) {
         textarea.style.height = "".concat(height, "px");
       }
     }
   };
-  var textChange = function textChange2(event) {
+  var handleChange = function handleChange2(event) {
     var text = event.target;
-    if (maxlength && _toConsumableArray(text.value).length > Number(maxlength) && !compositingRef.current) {
-      text.value = text.value.substring(0, Number(maxlength));
-    }
-    SetInputValue(text.value);
-    onChange && onChange(text.value, event);
+    var value2 = compositionRef.current ? text.value : format(text.value);
+    setInputValue(value2);
   };
-  var textFocus = function textFocus2(event) {
+  var handleFocus = function handleFocus2(event) {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     onFocus && onFocus(event);
   };
-  var textBlur = function textBlur2(event) {
+  var handleBlur = function handleBlur2(event) {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
-    var text = event.target;
-    onChange && onChange(text.value, event);
     onBlur && onBlur(event);
   };
-  var startComposing = function startComposing2() {
-    compositingRef.current = true;
-  };
-  var endComposing = function endComposing2() {
-    compositingRef.current = false;
-  };
   return React__default.createElement("div", {
-    className: "".concat(textareaBem(), " ").concat(disabled ? textareaBem("disabled") : "", " ").concat(className || "")
-  }, React__default.createElement("textarea", {
+    className: classNames(classPrefix, className, _defineProperty({}, "".concat(classPrefix, "__disabled"), disabled))
+  }, React__default.createElement("textarea", _objectSpread({
     ref: textareaRef,
-    className: textareaBem("textarea"),
-    style: _objectSpread({
-      textAlign
-    }, style),
+    className: "".concat(classPrefix, "__textarea"),
+    style,
     disabled,
-    readOnly: readonly,
+    readOnly,
     value: inputValue,
-    // onInput={(e: any) => {
-    //   textChange(e)
-    // }}
     onChange: function onChange2(e) {
-      textChange(e);
+      return handleChange(e);
     },
     onBlur: function onBlur2(e) {
-      textBlur(e);
+      return handleBlur(e);
     },
     onFocus: function onFocus2(e) {
-      textFocus(e);
+      return handleFocus(e);
     },
-    onCompositionEnd: function onCompositionEnd(e) {
-      return endComposing();
+    onCompositionEnd: function onCompositionEnd() {
+      compositionRef.current = false;
     },
-    onCompositionStart: function onCompositionStart(e) {
-      return startComposing();
+    onCompositionStart: function onCompositionStart() {
+      compositionRef.current = true;
     },
     rows,
-    maxLength: maxlength < 0 ? 0 : maxlength,
+    maxLength: maxLength === -1 ? void 0 : maxLength,
     placeholder: placeholder || locale.placeholder
-  }), limitshow ? React__default.createElement("div", {
-    className: textareaBem("limit")
-  }, _toConsumableArray(inputValue).length, "/", maxlength < 0 ? 0 : maxlength) : null);
+  }, rest)), showCount && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__limit")
+  }, inputValue.length, "/", maxLength < 0 ? 0 : maxLength));
 };
 TextArea.defaultProps = defaultProps;
 TextArea.displayName = "NutTextArea";