fastlion-amis
Version:
一种MIS页面生成工具
883 lines • 64.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListItemFieldRenderer = exports.ListItemRenderer = exports.ListItem = exports.ListRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_dom_1 = require("react-dom");
var factory_1 = require("../factory");
var tpl_1 = require("../utils/tpl");
var Button_1 = (0, tslib_1.__importDefault)(require("../components/Button"));
var Checkbox_1 = (0, tslib_1.__importDefault)(require("../components/Checkbox"));
var list_1 = require("../store/list");
var omit = require("lodash/omit");
var helper_1 = require("../utils/helper");
var tpl_builtin_1 = require("../utils/tpl-builtin");
var QuickEdit_1 = (0, tslib_1.__importDefault)(require("./QuickEdit"));
var PopOver_1 = (0, tslib_1.__importDefault)(require("./PopOver"));
var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
var Table_1 = require("./Table");
var Copyable_1 = (0, tslib_1.__importDefault)(require("./Copyable"));
var icons_1 = require("../components/icons");
var font_1 = (0, tslib_1.__importDefault)(require("../icons/font"));
var LionContextMenu_1 = require("./Lion/components/LionContextMenu");
var offset_1 = (0, tslib_1.__importDefault)(require("../utils/offset"));
var dom_1 = require("../utils/dom");
var InfinteSroll_1 = (0, tslib_1.__importDefault)(require("./Lion/components/InfinteSroll"));
var antd_1 = require("antd");
var utils_1 = require("../utils/utils");
var Image_1 = (0, tslib_1.__importDefault)(require("../renderers/Image"));
var List = /** @class */ (function (_super) {
(0, tslib_1.__extends)(List, _super);
function List(props) {
var _this = _super.call(this, props) || this;
_this.updateAutoFillHeight = function () {
var _a;
var _b = _this.props, autoFillHeight = _b.autoFillHeight, ns = _b.classPrefix, isPick = _b.isPick;
if (!_this.body)
return;
var listHtml = (0, react_dom_1.findDOMNode)(_this);
var drawerFooter = (_a = listHtml.closest("." + ns + "Drawer-content")) === null || _a === void 0 ? void 0 : _a.querySelector("." + ns + "Drawer-footer");
// 循环计算父级节点的 pddding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
var allParentPaddingButtom = 0;
var parentNode = listHtml;
while (parentNode) {
var paddingButtom = (0, dom_1.getStyleNumber)(parentNode, 'padding-bottom');
var borderBottom = (0, dom_1.getStyleNumber)(parentNode, 'border-bottom-width');
allParentPaddingButtom =
allParentPaddingButtom + paddingButtom + borderBottom;
parentNode = parentNode.parentElement;
}
var tableHeight = document.body.clientHeight -
(0, offset_1.default)(listHtml).top -
(drawerFooter ? drawerFooter.clientHeight + 1 : 0) -
allParentPaddingButtom;
// tab情况下，后面的table由于display：none，所以offset(table).top为0，所以继承最小的那个
if ((0, offset_1.default)(listHtml).top === 0) {
var tabsContent = listHtml.closest("." + ns + "Tabs-content");
tableHeight =
document.body.clientHeight -
(0, offset_1.default)(tabsContent).top -
(drawerFooter ? drawerFooter.clientHeight + 1 : 0) -
allParentPaddingButtom - 24; //多出来的24是tabs-pane的padding
}
if (autoFillHeight && tableHeight >= 400) {
//当表格可展示高度大于350的占满剩余空间
listHtml.style.height = tableHeight + 'px';
listHtml.style.maxHeight = 'unset';
}
else {
listHtml.style.maxHeight = document.body.clientHeight - 38 + 'px';
}
};
_this.renderTools = function () {
var _a, _b;
var _c = _this.props, headerToolbar = _c.headerToolbar, __ = _c.translate, cx = _c.classnames, env = _c.env, store = _c.store, data = _c.data, filterRender = _c.filterRender, isPick = _c.isPick, clearSelectedItems = _c.clearSelectedItems, crudRenderToolbarFunc = _c.crudRenderToolbarFunc, multiple = _c.multiple;
if (!(headerToolbar === null || headerToolbar === void 0 ? void 0 : headerToolbar.length))
return null;
var hideCheckTogglerOpen = _this.state.hideCheckTogglerOpen;
/** 折叠在工具里的tools */
var foldedHeaderTools = [];
/** 在筛选/多选右侧的tools */
var unfoldedHeaderTools = [];
headerToolbar.forEach(function (item) {
var type = item.type, isToolBar = item.isToolBar, foldable = item.foldable;
/** 是否是移动端的工具 */
if (isToolBar) {
/** foldable: 是否归到折叠菜单中 */
/** 配置非折叠的工具 */
if (!foldable) {
unfoldedHeaderTools.push(item);
}
else {
foldedHeaderTools.push(item);
}
}
});
{
/* 搜索 */
}
var isFilter = !!Object.keys(data.filterParam || {}).length;
var filterNode = filterRender && filterRender(isFilter);
{
/* 批量 */
}
var checkAll = isPick && multiple ? (_this.renderCheckAll()) : ((_a = _this.props.headerBulkActions) === null || _a === void 0 ? void 0 : _a.length) ||
((_b = _this.props.footerBulkActions) === null || _b === void 0 ? void 0 : _b.length) ? (react_1.default.createElement("span", { className: cx('Mobile-batch-manage', {
'is-active': !store.hideCheckToggler
}), onClick: function (e) {
e.preventDefault();
clearSelectedItems === null || clearSelectedItems === void 0 ? void 0 : clearSelectedItems();
store.toggableHideCheck();
store.clear();
_this.setState({ hideCheckTogglerOpen: !hideCheckTogglerOpen });
} }, store.hideCheckToggler ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(icons_1.Icon, { icon: "#icon-tooltool_list", className: "batch-manage-icon" }),
react_1.default.createElement("span", { className: "batch-text" }, __('CRUD.select')))) : (__('Wizard.finish')))) : null;
return (react_1.default.createElement(react_1.default.Fragment, null,
(foldedHeaderTools === null || foldedHeaderTools === void 0 ? void 0 : foldedHeaderTools.length) ? (react_1.default.createElement(antd_1.Popover, { showArrow: false, placement: "bottom", getPopupContainer: env.getModalContainer, trigger: "click", overlayClassName: "table-toolbar-pop", autoAdjustOverflow: true, visible: _this.state.toolbarShow, onOpenChange: function (open) { return _this.setState({ toolbarShow: open }); }, content: react_1.default.createElement("div", { className: 'toolbar-container', onClick: function () { return _this.setState({ toolbarShow: false }); } }, foldedHeaderTools.map(function (item, index) {
var _a;
return (_a = _this.renderToolbar(item)) !== null && _a !== void 0 ? _a : crudRenderToolbarFunc(item);
})) },
react_1.default.createElement("div", { className: cx('Mobile-batch-manage'), onClick: function () { return _this.setState({ toolbarShow: true }); } },
react_1.default.createElement(icons_1.Icon, { icon: '#icon-toolbox', className: "icon" }),
react_1.default.createElement("span", { className: 'batch-text' }, __('Table.tools'))))) : null,
filterNode,
checkAll,
unfoldedHeaderTools.map(function (item) {
var _a;
return (react_1.default.createElement("div", { className: cx('Mobile-batch-manage') }, (_a = _this.renderToolbar(item)) !== null && _a !== void 0 ? _a : crudRenderToolbarFunc(item)));
})));
};
_this.renderPageNation = function () {
var _a = _this.props, footerClassName = _a.footerClassName, footerToolbar = _a.footerToolbar, footerToolbarRender = _a.footerToolbarRender, store = _a.store, cx = _a.classnames, multiple = _a.multiple;
var _footer = footerToolbar || [];
var child = footerToolbarRender
? footerToolbarRender((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.props), { selectedItems: store.selectedItems.map(function (item) { return item.data; }), items: store.items.map(function (item) { return item.data; }), unSelectedItems: store.unSelectedItems.map(function (item) { return item.data; }) }), _this.renderToolbar, (0, helper_1.isMobile)() ? _footer : _footer.filter(function (item) { return item.align == 'right'; }))
: null;
var actions = _this.renderActions('footer');
var selectedItems = store.selectedItems.map(function (item) { return item.data; });
var toolbarNode = actions || child ? (react_1.default.createElement("div", { className: cx('List-toolbar', 'List-toolbar-page', footerClassName, (0, helper_1.isMobile)() ? 'List-toolbar-mobile' : ''), key: "footer-toolbar" },
actions,
multiple && (selectedItems.length == 0 ? "" : react_1.default.createElement("div", { style: { marginRight: '16px', fontSize: '12px' } },
"\u5DF2\u9009\uFF1A",
selectedItems.length,
"\u884C")),
child)) : null;
return toolbarNode;
};
_this.handleAction = _this.handleAction.bind(_this);
_this.handleCheck = _this.handleCheck.bind(_this);
_this.handleCheckAll = _this.handleCheckAll.bind(_this);
_this.handleQuickChange = _this.handleQuickChange.bind(_this);
_this.handleSave = _this.handleSave.bind(_this);
_this.handleSaveOrder = _this.handleSaveOrder.bind(_this);
_this.reset = _this.reset.bind(_this);
_this.dragTipRef = _this.dragTipRef.bind(_this);
_this.getPopOverContainer = _this.getPopOverContainer.bind(_this);
_this.affixDetect = _this.affixDetect.bind(_this);
_this.bodyRef = _this.bodyRef.bind(_this);
_this.renderToolbar = _this.renderToolbar.bind(_this);
var store = props.store, selectable = props.selectable, draggable = props.draggable, orderBy = props.orderBy, orderDir = props.orderDir, multiple = props.multiple, hideCheckToggler = props.hideCheckToggler, itemCheckableOn = props.itemCheckableOn, itemDraggableOn = props.itemDraggableOn;
store.update({
multiple: multiple,
selectable: selectable,
draggable: draggable,
orderBy: orderBy,
orderDir: orderDir,
hideCheckToggler: hideCheckToggler,
itemCheckableOn: itemCheckableOn,
itemDraggableOn: itemDraggableOn
});
_this.state = {
hideCheckTogglerOpen: hideCheckToggler !== null && hideCheckToggler !== void 0 ? hideCheckToggler : false,
toolbarShow: false
};
List.syncItems(store, _this.props) && _this.syncSelected();
return _this;
}
List.syncItems = function (store, props, prevProps) {
var source = props.source;
var value = props.value || props.items;
var items = [];
var updateItems = false;
if (Array.isArray(value) &&
(!prevProps || (prevProps.value || prevProps.items) !== value)) {
items = value;
updateItems = true;
}
else if (typeof source === 'string') {
var resolved = (0, tpl_builtin_1.resolveVariableAndFilter)(source, props.data, '| raw');
var prev = prevProps
? (0, tpl_builtin_1.resolveVariableAndFilter)(source, prevProps.data, '| raw')
: null;
if (prev && prev === resolved) {
updateItems = false;
}
else if (Array.isArray(resolved)) {
items = resolved;
updateItems = true;
}
}
updateItems && store.initItems(items);
Array.isArray(props.selected) &&
store.updateSelected(props.selected, props.valueField);
return updateItems;
};
List.prototype.componentDidMount = function () {
var parent = (0, helper_1.getScrollParent)((0, react_dom_1.findDOMNode)(this));
if (!parent || parent === document.body) {
parent = window;
}
this.updateAutoFillHeight();
this.parentNode = parent;
this.affixDetect();
parent.addEventListener('scroll', this.affixDetect);
window.addEventListener('resize', this.affixDetect);
};
List.prototype.componentDidUpdate = function (prevProps) {
var props = this.props;
var store = props.store;
if ((0, helper_1.anyChanged)([
'selectable',
'draggable',
'orderBy',
'orderDir',
'multiple',
'hideCheckToggler',
'itemCheckableOn',
'itemDraggableOn'
], prevProps, props)) {
store.update({
multiple: props.multiple,
selectable: props.selectable,
draggable: props.draggable,
orderBy: props.orderBy,
orderDir: props.orderDir,
hideCheckToggler: props.hideCheckToggler,
itemCheckableOn: props.itemCheckableOn,
itemDraggableOn: props.itemDraggableOn
});
}
if ((0, helper_1.anyChanged)(['source', 'value', 'items'], prevProps, props) ||
(!props.value &&
!props.items &&
(props.data !== prevProps.data ||
(typeof props.source === 'string' && (0, tpl_builtin_1.isPureVariable)(props.source))))) {
List.syncItems(store, props, prevProps) && this.syncSelected();
}
else if (prevProps.selected !== props.selected) {
store.updateSelected(props.selected || [], props.valueField);
}
if (props.tabsdefer !== prevProps.tabsdefer) {
this.updateAutoFillHeight();
}
};
List.prototype.componentWillUnmount = function () {
var parent = this.parentNode;
parent && parent.removeEventListener('scroll', this.affixDetect);
window.removeEventListener('resize', this.affixDetect);
};
List.prototype.bodyRef = function (ref) {
this.body = ref;
};
List.prototype.affixDetect = function () {
var _a, _b;
if (!this.props.affixHeader || !this.body) {
return;
}
var ns = this.props.classPrefix;
var dom = (0, react_dom_1.findDOMNode)(this);
var afixedDom = dom.querySelector("." + ns + "List-fixedTop");
if (!afixedDom) {
return;
}
var clip = this.body.getBoundingClientRect();
var offsetY = (_b = (_a = this.props.affixOffsetTop) !== null && _a !== void 0 ? _a : this.props.env.affixOffsetTop) !== null && _b !== void 0 ? _b : 0;
var affixed = clip.top < offsetY && clip.top + clip.height - 40 > offsetY;
this.body.offsetWidth &&
(afixedDom.style.cssText = "top: " + offsetY + "px;width: " + this.body.offsetWidth + "px;");
affixed ? afixedDom.classList.add('in') : afixedDom.classList.remove('in');
// store.markHeaderAffix(clip.top < offsetY && (clip.top + clip.height - 40) > offsetY);
};
List.prototype.getPopOverContainer = function () {
return (0, react_dom_1.findDOMNode)(this);
};
List.prototype.handleAction = function (e, action, ctx) {
var onAction = this.props.onAction;
// todo
onAction(e, action, ctx);
};
List.prototype.handleCheck = function (item) {
item.toggle();
this.syncSelected();
};
// 0全选 1反选 2不选
List.prototype.handleCheckAll = function (index) {
var store = this.props.store;
switch (index) {
case 0:
store.toggleAll();
break;
case 1:
store.checkReverse();
break;
case 2:
store.clear();
break;
case 3:
store.toggleAll();
break;
default:
store.toggleAll();
return;
}
this.syncSelected();
};
List.prototype.syncSelected = function () {
var _a = this.props, store = _a.store, onSelect = _a.onSelect;
onSelect &&
onSelect(store.selectedItems.map(function (item) { return item.data; }), store.unSelectedItems.map(function (item) { return item.data; }));
};
List.prototype.handleQuickChange = function (item, values, saveImmediately, savePristine, resetOnFailed) {
item.change(values, savePristine);
if (!saveImmediately || savePristine) {
return;
}
if (saveImmediately && saveImmediately.api) {
this.props.onAction(null, {
actionType: 'ajax',
api: saveImmediately.api
}, values);
return;
}
var _a = this.props, onSave = _a.onSave, primaryField = _a.primaryField;
if (!onSave) {
return;
}
onSave(item.data, (0, helper_1.difference)(item.data, item.pristine, ['id', primaryField]), item.index, undefined, item.pristine, resetOnFailed);
};
List.prototype.handleSave = function () {
var _a = this.props, store = _a.store, onSave = _a.onSave, primaryField = _a.primaryField;
if (!onSave || !store.modifiedItems.length) {
return;
}
var items = store.modifiedItems.map(function (item) { return item.data; });
var itemIndexes = store.modifiedItems.map(function (item) { return item.index; });
var diff = store.modifiedItems.map(function (item) {
return (0, helper_1.difference)(item.data, item.pristine, ['id', primaryField]);
});
var unModifiedItems = store.items
.filter(function (item) { return !item.modified; })
.map(function (item) { return item.data; });
onSave(items, diff, itemIndexes, unModifiedItems, store.modifiedItems.map(function (item) { return item.pristine; }));
};
List.prototype.handleSaveOrder = function () {
var _a = this.props, store = _a.store, onSaveOrder = _a.onSaveOrder;
if (!onSaveOrder || !store.movedItems.length) {
return;
}
onSaveOrder(store.movedItems.map(function (item) { return item.data; }), store.items.map(function (item) { return item.data; }));
};
List.prototype.reset = function () {
var store = this.props.store;
store.reset();
};
List.prototype.bulkUpdate = function (value, items) {
var store = this.props.store;
var items2 = store.items.filter(function (item) { return ~items.indexOf(item.pristine); });
items2.forEach(function (item) { return item.change(value); });
};
List.prototype.getSelected = function () {
var store = this.props.store;
return store.selectedItems.map(function (item) { return item.data; });
};
List.prototype.dragTipRef = function (ref) {
if (!this.dragTip && ref) {
this.initDragging();
}
else if (this.dragTip && !ref) {
this.destroyDragging();
}
this.dragTip = ref;
};
List.prototype.initDragging = function () {
var store = this.props.store;
var dom = (0, react_dom_1.findDOMNode)(this);
var ns = this.props.classPrefix;
this.sortable = new sortablejs_1.default(dom.querySelector("." + ns + "List-items"), {
group: 'table',
animation: 150,
handle: "." + ns + "ListItem-dragBtn",
ghostClass: 'is-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);
}
store.exchange(e.oldIndex, e.newIndex);
}
});
};
List.prototype.destroyDragging = function () {
this.sortable && this.sortable.destroy();
};
List.prototype.renderActions = function (region) {
var _this = this;
var _a, _b;
var _c = this.props, actions = _c.actions, render = _c.render, store = _c.store, ns = _c.classPrefix, cx = _c.classnames, headerBulkActions = _c.headerBulkActions, footerBulkActions = _c.footerBulkActions, headerActions = _c.headerActions;
var bulkActions = ((_a = headerBulkActions === null || headerBulkActions === void 0 ? void 0 : headerBulkActions.length) !== null && _a !== void 0 ? _a : 0) + ((_b = footerBulkActions === null || footerBulkActions === void 0 ? void 0 : footerBulkActions.length) !== null && _b !== void 0 ? _b : 0);
var btn;
actions = Array.isArray(actions) ? actions.concat() : [];
if (region === 'header') {
actions = actions.concat(headerActions || [], (headerBulkActions || []).map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { isBulk: true })); }));
}
if (region === 'footer' &&
!~this.renderedToolbars.indexOf('check-all') &&
bulkActions > 0 &&
(btn = this.renderCheckAll())) {
actions.unshift({
type: 'button',
children: btn
});
}
// if (
// region === 'header' &&
// !~this.renderedToolbars.indexOf('drag-toggler') &&
// (btn = this.renderDragToggler())
// ) {
// actions.unshift({
// type: 'button',
// children: btn
// });
// }
return Array.isArray(actions) && actions.length ? (react_1.default.createElement("div", { className: cx('List-actions') }, actions.map(function (action, key) {
var _a, _b;
return action.isBulk ? (_b = (_a = _this.props).bulkActionRender) === null || _b === void 0 ? void 0 : _b.call(_a, action, key) : render("action/" + key, (0, tslib_1.__assign)({ type: 'button' }, action), {
onAction: _this.handleAction,
key: key,
btnDisabled: store.dragging
});
}))) : null;
};
List.prototype.renderHeading = function () {
var _a = this.props, title = _a.title, store = _a.store, hideQuickSaveBtn = _a.hideQuickSaveBtn, cx = _a.classnames, data = _a.data;
if (title || (store.modified && !hideQuickSaveBtn) || store.moved) {
return (react_1.default.createElement("div", { className: cx('List-heading') }, store.modified && !hideQuickSaveBtn ? (react_1.default.createElement("span", null, "\u5F53\u524D\u6709 " + store.modified + " \u6761\u8BB0\u5F55\u4FEE\u6539\u4E86\u5185\u5BB9, \u4F46\u5E76\u6CA1\u6709\u63D0\u4EA4\u3002\u8BF7\u9009\u62E9:",
react_1.default.createElement("button", { type: "button", className: cx('Button Button--xs Button--success m-l-sm'), onClick: this.handleSave },
react_1.default.createElement(icons_1.Icon, { icon: "check", className: "icon m-r-xs" }),
"\u63D0\u4EA4"),
react_1.default.createElement("button", { type: "button", className: cx('Button Button--xs Button--danger m-l-sm'), onClick: this.reset },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon m-r-xs" }),
"\u653E\u5F03"))) : store.moved ? (react_1.default.createElement("span", null, "\u5F53\u524D\u6709 " + store.moved + " \u6761\u8BB0\u5F55\u4FEE\u6539\u4E86\u987A\u5E8F, \u4F46\u5E76\u6CA1\u6709\u63D0\u4EA4\u3002\u8BF7\u9009\u62E9:",
react_1.default.createElement("button", { type: "button", className: cx('Button Button--xs Button--success m-l-sm'), onClick: this.handleSaveOrder },
react_1.default.createElement(icons_1.Icon, { icon: "check", className: "icon m-r-xs" }),
"\u63D0\u4EA4"),
react_1.default.createElement("button", { type: "button", className: cx('Button Button--xs Button--danger m-l-sm'), onClick: this.reset },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon m-r-xs" }),
"\u653E\u5F03"))) : title ? ((0, tpl_1.filter)(title, data)) : ('')));
}
return null;
};
List.prototype.renderHeader = function () {
var _a;
var _b = this.props, header = _b.header, headerClassName = _b.headerClassName, headerToolbarRender = _b.headerToolbarRender, render = _b.render, showHeader = _b.showHeader, store = _b.store, data = _b.data, __ = _b.translate, cx = _b.classnames;
var hideCheckTogglerOpen = this.state.hideCheckTogglerOpen;
if (showHeader === false) {
return null;
}
// Aug
if ((0, helper_1.isMobile)()) {
return react_1.default.createElement("div", { className: cx('Mobile-header-toolbar-wrapper') },
this.props.tipsHeader && (0, helper_1.isMobile)() ? render('alert', this.props.tipsHeader, { cx: cx, pageUniqueMark: this.props.name + 'header', data: store.data }) : null,
react_1.default.createElement("div", { style: { marginTop: '4px' } },
react_1.default.createElement("div", { className: "filter-conditions" },
typeof data.total == 'number' ? __('CRUD.total', { total: data.total }) : null,
((_a = data.selectedItems) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement("span", { style: { marginLeft: 10 } }, __('CRUD.checked', { count: data.selectedItems.length }))) : null),
react_1.default.createElement("div", { className: "header-btns" }, this.renderTools())));
}
var child = headerToolbarRender
? headerToolbarRender((0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.props), { selectedItems: store.selectedItems.map(function (item) { return item.data; }), items: store.items.map(function (item) { return item.data; }), unSelectedItems: store.unSelectedItems.map(function (item) { return item.data; }) }), this.renderToolbar, (0, helper_1.isMobile)() ? null : this.renderPageNation)
: null;
var actions = this.renderActions('header');
var toolbarNode = actions || child || store.dragging ? (react_1.default.createElement("div", { className: cx('List-toolbar', headerClassName), key: "header-toolbar" },
actions,
child,
store.dragging ? (react_1.default.createElement("div", { className: cx('List-dragTip'), ref: this.dragTipRef }, "\u8BF7\u62D6\u52A8\u5DE6\u8FB9\u7684\u6309\u94AE\u8FDB\u884C\u6392\u5E8F")) : null)) : null;
var headerNode = header && (!Array.isArray(header) || header.length) ? (react_1.default.createElement("div", { className: cx('List-header', headerClassName), key: "header" }, render('header', header))) : null;
return headerNode && toolbarNode
? [headerNode, toolbarNode]
: headerNode || toolbarNode || null;
};
List.prototype.renderFooter = function () {
var _a = this.props, footer = _a.footer, footerClassName = _a.footerClassName, footerToolbar = _a.footerToolbar, footerToolbarRender = _a.footerToolbarRender, render = _a.render, showFooter = _a.showFooter, headerToolbar = _a.headerToolbar, store = _a.store, headerActions = _a.headerActions, cx = _a.classnames;
if (showFooter === false) {
return null;
}
var _footer = footerToolbar || [];
if ((0, helper_1.isMobile)()) {
// 勾选批量状态时
if (!store.hideCheckToggler) {
_footer = ['headerBulkActions', 'footerBulkActions'];
}
else {
if (headerToolbar) {
// 移动端将所有操作统一放在在底部
_footer = _footer.concat(headerActions || [], headerToolbar);
}
// 非勾选状态不渲染批量操作 分页也不渲染
_footer = _footer.filter(function (item) {
var type = item.type || item;
return ![
'bulk-actions',
'headerBulkActions',
'footerBulkActions',
'bulkActions',
'pagination',
'statistics',
'switch-per-page',
].includes(type);
});
}
var child = footerToolbarRender
? footerToolbarRender((0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.props), { selectedItems: store.selectedItems.map(function (item) { return item.data; }), items: store.items.map(function (item) { return item.data; }), unSelectedItems: store.unSelectedItems.map(function (item) { return item.data; }) }), this.renderToolbar, (0, helper_1.isMobile)() ? _footer : _footer.filter(function (item) { return item.align == 'right'; }))
: null;
var actions = this.renderActions('footer');
var toolbarNode = actions || child ? (react_1.default.createElement("div", { className: cx('List-toolbar', footerClassName, (0, helper_1.isMobile)() ? 'List-toolbar-mobile' : ''), key: "footer-toolbar" },
actions,
child)) : null;
var footerNode = footer && (!Array.isArray(footer) || footer.length) ? (react_1.default.createElement("div", { className: cx('List-footer', footerClassName), key: "footer" }, render('footer', footer))) : null;
return footerNode && toolbarNode ? [toolbarNode, footerNode] : footerNode || toolbarNode || null;
}
return null;
};
List.prototype.renderCheckAll = function () {
var _this = this;
var _a = this.props, store = _a.store, multiple = _a.multiple, selectable = _a.selectable, ns = _a.classPrefix;
if (!store.selectable ||
!multiple ||
!selectable ||
store.dragging ||
!store.items.length) {
return null;
}
if ((0, helper_1.isMobile)() && this.state.hideCheckTogglerOpen) {
return null;
}
return (react_1.default.createElement(LionContextMenu_1.ContextMenu, { menuItems: [
{ id: 0, title: '全选' },
{ id: 1, title: '反选' },
{ id: 2, title: '不选' }
], onItemClick: function (index) { return _this.handleCheckAll(index); }, key: Date() },
react_1.default.createElement("th", { onClick: function () { _this.handleCheckAll(3); } },
react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, partial: !store.allChecked, checked: store.someChecked, disabled: store.disabledHeadCheckbox }))));
};
List.prototype.renderDragToggler = function () {
var _a = this.props, store = _a.store, multiple = _a.multiple, selectable = _a.selectable, env = _a.env;
if (!store.draggable || store.items.length < 2) {
return null;
}
return (react_1.default.createElement(Button_1.default, { iconOnly: true, key: "dragging-toggle", tooltip: "\u5BF9\u5217\u8868\u8FDB\u884C\u6392\u5E8F\u64CD\u4F5C", tooltipContainer: (env === null || env === void 0 ? void 0 : env.getTopModalContainer) || undefined, size: "sm", active: store.dragging, onClick: function (e) {
e.preventDefault();
store.toggleDragging();
store.dragging && store.clear();
} },
react_1.default.createElement(icons_1.Icon, { icon: "exchange", className: "icon r90" })));
};
List.prototype.renderToolbar = function (toolbar, index) {
var type = toolbar.type || toolbar;
if (type === 'drag-toggler') {
this.renderedToolbars.push(type);
return this.renderDragToggler();
}
else if (type === 'check-all') {
this.renderedToolbars.push(type);
return this.renderCheckAll();
}
else if (type === 'columns-toggler') {
return null;
}
return void 0;
};
List.prototype.render = function () {
var _a;
var _this = this;
var _b, _c;
var _d = this.props, className = _d.className, itemClassName = _d.itemClassName, store = _d.store, placeholder = _d.placeholder, render = _d.render, multiple = _d.multiple, listItem = _d.listItem, onAction = _d.onAction, hideCheckToggler = _d.hideCheckToggler, checkOnItemClick = _d.checkOnItemClick, itemAction = _d.itemAction, affixHeader = _d.affixHeader, cx = _d.classnames, ns = _d.classPrefix, size = _d.size, __ = _d.translate, onLoadMore = _d.onLoadMore, loadHasMore = _d.loadHasMore, infinteLoad = _d.infinteLoad, data = _d.data, loadDataOnce = _d.loadDataOnce, loadmoreLoading = _d.loadmoreLoading, columns = _d.columns, thumbRatio = _d.thumbRatio, renderAggregate = _d.renderAggregate;
var inCombination = Boolean((_b = this.body) === null || _b === void 0 ? void 0 : _b.closest("." + ns + "Panel-Combination"));
this.renderedToolbars = [];
var heading = this.renderHeading();
var header = (0, helper_1.isMobile)() && inCombination ? null : this.renderHeader();
return (react_1.default.createElement("div", { className: cx('List', className, (_a = {},
_a["List--" + size] = size,
_a['List--unsaved'] = !!store.modified || !!store.moved,
_a)), id: 'List-item-content', ref: this.bodyRef }, renderAggregate === null || renderAggregate === void 0 ? void 0 :
renderAggregate(),
affixHeader && heading && header ? (react_1.default.createElement("div", { className: cx('List-fixedTop') },
header,
heading)) : null,
header,
heading,
store.items.length ? (react_1.default.createElement("div", { className: cx('List-items') },
store.items.map(function (item, index) {
return render("" + index, (0, tslib_1.__assign)({ type: 'list-item' }, listItem), {
key: item.index,
className: cx(itemClassName, {
'is-checked': item.checked,
'is-modified': item.modified,
'is-moved': item.moved
}),
selectable: store.selectable,
checkable: item.checkable,
multiple: multiple,
item: item,
itemIndex: item.index,
hideCheckToggler: _this.state.hideCheckTogglerOpen,
checkOnItemClick: checkOnItemClick,
itemAction: itemAction,
selected: item.checked,
onCheck: _this.handleCheck,
dragging: store.dragging,
onAction: onAction,
data: item.locals,
onQuickChange: store.dragging ? null : _this.handleQuickChange,
popOverContainer: _this.getPopOverContainer,
dataColumns: columns,
thumbRatio: thumbRatio
});
}),
(!inCombination && infinteLoad) && react_1.default.createElement(InfinteSroll_1.default, { loadMore: onLoadMore, hasMore: loadHasMore, hasData: !!((_c = data === null || data === void 0 ? void 0 : data.items) === null || _c === void 0 ? void 0 : _c.length), loadDataOnce: loadDataOnce, loadmoreLoading: loadmoreLoading }))) : (react_1.default.createElement("div", { className: cx('List-placeholder') }, render('placeholder', __(placeholder)))),
this.renderFooter()));
};
List.propsList = [
'header',
'headerToolbarRender',
'footer',
'footerToolbarRender',
'placeholder',
'source',
'selectable',
'headerClassName',
'footerClassName',
'hideQuickSaveBtn',
'hideCheckToggler',
'itemCheckableOn',
'itemDraggableOn',
'actions',
'items',
'valueField',
'thumbRatio'
];
List.defaultProps = {
className: '',
placeholder: 'placeholder.noData',
source: '$items',
selectable: false,
headerClassName: '',
footerClassName: '',
affixHeader: true,
hideCheckToggler: (0, helper_1.isMobile)(),
thumbRatio: '16:9'
};
return List;
}(react_1.default.Component));
exports.default = List;
var ListRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ListRenderer, _super);
function ListRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
ListRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'list',
storeType: list_1.ListStore.name
})
], ListRenderer);
return ListRenderer;
}(List));
exports.ListRenderer = ListRenderer;
var ListItem = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ListItem, _super);
function ListItem(props) {
var _this = _super.call(this, props) || this;
_this.handelRenderDom = function (name, value) {
var _a = _this.props, dataColumns = _a.dataColumns, data = _a.data, render = _a.render;
var itemData = dataColumns.find(function (items) { return ['mapping'].some(function (item) { return items.type == item; }) && items.name == name; });
if (itemData) {
if (value) {
return render(name, itemData, { value: value });
}
return render(name, itemData);
}
return data[name];
};
_this.itemRender = _this.itemRender.bind(_this);
_this.handleAction = _this.handleAction.bind(_this);
_this.handleClick = _this.handleClick.bind(_this);
_this.handleCheck = _this.handleCheck.bind(_this);
// Jay
_this.touchStartTime = 0;
_this.state = {
visible: false
};
return _this;
}
ListItem.prototype.handleClick = function (e) {
if ((0, helper_1.isClickOnInput)(e)) {
return;
}
var _a = this.props, itemAction = _a.itemAction, onAction = _a.onAction, item = _a.item;
if (itemAction) {
onAction && onAction(e, itemAction, item === null || item === void 0 ? void 0 : item.data);
return;
}
this.props.onCheck && this.props.onCheck(item);
};
ListItem.prototype.handleCheck = function () {
var item = this.props.item;
this.props.onCheck && this.props.onCheck(item);
};
ListItem.prototype.handleAction = function (e, action, ctx) {
var _a = this.props, onAction = _a.onAction, item = _a.item;
this.setState({ visible: false });
onAction && onAction(e, action, ctx || item.data);
};
ListItem.prototype.handleQuickChange = function (values, saveImmediately, savePristine, resetOnFailed) {
var _a = this.props, onQuickChange = _a.onQuickChange, item = _a.item;
onQuickChange &&
onQuickChange(item, values, saveImmediately, savePristine, resetOnFailed);
};
ListItem.prototype.renderLeft = function () {
var _a, _b;
var _c = this.props, dragging = _c.dragging, selectable = _c.selectable, selected = _c.selected, checkable = _c.checkable, multiple = _c.multiple, hideCheckToggler = _c.hideCheckToggler, checkOnItemClick = _c.checkOnItemClick, cx = _c.classnames, ns = _c.classPrefix, headerBulkActions = _c.headerBulkActions, footerBulkActions = _c.footerBulkActions;
var bulkActions = ((_a = headerBulkActions === null || headerBulkActions === void 0 ? void 0 : headerBulkActions.length) !== null && _a !== void 0 ? _a : 0) + ((_b = footerBulkActions === null || footerBulkActions === void 0 ? void 0 : footerBulkActions.length) !== null && _b !== void 0 ? _b : 0);
if (dragging) {
return (react_1.default.createElement("div", { className: cx('ListItem-dragBtn') },
react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: "icon" })));
}
else if (selectable && !hideCheckToggler && bulkActions > 0) {
return (react_1.default.createElement("div", { className: cx('ListItem-checkBtn') },
react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, type: multiple ? 'checkbox' : 'radio', disabled: !checkable, checked: selected, onChange: checkOnItemClick ? helper_1.noop : this.handleCheck, inline: true })));
}
return null;
};
ListItem.prototype.renderRight = function () {
var _this = this;
var _a = this.props, actions = _a.actions, render = _a.render, data = _a.data, dragging = _a.dragging, cx = _a.classnames, num = _a.num;
if (Array.isArray(actions)) {
{ /* Jay */ }
var actionsTmp_1 = [];
var mobileUI = (0, helper_1.isMobile)();
if (mobileUI) {
actions.forEach(function (action) {
if ((0, helper_1.isVisible)(action, data)) {
actionsTmp_1.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, action), { onAction: _this.handleAction, disabled: dragging || (0, helper_1.isDisabled)(action, data) }));
}
});
}
else {
actions.forEach(function (action, index) {
if ((0, helper_1.isVisible)(action, data)) {
actionsTmp_1.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, action), { size: 'sm', type: 'button', onAction: _this.handleAction, disabled: dragging || (0, helper_1.isDisabled)(action, data), key: index }));
}
});
}
return (react_1.default.createElement("div", { className: cx('ListItem-actions') }, !mobileUI ?
render("action", {
type: "operation",
buttons: actionsTmp_1
}, {
num: num
})
:
actions.map(function (action, key) {
return render("action/" + key, (0, tslib_1.__assign)({}, action), {
onAction: _this.handleAction,
type: 'button',
disabled: dragging || (0, helper_1.isDisabled)(action, data),
key: key
});
})));
}
return null;
};
ListItem.prototype.renderChild = function (node, region, key) {
if (region === void 0) { region = 'body'; }
if (key === void 0) { key = 0; }
var render = this.props.render;
if (typeof node === 'string' || typeof node === 'number') {
return render(region, node, { key: key });
}
var childNode = node;
if (childNode.type === 'hbox' || childNode.type === 'grid') {
return render(region, node, {
key: key,
itemRender: this.itemRender
});
}
return this.renderFeild(region, childNode, key, this.props);
};
ListItem.prototype.itemRender = function (field, index, props) {
return this.renderFeild("column/" + index, field, index, props);
};
ListItem.prototype.renderFeild = function (region, field, key, props) {
var _this = this;
var _a;
var _b = this.props, dataColumns = _b.dataColumns, tableLayout = _b.tableLayout;
var render = (props === null || props === void 0 ? void 0 : props.render) || this.props.render;
var data = this.props.data;
var cx = this.props.classnames;
var itemIndex = this.props.itemIndex;
var $$id = field.$$id ? field.$$id + "-field" : '';
if (!(0, helper_1.isVisible)(field, data)) {
return null;
}
var label = field.label;
var itemData = dataColumns.filter(function (item) { return ['mapping', 'progress', 'link', 'lion-upload', 'color'].some(function (Item) { return item.type == Item; }); }).find(function (item) { return item.name == field.name; });
var canJump = field.linkId ? (0, utils_1.linkJump)((_a = field.linkId) !== null && _a !== void 0 ? _a : '', data, field.jumpDisabledOn) : false;
return (react_1.default.createElement("div", { key: key, className: cx('ListItem-field') },
label ? (react_1.default.createElement("label", { className: cx('ListItem-fieldLabel', field.labelClassName), title: field.label },
react_1.default.createElement("span", null, label),
":")) : null,
react_1.default.createElement("div", { className: cx('ListItem-fieldValue', field.linkUrl && canJump ? 'is-linkUrl' : ''), style: { flex: 1 }, title: field.name ? (0, tpl_builtin_1.resolveVariable)(field.name, data) : undefined, onClick: function (e) {
if (canJump) {
e.stopPropagation();
(0, utils_1.ModleHandleClick)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.props), field), { value: data[field.name] }), e.target);
}
} }, itemData ?
render(region, itemData, {
rowIndex: itemIndex,
colIndex: key,
className: cx('ListItem-fieldValue', field.className, field.linkUrl && canJump ? 'is-linkUrl' : ''),
label: undefined,
mode: tableLayout !== null && tableLayout !== void 0 ? tableLayout : 'normal',
value: field.name ? (0, tpl_builtin_1.resolveVariable)(field.name, data) : undefined,
onAction: this.handleAction,
onQuickChange: this.handleQuickChange
}) :
render(region, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { field: field, $$id: $$id, type: 'list-item-field' }), {
rowIndex: itemIndex,
colIndex: key,
className: cx('ListItem-fieldValue', field.className, field.linkUrl && canJump ? 'is-linkUrl' : ''),
value: field.name ? (0, tpl_builtin_1.resolveVariable)(field.name, data) : undefined,
onAction: this.handleAction,
onQuickChange: this.handleQuickChange
}))));
};
ListItem.prototype.renderBody = function () {
var _this = this;
var body = this.props.body;
if (!body) {
return null;
}
else if (Array.isArray(body)) {
return body.map(function (child, index) {
return _this.renderChild((0, tslib_1.__assign)({ type: 'plain' }, (typeof child === 'string' ? { type: 'tpl', tpl: child } : child)), "body/" + index, index);
});
}
return this.renderChild(body, 'body');
};
ListItem.prototype.previewImage = function (file, index, e) {
e.preventDefault();
var onImageEnlarge = this.props.onImageEnlarge;
if (onImageEnlarge) {
onImageEnlarge({
// 预览地址
src: file.thumbnailAddr,
originalSrc: file.preview,
index: index
});
}
};
ListItem.prototype.render = function () {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
var _p = this.props, className = _p.className, data = _p.data, titleClassName = _p.titleClassName, avatarClassName = _p.avatarClassName, checkOnItemClick = _p.checkOnItemClick, render = _p.render, checkable = _p.checkable, cx = _p.classnames, actionsPosition = _p.actionsPosition, itemAction = _p.itemAction,
// Jay
footable = _p.footable, footBody = _p.footBody, title = _p.title, subT