@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/esm/get-scroll-parent.js

@@ -1,18 +1,17 @@
 import { c as canUseDom } from "./can-use-dom.js";
-var defaultRoot = canUseDom ? window : void 0;
-var overflowStylePatterns = ["scroll", "auto", "overlay"];
+const defaultRoot = canUseDom ? window : void 0;
+const overflowStylePatterns = ["scroll", "auto", "overlay"];
 function isElement(node) {
-  var ELEMENT_NODE_TYPE = 1;
+  const ELEMENT_NODE_TYPE = 1;
   return node.nodeType === ELEMENT_NODE_TYPE;
 }
-function getScrollParent(el) {
-  var root = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : defaultRoot;
-  var node = el;
+function getScrollParent(el, root = defaultRoot) {
+  let node = el;
   while (node && node !== root && isElement(node)) {
     if (node === document.body) {
       return root;
     }
-    var _window$getComputedSt = window.getComputedStyle(node), overflowY = _window$getComputedSt.overflowY;
+    const { overflowY } = window.getComputedStyle(node);
     if (overflowStylePatterns.includes(overflowY) && node.scrollHeight > node.clientHeight) {
       return node;
     }
@@ -20,12 +19,11 @@ function getScrollParent(el) {
   }
   return root;
 }
-function getAllScrollableParents(element) {
-  var scrollableParents = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+function getAllScrollableParents(element, scrollableParents = []) {
   if (!element) {
     return scrollableParents;
   }
-  var isScrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+  const isScrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
   if (isScrollable) {
     if (element.nodeName === "HTML") {
       scrollableParents.push(document);

package/dist/esm/griditem2.js

@@ -1,37 +1,14 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "style", "columns", "index", "gap", "square", "text", "center", "reverse", "direction", "className", "onClick"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default, { useContext } from "react";
 import classNames from "classnames";
 import { useConfig } from "./ConfigProvider.js";
 import { p as pxCheck } from "./px-check.js";
-var gridContext = {
-  onClick: function onClick(item, index) {
+const gridContext = {
+  onClick: (item, index) => {
   }
 };
-var GridContext = React__default.createContext(gridContext);
-var defaultProps = {
+const GridContext = React__default.createContext(gridContext);
+const defaultProps = {
   text: "",
   columns: 4,
   gap: 0,
@@ -40,18 +17,16 @@ var defaultProps = {
   reverse: false,
   direction: "vertical"
 };
-var GridItem = function GridItem2(props) {
+const GridItem = (props) => {
   useConfig();
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, style = _defaultProps$props.style, columns = _defaultProps$props.columns, index = _defaultProps$props.index, gap = _defaultProps$props.gap, square = _defaultProps$props.square, text = _defaultProps$props.text, center = _defaultProps$props.center, reverse = _defaultProps$props.reverse, direction = _defaultProps$props.direction, className = _defaultProps$props.className, onClick2 = _defaultProps$props.onClick, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var classPrefix = "nut-grid-item";
-  var classes = classNames(classPrefix, className);
-  var context = useContext(GridContext);
-  var rootStyle = function rootStyle2() {
-    var styles = _objectSpread({
-      flexBasis: "".concat(100 / +columns, "%")
-    }, style);
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, style, columns, index, gap, square, text, center, reverse, direction, className, onClick } = _a, rest = __rest(_a, ["children", "style", "columns", "index", "gap", "square", "text", "center", "reverse", "direction", "className", "onClick"]);
+  const classPrefix = "nut-grid-item";
+  const classes = classNames(classPrefix, className);
+  const context = useContext(GridContext);
+  const rootStyle = () => {
+    const styles = Object.assign({ flexBasis: `${100 / +columns}%` }, style);
     if (square) {
-      styles.paddingTop = "".concat(100 / +columns, "%");
+      styles.paddingTop = `${100 / +columns}%`;
     } else if (gap) {
       styles.paddingRight = pxCheck(gap);
       if (index >= Number(columns)) {
@@ -60,11 +35,18 @@ var GridItem = function GridItem2(props) {
     }
     return styles;
   };
-  var contentClass = function contentClass2() {
-    return classNames("".concat(classPrefix, "-content"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-content-border"), true), "".concat(classPrefix, "-content-surround"), gap), "".concat(classPrefix, "-content-center"), center), "".concat(classPrefix, "-content-square"), square), "".concat(classPrefix, "-content-reverse"), reverse), "".concat(classPrefix, "-content-").concat(direction), !!direction));
+  const contentClass = () => {
+    return classNames(`${classPrefix}-content`, {
+      [`${classPrefix}-content-border`]: true,
+      [`${classPrefix}-content-surround`]: gap,
+      [`${classPrefix}-content-center`]: center,
+      [`${classPrefix}-content-square`]: square,
+      [`${classPrefix}-content-reverse`]: reverse,
+      [`${classPrefix}-content-${direction}`]: !!direction
+    });
   };
-  var handleClick = function handleClick2(e) {
-    onClick2 && onClick2(e);
+  const handleClick = (e) => {
+    onClick && onClick(e);
     context.onClick && context.onClick({
       text,
       index,
@@ -76,16 +58,16 @@ var GridItem = function GridItem2(props) {
       direction
     }, index);
   };
-  return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: classes,
-    style: rootStyle()
-  }, rest), {}, {
-    onClick: handleClick
-  }), React__default.createElement("div", {
-    className: contentClass()
-  }, children && React__default.createElement(React__default.Fragment, null, children), text && React__default.createElement("div", {
-    className: "".concat(classPrefix, "-text")
-  }, text)));
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: classes, style: rootStyle() }, rest, { onClick: handleClick }),
+    React__default.createElement(
+      "div",
+      { className: contentClass() },
+      children && React__default.createElement(React__default.Fragment, null, children),
+      text && React__default.createElement("div", { className: `${classPrefix}-text` }, text)
+    )
+  );
 };
 GridItem.defaultProps = defaultProps;
 GridItem.displayName = "NutGridItem";

package/dist/esm/index.js

@@ -1,16 +1,9 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-var isObject = function isObject2(val) {
-  return val !== null && _typeof(val) === "object";
-};
-var isFunction = function isFunction2(val) {
-  return typeof val === "function";
-};
-var isPromise = function isPromise2(val) {
-  return isObject(val) && isFunction(val.then) && isFunction(val["catch"]);
-};
-var clamp = function clamp2(num, min, max) {
-  return Math.min(Math.max(num, min), max);
+const isObject = (val) => val !== null && typeof val === "object";
+const isFunction = (val) => typeof val === "function";
+const isPromise = (val) => {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
 };
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 function preventDefault(event, isStopPropagation) {
   if (typeof event.cancelable !== "boolean" || event.cancelable) {
     event.preventDefault();

package/dist/esm/indicator2.js

@@ -1,54 +1,25 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["total", "current", "children", "className", "direction"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default from "react";
 import classNames from "classnames";
-var defaultProps = {
+const defaultProps = {
   total: 3,
   current: 0,
   direction: "horizontal"
 };
-var classPrefix = "nut-indicator";
-var Indicator = function Indicator2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), total = _defaultProps$props.total, current = _defaultProps$props.current, children = _defaultProps$props.children, className = _defaultProps$props.className, direction = _defaultProps$props.direction, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var classes = classNames(_defineProperty({}, "".concat(classPrefix, "-vertical"), direction === "vertical"));
-  var renderElement = function renderElement2() {
-    var childs = [];
-    for (var item = 0; item < total; item++) {
-      childs.push(item === current ? children || React__default.createElement("div", {
-        key: item,
-        className: "".concat(classPrefix, "-dot ").concat(classPrefix, "-active")
-      }) : React__default.createElement("div", {
-        key: item,
-        className: "".concat(classPrefix, "-dot")
-      }));
+const classPrefix = `nut-indicator`;
+const Indicator = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { total, current, children, className, direction } = _a, rest = __rest(_a, ["total", "current", "children", "className", "direction"]);
+  const classes = classNames({
+    [`${classPrefix}-vertical`]: direction === "vertical"
+  });
+  const renderElement = () => {
+    const childs = [];
+    for (let item = 0; item < total; item++) {
+      childs.push(item === current ? children || React__default.createElement("div", { key: item, className: `${classPrefix}-dot ${classPrefix}-active` }) : React__default.createElement("div", { key: item, className: `${classPrefix}-dot` }));
     }
     return childs;
   };
-  return React__default.createElement("div", _objectSpread({
-    className: classNames(classPrefix, classes, className)
-  }, rest), renderElement());
+  return React__default.createElement("div", Object.assign({ className: classNames(classPrefix, classes, className) }, rest), renderElement());
 };
 Indicator.defaultProps = defaultProps;
 Indicator.displayName = "NutIndicator";

package/dist/esm/menuitem2.js

@@ -1,26 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
 import React__default, { forwardRef, useState, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
@@ -30,105 +7,92 @@ import { u as useClickAway } from "./use-click-away.js";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
 import { g as getScrollParent } from "./get-scroll-parent.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  columns: 1,
-  direction: "down",
-  icon: null,
-  closeOnClickAway: true,
-  activeTitleClass: "",
-  inactiveTitleClass: "",
-  onChange: function onChange(value) {
-    return void 0;
-  }
-});
-var MenuItem = forwardRef(function(props, ref) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, options = _defaultProps$props.options, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, columns = _defaultProps$props.columns, title = _defaultProps$props.title, icon = _defaultProps$props.icon, direction = _defaultProps$props.direction, _onChange = _defaultProps$props.onChange, activeTitleClass = _defaultProps$props.activeTitleClass, inactiveTitleClass = _defaultProps$props.inactiveTitleClass, closeOnClickAway = _defaultProps$props.closeOnClickAway, children = _defaultProps$props.children, activeColor = _defaultProps$props.activeColor, show = _defaultProps$props.show, parent = _defaultProps$props.parent, index = _defaultProps$props.index;
-  var _useState = useState(show), _useState2 = _slicedToArray(_useState, 2), showPopup = _useState2[0], setShowPopup = _useState2[1];
-  var _usePropsValue = usePropsValue({
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { columns: 1, direction: "down", icon: null, closeOnClickAway: true, activeTitleClass: "", inactiveTitleClass: "", onChange: (value) => void 0 });
+const MenuItem = forwardRef((props, ref) => {
+  const { className, style, options, value, defaultValue, columns, title, icon, direction, onChange, activeTitleClass, inactiveTitleClass, closeOnClickAway, children, activeColor, show, parent, index } = Object.assign(Object.assign({}, defaultProps), props);
+  const [showPopup, setShowPopup] = useState(show);
+  const [innerValue, setValue] = usePropsValue({
     defaultValue,
     value,
     finalValue: void 0,
-    onChange: function onChange2(v) {
-      var _options$filter = options.filter(function(o) {
-        return o.value === v;
-      }), _options$filter2 = _slicedToArray(_options$filter, 1), option = _options$filter2[0];
-      _onChange === null || _onChange === void 0 || _onChange(option);
+    onChange: (v) => {
+      const [option] = options.filter((o) => o.value === v);
+      onChange === null || onChange === void 0 ? void 0 : onChange(option);
     }
-  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), innerValue = _usePropsValue2[0], setValue = _usePropsValue2[1];
-  useEffect(function() {
+  });
+  useEffect(() => {
     setShowPopup(show);
   }, [show]);
-  useEffect(function() {
+  useEffect(() => {
     getParentOffset();
   }, [showPopup]);
-  useImperativeHandle(ref, function() {
-    return {
-      toggle: function toggle(s) {
-        var from = "REF";
-        s ? parent.toggleMenuItem(index, from) : parent.hideMenuItem(index, from);
-      }
-    };
-  });
-  var getIconCName = function getIconCName2(optionVal, value2) {
-    return classNames(_defineProperty(_defineProperty({}, activeTitleClass, optionVal === value2), inactiveTitleClass, optionVal !== value2));
+  useImperativeHandle(ref, () => ({
+    toggle: (s) => {
+      const from = "REF";
+      s ? parent.toggleMenuItem(index, from) : parent.hideMenuItem(index, from);
+    }
+  }));
+  const getIconCName = (optionVal, value2) => {
+    return classNames({
+      [activeTitleClass]: optionVal === value2,
+      [inactiveTitleClass]: optionVal !== value2
+    });
   };
-  var setTitle = function setTitle2(text) {
+  const setTitle = (text) => {
     if (!title) {
       parent.updateTitle(text, index);
     }
   };
-  var handleClick = function handleClick2(item) {
+  const handleClick = (item) => {
     parent.toggleMenuItem(index);
     setTitle(item.text);
     setValue(item.value);
   };
-  var isShow = function isShow2() {
+  const isShow = () => {
     if (showPopup)
       return {};
-    return {
-      display: "none"
-    };
+    return { display: "none" };
   };
-  var _useState3 = useState({
+  const [position, setPosition] = useState({
     top: 0,
     height: 0
-  }), _useState4 = _slicedToArray(_useState3, 2), position = _useState4[0], setPosition = _useState4[1];
-  var scrollParent = useMemo(function() {
+  });
+  const scrollParent = useMemo(() => {
     return getScrollParent(parent.menuRef, window);
   }, [parent.menuRef]);
-  var getParentOffset = function getParentOffset2() {
-    setTimeout(function() {
-      var p = parent.menuRef.current;
-      var rect = p.getBoundingClientRect();
+  const getParentOffset = () => {
+    setTimeout(() => {
+      const p = parent.menuRef.current;
+      const rect = p.getBoundingClientRect();
       setPosition({
         height: rect.height,
         top: rect.top
       });
     });
   };
-  useEffect(function() {
+  useEffect(() => {
     if (!parent.lockScroll) {
-      scrollParent === null || scrollParent === void 0 || scrollParent.addEventListener("scroll", getParentOffset, false);
-      return function() {
-        scrollParent === null || scrollParent === void 0 || scrollParent.removeEventListener("scroll", getParentOffset, false);
+      scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.addEventListener("scroll", getParentOffset, false);
+      return () => {
+        scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.removeEventListener("scroll", getParentOffset, false);
       };
     }
   }, []);
-  var getPosition = function getPosition2() {
+  const getPosition = () => {
     return direction === "down" ? {
-      top: "".concat(position.top + position.height, "px"),
+      top: `${position.top + position.height}px`,
       bottom: "0",
       height: "initial"
     } : {
-      bottom: "".concat(window.innerHeight - position.top, "px"),
+      bottom: `${window.innerHeight - position.top}px`,
       top: "auto",
       height: "initial"
     };
   };
-  var micRef = useRef(null);
-  var targetSet = [micRef.current];
+  const micRef = useRef(null);
+  const targetSet = [micRef.current];
   useClickAway(
-    function() {
+    () => {
       parent.hideMenuItem(index);
     },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -139,52 +103,45 @@ var MenuItem = forwardRef(function(props, ref) {
     showPopup,
     closeOnClickAway
   );
-  return React__default.createElement("div", {
-    className: "nut-menu-container",
-    ref: micRef
-  }, parent.overlay ? React__default.createElement(Overlay, {
-    className: "nut-menu-container-overlay",
-    style: getPosition(),
-    lockScroll: parent.lockScroll,
-    visible: showPopup,
-    closeOnOverlayClick: parent.closeOnOverlayClick,
-    onClick: function onClick() {
+  return React__default.createElement(
+    "div",
+    { className: "nut-menu-container", ref: micRef },
+    parent.overlay ? React__default.createElement(Overlay, { className: "nut-menu-container-overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: showPopup, closeOnOverlayClick: parent.closeOnOverlayClick, onClick: () => {
       parent.closeOnOverlayClick && parent.hideMenuItem(index);
-    }
-  }) : null, React__default.createElement("div", {
-    className: classNames({
-      "nut-menu-container-wrap": direction === "down",
-      "nut-menu-container-wrap-up": direction !== "down"
-    }, className),
-    style: _objectSpread(_objectSpread({}, style), isShow())
-  }, React__default.createElement(CSSTransition, {
-    "in": showPopup,
-    timeout: 100,
-    classNames: direction === "down" ? "nut-menu-container-down" : "nut-menu-container-up"
-  }, React__default.createElement("div", {
-    className: "nut-menu-container-content"
-  }, options === null || options === void 0 ? void 0 : options.map(function(item) {
-    return React__default.createElement("div", {
-      className: "nut-menu-container-item ".concat(classNames({
-        active: item.value === innerValue
-      })),
-      key: item.text,
-      style: {
-        flexBasis: "".concat(100 / columns, "%")
-      },
-      onClick: function onClick() {
-        handleClick(item);
-      }
-    }, item.value === innerValue ? React__default.createElement("i", null, icon || React__default.createElement(Check, {
-      color: activeColor,
-      className: getIconCName(item.value, value)
-    })) : null, React__default.createElement("div", {
-      className: getIconCName(item.value, value),
-      style: {
-        color: "".concat(item.value === innerValue ? activeColor : "")
-      }
-    }, item.text));
-  }), children))));
+    } }) : null,
+    React__default.createElement(
+      "div",
+      { className: classNames({
+        "nut-menu-container-wrap": direction === "down",
+        "nut-menu-container-wrap-up": direction !== "down"
+      }, className), style: Object.assign(Object.assign({}, style), isShow()) },
+      React__default.createElement(
+        CSSTransition,
+        { in: showPopup, timeout: 100, classNames: direction === "down" ? "nut-menu-container-down" : "nut-menu-container-up" },
+        React__default.createElement(
+          "div",
+          { className: "nut-menu-container-content" },
+          options === null || options === void 0 ? void 0 : options.map((item) => {
+            return React__default.createElement(
+              "div",
+              { className: `nut-menu-container-item ${classNames({
+                active: item.value === innerValue
+              })}`, key: item.text, style: {
+                flexBasis: `${100 / columns}%`
+              }, onClick: () => {
+                handleClick(item);
+              } },
+              item.value === innerValue ? React__default.createElement("i", null, icon || React__default.createElement(Check, { color: activeColor, className: getIconCName(item.value, value) })) : null,
+              React__default.createElement("div", { className: getIconCName(item.value, value), style: {
+                color: `${item.value === innerValue ? activeColor : ""}`
+              } }, item.text)
+            );
+          }),
+          children
+        )
+      )
+    )
+  );
 });
 MenuItem.defaultProps = defaultProps;
 MenuItem.displayName = "NutMenuItem";