fastlion-amis
Version:
一种MIS页面生成工具
151 lines (150 loc) • 12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.fakeQuickEdit = exports.SimpleSpanType = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var antd_1 = require("antd");
var components_1 = require("../../../components");
var lodash_1 = require("lodash");
var tpl_1 = require("../../../utils/tpl");
var sub_1 = require("../../../utils/sub");
var icons_1 = require("../../../components/icons");
var setting_1 = require("../../../utils/setting");
var Switch_1 = (0, tslib_1.__importDefault)(require("../../Form/Switch"));
var InputDate_1 = (0, tslib_1.__importDefault)(require("../../Form/InputDate"));
var InputText_1 = (0, tslib_1.__importDefault)(require("../../Form/InputText"));
var InputNumber_1 = (0, tslib_1.__importDefault)(require("../../Form/InputNumber"));
var locale_1 = require("../../../locale");
var helper_1 = require("../../../utils/helper");
var SimpleSpanType;
(function (SimpleSpanType) {
SimpleSpanType["Switch"] = "switch";
SimpleSpanType["InputDate"] = "input-date";
SimpleSpanType["InputDateTime"] = "input-datetime";
SimpleSpanType["Mapping"] = "mapping";
SimpleSpanType["InputText"] = "input-text";
SimpleSpanType["InputNumber"] = "input-number";
SimpleSpanType["LionFormula"] = "lion-formula";
SimpleSpanType["LionUpload"] = "lion-upload";
})(SimpleSpanType = exports.SimpleSpanType || (exports.SimpleSpanType = {}));
var ClassCache = {};
var createClass = function (classNames, classFn) {
var key = classNames.join(' ');
return ClassCache[key] || (ClassCache[key] = classFn.apply(void 0, classNames));
};
exports.fakeQuickEdit = [
SimpleSpanType.Switch,
SimpleSpanType.InputText,
SimpleSpanType.InputNumber,
SimpleSpanType.InputDateTime,
SimpleSpanType.InputDate
];
var SimpleSpan = function (_a) {
var _b, _c;
var value = _a.value, column = _a.column, item = _a.item, render = _a.render, cx = _a.cx, multiple = _a.multiple, _d = _a.tableId, tableId = _d === void 0 ? '' : _d, _e = _a.itemIndex, itemIndex = _e === void 0 ? 0 : _e, _f = _a.ns, ns = _f === void 0 ? '' : _f, _g = _a.classPrefix, classPrefix = _g === void 0 ? '' : _g, _h = _a.env, env = _h === void 0 ? {} : _h, _j = _a.primaryField, primaryField = _j === void 0 ? '' : _j, _k = _a.prefixContent, prefixContent = _k === void 0 ? null : _k, _l = _a.className, className = _l === void 0 ? '' : _l;
var pristine = column.pristine;
var prefix = pristine.prefix, suffix = pristine.suffix, kilobitSeparator = pristine.kilobitSeparator, precision = pristine.precision, _m = pristine.showUppercase, showUppercase = _m === void 0 ? 0 : _m;
var simpleTextRef = (0, react_1.useRef)(null);
var _o = (0, react_1.useState)(false), overFlowVisible = _o[0], setOverFlowVisible = _o[1];
var baseParam = { classnames: cx, value: value, classPrefix: ns || 'cxd-' };
var editCellParam = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), pristine), pristine.quickEdit), baseParam);
var disabled = pristine.disabledOn && (0, tpl_1.evalExpression)(pristine.disabledOn, item.data);
var canEdit = !disabled && (!pristine.quickEditEnabledOn || (0, tpl_1.evalExpression)(pristine.quickEditEnabledOn, item.data));
var _p = (0, react_1.useState)(false), isOverflowing = _p[0], setIsOverFlowing = _p[1];
(0, react_1.useEffect)(function () {
// 渲染10次后，计算是否溢出
// let renderCount = 10
// let renderFnId: number
// 增加一个定时器 刚开始先不计算，scrollWidth 与 clientWidth 会引起页面重绘，导致性能问题。刚开始几帧不计算，
if (simpleTextRef.current) {
var renderFn = function () {
// renderFnId = requestAnimationFrame(() => {
// if (renderCount) {
// renderCount--
// renderFn()
// } else
if (simpleTextRef.current) {
if (simpleTextRef.current.scrollWidth > simpleTextRef.current.clientWidth) {
setIsOverFlowing(true);
}
}
// })
};
renderFn();
}
return function () {
// cancelAnimationFrame(renderFnId)
};
}, [simpleTextRef.current, value]);
if (pristine.quickEdit && canEdit && exports.fakeQuickEdit.includes(editCellParam.type)) {
var commonProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, editCellParam), { className: createClass(['Form-control'], cx), translate: (0, locale_1.makeTranslator)() });
switch (editCellParam.type) {
case SimpleSpanType.Switch:
return (react_1.default.createElement("div", { className: createClass(['Form', 'Form--normal', 'Form--quickEdit'], cx) },
react_1.default.createElement("div", { className: createClass(['Form-item', 'Form-item--normal', 'ReadOnly-item'], cx) },
react_1.default.createElement(Switch_1.default, (0, tslib_1.__assign)({}, commonProps)))));
case SimpleSpanType.InputText:
return (react_1.default.createElement("div", { className: createClass(['Form', 'Form--normal', 'Form--quickEdit'], cx) },
react_1.default.createElement("div", { className: createClass(['Form-item', 'Form-item--normal', 'ReadOnly-item'], cx) },
react_1.default.createElement(InputText_1.default, (0, tslib_1.__assign)({ onChange: function () {
var _a;
sub_1.EventSub.emit(tableId + "/" + sub_1.EventEnum.ShowVistiMap, itemIndex + 1, (_a = item.data) === null || _a === void 0 ? void 0 : _a.colIndex, true);
}, selectedOptions: [], className: createClass(['Form-control'], cx), translate: (0, locale_1.makeTranslator)() }, editCellParam)))));
case SimpleSpanType.InputNumber:
return (react_1.default.createElement("div", { className: createClass(['Form', 'Form--normal', 'Form--quickEdit'], cx) },
react_1.default.createElement("div", { className: createClass(['Form-item', 'Form-item--normal', 'ReadOnly-item'], cx) },
react_1.default.createElement(InputNumber_1.default, (0, tslib_1.__assign)({}, commonProps, { onChange: function () { var _a; return tableId && sub_1.EventSub.emit(tableId + "/" + sub_1.EventEnum.ShowVistiMap, itemIndex + 1, (_a = item.data) === null || _a === void 0 ? void 0 : _a.colIndex, true); } })))));
case SimpleSpanType.InputDate:
return (react_1.default.createElement("div", { className: createClass(['Form', 'Form--normal', 'Form--quickEdit'], cx) },
react_1.default.createElement("div", { className: createClass(['Form-item', 'Form-item--normal', 'ReadOnly-item'], cx) },
react_1.default.createElement(InputDate_1.default, (0, tslib_1.__assign)({}, commonProps)))));
}
}
switch (column.type) {
case '__checkme':
return (react_1.default.createElement(components_1.Checkbox, { classPrefix: ns, type: multiple ? 'checkbox' : 'radio', checked: item === null || item === void 0 ? void 0 : item.checked, disabled: !!!(item === null || item === void 0 ? void 0 : item.checkable) }));
case SimpleSpanType.Mapping: {
var values_1 = (value + '').split(pristine.delimiter);
return (react_1.default.createElement("span", { className: createClass(['MappingField'], cx) },
prefixContent,
(0, lodash_1.isNil)(value)
? setting_1.UserSetting.tableEmptyValueSetting
: values_1.map(function (v, i) {
var _a, _b;
return (react_1.default.createElement(react_1.default.Fragment, { key: i },
react_1.default.createElement("span", { className: createClass(['TplField'], cx) },
react_1.default.createElement("span", { title: ((_a = column === null || column === void 0 ? void 0 : column.map) === null || _a === void 0 ? void 0 : _a[v]) || v, dangerouslySetInnerHTML: { __html: ((_b = column === null || column === void 0 ? void 0 : column.map) === null || _b === void 0 ? void 0 : _b[v]) || v } })),
i < values_1.length - 1 ? pristine.delimiter : ''));
})));
}
case SimpleSpanType.LionUpload:
return react_1.default.createElement(react_1.default.Fragment, null, setting_1.UserSetting.tableEmptyValueSetting);
}
if (typeof value === 'object') {
return (0, lodash_1.isNil)(value) ? (react_1.default.createElement("div", { style: { width: '100%', display: 'contents' } },
react_1.default.createElement("span", null,
prefixContent,
" ",
setting_1.UserSetting.tableEmptyValueSetting))) : (react_1.default.createElement("span", null,
prefixContent,
"\u590D\u6742\u7C7B\u578B"));
}
var displayValue = !(0, lodash_1.isNil)(value) ? (0, helper_1.standardValueText)(value, { prefix: prefix, suffix: suffix, kilobitSeparator: kilobitSeparator, precision: precision, showUppercase: showUppercase }) : setting_1.UserSetting.tableEmptyValueSetting;
return (react_1.default.createElement("div", { className: createClass(['Tpltab'], cx), style: { width: '100%' } },
react_1.default.createElement("span", { ref: simpleTextRef, title: displayValue, className: createClass(['PlainField'], cx) },
prefixContent,
displayValue),
isOverflowing ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Popover, { content: react_1.default.createElement("span", { className: createClass(['PlainField'], cx) }, displayValue), trigger: 'click', visible: overFlowVisible, overlayClassName: cx('TplPop'), getPopupContainer: env.getModalContainer, autoAdjustOverflow: true, destroyTooltipOnHide: true, placement: 'rightTop', onVisibleChange: function (visible) { return setOverFlowVisible(visible); }, title: react_1.default.createElement("div", { className: cx('Title-tplPop'), onClick: function (e) { return e.stopPropagation(); } },
react_1.default.createElement("div", null, (column === null || column === void 0 ? void 0 : column.label) + ": " + (primaryField ? ((0, lodash_1.isNil)((_b = item === null || item === void 0 ? void 0 : item.data) === null || _b === void 0 ? void 0 : _b[primaryField]) ? setting_1.UserSetting.tableEmptyValueSetting : (_c = item === null || item === void 0 ? void 0 : item.data) === null || _c === void 0 ? void 0 : _c[primaryField]) : setting_1.UserSetting.tableEmptyValueSetting)),
react_1.default.createElement("div", null,
" ",
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon", style: { cursor: 'pointer' }, onClick: function () { return setOverFlowVisible(false); } }))) },
react_1.default.createElement(icons_1.Icon, { onClick: function (e) { return e.stopPropagation(); }, icon: "provincial", className: [cx('TplSaving'), 'icon'] })))
: react_1.default.createElement(react_1.default.Fragment, null)));
};
var arePropsEqual = function (prev, next) {
return (prev.value === next.value) && (next.column.type === '_checkme' && prev.checked === next.checked);
};
exports.default = (0, react_1.memo)(SimpleSpan, arePropsEqual);
//# sourceMappingURL=./renderers/Table/simpleTableCell/SimpleSpan.js.map