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

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { Component } from 'react';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import { observer } from 'mobx-react';
import { action, observable, runInAction } from 'mobx';
import autobind from '../_util/autobind';
import { $l } from '../locale-context';
import DataSet from '../data-set/DataSet';
import message from '../message';
import { FieldType } from '../data-set/enum';
import Form from '../form/Form';
import SelectBox from '../select-box/SelectBox';
import Option from '../option/Option';
import TextField from '../text-field';
import Button from '../button/Button';
import VerifySlider from './VerifySlider';
import CountDownButton from './CountDownButton';
import { ButtonColor } from '../button/enum';
import { ValueChangeAction } from '../text-field/enum';

var SecretFieldView =
/*#__PURE__*/
function (_Component) {
  _inherits(SecretFieldView, _Component);

  var _super = _createSuper(SecretFieldView);

  function SecretFieldView(props, context) {
    var _this;

    _classCallCheck(this, SecretFieldView);

    _this = _super.call(this, props, context);
    runInAction(function () {
      _this.setFlag('verify');

      _this.setVerifyTypeObj();

      _this.setFormDs();

      _this.setCaptchaKey('');

      _this.setCaptcha('');

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

  _createClass(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.success(res.message);

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


            countDown.start();
            countDown.setVerifyType(type);
          } else {
            message.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(_defineProperty({}, "_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({
        autoCreate: true,
        data: initData,
        fields: [{
          name: 'verifyType',
          type: FieldType.string,
          label: $l('SecretField', 'verify_type')
        }, {
          name: 'verifyNumber',
          type: FieldType.string,
          label: $l('SecretField', 'verify_value')
        }, {
          name: 'verifyCode',
          type: FieldType.string,
          label: $l('SecretField', 'verify_code')
        }, {
          name: name,
          type: 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.createElement("div", {
        className: "".concat(prefixCls, "-modal")
      }, flag !== 'slider' && React.createElement(Form, {
        className: "".concat(prefixCls, "-modal-form"),
        dataSet: this.formDs,
        columns: 4,
        labelWidth: "auto"
      }, flag === 'verify' && React.createElement(React.Fragment, null, React.createElement(SelectBox, {
        name: "verifyType",
        colSpan: 4,
        disabled: count
      }, verifyTypeObj === null || verifyTypeObj === void 0 ? void 0 : verifyTypeObj.map(function (item) {
        return React.createElement(Option, {
          value: item.type,
          key: item.type
        }, item.name);
      })), React.createElement(TextField, {
        name: "verifyNumber",
        colSpan: 4,
        disabled: true
      }), React.createElement(TextField, {
        name: "verifyCode",
        colSpan: 3,
        valueChangeAction: ValueChangeAction.input
      }), React.createElement(CountDownButton, {
        onClick: this.handleClickButton,
        countDown: countDown,
        verifyNumber: formDs.current.get('verifyNumber')
      }), React.createElement("td", {
        className: "".concat(prefixCls, "-modal-btns"),
        colSpan: 4
      }, React.createElement(Button, {
        onClick: this.handleCancel
      }, $l('SecretField', 'cancel')), readOnly ? React.createElement(Button, {
        onClick: this.handleQuery,
        className: "".concat(prefixCls, "-modal-raised-btn"),
        disabled: !captcha,
        color: ButtonColor.primary
      }, $l('SecretField', 'ok_btn')) : React.createElement(Button, {
        onClick: this.handleGoToEdit,
        className: "".concat(prefixCls, "-modal-raised-btn"),
        disabled: !captcha,
        color: ButtonColor.primary
      }, $l('SecretField', 'next_step')))), flag === 'edit' && React.createElement(React.Fragment, null, React.createElement(TextField, {
        name: name,
        colSpan: 4,
        restrict: restrict
      }), React.createElement("td", {
        colSpan: 4,
        className: "".concat(prefixCls, "-modal-edit-btns")
      }, !validate && React.createElement(React.Fragment, null, React.createElement("p", {
        className: "".concat(prefixCls, "-modal-validate")
      }, $l('SecretField', 'type_mismatch', {
        label: label
      })), React.createElement("br", null)), React.createElement(Button, {
        onClick: this.handleCancel
      }, $l('SecretField', 'cancel')), React.createElement(Button, {
        onClick: this.handleEdit,
        color: ButtonColor.primary
      }, $l('SecretField', 'ok_btn'))))), flag === 'slider' && React.createElement(VerifySlider, {
        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;
    }
  }]);

  return SecretFieldView;
}(Component);

SecretFieldView.displayName = 'SecretFieldView';

__decorate([autobind], SecretFieldView.prototype, "handleSuccess", null);

__decorate([autobind], SecretFieldView.prototype, "handleGoToEdit", null);

__decorate([autobind], SecretFieldView.prototype, "handleQuery", null);

__decorate([autobind], SecretFieldView.prototype, "handleEdit", null);

__decorate([autobind], SecretFieldView.prototype, "handleCancel", null);

__decorate([observable], SecretFieldView.prototype, "formDs", void 0);

__decorate([action], SecretFieldView.prototype, "setFormDs", null);

__decorate([observable], SecretFieldView.prototype, "captchaKey", void 0);

__decorate([action], SecretFieldView.prototype, "setCaptchaKey", null);

__decorate([observable], SecretFieldView.prototype, "captcha", void 0);

__decorate([action], SecretFieldView.prototype, "setCaptcha", null);

__decorate([observable], SecretFieldView.prototype, "validate", void 0);

__decorate([action], SecretFieldView.prototype, "setValidate", null);

__decorate([observable], SecretFieldView.prototype, "flag", void 0);

__decorate([action], SecretFieldView.prototype, "setFlag", null);

__decorate([observable], SecretFieldView.prototype, "verifyTypeObj", void 0);

__decorate([action], SecretFieldView.prototype, "setVerifyTypeObj", null);

__decorate([autobind], SecretFieldView.prototype, "handleFormUpdate", null);

__decorate([autobind], SecretFieldView.prototype, "handleVerifySliderCancel", null);

__decorate([autobind], SecretFieldView.prototype, "handleClickButton", null);

SecretFieldView = __decorate([observer], SecretFieldView);
export default SecretFieldView;
//# sourceMappingURL=SecretFieldView.js.map