@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`
295 lines (285 loc) • 12.6 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 _const = require("../../common/util/const");
var _classnames = _interopRequireDefault(require("classnames"));
var _context2 = _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 _isNil = _interopRequireDefault(require("lodash/isNil"));
var _isString = _interopRequireDefault(require("lodash/isString"));
var _eventName = require("../../common/util/event-name");
var _excluded = ["className", "children", "title", "titleAlign", "extra", "gap", "noPadding"];
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; }
/**
* 获取计算后的子节点
* @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, _isNil["default"])(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(originalChildren, numberOfColumns) {
var hiddenChildrenList = [];
var children = originalChildren.filter(function (child, index) {
var _ref = (child === null || child === void 0 ? void 0 : child.props) || {},
_context = _ref._context,
_nodeId = _ref._nodeId;
if (_context && _nodeId) {
var _context$$, _context$$$call, _context$$$call$props;
var hidden = (_context === null || _context === void 0 ? void 0 : (_context$$ = _context.$) === null || _context$$ === void 0 ? void 0 : (_context$$$call = _context$$.call(_context, _nodeId)) === null || _context$$$call === void 0 ? void 0 : (_context$$$call$props = _context$$$call.props) === null || _context$$$call$props === void 0 ? void 0 : _context$$$call$props.hidden) || _const.cacheFoldStore[_nodeId];
if (hidden) {
hiddenChildrenList.push([index, child]);
}
return hidden !== true;
}
return true;
});
var ret = [];
var stack = [];
var counter = 0;
var len = children.length;
for (var i = 0; i < len; i++) {
var _child$props;
var child = children[i];
var span = +((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.span);
// MODIFY 读取 span 属性
// const span: number = +child.props?._layout?.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));
}
}
if (hiddenChildrenList.length > 0) {
hiddenChildrenList.forEach(function (item) {
ret.splice(item[0], 0, item[1]);
});
}
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)
}));
// MODIFY 设置 span 属性
// const span = +item.props?._layout?.span;
// return cloneElement(item, {
// ...item.props,
// _layout: {
// ...item.props?._layout,
// span: Math.round((span / totalSpan) * maxColNum),
// }
// });
});
}
/**
* @description 为容器绑定resize事件(默认监听window的resize事件，OnePage模式下监听距离当前Section最近的OnePage容器)
* @param container
* @returns
*/
function addResizeListener(container) {
var _document$body$getEle;
if (((_document$body$getEle = document.body.getElementsByClassName('cn-one-page-layout-col')) === null || _document$body$getEle === void 0 ? void 0 : _document$body$getEle.length) > 0) {
var targetNode = container === null || container === void 0 ? void 0 : container.closest('.cn-one-page-layout-col');
if (targetNode && ResizeObserver) {
var ro = new ResizeObserver(function () {
(0, _utils.debounceCalPageClassNames2)({
container: targetNode
});
});
ro.observe(targetNode);
return;
}
}
(0, _utils.debounceCalPageClassNames)();
window.addEventListener('resize', _utils.debounceCalPageClassNames2);
}
/**
* 章节
* @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 containerRef = (0, _react.useRef)(null);
var _useContext = (0, _react.useContext)(_context2["default"]),
prefix = _useContext.prefix,
blockGapContext = _useContext.blockGap,
numberOfColumns = _useContext.breakPoint.numberOfColumns,
maxNumberOfColumns = _useContext.maxNumberOfColumns;
var _useState = (0, _react.useState)(Date.now()),
updateFlag = _useState[0],
setUpdateFlag = _useState[1];
var _useState2 = (0, _react.useState)(numberOfColumns),
realNumberOfColumns = _useState2[0],
setRealNumberOfColumns = _useState2[1];
(0, _react.useEffect)(function () {
setRealNumberOfColumns(numberOfColumns);
}, [numberOfColumns]);
(0, _react.useEffect)(function () {
(0, _eventName.onEvent)(_eventName.CnPageColumnChange, function (payload) {
if (typeof (payload === null || payload === void 0 ? void 0 : payload.numberOfColumns) === 'number') {
setRealNumberOfColumns(payload.numberOfColumns);
}
});
(0, _eventName.onEvent)(_eventName.CnSectionCalculateLayout, function (payload) {
var _ref2 = payload || {},
_nodeId = _ref2._nodeId;
var hasChildren = _react.Children.toArray(children).find(function (item) {
var _item$props;
return (item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props._nodeId) === _nodeId;
});
if (hasChildren) {
setUpdateFlag(Date.now());
}
});
addResizeListener(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
}, []);
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, realNumberOfColumns, maxNumberOfColumns);
}, [children, realNumberOfColumns, maxNumberOfColumns, updateFlag]);
// 带有 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, _isString["default"])(title) ? /*#__PURE__*/_react["default"].createElement("span", null, " ", title) : title), extra ? /*#__PURE__*/_react["default"].createElement(_cell["default"], {
align: "right",
autoFit: true,
className: clsPrefix + "-extra"
}, (0, _isString["default"])(extra) ? /*#__PURE__*/_react["default"].createElement("span", null, 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,
ref: containerRef
}, newChildren));
};
var RefSection = /*#__PURE__*/(0, _react.forwardRef)(Section);
RefSection.displayName = 'Section';
RefSection.typeMark = 'Section';
var _default = exports["default"] = RefSection;
module.exports = exports.default;
module.exports.default = exports.default;