choerodon-ui/pro/lib/secret-field/SecretFieldView.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

var _react = _interopRequireWildcard(require("react"));

var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _localeContext = require("../locale-context");

var _DataSet = _interopRequireDefault(require("../data-set/DataSet"));

var _message = _interopRequireDefault(require("../message"));

var _enum = require("../data-set/enum");

var _Form = _interopRequireDefault(require("../form/Form"));

var _SelectBox = _interopRequireDefault(require("../select-box/SelectBox"));

var _Option = _interopRequireDefault(require("../option/Option"));

var _TextField = _interopRequireDefault(require("../text-field/TextField"));

var _Button = _interopRequireDefault(require("../button/Button"));

var _VerifySlider = _interopRequireDefault(require("./VerifySlider"));

var _CountDownButton = _interopRequireDefault(require("./CountDownButton"));

var _enum2 = require("../button/enum");

var _enum3 = require("../text-field/enum");

var SecretFieldView = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(SecretFieldView, _Component);

  var _super = (0, _createSuper2["default"])(SecretFieldView);

  function SecretFieldView(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, SecretFieldView);
    _this = _super.call(this, props, context);
    (0, _mobx.runInAction)(function () {
      _this.setFlag('verify');

      _this.setVerifyTypeObj();

      _this.setFormDs();

      _this.setCaptchaKey('');

      _this.setCaptcha('');

      _this.setValidate(true);
    });
    return _this;
  }

  (0, _createClass2["default"])(SecretFieldView, [{
    key: "prefixCls",
    get: function get() {
      var context = this.context;
      return context.getProPrefixCls('secret-field');
    } // 滑块拖到最右

  }, {
    key: "handleSuccess",
    value: function handleSuccess() {
      var _this2 = this;

      var context = this.context,
          formDs = this.formDs; // 发送信息以获取验证码

      var secretFieldFetchVerifyCode = context.getConfig('secretFieldFetchVerifyCode');

      if (secretFieldFetchVerifyCode) {
        var countDown = this.props.countDown;
        var type = formDs && formDs.current && formDs.current.get('verifyType');
        secretFieldFetchVerifyCode(type).then(function (res) {
          if (res.success) {
            _message["default"].success(res.message);

            _this2.setCaptchaKey(res.captchaKey); // 验证码倒计时


            countDown.start();
            countDown.setVerifyType(type);
          } else {
            _message["default"].error(res.message);
          }

          setTimeout(function () {
            _this2.setFlag('verify');
          }, 500);
        })["catch"](function (_e) {
          return _this2.setFlag('verify');
        });
      }
    } // 下一步

  }, {
    key: "handleGoToEdit",
    value: function handleGoToEdit() {
      var _this3 = this;

      var context = this.context; // 编辑-校验验证码，返回原始值

      var secretFieldQueryData = context.getConfig('secretFieldQueryData');

      if (secretFieldQueryData) {
        var _this$props = this.props,
            name = _this$props.name,
            _this$props$token = _this$props.token,
            token = _this$props$token === void 0 ? '' : _this$props$token;
        var captchaKey = this.captchaKey,
            captcha = this.captcha,
            formDs = this.formDs;
        var current = formDs && formDs.current;
        var type = current && current.get('verifyType');
        var params = {
          type: type,
          _token: token,
          fieldName: name,
          captchaKey: captchaKey,
          captcha: captcha,
          action: 'edit'
        };
        secretFieldQueryData(params).then(function (res) {
          if (res && res.failed) {
            // 校验失败
            return;
          }

          if (current) {
            // 编辑-返回原始数据
            current.set(name, res);
          }

          _this3.setFlag('edit');
        });
      } else {
        this.setFlag('edit');
      }
    } // 确定可查看

  }, {
    key: "handleQuery",
    value: function handleQuery() {
      var _this$props2 = this.props,
          name = _this$props2.name,
          _this$props2$token = _this$props2.token,
          token = _this$props2$token === void 0 ? '' : _this$props2$token,
          onChange = _this$props2.onChange,
          modal = _this$props2.modal,
          record = _this$props2.record; // 查看-校验验证码，返回原始值

      var captchaKey = this.captchaKey,
          captcha = this.captcha,
          context = this.context,
          formDs = this.formDs;
      var secretFieldQueryData = context.getConfig('secretFieldQueryData');
      var type = formDs && formDs.current && formDs.current.get('verifyType');
      var params = {
        type: type,
        _token: token,
        fieldName: name,
        captchaKey: captchaKey,
        captcha: captcha,
        action: 'query'
      };

      if (secretFieldQueryData) {
        return secretFieldQueryData(params).then(function (res) {
          if (res && res.failed) {
            // 校验失败
            return;
          } // 查看-返回原始数据


          if (onChange) {
            if (res) {
              onChange(res);
            } else {
              onChange('');
            }
          }

          if (modal) {
            modal.close();

            if (record) {
              record.setState("_secretField_queryFlag_".concat(name), true);
            }
          }
        });
      }
    } // 正则string处理

  }, {
    key: "generatePattern",
    value: function generatePattern(pattern) {
      if (pattern instanceof RegExp) {
        return pattern;
      }

      var begin = pattern.startsWith('^') ? '' : '^';
      var end = pattern.endsWith('$') ? '' : '$';
      return new RegExp("".concat(begin).concat(pattern).concat(end));
    } // 确定修改

  }, {
    key: "handleEdit",
    value: function handleEdit() {
      var _this$props3 = this.props,
          name = _this$props3.name,
          _this$props3$token = _this$props3.token,
          token = _this$props3$token === void 0 ? '' : _this$props3$token,
          onChange = _this$props3.onChange,
          modal = _this$props3.modal,
          pattern = _this$props3.pattern,
          required = _this$props3.required;
      var context = this.context,
          formDs = this.formDs;
      var editValue = formDs && formDs.current && formDs.current.get(name);

      if (pattern) {
        var newPattern = this.generatePattern(pattern);

        if (newPattern.test(editValue) === false) {
          // 正则校验不通过
          this.setValidate(false);
          return;
        }
      }

      if (required && !editValue) {
        return;
      } // 接口查询重置值


      var secretFieldSaveData = context.getConfig('secretFieldSaveData');
      var params = {
        _token: token,
        fieldName: name,
        value: editValue
      };

      if (secretFieldSaveData) {
        return secretFieldSaveData(params).then(function (res) {
          // 校验失败
          if (res && res.failed) {
            return;
          } // 编辑-返回修改数据


          if (onChange) {
            if (res) {
              onChange(res);
            } else if (!res) {
              onChange('');
            }
          }

          if (modal) {
            modal.close();
          }
        });
      }
    } // 取消

  }, {
    key: "handleCancel",
    value: function handleCancel() {
      // 清空formDs值
      // 关闭弹窗
      var modal = this.props.modal;

      if (modal) {
        modal.close();
      }
    }
  }, {
    key: "setFormDs",
    value: function setFormDs() {
      var _this$props4 = this.props,
          name = _this$props4.name,
          label = _this$props4.label,
          pattern = _this$props4.pattern,
          required = _this$props4.required,
          countDown = _this$props4.countDown;
      var verifyTypeObj = this.verifyTypeObj;
      var verifyType = countDown.verifyType;
      var initData = [];
      var verifyValue = ''; // 传入验证方式时，设置初始值

      if (verifyType) {
        verifyTypeObj.forEach(function (item) {
          if (item.type === verifyType) {
            verifyValue = item.value;
          }
        });
      }

      if (verifyTypeObj.length > 0) {
        initData = [{
          'verifyType': verifyType || verifyTypeObj[0].type,
          'verifyNumber': verifyType ? verifyValue : verifyTypeObj[0].value || ''
        }];
      }

      this.formDs = new _DataSet["default"]({
        autoCreate: true,
        data: initData,
        fields: [{
          name: 'verifyType',
          type: _enum.FieldType.string,
          label: (0, _localeContext.$l)('SecretField', 'verify_type')
        }, {
          name: 'verifyNumber',
          type: _enum.FieldType.string,
          label: (0, _localeContext.$l)('SecretField', 'verify_value')
        }, {
          name: 'verifyCode',
          type: _enum.FieldType.string,
          label: (0, _localeContext.$l)('SecretField', 'verify_code')
        }, {
          name: name,
          type: _enum.FieldType.string,
          label: label,
          pattern: pattern,
          required: required
        }],
        events: {
          update: this.handleFormUpdate
        }
      });
    }
  }, {
    key: "setCaptchaKey",
    value: function setCaptchaKey(value) {
      this.captchaKey = value;
    }
  }, {
    key: "setCaptcha",
    value: function setCaptcha(value) {
      this.captcha = value;
    }
  }, {
    key: "setValidate",
    value: function setValidate(value) {
      this.validate = value;
    }
  }, {
    key: "setFlag",
    value: function setFlag(value) {
      this.flag = value;
    }
  }, {
    key: "setVerifyTypeObj",
    value: function setVerifyTypeObj() {
      var context = this.context; // 从配置项获取验证方式

      var secretFieldTypesConfig = context.getConfig('secretFieldTypes');

      if (secretFieldTypesConfig) {
        this.verifyTypeObj = secretFieldTypesConfig();
      } else {
        this.verifyTypeObj = [];
      }
    }
  }, {
    key: "handleFormUpdate",
    value: function handleFormUpdate(_ref) {
      var name = _ref.name,
          value = _ref.value;
      var verifyTypeObj = this.verifyTypeObj; // 修改验证方式时，自动填充验证号码

      if (verifyTypeObj.length > 0 && name === 'verifyType') {
        var current = this.formDs && this.formDs.current;

        if (current) {
          verifyTypeObj.forEach(function (item) {
            if (item.type === value) {
              current.set('verifyNumber', item.value);
            }
          });
        }
      }

      if (name === 'verifyCode') {
        this.setCaptcha(value);
      }
    }
  }, {
    key: "handleVerifySliderCancel",
    value: function handleVerifySliderCancel() {
      this.setFlag('verify');
    }
  }, {
    key: "handleClickButton",
    value: function handleClickButton() {
      this.setFlag('slider');
    }
  }, {
    key: "render",
    value: function render() {
      var flag = this.flag,
          captcha = this.captcha,
          verifyTypeObj = this.verifyTypeObj,
          prefixCls = this.prefixCls,
          validate = this.validate,
          formDs = this.formDs;
      var _this$props5 = this.props,
          readOnly = _this$props5.readOnly,
          label = _this$props5.label,
          name = _this$props5.name,
          countDown = _this$props5.countDown,
          restrict = _this$props5.restrict;
      var count = countDown.count;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-modal")
      }, flag !== 'slider' && /*#__PURE__*/_react["default"].createElement(_Form["default"], {
        className: "".concat(prefixCls, "-modal-form"),
        dataSet: this.formDs,
        columns: 4,
        labelWidth: "auto"
      }, flag === 'verify' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SelectBox["default"], {
        name: "verifyType",
        colSpan: 4,
        disabled: count
      }, verifyTypeObj && verifyTypeObj.map(function (item) {
        return /*#__PURE__*/_react["default"].createElement(_Option["default"], {
          value: item.type,
          key: item.type
        }, item.name);
      })), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
        name: "verifyNumber",
        colSpan: 4,
        disabled: true
      }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
        name: "verifyCode",
        colSpan: 3,
        valueChangeAction: _enum3.ValueChangeAction.input
      }), /*#__PURE__*/_react["default"].createElement(_CountDownButton["default"], {
        onClick: this.handleClickButton,
        countDown: countDown,
        verifyNumber: formDs.current.get('verifyNumber')
      }), /*#__PURE__*/_react["default"].createElement("td", {
        className: "".concat(prefixCls, "-modal-btns"),
        colSpan: 4
      }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        onClick: this.handleCancel
      }, (0, _localeContext.$l)('SecretField', 'cancel')), readOnly ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        onClick: this.handleQuery,
        className: "".concat(prefixCls, "-modal-raised-btn"),
        disabled: !captcha,
        color: _enum2.ButtonColor.primary
      }, (0, _localeContext.$l)('SecretField', 'ok_btn')) : /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        onClick: this.handleGoToEdit,
        className: "".concat(prefixCls, "-modal-raised-btn"),
        disabled: !captcha,
        color: _enum2.ButtonColor.primary
      }, (0, _localeContext.$l)('SecretField', 'next_step')))), flag === 'edit' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
        name: name,
        colSpan: 4,
        restrict: restrict
      }), /*#__PURE__*/_react["default"].createElement("td", {
        colSpan: 4,
        className: "".concat(prefixCls, "-modal-edit-btns")
      }, !validate && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", {
        className: "".concat(prefixCls, "-modal-validate")
      }, (0, _localeContext.$l)('SecretField', 'type_mismatch', {
        label: label
      })), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        onClick: this.handleCancel
      }, (0, _localeContext.$l)('SecretField', 'cancel')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
        onClick: this.handleEdit,
        color: _enum2.ButtonColor.primary
      }, (0, _localeContext.$l)('SecretField', 'ok_btn'))))), flag === 'slider' && /*#__PURE__*/_react["default"].createElement(_VerifySlider["default"], {
        onCancel: this.handleVerifySliderCancel,
        onSuccess: this.handleSuccess
      }));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _ConfigContext["default"];
    }
  }]);
  return SecretFieldView;
}(_react.Component);

SecretFieldView.displayName = 'SecretFieldView';
(0, _tslib.__decorate)([_autobind["default"]], SecretFieldView.prototype, "handleSuccess", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretFieldView.prototype, "handleGoToEdit", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretFieldView.prototype, "handleQuery", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretFieldView.prototype, "handleEdit", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretFieldView.prototype, "handleCancel", null);
(0, _tslib.__decorate)([_mobx.observable], SecretFieldView.prototype, "formDs", void 0);
(0, _tslib.__decorate)([_mobx.action], SecretFieldView.prototype, "setFormDs", null);
(0, _tslib.__decorate)([_mobx.observable], SecretFieldView.prototype, "captchaKey", void 0);
(0, _tslib.__decorate)([_mobx.action], SecretFieldView.prototype, "setCaptchaKey", null);
(0, _tslib.__decorate)([_mobx.observable], SecretFieldView.prototype, "captcha", void 0);
(0, _tslib.__decorate)([_mobx.action], SecretFieldView.prototype, "setCaptcha", null);
(0, _tslib.__decorate)([_mobx.observable], SecretFieldView.prototype, "validate", void 0);
(0, _tslib.__decorate)([_mobx.action], SecretFieldView.prototype, "setValidate", null);
(0, _tslib.__decorate)([_mobx.observable], SecretFieldView.prototype, "flag", void 0);
(0, _tslib.__decorate)([_mobx.action], SecretFieldView.prototype, "setFlag", null);
(0, _tslib.__decorate)([_mobx.observable], SecretFieldView.prototype, "verifyTypeObj", void 0);
(0, _tslib.__decorate)([_mobx.action], SecretFieldView.prototype, "setVerifyTypeObj", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretFieldView.prototype, "handleFormUpdate", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretFieldView.prototype, "handleVerifySliderCancel", null);
(0, _tslib.__decorate)([_autobind["default"]], SecretFieldView.prototype, "handleClickButton", null);
SecretFieldView = (0, _tslib.__decorate)([_mobxReact.observer], SecretFieldView);
var _default = SecretFieldView;
exports["default"] = _default;
//# sourceMappingURL=SecretFieldView.js.map