@pisell/layout
Version:
基于 Fusion 设计系统的自然布局体系
153 lines (149 loc) • 8.29 kB
JavaScript
;
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 _isValidArray = _interopRequireDefault(require("is-valid-array"));
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(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; }
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 = (0, _isValidArray["default"])(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"])('fd-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: 'fd-layout-',
mode: 'lining',
breakPoints: _constant.DEFAULT_BREAK_POINTS
};
var _default = RefPage;
exports["default"] = _default;