@pisell/layout/es/p.js

基于 Fusion 设计系统的自然布局体系

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
var _excluded = ["type", "className", "beforeMargin", "afterMargin", "align", "verAlign", "spacing", "hasVerSpacing", "children", "style"];
/**
 * 段落
 */
import React, { useContext, forwardRef, Children, isValidElement, cloneElement, useMemo } from 'react';
import { isNumber, isString } from 'lodash-es';
import classNames from 'classnames';
import Context from "./common/context";
import { isPresetSize, wrapUnit } from "./utils";
import Text from "./text";
var getChildren = function getChildren(children, type) {
  if (type === void 0) {
    type = 'body2';
  }
  return Children.map(children, function (child) {
    // 文本节点 和 纯文本链接默认使用 Text 节点包裹
    if (typeof child === 'string') {
      return /*#__PURE__*/React.createElement(Text, {
        type: type
      }, child);
    } else if ( /*#__PURE__*/isValidElement(child)) {
      if (child.type === 'a' && isString(child.props.children)) {
        return /*#__PURE__*/cloneElement(child, _extends({}, child.props), /*#__PURE__*/React.createElement(Text, {
          type: type,
          color: "inherit"
        }, child.props.children));
        // @ts-ignore
      } else if (child.type.typeMark === 'Text' && !child.props.type) {
        return /*#__PURE__*/cloneElement(child, {
          // @ts-ignore
          type: type
        });
      }
    }
    return child;
  });
};
/**
 * 段落布局，自动为段落内元素增加水平和垂直间隙，并支持多种模式对齐
 */
var P = function P(props, ref) {
  var _classNames;
  var type = props.type,
    className = props.className,
    beforeMargin = props.beforeMargin,
    afterMargin = props.afterMargin,
    align = props.align,
    verAlign = props.verAlign,
    spacingProp = props.spacing,
    hasVerSpacing = props.hasVerSpacing,
    children = props.children,
    style = props.style,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  var _useContext = useContext(Context),
    prefix = _useContext.prefix;
  var clsPrefix = prefix + "p";
  var isCustomSize = isNumber(spacingProp) || isString(spacingProp) && spacingProp !== '' && !isPresetSize(spacingProp);
  var spacing = isCustomSize ? 'medium' : spacingProp;
  var newStyle = useMemo(function () {
    return _extends({
      marginTop: wrapUnit(beforeMargin) || 0,
      marginBottom: wrapUnit(afterMargin) || 0
    }, isCustomSize ? {
      '--page-p-medium-spacing': wrapUnit(spacingProp)
    } : null, style);
  }, [beforeMargin, afterMargin, isCustomSize, style]);
  return /*#__PURE__*/React.createElement("div", _extends({}, others, {
    ref: ref,
    className: classNames(clsPrefix, className, (_classNames = {}, _classNames[clsPrefix + "-spacing"] = spacing, _classNames[clsPrefix + "-align--" + align] = align, _classNames[clsPrefix + "-valign--" + verAlign] = verAlign, _classNames[clsPrefix + "-spacing--" + align] = spacing && align, _classNames[clsPrefix + "-spacing--" + spacing] = isPresetSize(spacing), _classNames[clsPrefix + "-margin"] = hasVerSpacing, _classNames[clsPrefix + "--" + type] = type, _classNames)),
    style: newStyle
  }), getChildren(children, type));
};
var RefParagraph = /*#__PURE__*/forwardRef(P);
RefParagraph.displayName = 'P';
RefParagraph.typeMark = 'P';
RefParagraph.defaultProps = {
  spacing: 'medium',
  hasVerSpacing: true,
  verAlign: 'middle'
};
export default RefParagraph;