fastlion-amis
Version:
一种MIS页面生成工具
809 lines • 64.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NativeNumberControlRenderer = exports.NativeTimeControlRenderer = exports.NativeDateControlRenderer = exports.UrlControlRenderer = exports.EmailControlRenderer = exports.PasswordControlRenderer = exports.TextControlRenderer = exports.mapItemIndex = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Options_1 = require("./Options");
var downshift_1 = (0, tslib_1.__importDefault)(require("downshift"));
var match_sorter_1 = require("match-sorter");
var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
var tpl_1 = require("../../utils/tpl");
var find_1 = (0, tslib_1.__importDefault)(require("lodash/find"));
var icons_1 = require("../../components/icons");
var Input_1 = (0, tslib_1.__importDefault)(require("../../components/Input"));
var helper_1 = require("../../utils/helper");
var api_1 = require("../../utils/api");
var Spinner_1 = (0, tslib_1.__importDefault)(require("../../components/Spinner"));
var icon_1 = require("../../utils/icon");
// Jay
var antd_1 = require("antd");
var button_1 = (0, tslib_1.__importDefault)(require("antd/lib/button"));
var input_1 = (0, tslib_1.__importDefault)(require("antd/lib/input"));
var shell_1 = require("../../utils/shell");
var sub_1 = require("../../utils/sub");
var icons_2 = require("@ant-design/icons");
var TextareaPop_1 = (0, tslib_1.__importDefault)(require("../../components/common/TextareaPop"));
var lodash_1 = require("lodash");
var utils_1 = require("../Lion/utils/utils");
var selectTimer = false;
var TextControl = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TextControl, _super);
function TextControl(props) {
var _this = _super.call(this, props) || this;
_this.intersection = {}; // 元素可见性观察器
_this.sugsRef = react_1.default.createRef();
_this.addAutoFocus = function () {
// 如果已经有定时器 或者非保持聚焦 不走这个逻辑
if (_this.foucsTimer) { // 清了原来的 换一个新的
clearInterval(_this.foucsTimer);
}
if (!_this.props.keepcursor)
return;
_this.foucsTimer = setInterval(function () {
var _a;
// 如果没有其他聚焦 或者不是checkbox 或者 radio 类型 自动聚焦
var focusInput = document.querySelector(('*:focus'));
var inputRect = (_a = _this.input) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); // input的计算大小
// 如果input被其他元素遮住 阻止输入 返回 失焦
if (document.elementFromPoint(((inputRect === null || inputRect === void 0 ? void 0 : inputRect.x) || 0) + ((inputRect === null || inputRect === void 0 ? void 0 : inputRect.width) || 0) / 2, ((inputRect === null || inputRect === void 0 ? void 0 : inputRect.y) || 0) + ((inputRect === null || inputRect === void 0 ? void 0 : inputRect.height) || 0) / 2) !== _this.input)
return;
// 如果有其他选中元素 失去焦点
if (focusInput)
return;
_this.focus();
}, 100);
var clearListen = function () {
clearInterval(_this.foucsTimer);
_this.foucsTimer = null; // 显式释放定时器
};
// // 点击其他地方自动移除-不立马添加 防止点击自己的时候也出这个问题
// setTimeout(() => {
// document.addEventListener('click', clearListen, { once: true })
// }, 100)
};
_this.handleNormalInputChange = function (e) {
var _a, _b, _c, _d;
e.stopPropagation();
var inputRect = (_a = _this.input) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); // input的计算大小
// 如果input被其他元素遮住 阻止输入 返回 失焦
if (document.elementFromPoint(((inputRect === null || inputRect === void 0 ? void 0 : inputRect.x) || 0) + ((inputRect === null || inputRect === void 0 ? void 0 : inputRect.width) || 0) / 2, ((inputRect === null || inputRect === void 0 ? void 0 : inputRect.y) || 0) + ((inputRect === null || inputRect === void 0 ? void 0 : inputRect.height) || 0) / 2) !== _this.input)
return (_b = _this.input) === null || _b === void 0 ? void 0 : _b.blur();
var _e = _this.props, onChange = _e.onChange, updateImmediately = _e.updateImmediately;
var value = e.currentTarget.value;
// Jay
_this.setState({
inputValue: value,
defaultValue: value,
});
(_d = (_c = _this.props) === null || _c === void 0 ? void 0 : _c.onHandleChange) === null || _d === void 0 ? void 0 : _d.call(_c, _this.transformValue(value));
onChange === null || onChange === void 0 ? void 0 : onChange(_this.transformValue(value), undefined, updateImmediately);
};
_this.popoverRef = function (dom) {
var _a = _this.props, ns = _a.classPrefix, name = _a.name;
_this.popover = dom;
if (_this.popover) {
if (localStorage.getItem('textControlInput') && typeof localStorage.getItem('textControlInput') == 'string') {
var textControlInput = JSON.parse(localStorage.getItem('textControlInput'));
if (Array.isArray(textControlInput) && textControlInput.some(function (item) { return item.name == name; })) {
var style = textControlInput.find(function (item) { return item.name == name; }).style;
var tplText = _this.popover.querySelector("." + ns + "TplPopover");
tplText.style.height = style.height + 'px';
tplText.style.width = style.width + 'px';
}
}
var tplPopTop = _this.popover.querySelector("." + ns + "Footer-tplPop-top");
var tplPopRight = _this.popover.querySelector("." + ns + "Footer-tplPop-right");
var tplPopLeft = _this.popover.querySelector("." + ns + "Footer-tplPop-left");
var tplPopBottom = _this.popover.querySelector("." + ns + "Footer-tplPop-bottom");
tplPopTop.addEventListener('mousedown', _this.onMousedown);
tplPopRight.addEventListener('mousedown', _this.onMousedown);
tplPopLeft.addEventListener('mousedown', _this.onMousedown);
tplPopBottom.addEventListener('mousedown', _this.onMousedown);
}
};
_this.onMousedown = function (e) {
e.preventDefault();
e.stopPropagation();
var _a = _this.props, ns = _a.classPrefix, name = _a.name;
if (!_this.popover || !document.defaultView)
return;
var tplText = _this.popover.querySelector("." + ns + "TplPopover");
var upErDown = e.target.className.includes('top') || e.target.className.includes('bottom');
var about = e.target.className.includes('left') || e.target.className.includes('right');
var textControlInput = [];
if (localStorage.getItem('textControlInput') && typeof localStorage.getItem('textControlInput') == 'string') {
textControlInput = JSON.parse(localStorage.getItem('textControlInput'));
if (textControlInput instanceof Object) {
textControlInput = [];
}
}
if (e.target.tagName.toLowerCase() === 'div') {
// 记录初始鼠标位置和弹窗初始宽高
var startX_1 = e.clientX;
var startY_1 = e.clientY;
var startWidth_1 = parseInt(document === null || document === void 0 ? void 0 : document.defaultView.getComputedStyle(tplText).width, 10);
var startHeight_1 = parseInt(document === null || document === void 0 ? void 0 : document.defaultView.getComputedStyle(tplText).height, 10);
// 设置鼠标移动事件
document.addEventListener('mousemove', resizeElement);
// 设置鼠标松开事件
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', resizeElement);
});
// 调整元素大小函数
function resizeElement(e) {
var newWidth = startWidth_1 + e.clientX - startX_1;
var newHeight = startHeight_1 + e.clientY - startY_1;
if (newWidth < 180)
return;
if (newHeight < 80)
return;
if (upErDown) {
tplText.style.height = newHeight + 'px';
}
if (about) {
tplText.style.width = newWidth + 'px';
}
if (textControlInput.some(function (item) { return item.name == name; })) {
var content = {
name: name,
style: {
width: newWidth,
height: newHeight,
}
};
textControlInput = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], textControlInput.filter(function (item) { return item.name !== name; }), true), [content], false);
}
else {
var content = {
name: name,
style: {
width: newWidth,
height: newHeight,
}
};
textControlInput = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], textControlInput, true), [content], false);
}
localStorage.setItem('textControlInput', JSON.stringify(textControlInput));
}
}
};
var value = props.value;
// Jay
var multipleValues = '';
if (props.multiple || props.creatable === false) {
}
else {
var delimiter = props.delimiter;
var t = _this.valueToString(value);
multipleValues = t ? t + delimiter : '';
multipleValues = multipleValues.replace(new RegExp("" + (_this.props.delimiter || ','), 'g'), '\n');
}
_this.state = {
privateType: _this.props.keepcursor ? 'password' : _this.props.isNumber ? 'tel' : '',
simulateSelectionPosition: 0,
isOpen: false,
inputValue: props.multiple || props.creatable === false
? ''
: _this.valueToString(value),
isFocused: false,
// Jay
popoverVisible: false,
multipleValues: multipleValues,
defaultValue: props.multiple || props.creatable === false
? ''
: _this.valueToString(value),
popoverVisibleDefault: false,
outerStyle: {}
};
_this.focus = _this.focus.bind(_this);
_this.clearValue = _this.clearValue.bind(_this);
_this.inputRef = _this.inputRef.bind(_this);
_this.handleClick = _this.handleClick.bind(_this);
_this.handleFocus = _this.handleFocus.bind(_this);
_this.addAutoFocus = _this.addAutoFocus.bind(_this);
_this.handleBlur = _this.handleBlur.bind(_this);
_this.handleInputChange = _this.handleInputChange.bind(_this);
_this.handleKeyDown = _this.handleKeyDown.bind(_this);
_this.handleChange = _this.handleChange.bind(_this);
_this.handleStateChange = _this.handleStateChange.bind(_this);
_this.handleKeyEnter = _this.handleKeyEnter.bind(_this);
_this.haneldText = _this.haneldText.bind(_this);
_this.loadAutoComplete = (0, debounce_1.default)(_this.loadAutoComplete.bind(_this), 250, {
trailing: true,
leading: false
});
_this.popoverIconRef = react_1.default.createRef(); // Jay
return _this;
}
TextControl.prototype.componentDidMount = function () {
var _this = this;
var _a = this.props, formItem = _a.formItem, autoComplete = _a.autoComplete, addHook = _a.addHook, formInited = _a.formInited, data = _a.data, name = _a.name, keepcursor = _a.keepcursor, disabled = _a.disabled;
if ((0, api_1.isEffectiveApi)(autoComplete, data) && formItem) {
if (formInited) {
formItem.loadOptions(autoComplete, (0, helper_1.createObject)(data, {
term: ''
}));
}
else {
this.unHook = addHook(function (data) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, formItem.loadOptions(autoComplete, (0, helper_1.createObject)(data, {
term: ''
}))];
case 1:
_a.sent();
if (formItem.value) {
(0, helper_1.setVariable)(data, name, formItem.value);
}
return [2 /*return*/];
}
});
}); }, 'init');
}
}
if (!disabled && keepcursor) {
// 自动聚焦观察器
// 如果需要保持focus状态 - 再元素第一次发生 不可见-> 可见状态时自动聚焦
this.intersection.observer = new IntersectionObserver(function (_a) {
var entry = _a[0];
_this.intersection.preIntersectionRatio = _this.intersection.curIntersectionRatio || 0; // 默认值适用
_this.intersection.curIntersectionRatio = entry.intersectionRatio;
// 意为出现了部分元素聚焦 并且没有定时器 适用自动聚焦
if (_this.intersection.preIntersectionRatio <= 0 && _this.intersection.curIntersectionRatio > 0) { // 如果需要持续聚焦，只要没有值就取消聚焦-可见状态才适用聚焦
_this.addAutoFocus();
}
else if (_this.intersection.curIntersectionRatio <= 0) {
// 看不到则取消定时器
clearInterval(_this.foucsTimer);
}
}, {
root: document.body
});
// 观察器挂载
this.addAutoFocus(); // 先加一个自动聚焦
this.intersection.observer.observe(this.input);
this.handleKeyEnter();
}
};
TextControl.prototype.componentDidUpdate = function (prevProps, prevState) {
var _a, _b, _c, _d, _e, _f;
var props = this.props;
if (props.keepcursor && props.inputfocus) {
this.handleKeyEnter();
}
if (prevProps.value !== props.value) {
this.setState({
inputValue: props.multiple || props.creatable === false
? ''
: this.valueToString(props.value),
defaultValue: props.multiple || props.creatable === false
? ''
: this.valueToString(props.value),
});
// Jay
if (props.isMultipleValues) {
var multipleValues = '';
if (props.multiple || props.creatable === false) {
}
else {
var _g = props.delimiter, delimiter = _g === void 0 ? ',' : _g;
var t = this.valueToString(props.value);
multipleValues = t ? t + delimiter : '';
multipleValues = multipleValues.replace(new RegExp("" + (this.props.delimiter || ','), 'g'), '\n');
}
this.setState({ multipleValues: multipleValues });
}
}
if (this.state.isOpen !== prevState.isOpen && this.state.isOpen) {
var ns = props.classPrefix;
//计算下拉框的位置
var outerStyle = {};
if (this.sugsRef.current && this.sugsRef.current.querySelector("." + ns + "TextControl-sugs")) {
var formControlData = this.sugsRef.current.getBoundingClientRect();
var popData = this.sugsRef.current.querySelector("." + ns + "TextControl-sugs");
var isOverSize = document.documentElement.clientHeight - (formControlData === null || formControlData === void 0 ? void 0 : formControlData.bottom) <= popData.clientHeight + 5;
if ((_a = this.sugsRef.current) === null || _a === void 0 ? void 0 : _a.closest("." + ns + "Modal-body")) {
if (shell_1.Shell.hasShell()) {
outerStyle = {
position: 'fixed',
display: 'block',
width: formControlData.width,
top: isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - popData.clientHeight : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height),
left: formControlData === null || formControlData === void 0 ? void 0 : formControlData.left
};
}
else {
var modalData = (_b = this.sugsRef.current.closest("." + ns + "Modal")) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
outerStyle = {
position: 'fixed',
display: 'block',
width: formControlData.width,
top: isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - popData.clientHeight - (modalData === null || modalData === void 0 ? void 0 : modalData.top) : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height) - (modalData === null || modalData === void 0 ? void 0 : modalData.top),
left: (formControlData === null || formControlData === void 0 ? void 0 : formControlData.left) - ((_c = this.sugsRef.current.closest("." + ns + "Modal-body")) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().left)
};
}
}
else {
outerStyle = {
position: 'fixed',
display: 'block',
width: formControlData.width,
top: isOverSize ? (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) - popData.clientHeight : (formControlData === null || formControlData === void 0 ? void 0 : formControlData.top) + (formControlData === null || formControlData === void 0 ? void 0 : formControlData.height),
left: formControlData === null || formControlData === void 0 ? void 0 : formControlData.left,
};
}
// 查看是否在拖拽弹窗中，如果在拖拽弹窗中，需要在popover显示的时候，取拖拽弹窗的translate的负值
var dragModal = (_d = this.sugsRef.current) === null || _d === void 0 ? void 0 : _d.closest('.fl-modal.pc-dialog');
var resizeContainer = dragModal === null || dragModal === void 0 ? void 0 : dragModal.querySelector('.resize-container.react-draggable');
var resizeTranslate = resizeContainer === null || resizeContainer === void 0 ? void 0 : resizeContainer.style.transform;
var translateValues = resizeTranslate === null || resizeTranslate === void 0 ? void 0 : resizeTranslate.match(/translate\(([^)]+)\)/);
var translateX = '0';
var translateY = '0';
if (translateValues && translateValues.length > 1) {
var _h = translateValues[1].split(','), x = _h[0], y = _h[1];
translateX = "-" + ((_e = x === null || x === void 0 ? void 0 : x.trim()) !== null && _e !== void 0 ? _e : 0);
translateY = "-" + ((_f = y === null || y === void 0 ? void 0 : y.trim()) !== null && _f !== void 0 ? _f : 0);
outerStyle = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, outerStyle), { transform: "translate(" + translateX + ", " + translateY + ")" });
}
this.setState({ outerStyle: outerStyle });
}
}
};
TextControl.prototype.componentWillUnmount = function () {
var _a, _b;
// 用完销毁
if (this.intersection.observer) {
(_b = (_a = this.intersection.observer) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
this.intersection = {};
}
if (this.popover) {
var ns = this.props.classPrefix;
var tplPopTop = this.popover.querySelector("." + ns + "Footer-tplPop-top");
var tplPopRight = this.popover.querySelector("." + ns + "Footer-tplPop-right");
var tplPopLeft = this.popover.querySelector("." + ns + "Footer-tplPop-left");
var tplPopBottom = this.popover.querySelector("." + ns + "Footer-tplPop-bottom");
tplPopTop.removeEventListener('mousemove', this.onMousedown);
tplPopRight.removeEventListener('mousemove', this.onMousedown);
tplPopLeft.removeEventListener('mousemove', this.onMousedown);
tplPopBottom.removeEventListener('mousemove', this.onMousedown);
}
if (this.foucsTimer)
clearInterval(this.foucsTimer);
this.unHook && this.unHook();
this.input = null;
clearTimeout(this.timer);
};
TextControl.prototype.inputRef = function (ref) {
var _a, _b, _c, _d;
this.input = ref;
if (ref && ((_a = ref.closest) === null || _a === void 0 ? void 0 : _a.call(ref, 'td'))) {
this.setState({ inputWidth: (_d = getComputedStyle((_c = (_b = this.input) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, 'td'))) === null || _d === void 0 ? void 0 : _d.width });
}
};
TextControl.prototype.focus = function () {
if (!this.input) {
return;
}
var _a = this.props, inputfocus = _a.inputfocus, handleInputFocus = _a.handleInputFocus;
this.input.focus();
// 光标放到最后
var len = this.input.value.length;
len && this.input.setSelectionRange(len, len);
inputfocus && handleInputFocus && handleInputFocus();
};
TextControl.prototype.clearValue = function () {
var _this = this;
var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
onChange(resetValue);
this.setState({
inputValue: resetValue
}, function () {
_this.focus();
_this.loadAutoComplete();
});
};
TextControl.prototype.removeItem = function (index) {
var _a = this.props, selectedOptions = _a.selectedOptions, onChange = _a.onChange, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, valueField = _a.valueField;
var newValue = selectedOptions.concat();
newValue.splice(index, 1);
onChange(joinValues
? newValue
.map(function (item) { return item[valueField || 'value']; })
.join(delimiter || ',')
: extractValue
? newValue.map(function (item) { return item[valueField || 'value']; })
: newValue);
};
TextControl.prototype.handleClick = function () {
var _a;
// this.focus();
(_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
this.addAutoFocus();
this.setState({
isOpen: true
});
};
TextControl.prototype.handleFocus = function (e) {
this.setState({
isOpen: true,
isFocused: true,
});
this.addAutoFocus();
this.props.onFocus && this.props.onFocus(e);
};
TextControl.prototype.handleBlur = function (e) {
var _a = this.props, onBlur = _a.onBlur, trimContents = _a.trimContents, value = _a.value, onChange = _a.onChange;
this.setState({
isFocused: false
}, function () {
if (trimContents && value && typeof value === 'string') {
onChange === null || onChange === void 0 ? void 0 : onChange(value.trim());
}
});
onBlur && onBlur(e);
};
TextControl.prototype.handleInputChange = function (evt) {
var _this = this;
var value = evt.currentTarget.value;
var _a = this.props, creatable = _a.creatable, multiple = _a.multiple, onChange = _a.onChange;
this.setState({
inputValue: value
}, function () {
if (creatable !== false && !multiple) {
onChange === null || onChange === void 0 ? void 0 : onChange(value);
}
_this.loadAutoComplete();
});
};
TextControl.prototype.handleKeyDown = function (evt) {
var _a = this.props, selectedOptions = _a.selectedOptions, onChange = _a.onChange, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, multiple = _a.multiple, valueField = _a.valueField, creatable = _a.creatable;
if (selectedOptions.length && !this.state.inputValue && evt.keyCode === 8) {
evt.preventDefault();
var newValue = selectedOptions.concat();
newValue.pop();
onChange === null || onChange === void 0 ? void 0 : onChange(joinValues
? newValue
.map(function (item) { return item[valueField || 'value']; })
.join(delimiter || ',')
: extractValue
? newValue.map(function (item) { return item[valueField || 'value']; })
: newValue);
this.setState({
inputValue: ''
}, this.loadAutoComplete);
}
else if (evt.keyCode === 13 &&
this.state.inputValue &&
typeof this.highlightedIndex !== 'number') {
evt.preventDefault();
var value_1 = this.state.inputValue;
if (multiple) {
if (value_1 && !(0, find_1.default)(selectedOptions, function (item) { return item.value == value_1; })) {
evt.stopPropagation();
var newValue = selectedOptions.concat();
newValue.push({
label: value_1,
value: value_1
});
onChange(joinValues
? newValue
.map(function (item) { return item[valueField || 'value']; })
.join(delimiter || ',')
: extractValue
? newValue.map(function (item) { return item[valueField || 'value']; })
: newValue);
}
}
else {
onChange(value_1);
}
if (creatable === false || multiple) {
this.setState({
inputValue: '',
isOpen: false
}, this.loadAutoComplete);
}
}
else if (evt.keyCode === 13 &&
this.state.isOpen &&
typeof this.highlightedIndex !== 'number') {
this.setState({
isOpen: false
});
}
};
TextControl.prototype.handleChange = function (value) {
var _a = this.props, onChange = _a.onChange, multiple = _a.multiple, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, selectedOptions = _a.selectedOptions, valueField = _a.valueField, creatable = _a.creatable;
if (multiple) {
var newValue = selectedOptions.concat();
newValue.push({
label: value,
value: value
});
onChange(joinValues
? newValue
.map(function (item) { return item[valueField || 'value']; })
.join(delimiter || ',')
: extractValue
? newValue.map(function (item) { return item[valueField || 'value']; })
: newValue);
}
else {
onChange(value);
}
if (multiple || creatable === false) {
this.setState({
inputValue: ''
}, this.loadAutoComplete);
}
};
TextControl.prototype.handleStateChange = function (changes) {
var creatable = this.props.creatable;
var multiple = this.props.multiple || this.props.multi;
switch (changes.type) {
case downshift_1.default.stateChangeTypes.itemMouseEnter:
this.setState({
isOpen: true
});
break;
case downshift_1.default.stateChangeTypes.changeInput:
this.setState({
isOpen: true
});
break;
default:
var state = {};
if (typeof changes.isOpen !== 'undefined') {
state.isOpen = changes.isOpen;
}
if (typeof changes.highlightedIndex !== 'undefined') {
this.highlightedIndex = changes.highlightedIndex;
}
// 输入框清空
if (!multiple &&
creatable === false &&
this.state.isOpen &&
changes.isOpen === false) {
state.inputValue = '';
}
this.setState(state);
break;
}
};
// 回车按下触发事件
TextControl.prototype.handleKeyEnter = function () {
var _a;
var Donm = document.getElementsByTagName("input");
if (this.props.disabled && Donm.length > 1) {
for (var index = 0; index < Donm.length; index++) {
if (Donm[index].type === "text") {
if (this.props.name === Donm[index].name) {
(_a = Donm[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
break;
}
}
}
}
else {
this.focus();
}
};
TextControl.prototype.handleKeyArrow = function (e) {
var _a, _b;
var _c = this.props, rowIndex = _c.rowIndex, colIndex = _c.colIndex;
var inputarray = [];
var containerTable = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'table');
var tableId = containerTable === null || containerTable === void 0 ? void 0 : containerTable.getAttribute('table-id');
if (!this.props.quickEditForm) {
// 触发自己
sub_1.EventSub.emit(tableId + "/" + sub_1.EventEnum.ShowVistiMap, rowIndex, colIndex, true);
// 并稍后聚焦
(0, helper_1.focusInputAndChooseInput)(e.currentTarget);
}
var Donm = containerTable === null || containerTable === void 0 ? void 0 : containerTable.querySelectorAll("input[col-index=\"" + this.props.colIndex + "\"]");
for (var index = 0; index < Donm.length; index++) {
if (Donm[index].type === "text" && this.props.name === Donm[index].name) {
inputarray.push(index);
}
}
if (inputarray.length) {
var _loop_1 = function (index) {
if (Donm[index].type === "text" && this_1.props.name === Donm[index].name && e.currentTarget === Donm[index]) {
inputarray.forEach(function (item, i) {
if (item == index) {
if (e.key === "ArrowDown") {
sub_1.EventSub.emit(tableId + "/" + sub_1.EventEnum.ShowVistiMap, rowIndex + 1, colIndex, true); // 广播订阅事件
if (i + 1 >= inputarray.length)
return;
(0, helper_1.focusInputAndChooseInput)(Donm[inputarray[i + 1]]);
}
else {
sub_1.EventSub.emit(tableId + "/" + sub_1.EventEnum.ShowVistiMap, rowIndex - 1, colIndex, true); // 广播订阅事件
if (i - 1 < 0)
return;
(0, helper_1.focusInputAndChooseInput)(Donm[inputarray[i - 1]]);
}
}
});
return "break";
}
};
var this_1 = this;
for (var index = 0; index < Donm.length; index++) {
var state_1 = _loop_1(index);
if (state_1 === "break")
break;
}
}
};
TextControl.prototype.transformValue = function (value) {
var _a = this.props, transform = _a.transform, isNumber = _a.isNumber;
if (isNumber) {
var val = value.trim();
if (/^[0-9]+$/.test(val)) {
return parseInt(val);
}
}
if (!transform) {
return value;
}
Object.keys(transform).forEach(function (key) {
var propValue = transform[key];
switch (key) {
case 'lowerCase':
propValue && (value = value.toLowerCase());
break;
case 'upperCase':
propValue && (value = value.toUpperCase());
break;
}
});
return value;
};
TextControl.prototype.loadAutoComplete = function () {
var _a = this.props, formItem = _a.formItem, autoComplete = _a.autoComplete, data = _a.data, multiple = _a.multiple, selectedOptions = _a.selectedOptions;
if ((0, api_1.isEffectiveApi)(autoComplete, data) && formItem) {
formItem.loadOptions(autoComplete, (0, helper_1.createObject)(data, {
term: this.state.inputValue || '' // (multiple ? '' : selectedOptions[selectedOptions.length - 1]?.value)
}), {
extendsOptions: true
});
}
};
TextControl.prototype.reload = function () {
var reload = this.props.reloadOptions;
reload && reload();
};
TextControl.prototype.valueToString = function (value) {
return typeof value === 'undefined' || value === null
? ''
: typeof value === 'string'
? value
: JSON.stringify(value);
};
TextControl.prototype.renderSugestMode = function () {
var _this = this;
var _a;
var _b = this.props, className = _b.className, inputOnly = _b.inputOnly, value = _b.value, placeholder = _b.placeholder, cx = _b.classnames, disabled = _b.disabled, name = _b.name, loading = _b.loading, clearable = _b.clearable, options = _b.options, selectedOptions = _b.selectedOptions, autoComplete = _b.autoComplete, labelField = _b.labelField, valueField = _b.valueField, multiple = _b.multiple, creatable = _b.creatable, borderMode = _b.borderMode, showCount = _b.showCount, __ = _b.translate, ns = _b.classPrefix;
var type = (_a = this.props.type) === null || _a === void 0 ? void 0 : _a.replace(/^(?:native|input)\-/, '');
var count = showCount && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > showCount;
return (react_1.default.createElement(downshift_1.default, { isOpen: this.state.isOpen && !disabled, inputValue: this.state.inputValue, onChange: this.handleChange, onStateChange: this.handleStateChange, selectedItem: selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map(function (item) { return item[valueField || 'value']; }) }, function (_a) {
var _b, _c;
var _d;
var getInputProps = _a.getInputProps, getItemProps = _a.getItemProps, isOpen = _a.isOpen, inputValue = _a.inputValue, selectedItem = _a.selectedItem, highlightedIndex = _a.highlightedIndex;
var filtedOptions = inputValue && isOpen && !autoComplete
? (0, match_sorter_1.matchSorter)(options, inputValue, {
keys: [labelField || 'label', valueField || 'value']
})
: options;
var indices = isOpen
? mapItemIndex(filtedOptions, selectedItem)
: {};
filtedOptions = filtedOptions === null || filtedOptions === void 0 ? void 0 : filtedOptions.filter(function (option) { return !~selectedItem.indexOf(option.value); });
return (react_1.default.createElement("div", null,
react_1.default.createElement(antd_1.Popover, { trigger: 'hover', placement: 'top', getPopupContainer: function () { return document.getElementById('amis-modal-container') || document.body; }, overlayClassName: cx('input-text-overflow-overlay', 'ResultBox-overflow-overlay'), content: multiple && !(0, helper_1.isMobile)() && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) ? (react_1.default.createElement("div", { className: cx("Select", (_b = {}, _b["Select--multi"] = multiple, _b)), style: { border: 'none' } },
(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 2 && react_1.default.createElement("div", { className: cx('ResultBox-value'), key: 'tags' },
react_1.default.createElement("span", { className: cx('ResultBox-valueLabel') }, selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length)),
react_1.default.createElement("div", { className: cx('Select-value-list') }, selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map(function (item, index) { return (react_1.default.createElement("div", { className: ns + "Select-value", key: index },
react_1.default.createElement("span", { className: ns + "Select-valueIcon " + (disabled || item.disabled ? 'is-disabled' : ''), onClick: _this.removeItem.bind(_this, index) }, "\u00D7"),
react_1.default.createElement("span", { className: ns + "Select-valueLabel" }, "" + item[labelField || 'label']))); })),
react_1.default.createElement("span", { className: 'copy-btn', onClick: function (e) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
e.stopPropagation();
e.preventDefault();
return [4 /*yield*/, (0, utils_1.copy)(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map(function (item) { return item.label; }).join(','))];
case 1:
_a.sent();
antd_1.message.success(__('System.copy'));
return [2 /*return*/];
}
});
}); } },
react_1.default.createElement(icons_1.Icon, { icon: "copy", className: "icon" })))) : null },
react_1.default.createElement("div", { className: cx("TextControl-input TextControl-input--withAC", inputOnly ? className : '', (_c = {
'is-opened': isOpen,
'TextControl-input--multiple': multiple
},
_c["TextControl-input--border" + (0, helper_1.ucFirst)(borderMode)] = borderMode,
_c)), onClick: _this.handleClick },
react_1.default.createElement(react_1.default.Fragment, null,
placeholder &&
!(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) &&
!_this.state.inputValue &&
!_this.state.isFocused ? (react_1.default.createElement("div", { className: cx('TextControl-placeholder') }, placeholder)) : null, (_d = (count ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.slice(0, showCount + 1) :
selectedOptions)) === null || _d === void 0 ? void 0 :
_d.map(function (item, index) { return multiple ?
react_1.default.createElement("div", { className: cx('TextControl-value'), key: index }, index == showCount ?
react_1.default.createElement("span", { className: cx('TextControl-valueLabel') },
"+ ",
((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - showCount))
:
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { className: cx('TextControl-valueIcon'), onClick: _this.removeItem.bind(_this, index) }, "\u00D7"),
react_1.default.createElement("span", { className: cx('TextControl-valueLabel') }, "" + item[labelField || 'label'])))
: (inputValue && isOpen) || creatable !== false ? null : (react_1.default.createElement("div", { className: cx('TextControl-value'), key: index }, item.label)); }),
react_1.default.createElement(Input_1.default, (0, tslib_1.__assign)({}, getInputProps({
name: name,
ref: _this.inputRef,
disabled: disabled,
type: type,
onFocus: _this.handleFocus,
onBlur: _this.handleBlur,
onChange: _this.handleInputChange,
onKeyDown: _this.handleKeyDown
}), { autoComplete: "off", size: 10, style: { width: "calc(100% - " + ((clearable && !disabled && value) ? '16px' : '0') + ")" } }))),
clearable && !disabled && value ? (react_1.default.createElement("div", { onClick: _this.clearValue, className: cx('TextControl-clear') },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))) : null,
loading ? (react_1.default.createElement(Spinner_1.default, { show: true, icon: "#icon-tooltool_continue" // 2025-03 产品要改icon
, symbol: true, spinnerClassName: cx('TextControl-spinner') })) : null,
isOpen && (filtedOptions === null || filtedOptions === void 0 ? void 0 : filtedOptions.length) ? (react_1.default.createElement("div", { className: cx('TextControl-sugs'), style: _this.state.outerStyle }, filtedOptions.map(function (option) {
return (react_1.default.createElement("div", (0, tslib_1.__assign)({}, getItemProps({
item: option.value,
disabled: option.disabled,
className: cx("TextControl-sugItem", {
'is-highlight': highlightedIndex === indices[option.value],
'is-disabled': option.disabled
})
}), { key: option.value }),
react_1.default.createElement("span", null,
option.disabled
? option.label
: (0, Options_1.highlight)(option.label, inputValue),
option.tip)));
}))) : null))));
}));
};
TextControl.prototype.renderNormal = function () {
var _a;
var _this = this;
var _b, _c, _d, _e, _f, _g, _h, _j;
var _k = this.props, ns = _k.classPrefix, cx = _k.classnames, className = _k.className, inputOnly = _k.inputOnly, value = _k.value, placeholder = _k.placeholder, onChange = _k.onChange, disabled = _k.disabled, readOnly = _k.readOnly, max = _k.max, min = _k.min, step = _k.step, clearable = _k.clearable, name = _k.name, borderMode = _k.borderMode, prefix = _k.prefix, suffix = _k.suffix, data = _k.data, showCounter = _k.showCounter, maxLength = _k.maxLength, domicile = _k.domicile, popOverContainer = _k.popOverContainer, defaultOpen = _k.defaultOpen, isNumber = _k.isNumber;
// 产品要求 数字类型 输入框只能输入数字
var rawType = (_b = this.props.type) === null || _b === void 0 ? void 0 : _b.replace(/^(?:native|input)\-/, '');
var type = isNumber ? 'tel' : rawType;
//获取字符串的字节数
function getBytesLength(str) {
return str.replace(/[^\u0000-\u00ff]/g, 'aa').length;
}
var _l = this.state, defaultValue = _l.defaultValue, popoverVisibleDefault = _l.popoverVisibleDefault;
var primaryField = (_c = this.props.store) === null || _c === void 0 ? void 0 : _c.primaryField;
var primaryVlaue = domicile ? ((_d = domicile === null || domicile === void 0 ? void 0 : domicile.data) === null || _d === void 0 ? void 0 : _d[primaryField]) ? (_e = domicile === null || domicile === void 0 ? void 0 : domicile.data) === null || _e === void 0 ? void 0 : _e[primaryField] : '' : '';
var primarylable = domicile ? domicile.label : '';
var placement = !(0, helper_1.isMobile)() ? 'rightTop' : 'bottomRight';
var popDefaultOpen = (react_1.default.createElement(antd_1.Popover, { visible: popoverVisibleDefault, trigger: 'click', overlayClassName: cx('TplPop', 'TplIndex'), getPopupContainer: popOverContainer, onVisibleChange: function (visible) { _this.setState({ popoverVisibleDefault: visible }); }, autoAdjustOverflow: true, destroyTooltipOnHide: true, placement: placement, content: (react_1.default.createElement("div", { ref: this.popoverRef },
react_1.default.createElement("div", { className: cx('TplPopover') },
react_1.default.createElement(input_1.default.TextArea, { style: { width: '100%', height: '100%', color: 'rgba(0,0,0,0.6)' }, rows: 6, placeholder: this.props.translate('CRUD.fillIn'), value: defaultValue, onChange: function (e) { _this.setState({ defaultValue: e.target.value }); }, onKeyDown: function (e) { return e.stopPropagation(); }, bordered: false })),
react_1.default.createElement("div", { className: cx('Footer-tplPop') },
react_1.default.createElement(button_1.default, { size: "small", style: { marginRight: 10, borderRadius: 5 }, onClick: function () { _this.setState({ popoverVisibleDefault: false }); } }, this.props.translate('Dialog.close')),
react_1.default.createElement(button_1.default, { size: "small", type: "primary", style: { borderRadius: 5 }, onClick: function () {
_this.handleDefaultValue();
_this.setState({ popoverVisibleDefault: false });
} }, this.props.translate('confirm'))),
react_1.default.createElement("div", { className: cx('Footer-tplPop-top') }),
react_1.default.createElement("div", { className: cx('Footer-tplPop-bottom') }),
react_1.default.createElement("div", { className: cx('Footer-tplPop-left') }),
react_1.default.createElement("div", { className: cx('Footer-tplPop-right') }))), title: (react_1.default.createElement("div", { className: cx('Title-tplPop') },
react_1.default.createElement("div", null, primarylable + ":" + ((0, lodash_1.isNil)(primaryVlaue) ? ''