ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
161 lines (160 loc) • 6.5 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React from 'react';
import { Call } from 'basic-helper';
import { UkeComponent } from '../utils/uke-component';
import Input from '../form-control/input';
var queryCAPTCHAData = function () {
console.log('请先通过 Captcha.setAPI() 设置获取数据接口');
};
/**
* 验证码，需要先通过 setUkelliConfig 设置获取验证码的方式
*
* @export
* @class Captcha
* @extends {Component}
*/
var Captcha = /** @class */ (function (_super) {
__extends(Captcha, _super);
function Captcha(props) {
var _this = _super.call(this, props) || this;
_this.isPass = false;
_this.captchaKey = '';
_this.refreshTime = 0;
_this.retryTime = 0;
_this.__didMount = false;
_this.getCaptcha = function () {
_this.refreshTime = Date.now();
var _a = _this.props, _b = _a.autoRetryTime, autoRetryTime = _b === void 0 ? 10 : _b, onError = _a.onError, onCaptchaLoad = _a.onCaptchaLoad;
_this.setState({
loading: true
});
queryCAPTCHAData(function (resData) {
if (_this.__didMount) {
var hasErr = resData.hasErr, captchaImage = resData.captchaImage, captchaKey = resData.captchaKey;
if (hasErr) {
_this.clearTimeout();
_this.getCaptchaTimer = setTimeout(function () {
// 如果自动刷新次数少于设置项，则自动刷新
if (_this.retryTime < autoRetryTime)
_this.refreshCaptcha(false);
_this.retryTime++;
}, 1000);
}
else {
_this.setState({
loading: false,
captchaImg: captchaImage
});
_this.captchaKey = captchaKey;
Call(onCaptchaLoad, captchaKey);
}
}
});
};
_this.state = {
captchaImg: '',
captchaValue: '',
loading: false,
};
_this.isControl = props.hasOwnProperty('value');
_this.captchaLength = props.limit || 4;
_this.value = props.value;
return _this;
}
Captcha.prototype.componentDidMount = function () {
this.__didMount = true;
this.getCaptcha();
};
Captcha.prototype.componentWillUnmount = function () {
this.__didMount = false;
this.clearTimeout();
};
Captcha.prototype.select = function () {
this.captchaInput.select();
};
Captcha.prototype.clearTimeout = function () {
this.getCaptchaTimer && clearTimeout(this.getCaptchaTimer);
};
Captcha.prototype.shouldRefreshCaptcha = function (should, needFocus) {
if (should === void 0) { should = false; }
if (needFocus === void 0) { needFocus = false; }
var clickTime = Date.now();
if (should || clickTime - this.refreshTime > 1 * 60 * 1000) {
this.getCaptcha();
}
if (needFocus)
this.select();
};
Captcha.prototype.refreshCaptcha = function (needFocus) {
if (needFocus === void 0) { needFocus = true; }
this.shouldRefreshCaptcha(true, needFocus);
};
Captcha.prototype.changeCaptcha = function (val) {
var onChange = this.props.onChange;
var _val = val.length > this.captchaLength ? val.slice(0, this.captchaLength) : val;
if (val.length === this.captchaLength)
this.isPass = true;
if (!this.isControl) {
this.setState({
captchaValue: _val
});
}
this.value = _val;
Call(onChange, {
isPass: this.isPass,
value: _val,
key: this.captchaKey,
});
};
Captcha.prototype.focus = function () {
this.captchaInput.focus();
};
Captcha.prototype.render = function () {
var _this = this;
var _a = this.state, captchaImg = _a.captchaImg, captchaValue = _a.captchaValue, loading = _a.loading;
var _b = this.props, value = _b.value, icon = _b.icon;
var _captchaValue = this.isControl ? value : captchaValue;
var hasCap = !!captchaImg;
var loadingTip;
var captchaImgElem = hasCap && !loading ? (React.createElement("img", { src: captchaImg, alt: "", className: "cover-image" })) : null;
if (!hasCap) {
loadingTip = this.$T_UKE('验证码');
}
if (loading) {
loadingTip = this.$T_UKE('刷新中');
}
return (React.createElement("div", { className: "captcha-group" },
React.createElement(Input, { ref: function (e) { _this.captchaInput = e; }, icon: icon, type: "number", className: "form-control captcha-input", value: _captchaValue, onFocus: function (e) { return _this.shouldRefreshCaptcha(); }, onChange: function (val) { return _this.changeCaptcha(val); }, placeholder: this.$T_UKE("验证码") },
React.createElement("div", { className: "captcha", onClick: function (e) {
_this.getCaptcha();
} },
React.createElement("div", { className: "text-center captcha-tip" + (!loading && hasCap ? ' hide' : '') }, loadingTip),
captchaImgElem))));
};
Captcha.defaultProps = {
limit: 4,
autoRetryTime: 10,
icon: 'shield-alt',
};
Captcha.setQueryCAPTCHAData = function (func) {
console.log('此接口已废弃，请使用 setAPI');
queryCAPTCHAData = func;
};
Captcha.setAPI = function (func) {
queryCAPTCHAData = func;
};
return Captcha;
}(UkeComponent));
export default Captcha;