@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/esm/NavBar.js

@@ -1,61 +1,27 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
 import React__default, { useRef, useState, useEffect } from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
 import { g as getRect } from "./use-client-rect.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  left: "",
-  right: "",
-  titleAlign: "center",
-  back: "",
-  fixed: false,
-  safeAreaInsetTop: false,
-  placeholder: false,
-  zIndex: 10
-});
-var NavBar = function NavBar2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), right = _defaultProps$props.right, left = _defaultProps$props.left, titleAlign = _defaultProps$props.titleAlign, 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 styles = function styles2() {
-    return _objectSpread(_objectSpread({}, style), {}, {
-      zIndex
-    });
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { left: "", right: "", titleAlign: "center", back: "", fixed: false, safeAreaInsetTop: false, placeholder: false, zIndex: 10 });
+const NavBar = (props) => {
+  const { right, left, titleAlign, className, style, back, fixed, safeAreaInsetTop, placeholder, zIndex, onBackClick } = Object.assign(Object.assign({}, defaultProps), props);
+  const classPrefix = "nut-navbar";
+  const children = Array.isArray(props.children) ? props.children : [props.children];
+  const styles = () => {
+    return Object.assign(Object.assign({}, style), { zIndex });
   };
-  var leftRef = useRef(null);
-  var rightRef = useRef(null);
-  var wrapperRef = useRef(null);
-  var _useState = useState("50%"), _useState2 = _slicedToArray(_useState, 2), contentWidth = _useState2[0], setContentWidth = _useState2[1];
-  var getNodeWidth = function getNodeWidth2(node) {
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const [contentWidth, setContentWidth] = useState("50%");
+  const getNodeWidth = (node) => {
     if (node) {
-      var ele = getRect(node);
+      const ele = getRect(node);
       return ele.width;
     }
     return 0;
   };
-  useEffect(function() {
+  useEffect(() => {
     if (titleAlign === "left") {
       return;
     }
@@ -63,10 +29,10 @@ var NavBar = function NavBar2(props) {
       setContentWidth("100%");
       return;
     }
-    var leftRectWidth = getNodeWidth(leftRef === null || leftRef === void 0 ? void 0 : leftRef.current);
-    var rightRectWidth = getNodeWidth(rightRef === null || rightRef === void 0 ? void 0 : rightRef.current);
-    var wrapperWidth = getNodeWidth(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
-    var centerWidth = wrapperWidth / 2;
+    const leftRectWidth = getNodeWidth(leftRef === null || leftRef === void 0 ? void 0 : leftRef.current);
+    const rightRectWidth = getNodeWidth(rightRef === null || rightRef === void 0 ? void 0 : rightRef.current);
+    const wrapperWidth = getNodeWidth(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    let centerWidth = wrapperWidth / 2;
     if (leftRectWidth && rightRectWidth) {
       centerWidth = wrapperWidth - (leftRectWidth > rightRectWidth ? leftRectWidth * 2 : rightRectWidth * 2);
     } else {
@@ -74,49 +40,44 @@ var NavBar = function NavBar2(props) {
     }
     setContentWidth(centerWidth.toFixed(2));
   }, [left, right, back]);
-  var renderLeft = function renderLeft2() {
-    return back || left ? React__default.createElement("div", {
-      className: "".concat(classPrefix, "-left"),
-      ref: leftRef
-    }, back && React__default.createElement("div", {
-      className: "".concat(classPrefix, "-left-back"),
-      onClick: function onClick(e) {
-        return onBackClick(e);
-      }
-    }, back), left) : null;
+  const renderLeft = () => {
+    return back || left ? React__default.createElement(
+      "div",
+      { className: `${classPrefix}-left`, ref: leftRef },
+      back && React__default.createElement("div", { className: `${classPrefix}-left-back`, onClick: (e) => onBackClick(e) }, back),
+      left
+    ) : null;
   };
-  var renderContent = function renderContent2() {
-    var titleStyle = {};
+  const renderContent = () => {
+    let titleStyle = {};
     if (titleAlign === "center") {
-      var contentRealWidth = "".concat(contentWidth).concat(/%$/i.test(contentWidth) ? "" : "px");
+      const contentRealWidth = `${contentWidth}${/%$/i.test(contentWidth) ? "" : "px"}`;
       titleStyle = {
         minWidth: contentRealWidth,
         width: contentRealWidth
       };
     }
-    return React__default.createElement("div", {
-      className: "".concat(classPrefix, "-title"),
-      style: titleStyle
-    }, children);
+    return React__default.createElement("div", { className: `${classPrefix}-title`, style: titleStyle }, children);
   };
-  var renderRight = function renderRight2() {
-    return React__default.createElement("div", {
-      className: "".concat(classPrefix, "-right"),
-      ref: rightRef
-    }, right);
+  const renderRight = () => {
+    return React__default.createElement("div", { className: `${classPrefix}-right`, ref: rightRef }, right);
   };
-  var renderWrapper = function renderWrapper2() {
-    return React__default.createElement("div", {
-      className: cls,
-      style: styles(),
-      ref: wrapperRef
-    }, renderLeft(), renderContent(), renderRight());
+  const renderWrapper = () => {
+    return React__default.createElement(
+      "div",
+      { className: cls, style: styles(), ref: wrapperRef },
+      renderLeft(),
+      renderContent(),
+      renderRight()
+    );
   };
-  var classes = classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(classPrefix, "-fixed"), fixed), "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), "".concat(classPrefix, "-title-align-").concat(titleAlign), true));
-  var cls = classNames(classPrefix, classes, className);
-  return React__default.createElement(React__default.Fragment, null, fixed && placeholder ? React__default.createElement("div", {
-    className: "".concat(classPrefix, "-placeholder")
-  }, renderWrapper()) : renderWrapper());
+  const classes = classNames({
+    [`${classPrefix}-fixed`]: fixed,
+    [`${classPrefix}-safe-area-inset-top`]: safeAreaInsetTop,
+    [`${classPrefix}-title-align-${titleAlign}`]: true
+  });
+  const cls = classNames(classPrefix, classes, className);
+  return React__default.createElement(React__default.Fragment, null, fixed && placeholder ? React__default.createElement("div", { className: `${classPrefix}-placeholder` }, renderWrapper()) : renderWrapper());
 };
 NavBar.defaultProps = defaultProps;
 NavBar.displayName = "NutNavBar";

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

@@ -1 +1 @@
-.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-box{position:relative;display:flex;align-items:center;height:var(--nutui-noticebar-height, 36px);padding:var(--nutui-noticebar-box-padding, 0 16px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b);border-radius:var(--nutui-noticebar-border-radius, 0)}.nut-noticebar .nut-noticebar-box-wrapable{height:auto;padding:var(--nutui-noticebar-wrapable-padding, 8px 16px)}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap{height:auto}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-box-left-icon{display:flex;height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin-right:var(--nutui-noticebar-icon-gap, 4px);background-size:100% 100%}.nut-noticebar .nut-noticebar-box-right-icon{display:flex;align-items:center;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:var(--nutui-noticebar-icon-gap, 4px)}.nut-noticebar .nut-noticebar-box-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-box-wrap .nut-noticebar-box-wrap-content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-box .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:var(--nutui-noticebar-height, 36px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));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 .nut-noticebar-box-left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-icon-gap, 4px);background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item{display:flex;align-items:center;height:var(--nutui-noticebar-height, 36px);width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:var(--nutui-noticebar-icon-gap, 4px)}@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, 36px))}}[dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon{margin-right:0;margin-left:var(--nutui-noticebar-icon-gap, 4px)}[dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, 4px)}[dir=rtl] .nut-noticebar .nut-noticebar-box .play,.nut-rtl .nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play-rtl linear both running}[dir=rtl] .nut-noticebar .nut-noticebar-box .play-infinite,.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite-rtl linear infinite both running}@keyframes nut-notice-bar-play-rtl{to{transform:translate3d(100%,0,0)}}@keyframes nut-notice-bar-play-infinite-rtl{to{transform:translate3d(100%,0,0)}}[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, 4px)}
+.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-box{position:relative;display:flex;align-items:center;height:var(--nutui-noticebar-height, 36px);padding:var(--nutui-noticebar-box-padding, 0 16px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b);border-radius:var(--nutui-noticebar-border-radius, 0)}.nut-noticebar .nut-noticebar-box-wrapable,.nut-noticebar .nut-noticebar-box-center{height:auto;padding:var(--nutui-noticebar-wrapable-padding, 8px 16px)}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap,.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap{height:auto}.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-box-center{justify-content:center}.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap{flex:initial}.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content{position:relative;display:initial}.nut-noticebar .nut-noticebar-box-left-icon{display:flex;height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin-right:var(--nutui-noticebar-icon-gap, 4px);background-size:100% 100%}.nut-noticebar .nut-noticebar-box-right-icon{display:flex;align-items:center;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:var(--nutui-noticebar-icon-gap, 4px)}.nut-noticebar .nut-noticebar-box-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-box-wrap .nut-noticebar-box-wrap-content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-box .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:var(--nutui-noticebar-height, 36px);font-size:var(--nutui-noticebar-font-size, var(--nutui-font-size-2, 12px));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 .nut-noticebar-box-left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-icon-gap, 4px);background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item{display:flex;align-items:center;height:var(--nutui-noticebar-height, 36px);width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin-left:var(--nutui-noticebar-icon-gap, 4px)}@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, 36px))}}[dir=rtl] .nut-noticebar .nut-noticebar-box-left-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon{margin-right:0;margin-left:var(--nutui-noticebar-icon-gap, 4px)}[dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, 4px)}[dir=rtl] .nut-noticebar .nut-noticebar-box .play,.nut-rtl .nut-noticebar .nut-noticebar-box .play{animation:nut-notice-bar-play-rtl linear both running}[dir=rtl] .nut-noticebar .nut-noticebar-box .play-infinite,.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite{animation:nut-notice-bar-play-infinite-rtl linear infinite both running}@keyframes nut-notice-bar-play-rtl{to{transform:translate3d(100%,0,0)}}@keyframes nut-notice-bar-play-infinite-rtl{to{transform:translate3d(100%,0,0)}}[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon,.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon{margin-left:0;margin-right:var(--nutui-noticebar-icon-gap, 4px)}