@pisell/layout/lib/p.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _lodashEs = require("lodash-es");
var _classnames = _interopRequireDefault(require("classnames"));
var _context = _interopRequireDefault(require("./common/context"));
var _utils = require("./utils");
var _text = _interopRequireDefault(require("./text"));
var _excluded = ["type", "className", "beforeMargin", "afterMargin", "align", "verAlign", "spacing", "hasVerSpacing", "children", "style"];
/**
 * 段落
 */
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var getChildren = function getChildren(children, type) {
  if (type === void 0) {
    type = 'body2';
  }
  return _react.Children.map(children, function (child) {
    // 文本节点 和 纯文本链接默认使用 Text 节点包裹
    if (typeof child === 'string') {
      return /*#__PURE__*/_react["default"].createElement(_text["default"], {
        type: type
      }, child);
    } else if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
      if (child.type === 'a' && (0, _lodashEs.isString)(child.props.children)) {
        return /*#__PURE__*/(0, _react.cloneElement)(child, (0, _extends2["default"])({}, child.props), /*#__PURE__*/_react["default"].createElement(_text["default"], {
          type: type,
          color: "inherit"
        }, child.props.children));
        // @ts-ignore
      } else if (child.type.typeMark === 'Text' && !child.props.type) {
        return /*#__PURE__*/(0, _react.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 = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
  var _useContext = (0, _react.useContext)(_context["default"]),
    prefix = _useContext.prefix;
  var clsPrefix = prefix + "p";
  var isCustomSize = (0, _lodashEs.isNumber)(spacingProp) || (0, _lodashEs.isString)(spacingProp) && spacingProp !== '' && !(0, _utils.isPresetSize)(spacingProp);
  var spacing = isCustomSize ? 'medium' : spacingProp;
  var newStyle = (0, _react.useMemo)(function () {
    return (0, _extends2["default"])({
      marginTop: (0, _utils.wrapUnit)(beforeMargin) || 0,
      marginBottom: (0, _utils.wrapUnit)(afterMargin) || 0
    }, isCustomSize ? {
      '--page-p-medium-spacing': (0, _utils.wrapUnit)(spacingProp)
    } : null, style);
  }, [beforeMargin, afterMargin, isCustomSize, style]);
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, others, {
    ref: ref,
    className: (0, _classnames["default"])(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] = (0, _utils.isPresetSize)(spacing), _classNames[clsPrefix + "-margin"] = hasVerSpacing, _classNames[clsPrefix + "--" + type] = type, _classNames)),
    style: newStyle
  }), getChildren(children, type));
};
var RefParagraph = /*#__PURE__*/(0, _react.forwardRef)(P);
RefParagraph.displayName = 'P';
RefParagraph.typeMark = 'P';
RefParagraph.defaultProps = {
  spacing: 'medium',
  hasVerSpacing: true,
  verAlign: 'middle'
};
var _default = RefParagraph;
exports["default"] = _default;