@pisell/layout/es/block.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["className", "title", "titleAlign", "extra", "noPadding", "mode", "bordered", "width", "contentClassName", "contentStyle", "span", "divider", "children", "align", "verAlign"];
import React, { useContext, forwardRef } from 'react';
import classNames from 'classnames';
import { isString } from 'lodash-es';
import Context from "./common/context";
import Row from "./row";
import Cell from "./cell";
import P from "./p";
import Text from "./text";
/**
 * 区块,默认 flex 布局
 * @param props
 * @param ref
 * @constructor
 */
var Block = function Block(props, ref) {
  var _classNames, _classNames2, _classNames3;
  var className = props.className,
    title = props.title,
    titleAlign = props.titleAlign,
    extra = props.extra,
    noPaddingProp = props.noPadding,
    mode = props.mode,
    bordered = props.bordered,
    width = props.width,
    contentClassName = props.contentClassName,
    _props$contentStyle = props.contentStyle,
    contentStyle = _props$contentStyle === void 0 ? {} : _props$contentStyle,
    spanProp = props.span,
    divider = props.divider,
    children = props.children,
    align = props.align,
    verAlign = props.verAlign,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  var _useContext = useContext(Context),
    prefix = _useContext.prefix,
    maxNumberOfColumns = _useContext.maxNumberOfColumns;
  var isTransparent = mode === 'transparent';
  var noPadding = !isTransparent ? noPaddingProp : true;
  var hasHead = !isTransparent && (title || extra);
  var span = spanProp;
  if (!span || span > maxNumberOfColumns || span <= 0) {
    span = maxNumberOfColumns;
  }
  var clsPrefix = prefix + "block";
  var blockCls = classNames(className, clsPrefix, (_classNames = {}, _classNames[prefix + "bg--" + mode] = mode, _classNames[clsPrefix + "--no-padding"] = noPadding, _classNames[clsPrefix + "--headless"] = !hasHead, _classNames[clsPrefix + "--span-" + span] = span > 0, _classNames[clsPrefix + "--bordered"] = !isTransparent && bordered, _classNames[clsPrefix + "--divided"] = divider, _classNames));
  var headCls = classNames((_classNames2 = {}, _classNames2[clsPrefix + "-head"] = true, _classNames2));
  var blockContentCls = classNames(contentClassName, (_classNames3 = {}, _classNames3[clsPrefix + "-content"] = true, _classNames3[clsPrefix + "-content--no-padding"] = noPadding, _classNames3));

  // 当有 title 或 extra 节点时
  if (hasHead) {
    return /*#__PURE__*/React.createElement("div", _extends({}, others, {
      className: blockCls,
      ref: ref
    }), /*#__PURE__*/React.createElement(Row, {
      autoFit: true,
      verAlign: "middle",
      className: headCls
    }, /*#__PURE__*/React.createElement(Cell, {
      className: clsPrefix + "-title",
      align: titleAlign
    }, isString(title) ? /*#__PURE__*/React.createElement(P, null, /*#__PURE__*/React.createElement(Text, {
      type: "h6"
    }, title)) : title), extra ? /*#__PURE__*/React.createElement(Cell, {
      autoFit: true,
      className: clsPrefix + "-extra",
      align: "right"
    }, isString(extra) ? /*#__PURE__*/React.createElement(P, null, /*#__PURE__*/React.createElement(Text, null, extra)) : extra) : null), /*#__PURE__*/React.createElement(Cell, _extends({}, others, {
      align: align,
      verAlign: verAlign,
      className: blockContentCls,
      style: contentStyle
    }), children));
  }
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(Cell, _extends({}, others, {
      width: width,
      verAlign: verAlign,
      className: blockCls,
      ref: ref
    }), children)
  );
};
var RefBlock = /*#__PURE__*/forwardRef(Block);
RefBlock.displayName = 'Block';
RefBlock.defaultProps = {
  mode: 'surface',
  noPadding: false
};
RefBlock.typeMark = 'Block';
export default RefBlock;