fastlion-amis
Version:
一种MIS页面生成工具
368 lines (367 loc) • 18.9 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 pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
var helper_1 = require("../utils/helper");
var icons_1 = require("../components/icons");
var dom_1 = require("../utils/dom");
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);
// static defaultProps = {
// scroll: true
// }
function Grid(props) {
var _this = _super.call(this, props) || this;
_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.state = {
x: 0,
scrollRefLeft: 0,
scrollRefTop: 0,
mds: [],
isDrag: false,
distanceStyle: "0px",
};
_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);
return _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: ["1%", "99%"]
});
this.scrollParent.current.style.paddingRight = "0";
this.scrollRef.current.style.right = "-8px";
}
else {
this.setState({
scrollRefLeft: 160,
mds: ["16.6667%", "83.3333%"]
});
this.scrollParent.current.style.padding = "0rem 0.5rem";
this.scrollRef.current.style.right = "0";
}
}
else {
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 () { };
};
Grid.prototype.renderColumn = function (column, key, length) {
var _a, _b;
var _c, _d, _e, _f, _g, _h, _j, _k;
var colProps = (0, pick_1.default)(column, exports.ColProps);
colProps = (0, tslib_1.__assign)({}, colProps);
var _l = this.props, cx = _l.classnames, formMode = _l.formMode, subFormMode = _l.subFormMode, subFormHorizontal = _l.subFormHorizontal, formHorizontal = _l.formHorizontal, __ = _l.translate, scroll = _l.scroll, className = _l.className;
var mds = this.state.mds;
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 (scroll && ((_h = this.region.regions) === null || _h === void 0 ? void 0 : _h.length) <= 2) {
if ((_j = this.props) === null || _j === void 0 ? void 0 : _j.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]
} : {
flex: '0 0 ' + (this.region.regions[key] / this.region.total * 100 + '%'),
maxWidth: (this.region.regions[key] / this.region.total * 100 + '%')
};
}
}
if (key === 0 && scroll) {
return react_1.default.createElement("div", { key: key, style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, style), { position: 'relative' }), 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)) },
this.renderChild("column/" + key, column.body || '', length, {
formMode: column.mode || subFormMode || formMode,
formHorizontal: column.horizontal || subFormHorizontal || formHorizontal,
statistics: statistics
}),
react_1.default.createElement("span", { className: cx('Grid--slider'), ref: this.scrollRef },
((_k = this.props) === null || _k === void 0 ? void 0 : _k.distance) ?
react_1.default.createElement(icons_1.Icon, { icon: "up-and-down-arrow", className: "icon" })
:
this.state.scrollRefLeft > 20 ?
react_1.default.createElement(icons_1.Icon, { icon: "left-double-arrow", className: "icon" })
:
react_1.default.createElement(icons_1.Icon, { icon: "right-double-arrow", className: "icon" }),
"\u6536\u7F29",
react_1.default.createElement("div", { className: cx('Grid--sliders'), ref: this.scrollRefChildren })));
}
return react_1.default.createElement("div", { key: key, style: 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)) }, this.renderChild("column/" + key, column.body || '', length, {
formMode: column.mode || subFormMode || formMode,
formHorizontal: column.horizontal || subFormHorizontal || formHorizontal,
statistics: statistics
}));
};
Grid.prototype.renderColumns = function (columns) {
var _this = this;
return Array.isArray(columns)
? columns.map(function (column, key) {
return _this.renderColumn(column, key, columns.length);
})
: null;
};
Grid.prototype.componentDidMount = function () {
var _a;
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);
};
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);
};
Grid.prototype.updateAutoFillHeight = function () {
var _a;
if (this.props.distance) {
// 获取整个屏幕的高度
var viewportHeight = 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 paddingButtom = (0, dom_1.getStyleNumber)(parentNode_1, 'padding-bottom');
var borderBottom = (0, dom_1.getStyleNumber)(parentNode_1, 'border-bottom-width');
contentBottom_1 = contentBottom_1 + paddingButtom + 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;
}
});
}
// 循环计算父级节点的 pddding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
var allParentPaddingButtom = 0;
while (parentNode_1) {
var paddingButtom = (0, dom_1.getStyleNumber)(parentNode_1, 'padding-bottom');
var borderBottom = (0, dom_1.getStyleNumber)(parentNode_1, 'border-bottom-width');
allParentPaddingButtom =
allParentPaddingButtom + paddingButtom + 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'
});
}
}
};
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, style = _b.style;
var distanceStyle = this.state.distanceStyle;
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'] = distance,
_a), className),
// Jay
style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, style), { maxHeight: distanceStyle, height: distanceStyle }) }, 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