@pisell/layout
Version:
基于 Fusion 设计系统的自然布局体系
210 lines (203 loc) • 8.92 kB
JavaScript
"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 _block = _interopRequireDefault(require("./block"));
var _row = _interopRequireDefault(require("./row"));
var _col = _interopRequireDefault(require("./col"));
var _cell = _interopRequireDefault(require("./cell"));
var _p = _interopRequireDefault(require("./p"));
var _excluded = ["className", "children", "title", "titleAlign", "extra", "gap", "noPadding"];
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; }
/**
* 获取计算后的子节点
* @param children
* @param numberOfColumns
* @param maxNumberOfColumns
*/
function getValidChildren(children, numberOfColumns, maxNumberOfColumns) {
var newChildren = wrapBlock(children, maxNumberOfColumns);
return calBlockSpan(newChildren, numberOfColumns);
}
/**
* 为非 Block 节点，包裹 Block 子元素
* @param children
* @param maxNumberOfColumns
* @return ReactNode[]
*/
function wrapBlock(children, maxNumberOfColumns) {
var tmp = [];
var ret = [];
var validChildList = _react.Children.toArray(children).filter(function (child) {
return !(0, _lodashEs.isNil)(child);
});
validChildList.forEach(function (child, index) {
var _child$type;
if ((child === null || child === void 0 ? void 0 : child.type) === _block["default"] || (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.typeMark) === 'Block') {
if (tmp.length > 0) {
ret.push( /*#__PURE__*/_react["default"].createElement(_block["default"], {
key: "cs-" + index,
span: maxNumberOfColumns
}, tmp));
tmp = [];
}
ret.push(child);
if (tmp.length > 0) {
ret.push( /*#__PURE__*/_react["default"].createElement(_block["default"], {
key: "cs-" + index,
span: maxNumberOfColumns
}, [].concat(tmp)));
tmp = [];
}
} else {
tmp.push(child);
}
if (index === validChildList.length - 1 && tmp.length > 0) {
ret.push( /*#__PURE__*/_react["default"].createElement(_block["default"], {
key: "cs-" + index,
span: maxNumberOfColumns
}, [].concat(tmp)));
tmp = [];
}
});
return ret;
}
/**
* 为 Block 自动调整列宽
* @param children
* @param numberOfColumns
*/
function calBlockSpan(children, numberOfColumns) {
var ret = [];
var stack = [];
var counter = 0;
var len = children.length;
for (var i = 0; i < len; i++) {
var child = children[i];
var span = +child.props.span;
if (span < numberOfColumns) {
if (span + counter <= numberOfColumns) {
stack.push(child);
counter += span;
} else {
ret = [].concat(ret, adjustColWidth(stack, counter, numberOfColumns));
stack = [child];
counter = span;
}
} else {
if (stack.length > 0) {
ret = [].concat(ret, adjustColWidth(stack, counter, numberOfColumns));
stack = [];
counter = 0;
}
ret = [].concat(ret, adjustColWidth([child], numberOfColumns, numberOfColumns));
}
if (i === len - 1 && stack.length > 0) {
ret = [].concat(ret, adjustColWidth(stack, counter, numberOfColumns));
}
}
return ret;
}
/**
* 重算列宽
* @param blockNodes
* @param totalSpan
* @param maxColNum
*/
function adjustColWidth(blockNodes, totalSpan, maxColNum) {
return blockNodes.map(function (item) {
var span = item.props.span;
return /*#__PURE__*/(0, _react.cloneElement)(item, (0, _extends2["default"])({}, item.props, {
span: Math.round(span / totalSpan * maxColNum)
}));
});
}
/**
* 章节
* @param props
* @param ref
*/
var Section = function Section(props, ref) {
var _classNames;
var className = props.className,
children = props.children,
title = props.title,
titleAlign = props.titleAlign,
extra = props.extra,
blockGapProp = props.gap,
noPadding = props.noPadding,
others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
var _useContext = (0, _react.useContext)(_context["default"]),
prefix = _useContext.prefix,
blockGapContext = _useContext.blockGap,
numberOfColumns = _useContext.breakPoint.numberOfColumns,
maxNumberOfColumns = _useContext.maxNumberOfColumns;
var clsPrefix = prefix + "section";
var hasHead = title || extra;
// classNames
var sectionCls = (0, _classnames["default"])(clsPrefix, className);
var blockWrapperCls = clsPrefix + "-block-wrapper";
var innerContainerWithHead = (0, _classnames["default"])(clsPrefix + "-inner--with-head", (_classNames = {}, _classNames[clsPrefix + "-no-padding"] = noPadding, _classNames));
var innerContainerWithoutHead = (0, _classnames["default"])(clsPrefix + "-inner-without-head");
// 此处定义的是 blockGap
var gap = (0, _utils.getGapVal)(blockGapContext, blockGapProp);
var blockWrapperStyle = (0, _react.useMemo)(function () {
return (0, _extends2["default"])({}, (0, _utils.isValidGap)(gap) ? {
gridColumnGap: (0, _utils.wrapUnit)(gap),
gridRowGap: (0, _utils.wrapUnit)(gap)
} : null);
}, [gap]);
var newChildren = (0, _react.useMemo)(function () {
return getValidChildren(children, numberOfColumns, maxNumberOfColumns);
}, [children, numberOfColumns, maxNumberOfColumns]);
// 带有 title&extra
if (hasHead) {
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, others, {
className: (0, _classnames["default"])(clsPrefix, className),
ref: ref
}), /*#__PURE__*/_react["default"].createElement("div", {
className: innerContainerWithHead
}, /*#__PURE__*/_react["default"].createElement(_col["default"], {
align: "stretch"
}, /*#__PURE__*/_react["default"].createElement(_row["default"], {
autoFit: true,
className: clsPrefix + "-head",
verAlign: "middle"
}, /*#__PURE__*/_react["default"].createElement(_cell["default"], {
className: clsPrefix + "-title",
align: titleAlign
}, (0, _lodashEs.isString)(title) ? /*#__PURE__*/_react["default"].createElement(_p["default"], {
type: "h5"
}, title) : title), extra ? /*#__PURE__*/_react["default"].createElement(_cell["default"], {
align: "right",
autoFit: true,
className: clsPrefix + "-extra"
}, (0, _lodashEs.isString)(extra) ? /*#__PURE__*/_react["default"].createElement(_p["default"], {
align: "right",
type: "body2"
}, extra) : extra) : null), /*#__PURE__*/_react["default"].createElement(_cell["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
className: blockWrapperCls,
style: blockWrapperStyle
}, newChildren)))));
}
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, others, {
className: sectionCls,
ref: ref
}), /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])(innerContainerWithoutHead, blockWrapperCls),
style: blockWrapperStyle
}, newChildren));
};
var RefSection = /*#__PURE__*/(0, _react.forwardRef)(Section);
RefSection.displayName = 'Section';
RefSection.typeMark = 'Section';
var _default = RefSection;
exports["default"] = _default;