fastlion-amis
Version:
一种MIS页面生成工具
159 lines (158 loc) • 10.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OperationFieldRenderer = exports.OperationField = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var factory_1 = require("../factory");
var popover_1 = tslib_1.__importDefault(require("antd/lib/popover"));
var style_1 = require("./Lion/Table/LionTable/style");
// Jay
var helper_1 = require("../utils/helper");
require("./Lion/Table/LionTable/style/baseCss/index.css");
var ActionSheet_1 = tslib_1.__importDefault(require("../components/Lion/ActionSheet"));
var index_1 = require("../index");
var icons_1 = require("../components/icons");
var antd_1 = require("antd");
// 不做处理的按钮类型
var specialButtonType = ['rfid-action'];
var OperationField = /** @class */ (function (_super) {
tslib_1.__extends(OperationField, _super);
// Jay
function OperationField(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isOpened: false,
popUp: false,
};
return _this;
}
OperationField.prototype.moreHandleTouch = function (e) {
e.stopPropagation();
this.setState({ isOpened: true });
};
OperationField.prototype.renderOperation = function () {
// 表格列operation按钮超过num个折叠
// num这个字段要跟后端约定好
var _a;
var _this = this;
var _b;
var _c = this.props, buttons = _c.buttons, num = _c.num, render = _c.render, getModalContainer = _c.env.getModalContainer, cx = _c.classnames, tableRotate = _c.tableRotate, useMobileUI = _c.useMobileUI, fold = _c.fold, tableLayout = _c.tableLayout, isFieldTable = _c.isFieldTable;
var mobileUI = useMobileUI && (0, helper_1.isMobile)();
var Layout = tableLayout == 'vertical';
var number = num;
if (mobileUI)
number = num || (isFieldTable ? 2 : 0);
var count = Number(number);
var oprations = null;
var Arraybut = Array.isArray(buttons);
if (Arraybut && buttons.length) {
var otherArr = mobileUI ?
react_1.default.createElement(ActionSheet_1.default, { closeOnOutside: false, key: 'actionSheet', isOpened: this.state.isOpened, container: getModalContainer, round: true, tableRotate: tableRotate, onHide: function (e) {
e.stopPropagation();
_this.setState({ isOpened: false });
}, popupContent: react_1.default.createElement("div", { style: { width: '100%' } },
// buttons.slice(count).map
buttons.map(function (button, idx) {
// console.log(button)
return (react_1.default.createElement("div", { key: idx, "data-index": idx, id: "amis-action-sheet-btn-wrapper", className: 'action-sheet-btn-wrapper', onClick: function () {
_this.setState({ isOpened: !_this.state.isOpened });
} }, (button === null || button === void 0 ? void 0 : button.type) === 'lion-cell-import' ?
(0, index_1.render)(button, {
size: button.size || 'md',
level: button.level || (mobileUI ? 'link' : (button.icon && !button.label ? 'link' : '')),
key: idx
}) :
render("".concat(idx), tslib_1.__assign(tslib_1.__assign({}, button), { type: specialButtonType.includes(button.type) ? button.type : 'button', size: button.size || 'md', level: button.level || (button.icon && !button.label ? 'link' : '') }), {
key: idx
})));
})) },
react_1.default.createElement("span", { className: cx('Button--link', 'extendBtn', 'rotate', Layout && "btnreset"), onClick: this.moreHandleTouch.bind(this) },
// count === 0 ? '操作' :
'···')) :
react_1.default.createElement(style_1.WrapperBtnPopover, { className: "lion-export-popover" },
react_1.default.createElement("div", { className: "lion-export-popover-container" },
react_1.default.createElement("div", { className: "lion-export-popover-hide" },
react_1.default.createElement("ul", { style: (_a = {}, _a[((_b = buttons.slice(count)) === null || _b === void 0 ? void 0 : _b.length) <= 1 ? 'padding' : ''] = 0, _a) }, (fold ? buttons : buttons.slice(count)).map(function (button, idx) {
if ((button === null || button === void 0 ? void 0 : button.type) === 'lion-cell-import')
return (0, index_1.render)(button, {
size: button.size || 'md',
level: button.level || mobileUI ? 'link' : (button.icon && !button.label ? 'link' : ''),
key: idx
});
return react_1.default.createElement("div", { key: idx, "data-index": idx, className: "flex justify-center items-center", style: { height: 'auto' } }, render("".concat(idx), tslib_1.__assign(tslib_1.__assign({}, button), { type: specialButtonType.includes(button.type) ? button.type : 'button', size: button.size || 'sm', level: button.level ||
(button.icon && !button.label ? 'link' : ''), className: "lion-td-btn" }), {
key: idx
}));
})))));
var popover = react_1.default.createElement(popover_1.default, { key: 'btnPopover', overlayClassName: 'lion-popover-operation lion-table-cell-btn', placement: 'bottomRight', arrowPointAtCenter: true, content: otherArr, overlayInnerStyle: { borderRadius: 5 }, getPopupContainer: getModalContainer, trigger: ["hover"], onVisibleChange: function (bol) { fold && _this.setState({ popUp: bol }); } }, fold ?
react_1.default.createElement(antd_1.Button, { className: cx("Button-arrow") },
"\u64CD\u4F5C",
react_1.default.createElement("span", { className: cx('Select-arrow', { "is-opened": this.state.popUp }) },
react_1.default.createElement(icons_1.Icon, { symbol: true, icon: "#icon-tooltool_down", className: "icon" })))
:
react_1.default.createElement("span", { className: cx('Button--link', 'extendBtn', count !== 0 && 'rotate') }, "\u00B7\u00B7\u00B7"));
var fixedArr = (!fold && buttons.length > count ?
(buttons.length - 1 === count) ?
buttons
:
buttons.slice(0, count)
:
buttons).map(function (button, index) {
if ((button === null || button === void 0 ? void 0 : button.type) === 'lion-cell-import') {
return (0, index_1.render)(button, {
size: button.size || 'md',
level: button.level || mobileUI ? 'link' : (button.icon && !button.label ? 'link' : ''),
key: index,
// 在CRUD表格中的 操作按钮的loading始终为false
}, { loading: false });
}
return render("".concat(index), tslib_1.__assign(tslib_1.__assign({}, button), { type: specialButtonType.includes(button.type) ? button.type : 'button', size: button.size || 'md', level: button.level || (mobileUI ? 'link' :
(button.icon && !button.label ? 'link' : '')), fold: fold }), {
key: index,
// 在CRUD表格中的 操作按钮的loading始终为false
loading: false
});
});
if (fold) {
oprations = mobileUI ? [otherArr] : [popover];
}
else {
if (buttons.length > count) {
if (buttons.length - 1 == count) {
oprations = mobileUI ? [otherArr] : tslib_1.__spreadArray([], fixedArr, true);
}
else {
oprations = mobileUI ? [otherArr] : tslib_1.__spreadArray(tslib_1.__spreadArray([], fixedArr, true), [popover], false);
}
}
else {
oprations = fixedArr;
}
}
}
return oprations;
// return (oprations || [])?.map((item) => ({...item, props: {...item.props, loading: false}}))
};
OperationField.prototype.render = function () {
var _a = this.props, className = _a.className, cx = _a.classnames, fold = _a.fold;
return (react_1.default.createElement("div", { className: cx('OperationField', className), style: { width: fold ? 56 : 'unset' } }, this.renderOperation()));
};
OperationField.propsList = ['buttons', 'label'];
OperationField.defaultProps = {};
return OperationField;
}(react_1.default.Component));
exports.OperationField = OperationField;
var OperationFieldRenderer = /** @class */ (function (_super) {
tslib_1.__extends(OperationFieldRenderer, _super);
function OperationFieldRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
OperationFieldRenderer = tslib_1.__decorate([
(0, factory_1.Renderer)({
type: 'operation'
})
], OperationFieldRenderer);
return OperationFieldRenderer;
}(OperationField));
exports.OperationFieldRenderer = OperationFieldRenderer;
//# sourceMappingURL=./renderers/Operation.js.map