fastlion-amis
Version:
一种MIS页面生成工具
541 lines (540 loc) • 27.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResetRenderer = exports.SubmitRenderer = exports.ButtonRenderer = exports.ActionRenderer = exports.Action = exports.createSyntheticEvent = exports.isSomeActionSchema = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var hotkeys_js_1 = (0, tslib_1.__importDefault)(require("hotkeys-js"));
var factory_1 = require("../factory");
var tpl_1 = require("../utils/tpl");
var Button_1 = (0, tslib_1.__importDefault)(require("../components/Button"));
var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
var index_1 = (0, tslib_1.__importDefault)(require("./Lion/components/LionCopyItem/index"));
var font_1 = (0, tslib_1.__importDefault)(require("../icons/font"));
var isSomeActionSchema = function (actionType, actionSchema) { return actionSchema.actionType == actionType; };
exports.isSomeActionSchema = isSomeActionSchema;
var ActionProps = [
'dialog',
'drawer',
'url',
'link',
'confirmText',
'tooltip',
'disabledTip',
'className',
'asyncApi',
'redirect',
'size',
'level',
'primary',
'feedback',
'api',
'blank',
'tooltipPlacement',
'to',
'cc',
'bcc',
'subject',
'body',
'content',
'required',
'type',
'actionType',
'label',
'icon',
'rightIcon',
'reload',
'target',
'close',
'messages',
'mergeData',
'index',
'copy',
'payload',
'requireSelected',
'lionChildView',
'exportType',
'sellerUrl',
'application_id',
'redirect_uri',
'schemaApi',
// Jay 标签打印相关
'defValAddApi',
'defValDelApi',
'defValGetApi',
'labelDataApi',
'templateApi',
'callbackApi',
'numberField',
'labelId',
];
var Remark_1 = require("./Remark");
var theme_1 = require("../theme");
var helper_1 = require("../utils/helper");
var icon_1 = require("../utils/icon");
var Badge_1 = require("../components/Badge");
var api_1 = require("../utils/api");
var TooltipWrapper_1 = require("../components/TooltipWrapper");
var utils_1 = require("../utils/utils");
// 构造一个假的 React 事件避免可能的报错，主要用于快捷键功能
// 来自 https://stackoverflow.com/questions/27062455/reactjs-can-i-create-my-own-syntheticevent
var createSyntheticEvent = function (event) {
var isDefaultPrevented = false;
var isPropagationStopped = false;
var preventDefault = function () {
isDefaultPrevented = true;
event.preventDefault();
};
var stopPropagation = function () {
isPropagationStopped = true;
event.stopPropagation();
};
return {
nativeEvent: event,
currentTarget: event.currentTarget,
target: event.target,
bubbles: event.bubbles,
cancelable: event.cancelable,
defaultPrevented: event.defaultPrevented,
eventPhase: event.eventPhase,
isTrusted: event.isTrusted,
preventDefault: preventDefault,
isDefaultPrevented: function () { return isDefaultPrevented; },
stopPropagation: stopPropagation,
isPropagationStopped: function () { return isPropagationStopped; },
persist: function () { },
timeStamp: event.timeStamp,
type: event.type
};
};
exports.createSyntheticEvent = createSyntheticEvent;
var allowedType = ['button', 'submit', 'reset'];
var Action = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Action, _super);
function Action(props) {
var _this = _super.call(this, props) || this;
_this.state = {
inCountDown: false,
countDownEnd: 0,
timeLeft: 0,
menuVisible: false
};
_this.localStorageKey = 'amis-countdownend-' + (_this.props.name || '');
var countDownEnd = parseInt(localStorage.getItem(_this.localStorageKey) || '0');
if (countDownEnd && _this.props.countDown) {
if (Date.now() < countDownEnd) {
_this.state = {
inCountDown: true,
countDownEnd: countDownEnd,
timeLeft: Math.floor((countDownEnd - Date.now()) / 1000)
};
_this.handleCountDown();
}
}
return _this;
}
// @autobind
// async handleContextMenu(e: React.MouseEvent<any>, visible: boolean = true) {
// e.preventDefault()
// console.log(e.currentTarget, findDOMNode(this))
// if (e.currentTarget === findDOMNode(this)) {
// this.setState({
// menuVisible: visible
// })
// } else {
// this.setState({
// menuVisible: false
// })
// }
// }
Action.prototype.handleAction = function (e) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _a, onAction, disabled, countDown, store, data, env, onClick, form, _store_data, result, _b, action, actionType, api, countDownEnd;
var _this = this;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
_a = this.props, onAction = _a.onAction, disabled = _a.disabled, countDown = _a.countDown, store = _a.store, data = _a.data, env = _a.env;
// https://reactjs.org/docs/legacy-event-pooling.html
e.persist();
onClick = this.props.onClick;
if (store) {
form = store === null || store === void 0 ? void 0 : store.form;
_store_data = store === null || store === void 0 ? void 0 : store.data;
}
if (typeof onClick === 'string') {
onClick = (0, api_1.str2AsyncFunction)(onClick, 'event', 'props');
}
_b = onClick;
if (!_b) return [3 /*break*/, 2];
return [4 /*yield*/, onClick(e, this.props)];
case 1:
_b = (_c.sent());
_c.label = 2;
case 2:
result = _b;
if (disabled ||
e.isDefaultPrevented() ||
result === false ||
!onAction ||
this.state.inCountDown) {
return [2 /*return*/];
}
e.preventDefault();
action = (0, pick_1.default)(this.props, ActionProps);
actionType = action.actionType;
// Jay
// actionType === 'ajax'且配置了confirmText，在本地测试时不要选择移动端，直接在谷歌浏览器切换移动端模式，缩小宽度即可
// 否则在那个手机框里（iframe）不会弹窗显示
// ajax 会在 wrapFetcher 里记录，这里再处理就重复了，因此去掉
// add 一般是 input-table 之类的，会触发 formItemChange，为了避免重复也去掉
if (actionType !== 'ajax' &&
actionType !== 'download' &&
actionType !== 'add') {
env === null || env === void 0 ? void 0 : env.tracker({
eventType: actionType || this.props.type || 'click',
eventData: (0, omit_1.default)(action, ['type', 'actionType', 'tooltipPlacement'])
}, this.props);
}
// download 是一种 ajax 的简写
if (actionType === 'download') {
action.actionType = 'ajax';
api = (0, api_1.normalizeApi)(action.api);
api.responseType = 'blob';
action.api = api;
}
onAction(e, action);
if (countDown) {
countDownEnd = Date.now() + countDown * 1000;
this.setState({
countDownEnd: countDownEnd,
inCountDown: true,
timeLeft: countDown
});
localStorage.setItem(this.localStorageKey, String(countDownEnd));
setTimeout(function () {
_this.handleCountDown();
}, 1000);
}
return [2 /*return*/];
}
});
});
};
Action.prototype.handleCountDown = function () {
var _this = this;
// setTimeout 一般会晚于 1s，经过几十次后就不准了，所以使用真实时间进行 diff
var timeLeft = Math.floor((this.state.countDownEnd - Date.now()) / 1000);
if (timeLeft <= 0) {
this.setState({
inCountDown: false,
timeLeft: timeLeft
});
}
else {
this.setState({
timeLeft: timeLeft
});
setTimeout(function () {
_this.handleCountDown();
}, 1000);
}
};
Action.prototype.componentDidMount = function () {
var _this = this;
var hotKey = this.props.hotKey;
var _a = this.props, store = _a.store, data = _a.data;
var form;
var _store_data;
if (store) {
form = store === null || store === void 0 ? void 0 : store.form;
_store_data = store === null || store === void 0 ? void 0 : store.data;
}
// // 将提交的字段进行替换，以解决初始化的问题
// Object.keys(data).map((item: any) => {
// if (data.hasOwnProperty('temp_' + item)) {
// data[item] = data['temp_' + item];
// deleteVariable(data, 'temp_' + item);
// delete data['temp_' + item];
// if (form) {
// form[item] = data[item];
// deleteVariable(form, 'temp_' + item);
// delete form['temp_' + item];
// }
// if (_store_data) {
// _store_data[item] = data[item];
// deleteVariable(_store_data, 'temp_' + item);
// delete _store_data['temp_' + item];
// }
// }
// });
if (hotKey) {
(0, hotkeys_js_1.default)(hotKey, function (event) {
event.preventDefault();
var click = new MouseEvent('click', {
bubbles: true,
cancelable: true
});
_this.handleAction((0, exports.createSyntheticEvent)(click));
});
}
};
Action.prototype.componentWillUnmount = function () {
var hotKey = this.props.hotKey;
if (hotKey) {
hotkeys_js_1.default.unbind(hotKey);
}
};
Action.prototype.handleIcon = function () {
var _a = this.props, label = _a.label, flowpath = _a.flowpath;
if (label && flowpath) {
var hashNum = (0, utils_1.getHashCode)(label) % 54 || 0;
var targetIcon = font_1.default[hashNum];
return react_1.default.createElement("div", { className: "card-item-icon_amis", style: {
backgroundColor: targetIcon.color,
} },
react_1.default.createElement("i", { className: targetIcon.icon }));
}
return;
};
Action.prototype.render = function () {
var _a;
var _b;
var _c = this.props, type = _c.type, icon = _c.icon, iconClassName = _c.iconClassName, rightIcon = _c.rightIcon, rightIconClassName = _c.rightIconClassName, loadingClassName = _c.loadingClassName, primary = _c.primary, size = _c.size, level = _c.level, countDownTpl = _c.countDownTpl, block = _c.block, className = _c.className, componentClass = _c.componentClass, tooltip = _c.tooltip, disabledTip = _c.disabledTip, tooltipPlacement = _c.tooltipPlacement, actionType = _c.actionType, link = _c.link, data = _c.data, __ = _c.translate, activeClassName = _c.activeClassName, isCurrentUrl = _c.isCurrentUrl, isMenuItem = _c.isMenuItem, active = _c.active, activeLevel = _c.activeLevel, tooltipTrigger = _c.tooltipTrigger, tooltipContainer = _c.tooltipContainer, tooltipRootClose = _c.tooltipRootClose, loading = _c.loading, body = _c.body, render = _c.render, cx = _c.classnames, ns = _c.classPrefix, butColor = _c.butColor, flowpath = _c.flowpath;
if (actionType !== 'email' && body) {
return (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { classPrefix: ns, classnames: cx, placement: tooltipPlacement, tooltip: tooltip, container: tooltipContainer, trigger: tooltipTrigger, rootClose: tooltipRootClose },
react_1.default.createElement("div", { className: cx('Action', className), onClick: this.handleAction }, render('body', body))));
}
var label = this.props.label;
var disabled = this.props.disabled;
var isActive = !!active;
if (actionType === 'link' && !isActive && link && isCurrentUrl) {
isActive = isCurrentUrl(link);
}
// 倒计时
if (this.state.inCountDown) {
label = (0, Remark_1.filterContents)(__(countDownTpl), (0, tslib_1.__assign)((0, tslib_1.__assign)({}, data), { timeLeft: this.state.timeLeft }));
disabled = true;
}
var iconElement = (0, icon_1.generateIcon)(cx, icon, 'Button-icon', iconClassName);
var rightIconElement = (0, icon_1.generateIcon)(cx, rightIcon, 'Button-icon', rightIconClassName);
return (react_1.default.createElement(react_1.default.Fragment, null,
flowpath ?
react_1.default.createElement("div", { className: "card-item_amis", onClick: this.handleAction },
this.handleIcon() && this.handleIcon(),
react_1.default.createElement("div", { className: "card-item-name_amis" },
!loading ? iconElement : '',
label ? react_1.default.createElement(react_1.default.Fragment, null, (0, tpl_1.filter)(String(label), data)) : null,
rightIconElement)) :
// chencicsy 用于执行赋值name操作
react_1.default.createElement(index_1.default, { showItems: [{
value: this.props.id || this.props.name,
label: "复制名称",
icon: "fa fa-sticky-note-o"
}], env: (_b = this.props) === null || _b === void 0 ? void 0 : _b.env },
react_1.default.createElement(Button_1.default, { className: cx(className, (_a = {},
_a[activeClassName || 'is-active'] = isActive,
_a)), size: size, onContextMenu: function (e) { e.preventDefault(); }, level: activeLevel && isActive
? activeLevel
: level || (primary ? 'primary' : undefined), onClick: this.handleAction, loadingClassName: loadingClassName, loading: loading, type: type && ~allowedType.indexOf(type) ? type : 'button', disabled: disabled, componentClass: isMenuItem ? 'a' : componentClass, overrideClassName: isMenuItem, tooltip: (0, Remark_1.filterContents)(tooltip, data), disabledTip: (0, Remark_1.filterContents)(disabledTip, data), tooltipPlacement: tooltipPlacement, tooltipContainer: tooltipContainer, tooltipTrigger: tooltipTrigger, tooltipRootClose: tooltipRootClose, block: block, iconOnly: !!(icon && !label && level !== 'link'), butColor: butColor },
!loading ? iconElement : '',
label ? react_1.default.createElement("span", null, (0, tpl_1.filter)(String(label), data)) : null,
rightIconElement)),
" "));
};
var _a;
Action.defaultProps = {
type: 'button',
componentClass: 'button',
tooltipPlacement: 'bottom',
activeClassName: 'is-active',
countDownTpl: 'Action.countDown',
countDown: 0
};
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _a : Object]),
(0, tslib_1.__metadata)("design:returntype", Promise)
], Action.prototype, "handleAction", 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)
], Action.prototype, "handleCountDown", 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)
], Action.prototype, "componentDidMount", 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)
], Action.prototype, "componentWillUnmount", null);
return Action;
}(react_1.default.Component));
exports.Action = Action;
exports.default = (0, theme_1.themeable)(Action);
var ActionRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ActionRenderer, _super);
function ActionRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
ActionRenderer.prototype.handleAction = function (e, action) {
var _a;
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _b, env, onAction, data, ignoreConfirm, dispatchEvent, confirmApi, rendererEvent, confirmMsg, _c;
var _this = this;
return (0, tslib_1.__generator)(this, function (_d) {
switch (_d.label) {
case 0:
_b = this.props, env = _b.env, onAction = _b.onAction, data = _b.data, ignoreConfirm = _b.ignoreConfirm, dispatchEvent = _b.dispatchEvent, confirmApi = _b.confirmApi;
return [4 /*yield*/, dispatchEvent(e, data)];
case 1:
rendererEvent = _d.sent();
// 阻止原有动作执行
if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
return [2 /*return*/];
}
if (!(!ignoreConfirm && action.confirmText && env.confirm)) return [3 /*break*/, 2];
env
.confirm((0, tpl_1.filter)(action.confirmText, data))
.then(function (confirmed) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var confirmMsg, _a;
var _b;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
_a = confirmApi;
if (!_a) return [3 /*break*/, 2];
return [4 /*yield*/, env.fetcher(confirmApi, data)];
case 1:
_a = (_c.sent());
_c.label = 2;
case 2:
confirmMsg = _a;
if ((confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.status) === 10004 || (confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.status) === 10001) {
env.notify('warning', confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.msg);
return [2 /*return*/];
}
else if ((confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.status) === 10003) {
env === null || env === void 0 ? void 0 : env.confirm((0, tpl_1.filter)((_b = confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.data) === null || _b === void 0 ? void 0 : _b.showText, data)).then(function (confirmd) {
if (confirmd) {
// env?.notify("success", "操作执行成功")
onAction(e, action, data);
}
return;
});
return [2 /*return*/];
}
return [2 /*return*/, confirmed && onAction(e, action, data)];
}
});
}); });
return [3 /*break*/, 5];
case 2:
_c = confirmApi;
if (!_c) return [3 /*break*/, 4];
return [4 /*yield*/, env.fetcher(confirmApi, data)];
case 3:
_c = (_d.sent());
_d.label = 4;
case 4:
confirmMsg = _c;
if ((confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.status) === 10004 || (confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.status) === 10001) {
env.notify('warning', confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.msg);
return [2 /*return*/];
}
else if ((confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.status) === 10003) {
env === null || env === void 0 ? void 0 : env.confirm((0, tpl_1.filter)((_a = confirmMsg === null || confirmMsg === void 0 ? void 0 : confirmMsg.data) === null || _a === void 0 ? void 0 : _a.showText, data)).then(function (confirmd) {
if (confirmd) {
// env?.notify("success", "操作执行成功")
onAction(e, action, data);
}
return;
});
return [2 /*return*/];
}
onAction(e, action, data);
_d.label = 5;
case 5: return [2 /*return*/];
}
});
});
};
ActionRenderer.prototype.isCurrentAction = function (link) {
var _a = this.props, env = _a.env, data = _a.data;
return env.isCurrentUrl((0, tpl_1.filter)(link, data));
};
ActionRenderer.prototype.render = function () {
var _a = this.props, env = _a.env, disabled = _a.disabled, btnDisabled = _a.btnDisabled, loading = _a.loading, rest = (0, tslib_1.__rest)(_a, ["env", "disabled", "btnDisabled", "loading"]);
return (react_1.default.createElement(Action, (0, tslib_1.__assign)({}, rest, { env: env, disabled: disabled || btnDisabled, onAction: this.handleAction, loading: loading, isCurrentUrl: this.isCurrentAction, tooltipContainer: env.getModalContainer ? env.getModalContainer : undefined })));
};
var _b;
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Object, Object]),
(0, tslib_1.__metadata)("design:returntype", Promise)
], ActionRenderer.prototype, "handleAction", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [String]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ActionRenderer.prototype, "isCurrentAction", null);
ActionRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'action'
})
// @ts-ignore 类型没搞定
,
Badge_1.withBadge
], ActionRenderer);
return ActionRenderer;
}(react_1.default.Component));
exports.ActionRenderer = ActionRenderer;
var ButtonRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ButtonRenderer, _super);
function ButtonRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
ButtonRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'button'
})
], ButtonRenderer);
return ButtonRenderer;
}(ActionRenderer));
exports.ButtonRenderer = ButtonRenderer;
var SubmitRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(SubmitRenderer, _super);
function SubmitRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
SubmitRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'submit'
})
], SubmitRenderer);
return SubmitRenderer;
}(ActionRenderer));
exports.SubmitRenderer = SubmitRenderer;
var ResetRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ResetRenderer, _super);
function ResetRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
ResetRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'reset'
})
], ResetRenderer);
return ResetRenderer;
}(ActionRenderer));
exports.ResetRenderer = ResetRenderer;
//# sourceMappingURL=./renderers/Action.js.map