fastlion-amis
Version:
一种MIS页面生成工具
344 lines (343 loc) • 23.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListItemRenderer = exports.LionListRenderer = exports.LionList = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../../../factory");
var List_1 = tslib_1.__importStar(require("../../../renderers/List"));
var list_1 = require("../../../store/list");
var react_dom_1 = require("react-dom");
var offset_1 = (0, tslib_1.__importDefault)(require("../../../utils/offset"));
var dom_1 = require("../../../utils/dom");
var Button_1 = (0, tslib_1.__importDefault)(require("../../../components/Button"));
var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../../components/Checkbox"));
require("./index.css");
var InfinteSroll_1 = (0, tslib_1.__importDefault)(require("../components/InfinteSroll"));
var helper_1 = require("../../../utils/helper");
var tpl_1 = require("../../../utils/tpl");
var tpl_builtin_1 = require("../../../utils/tpl-builtin");
var errImg = 'data:image/png;base64,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';
var LionList = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LionList, _super);
function LionList(props) {
var _this = _super.call(this, props) || this;
_this.state = {
morePopVisible: false
};
_this.pullUpRefresh = function (e) {
var target = e.target;
var scrollHeight = target === null || target === void 0 ? void 0 : target.scrollHeight;
var scrollTop = target === null || target === void 0 ? void 0 : target.scrollTop;
var clientHeight = target === null || target === void 0 ? void 0 : target.clientHeight;
if (Math.ceil(scrollTop + clientHeight) >= scrollHeight && !_this.xhrTimer) {
_this.xhrTimer = setTimeout(function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var res, _a;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
clearTimeout(this.xhrTimer);
this.xhrTimer = null;
_a = this.props.onPullUpRequest;
if (!_a) return [3 /*break*/, 2];
return [4 /*yield*/, this.props.onPullUpRequest({})];
case 1:
_a = (_b.sent());
_b.label = 2;
case 2:
res = _a;
return [2 /*return*/];
}
});
}); }, 100);
}
};
// 移动端默认隐藏勾选框
if (_this.getMobileUI() && props.hideCheckToggler === void 0) {
props.store.update({ hideCheckToggler: true });
}
return _this;
}
LionList.prototype.componentDidMount = function () {
this.calcAutoFillHeight();
};
LionList.prototype.calcAutoFillHeight = function () {
var _a = this.props, _b = _a.autoFillHeight, autoFillHeight = _b === void 0 ? true : _b, footerToolbar = _a.footerToolbar, ns = _a.classPrefix;
if (!autoFillHeight) {
return;
}
var dom = (0, react_dom_1.findDOMNode)(this);
var top = (0, offset_1.default)(dom).top;
var viewportHeight = window.innerHeight;
var allParentPaddingButtom = 0;
var parentNode = dom.parentElement;
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 n = viewportHeight - top - allParentPaddingButtom;
dom.style.height = n + 'px';
};
LionList.prototype.getMobileUI = function () {
return (0, helper_1.isMobile)() && this.props.useMobileUI;
};
LionList.prototype.renderHeader = function () {
var _a = this.props, header = _a.header, headerClassName = _a.headerClassName, headerToolbar = _a.headerToolbar, headerToolbarRender = _a.headerToolbarRender, render = _a.render, showHeader = _a.showHeader, store = _a.store, cx = _a.classnames;
if (showHeader === false) {
return 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 ? (react_1.default.createElement("div", { className: cx('List-toolbar', headerClassName), key: "header-toolbar" },
actions,
child)) : 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;
};
LionList.prototype.renderFooter = function () {
var _a = this.props, footer = _a.footer, footerClassName = _a.footerClassName, footerToolbar = _a.footerToolbar, headerToolbar = _a.headerToolbar, footerToolbarRender = _a.footerToolbarRender, render = _a.render, showFooter = _a.showFooter, store = _a.store, cx = _a.classnames;
if (showFooter === false) {
return null;
}
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'].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,
// PC端始终显示foottoolbar, 移动端勾选状态显示 批量
_footer)
: null;
var actions = this.renderActions('footer');
var toolbarNode = actions || child ? (react_1.default.createElement("div", { className: cx('List-toolbar', 'List-footer', footerClassName), 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;
};
LionList.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 (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",
// tooltip="切换全选"
onClick: this.handleCheckAll, size: "sm", level: store.allChecked ? 'info' : 'default' }, __('Select.checkAll')));
};
LionList.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, env = _a.env, ns = _a.classPrefix, cx = _a.classnames;
var btn;
actions = Array.isArray(actions) ? actions.concat() : [];
if (!~this.renderedToolbars.indexOf('check-all') &&
!store.hideCheckToggler &&
this.getMobileUI() &&
(btn = this.renderCheckAll())) {
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) {
return render("action/" + key, (0, tslib_1.__assign)({ type: 'button' }, action), {
onAction: _this.handleAction,
key: key,
btnDisabled: store.dragging
});
}))) : null;
};
LionList.prototype.renderHeaderContent = function () {
var _a = this.props, render = _a.render, cx = _a.classnames, __ = _a.translate, getModalContainer = _a.env.getModalContainer, filterRender = _a.filterRender, store = _a.store;
if (this.getMobileUI()) {
{ /* 搜索 */ }
var filterNode = filterRender && filterRender();
{ /* 批量 */ }
var checkAll = !~this.renderedToolbars.indexOf('check-all') && this.renderCheckAll() ?
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("i", { className: 'fa fa-tasks batch-manage-icon' }) : __('Wizard.finish')) : null;
return filterNode || checkAll ? (react_1.default.createElement("div", { className: cx('Mobile-header-toolbar-wrapper') },
filterNode,
checkAll)) : null;
}
var heading = this.renderHeading();
var header = this.renderHeader();
return react_1.default.createElement(react_1.default.Fragment, null,
header,
heading);
};
LionList.prototype.render = function () {
var _a;
var _this = this;
var _b = this.props, className = _b.className, itemClassName = _b.itemClassName, store = _b.store, render = _b.render, multiple = _b.multiple, listItem = _b.listItem, onAction = _b.onAction, checkOnItemClick = _b.checkOnItemClick, itemAction = _b.itemAction, cx = _b.classnames, size = _b.size, __ = _b.translate, onLoadMore = _b.onLoadMore, loadHasMore = _b.loadHasMore, infinteLoad = _b.infinteLoad;
this.renderedToolbars = [];
var header = this.renderHeaderContent();
var footer = this.renderFooter();
return (react_1.default.createElement("div", { className: cx('List', 'LionList', className, (_a = {},
_a["List--" + size] = size,
_a['List--unsaved'] = !!store.modified || !!store.moved,
_a['is-mobile'] = this.getMobileUI(),
_a)), ref: this.bodyRef },
header,
react_1.default.createElement("div", { className: cx('List-content', {
'hasHeader': header,
'hasFooter': footer,
}) },
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: 'lion-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: store.hideCheckToggler,
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
});
}))) : null,
infinteLoad && react_1.default.createElement(InfinteSroll_1.default, { loadMore: onLoadMore, hasMore: loadHasMore })),
footer));
};
LionList.defaultProps = {
hideCheckToggler: (0, helper_1.isMobile)()
};
return LionList;
}(List_1.default));
exports.LionList = LionList;
var LionListRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LionListRenderer, _super);
function LionListRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
LionListRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'lion-list',
storeType: list_1.ListStore.name
})
], LionListRenderer);
return LionListRenderer;
}(LionList));
exports.LionListRenderer = LionListRenderer;
var ListItemRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ListItemRenderer, _super);
function ListItemRenderer(props) {
return _super.call(this, props) || this;
}
ListItemRenderer.prototype.getValue = function (name, data) {
var rest = [];
for (var _i = 2; _i < arguments.length; _i++) {
rest[_i - 2] = arguments[_i];
}
return (0, tpl_builtin_1.isPureVariable)(name) ? tpl_1.filter.apply(void 0, (0, tslib_1.__spreadArray)([name, data], rest, false)) : data[name];
};
ListItemRenderer.prototype.render = function () {
var _this = this;
var _a, _b;
var _c = this.props, className = _c.className, data = _c.data, avatar = _c.avatar, title = _c.title, titleClassName = _c.titleClassName, subTitle = _c.subTitle, desc = _c.desc, avatarClassName = _c.avatarClassName, checkOnItemClick = _c.checkOnItemClick, render = _c.render, checkable = _c.checkable, cx = _c.classnames, actionsPosition = _c.actionsPosition, itemAction = _c.itemAction, $schema = _c.$schema, env = _c.env,
// Jay
footable = _c.footable, footBody = _c.footBody;
var avaterImg = this.getValue(avatar, data, '| raw');
if (avaterImg) {
var baseUrl = ((_b = (_a = env === null || env === void 0 ? void 0 : env.axiosInstance) === null || _a === void 0 ? void 0 : _a.defaults) === null || _b === void 0 ? void 0 : _b.baseURL) || (env === null || env === void 0 ? void 0 : env.ajaxApi) || '';
avaterImg = baseUrl + avaterImg;
}
return (
// Jay
react_1.default.createElement("div", { className: cx('ListItem-wapper') },
react_1.default.createElement("div", { className: cx("ListItem ListItem--actions-at-" + (actionsPosition || 'right'), {
'ListItem--hasItemAction': itemAction
}, className,
// Jay
typeof (footable) === 'object' && footable.expand === 'all' && 'expand'),
// Jay
onTouchStart: function () {
footable && (_this.touchStartTime = +new Date());
},
// 这里不能用onTouchEnd，否则会有一些bug
onClick: function (e) {
if (footable && (+new Date() - _this.touchStartTime < 300)) {
if (/expand/.test(e.currentTarget.className)) {
e.currentTarget.classList.remove('expand');
}
else {
e.currentTarget.classList.add('expand');
}
}
((checkOnItemClick && checkable) || itemAction)
&& _this.handleClick(e);
} },
this.renderLeft(),
$schema.avatar ? (react_1.default.createElement("span", { className: cx('ListItem-avatar', avatarClassName) },
react_1.default.createElement("img", { src: avaterImg || errImg, alt: "..." }))) : null,
react_1.default.createElement("div", { className: cx('ListItem-content') },
title ? (react_1.default.createElement("p", { className: cx('ListItem-title', titleClassName) }, this.getValue(title, data))) : null,
subTitle ? (react_1.default.createElement("div", null,
react_1.default.createElement("small", { className: cx('ListItem-subtitle') }, this.getValue(subTitle, data)))) : null,
desc ? react_1.default.createElement("small", { className: cx('ListItem-subtitle') }, this.getValue(desc, data)) : null,
this.renderBody()),
this.renderRight()),
footable && (footBody === null || footBody === void 0 ? void 0 : footBody.length) &&
react_1.default.createElement("div", { className: cx('ListItem-footable', 'flex-wrap') }, footBody === null || footBody === void 0 ? void 0 : footBody.map(function (column, index) {
return react_1.default.createElement("div", { key: index, className: 'footItem flex items-center' },
react_1.default.createElement("span", { className: "label" },
column.label,
" :"),
react_1.default.createElement("span", { className: "value" }, column.type ? render("field", column, { key: index, data: data }) : (data[column.name] || '-')));
}))));
};
var _a;
ListItemRenderer.propsList = (0, tslib_1.__spreadArray)(['multiple'], List_1.ListItem.propsList, true);
ListItemRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
test: /(^|\/)(?:lion-list|lion-list-group)\/(?:.*\/)?lion-list-item$/,
name: 'lion-list-item'
}),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof List_1.ListItemProps !== "undefined" && List_1.ListItemProps) === "function" ? _a : Object])
], ListItemRenderer);
return ListItemRenderer;
}(List_1.ListItem));
exports.ListItemRenderer = ListItemRenderer;
//# sourceMappingURL=./renderers/Lion/List/index.js.map