@nutui/nutui-react/dist/esm/NavBar.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

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";
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 });
  };
  const leftRef = useRef(null);
  const rightRef = useRef(null);
  const wrapperRef = useRef(null);
  const [contentWidth, setContentWidth] = useState("50%");
  const getNodeWidth = (node) => {
    if (node) {
      const ele = getRect(node);
      return ele.width;
    }
    return 0;
  };
  useEffect(() => {
    if (titleAlign === "left") {
      return;
    }
    if (!(back || left || right)) {
      setContentWidth("100%");
      return;
    }
    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 {
      centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2;
    }
    setContentWidth(centerWidth.toFixed(2));
  }, [left, right, back]);
  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;
  };
  const renderContent = () => {
    let titleStyle = {};
    if (titleAlign === "center") {
      const contentRealWidth = `${contentWidth}${/%$/i.test(contentWidth) ? "" : "px"}`;
      titleStyle = {
        minWidth: contentRealWidth,
        width: contentRealWidth
      };
    }
    return React__default.createElement("div", { className: `${classPrefix}-title`, style: titleStyle }, children);
  };
  const renderRight = () => {
    return React__default.createElement("div", { className: `${classPrefix}-right`, ref: rightRef }, right);
  };
  const renderWrapper = () => {
    return React__default.createElement(
      "div",
      { className: cls, style: styles(), ref: wrapperRef },
      renderLeft(),
      renderContent(),
      renderRight()
    );
  };
  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.displayName = "NutNavBar";
export {
  NavBar as default
};