@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`
286 lines (277 loc) • 10.6 kB
JavaScript
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
var _excluded = ["className", "children", "title", "titleAlign", "extra", "gap", "noPadding"];
import React, { Children, cloneElement, forwardRef, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { cacheFoldStore } from "../../common/util/const";
import classNames from 'classnames';
import Context from "./common/context";
import { debounceCalPageClassNames, debounceCalPageClassNames2, getGapVal, isValidGap, wrapUnit } from "./utils";
import Block from "./block";
import Row from "./row";
import Col from "./col";
import Cell from "./cell";
import isNil from 'lodash/isNil';
import isString from 'lodash/isString';
import { CnPageColumnChange, CnSectionCalculateLayout, onEvent } from "../../common/util/event-name";
/**
* 获取计算后的子节点
* @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 = Children.toArray(children).filter(function (child) {
return !isNil(child);
});
validChildList.forEach(function (child, index) {
var _child$type;
if ((child === null || child === void 0 ? void 0 : child.type) === Block || (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.createElement(Block, {
key: "cs-" + index,
span: maxNumberOfColumns
}, tmp));
tmp = [];
}
ret.push(child);
if (tmp.length > 0) {
ret.push(/*#__PURE__*/React.createElement(Block, {
key: "cs-" + index,
span: maxNumberOfColumns
}, [].concat(tmp)));
tmp = [];
}
} else {
tmp.push(child);
}
if (index === validChildList.length - 1 && tmp.length > 0) {
ret.push(/*#__PURE__*/React.createElement(Block, {
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) || 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__*/cloneElement(item, _extends({}, 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 () {
debounceCalPageClassNames2({
container: targetNode
});
});
ro.observe(targetNode);
return;
}
}
debounceCalPageClassNames();
window.addEventListener('resize', 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 = _objectWithoutPropertiesLoose(props, _excluded);
var containerRef = useRef(null);
var _useContext = useContext(Context),
prefix = _useContext.prefix,
blockGapContext = _useContext.blockGap,
numberOfColumns = _useContext.breakPoint.numberOfColumns,
maxNumberOfColumns = _useContext.maxNumberOfColumns;
var _useState = useState(Date.now()),
updateFlag = _useState[0],
setUpdateFlag = _useState[1];
var _useState2 = useState(numberOfColumns),
realNumberOfColumns = _useState2[0],
setRealNumberOfColumns = _useState2[1];
useEffect(function () {
setRealNumberOfColumns(numberOfColumns);
}, [numberOfColumns]);
useEffect(function () {
onEvent(CnPageColumnChange, function (payload) {
if (typeof (payload === null || payload === void 0 ? void 0 : payload.numberOfColumns) === 'number') {
setRealNumberOfColumns(payload.numberOfColumns);
}
});
onEvent(CnSectionCalculateLayout, function (payload) {
var _ref2 = payload || {},
_nodeId = _ref2._nodeId;
var hasChildren = 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 = classNames(clsPrefix, className);
var blockWrapperCls = clsPrefix + "-block-wrapper";
var innerContainerWithHead = classNames(clsPrefix + "-inner--with-head", (_classNames = {}, _classNames[clsPrefix + "-no-padding"] = noPadding, _classNames));
var innerContainerWithoutHead = classNames(clsPrefix + "-inner-without-head");
// 此处定义的是 blockGap
var gap = getGapVal(blockGapContext, blockGapProp);
var blockWrapperStyle = useMemo(function () {
return _extends({}, isValidGap(gap) ? {
gridColumnGap: wrapUnit(gap),
gridRowGap: wrapUnit(gap)
} : null);
}, [gap]);
var newChildren = useMemo(function () {
return getValidChildren(children, realNumberOfColumns, maxNumberOfColumns);
}, [children, realNumberOfColumns, maxNumberOfColumns, updateFlag]);
// 带有 title&extra
if (hasHead) {
return /*#__PURE__*/React.createElement("div", _extends({}, others, {
className: classNames(clsPrefix, className),
ref: ref
}), /*#__PURE__*/React.createElement("div", {
className: innerContainerWithHead
}, /*#__PURE__*/React.createElement(Col, {
align: "stretch"
}, /*#__PURE__*/React.createElement(Row, {
autoFit: true,
className: clsPrefix + "-head",
verAlign: "middle"
}, /*#__PURE__*/React.createElement(Cell, {
className: clsPrefix + "-title",
align: titleAlign
}, isString(title) ? /*#__PURE__*/React.createElement("span", null, " ", title) : title), extra ? /*#__PURE__*/React.createElement(Cell, {
align: "right",
autoFit: true,
className: clsPrefix + "-extra"
}, isString(extra) ? /*#__PURE__*/React.createElement("span", null, extra) : extra) : null), /*#__PURE__*/React.createElement(Cell, null, /*#__PURE__*/React.createElement("div", {
className: blockWrapperCls,
style: blockWrapperStyle
}, newChildren)))));
}
return /*#__PURE__*/React.createElement("div", _extends({}, others, {
className: sectionCls,
ref: ref
}), /*#__PURE__*/React.createElement("div", {
className: classNames(innerContainerWithoutHead, blockWrapperCls),
style: blockWrapperStyle,
ref: containerRef
}, newChildren));
};
var RefSection = /*#__PURE__*/forwardRef(Section);
RefSection.displayName = 'Section';
RefSection.typeMark = 'Section';
export default RefSection;