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

A library for Mr components

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["title", "showBack", "backIcon", "titleColor", "backgroundColor", "height", "fixed", "safeArea", "showBorder", "maxLength", "fontSize", "fontWeight", "onBack", "className", "style"];
import * as React from 'react';
import { forwardRef } from 'react';
import './index.scss';
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 = _objectWithoutPropertiesLoose(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 = _extends({
    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", _extends({
    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__*/forwardRef(MrTitle);
RefMrTitle.displayName = 'MrTitle';
export default RefMrTitle;