mr-component/lib/components/MrCard/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;
var _reactVant = require("react-vant");
var _excluded = ["title", "subtitle", "content", "description", "image", "imagePosition", "imageSize", "imageRound", "badge", "badgeColor", "actions", "actionLayout", "clickable", "shadow", "bordered", "round", "header", "footer", "children", "borderColor", "backgroundColor", "textColor", "borderRadius", "padding", "shadowStyle", "titleFontSize", "titleFontWeight", "titleColor", "contentFontSize", "contentColor", "spacing", "theme", "size", "variant", "onClick", "className", "style"],
  _excluded2 = ["forwardRef"];
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); }
// 操作按钮类型

// Mr卡片属性

// 生成主题样式
var getThemeStyle = function getThemeStyle(theme) {
  switch (theme) {
    case 'primary':
      return {
        borderColor: '#1989FA',
        backgroundColor: '#F0F8FF',
        color: '#1989FA',
        shadowStyle: '0 2px 8px rgba(25, 137, 250, 0.2)'
      };
    case 'success':
      return {
        borderColor: '#07C160',
        backgroundColor: '#F0F9FF',
        color: '#07C160',
        shadowStyle: '0 2px 8px rgba(7, 193, 96, 0.2)'
      };
    case 'warning':
      return {
        borderColor: '#FFA726',
        backgroundColor: '#FFF3E0',
        color: '#E65100',
        shadowStyle: '0 2px 8px rgba(255, 167, 38, 0.2)'
      };
    case 'danger':
      return {
        borderColor: '#EE0A24',
        backgroundColor: '#FFF1F0',
        color: '#EE0A24',
        shadowStyle: '0 2px 8px rgba(238, 10, 36, 0.2)'
      };
    default:
      return {
        borderColor: '#CED1D5',
        backgroundColor: '#FFFFFF',
        color: '#333333',
        shadowStyle: '0 2px 8px rgba(0, 0, 0, 0.1)'
      };
  }
};

// 生成尺寸配置
var getSizeConfig = function getSizeConfig(size) {
  switch (size) {
    case 'small':
      return {
        height: '80px',
        fontSize: '14px',
        padding: '12px',
        titleFontSize: '16px',
        contentFontSize: '14px',
        spacing: '8px',
        borderRadius: '8px'
      };
    case 'large':
      return {
        height: '120px',
        fontSize: '18px',
        padding: '20px',
        titleFontSize: '20px',
        contentFontSize: '16px',
        spacing: '16px',
        borderRadius: '12px'
      };
    default:
      return {
        height: '100px',
        fontSize: '16px',
        padding: '16px',
        titleFontSize: '18px',
        contentFontSize: '14px',
        spacing: '12px',
        borderRadius: '10px'
      };
  }
};

// 生成图片尺寸配置
var getImageSizeConfig = function getImageSizeConfig(imageSize) {
  switch (imageSize) {
    case 'small':
      return {
        width: 60,
        height: 60
      };
    case 'large':
      return {
        width: 120,
        height: 120
      };
    default:
      return {
        width: 80,
        height: 80
      };
  }
};
var MrCard = function MrCard(props, ref) {
  var title = props.title,
    subtitle = props.subtitle,
    content = props.content,
    description = props.description,
    image = props.image,
    _props$imagePosition = props.imagePosition,
    imagePosition = _props$imagePosition === void 0 ? 'top' : _props$imagePosition,
    _props$imageSize = props.imageSize,
    imageSize = _props$imageSize === void 0 ? 'medium' : _props$imageSize,
    _props$imageRound = props.imageRound,
    imageRound = _props$imageRound === void 0 ? false : _props$imageRound,
    badge = props.badge,
    badgeColor = props.badgeColor,
    _props$actions = props.actions,
    actions = _props$actions === void 0 ? [] : _props$actions,
    _props$actionLayout = props.actionLayout,
    actionLayout = _props$actionLayout === void 0 ? 'horizontal' : _props$actionLayout,
    _props$clickable = props.clickable,
    clickable = _props$clickable === void 0 ? false : _props$clickable,
    _props$shadow = props.shadow,
    shadow = _props$shadow === void 0 ? true : _props$shadow,
    _props$bordered = props.bordered,
    bordered = _props$bordered === void 0 ? true : _props$bordered,
    _props$round = props.round,
    round = _props$round === void 0 ? true : _props$round,
    header = props.header,
    footer = props.footer,
    children = props.children,
    borderColor = props.borderColor,
    backgroundColor = props.backgroundColor,
    textColor = props.textColor,
    borderRadius = props.borderRadius,
    padding = props.padding,
    shadowStyle = props.shadowStyle,
    titleFontSize = props.titleFontSize,
    _props$titleFontWeigh = props.titleFontWeight,
    titleFontWeight = _props$titleFontWeigh === void 0 ? 600 : _props$titleFontWeigh,
    titleColor = props.titleColor,
    contentFontSize = props.contentFontSize,
    contentColor = props.contentColor,
    spacing = props.spacing,
    _props$theme = props.theme,
    theme = _props$theme === void 0 ? 'default' : _props$theme,
    _props$size = props.size,
    size = _props$size === void 0 ? 'normal' : _props$size,
    _props$variant = props.variant,
    variant = _props$variant === void 0 ? 'basic' : _props$variant,
    onClick = props.onClick,
    className = props.className,
    style = props.style,
    others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);

  // 过滤掉可能被错误传递的forwardRef属性
  var _ = others.forwardRef,
    restProps = (0, _objectWithoutPropertiesLoose2["default"])(others, _excluded2);

  // 生成最终样式
  var themeStyle = getThemeStyle(theme);
  var sizeConfig = getSizeConfig(size);
  var imageConfig = getImageSizeConfig(imageSize);
  var finalStyle = (0, _extends2["default"])({}, themeStyle, {
    // 应用尺寸配置
    padding: padding || sizeConfig.padding,
    borderRadius: borderRadius || sizeConfig.borderRadius
  }, borderColor && {
    borderColor: borderColor
  }, backgroundColor && {
    backgroundColor: backgroundColor
  }, textColor && {
    color: textColor
  }, shadowStyle && {
    boxShadow: shadowStyle
  }, shadow && !shadowStyle && {
    boxShadow: themeStyle.shadowStyle
  }, {
    // 基础样式
    borderWidth: bordered ? '1px' : '0',
    borderStyle: 'solid',
    boxSizing: 'border-box',
    transition: 'all 0.3s ease',
    cursor: clickable ? 'pointer' : 'default',
    position: 'relative',
    overflow: 'hidden'
  }, style);

  // 标题样式
  var titleStyle = {
    fontSize: titleFontSize || sizeConfig.titleFontSize,
    fontWeight: titleFontWeight,
    color: titleColor || themeStyle.titleColor,
    margin: 0,
    marginBottom: spacing || sizeConfig.spacing,
    lineHeight: 1.4
  };

  // 内容样式
  var contentStyle = {
    fontSize: contentFontSize || sizeConfig.contentFontSize,
    color: contentColor || themeStyle.contentColor,
    margin: 0,
    marginBottom: spacing || sizeConfig.spacing,
    lineHeight: 1.6
  };

  // 徽标样式
  var badgeStyle = {
    position: 'absolute',
    top: '8px',
    right: '8px',
    background: badgeColor || themeStyle.titleColor,
    color: '#FFFFFF',
    padding: '2px 8px',
    borderRadius: '12px',
    fontSize: '12px',
    fontWeight: 500,
    zIndex: 10
  };

  // 处理点击事件
  var handleClick = function handleClick() {
    if (clickable) {
      onClick === null || onClick === void 0 ? void 0 : onClick();
    }
  };

  // 处理动作按钮点击
  var handleActionClick = function handleActionClick(action) {
    var _action$onClick;
    (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action);
  };

  // 渲染图片
  var renderImage = function renderImage() {
    if (!image) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: "mr-card__image",
      style: {
        marginBottom: spacing || sizeConfig.spacing
      }
    }, /*#__PURE__*/React.createElement(_reactVant.Image, {
      src: image,
      width: imageConfig.width,
      height: imageConfig.height,
      round: imageRound,
      fit: "cover"
    }));
  };

  // 渲染标题区域
  var renderTitle = function renderTitle() {
    if (!title && !subtitle) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: "mr-card__title-area"
    }, title && /*#__PURE__*/React.createElement("h3", {
      className: "mr-card__title",
      style: titleStyle
    }, title), subtitle && /*#__PURE__*/React.createElement("p", {
      className: "mr-card__subtitle",
      style: (0, _extends2["default"])({}, contentStyle, {
        fontSize: (contentFontSize || sizeConfig.contentFontSize) - 2,
        marginBottom: title ? (spacing || sizeConfig.spacing) / 2 : spacing || sizeConfig.spacing
      })
    }, subtitle));
  };

  // 渲染内容区域
  var renderContent = function renderContent() {
    if (!content && !description && !children) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: "mr-card__content"
    }, content && /*#__PURE__*/React.createElement("p", {
      className: "mr-card__text",
      style: contentStyle
    }, content), description && /*#__PURE__*/React.createElement("p", {
      className: "mr-card__description",
      style: (0, _extends2["default"])({}, contentStyle, {
        fontSize: (contentFontSize || sizeConfig.contentFontSize) - 2,
        opacity: 0.8
      })
    }, description), children);
  };

  // 渲染操作按钮
  var renderActions = function renderActions() {
    if (!actions || actions.length === 0) return null;
    return /*#__PURE__*/React.createElement("div", {
      className: "mr-card__actions",
      style: {
        marginTop: spacing || sizeConfig.spacing
      }
    }, /*#__PURE__*/React.createElement(_reactVant.Space, {
      direction: actionLayout === 'horizontal' ? 'horizontal' : 'vertical',
      size: 8
    }, actions.map(function (action, index) {
      return /*#__PURE__*/React.createElement(_reactVant.Button, {
        key: index,
        type: action.type || 'primary',
        size: action.size || 'small',
        disabled: action.disabled,
        onClick: function onClick() {
          return handleActionClick(action);
        },
        style: action.style
      }, action.text);
    })));
  };

  // 生成类名
  var classNames = ['mr-card', theme && "mr-card--" + theme, size && "mr-card--" + size, variant && "mr-card--" + variant, clickable && 'mr-card--clickable', shadow && 'mr-card--shadow', bordered && 'mr-card--bordered', round && 'mr-card--round', className].filter(Boolean).join(' ');
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
    ref: ref,
    className: classNames,
    style: finalStyle,
    onClick: handleClick
  }, restProps), badge && /*#__PURE__*/React.createElement("div", {
    className: "mr-card__badge",
    style: badgeStyle
  }, badge), header && /*#__PURE__*/React.createElement("div", {
    className: "mr-card__header",
    style: {
      marginBottom: spacing || sizeConfig.spacing
    }
  }, header), imagePosition === 'top' && renderImage(), /*#__PURE__*/React.createElement("div", {
    className: "mr-card__body",
    style: {
      display: 'flex',
      flexDirection: imagePosition === 'left' ? 'row' : imagePosition === 'right' ? 'row-reverse' : 'column',
      gap: spacing || sizeConfig.spacing
    }
  }, (imagePosition === 'left' || imagePosition === 'right') && renderImage(), /*#__PURE__*/React.createElement("div", {
    className: "mr-card__main",
    style: {
      flex: 1
    }
  }, renderTitle(), renderContent())), imagePosition === 'bottom' && renderImage(), renderActions(), footer && /*#__PURE__*/React.createElement("div", {
    className: "mr-card__footer",
    style: {
      marginTop: spacing || sizeConfig.spacing
    }
  }, footer));
};
var RefMrCard = /*#__PURE__*/(0, _react.forwardRef)(MrCard);
RefMrCard.displayName = 'MrCard';
var _default = exports["default"] = RefMrCard;