@pisell/layout/lib/block.js

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

"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 _classnames = _interopRequireDefault(require("classnames"));
var _lodashEs = require("lodash-es");
var _context = _interopRequireDefault(require("./common/context"));
var _row = _interopRequireDefault(require("./row"));
var _cell = _interopRequireDefault(require("./cell"));
var _p = _interopRequireDefault(require("./p"));
var _text = _interopRequireDefault(require("./text"));
var _excluded = ["className", "title", "titleAlign", "extra", "noPadding", "mode", "bordered", "width", "contentClassName", "contentStyle", "span", "divider", "children", "align", "verAlign"];
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; }
/**
 * 区块,默认 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 = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
  var _useContext = (0, _react.useContext)(_context["default"]),
    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 = (0, _classnames["default"])(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 = (0, _classnames["default"])((_classNames2 = {}, _classNames2[clsPrefix + "-head"] = true, _classNames2));
  var blockContentCls = (0, _classnames["default"])(contentClassName, (_classNames3 = {}, _classNames3[clsPrefix + "-content"] = true, _classNames3[clsPrefix + "-content--no-padding"] = noPadding, _classNames3));

  // 当有 title 或 extra 节点时
  if (hasHead) {
    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, others, {
      className: blockCls,
      ref: ref
    }), /*#__PURE__*/_react["default"].createElement(_row["default"], {
      autoFit: true,
      verAlign: "middle",
      className: headCls
    }, /*#__PURE__*/_react["default"].createElement(_cell["default"], {
      className: clsPrefix + "-title",
      align: titleAlign
    }, (0, _lodashEs.isString)(title) ? /*#__PURE__*/_react["default"].createElement(_p["default"], null, /*#__PURE__*/_react["default"].createElement(_text["default"], {
      type: "h6"
    }, title)) : title), extra ? /*#__PURE__*/_react["default"].createElement(_cell["default"], {
      autoFit: true,
      className: clsPrefix + "-extra",
      align: "right"
    }, (0, _lodashEs.isString)(extra) ? /*#__PURE__*/_react["default"].createElement(_p["default"], null, /*#__PURE__*/_react["default"].createElement(_text["default"], null, extra)) : extra) : null), /*#__PURE__*/_react["default"].createElement(_cell["default"], (0, _extends2["default"])({}, others, {
      align: align,
      verAlign: verAlign,
      className: blockContentCls,
      style: contentStyle
    }), children));
  }
  return (
    /*#__PURE__*/
    // @ts-ignore
    _react["default"].createElement(_cell["default"], (0, _extends2["default"])({}, others, {
      width: width,
      verAlign: verAlign,
      className: blockCls,
      ref: ref
    }), children)
  );
};
var RefBlock = /*#__PURE__*/(0, _react.forwardRef)(Block);
RefBlock.displayName = 'Block';
RefBlock.defaultProps = {
  mode: 'surface',
  noPadding: false
};
RefBlock.typeMark = 'Block';
var _default = RefBlock;
exports["default"] = _default;