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");

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

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

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 _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 = _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"));

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");

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 SecretFieldView =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(SecretFieldView, _Component);

  var _super = _createSuper(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: "handleSuccess",
    // 滑块拖到最右
    value: function handleSuccess() {
      var _formDs$current,
          _this2 = this;

      var countDown = this.props.countDown;
      var context = this.context,
          formDs = this.formDs;
      var type = formDs === null || formDs === void 0 ? void 0 : (_formDs$current = formDs.current) === null || _formDs$current === void 0 ? void 0 : _formDs$current.get('verifyType'); // 发送信息以获取验证码

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

      if (secretFieldFetchVerifyCode) {
        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 _this$formDs,
          _this$formDs$current,
          _this3 = this;

      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,
          context = this.context;
      var secretFieldQueryData = context.getConfig('secretFieldQueryData');
      var type = (_this$formDs = this.formDs) === null || _this$formDs === void 0 ? void 0 : (_this$formDs$current = _this$formDs.current) === null || _this$formDs$current === void 0 ? void 0 : _this$formDs$current.get('verifyType');
      var params = {
        type: type,
        _token: token,
        fieldName: name,
        captchaKey: captchaKey,
        captcha: captcha,
        action: 'edit'
      };

      if (secretFieldQueryData) {
        secretFieldQueryData(params).then(function (res) {
          var _this3$formDs, _this3$formDs$current;

          if (res === null || res === void 0 ? void 0 : res.failed) {
            // 校验失败
            return;
          } // 编辑-返回原始数据


          (_this3$formDs = _this3.formDs) === null || _this3$formDs === void 0 ? void 0 : (_this3$formDs$current = _this3$formDs.current) === null || _this3$formDs$current === void 0 ? void 0 : _this3$formDs$current.set(name, res);

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

  }, {
    key: "handleQuery",
    value: function handleQuery() {
      var _this$formDs2, _this$formDs2$current;

      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;
      var secretFieldQueryData = context.getConfig('secretFieldQueryData');
      var type = (_this$formDs2 = this.formDs) === null || _this$formDs2 === void 0 ? void 0 : (_this$formDs2$current = _this$formDs2.current) === null || _this$formDs2$current === void 0 ? void 0 : _this$formDs2$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 === null || res === void 0 ? void 0 : res.failed) {
            // 校验失败
            return;
          } // 查看-返回原始数据


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

          if (modal) {
            modal.close();
            record === null || record === void 0 ? void 0 : record.setState((0, _defineProperty2["default"])({}, "_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$formDs3, _this$formDs3$current;

      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;
      var editValue = (_this$formDs3 = this.formDs) === null || _this$formDs3 === void 0 ? void 0 : (_this$formDs3$current = _this$formDs3.current) === null || _this$formDs3$current === void 0 ? void 0 : _this$formDs3$current.get(name);

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

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

      if (required) {
        if (!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 === null || res === void 0 ? void 0 : 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 _this4 = this;

      var name = _ref.name,
          value = _ref.value;
      var verifyTypeObj = this.verifyTypeObj; // 修改验证方式时，自动填充验证号码

      if (verifyTypeObj.length > 0 && name === 'verifyType') {
        verifyTypeObj.forEach(function (item) {
          if (item.type === value) {
            var _this4$formDs, _this4$formDs$current;

            (_this4$formDs = _this4.formDs) === null || _this4$formDs === void 0 ? void 0 : (_this4$formDs$current = _this4$formDs.current) === null || _this4$formDs$current === void 0 ? void 0 : _this4$formDs$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 _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-modal")
      }, flag !== 'slider' && _react["default"].createElement(_Form["default"], {
        className: "".concat(prefixCls, "-modal-form"),
        dataSet: this.formDs,
        columns: 4,
        labelWidth: "auto"
      }, flag === 'verify' && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_SelectBox["default"], {
        name: "verifyType",
        colSpan: 4,
        disabled: count
      }, verifyTypeObj === null || verifyTypeObj === void 0 ? void 0 : verifyTypeObj.map(function (item) {
        return _react["default"].createElement(_Option["default"], {
          value: item.type,
          key: item.type
        }, item.name);
      })), _react["default"].createElement(_textField["default"], {
        name: "verifyNumber",
        colSpan: 4,
        disabled: true
      }), _react["default"].createElement(_textField["default"], {
        name: "verifyCode",
        colSpan: 3,
        valueChangeAction: _enum3.ValueChangeAction.input
      }), _react["default"].createElement(_CountDownButton["default"], {
        onClick: this.handleClickButton,
        countDown: countDown,
        verifyNumber: formDs.current.get('verifyNumber')
      }), _react["default"].createElement("td", {
        className: "".concat(prefixCls, "-modal-btns"),
        colSpan: 4
      }, _react["default"].createElement(_Button["default"], {
        onClick: this.handleCancel
      }, (0, _localeContext.$l)('SecretField', 'cancel')), readOnly ? _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')) : _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' && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_textField["default"], {
        name: name,
        colSpan: 4,
        restrict: restrict
      }), _react["default"].createElement("td", {
        colSpan: 4,
        className: "".concat(prefixCls, "-modal-edit-btns")
      }, !validate && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("p", {
        className: "".concat(prefixCls, "-modal-validate")
      }, (0, _localeContext.$l)('SecretField', 'type_mismatch', {
        label: label
      })), _react["default"].createElement("br", null)), _react["default"].createElement(_Button["default"], {
        onClick: this.handleCancel
      }, (0, _localeContext.$l)('SecretField', 'cancel')), _react["default"].createElement(_Button["default"], {
        onClick: this.handleEdit,
        color: _enum2.ButtonColor.primary
      }, (0, _localeContext.$l)('SecretField', 'ok_btn'))))), flag === 'slider' && _react["default"].createElement(_VerifySlider["default"], {
        onCancel: this.handleVerifySliderCancel,
        onSuccess: this.handleSuccess
      }));
    }
  }, {
    key: "prefixCls",
    get: function get() {
      var context = this.context;
      return context.getProPrefixCls('secret-field');
    }
  }], [{
    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