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

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";