@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`
153 lines (149 loc) • 7.95 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _classnames = _interopRequireDefault(require("classnames"));
var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
var _utils = require("../utils");
var _context = _interopRequireDefault(require("../common/context"));
var _constant = require("../common/constant");
var _useCombineRef = _interopRequireDefault(require("../hooks/use-combine-ref"));
var _useGuid = _interopRequireDefault(require("../hooks/use-guid"));
var _content = _interopRequireDefault(require("./content"));
var _excluded = ["prefix", "className", "style", "children", "minHeight", "mode", "noPadding", "contentProps", "header", "nav", "aside", "footer", "breakPoints", "sectionGap", "blockGap", "gridGap", "onBreakPointChange"];
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; }
var Page = function Page(props, ref) {
var _classNames;
var prefix = props.prefix,
className = props.className,
style = props.style,
children = props.children,
minHeight = props.minHeight,
mode = props.mode,
noPadding = props.noPadding,
contentProps = props.contentProps,
header = props.header,
nav = props.nav,
aside = props.aside,
footer = props.footer,
breakPointsProp = props.breakPoints,
sectionGap = props.sectionGap,
blockGap = props.blockGap,
gridGap = props.gridGap,
onBreakPointChange = props.onBreakPointChange,
others = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
var pageStyle = (0, _react.useMemo)(function () {
return (0, _extends2["default"])({}, style, {
minHeight: minHeight
});
}, [style, minHeight]);
// 保证断点一定是有效数组
var breakPoints = Array.isArray(breakPointsProp) ? breakPointsProp : _constant.DEFAULT_BREAK_POINTS;
var pageRef = (0, _react.useRef)(null);
var combinedRef = (0, _useCombineRef["default"])(ref, pageRef);
var contentRef = (0, _react.useRef)(null);
var bpRef = (0, _react.useRef)((0, _utils.getCurBreakPoint)(breakPoints));
var _useState = (0, _react.useState)((0, _utils.getCurBreakPoint)(breakPoints)),
curBreakPoint = _useState[0],
setBreakPoint = _useState[1];
var guid = (0, _useGuid["default"])('cn-layout-');
var pageSizeObsr = new _resizeObserverPolyfill["default"](function () {
var _bpRef$current;
var newBreakPoint = (0, _utils.getCurBreakPoint)(breakPoints);
if ((bpRef === null || bpRef === void 0 ? void 0 : (_bpRef$current = bpRef.current) === null || _bpRef$current === void 0 ? void 0 : _bpRef$current.width) !== newBreakPoint.width && onBreakPointChange) {
onBreakPointChange(newBreakPoint, bpRef === null || bpRef === void 0 ? void 0 : bpRef.current, breakPoints);
}
bpRef.current = newBreakPoint;
setBreakPoint(newBreakPoint);
});
(0, _react.useEffect)(function () {
if (pageRef !== null && pageRef !== void 0 && pageRef.current) {
pageSizeObsr.observe(pageRef.current);
}
// 默认执行一次回调
if (onBreakPointChange) {
onBreakPointChange((0, _utils.getCurBreakPoint)(breakPoints), undefined, breakPoints);
}
return function () {
if (pageRef.current) {
pageSizeObsr.unobserve(pageRef.current);
}
};
}, []);
var headerNode = header;
var footerNode = footer;
var navNode = nav;
var asideNode = aside;
var contentsNodes = [];
// 非标准节点 如 Section, P 等
var tmp = _react.Children.map(children, function (child) {
if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
var _child$type;
// @ts-ignore
var tm = child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.typeMark;
if (tm) {
if (tm === 'Header') {
headerNode = child;
} else if (tm === 'Footer') {
footerNode = child;
} else if (tm === 'Aside') {
asideNode = child;
} else if (tm === 'Nav') {
navNode = child;
} else if (tm === 'Content') {
contentsNodes.push(child);
} else {
return child;
}
return null;
}
}
return child;
});
var nonStdChildren = Array.isArray(tmp) ? tmp.filter(function (c) {
return !!c;
}) : null;
var pageCls = (0, _classnames["default"])(className, (_classNames = {}, _classNames[prefix + "page"] = true, _classNames[prefix + "page--col-" + curBreakPoint.numberOfColumns] = true, _classNames[prefix + "page--not-tab"] = true, _classNames[prefix + "page--headless"] = !headerNode, _classNames[prefix + "page--footless"] = !footerNode, _classNames[prefix + "page--no-padding"] = noPadding, _classNames[prefix + "bg--" + mode] = !!mode, _classNames));
var defaultContent = contentsNodes.length > 0 ? contentsNodes : /*#__PURE__*/_react["default"].createElement(_content["default"]
// @ts-ignore
, (0, _extends2["default"])({
ref: contentRef,
noPadding: noPadding
// @ts-ignore
}, contentProps), navNode, asideNode, nonStdChildren);
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("style", {
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML: {
__html: "\n :host,\n #" + guid + " {\n --page-max-content-width: " + (0, _utils.wrapUnit)(curBreakPoint.maxContentWidth === Infinity ? '100%' : (0, _utils.wrapUnit)(curBreakPoint.maxContentWidth)) + ";\n " + ((0, _utils.isValidGap)(sectionGap) ? "--page-section-gap: " + (0, _utils.wrapUnit)(sectionGap) + ";" : '') + "\n " + ((0, _utils.isValidGap)(blockGap) ? "--page-block-gap: " + (0, _utils.wrapUnit)(blockGap) + ";" : '') + "\n " + ((0, _utils.isValidGap)(gridGap) ? "--page-grid-gap: " + (0, _utils.wrapUnit)(gridGap) + ";" : '') + "\n }"
}
}), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
id: guid,
ref: combinedRef,
className: pageCls,
style: pageStyle
}, others), /*#__PURE__*/_react["default"].createElement(_context["default"].Provider, {
value: {
prefix: prefix,
noPadding: noPadding,
sectionGap: sectionGap,
gridGap: gridGap,
blockGap: blockGap,
breakPoint: curBreakPoint,
maxNumberOfColumns: (0, _utils.getMaxNumberOfColumns)(breakPoints)
}
}, headerNode, defaultContent, footerNode)));
};
var RefPage = /*#__PURE__*/(0, _react.forwardRef)(Page);
RefPage.displayName = 'Page';
RefPage.defaultProps = {
prefix: 'cn-layout-',
mode: 'transparent',
breakPoints: _constant.DEFAULT_BREAK_POINTS
};
var _default = exports["default"] = RefPage;
module.exports = exports.default;
module.exports.default = exports.default;