choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
282 lines (226 loc) • 9.83 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get3 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _mobxReact = require("mobx-react");
var _mobx = require("mobx");
var _TextField2 = require("../text-field/TextField");
var _icon = _interopRequireDefault(require("../icon"));
var _ModalContainer = require("../modal-container/ModalContainer");
var _SecretFieldView = _interopRequireDefault(require("./SecretFieldView"));
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _CountDown = _interopRequireDefault(require("./CountDown"));
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
var SecretField =
/*#__PURE__*/
function (_TextField) {
(0, _inherits2["default"])(SecretField, _TextField);
var _super = _createSuper(SecretField);
function SecretField(props, context) {
var _this;
(0, _classCallCheck2["default"])(this, SecretField);
_this = _super.call(this, props, context);
_this.secretEnable = false;
(0, _mobx.runInAction)(function () {
_this.setSecretEnable();
});
return _this;
}
(0, _createClass2["default"])(SecretField, [{
key: "setSecretEnable",
value: function setSecretEnable() {
var secretFieldEnableConfig = this.getContextConfig('secretFieldEnable');
if (secretFieldEnableConfig) {
// 从配置项获取是否开启脱敏组件
this.secretEnable = secretFieldEnableConfig();
}
}
}, {
key: "openModal",
value: function openModal() {
var label = this.getLabel();
var readOnly = this.readOnly,
name = this.name,
record = this.record;
if (!(record === null || record === void 0 ? void 0 : record.getState("_secretField_countDown_".concat(name)))) {
record === null || record === void 0 ? void 0 : record.setState((0, _defineProperty2["default"])({}, "_secretField_countDown_".concat(name), new _CountDown["default"]()));
}
var pattern = this.getProp('pattern');
var restrict = this.getProp('restrict');
var required = this.getProp('required');
if (!this.modal) {
var modalProps = this.props.modalProps;
this.modal = (0, _ModalContainer.open)((0, _objectSpread2["default"])({
title: label
}, modalProps, {
children: _react["default"].createElement(_SecretFieldView["default"], {
readOnly: readOnly,
name: name || '',
record: record,
label: label,
pattern: pattern,
restrict: restrict,
required: required,
token: record === null || record === void 0 ? void 0 : record.get('_token'),
onChange: this.handleSecretChange,
countDown: record === null || record === void 0 ? void 0 : record.getState("_secretField_countDown_".concat(name))
}),
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 _this$record;
(_this$record = this.record) === null || _this$record === void 0 ? void 0 : _this$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(_react["default"].createElement(_icon["default"], {
type: 'edit-o'
}), {
onClick: disabled ? null : this.handleOpenModal
});
} // 只读：已读不显示查看按钮
// readFlag: true已查看 undefined未查看
var readFlag = record === null || record === void 0 ? void 0 : record.getState("_secretField_queryFlag_".concat(name));
if (!readFlag && readOnly) {
return this.wrapperSuffix(_react["default"].createElement(_icon["default"], {
type: 'visibility-o'
}), {
onClick: disabled ? null : this.handleOpenModal
});
}
return null;
}
}, {
key: "isEditable",
value: function isEditable() {
return !this.isSecretEnable && (0, _get3["default"])((0, _getPrototypeOf2["default"])(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 = (0, _get3["default"])((0, _getPrototypeOf2["default"])(SecretField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this].concat(args, [(0, _defineProperty2["default"])({}, "".concat(prefixCls, "-secret"), true)]));
}
}, {
key: "getInnerSpanButton",
value: function getInnerSpanButton() {
var isSecretEnable = this.isSecretEnable; // 显示为脱敏组件时，禁用clearButton
if (isSecretEnable) {
return null;
} // 显示为textField时，正常显示clearButton
return (0, _get3["default"])((0, _getPrototypeOf2["default"])(SecretField.prototype), "getInnerSpanButton", this).call(this);
}
}, {
key: "clear",
value: function clear() {
var isSecretEnable = this.isSecretEnable; // 只有显示为textField时，退格键正常删除内容
if (!isSecretEnable) {
(0, _get3["default"])((0, _getPrototypeOf2["default"])(SecretField.prototype), "clear", this).call(this);
}
}
}, {
key: "isSecretEnable",
get: function get() {
var record = this.record,
name = this.name;
if (!(record === null || record === void 0 ? void 0 : record.get('_token')) || !(record === null || record === void 0 ? void 0 : record.get(name))) {
// 新增数据，record没有token或者没有值，显示为textfield
return false;
}
return this.secretEnable;
}
}, {
key: "clearButton",
get: function get() {
var isSecretEnable = this.isSecretEnable; // 显示为脱敏组件时，clearButton为false
if (isSecretEnable) {
return false;
} // 显示为textField时，正常显示clearButton
return (0, _get3["default"])((0, _getPrototypeOf2["default"])(SecretField.prototype), "clearButton", this);
}
}]);
return SecretField;
}(_TextField2.TextField);
SecretField.displayName = 'SecretField';
SecretField.defaultProps = (0, _objectSpread2["default"])({}, _TextField2.TextField.defaultProps);
SecretField.propTypes = (0, _objectSpread2["default"])({}, _TextField2.TextField.propTypes);
(0, _tslib.__decorate)([_mobx.action], SecretField.prototype, "setSecretEnable", null);
(0, _tslib.__decorate)([_mobx.action], SecretField.prototype, "openModal", null);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], SecretField.prototype, "handleSecretFieldViewClose", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretField.prototype, "handleSecretChange", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretField.prototype, "handleOpenModal", null);
(0, _tslib.__decorate)([_mobx.action], SecretField.prototype, "clear", null);
SecretField = (0, _tslib.__decorate)([_mobxReact.observer], SecretField);
var _default = SecretField;
exports["default"] = _default;
//# sourceMappingURL=SecretField.js.map