choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
258 lines (218 loc) • 8.41 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { action, runInAction, isArrayLike } from 'mobx';
import { TextField } from '../text-field/TextField';
import Icon from '../icon';
import { open } from '../modal-container/ModalContainer';
import SecretFieldView from './SecretFieldView';
import autobind from '../_util/autobind';
import isEmpty from '../_util/isEmpty';
import CountDown from './CountDown';
var SecretField = /*#__PURE__*/function (_TextField) {
_inherits(SecretField, _TextField);
var _super = _createSuper(SecretField);
function SecretField(props, context) {
var _this;
_classCallCheck(this, SecretField);
_this = _super.call(this, props, context);
_this.secretEnable = false;
runInAction(function () {
_this.setSecretEnable();
});
return _this;
}
_createClass(SecretField, [{
key: "multiple",
get: function get() {
return false;
}
}, {
key: "range",
get: function get() {
return false;
}
}, {
key: "isSecretEnable",
get: function get() {
var record = this.record,
name = this.name;
if (!record || !record.get('_token') || !record.getPristineValue(name)) {
// 新增数据,record没有token或者查询没有返回值,显示为textfield
return false;
}
return this.secretEnable;
}
}, {
key: "setSecretEnable",
value: function setSecretEnable() {
var secretFieldEnableConfig = this.getContextConfig('secretFieldEnable');
if (secretFieldEnableConfig) {
// 从配置项获取是否开启脱敏组件
this.secretEnable = secretFieldEnableConfig();
}
}
}, {
key: "openModal",
value: function openModal() {
if (!this.modal) {
var label = this.getLabel();
var readOnly = this.readOnly,
name = this.name,
record = this.record;
var key = "_secretField_countDown_".concat(name);
if (record && !record.getState(key)) {
record.setState(key, new CountDown());
}
var pattern = this.getProp('pattern');
var restrict = this.getProp('restrict');
var required = this.getProp('required');
var modalProps = this.props.modalProps;
this.modal = open(_objectSpread(_objectSpread({
title: label
}, modalProps), {}, {
children: /*#__PURE__*/React.createElement(SecretFieldView, {
readOnly: readOnly,
name: name || '',
record: record,
label: label,
pattern: pattern,
restrict: restrict,
required: required,
token: record && record.get('_token'),
onChange: this.handleSecretChange,
countDown: record && record.getState(key)
}),
destroyOnClose: true,
closable: true,
autoFocus: false,
footer: null,
onClose: this.handleSecretFieldViewClose
}));
}
}
}, {
key: "handleSecretFieldViewClose",
value: function handleSecretFieldViewClose() {
this.modal = undefined;
}
}, {
key: "handleSecretChange",
value: function handleSecretChange(data) {
var record = this.record;
if (record) {
record.init(this.name || '', data);
}
}
}, {
key: "handleOpenModal",
value: function handleOpenModal() {
return this.openModal();
}
}, {
key: "getSuffix",
value: function getSuffix() {
var readOnly = this.readOnly,
record = this.record,
name = this.name,
isSecretEnable = this.isSecretEnable,
props = this.props,
disabled = this.disabled; // 未开启脱敏组件或者脱敏组件值为空时,不显示编辑/查看按钮
if (!isSecretEnable) {
var suffix = props.suffix;
return suffix ? this.wrapperSuffix(suffix) : null;
} // 开启脱敏组件
// 编辑
if (!readOnly) {
return this.wrapperSuffix( /*#__PURE__*/React.createElement(Icon, {
type: 'edit-o'
}), {
onClick: disabled ? null : this.handleOpenModal
});
} // 只读:已读不显示查看按钮
// readFlag: true已查看 undefined未查看
var readFlag = record && record.getState("_secretField_queryFlag_".concat(name));
if (!readFlag && readOnly) {
return this.wrapperSuffix( /*#__PURE__*/React.createElement(Icon, {
type: 'visibility-o'
}), {
onClick: disabled ? null : this.handleOpenModal
});
}
return null;
}
}, {
key: "isEditable",
value: function isEditable() {
return !this.isSecretEnable && _get(_getPrototypeOf(SecretField.prototype), "isEditable", this).call(this);
}
}, {
key: "getWrapperClassNames",
value: function getWrapperClassNames() {
var _get2;
var prefixCls = this.prefixCls;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return (_get2 = _get(_getPrototypeOf(SecretField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this].concat(args, [_defineProperty({}, "".concat(prefixCls, "-secret"), true)]));
}
}, {
key: "getInnerSpanButton",
value: function getInnerSpanButton() {
var isSecretEnable = this.isSecretEnable; // 显示为脱敏组件时,禁用clearButton
if (isSecretEnable) {
return null;
} // 显示为textField时,正常显示clearButton
return _get(_getPrototypeOf(SecretField.prototype), "getInnerSpanButton", this).call(this);
}
}, {
key: "clearButton",
get: function get() {
var isSecretEnable = this.isSecretEnable; // 显示为脱敏组件时,clearButton为false
if (isSecretEnable) {
return false;
} // 显示为textField时,正常显示clearButton
return _get(_getPrototypeOf(SecretField.prototype), "clearButton", this);
}
}, {
key: "clear",
value: function clear() {
var isSecretEnable = this.isSecretEnable; // 只有显示为textField时,退格键正常删除内容
if (!isSecretEnable) {
_get(_getPrototypeOf(SecretField.prototype), "clear", this).call(this);
}
}
}, {
key: "renderWrapper",
value: function renderWrapper() {
var readOnly = this.readOnly,
prefixCls = this.prefixCls;
var result = this.getRenderedValue();
var renderEmpty = this.props.renderEmpty; // 脱敏组件只读且值为空时,renderEmpty
return readOnly && (isEmpty(result) || isArrayLike(result) && !result.length) ? /*#__PURE__*/React.createElement("span", _extends({}, this.getMergedProps()), /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-secret-empty")
}, renderEmpty ? renderEmpty() : this.getContextConfig('renderEmpty')('SecretField') || '-')) : _get(_getPrototypeOf(SecretField.prototype), "renderWrapper", this).call(this);
}
}]);
return SecretField;
}(TextField);
SecretField.displayName = 'SecretField';
SecretField.defaultProps = _objectSpread({}, TextField.defaultProps);
__decorate([action], SecretField.prototype, "setSecretEnable", null);
__decorate([action], SecretField.prototype, "openModal", null);
__decorate([autobind, action], SecretField.prototype, "handleSecretFieldViewClose", null);
__decorate([autobind], SecretField.prototype, "handleSecretChange", null);
__decorate([autobind], SecretField.prototype, "handleOpenModal", null);
__decorate([action], SecretField.prototype, "clear", null);
SecretField = __decorate([observer], SecretField);
export default SecretField;
//# sourceMappingURL=SecretField.js.map