fastlion-amis
Version:
一种MIS页面生成工具
294 lines (293 loc) • 17.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_dom_1 = require("react-dom");
var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
var Overlay_1 = (0, tslib_1.__importDefault)(require("../../components/Overlay"));
var PopOver_1 = (0, tslib_1.__importDefault)(require("../../components/PopOver"));
var Modal_1 = (0, tslib_1.__importDefault)(require("../../components/Modal"));
var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
var TooltipWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/TooltipWrapper"));
var helper_1 = require("../../utils/helper");
var tpl_1 = require("../../utils/tpl");
var icons_1 = require("../../components/icons");
var RootClose_1 = require("../../utils/RootClose");
var ColumnToggler = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ColumnToggler, _super);
function ColumnToggler(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isOpened: false,
enableSorting: false,
tempColumns: (0, cloneDeep_1.default)(_this.props.columns)
};
_this.open = _this.open.bind(_this);
_this.close = _this.close.bind(_this);
_this.toggle = _this.toggle.bind(_this);
_this.domRef = _this.domRef.bind(_this);
_this.dragRef = _this.dragRef.bind(_this);
// Jay
_this.reset = _this.reset.bind(_this);
_this.canConfirmFetch = false;
return _this;
}
ColumnToggler.prototype.componentDidUpdate = function (prevProps, preState) {
if (prevProps.columns !== this.props.columns) {
this.setState({ tempColumns: this.props.columns });
}
};
ColumnToggler.prototype.componentDidMount = function () {
if (this.props.defaultIsOpened) {
this.setState({
isOpened: true
});
}
};
ColumnToggler.prototype.componentWillUnmount = function () {
this.destroyDragging();
};
ColumnToggler.prototype.domRef = function (ref) {
this.target = ref;
};
ColumnToggler.prototype.toggle = function (e) {
e.preventDefault();
this.setState({
isOpened: !this.state.isOpened
});
};
ColumnToggler.prototype.open = function () {
this.setState({
isOpened: true
});
};
ColumnToggler.prototype.close = function () {
this.setState({
isOpened: false,
enableSorting: false,
tempColumns: (0, cloneDeep_1.default)(this.props.columns)
});
};
ColumnToggler.prototype.swapColumnPosition = function (oldIndex, newIndex) {
var columns = this.state.tempColumns;
// 有两种逻辑：插入和调换
// 插入
var old = columns.splice(oldIndex, 1)[0];
// columns.splice(newIndex < oldIndex ? newIndex : newIndex + 1, 0, old)
columns.splice(newIndex, 0, old);
// 调换两个顺序
// columns[oldIndex] = columns.splice(newIndex, 1, columns[oldIndex])[0];
this.setState({ tempColumns: columns });
};
ColumnToggler.prototype.updateToggledColumn = function (column, index, value, shift) {
var tempColumns = this.state.tempColumns.concat();
tempColumns.splice(index, 1, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), {
// Jay
pristine: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column.pristine), { hidden: !value }), toggled: value }));
this.canConfirmFetch = true;
this.setState({ tempColumns: tempColumns });
};
ColumnToggler.prototype.reset = function () {
// Jay
// const { enableSorting } = this.state
// const tempColumns = this.state.tempColumns.concat();
// if (!enableSorting) {
// // 显示列重置，全部设置为hidden为false
// tempColumns.forEach(column => {
// column.pristine = { ...column.pristine, hidden: column.pristine.canSet === false ? true : false };
// column.toggled = column.pristine.canSet === false ? false : true
// })
// this.setState({ tempColumns });
// } else {
// const tempArr: any[] = []
// tempColumns.forEach(column => {
// tempArr[this.initIndexObj[column.name]] = column
// })
// this.setState({ tempColumns: tempArr });
// }
this.canConfirmFetch = false;
var _a = this.props, getRawColumns = _a.getRawColumns, onColumnToggle = _a.onColumnToggle;
if (getRawColumns) {
this.setState({ tempColumns: getRawColumns() }, function () {
onColumnToggle && onColumnToggle(undefined, {}, true);
});
}
};
ColumnToggler.prototype.dragRef = function (ref) {
var enableSorting = this.state.enableSorting;
var draggable = this.props.draggable;
if (enableSorting && draggable && ref) {
this.initDragging();
}
};
ColumnToggler.prototype.initDragging = function () {
var _this = this;
var dom = (0, react_dom_1.findDOMNode)(this);
var ns = this.props.classPrefix;
this.sortable = new sortablejs_1.default(dom.querySelector("." + ns + "ColumnToggler-modal-content"), {
group: "ColumnToggler-modal-content",
animation: 150,
handle: "." + ns + "ColumnToggler-menuItem-dragBar",
ghostClass: ns + "ColumnToggler-menuItem--dragging",
onEnd: function (e) {
if (e.newIndex === e.oldIndex) {
return;
}
var parent = e.to;
if (e.oldIndex < parent.childNodes.length - 1) {
parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
}
else {
parent.appendChild(e.item);
}
_this.canConfirmFetch = true;
_this.swapColumnPosition(e.oldIndex, e.newIndex);
}
});
};
ColumnToggler.prototype.destroyDragging = function () {
this.sortable && this.sortable.destroy();
};
ColumnToggler.prototype.onConfirm = function () {
var tempColumns = this.state.tempColumns;
var onColumnToggle = this.props.onColumnToggle;
var saveCols = {};
// Jay
tempColumns.forEach(function (col, index) {
if (col.type === 'operation')
return;
saveCols[col.name] = {
index: index,
// 0:false , 1:true
hidden: col.pristine.hidden ? 1 : col.toggled ? 0 : 1
};
});
onColumnToggle && onColumnToggle((0, tslib_1.__spreadArray)([], tempColumns, true), saveCols, this.canConfirmFetch);
this.setState({
isOpened: false,
enableSorting: false
});
};
ColumnToggler.prototype.renderOuter = function () {
var _this = this;
var _a;
var _b = this.props, popOverContainer = _b.popOverContainer, cx = _b.classnames, ns = _b.classPrefix, children = _b.children, closeOnClick = _b.closeOnClick, closeOnOutside = _b.closeOnOutside;
var body = (react_1.default.createElement(RootClose_1.RootClose, { disabled: !this.state.isOpened, onRootClose: closeOnOutside !== false ? this.close : helper_1.noop }, function (ref) {
return (react_1.default.createElement("ul", { className: cx('ColumnToggler-menu'), onClick: closeOnClick ? _this.close : helper_1.noop, ref: ref }, children));
}));
if (popOverContainer) {
return (react_1.default.createElement(Overlay_1.default, { container: popOverContainer, target: function () { return _this.target; }, show: true },
react_1.default.createElement(PopOver_1.default, { overlay: true, onHide: this.close, classPrefix: ns, className: cx('ColumnToggler-popover'), style: { minWidth: (_a = this.target) === null || _a === void 0 ? void 0 : _a.offsetWidth } }, body)));
}
return body;
};
ColumnToggler.prototype.renderModal = function () {
var _this = this;
var _a = this.props, render = _a.render, cx = _a.classnames, ns = _a.classPrefix, modalContainer = _a.modalContainer, draggable = _a.draggable, overlay = _a.overlay, __ = _a.translate;
var _b = this.state, enableSorting = _b.enableSorting, tempColumns = _b.tempColumns;
// Jay
var controlShowColsCount = 0;
var canSortColsCount = 0;
Array.isArray(tempColumns) && tempColumns.forEach(function (col) {
if (col.type === 'operation' ? false : col.pristine.canSet !== false) {
controlShowColsCount++;
}
if (!col.fixed && col.pristine.canSet !== false) {
canSortColsCount++;
}
});
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Modal_1.default, { size: "lg", closeOnEsc: true, onHide: this.close, show: this.state.isOpened, contentClassName: cx('ColumnToggler-modal'), container: modalContainer || this.target, overlay: typeof overlay === 'boolean' ? overlay : false },
react_1.default.createElement("header", { className: cx('ColumnToggler-modal-header') },
react_1.default.createElement("span", { className: cx('ColumnToggler-modal-title') }, "\u5217\u8BBE\u7F6E"),
react_1.default.createElement("a", { "data-tooltip": __('Dialog.close'), "data-position": "left", className: cx('Modal-close'), onClick: this.close },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))),
react_1.default.createElement("ul", { className: cx('ColumnToggler-modal-content'), ref: this.dragRef }, controlShowColsCount === 0 ? react_1.default.createElement("li", { style: { marginLeft: 5, fontSize: 13 } }, "\u5F53\u524D\u6CA1\u6709\u53EF\u63A7\u5236\u663E\u9690\u7684\u5217") :
Array.isArray(tempColumns)
? tempColumns.map(function (column, index) { return column.type !== 'operation' ? (react_1.default.createElement(TooltipWrapper_1.default, { tooltipClassName: cx('ColumnToggler-tooltip'), placement: "top", tooltip: column.label || '', trigger: enableSorting ? [] : 'hover', key: column.index },
react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem'), key: column.index,
// Jay 固定列不允许排序，操作列不能控制显隐，canSet为false不能设置显隐和排序
style: { display: ((enableSorting && draggable && column.fixed) || column.pristine.canSet === false) ? 'none' : 'block' } }, enableSorting && draggable && tempColumns.length > 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("a", { className: cx('ColumnToggler-menuItem-dragBar') },
react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: cx('icon') })),
react_1.default.createElement("span", null, column.label ? render('tpl', column.label) : null))) : (react_1.default.createElement(Checkbox_1.default, { size: "sm", classPrefix: ns,
// checked={column.toggled}
checked: column.pristine.hidden !== undefined ? !column.pristine.hidden : true, disabled: !column.toggable || enableSorting, onChange: _this.updateToggledColumn.bind(_this, column, index) }, column.label ? render('tpl', column.label) : null))))) : null; })
: null),
react_1.default.createElement("footer", { className: cx('ColumnToggler-modal-footer') },
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { className: cx("ColumnToggler-modeSelect", {
'is-actived': !enableSorting
}), onClick: function () { return _this.setState({ enableSorting: false }); }, level: "link" }, __('Table.toggleColumn')),
react_1.default.createElement(Button_1.default, { className: cx("ColumnToggler-modeSelect", {
'is-actived': enableSorting
}), onClick: function () {
return _this.setState({ enableSorting: true }, function () {
return _this.state.enableSorting &&
_this.props.draggable &&
_this.initDragging();
});
}, level: "link",
// Jay
// disabled={tempColumns.length < 2}
disabled: canSortColsCount < 2 }, __('sort'))),
react_1.default.createElement("div", { style: { display: 'flex' } },
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: "sm", onClick: this.close }, __('cancel'))),
react_1.default.createElement("div", { style: { margin: '0 10px' } },
react_1.default.createElement(Button_1.default, { size: "sm", onClick: this.reset }, __('resetSettings'))),
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { level: "primary", size: "sm", onClick: this.onConfirm }, __('confirm'))))))));
};
ColumnToggler.prototype.render = function () {
var _a = this.props, tooltip = _a.tooltip, placement = _a.placement, tooltipContainer = _a.tooltipContainer, tooltipTrigger = _a.tooltipTrigger, tooltipRootClose = _a.tooltipRootClose, disabledTip = _a.disabledTip, block = _a.block, disabled = _a.disabled, btnDisabled = _a.btnDisabled, btnClassName = _a.btnClassName, size = _a.size, label = _a.label, level = _a.level, primary = _a.primary, className = _a.className, cx = _a.classnames, align = _a.align, iconOnly = _a.iconOnly, icon = _a.icon, isActived = _a.isActived, data = _a.data, draggable = _a.draggable, hideExpandIcon = _a.hideExpandIcon;
var button = (react_1.default.createElement("button", { onClick: this.toggle, disabled: disabled || btnDisabled, className: cx('Button', btnClassName, typeof level === 'undefined'
? 'Button--default'
: level
? "Button--" + level
: '', {
'Button--block': block,
'Button--primary': primary,
'Button--iconOnly': iconOnly
}, size ? "Button--" + size : '') },
icon ? (typeof icon === 'string' ? (react_1.default.createElement("i", { className: cx(icon, 'm-r-xs') })) : (icon)) : null,
typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label,
hideExpandIcon || draggable ? null : (react_1.default.createElement("span", { className: cx('ColumnToggler-caret') },
react_1.default.createElement(icons_1.Icon, { icon: "caret", className: "icon" })))));
return (react_1.default.createElement("div", { className: cx('ColumnToggler', {
'ColumnToggler-block': block,
'ColumnToggler--alignRight': align === 'right',
'is-opened': this.state.isOpened,
'is-actived': isActived
}, className), ref: this.domRef },
draggable ? (button) : (react_1.default.createElement(TooltipWrapper_1.default, { placement: placement, tooltip: disabled ? disabledTip : tooltip, container: tooltipContainer, trigger: tooltipTrigger, rootClose: tooltipRootClose }, button)),
this.state.isOpened
? draggable
? this.renderModal()
: this.renderOuter()
: null));
};
ColumnToggler.defaultProps = {
placement: 'top',
tooltipTrigger: ['hover', 'focus'],
tooltipRootClose: false,
draggable: false
};
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ColumnToggler.prototype, "dragRef", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ColumnToggler.prototype, "onConfirm", null);
return ColumnToggler;
}(react_1.default.Component));
exports.default = ColumnToggler;
//# sourceMappingURL=./renderers/Table/ColumnTogglerOrigin.js.map