@nutui/nutui-react 1.3.6 → 1.3.7

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# v1.3.7
+`2022-10-19`
+* :sparkles: feat: 优化 menu 组件的弹出动画效果 (#341) @oasis-cloud
+* :sparkles: chore: add issue template (#334) @oasis-cloud
+* :bug: fix: feat: Audio 组件 Demo 变量名修改 (#340) @libin0824
+* :bug: fix: Collapse 改变变量的名字 (#336) @zhenyulei
+
 # v1.3.6
 `2022-10-12`
 * :sparkles: feat: Swipe 组件适配小程序，Searchbar 增加 onCancel 回调函数 (#311) @Ymm0008

package/dist/esm/Menu.js

@@ -41,7 +41,6 @@ var Menu = function Menu(props) {
   var onScroll = function onScroll() {
     var scrollFixed = props.scrollFixed;
     var scrollTop = getScrollTop(window);
-    console.log(scrollTop);
     var isFixed = scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed));
     setIsScrollFixed(isFixed);
   };
@@ -96,12 +95,13 @@ var Menu = function Menu(props) {
       });
     });
   };
-  console.log('isScrollFixed', isScrollFixed);
   return React__default.createElement("div", _objectSpread(_objectSpread({
     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;
@@ -146,7 +146,7 @@ var Menu = function Menu(props) {
       size: "10",
       name: titleIcon || (direction === 'up' ? 'arrow-up' : 'down-arrow')
     })));
-  })), cloneChildren());
+  })), cloneChildren()));
 };
 Menu.defaultProps = defaultProps;
 Menu.displayName = 'NutMenu';

package/dist/esm/MenuItem.js

@@ -87,7 +87,6 @@ var MenuItem = function MenuItem(props) {
     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
@@ -137,12 +136,12 @@ var MenuItem = function MenuItem(props) {
       parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
     }
   }), React__default.createElement("div", {
-    className: "nut-menu-item__wrap",
-    style: _objectSpread(_objectSpread({}, getPosition()), isShow())
+    className: direction === 'down' ? 'nut-menu-item__wrap' : 'nut-menu-item__wrap-up',
+    style: _objectSpread({}, isShow())
   }, React__default.createElement(CSSTransition, {
     "in": _showPopup,
     timeout: 100,
-    classNames: "menu-item"
+    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) {

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.6 Wed Oct 12 2022 18:07:13 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.3.7 Wed Oct 19 2022 16:55:35 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.6 Wed Oct 12 2022 18:07:13 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.3.7 Wed Oct 19 2022 16:55:35 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.6 Wed Oct 12 2022 18:07:13 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.3.7 Wed Oct 19 2022 16:55:35 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.6 Wed Oct 12 2022 18:07:13 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.3.7 Wed Oct 19 2022 16:55:35 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.6 Wed Oct 12 2022 18:07:13 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.3.7 Wed Oct 19 2022 16:55:35 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.6 Wed Oct 12 2022 18:06:20 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.3.7 Wed Oct 19 2022 16:54:53 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -9054,7 +9054,6 @@ const Menu = (props) => {
   const onScroll = () => {
     const { scrollFixed: scrollFixed2 } = props;
     const scrollTop = getScrollTop(window);
-    console.log(scrollTop);
     const isFixed = scrollTop > (typeof scrollFixed2 === "boolean" ? 30 : Number(scrollFixed2));
     setIsScrollFixed(isFixed);
   };
@@ -9099,11 +9098,12 @@ const Menu = (props) => {
       });
     });
   };
-  console.log("isScrollFixed", isScrollFixed);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `nut-menu ${className} ${isScrollFixed ? "scroll-fixed" : ""}`,
     ...rest,
     ref: parentRef
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-menu-relative"
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: `nut-menu__bar ${itemShow.includes(true) ? "opened" : ""} ${className}`
   }, React__default.Children.toArray(children).map((child, index) => {
@@ -9146,7 +9146,7 @@ const Menu = (props) => {
       size: "10",
       name: titleIcon || (direction === "up" ? "arrow-up" : "down-arrow")
     })));
-  })), cloneChildren());
+  })), cloneChildren()));
 };
 Menu.defaultProps = defaultProps$_;
 Menu.displayName = "NutMenu";
@@ -9219,7 +9219,6 @@ const MenuItem = (props) => {
     setTimeout(() => {
       const p2 = parent.parent().current;
       const rect = p2.getBoundingClientRect();
-      console.log(rect, p2.offsetTop, window.screenTop);
       setPosition({
         height: rect.height,
         top: rect.top
@@ -9265,15 +9264,14 @@ const MenuItem = (props) => {
       parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
     }
   }), /* @__PURE__ */ React__default.createElement("div", {
-    className: "nut-menu-item__wrap",
+    className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
     style: {
-      ...getPosition(),
       ...isShow()
     }
   }, /* @__PURE__ */ React__default.createElement(CSSTransition$1, {
     in: _showPopup,
     timeout: 100,
-    classNames: "menu-item"
+    classNames: direction === "down" ? "menu-item" : "menu-item-up"
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-menu-item__content"
   }, options2 == null ? void 0 : options2.map((item, index) => {

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.6 Wed Oct 12 2022 18:06:20 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.3.7 Wed Oct 19 2022 16:54:53 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -9081,7 +9081,6 @@
     const onScroll = () => {
       const { scrollFixed: scrollFixed2 } = props;
       const scrollTop = getScrollTop(window);
-      console.log(scrollTop);
       const isFixed = scrollTop > (typeof scrollFixed2 === "boolean" ? 30 : Number(scrollFixed2));
       setIsScrollFixed(isFixed);
     };
@@ -9126,11 +9125,12 @@
         });
       });
     };
-    console.log("isScrollFixed", isScrollFixed);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `nut-menu ${className} ${isScrollFixed ? "scroll-fixed" : ""}`,
       ...rest,
       ref: parentRef
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "nut-menu-relative"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `nut-menu__bar ${itemShow.includes(true) ? "opened" : ""} ${className}`
     }, React__default["default"].Children.toArray(children).map((child, index) => {
@@ -9173,7 +9173,7 @@
         size: "10",
         name: titleIcon || (direction === "up" ? "arrow-up" : "down-arrow")
       })));
-    })), cloneChildren());
+    })), cloneChildren()));
   };
   Menu.defaultProps = defaultProps$_;
   Menu.displayName = "NutMenu";
@@ -9246,7 +9246,6 @@
       setTimeout(() => {
         const p2 = parent.parent().current;
         const rect = p2.getBoundingClientRect();
-        console.log(rect, p2.offsetTop, window.screenTop);
         setPosition({
           height: rect.height,
           top: rect.top
@@ -9292,15 +9291,14 @@
         parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
       }
     }), /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "nut-menu-item__wrap",
+      className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
       style: {
-        ...getPosition(),
         ...isShow()
       }
     }, /* @__PURE__ */ React__default["default"].createElement(CSSTransition$1, {
       in: _showPopup,
       timeout: 100,
-      classNames: "menu-item"
+      classNames: direction === "down" ? "menu-item" : "menu-item-up"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "nut-menu-item__content"
     }, options2 == null ? void 0 : options2.map((item, index) => {

package/dist/packages/menu/menu.scss

@@ -20,6 +20,10 @@
     width: 100%;
   }
 
+  .nut-menu-relative {
+    position: relative;
+  }
+
   .nut-menu__bar {
     position: relative;
     display: flex;

package/dist/packages/menuitem/menuitem.scss

@@ -40,12 +40,16 @@
   }
 }
 
-.nut-menu-item__wrap {
-  position: fixed;
+.nut-menu-item__wrap,
+.nut-menu-item__wrap-up {
+  position: absolute;
   width: 100%;
   z-index: 2052;
   overflow: hidden;
 }
+.nut-menu-item__wrap-up {
+  bottom: $menu-bar-line-height;
+}
 
 .overlay-fade-enter-active.nut-menu__overlay {
   top: auto;
@@ -72,10 +76,12 @@
 
 .menu-item-enter {
   opacity: 0;
+  transform: translate(0, -30px);
 }
 
 .menu-item-enter-done {
   opacity: 1;
+  transform: translate(0, 0);
   transition: all 100ms;
 }
 
@@ -88,3 +94,22 @@
   opacity: 0;
   transition: all 100ms;
 }
+
+.menu-item-up-enter {
+  opacity: 0;
+  transform: translate(0, 30px);
+}
+.menu-item-up-enter-done {
+  opacity: 1;
+  transform: translate(0, 0);
+  transition: all 100ms;
+}
+.menu-item-up-exit {
+  opacity: 1;
+  transition: all 100ms;
+}
+
+.menu-item-up-exit-done {
+  opacity: 0;
+  transition: all 100ms;
+}