fastlion-amis
Version:
一种MIS页面生成工具
587 lines (586 loc) • 34.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridRenderer = exports.ColProps = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var types_1 = require("../types");
var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
var sum_1 = (0, tslib_1.__importDefault)(require("lodash/sum"));
var helper_1 = require("../utils/helper");
var icons_1 = require("../components/icons");
var dom_1 = require("../utils/dom");
var icons_2 = require("@ant-design/icons");
exports.ColProps = ['lg', 'md', 'sm', 'xs'];
function fromBsClass(cn) {
if (typeof cn === 'string' && cn) {
return cn.replace(/\bcol-(xs|sm|md|lg)-(\d+)\b/g, function (_, bp, size) { return "Grid-col--" + bp + size; });
}
return cn;
}
function copProps2Class(props) {
var cns = [];
var modifiers = exports.ColProps;
modifiers.forEach(function (modifier) {
return props &&
props[modifier] &&
cns.push("Grid-col--" + modifier + (0, helper_1.ucFirst)(props[modifier]));
});
cns.length || cns.push('Grid-col--md');
return cns.join(' ');
}
var Grid = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Grid, _super);
function Grid(props) {
var _this = _super.call(this, props) || this;
_this.pageContentId = '';
_this.scrollParent = react_1.default.createRef();
_this.scrollRef = react_1.default.createRef();
_this.scrollRefChildren = react_1.default.createRef();
_this.gridRef = react_1.default.createRef();
_this.timer = null;
_this.timmerHandle = null;
_this.lastMds = [];
_this.lastScrollLeft = 0;
_this.handleClickCollpase = function () {
var _a;
var _b = _this.state, navVisible = _b.navVisible, mds = _b.mds;
if (navVisible) {
_this.lastMds = mds;
_this.lastScrollLeft = (_a = _this.scrollRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft;
_this.setState({
navVisible: !navVisible,
scrollRefLeft: 0,
mds: ["0.1%", "calc(99.9% - 12px)"]
});
}
else {
_this.setState({
navVisible: !navVisible,
scrollRefLeft: _this.lastScrollLeft,
mds: (0, tslib_1.__spreadArray)([], _this.lastMds, true)
});
}
};
var columnsArr = (Array.isArray(_this.props.columns) ? _this.props.columns.map(function (column, key) {
var _a, _b;
var hasFixedItem = (_b = (_a = column.body) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, function (_) { return _.height && _.fixedHeight; });
return hasFixedItem;
}).filter(Boolean) : []);
var fixedHeightArr = columnsArr.map(function (item) { return item.height; });
var hasFixedHeight = fixedHeightArr.length > 0;
_this.state = {
x: 0,
scrollRefLeft: 0,
scrollRefTop: 0,
mds: [],
isDrag: false,
distanceStyle: "inherit",
navVisible: true,
hasFixedHeight: hasFixedHeight,
fixedHeightArr: fixedHeightArr,
// 是否固定， 默认为true, 此字段只控制 手动切换
isFixed: true,
// isHovered: false
};
// this.showCollpase = !!props.scroll && !(isMobile() || props.distance)
_this.scrollRefMouseDown = _this.scrollRefMouseDown.bind(_this);
_this.scrollRefMouseUp = _this.scrollRefMouseUp.bind(_this);
_this.scrollRefMouseUps = _this.scrollRefMouseUps.bind(_this);
_this.antiShake = _this.antiShake.bind(_this);
_this.updateAutoFillHeight = _this.updateAutoFillHeight.bind(_this);
_this.initResizeObserver = _this.initResizeObserver.bind(_this);
return _this;
// this.updateCombinationWrapper = this.updateCombinationWrapper.bind(this);
}
Object.defineProperty(Grid.prototype, "region", {
get: function () {
var total = 0;
var regions = [];
this.props.columns.forEach(function (column) {
var _a;
total += ((_a = +(column === null || column === void 0 ? void 0 : column.md)) !== null && _a !== void 0 ? _a : 0);
(column === null || column === void 0 ? void 0 : column.md) && regions.push(+(column === null || column === void 0 ? void 0 : column.md));
});
return {
total: total,
regions: regions
};
},
enumerable: false,
configurable: true
});
Grid.prototype.antiShake = function (callBack, wait, rest) {
if (wait === void 0) { wait = 1000; }
var that = this;
return function () {
if (that.timer) {
clearTimeout(that.timer);
that.timer = null;
}
that.timer = setTimeout(function () {
callBack(rest);
}, wait);
};
};
Grid.prototype.renderChild = function (region, node, length, props) {
if (props === void 0) { props = {}; }
var _a = this.props, render = _a.render, itemRender = _a.itemRender;
return itemRender
? itemRender(node, length, this.props)
: render(region, node, props);
};
Grid.prototype.scrollRefMouseDown = function (e) {
var _this = this;
var _a;
if (((_a = this.region.regions) === null || _a === void 0 ? void 0 : _a.length) > 2)
return;
var initregion = this.region.regions[0] / this.region.total / 2;
if (e.target === this.scrollRefChildren.current) {
this.timmerHandle = setTimeout(function () {
_this.setState({ isDrag: true });
_this.gridRef.current.onmousemove = function (mouse) {
var _a, _b, _c, _d;
(_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
var x = mouse.clientX;
var y = mouse.clientY;
var mds = [];
var leftRegion = (x - e.clientX + _this.state.scrollRefLeft) / ((_b = _this.gridRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
var topRegion = (y - e.clientY + _this.state.scrollRefTop) / ((_c = _this.gridRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight);
if ((_d = _this.props) === null || _d === void 0 ? void 0 : _d.distance) {
// 控制可以下拉多大，占据屏幕多大，1为100%
if (topRegion >= 0.95 || topRegion <= initregion)
return;
mds.push(topRegion * 100 + '%');
// 控制从表最小多少
// (topRegion * 100 <= 50) ?
mds.push((1 - topRegion) * 100 + '%');
// :
// mds.push(50 + '%');
}
else {
if (leftRegion >= 0.5 || leftRegion <= initregion)
return;
mds.push(leftRegion * 100 + '%');
mds.push((1 - leftRegion) * 100 + '%');
}
_this.setState({ mds: mds });
};
}, 150);
}
};
// 鼠标左键抬起时清除拖动事件，并且将滑块当前位置进行记录
Grid.prototype.scrollRefMouseUp = function (e) {
var _a, _b;
if (this.props.scroll) {
if (!this.state.isDrag && !((_a = this.props) === null || _a === void 0 ? void 0 : _a.distance) && e.target === this.scrollRefChildren.current) {
this.gridRef.current.onmousemove = "";
// if (this.state.scrollRefLeft > 20) {
// this.setState({
// scrollRefLeft: 0,
// mds: ["0.1%", "calc(99% - 20px)"]
// });
// } else {
// this.setState({
// scrollRefLeft: 160,
// mds: ["16.6667%", "83.3333%"]
// });
// }
}
else {
document.body.dispatchEvent(new Event(types_1.ResizeEvent.DRAGCONTENTRESIZE, { bubbles: true }));
if ((_b = this.props) === null || _b === void 0 ? void 0 : _b.distance) {
this.setState({
scrollRefTop: this.scrollRef.current.offsetTop,
isDrag: false
});
}
else {
this.setState({
scrollRefLeft: this.scrollRef.current.offsetLeft,
isDrag: false
});
}
}
this.gridRef.current.onmousemove = "";
}
clearTimeout(this.timmerHandle);
};
// 全局鼠标左键抬起时清除拖动事件
Grid.prototype.scrollRefMouseUps = function (e) {
this.gridRef.current.onmousemove = function () { };
};
// renderLine() {
// const { classnames: cx } = this.props;
// return (
// <div className={cx('Grid-line')} ref={this.scrollRef} >
// <div className={'collpase'}
// ref={this.scrollRefChildren}
// onMouseEnter={() => this.setState({ isHovered: true })}
// onMouseLeave={() => {
// if (!this.state.isDrag) {
// this.setState({ isHovered: false })
// }
// }}
// >
// {(this.state.showLeft === undefined || this.state.showLeft === true) && (
// <CaretLeftOutlined
// className={`left ${this.state.isHovered ? 'left-hovered' : ''}`}
// onClick={(e) => {
// e.stopPropagation()
// if (this.state.showLeft == undefined) {
// this.setState({ showLeft: false })
// } else {
// this.setState({ showLeft: undefined, scrollRefLeft: 21 })
// }
// }}
// />
// )}
// {(this.state.showLeft === undefined || this.state.showLeft === false) && (
// <CaretRightOutlined
// className={`right ${this.state.isHovered ? 'right-hovered' : ''}`}
// onClick={(e) => {
// e.stopPropagation()
// if (this.state.showLeft == undefined) {
// this.setState({ showLeft: true })
// } else {
// this.setState({ showLeft: undefined, scrollRefLeft: 21 })
// }
// // 如果容器下有固定到右侧的弹窗容器，才进行操作
// const hasPinModal = domUtils.closest(this.gridRef.current as HTMLElement, `.main-page-content.${this.pageContentId}`)?.querySelector('.dialog-pin-right.dialog-fix-right');
// if (hasPinModal) {
// const targetEvent = this.state.showLeft == undefined ? ResizeEvent.RESET_MAIN_PAGE_WIDTH + this.pageContentId : ResizeEvent.STOP_RESIZE_AFTER_PIN + this.pageContentId;
// document.body.dispatchEvent(new Event(targetEvent));
// }
// }}
// />
// )}
// </div>
// </div>
// )
// }
Grid.prototype.handleToggleAffix = function (e) {
var isFixed = this.state.isFixed;
var parentDom = helper_1.domUtils.closest(e.target, '.manual-fix-grid');
if (parentDom) {
parentDom.style.position = isFixed ? 'unset' : 'sticky';
}
this.setState({
isFixed: !isFixed
});
};
Grid.prototype.renderColumn = function (column, key, length) {
var _a, _b;
var _this = this;
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
var colProps = (0, pick_1.default)(column, exports.ColProps);
colProps = (0, tslib_1.__assign)({}, colProps);
var _v = this.props, cx = _v.classnames, formMode = _v.formMode, subFormMode = _v.subFormMode, subFormHorizontal = _v.subFormHorizontal, formHorizontal = _v.formHorizontal, __ = _v.translate, scroll = _v.scroll, className = _v.className, distance = _v.distance, ns = _v.classPrefix, _w = _v.autoHeight, autoHeight = _w === void 0 ? 0 : _w;
var _x = this.state, mds = _x.mds, scrollRefLeft = _x.scrollRefLeft;
var style = {};
var statistics = (_g = (_f = ((_e = (_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.columns) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.body)[0]) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.name;
// 如果高度固定了不设置高度 防止冲突
if (this.state.hasFixedHeight) {
var fixedHeightItems = distance ? (_h = this.state.fixedHeightArr.filter(Boolean)) !== null && _h !== void 0 ? _h : [] : [];
// 多减5px 防止出现滚动条
var resetHeight = ((0, sum_1.default)(fixedHeightItems) + 5) + 'px';
if (column.fixedHeight) {
style.height = column.height ? column.height + "px" : "calc(" + this.state.distanceStyle + " - " + resetHeight + ")";
}
else {
style.height = "calc(" + this.state.distanceStyle + " - " + resetHeight + ")";
}
style.overflowY = 'auto';
}
if (scroll && ((_j = this.region.regions) === null || _j === void 0 ? void 0 : _j.length) <= 2) {
if ((_k = this.props) === null || _k === void 0 ? void 0 : _k.distance) {
style = (mds === null || mds === void 0 ? void 0 : mds.length) > 0 ? {
flex: '0 0 ' + mds[key],
maxHeight: mds[key],
height: mds[key],
maxWidth: +100 + "%"
} : {
flex: '0 0 ' + 50 + "%",
maxHeight: +50 + "%",
height: (0, helper_1.isMobile)() ? '50%' : 'inherit'
};
}
else {
style = (mds === null || mds === void 0 ? void 0 : mds.length) > 0 ? {
flex: '0 0 ' + mds[key],
maxWidth: mds[key],
minWidth: '12px',
} : {
flex: '0 0 ' + (this.region.regions[key] / this.region.total * 100 + '%'),
maxWidth: (this.region.regions[key] / this.region.total * 100 + '%')
};
}
}
// 如果是垂直模式 且配置了自动分配高度，则将高度设置为自动高度
if (autoHeight && distance) {
style = { flex: '0', height: 'auto' };
}
if (key === 0 && scroll) {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { key: key, style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, style), { position: 'relative', height: !(0, helper_1.isMobile)() && scroll && !distance && ((_l = this.gridRef.current) === null || _l === void 0 ? void 0 : _l.closest("." + ns + "Modal")) ? 'unset' : ((_m = style['height']) !== null && _m !== void 0 ? _m : '100%') }), ref: this.scrollParent, className: cx(copProps2Class(colProps), fromBsClass(column.columnClassName), (_a = {},
_a["Grid-col--v" + (0, helper_1.ucFirst)(column.valign)] = column.valign,
_a['grid-item'] = className === null || className === void 0 ? void 0 : className.includes('grid-item'),
_a['mobile-grid-item'] = (0, helper_1.isMobile)(),
_a['Grid-item--combination'] = !(0, helper_1.isMobile)() && scroll && !distance && !(className === null || className === void 0 ? void 0 : className.includes('Combination')),
_a['scroll-grid-child-item'] = !(0, helper_1.isMobile)() && scroll && !distance,
_a['inline-grid-item'] = (0, helper_1.isMobile)() && column.mobLayout,
// 如果有固定项配置，且只配置了一个固定项，则将容器设置为block
_a['Grid--block'] = this.state.hasFixedHeight && this.props.distance,
// 是否有配置固定
_a['grid-item-fixed'] = Number((_o = column.isFixed) !== null && _o !== void 0 ? _o : 0) > 0,
// 配置了 用户手动切换固定的容器样式
_a['manual-fix-grid'] = Number((_p = column.isFixed) !== null && _p !== void 0 ? _p : 0) === 2,
_a)) },
Number((_q = column.isFixed) !== null && _q !== void 0 ? _q : 0) === 2 ? (react_1.default.createElement("div", { className: "affix-wrapper " + (this.state.isFixed ? 'fixed' : ''), onClick: function (e) { return _this.handleToggleAffix(e); } },
react_1.default.createElement(icons_1.Icon, { icon: "#icon-tooltool_hold", symbol: true, className: "icon" }))) : null,
this.renderChild("column/" + key, column.body || '', length, {
formMode: column.mode || subFormMode || formMode,
formHorizontal: column.horizontal || subFormHorizontal || formHorizontal,
bodyName: statistics,
// style: isMobile() && !distance ? { flex: 1 } : {}
}),
react_1.default.createElement("span", { className: cx('Grid--slider', {
'slider-closed': !this.state.navVisible
}), ref: this.scrollRef },
((_r = this.props) === null || _r === void 0 ? void 0 : _r.distance) ?
react_1.default.createElement(icons_1.Icon, { icon: "up-and-down-arrow", className: "icon" }) : null,
react_1.default.createElement("div", { className: cx('Grid--sliders'), ref: this.scrollRefChildren })),
(0, helper_1.isMobile)() || distance ? null : react_1.default.createElement("div", { onClick: function (e) {
e.stopPropagation();
_this.handleClickCollpase();
}, className: "grid-collpase " + (this.state.navVisible ? '' : 'closed') }, this.state.navVisible ? react_1.default.createElement("span", null,
react_1.default.createElement(icons_2.DoubleLeftOutlined, { style: { fontSize: '11px' } }),
"\u6536\u7F29") : react_1.default.createElement("span", null,
react_1.default.createElement(icons_2.DoubleRightOutlined, { style: { fontSize: '11px' } }),
"\u5C55\u5F00")))));
}
return (react_1.default.createElement("div", { key: key, style: (0, tslib_1.__assign)({}, style), className: cx(copProps2Class(colProps), fromBsClass(column.columnClassName), (_b = {},
_b["Grid-col--v" + (0, helper_1.ucFirst)(column.valign)] = column.valign,
_b['grid-item'] = className === null || className === void 0 ? void 0 : className.includes('grid-item'),
_b['mobile-grid-item'] = (0, helper_1.isMobile)(),
_b['Grid-item--combination'] = !(0, helper_1.isMobile)() && scroll && !distance && !(className === null || className === void 0 ? void 0 : className.includes('Combination')),
_b['scroll-grid-child-item'] = !(0, helper_1.isMobile)() && scroll && !distance,
_b['inline-grid-item'] = (0, helper_1.isMobile)() && column.mobLayout,
// 如果有固定项配置，且只配置了一个固定项，则将容器设置为block
_b['Grid--block'] = this.state.hasFixedHeight && this.props.distance,
// 固定grid在顶部
_b['grid-item-fixed'] = Number((_s = column.isFixed) !== null && _s !== void 0 ? _s : 0) > 0,
// 配置了 用户手动切换固定的容器样式
_b['manual-fix-grid'] = Number((_t = column.isFixed) !== null && _t !== void 0 ? _t : 0) === 2,
_b)) },
react_1.default.createElement("div", { className: 'grid-relative-wrapper' },
Number((_u = column.isFixed) !== null && _u !== void 0 ? _u : 0) === 2 ? (react_1.default.createElement("div", { className: "affix-wrapper " + (this.state.isFixed ? 'fixed' : ''), onClick: function (e) { return _this.handleToggleAffix(e); } },
react_1.default.createElement(icons_1.Icon, { icon: "#icon-tooltool_hold", symbol: true, className: "icon" }))) : null,
this.renderChild("column/" + key, column.body || '', length, {
formMode: column.mode || subFormMode || formMode,
formHorizontal: column.horizontal || subFormHorizontal || formHorizontal,
bodyName: statistics
}))));
};
Grid.prototype.renderColumns = function (columns) {
var _this = this;
// // 根据md分成的行分布数组
// const mdMatrix = create2DArrayByMaxSum(this.props.columns.map(_ => +(_?.md || 12)), 12)
// 计算对应md的行数
// const IndexToRowKey = (() => {
// const result = {}
// mdMatrix.map((row, index) => row.map((columns: any, colIndex: any) => { result[index + colIndex] = index + 1 }))
// return result
// })()
return Array.isArray(columns)
? columns.map(function (column, key) {
var _a, _b, _c, _d, _e, _f, _g, _h;
return _this.renderColumn((0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), {
// rowKey: IndexToRowKey[key], rowCount: mdMatrix.length,
fixedHeight: !!((_b = (_a = column === null || column === void 0 ? void 0 : column.body) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, function (_) { return _.fixedHeight; })), height: (_e = (_d = (_c = column.body) === null || _c === void 0 ? void 0 : _c.find) === null || _d === void 0 ? void 0 : _d.call(_c, function (_) { return _.height; })) === null || _e === void 0 ? void 0 : _e['height'], isFixed: (_h = (_g = (_f = column.body) === null || _f === void 0 ? void 0 : _f.find) === null || _g === void 0 ? void 0 : _g.call(_f, function (_) { return !isNaN(Number(_.isFixed)); })) === null || _h === void 0 ? void 0 : _h['isFixed'] }), key, columns.length);
})
: null;
};
Grid.prototype.componentDidMount = function () {
var _a, _b;
var scroll = this.props.scroll;
if (scroll) {
this.setState({
scrollRefLeft: (_a = this.scrollRef.current) === null || _a === void 0 ? void 0 : _a.offsetLeft,
scrollRefTop: this.scrollRef.current.offsetTop
});
}
this.updateAutoFillHeight();
this.gridRef.current.addEventListener('mousedown', this.scrollRefMouseDown);
this.gridRef.current.addEventListener('mouseup', this.scrollRefMouseUp);
document.addEventListener('mouseup', this.scrollRefMouseUps);
window.addEventListener('resize', this.updateAutoFillHeight);
// 用于解决AI助手固定右侧的时候显示异常
var pageContentDom = helper_1.domUtils.closest(this.gridRef.current, '.main-page-content');
var pageContentIdMatch = (_b = pageContentDom === null || pageContentDom === void 0 ? void 0 : pageContentDom.className.split(' ').find(function (item) { return item.includes('page-content-id_'); })) !== null && _b !== void 0 ? _b : '';
this.pageContentId = pageContentIdMatch;
// 如果子容器有配置固定顶部，则添加父容器的监听器，如果整体高度变化，重新赋值top
this.initResizeObserver();
// 如果是pc端的组合页。做一下组合页大屏的特殊处理，让顶层容器的自动分配高度去掉
// this.updateCombinationWrapper();
};
Grid.prototype.componentWillUnmount = function () {
this.gridRef.current.removeEventListener('mousedown', this.scrollRefMouseDown);
this.gridRef.current.removeEventListener('mouseup', this.scrollRefMouseUp);
document.removeEventListener('mouseup', this.scrollRefMouseUps);
window.removeEventListener('resize', this.updateAutoFillHeight);
this.closeResizeObserver();
};
// updateCombinationWrapper() {
// if (!isMobile()) {
// const gridItems = this.gridRef.current.querySelectorAll('.grid-item');
// const { classPrefix: ns } = this.props;
// Array.from(gridItems).forEach((item: HTMLElement) => {
// const combinationPanel = item.querySelector(`.${ns}Panel.${ns}Panel-Combination`);
// const classList = Array.from(combinationPanel?.classList ?? []).join('.');
// if (combinationPanel && (!classList.includes('.h-') || classList.includes('.h-full'))) {
// const firstGrid = combinationPanel.querySelector(`.${ns}Grid.${ns}Grid-item-search`) as HTMLElement;
// if (firstGrid) {
// firstGrid.style.flex = '0';
// }
// }
// })
// }
// }
Grid.prototype.updateAutoFillHeight = function () {
var _a;
if (this.props.distance) {
// 获取整个屏幕的高度
var viewportHeight = (0, helper_1.isMobile)() ? document.body.clientHeight : window.innerHeight;
// 获取当前元素的头部位置
var distanceTop = this.gridRef.current.getBoundingClientRect().top;
var formWizard = (_a = document.getElementById("form-wizard")) === null || _a === void 0 ? void 0 : _a.parentElement;
// 获取Model
var Modal = document.getElementsByClassName("amis-dialog-widget");
var parentNode_1 = this.gridRef.current.parentElement;
var footerHeight_1 = 0;
var contentBottom_1 = 0;
if (Modal) {
for (var index = 0; index < Modal.length; index++) {
if (Modal[index].contains(this.gridRef.current)) {
Modal[index].childNodes.forEach(function (item) {
if (item.className.includes("Modal-content")) {
item.childNodes.forEach(function (i) {
if (i.className.includes("Modal-footer")) {
footerHeight_1 = footerHeight_1 + i.offsetHeight;
}
if (i.className.includes("Modal-body")) {
// 循环获取在model中当前元素所有的祖先元素到Modal-body的内边距和底部border的宽度
while (parentNode_1 !== i) {
var paddingBottom = (0, dom_1.getStyleNumber)(parentNode_1, 'padding-bottom');
var borderBottom = (0, dom_1.getStyleNumber)(parentNode_1, 'border-bottom-width');
contentBottom_1 = contentBottom_1 + paddingBottom + borderBottom;
parentNode_1 = parentNode_1.parentElement;
}
}
});
}
});
}
}
}
if (formWizard && formWizard.contains(this.gridRef.current)) {
formWizard.childNodes.forEach(function (m) {
if (m.className.includes("Wizard-footer")) {
footerHeight_1 = +m.offsetHeight;
}
});
}
// 循环计算父级节点的 padding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
var allParentPaddingBottom = 0;
while (parentNode_1) {
var paddingBottom = (0, dom_1.getStyleNumber)(parentNode_1, 'padding-bottom');
var borderBottom = (0, dom_1.getStyleNumber)(parentNode_1, 'border-bottom-width');
allParentPaddingBottom =
allParentPaddingBottom + paddingBottom + borderBottom;
parentNode_1 = parentNode_1.parentElement;
}
var finalHeight = viewportHeight - distanceTop - footerHeight_1 - contentBottom_1 - parentNode_1;
if (finalHeight > 700) {
this.setState({
distanceStyle: finalHeight + "px"
});
}
else {
this.setState({
distanceStyle: document.body.clientHeight - 38 + 'px'
});
}
}
};
// 如果子容器有配置固定顶部，则添加父容器的监听器，如果整体高度变化，重新赋值top
Grid.prototype.initResizeObserver = function () {
var _a = this.props, columns = _a.columns, ns = _a.classPrefix;
var fixConfigs = columns.map(function (column) { var _a, _b, _c; return (_c = (_b = (_a = column.body) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, function (_) { return !isNaN(Number(_.isFixed)); })) === null || _c === void 0 ? void 0 : _c['isFixed']; }).filter(Boolean);
var fixConfig = fixConfigs[0];
// 如果有配置吸顶
if (fixConfig) {
var parentDom = this.gridRef.current;
var initZIndex_1 = 5;
var resizeObserver = new ResizeObserver(function (entries) {
entries.forEach(function (entry) {
var _a, _b;
var gridItems = Array.from((_b = (_a = entry.target) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.grid-item.grid-item-fixed')) !== null && _b !== void 0 ? _b : []);
var gridHeights = gridItems.map(function (item) { return item.offsetHeight; });
var height = 0;
gridItems.forEach(function (item, index) {
var _a;
var finalZIndex = initZIndex_1 - index < 1 ? 1 : initZIndex_1 - index;
height += (_a = gridHeights[index - 1]) !== null && _a !== void 0 ? _a : 0;
item.style.top = height + 'px';
item.style.zIndex = "" + finalZIndex;
});
});
});
resizeObserver.observe(parentDom);
this.resizeObserver = resizeObserver;
}
};
Grid.prototype.closeResizeObserver = function () {
var _a, _b;
if (this.resizeObserver) {
(_b = (_a = this.resizeObserver).unobserve) === null || _b === void 0 ? void 0 : _b.call(_a, this.gridRef.current);
}
};
Grid.prototype.render = function () {
var _a;
var _b = this.props, className = _b.className, cx = _b.classnames, gap = _b.gap, vAlign = _b.valign, hAlign = _b.align, distance = _b.distance, scroll = _b.scroll, style = _b.style, fullScreen = _b.fullScreen;
var _c = this.state, distanceStyle = _c.distanceStyle, scrollRefLeft = _c.scrollRefLeft;
// 顶级的得让他滚动
// const isTopGrid = this.gridRef?.current?.parentElement?.className?.include?.('Page-body')
// console.log(isTopGrid)
return (react_1.default.createElement("div", { ref: this.gridRef, className: cx('Grid', (_a = {},
_a["Grid--" + gap] = gap,
_a["Grid--v" + (0, helper_1.ucFirst)(vAlign)] = vAlign,
_a["Grid--h" + (0, helper_1.ucFirst)(hAlign)] = hAlign,
_a['Distance'] = !this.state.hasFixedHeight && distance,
_a['Grid--combination'] = !(0, helper_1.isMobile)() && scroll && !distance && !(className === null || className === void 0 ? void 0 : className.includes('Combination')),
_a['Grid-item-search'] = scrollRefLeft > 20 ? false : true,
_a['scroll-grid-item'] = !(0, helper_1.isMobile)() && scroll && !distance,
_a), className),
// Jay
style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, style), { maxHeight: distanceStyle, height: distanceStyle, overflow: '' }) }, this.renderColumns(this.props.columns)));
};
Grid.propsList = ['columns'];
return Grid;
}(react_1.default.Component));
exports.default = Grid;
var GridRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(GridRenderer, _super);
function GridRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
GridRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'grid'
})
], GridRenderer);
return GridRenderer;
}(Grid));
exports.GridRenderer = GridRenderer;
//# sourceMappingURL=./renderers/Grid.js.map