@nutui/nutui-react 1.2.3-beta.4 → 1.3.1-beta.0

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 纵向
@@ -24,7 +25,7 @@ var defaultProps = {
   color: '',
   background: '',
   delay: 1,
-  scrollable: true,
+  scrollable: null,
   speed: 50
 };
 
@@ -101,6 +102,11 @@ var NoticeBar = function NoticeBar(props) {
       timer = _useState18[0],
       SetTimer = _useState18[1];
 
+  var _useState19 = useState(null),
+      _useState20 = _slicedToArray(_useState19, 2),
+      isCanScroll = _useState20[0],
+      SetIsCanScroll = _useState20[1];
+
   useState(0);
   useEffect(function () {
     if (direction === 'vertical') {
@@ -131,12 +137,14 @@ var NoticeBar = function NoticeBar(props) {
 
   var cloneChild = function cloneChild(listItem, listIndex) {
     return React__default.Children.map(children, function (child, index) {
-      if (child && index == listIndex) {
+      if (child && index === listIndex) {
         return React__default.cloneElement(child, {
           key: listIndex,
           children: listItem
         });
       }
+
+      return null;
     });
   };
 
@@ -159,10 +167,12 @@ 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);
 
-      if (scrollable && offsetW > wrapW) {
+      if (canScroll) {
         SetWrapWidth(wrapW);
         SetOffsetW(offsetW);
         SetDuration(offsetW / speed);
@@ -170,7 +180,7 @@ var NoticeBar = function NoticeBar(props) {
       } else {
         SetAnimationClass('');
       }
-    });
+    }, 0);
   };
 
   var handleClick = function handleClick(event) {
@@ -249,19 +259,47 @@ var NoticeBar = function NoticeBar(props) {
     close && close(scrollList[0]);
   };
 
+  var iconShow = function iconShow() {
+    if (leftIcon === 'close') {
+      return false;
+    }
+
+    return true;
+  };
+
+  var iconBg = function iconBg() {
+    var iconBg = '';
+
+    if (leftIcon) {
+      iconBg = leftIcon;
+    }
+
+    return iconBg;
+  };
+
+  var isEllipsis = function isEllipsis() {
+    if (isCanScroll == null) {
+      return wrapable;
+    }
+
+    return !isCanScroll && !wrapable;
+  };
+
   var contentStyle = {
-    paddingLeft: firstRound ? 0 : "".concat(wrapWidth, "px"),
-    animationDelay: "".concat(firstRound ? props.delay : 0, "s"),
-    animationDuration: "".concat(duration, "s")
+    // paddingLeft: firstRound ? 0 : `${wrapWidth}px`,
+    animationDelay: "".concat(firstRound ? delay : 0, "s"),
+    animationDuration: "".concat(duration, "s"),
+    transform: "translateX(".concat(firstRound ? 0 : "".concat(wrapWidth, "px"), ")")
   };
   var barStyle = {
     color: color,
     background: background,
-    height: direction == 'vertical' ? "".concat(height, "px") : ''
+    height: direction === 'vertical' ? "".concat(height, "px") : ''
   };
+  var duringTime = ~~(height / speed / 4);
   var horseLampStyle = {
     transform: complexAm ? "translateY(".concat(distance, "px)") : '',
-    transition: animate ? "all ".concat(~~(height / speed / 4), "s") : '',
+    transition: animate ? "all ".concat(duringTime === 0 ? ~~(height / speed) : duringTime, "s") : '',
     marginTop: animate ? "-".concat(height, "px") : ''
   };
   var b = cn('noticebar');
@@ -274,34 +312,34 @@ var NoticeBar = function NoticeBar(props) {
   return React__default.createElement("div", {
     className: "".concat(b(), " ").concat(className || ''),
     style: style
-  }, showNoticeBar && direction == 'across' ? React__default.createElement("div", {
+  }, showNoticeBar && direction === 'across' ? React__default.createElement("div", {
     className: noticebarClass,
     style: barStyle,
     onClick: handleClick
-  }, React__default.createElement("div", {
+  }, iconShow() ? React__default.createElement("div", {
     className: "left-icon",
     style: {
-      backgroundImage: "url(".concat(leftIcon || '', ")")
+      backgroundImage: "url(".concat(iconBg() || '', ")")
     }
-  }, !leftIcon ? React__default.createElement(Icon, {
+  }, !iconBg() ? React__default.createElement(Icon, {
     name: "notice",
     size: "16",
     color: color
-  }) : null), React__default.createElement("div", {
+  }) : null) : null, React__default.createElement("div", {
     ref: wrap,
     className: "wrap"
   }, React__default.createElement("div", {
     ref: content,
-    className: "content ".concat(animationClass, " ").concat(!scrollable && !wrapable && 'nut-ellipsis'),
+    className: "content ".concat(animationClass, " ").concat(isEllipsis() && 'nut-ellipsis'),
     style: contentStyle,
     onAnimationEnd: onAnimationEnd
-  }, children, text)), closeMode ? React__default.createElement("div", {
+  }, children, text)), closeMode || rightIcon ? React__default.createElement("div", {
     className: "right-icon",
     onClick: onClickIcon
   }, React__default.createElement(Icon, {
-    name: "close",
+    name: rightIcon || 'close',
     color: color
-  })) : null) : scrollList.current.length > 0 && direction == 'vertical' ? React__default.createElement("div", {
+  })) : null) : null, scrollList.current.length > 0 && direction === 'vertical' ? React__default.createElement("div", {
     className: "nut-noticebar-vertical",
     style: barStyle
   }, children ? React__default.createElement("div", {
@@ -313,16 +351,18 @@ var NoticeBar = function NoticeBar(props) {
     className: "horseLamp_list",
     style: horseLampStyle
   }, scrollList.current.map(function (item, index) {
-    return React__default.createElement("li", {
-      className: "horseLamp_list_item",
-      style: {
-        height: height
-      },
-      key: index,
-      onClick: function onClick() {
-        go(item);
-      }
-    }, item);
+    return (// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      React__default.createElement("li", {
+        className: "horseLamp_list_item",
+        style: {
+          height: height
+        },
+        key: index,
+        onClick: function onClick() {
+          go(item);
+        }
+      }, item)
+    );
   })), React__default.createElement("div", {
     className: "go",
     onClick: function onClick() {

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) {
@@ -106,11 +107,14 @@ var Notification = /*#__PURE__*/function (_React$PureComponent) {
           color = _this$props.color,
           background = _this$props.background,
           type = _this$props.type,
-          className = _this$props.className;
+          className = _this$props.className,
+          position = _this$props.position,
+          isWrapTeleport = _this$props.isWrapTeleport;
       this.state;
       cn('notify');
       var classes = classNames(_defineProperty({
-        'popup-top': true,
+        'popup-top': position === 'top',
+        'popup-bottom': position === 'bottom',
         'nut-notify': true
       }, "nut-notify--".concat(type), true));
       return React.createElement(React.Fragment, null, React.createElement(CSSTransition, {
@@ -118,7 +122,9 @@ var Notification = /*#__PURE__*/function (_React$PureComponent) {
         timeout: 300,
         classNames: "fade",
         unmountOnExit: true,
-        appear: true
+        appear: true,
+        position: position,
+        isWrapTeleport: isWrapTeleport
       }, React.createElement("div", {
         className: "".concat(classes, " ").concat(className),
         style: {
@@ -160,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);
 };
@@ -170,8 +176,11 @@ var options = {
   msg: '',
   id: '',
   duration: 3000,
+  color: '',
   type: 'danger',
   className: '',
+  position: 'top',
+  isWrapTeleport: true,
   onClosed: function onClosed() {},
   onClick: function onClick() {}
 };
@@ -188,6 +197,12 @@ function getInstance(props, callback) {
 }
 
 function notice(opts) {
+  // function close() {
+  //   if (messageInstance) {
+  //     messageInstance.destroy()
+  //     messageInstance = null
+  //   }
+  // }
   opts = _objectSpread(_objectSpread({}, options), opts);
   getInstance(opts, function (notification) {
     messageInstance = notification;

package/dist/esm/Picker.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["isVisible", "title", "listData", "defaultValueData", "onConfirm", "onClose", "onCloseUpdate", "onChange", "className", "style", "threeDimensional"];
+var _excluded = ["isVisible", "title", "listData", "defaultValueData", "onConfirm", "onClose", "onCloseUpdate", "onChange", "className", "style", "threeDimensional", "swipeDuration"];
 
 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; }
 
@@ -23,8 +23,11 @@ var InternalPickerSlot = function InternalPickerSlot(props, ref) {
       listData = _props$listData === void 0 ? [] : _props$listData,
       _props$threeDimension = props.threeDimensional,
       threeDimensional = _props$threeDimension === void 0 ? true : _props$threeDimension,
+      _props$swipeDuration = props.swipeDuration,
+      swipeDuration = _props$swipeDuration === void 0 ? 1000 : _props$swipeDuration,
       chooseItem = props.chooseItem;
-  var touch = useTouch(); // 触发惯性滑动条件:
+  var touch = useTouch();
+  var DEFAULT_DURATION = 200; // 触发惯性滑动条件:
   // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
   // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动
 
@@ -71,7 +74,7 @@ var InternalPickerSlot = function InternalPickerSlot(props, ref) {
   var setTransform = function setTransform() {
     var translateY = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     var type = arguments.length > 1 ? arguments[1] : undefined;
-    var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+    var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_DURATION;
     var deg = arguments.length > 3 ? arguments[3] : undefined;
     var nTime = time;
 
@@ -152,7 +155,7 @@ var InternalPickerSlot = function InternalPickerSlot(props, ref) {
     if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
       // 惯性滚动
       var distance = momentum(move, moveTime);
-      setMove(distance, 'end', moveTime + 1000);
+      setMove(distance, 'end', +swipeDuration);
     } else {
       setMove(move, 'end');
     }
@@ -272,6 +275,7 @@ var InternalPicker = function InternalPicker(props, ref) {
       className = props.className,
       style = props.style,
       threeDimensional = props.threeDimensional,
+      swipeDuration = props.swipeDuration,
       rest = _objectWithoutProperties(props, _excluded);
 
   var _useState9 = useState([]),
@@ -494,6 +498,7 @@ var InternalPicker = function InternalPicker(props, ref) {
       chooseItem: function chooseItem(value, index) {
         return _chooseItem(value, index);
       },
+      swipeDuration: swipeDuration,
       key: index,
       keyIndex: index
     });