fastlion-amis
Version:
一种MIS页面生成工具
199 lines (198 loc) • 12.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResultBox = void 0;
var tslib_1 = require("tslib");
var theme_1 = require("../theme");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var uncontrollable_1 = require("uncontrollable");
var icons_1 = require("./icons");
var Input_1 = (0, tslib_1.__importDefault)(require("./Input"));
var helper_1 = require("../utils/helper");
var locale_1 = require("../locale");
var isPlainObject = require("lodash/isPlainObject");
var antd_1 = require("antd");
var utils_1 = require("../renderers/Lion/utils/utils");
var tools_1 = require("../utils/shell/tools");
var ResultBox = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ResultBox, _super);
function ResultBox() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isFocused: false,
detailPopoverVisible: false,
// maxTagCount: undefined,
curResult: [] // 暂态的结果数组保存
};
_this.inputRef = react_1.default.createRef();
_this.containerRef = react_1.default.createRef();
_this.divRef = react_1.default.createRef();
return _this;
}
Object.defineProperty(ResultBox.prototype, "labelTransfer", {
get: function () {
var _a = this.props, render = _a.render, labelTpl = _a.labelTpl, result = _a.result;
if (!labelTpl || !render)
return (typeof result === 'object' ? result === null || result === void 0 ? void 0 : result.label : result);
return render("value", labelTpl, {
data: (0, helper_1.createObject)(result)
});
},
enumerable: false,
configurable: true
});
ResultBox.prototype.focus = function () {
var _a;
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
};
ResultBox.prototype.blur = function () {
var _a;
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
};
ResultBox.prototype.clearValue = function (e) {
e.preventDefault();
e.stopPropagation();
var onResultChange = this.props.onResultChange;
onResultChange === null || onResultChange === void 0 ? void 0 : onResultChange([]);
};
ResultBox.prototype.handleFocus = function (e) {
var onFocus = this.props.onFocus;
onFocus && onFocus(e);
this.setState({
isFocused: true
});
};
ResultBox.prototype.handleBlur = function (e) {
var onBlur = this.props.onBlur;
onBlur && onBlur(e);
this.setState({
isFocused: false
});
};
ResultBox.prototype.removeItem = function (e) {
e.stopPropagation();
e.preventDefault();
var _a = this.props, result = _a.result, onResultChange = _a.onResultChange;
var index = parseInt(e.currentTarget.getAttribute('data-index'), 10);
var newResult = Array.isArray(result) ? result.concat() : [];
newResult.splice(index, 1);
onResultChange === null || onResultChange === void 0 ? void 0 : onResultChange(newResult);
};
ResultBox.prototype.handleChange = function (e) {
var onChange = this.props.onChange;
onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
};
ResultBox.prototype.renderMultipeTags = function (tags) {
var _this = this;
var _a = this.props, itemRender = _a.itemRender, cx = _a.classnames, __ = _a.translate;
return (react_1.default.createElement(antd_1.Popover, { trigger: 'hover', placement: 'top', className: cx('ResultBox-popover-value'), getPopupContainer: function () { return document.getElementById('amis-modal-container') || document.body; }, overlayClassName: cx('ResultBox-overflow-overlay'), content: tools_1.tools.isPc ? react_1.default.createElement("div", { className: cx('ResultBox-overflow-wrapper') },
(tags === null || tags === void 0 ? void 0 : tags.length) && (tags === null || tags === void 0 ? void 0 : tags.length) > 2 && react_1.default.createElement("div", { className: cx('ResultBox-value'), key: 'tags' },
react_1.default.createElement("span", { className: cx('ResultBox-valueLabel') }, tags === null || tags === void 0 ? void 0 : tags.length)),
tags.map(function (item, index) { return (react_1.default.createElement("div", { className: cx('ResultBox-value ResultBox-value-background'), key: index },
react_1.default.createElement("span", { className: cx('ResultBox-valueLabel'), "data-index": index, onClick: _this.removeItem }, itemRender(item)))); }),
react_1.default.createElement("span", { 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)(tags.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 }, tags.map(function (item, index) { return react_1.default.createElement(react_1.default.Fragment, null,
itemRender(item),
" ",
tags.length - 1 !== index && ","); })));
// return tags.map((item, index) => (
// <div className={cx('ResultBox-value')} key={index}>
// <span className={cx('ResultBox-valueLabel')}>{itemRender(item)}</span>
// {!isMobile() && <a data-index={index} onClick={this.removeItem}>
// <Icon icon="close" className="icon" />
// </a>}
// </div>
// ));
};
ResultBox.prototype.render = function () {
var _a;
var _b = this.props, className = _b.className, cx = _b.classnames, classPrefix = _b.classPrefix, clearable = _b.clearable, disabled = _b.disabled, hasError = _b.hasError, result = _b.result, value = _b.value, placeholder = _b.placeholder, children = _b.children, itemRender = _b.itemRender, allowInput = _b.allowInput, inputPlaceholder = _b.inputPlaceholder, labelTpl = _b.labelTpl, onResultChange = _b.onResultChange, onChange = _b.onChange, onResultClick = _b.onResultClick, __ = _b.translate, locale = _b.locale, onKeyPress = _b.onKeyPress, onFocus = _b.onFocus, onBlur = _b.onBlur, render = _b.render, borderMode = _b.borderMode, useMobileUI = _b.useMobileUI, loading = _b.loading,
// isSelect,
rest = (0, tslib_1.__rest)(_b, ["className", "classnames", "classPrefix", "clearable", "disabled", "hasError", "result", "value", "placeholder", "children", "itemRender", "allowInput", "inputPlaceholder", "labelTpl", "onResultChange", "onChange", "onResultClick", "translate", "locale", "onKeyPress", "onFocus", "onBlur", "render", "borderMode", "useMobileUI", "loading"]);
var isFocused = this.state.isFocused;
var mobileUI = useMobileUI && (0, helper_1.isMobile)();
return (react_1.default.createElement("div", { className: cx('ResultBox', className, (_a = {
'is-focused': isFocused,
'is-disabled': disabled,
'is-error': hasError,
'is-clickable': onResultClick,
'is-mobile': mobileUI
},
_a["ResultBox--border" + (0, helper_1.ucFirst)(borderMode)] = borderMode,
_a)), onClick: onResultClick, tabIndex: !allowInput && !disabled && onFocus ? 0 : -1, onKeyPress: allowInput ? undefined : onKeyPress, onFocus: allowInput ? undefined : onFocus, onBlur: allowInput ? undefined : onBlur, ref: this.containerRef },
react_1.default.createElement("div", { ref: this.divRef, className: cx('ResultBox-value-wrap') },
Array.isArray(result) && result.length ? (this.renderMultipeTags(result)) : result && !Array.isArray(result) ? (react_1.default.createElement("span", { className: cx('ResultBox-singleValue') }, isPlainObject(result) ? itemRender(result) : result)) : allowInput && !disabled ? null : (react_1.default.createElement("span", { className: cx('ResultBox-placeholder') }, __(placeholder || 'placeholder.noData'))),
allowInput && !disabled ? (react_1.default.createElement(Input_1.default, (0, tslib_1.__assign)({}, rest, { className: cx('ResultBox-value-input'), onKeyPress: onKeyPress, ref: this.inputRef, value: value || '', onChange: this.handleChange, placeholder: __(
/** 数组模式下输入内容后将不再展示placeholder */
Array.isArray(result)
? result.length > 0
? inputPlaceholder
: placeholder
: result
? ''
: placeholder), onFocus: this.handleFocus, onBlur: this.handleBlur }))) : null),
children,
clearable &&
!disabled && !mobileUI &&
(Array.isArray(result) ? result.length : result) ? (react_1.default.createElement("a", { onClick: this.clearValue, className: cx('ResultBox-clear') },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))) : null,
!allowInput && mobileUI ? (react_1.default.createElement("span", { className: cx('ResultBox-arrow arrow-bold') },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon", style: { fontSize: '10px', color: "#0003" } }))) : null));
};
var _a, _b, _c;
ResultBox.defaultProps = {
clearable: false,
placeholder: 'placeholder.noData',
inputPlaceholder: 'placeholder.enter',
itemRender: function (option) { return (react_1.default.createElement("span", null, "" + (option.scopeLabel || '') + option.label)); }
};
(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", void 0)
], ResultBox.prototype, "clearValue", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ResultBox.prototype, "handleFocus", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ResultBox.prototype, "handleBlur", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _b : Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ResultBox.prototype, "removeItem", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_c = typeof react_1.default !== "undefined" && react_1.default.ChangeEvent) === "function" ? _c : Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ResultBox.prototype, "handleChange", null);
return ResultBox;
}(react_1.default.Component));
exports.ResultBox = ResultBox;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)((0, uncontrollable_1.uncontrollable)(ResultBox, {
value: 'onChange',
result: 'onResultChange'
})));
//# sourceMappingURL=./components/ResultBox.js.map