mr-component/lib/components/MrTitle/index.js

A library for Mr components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
require("./index.scss");
var _excluded = ["title", "showBack", "backIcon", "titleColor", "backgroundColor", "height", "fixed", "safeArea", "showBorder", "maxLength", "fontSize", "fontWeight", "onBack", "className", "style"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var MrTitle = function MrTitle(props, ref) {
  var _props$title = props.title,
    title = _props$title === void 0 ? '标题' : _props$title,
    _props$showBack = props.showBack,
    showBack = _props$showBack === void 0 ? true : _props$showBack,
    backIcon = props.backIcon,
    _props$titleColor = props.titleColor,
    titleColor = _props$titleColor === void 0 ? '#000000' : _props$titleColor,
    _props$backgroundColo = props.backgroundColor,
    backgroundColor = _props$backgroundColo === void 0 ? '#ffffff' : _props$backgroundColo,
    _props$height = props.height,
    height = _props$height === void 0 ? 44 : _props$height,
    _props$fixed = props.fixed,
    fixed = _props$fixed === void 0 ? true : _props$fixed,
    _props$safeArea = props.safeArea,
    safeArea = _props$safeArea === void 0 ? true : _props$safeArea,
    _props$showBorder = props.showBorder,
    showBorder = _props$showBorder === void 0 ? true : _props$showBorder,
    _props$maxLength = props.maxLength,
    maxLength = _props$maxLength === void 0 ? 20 : _props$maxLength,
    _props$fontSize = props.fontSize,
    fontSize = _props$fontSize === void 0 ? 18 : _props$fontSize,
    _props$fontWeight = props.fontWeight,
    fontWeight = _props$fontWeight === void 0 ? 500 : _props$fontWeight,
    onBack = props.onBack,
    className = props.className,
    style = props.style,
    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);

  // 处理标题文本截断
  var getDisplayTitle = function getDisplayTitle(text, max) {
    if (!text) return '';
    return text.length > max ? text.slice(0, max) + "..." : text;
  };

  // 处理返回事件
  var handleBack = function handleBack() {
    if (onBack) {
      onBack();
    } else {
      // 默认返回上一页
      if (window.history && window.history.length > 1) {
        window.history.back();
      }
    }
  };

  // 渲染返回按钮图标
  var renderBackIcon = function renderBackIcon() {
    if (backIcon) {
      return backIcon;
    }

    // 使用现有的返回箭头图标文件
    return /*#__PURE__*/React.createElement("img", {
      src: require('./image/arrowLeft.svg')["default"] || require('./image/arrowLeft.svg'),
      alt: "\u8FD4\u56DE",
      style: {
        width: '24px',
        height: '24px',
        filter: titleColor !== '#000000' ? "brightness(0) saturate(100%) invert(" + (titleColor === '#ffffff' ? '100%' : '0%') + ")" : 'none'
      }
    });
  };

  // 构建组件样式
  var containerStyle = (0, _extends2["default"])({
    backgroundColor: backgroundColor,
    height: typeof height === 'number' ? height + "px" : height,
    color: titleColor,
    position: fixed ? 'fixed' : 'relative'
  }, style);
  var titleStyle = {
    fontSize: typeof fontSize === 'number' ? fontSize + "px" : fontSize,
    fontWeight: fontWeight,
    color: titleColor
  };

  // 构建CSS类名
  var classNames = ['mr-title', fixed && 'mr-title--fixed', safeArea && 'mr-title--safe-area', showBorder && 'mr-title--show-border', className].filter(Boolean).join(' ');
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
    ref: ref,
    className: classNames,
    style: containerStyle
  }, others), showBack && /*#__PURE__*/React.createElement("div", {
    className: "mr-title__back",
    onClick: handleBack,
    role: "button",
    tabIndex: 0,
    onKeyDown: function onKeyDown(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        handleBack();
      }
    }
  }, renderBackIcon()), /*#__PURE__*/React.createElement("div", {
    className: "mr-title__content"
  }, /*#__PURE__*/React.createElement("h1", {
    className: "mr-title__text",
    style: titleStyle
  }, getDisplayTitle(title, maxLength))), showBack && /*#__PURE__*/React.createElement("div", {
    className: "mr-title__placeholder"
  }));
};
var RefMrTitle = /*#__PURE__*/(0, _react.forwardRef)(MrTitle);
RefMrTitle.displayName = 'MrTitle';
var _default = exports["default"] = RefMrTitle;