@cainiaofe/cn-ui-layout
Version:
- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`
100 lines (98 loc) • 5.43 kB
JavaScript
"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 _isString = _interopRequireDefault(require("lodash/isString"));
var _context = _interopRequireDefault(require("./common/context"));
var _row = _interopRequireDefault(require("./row"));
var _cell = _interopRequireDefault(require("./cell"));
var _excluded = ["className", "title", "titleAlign", "extra", "noPadding", "mode", "bordered", "width", "contentClassName", "contentStyle", "span", "divider", "children", "align", "verAlign"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/**
* 区块,默认 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, _isString["default"])(title) ? /*#__PURE__*/_react["default"].createElement("span", null, title) : title), extra ? /*#__PURE__*/_react["default"].createElement(_cell["default"], {
autoFit: true,
className: clsPrefix + "-extra",
align: "right"
}, (0, _isString["default"])(extra) ? /*#__PURE__*/_react["default"].createElement("span", 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: true
};
RefBlock.typeMark = 'Block';
var _default = exports["default"] = RefBlock;
module.exports = exports.default;
module.exports.default = exports.default;