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

package/dist/esm/Menu.js

@@ -2,132 +2,130 @@ 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", "titleIcon", "scrollFixed", "lockScroll", "closeOnClickOverlay", "children", "activeColor", "iconClassPrefix", "iconFontClassName"];
-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, { useRef, useState, useEffect } from 'react';
-import classNames from 'classnames';
-import Icon from './Icon.js';
-import { C as ComponentDefaults } from './typings-f27b58f4.js';
+var _excluded = ["className", "titleIcon", "scrollFixed", "lockScroll", "closeOnClickOverlay", "children", "activeColor"];
+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, { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import { ArrowUp2, ArrowDown2 } from "@nutui/icons-react";
+import { C as ComponentDefaults } from "./typings.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: '',
+  className: "",
   style: {},
-  activeColor: '#F2270C',
+  activeColor: "",
   closeOnClickOverlay: true,
   scrollFixed: false,
   lockScroll: true,
-  titleIcon: ''
+  titleIcon: null
 });
-var Menu = function Menu(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    className = _defaultProps$props.className,
-    titleIcon = _defaultProps$props.titleIcon,
-    scrollFixed = _defaultProps$props.scrollFixed,
-    lockScroll = _defaultProps$props.lockScroll,
-    closeOnClickOverlay = _defaultProps$props.closeOnClickOverlay,
-    children = _defaultProps$props.children,
-    activeColor = _defaultProps$props.activeColor,
-    iconClassPrefix = _defaultProps$props.iconClassPrefix,
-    iconFontClassName = _defaultProps$props.iconFontClassName,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+var Menu = function Menu2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, titleIcon = _defaultProps$props.titleIcon, scrollFixed = _defaultProps$props.scrollFixed, lockScroll = _defaultProps$props.lockScroll, closeOnClickOverlay = _defaultProps$props.closeOnClickOverlay, children = _defaultProps$props.children, activeColor = _defaultProps$props.activeColor, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var parentRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isScrollFixed = _useState2[0],
-    setIsScrollFixed = _useState2[1];
-  var getScrollTop = function getScrollTop(el) {
-    return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), isScrollFixed = _useState2[0], setIsScrollFixed = _useState2[1];
+  var getScrollTop = function getScrollTop2(el) {
+    return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
   };
-  var onScroll = function onScroll() {
-    var scrollFixed = props.scrollFixed;
+  var onScroll = function onScroll2() {
+    var scrollFixed2 = props.scrollFixed;
     var scrollTop = getScrollTop(window);
-    var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
+    var isFixed = scrollTop > (typeof scrollFixed2 === "boolean" ? 30 : Number(scrollFixed2));
     setIsScrollFixed(isFixed);
   };
-  useEffect(function () {
+  useEffect(function() {
     if (scrollFixed) {
-      window.addEventListener('scroll', onScroll);
+      window.addEventListener("scroll", onScroll);
     }
-    return function () {
-      return window.removeEventListener('scroll', onScroll);
+    return function() {
+      return window.removeEventListener("scroll", onScroll);
     };
   }, []);
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    itemShow = _useState4[0],
-    setItemShow = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    itemTitle = _useState6[0],
-    setItemTitle = _useState6[1];
-  var toggleItemShow = function toggleItemShow(index) {
+  var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), itemShow = _useState4[0], setItemShow = _useState4[1];
+  var _useState5 = useState([]), _useState6 = _slicedToArray(_useState5, 2), itemTitle = _useState6[0], setItemTitle = _useState6[1];
+  var toggleItemShow = function toggleItemShow2(index) {
     itemShow[index] = !itemShow[index];
-    var temp = itemShow.map(function (i, idx) {
+    var temp = itemShow.map(function(i, idx) {
       return idx === index ? i : false;
     });
     setItemShow(_toConsumableArray(temp));
   };
-  var hideItemShow = function hideItemShow(index) {
+  var hideItemShow = function hideItemShow2(index) {
     itemShow[index] = false;
     setItemShow(_toConsumableArray(itemShow));
   };
-  var updateTitle = function updateTitle(text, index) {
+  var updateTitle = function updateTitle2(text, index) {
     itemTitle[index] = text;
     setItemTitle(_toConsumableArray(itemTitle));
   };
-  var parent = function parent() {
+  var parent = function parent2() {
     return parentRef;
   };
-  var cloneChildren = function cloneChildren() {
-    return React__default.Children.map(children, function (child, index) {
+  var cloneChildren = function cloneChildren2() {
+    return React__default.Children.map(children, function(child, index) {
       return React__default.cloneElement(child, {
         showPopup: itemShow[index],
         orderKey: index,
-        activeColor: activeColor,
+        activeColor,
         parent: {
-          closeOnClickOverlay: closeOnClickOverlay,
-          lockScroll: lockScroll,
-          toggleItemShow: toggleItemShow,
-          updateTitle: updateTitle,
-          hideItemShow: hideItemShow,
-          parent: parent
+          closeOnClickOverlay,
+          lockScroll,
+          toggleItemShow,
+          updateTitle,
+          hideItemShow,
+          parent
         }
       });
     });
   };
   return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: "nut-menu ".concat(className, " ").concat(isScrollFixed ? 'scroll-fixed' : '')
+    className: "nut-menu ".concat(className, " ").concat(isScrollFixed ? "scroll-fixed" : "")
   }, rest), {}, {
     ref: parentRef
   }), React__default.createElement("div", {
     className: "nut-menu-relative"
   }, React__default.createElement("div", {
-    className: "nut-menu__bar ".concat(itemShow.includes(true) ? 'opened' : '', " ").concat(className)
-  }, React__default.Children.toArray(children).map(function (child, index) {
-    if (!child) return null;
-    var _child$props = child.props,
-      disabled = _child$props.disabled,
-      title = _child$props.title,
-      value = _child$props.value,
-      direction = _child$props.direction,
-      options = _child$props.options,
-      className = _child$props.className;
-    var currentTitle = options === null || options === void 0 ? void 0 : options.filter(function (option) {
+    className: "nut-menu__bar ".concat(itemShow.includes(true) ? "opened" : "", " ").concat(className)
+  }, React__default.Children.toArray(children).map(function(child, index) {
+    if (!child)
+      return null;
+    var _child$props = child.props, disabled = _child$props.disabled, title = _child$props.title, value = _child$props.value, direction = _child$props.direction, options = _child$props.options, className2 = _child$props.className;
+    var currentTitle = options === null || options === void 0 ? void 0 : options.filter(function(option) {
       return option.value === value;
     });
     function finallyTitle() {
-      if (title) return title;
-      if (itemTitle && itemTitle[index]) return itemTitle[index];
-      if (currentTitle && currentTitle[0] && currentTitle[0].text) return currentTitle[0].text;
-      return '';
+      if (title)
+        return title;
+      if (itemTitle && itemTitle[index])
+        return itemTitle[index];
+      if (currentTitle && currentTitle[0] && currentTitle[0].text)
+        return currentTitle[0].text;
+      return "";
     }
     return React__default.createElement("div", {
       className: "nut-menu__item ".concat(classNames({
         active: itemShow[index],
-        disabled: disabled
-      }), " ").concat(className),
+        disabled
+      }), " ").concat(className2),
       style: {
-        color: itemShow[index] ? activeColor : ''
+        color: itemShow[index] ? activeColor : ""
       },
       key: index,
       onClick: function onClick() {
@@ -136,19 +134,19 @@ var Menu = function Menu(props) {
     }, React__default.createElement("div", {
       className: "nut-menu__title ".concat(classNames({
         active: itemShow[index],
-        disabled: disabled
+        disabled
       }))
     }, React__default.createElement("div", {
       className: "nut-menu__title-text"
-    }, finallyTitle()), React__default.createElement(Icon, {
-      classPrefix: iconClassPrefix,
-      fontClassName: iconFontClassName,
-      className: "nut-menu__title-icon",
-      size: "10",
-      name: titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')
-    })));
+    }, finallyTitle()), titleIcon || React__default.createElement(React__default.Fragment, null, direction === "up" ? React__default.createElement(ArrowUp2, {
+      className: "nut-menu__title-icon"
+    }) : React__default.createElement(ArrowDown2, {
+      className: "nut-menu__title-icon"
+    }))));
   })), cloneChildren()));
 };
 Menu.defaultProps = defaultProps;
-Menu.displayName = 'NutMenu';
-export { Menu as default };
+Menu.displayName = "NutMenu";
+export {
+  Menu as default
+};

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

@@ -1,3 +1,2 @@
-import '../../Icon/style'
 import '../../Overlay/style'
 import '../../../packages/menuitem/menuitem.scss'

package/dist/esm/MenuItem.js

@@ -1,92 +1,82 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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), !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, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
-import classNames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
-import Icon from './Icon.js';
-import { O as Overlay } from './overlay-de6c79d5.js';
-import { C as ComponentDefaults } from './typings-f27b58f4.js';
-import './bem-3b438e61.js';
-import '@bem-react/classname';
+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, { forwardRef, useState, useEffect, useImperativeHandle } from "react";
+import classNames from "classnames";
+import { CSSTransition } from "react-transition-group";
+import { Check } from "@nutui/icons-react";
+import { O as Overlay } from "./overlay2.js";
+import { C as ComponentDefaults } from "./typings.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: '',
+  className: "",
   style: {},
   columns: 1,
-  direction: 'down',
-  optionsIcon: 'Check',
-  activeTitleClass: '',
-  inactiveTitleClass: '',
-  iconClassPrefix: 'nut-icon',
-  fontClassName: 'nutui-iconfont',
+  direction: "down",
+  optionsIcon: null,
+  activeTitleClass: "",
+  inactiveTitleClass: "",
   onChange: function onChange(value) {
-    return undefined;
+    return void 0;
   }
 });
-var MenuItem = forwardRef(function (props, ref) {
+var MenuItem = forwardRef(function(props, ref) {
   var mergedProps = _objectSpread(_objectSpread({}, defaultProps), props);
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    style = _defaultProps$props.style,
-    options = _defaultProps$props.options,
-    value = _defaultProps$props.value,
-    columns = _defaultProps$props.columns,
-    title = _defaultProps$props.title,
-    optionsIcon = _defaultProps$props.optionsIcon,
-    direction = _defaultProps$props.direction,
-    onChange = _defaultProps$props.onChange,
-    activeTitleClass = _defaultProps$props.activeTitleClass,
-    inactiveTitleClass = _defaultProps$props.inactiveTitleClass,
-    children = _defaultProps$props.children,
-    iconClassPrefix = _defaultProps$props.iconClassPrefix,
-    iconFontClassName = _defaultProps$props.iconFontClassName;
-  var activeColor = mergedProps.activeColor,
-    showPopup = mergedProps.showPopup,
-    parent = mergedProps.parent,
-    orderKey = mergedProps.orderKey;
-  var _useState = useState(showPopup),
-    _useState2 = _slicedToArray(_useState, 2),
-    _showPopup = _useState2[0],
-    setShowPopup = _useState2[1];
-  var _useState3 = useState(value),
-    _useState4 = _slicedToArray(_useState3, 2),
-    _value = _useState4[0],
-    setValue = _useState4[1];
-  useEffect(function () {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), style = _defaultProps$props.style, options = _defaultProps$props.options, value = _defaultProps$props.value, columns = _defaultProps$props.columns, title = _defaultProps$props.title, optionsIcon = _defaultProps$props.optionsIcon, direction = _defaultProps$props.direction, onChange2 = _defaultProps$props.onChange, activeTitleClass = _defaultProps$props.activeTitleClass, inactiveTitleClass = _defaultProps$props.inactiveTitleClass, children = _defaultProps$props.children;
+  var activeColor = mergedProps.activeColor, showPopup = mergedProps.showPopup, parent = mergedProps.parent, orderKey = mergedProps.orderKey;
+  var _useState = useState(showPopup), _useState2 = _slicedToArray(_useState, 2), _showPopup = _useState2[0], setShowPopup = _useState2[1];
+  var _useState3 = useState(value), _useState4 = _slicedToArray(_useState3, 2), _value = _useState4[0], setValue = _useState4[1];
+  useEffect(function() {
     setShowPopup(showPopup);
   }, [showPopup]);
-  useEffect(function () {
+  useEffect(function() {
     getParentOffset();
   }, [_showPopup]);
-  useImperativeHandle(ref, function () {
+  useImperativeHandle(ref, function() {
     return {
       toggle: parent.toggleItemShow
     };
   });
-  var getIconCName = function getIconCName(optionVal, value) {
+  var getIconCName = function getIconCName2(optionVal, value2) {
     var _classNames;
-    return classNames((_classNames = {}, _defineProperty(_classNames, activeTitleClass, optionVal === value), _defineProperty(_classNames, inactiveTitleClass, optionVal !== value), _classNames));
+    return classNames((_classNames = {}, _defineProperty(_classNames, activeTitleClass, optionVal === value2), _defineProperty(_classNames, inactiveTitleClass, optionVal !== value2), _classNames));
   };
-  var setTitle = function setTitle(text) {
+  var setTitle = function setTitle2(text) {
     if (!title) {
       parent.updateTitle(text, orderKey);
     }
   };
-  var handleClick = function handleClick(item) {
+  var handleClick = function handleClick2(item) {
     parent.toggleItemShow(orderKey);
     setTitle(item.text);
     setValue(item.value);
-    onChange && onChange(item);
+    onChange2 && onChange2(item);
   };
   var _useState5 = useState({
-      top: 0,
-      height: 0
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    position = _useState6[0],
-    setPosition = _useState6[1];
-  var getParentOffset = function getParentOffset() {
-    setTimeout(function () {
+    top: 0,
+    height: 0
+  }), _useState6 = _slicedToArray(_useState5, 2), position = _useState6[0], setPosition = _useState6[1];
+  var getParentOffset = function getParentOffset2() {
+    setTimeout(function() {
       var p = parent.parent().current;
       var rect = p.getBoundingClientRect();
       setPosition({
@@ -95,58 +85,59 @@ var MenuItem = forwardRef(function (props, ref) {
       });
     });
   };
-  var isShow = function isShow() {
-    if (_showPopup) return {};
+  var isShow = function isShow2() {
+    if (_showPopup)
+      return {};
     return {
-      display: 'none'
+      display: "none"
     };
   };
-  var getPosition = function getPosition() {
-    return direction === 'down' ? {
+  var getPosition = function getPosition2() {
+    return direction === "down" ? {
       top: "".concat(position.top + position.height, "px")
     } : {
       bottom: "".concat(window.innerHeight - position.top, "px"),
-      top: 'auto'
+      top: "auto"
     };
   };
-  var placeholderStyle = function placeholderStyle() {
-    if (direction === 'down') {
+  var placeholderStyle = function placeholderStyle2() {
+    if (direction === "down") {
       return _objectSpread(_objectSpread({
         height: "".concat(position.top + position.height, "px")
       }, isShow()), style);
     }
     return _objectSpread(_objectSpread({
       height: "".concat(window.innerHeight - position.top, "px"),
-      top: 'auto'
+      top: "auto"
     }, isShow()), style);
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "placeholder-element ".concat(classNames({
-      up: direction === 'up'
+      up: direction === "up"
     })),
     style: placeholderStyle(),
     onClick: function onClick() {
       return parent.toggleItemShow(orderKey);
     }
   }), React__default.createElement(Overlay, {
-    overlayClass: "nut-menu__overlay",
+    className: "nut-menu__overlay",
     style: getPosition(),
     lockScroll: parent.lockScroll,
     visible: _showPopup,
-    closeOnClickOverlay: parent.closeOnClickOverlay,
+    closeOnOverlayClick: parent.closeOnClickOverlay,
     onClick: function onClick() {
       parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
     }
   }), React__default.createElement("div", {
-    className: direction === 'down' ? 'nut-menu-item__wrap' : 'nut-menu-item__wrap-up',
+    className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
     style: _objectSpread({}, isShow())
   }, React__default.createElement(CSSTransition, {
     "in": _showPopup,
     timeout: 100,
-    classNames: direction === 'down' ? 'menu-item' : 'menu-item-up'
+    classNames: direction === "down" ? "menu-item" : "menu-item-up"
   }, React__default.createElement("div", {
     className: "nut-menu-item__content"
-  }, options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+  }, options === null || options === void 0 ? void 0 : options.map(function(item, index) {
     return React__default.createElement("div", {
       className: "nut-menu-item__option ".concat(classNames({
         active: item.value === _value
@@ -158,20 +149,19 @@ var MenuItem = forwardRef(function (props, ref) {
       onClick: function onClick() {
         handleClick(item);
       }
-    }, item.value === _value ? React__default.createElement(Icon, {
-      classPrefix: iconClassPrefix,
-      fontClassName: iconFontClassName,
-      className: getIconCName(item.value, value),
-      name: optionsIcon,
-      color: activeColor
-    }) : null, React__default.createElement("div", {
+    }, item.value === _value ? React__default.createElement("i", null, optionsIcon || 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 === _value ? activeColor : '')
+        color: "".concat(item.value === _value ? activeColor : "")
       }
     }, item.text));
   }), children))));
 });
 MenuItem.defaultProps = defaultProps;
-MenuItem.displayName = 'NutMenuItem';
-export { MenuItem as default };
+MenuItem.displayName = "NutMenuItem";
+export {
+  MenuItem as default
+};

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

@@ -1,2 +1,2 @@
-import '../../Icon/style'
+
 import '../../../packages/navbar/navbar.scss'