fastlion-amis
Version:
一种MIS页面生成工具
652 lines (651 loc) • 34.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardsRenderer = 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 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 helper_1 = require("../utils/helper");
var tpl_builtin_1 = require("../utils/tpl-builtin");
var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
var tpl_1 = require("../utils/tpl");
var icons_1 = require("../components/icons");
var InfinteSroll_1 = (0, tslib_1.__importDefault)(require("./Lion/components/InfinteSroll"));
var offset_1 = (0, tslib_1.__importDefault)(require("../utils/offset"));
var Cards = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Cards, _super);
function Cards(props) {
var _this = _super.call(this, props) || this;
_this.updateAutoFillHeightTimes = 0;
_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.bodyRef = _this.bodyRef.bind(_this);
_this.affixDetect = _this.affixDetect.bind(_this);
_this.updateAutoFillHeight = _this.updateAutoFillHeight.bind(_this);
_this.itemsRef = _this.itemsRef.bind(_this);
_this.renderToolbar = _this.renderToolbar.bind(_this);
// this.fixAlignmentLazy = debounce(this.fixAlignment.bind(this), 250, {
// trailing: true,
// leading: false
// })
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({
selectable: selectable,
draggable: draggable,
orderBy: orderBy,
orderDir: orderDir,
multiple: multiple,
hideCheckToggler: hideCheckToggler,
itemCheckableOn: itemCheckableOn,
itemDraggableOn: itemDraggableOn
});
Cards.syncItems(store, _this.props) && _this.syncSelected();
return _this;
}
Cards.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);
typeof props.selected !== 'undefined' &&
store.updateSelected(props.selected, props.valueField);
return updateItems;
};
Cards.prototype.componentDidMount = function () {
var parent = (0, helper_1.getScrollParent)((0, react_dom_1.findDOMNode)(this));
if (!parent || parent === document.body) {
parent = window;
}
this.parentNode = parent;
this.affixDetect();
parent.addEventListener('scroll', this.affixDetect);
window.addEventListener('resize', this.affixDetect);
this.updateAutoFillHeight();
window.addEventListener('resize', this.updateAutoFillHeight);
};
Cards.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({
selectable: props.selectable,
draggable: props.draggable,
orderBy: props.orderBy,
orderDir: props.orderDir,
multiple: props.multiple,
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))))) {
Cards.syncItems(store, props, prevProps) && this.syncSelected();
}
else if (prevProps.selected !== props.selected) {
store.updateSelected(props.selected || [], props.valueField);
}
};
Cards.prototype.componentWillUnmount = function () {
var parent = this.parentNode;
parent && parent.removeEventListener('scroll', this.affixDetect);
window.removeEventListener('resize', this.affixDetect);
window.removeEventListener('resize', this.updateAutoFillHeight);
};
// fixAlignment() {
// if (!this.props.fixAlignment || this.props.masonryLayout) {
// return;
// }
// const dom = this.body as HTMLElement;
// const ns = this.props.classPrefix;
// const cards = [].slice.apply(dom.querySelectorAll(`.${ns}Cards-body > div`));
// if (!cards.length) {
// return;
// }
// let maxHeight = cards.reduce((maxHeight:number, item:HTMLElement) => Math.max(item.offsetHeight, maxHeight), 0);
// cards.forEach((item: HTMLElement) => item.style.cssText += `min-height: ${maxHeight}px;`);
// }
Cards.prototype.bodyRef = function (ref) {
this.body = ref;
};
Cards.prototype.itemsRef = function (ref) {
if (ref) {
// this.unSensor = resizeSensor(ref.parentNode as HTMLElement, this.fixAlignmentLazy);
}
else {
this.unSensor && this.unSensor();
// @ts-ignore;
delete this.unSensor;
}
};
Cards.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 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 - 10 < offsetY && clip.top + clip.height - 40 > offsetY;
var afixedDom = dom.querySelector("." + ns + "Cards-fixedTop");
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);
};
Cards.prototype.updateAutoFillHeight = function () {
var _this = this;
var _a, _b, _c;
var _d = this.props, ns = _d.classPrefix, affixHeader = _d.affixHeader;
if (!this.body)
return;
var dom = (0, react_dom_1.findDOMNode)(this);
//tab页平铺模式样式处理
var tabsDom = dom.closest("." + ns + "Tabs--content-tiled");
if ((0, helper_1.isMobile)() && (this.props.filterRender || ((_a = this.props.headerBulkActions) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.props.footerBulkActions) === null || _b === void 0 ? void 0 : _b.length))) {
var mobileHeader_1 = (affixHeader ? (_c = dom.querySelectorAll("." + ns + "Mobile-header-toolbar-wrapper")) === null || _c === void 0 ? void 0 : _c[1] : dom.querySelector("." + ns + "Mobile-header-toolbar-wrapper"));
if (!mobileHeader_1) {
if (this.updateAutoFillHeightTimes < 10) {
this.updateAutoFillHeightTimes++;
setTimeout(function () {
_this.updateAutoFillHeight();
}, 100);
return;
}
else {
this.updateAutoFillHeightTimes = 0;
}
}
if (mobileHeader_1) {
setTimeout(function () {
if (tabsDom) { //移动端tabs平铺模式时取消头部固定
mobileHeader_1.style.position = 'unset';
}
else {
var pannelDom = dom.closest("." + ns + "Panel");
if (pannelDom) { //首页移动端pannel限制高度时，取消头部的固定
var classList = pannelDom.className.split(' ');
for (var _i = 0, classList_1 = classList; _i < classList_1.length; _i++) {
var name = classList_1[_i];
if (name.includes('h-')) {
mobileHeader_1.style.position = 'unset';
return;
}
}
}
else {
var tableTop = (0, offset_1.default)(dom).top;
mobileHeader_1.style.top = tableTop + 'px';
mobileHeader_1.nextElementSibling.style.paddingTop = '48px';
}
}
mobileHeader_1.style.width = dom.clientWidth + 'px';
}, 100);
}
}
};
Cards.prototype.handleAction = function (e, action, ctx) {
var onAction = this.props.onAction;
// 需要支持特殊事件吗？
onAction(e, action, ctx);
};
Cards.prototype.handleCheck = function (item) {
item.toggle();
this.syncSelected();
};
Cards.prototype.handleCheckAll = function () {
var store = this.props.store;
store.toggleAll();
this.syncSelected();
};
Cards.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; }));
};
Cards.prototype.handleQuickChange = function (item, values, saveImmediately, saveSilent, resetOnFailed) {
item.change(values, saveSilent);
if (!saveImmediately || saveSilent) {
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);
};
Cards.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; }));
};
Cards.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; }));
};
Cards.prototype.reset = function () {
var store = this.props.store;
store.reset();
};
Cards.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); });
};
Cards.prototype.getSelected = function () {
var store = this.props.store;
return store.selectedItems.map(function (item) { return item.data; });
};
Cards.prototype.dragTipRef = function (ref) {
if (!this.dragTip && ref) {
this.initDragging();
}
else if (this.dragTip && !ref) {
this.destroyDragging();
}
this.dragTip = ref;
};
Cards.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 + "Cards-body"), {
group: 'table',
animation: 150,
handle: "." + ns + "Card-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);
}
});
};
Cards.prototype.destroyDragging = function () {
this.sortable && this.sortable.destroy();
};
Cards.prototype.renderActions = function (region) {
var _this = this;
var _a = this.props, actions = _a.actions, render = _a.render, store = _a.store, multiple = _a.multiple, selectable = _a.selectable, cx = _a.classnames, ns = _a.classPrefix, env = _a.env;
var btn;
actions = Array.isArray(actions) ? actions.concat() : [];
if (!~this.renderedToolbars.indexOf('check-all') &&
!store.hideCheckToggler && //Aug
this.getMobileUI() && //Aug
(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('Cards-actions') }, actions.map(function (action, key) {
return render("action/" + key, (0, tslib_1.__assign)({ type: 'button' }, action), {
onAction: _this.handleAction,
key: key,
btnDisabled: store.dragging
});
}))) : null;
};
Cards.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('Cards-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;
};
Cards.prototype.renderStatistic = function () {
var _a = this.props, statistic = _a.statistic, cx = _a.classnames, render = _a.render;
if (statistic) {
return (react_1.default.createElement("div", { className: cx('Cards-statistic') }, render('statistic', statistic)));
}
return null;
};
// Aug
Cards.prototype.getMobileUI = function () {
return (0, helper_1.isMobile)() && this.props.useMobileUI;
};
Cards.prototype.renderHeader = function () {
var _a, _b, _c;
var _d = this.props, header = _d.header, headerClassName = _d.headerClassName, headerToolbar = _d.headerToolbar, headerToolbarRender = _d.headerToolbarRender, showHeader = _d.showHeader, render = _d.render, store = _d.store, cx = _d.classnames, __ = _d.translate, filterRender = _d.filterRender, //Aug
data = _d.data;
if (showHeader === false) {
return null;
}
// Aug
if (this.getMobileUI()) {
{ /* 搜索 */ }
var isFilter = !!Object.keys(data.filterParam || {}).length;
var filterNode = filterRender && filterRender(isFilter);
{ /* 批量 */ }
var checkAll = (((_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();
store.toggableHideCheck();
} }, store.hideCheckToggler ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("i", { className: 'fa fa-tasks batch-manage-icon' }),
react_1.default.createElement("span", { className: 'batch-text' }, "\u9009\u62E9")) : __('Wizard.finish')) : null;
return filterNode || checkAll ? (react_1.default.createElement("div", { className: cx('Mobile-header-toolbar-wrapper') },
react_1.default.createElement("div", { className: 'filter-conditions' },
typeof data.total == 'number' ? data.total + "\u6761\u6570\u636E" : null,
((_c = data.selectedItems) === null || _c === void 0 ? void 0 : _c.length) ? react_1.default.createElement("span", { style: { marginLeft: 10 } }, "\u5DF2\u9009" + data.selectedItems.length + "\u6761") : null),
react_1.default.createElement("div", { className: 'header-btns' },
filterNode,
checkAll))) : null;
}
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)
: null;
var actions = this.renderActions('header');
var toolbarNode = actions || child || store.dragging ? (react_1.default.createElement("div", { className: cx('Cards-toolbar'), key: "header-toolbar" },
actions,
child,
store.dragging ? (react_1.default.createElement("div", { className: cx('Cards-dragTip'), ref: this.dragTipRef }, __('Card.dragTip'))) : null)) : null;
var headerNode = header ? (react_1.default.createElement("div", { className: cx('Cards-header', headerClassName), key: "header" }, render('header', header))) : null;
return headerNode && toolbarNode
? [headerNode, toolbarNode]
: headerNode || toolbarNode || null;
};
Cards.prototype.renderFooter = function () {
var _a = this.props, footer = _a.footer, footerClassName = _a.footerClassName, headerToolbar = _a.headerToolbar, //Aug
footerToolbar = _a.footerToolbar, footerToolbarRender = _a.footerToolbarRender, render = _a.render, showFooter = _a.showFooter, store = _a.store, cx = _a.classnames;
if (showFooter === false) {
return null;
}
// Aug
var _footer = footerToolbar || [];
if (this.getMobileUI()) {
// 勾选批量状态时
if (!store.hideCheckToggler) {
_footer = ["bulkActions"];
}
else {
if (headerToolbar) {
// 移动端将所有操作统一放在在底部
_footer = _footer.concat(headerToolbar);
}
// 非勾选状态不渲染批量操作
_footer = _footer.filter(function (item) {
var type = item.type || item;
return !['bulk-actions', '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, _footer //Aug
)
: null;
var actions = this.renderActions('footer');
var toolbarNode = actions || child ? (react_1.default.createElement("div", { className: cx('Cards-toolbar'), key: "footer-toolbar" },
actions,
child)) : null;
var footerNode = footer ? (react_1.default.createElement("div", { className: cx('Cards-footer', footerClassName), key: "footer" }, render('footer', footer))) : null;
return footerNode && toolbarNode
? [toolbarNode, footerNode]
: footerNode || toolbarNode || null;
};
Cards.prototype.renderCheckAll = function () {
var _a = this.props, store = _a.store, multiple = _a.multiple, selectable = _a.selectable, cx = _a.classnames, ns = _a.classPrefix, __ = _a.translate;
if (!store.selectable ||
!multiple ||
!selectable ||
store.dragging ||
!store.items.length) {
return null;
}
// return (
// <Button
// key="checkall"
// tooltip="切换全选"
// onClick={this.handleCheckAll}
// size="sm"
// level={store.allChecked ? 'info' : 'default'}
// >
// 全选
// </Button>
// );
// Aug
return (this.getMobileUI() ? react_1.default.createElement("div", { key: "checkall", className: cx('Mobile-checkall') },
react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, type: multiple ? 'checkbox' : 'radio', checked: store.allChecked, onChange: this.handleCheckAll, inline: true }),
react_1.default.createElement("span", null, __('Select.checkAll'))) :
react_1.default.createElement(Button_1.default, { key: "checkall", onClick: this.handleCheckAll, size: "sm", level: store.allChecked ? 'info' : 'default' }, __('Select.checkAll')));
};
Cards.prototype.renderDragToggler = function () {
var _a = this.props, store = _a.store, multiple = _a.multiple, selectable = _a.selectable, env = _a.env, __ = _a.translate;
if (!store.draggable || store.items.length < 2) {
return null;
}
return (react_1.default.createElement(Button_1.default, { iconOnly: true, key: "dragging-toggle", tooltip: __('Card.toggleDrag'), tooltipContainer: env && env.getModalContainer ? env.getModalContainer : 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" })));
};
Cards.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();
}
return void 0;
};
Cards.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, store = _a.store, columnsCount = _a.columnsCount, itemClassName = _a.itemClassName, placeholder = _a.placeholder, render = _a.render, affixHeader = _a.affixHeader, card = _a.card, onAction = _a.onAction, multiple = _a.multiple, hideCheckToggler = _a.hideCheckToggler, checkOnItemClick = _a.checkOnItemClick, masonryLayout = _a.masonryLayout, itemsClassName = _a.itemsClassName, cx = _a.classnames, data = _a.data, __ = _a.translate, autoFillHeight = _a.autoFillHeight, infinteLoad = _a.infinteLoad, onLoadMore = _a.onLoadMore, loadHasMore = _a.loadHasMore;
this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
var itemFinalClassName = columnsCount
? "Grid-col--sm" + Math.round(12 / columnsCount)
: itemClassName || '';
var header = this.renderHeader();
var heading = this.renderHeading();
var statistic = this.renderStatistic();
var footer = this.renderFooter();
var masonryClassName = '';
if (masonryLayout) {
masonryClassName =
'Cards--masonry ' +
itemFinalClassName
.split(/\s/)
.map(function (item) {
if (/^Grid-col--(xs|sm|md|lg)(\d+)/.test(item)) {
return "Cards--masonry" + (0, helper_1.ucFirst)(RegExp.$1) + RegExp.$2;
}
return item;
})
.join(' ');
}
return (react_1.default.createElement("div", { ref: this.bodyRef, className: cx('Cards', className, {
'Cards--unsaved': !!store.modified || !!store.moved,
// Aug
'is-mobile': this.getMobileUI(),
}) },
affixHeader ? (react_1.default.createElement("div", { className: cx('Cards-fixedTop') },
header,
heading)) : null,
header,
heading,
statistic,
react_1.default.createElement("div", { className: cx('Cards-content', {
'hasHeader': header,
'hasFooter': footer,
}) },
store.items.length ? (react_1.default.createElement("div", { ref: this.itemsRef, className: cx('Cards-body Grid', itemsClassName, masonryClassName) }, store.items.map(function (item, index) {
return (react_1.default.createElement("div", { key: item.index, className: cx(itemFinalClassName) }, render("" + index, (0, tslib_1.__assign)({
// @ts-ignore
type: 'card' }, card), {
className: cx((card && card.className) || '', {
'is-checked': item.checked,
'is-modified': item.modified,
'is-moved': item.moved
}),
item: item,
intemIndex: item.index,
multiple: multiple,
hideCheckToggler: store.hideCheckToggler,
selectable: store.selectable,
checkable: item.checkable,
draggable: item.draggable,
selected: item.checked,
onSelect: item.toggle,
dragging: store.dragging,
data: item.locals,
checkOnItemClick: checkOnItemClick,
onAction: onAction,
onCheck: _this.handleCheck,
onQuickChange: store.dragging
? null
: _this.handleQuickChange
})));
}))) :
(react_1.default.createElement("div", { className: cx('Cards-placeholder') }, render('placeholder', __(placeholder)))),
infinteLoad && react_1.default.createElement(InfinteSroll_1.default, { loadMore: onLoadMore, hasMore: loadHasMore })),
footer));
};
Cards.propsList = [
'header',
'headerToolbarRender',
'footer',
'footerToolbarRender',
'placeholder',
'source',
'selectable',
'headerClassName',
'footerClassName',
'fixAlignment',
'hideQuickSaveBtn',
'hideCheckToggler',
'itemCheckableOn',
'itemDraggableOn',
'masonryLayout',
'items',
'valueField'
];
Cards.defaultProps = {
className: '',
placeholder: 'placeholder.noData',
source: '$items',
selectable: false,
headerClassName: '',
footerClassName: '',
itemClassName: 'Grid-col--sm6 Grid-col--md4 Grid-col--lg3',
// fixAlignment: false,
// hideCheckToggler: false,
hideCheckToggler: (0, helper_1.isMobile)(),
masonryLayout: false,
affixHeader: true,
itemsClassName: ''
};
return Cards;
}(react_1.default.Component));
exports.default = Cards;
var CardsRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(CardsRenderer, _super);
function CardsRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
CardsRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
test: /(^|\/)(?:crud\/body\/grid|cards)$/,
name: 'cards',
storeType: list_1.ListStore.name,
weight: -100 // 默认的 grid 不是这样，这个只识别 crud 下面的 grid
})
], CardsRenderer);
return CardsRenderer;
}(Cards));
exports.CardsRenderer = CardsRenderer;
//# sourceMappingURL=./renderers/Cards.js.map