@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/esm/MenuItem.js

@@ -0,0 +1,157 @@
+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), 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, useRef } 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 { u as useClickAway } from "./use-click-away.js";
+import { C as ComponentDefaults } from "./typings.js";
+import "./index.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  columns: 1,
+  direction: "down",
+  icon: null,
+  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, columns = _defaultProps$props.columns, title = _defaultProps$props.title, icon = _defaultProps$props.icon, direction = _defaultProps$props.direction, onChange2 = _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 _useState3 = useState(value), _useState4 = _slicedToArray(_useState3, 2), _value = _useState4[0], setValue = _useState4[1];
+  useEffect(function() {
+    setShowPopup(show);
+  }, [show]);
+  useImperativeHandle(ref, function() {
+    return {
+      toggle: parent.toggleMenuItem
+    };
+  });
+  var getIconCName = function getIconCName2(optionVal, value2) {
+    var _classNames;
+    return classNames((_classNames = {}, _defineProperty(_classNames, activeTitleClass, optionVal === value2), _defineProperty(_classNames, inactiveTitleClass, optionVal !== value2), _classNames));
+  };
+  var setTitle = function setTitle2(text) {
+    if (!title) {
+      parent.updateTitle(text, index);
+    }
+  };
+  var handleClick = function handleClick2(item) {
+    parent.toggleMenuItem(index);
+    setTitle(item.text);
+    setValue(item.value);
+    onChange2 && onChange2(item);
+  };
+  var isShow = function isShow2() {
+    if (_showPopup)
+      return {};
+    return {
+      display: "none"
+    };
+  };
+  var getPosition = function getPosition2() {
+    return direction === "down" ? {
+      position: "absolute",
+      height: "".concat(window.innerHeight, "px")
+    } : {
+      position: "absolute",
+      bottom: "100%",
+      top: "auto",
+      height: "".concat(window.innerHeight, "px")
+    };
+  };
+  var micRef = useRef(null);
+  var targetSet = [micRef.current];
+  useClickAway(
+    function() {
+      parent.hideMenuItem(index);
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    targetSet,
+    "click",
+    false,
+    _showPopup,
+    closeOnClickAway
+  );
+  return React__default.createElement("div", {
+    className: "nut-menu-item-container",
+    ref: micRef,
+    style: {
+      position: "absolute",
+      left: 0,
+      right: 0
+    }
+  }, React__default.createElement(Overlay, {
+    className: "nut-menu__overlay",
+    style: getPosition(),
+    lockScroll: parent.lockScroll,
+    visible: _showPopup,
+    closeOnOverlayClick: parent.closeOnOverlayClick,
+    onClick: function onClick() {
+      parent.closeOnOverlayClick && parent.toggleMenuItem(index);
+    }
+  }), React__default.createElement("div", {
+    className: classNames(className, {
+      "nut-menu-item__wrap": direction === "down",
+      "nut-menu-item__wrap-up": direction !== "down"
+    }),
+    style: _objectSpread(_objectSpread({}, style), isShow())
+  }, React__default.createElement(CSSTransition, {
+    "in": _showPopup,
+    timeout: 100,
+    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) {
+    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("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 === _value ? activeColor : "")
+      }
+    }, item.text));
+  }), children))));
+});
+MenuItem.defaultProps = defaultProps;
+MenuItem.displayName = "NutMenuItem";
+export {
+  MenuItem as default
+};

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

@@ -0,0 +1 @@
+import './style.css'

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

@@ -1,2 +1,2 @@
 
-require('../../../packages/navbar/navbar.scss')
+import '../../../packages/navbar/navbar.scss'

package/dist/esm/NavBar/style/style.css

@@ -0,0 +1 @@
+.nut-navbar{width:var(--nutui-navbar-width, 100%);position:relative;display:flex;align-items:center;height:var(--nutui-navbar-height, 44px);box-sizing:border-box;padding:var(--nutui-navbar-padding, 13px 16px);background:var(--nutui-navbar-background, var(--nutui-gray-6, #ffffff));box-shadow:var(--nutui-navbar-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241));font-size:var(--nutui-navbar-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-navbar-color, var(--nutui-gray-2, #757575));margin-bottom:var(--nutui-navbar-margin-bottom, 20px);overflow:hidden}.nut-navbar--fixed{position:fixed;top:0;left:0;width:100%}.nut-navbar--placeholder{display:inline-block;width:100%}.nut-navbar--safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.nut-navbar__title{min-width:53%;margin:0 auto;text-align:center;display:flex;align-items:center;justify-content:center;font-size:var(--nutui-navbar-title-font-size, var(--nutui-font-size-2, 14px));font-weight:var(--nutui-navbar-title-font-weight, 0);color:var(--nutui-navbar-title-font-color, var(--nutui-gray-1, #1a1a1a))}.nut-navbar__title .nut-tabs__titles{background:var(--nutui-gray-6, #ffffff)}.nut-navbar__title .nut-tabs__titles-item__text{color:var(--nutui-gray-1, #1a1a1a)}.nut-navbar__title .nut-tabpane{display:none}.nut-navbar__title ::-webkit-scrollbar{display:none}.nut-navbar__left,.nut-navbar__right{position:absolute;top:0;bottom:0;display:flex;align-items:center;cursor:pointer;padding:0 16px}.nut-navbar__left{left:0}.nut-navbar__left__back{display:flex;align-items:center;justify-content:center;margin-right:10px}.nut-navbar__right{right:0}

package/dist/esm/NavBar.js

@@ -1,124 +1,81 @@
 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 from 'react';
-import classNames from 'classnames';
-import Icon from './Icon.js';
-import { c as cn } from './bem-893ad28d.js';
-import '@bem-react/classname';
-var defaultProps = {
-  title: '',
-  desc: '',
-  leftShow: true,
-  titIcon: '',
-  className: '',
-  leftText: '',
+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 from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  left: "",
+  right: "",
+  back: "",
   fixed: false,
   safeAreaInsetTop: false,
-  border: false,
   placeholder: false,
-  zIndex: 10,
-  style: {}
-};
-
-var NavBar = function NavBar(props) {
+  zIndex: 10
+});
+var NavBar = function NavBar2(props) {
   var _classNames;
-
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      desc = _defaultProps$props.desc,
-      title = _defaultProps$props.title,
-      titIcon = _defaultProps$props.titIcon,
-      leftShow = _defaultProps$props.leftShow,
-      className = _defaultProps$props.className,
-      style = _defaultProps$props.style,
-      leftText = _defaultProps$props.leftText,
-      fixed = _defaultProps$props.fixed,
-      safeAreaInsetTop = _defaultProps$props.safeAreaInsetTop,
-      border = _defaultProps$props.border,
-      placeholder = _defaultProps$props.placeholder,
-      zIndex = _defaultProps$props.zIndex,
-      onClickTitle = _defaultProps$props.onClickTitle,
-      onClickIcon = _defaultProps$props.onClickIcon,
-      onClickBack = _defaultProps$props.onClickBack,
-      onClickRight = _defaultProps$props.onClickRight;
-
-  var b = cn('navbar');
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), right = _defaultProps$props.right, left = _defaultProps$props.left, className = _defaultProps$props.className, style = _defaultProps$props.style, back = _defaultProps$props.back, fixed = _defaultProps$props.fixed, safeAreaInsetTop = _defaultProps$props.safeAreaInsetTop, placeholder = _defaultProps$props.placeholder, zIndex = _defaultProps$props.zIndex, onBackClick = _defaultProps$props.onBackClick;
+  var classPrefix = "nut-navbar";
   var children = Array.isArray(props.children) ? props.children : [props.children];
-  var slot = children.reduce(function (slot, item) {
-    var data = slot;
-
-    if (item && item.props) {
-      data[item.props.slot] = item;
-    }
-
-    return data;
-  }, {});
-
-  var styles = function styles() {
+  var styles = function styles2() {
     return _objectSpread(_objectSpread({}, style), {}, {
-      zIndex: zIndex
+      zIndex
     });
   };
-
-  var renderLeft = function renderLeft() {
+  var renderLeft = function renderLeft2() {
     return React__default.createElement("div", {
-      className: "".concat(b('left')),
+      className: "".concat(classPrefix, "__left")
+    }, back && React__default.createElement("div", {
+      className: "".concat(classPrefix, "__left__back"),
       onClick: function onClick(e) {
-        return onClickBack(e);
+        return onBackClick(e);
       }
-    }, leftShow && React__default.createElement(Icon, {
-      name: "left",
-      color: "#979797"
-    }), leftText && React__default.createElement("div", {
-      className: "".concat(b('text'))
-    }, leftText), slot.left);
+    }, back), left);
   };
-
-  var renderContent = function renderContent() {
+  var renderContent = function renderContent2() {
     return React__default.createElement("div", {
-      className: "".concat(b('title'))
-    }, title && React__default.createElement("div", {
-      className: "title",
-      onClick: function onClick(e) {
-        return onClickTitle(e);
-      }
-    }, title), titIcon && React__default.createElement("div", {
-      onClick: function onClick(e) {
-        return onClickIcon(e);
-      }
-    }, React__default.createElement(Icon, {
-      name: titIcon
-    })), slot.content);
+      className: "".concat(classPrefix, "__title")
+    }, children);
   };
-
-  var renderRight = function renderRight() {
+  var renderRight = function renderRight2() {
     return React__default.createElement("div", {
-      className: "".concat(b('right')),
-      onClick: function onClick(e) {
-        return onClickRight(e);
-      }
-    }, desc && React__default.createElement("div", {
-      className: "".concat(b('text'))
-    }, desc), slot.right);
+      className: "".concat(classPrefix, "__right")
+    }, right);
   };
-
-  var renderWrapper = function renderWrapper() {
+  var renderWrapper = function renderWrapper2() {
     return React__default.createElement("div", {
       className: cls,
       style: styles()
     }, renderLeft(), renderContent(), renderRight());
   };
-
-  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-navbar--border", border), _defineProperty(_classNames, "nut-navbar--fixed", fixed), _defineProperty(_classNames, "nut-navbar--safe-area-inset-top", safeAreaInsetTop), _classNames));
-  var cls = classNames(b(''), classes, className);
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "--fixed"), fixed), _defineProperty(_classNames, "".concat(classPrefix, "--safe-area-inset-top"), safeAreaInsetTop), _classNames));
+  var cls = classNames(classPrefix, classes, className);
   return React__default.createElement(React__default.Fragment, null, fixed && placeholder ? React__default.createElement("div", {
-    className: "".concat(b(''), "--placeholder")
+    className: "".concat(classPrefix, "--placeholder")
   }, renderWrapper()) : renderWrapper());
 };
-
 NavBar.defaultProps = defaultProps;
-NavBar.displayName = 'NutNavBar';
-export { NavBar as default };
+NavBar.displayName = "NutNavBar";
+export {
+  NavBar as default
+};

package/dist/esm/NoticeBar/style/css.js

@@ -0,0 +1 @@
+import './style.css'

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

@@ -1,2 +1,2 @@
-require('../../Icon/style')
-require('../../../packages/noticebar/noticebar.scss')
+
+import '../../../packages/noticebar/noticebar.scss'

package/dist/esm/NoticeBar/style/style.css

@@ -0,0 +1 @@
+.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-page{display:flex;padding:var(--nutui-noticebar-box-padding, 0 16px);height:var(--nutui-noticebar-height, 40px);font-size:var(--nutui-noticebar-font-size, 14px);position:relative;align-items:center;background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b)}.nut-noticebar .nut-noticebar-page.wrapable{height:auto;padding:var(--nutui-noticebar-wrapable-padding, 16px)}.nut-noticebar .nut-noticebar-page.wrapable .wrap{height:auto}.nut-noticebar .nut-noticebar-page.wrapable .wrap .content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-page .withicon{position:relative;padding-right:40px}.nut-noticebar .nut-noticebar-page .left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-lefticon-margin, 0px 10px);background-size:100% 100%}.nut-noticebar .nut-noticebar-page .right-icon{display:flex;align-items:center;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin:var(--nutui-noticebar-righticon-margin, 0px 10px)}.nut-noticebar .nut-noticebar-page .wrap{display:flex;flex:1;height:var(--nutui-noticebar-line-height, 24px);line-height:var(--nutui-noticebar-line-height, 24px);overflow:hidden;position:relative}.nut-noticebar .nut-noticebar-page .content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-page .content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-noticebar .nut-noticebar-page .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-page .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-page .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}@keyframes nut-notice-bar-play{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-infinite{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-vertical{to{transform:translateY(var(--nutui-noticebar-height, 40px))}}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:var(--nutui-noticebar-height, 40px);font-size:var(--nutui-noticebar-font-size, 14px);overflow:hidden;padding:var(--nutui-noticebar-box-padding, 0 16px);background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b)}.nut-noticebar .nut-noticebar-vertical .left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-lefticon-margin, 0px 10px);background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .horseLamp_list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .horseLamp_list .horseLamp_list_item{display:flex;align-items:center;height:var(--nutui-noticebar-height, 40px);width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar__inner{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .go{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin:var(--nutui-noticebar-righticon-margin, 0px 10px)}