@nutui/nutui-react 1.3.0 → 1.3.1-beta.0

package/dist/esm/Menu.js

@@ -0,0 +1,153 @@
+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 = ["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), !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, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import Icon from './Icon.js';
+var defaultProps = {
+  className: '',
+  style: {},
+  activeColor: '#F2270C',
+  closeOnClickOverlay: true,
+  scrollFixed: false,
+  lockScroll: true,
+  titleIcon: ''
+};
+
+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,
+      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var parentRef = useRef(null);
+
+  var onScroll = function onScroll() {};
+
+  useEffect(function () {
+    if (scrollFixed) {
+      window.addEventListener('scroll', onScroll);
+    }
+
+    return function () {
+      return window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      itemShow = _useState2[0],
+      setItemShow = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      itemTitle = _useState4[0],
+      setItemTitle = _useState4[1];
+
+  var toggleItemShow = function toggleItemShow(index) {
+    itemShow[index] = !itemShow[index];
+    var temp = itemShow.map(function (i, idx) {
+      return idx === index ? i : false;
+    });
+    setItemShow(_toConsumableArray(temp));
+  };
+
+  var hideItemShow = function hideItemShow(index) {
+    itemShow[index] = false;
+    setItemShow(_toConsumableArray(itemShow));
+  };
+
+  var updateTitle = function updateTitle(text, index) {
+    itemTitle[index] = text;
+    setItemTitle(_toConsumableArray(itemTitle));
+  };
+
+  var parent = function parent() {
+    return parentRef;
+  };
+
+  var cloneChildren = function cloneChildren() {
+    return React__default.Children.map(children, function (child, index) {
+      return React__default.cloneElement(child, {
+        showPopup: itemShow[index],
+        orderKey: index,
+        activeColor: activeColor,
+        parent: {
+          closeOnClickOverlay: closeOnClickOverlay,
+          lockScroll: lockScroll,
+          toggleItemShow: toggleItemShow,
+          updateTitle: updateTitle,
+          hideItemShow: hideItemShow,
+          parent: parent
+        }
+      });
+    });
+  };
+
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: "nut-menu ".concat(className)
+  }, rest), {}, {
+    ref: parentRef
+  }), 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;
+    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 '';
+    }
+
+    return React__default.createElement("div", {
+      className: "nut-menu__item ".concat(classNames({
+        active: itemShow[index],
+        disabled: disabled
+      })),
+      style: {
+        color: itemShow[index] ? activeColor : ''
+      },
+      key: index,
+      onClick: function onClick() {
+        !disabled && toggleItemShow(index);
+      }
+    }, React__default.createElement("div", {
+      className: "nut-menu__title ".concat(classNames({
+        active: itemShow[index],
+        disabled: disabled
+      }))
+    }, React__default.createElement("div", {
+      className: "nut-menu__title-text"
+    }, finallyTitle()), React__default.createElement(Icon, {
+      className: "nut-menu__title-icon",
+      size: "10",
+      name: titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')
+    })));
+  })), cloneChildren());
+};
+
+Menu.defaultProps = defaultProps;
+Menu.displayName = 'NutMenu';
+export { Menu as default };

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

@@ -0,0 +1,3 @@
+require('../../Icon/style')
+require('../../Popup/style')
+require('../../../packages/menuitem/menuitem.scss')

package/dist/esm/MenuItem.js

@@ -0,0 +1,197 @@
+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, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import { useConfig } from './ConfigProvider.js';
+import Icon from './Icon.js';
+import { O as Overlay } from './overlay-ed3eb37d.js';
+import './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  className: '',
+  style: {},
+  columns: 1,
+  direction: 'down',
+  optionsIcon: 'Check',
+  activeTitleClass: '',
+  inactiveTitleClass: '',
+  iconClassPrefix: 'nut-icon',
+  fontClassName: 'nutui-iconfont',
+  onChange: function onChange(value) {
+    return undefined;
+  }
+};
+
+var MenuItem = function MenuItem(props) {
+  useConfig();
+
+  var mergedProps = _objectSpread(_objectSpread({}, defaultProps), props);
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      className = _defaultProps$props.className,
+      style = _defaultProps$props.style,
+      options = _defaultProps$props.options,
+      value = _defaultProps$props.value,
+      columns = _defaultProps$props.columns,
+      title = _defaultProps$props.title,
+      iconClassPrefix = _defaultProps$props.iconClassPrefix,
+      fontClassName = _defaultProps$props.fontClassName,
+      optionsIcon = _defaultProps$props.optionsIcon,
+      direction = _defaultProps$props.direction,
+      onChange = _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 () {
+    getParentOffset();
+  }, [_showPopup]);
+
+  var getIconCName = function getIconCName(optionVal, value) {
+    var _classNames;
+
+    return classNames((_classNames = {}, _defineProperty(_classNames, activeTitleClass, optionVal === value), _defineProperty(_classNames, inactiveTitleClass, optionVal !== value), _classNames));
+  };
+
+  var setTitle = function setTitle(text) {
+    if (!title) {
+      parent.updateTitle(text, orderKey);
+    }
+  };
+
+  var handleClick = function handleClick(item) {
+    parent.toggleItemShow(orderKey);
+    setTitle(item.text);
+    setValue(item.value);
+    onChange && onChange(item);
+  };
+
+  var _useState5 = useState({
+    top: 0,
+    height: 0
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      position = _useState6[0],
+      setPosition = _useState6[1];
+
+  var getParentOffset = function getParentOffset() {
+    setTimeout(function () {
+      var p = parent.parent().current;
+      var rect = p.getBoundingClientRect();
+      console.log(rect, p.offsetTop, window.screenTop);
+      setPosition({
+        height: rect.height,
+        top: rect.top
+      });
+    });
+  };
+
+  var isShow = function isShow() {
+    if (_showPopup) return {};
+    return {
+      display: 'none'
+    };
+  };
+
+  var getPosition = function getPosition() {
+    return direction === 'down' ? {
+      top: "".concat(position.top + position.height, "px")
+    } : {
+      bottom: "".concat(window.innerHeight - position.top, "px"),
+      top: 'auto'
+    };
+  };
+
+  var placeholderStyle = function placeholderStyle() {
+    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'
+    }, isShow()), style);
+  };
+
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "placeholder-element ".concat(classNames({
+      up: direction === 'up'
+    }), " ").concat(className),
+    style: placeholderStyle(),
+    onClick: function onClick() {
+      return parent.toggleItemShow(orderKey);
+    }
+  }), React__default.createElement(Overlay, {
+    overlayClass: "nut-menu__overlay",
+    style: getPosition(),
+    lockScroll: parent.lockScroll,
+    visible: _showPopup,
+    closeOnClickOverlay: parent.closeOnClickOverlay,
+    onClick: function onClick() {
+      parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+    }
+  }), React__default.createElement("div", {
+    className: "nut-menu-item__wrap",
+    style: _objectSpread(_objectSpread({}, getPosition()), isShow())
+  }, React__default.createElement(CSSTransition, {
+    "in": _showPopup,
+    timeout: 100,
+    classNames: "menu-item"
+  }, React__default.createElement("div", {
+    className: "nut-menu-item__content"
+  }, 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
+      })),
+      key: item.text,
+      style: {
+        flexBasis: "".concat(100 / columns, "%")
+      },
+      onClick: function onClick() {
+        handleClick(item);
+      }
+    }, item.value === _value ? React__default.createElement(Icon, {
+      className: getIconCName(item.value, value),
+      name: optionsIcon,
+      classPrefix: iconClassPrefix,
+      fontClassName: fontClassName,
+      color: activeColor
+    }) : null, React__default.createElement("div", {
+      className: getIconCName(item.value, value),
+      style: {
+        color: "".concat(item.value === _value ? activeColor : '')
+      }
+    }, item.text));
+  }), children))));
+};
+
+MenuItem.defaultProps = defaultProps;
+MenuItem.displayName = 'NutMenuItem';
+export { MenuItem as default };

package/dist/esm/NoticeBar.js

@@ -9,6 +9,7 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import Icon from './Icon.js';
 import { c as cn } from './bem-893ad28d.js';
+import { g as getRect } from './useClientRect-839d18c5.js';
 import '@bem-react/classname';
 var defaultProps = {
   // 滚动方向  across 横向 vertical 纵向
@@ -166,8 +167,8 @@ var NoticeBar = function NoticeBar(props) {
         return;
       }
 
-      var wrapW = wrap.current.getBoundingClientRect().width;
-      var offsetW = content.current.getBoundingClientRect().width;
+      var wrapW = getRect(wrap.current).width;
+      var offsetW = getRect(content.current).width;
       var canScroll = scrollable == null ? offsetW > wrapW : scrollable;
       SetIsCanScroll(canScroll);
 

package/dist/esm/Notify.js

@@ -19,6 +19,7 @@ import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { c as cn } from './bem-893ad28d.js';
+import { r as render } from './render-4a3856cb.js';
 import '@bem-react/classname';
 
 var Notification = /*#__PURE__*/function (_React$PureComponent) {
@@ -165,7 +166,7 @@ Notification.newInstance = function (properties, callback) {
     });
   }
 
-  ReactDOM.render(React.createElement(Notification, _objectSpread(_objectSpread({}, properties), {}, {
+  render(React.createElement(Notification, _objectSpread(_objectSpread({}, properties), {}, {
     ref: ref
   })), element);
 };

package/dist/esm/Popover.js

@@ -20,6 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React__default, { useRef, useState, useEffect } from 'react';
 import Icon from './Icon.js';
 import Overlay from './Overlay.js';
+import { g as getRect } from './useClientRect-839d18c5.js';
 /**
  * 过滤ref
  */
@@ -101,14 +102,6 @@ var Trigger = /*#__PURE__*/function (_React__default$Compo) {
   return Trigger;
 }(React__default.Component);
 
-var getEleAttr = function getEleAttr(ele) {
-  if (ele && ele.getBoundingClientRect) {
-    return ele.getBoundingClientRect();
-  }
-
-  return null;
-};
-
 var defaultProps = {
   list: [],
   theme: 'light',
@@ -136,9 +129,9 @@ var Popover = function Popover(props) {
 
   var goodItem = useRef(null);
   setTimeout(function () {
-    if (goodItem.current && getEleAttr(goodItem.current)) {
-      setElWidth(getEleAttr(goodItem.current).width);
-      setElHeight(getEleAttr(goodItem.current).height);
+    if (goodItem.current && getRect(goodItem.current)) {
+      setElWidth(getRect(goodItem.current).width);
+      setElHeight(getRect(goodItem.current).height);
     }
   });
 

package/dist/esm/Range.js

@@ -7,52 +7,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import { u as useTouch } from './useTouch-a2ea68c6.js';
+import { g as getRect } from './useClientRect-839d18c5.js';
 import Toast from './Toast.js';
 import { useConfig } from './ConfigProvider.js';
-/**
-  获取元素的大小及其相对于视口的位置，等价于 Element.getBoundingClientRect。
-  width 宽度	number
-  height 高度	number
-  top	顶部与视图窗口左上角的距离	number
-  left	左侧与视图窗口左上角的距离	number
-  right	右侧与视图窗口左上角的距离	number
-  bottom	底部与视图窗口左上角的距离	number
- */
-
-function isWindow(val) {
-  return val === window;
-}
-
-var getRect = function getRect(elementRef) {
-  var element = elementRef;
-
-  if (isWindow(element)) {
-    var width = element.innerWidth;
-    var height = element.innerHeight;
-    return {
-      top: 0,
-      left: 0,
-      right: width,
-      bottom: height,
-      width: width,
-      height: height
-    };
-  }
-
-  if (element && element.getBoundingClientRect) {
-    return element.getBoundingClientRect();
-  }
-
-  return {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: 0,
-    height: 0
-  };
-};
-
 var defaultProps = {
   range: false,
   hiddenRange: false,
@@ -445,7 +402,7 @@ var Range = function Range(props) {
     return React__default.createElement("div", {
       role: "slider",
       key: index,
-      className: "".concat(index === 0 ? 'nut-range-button-wrapper-left' : '', "\n              ").concat(index === 1 ? 'nut-range-button-wrapper-right' : ''),
+      className: "".concat(index === 0 ? 'nut-range-button-wrapper-left' : '', "\n                  ").concat(index === 1 ? 'nut-range-button-wrapper-right' : ''),
       tabIndex: disabled ? -1 : 0,
       "aria-valuemin": +min,
       "aria-valuenow": curValue(index),

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

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