UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

258 lines (218 loc) 8.41 kB
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