tsp-component/lib/verification/index.js

提供多端和react版本的UI组件

var __extends = (this && this.__extends) || (function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import Toast from '../toast';
import Hammer from 'react-hammerjs';
import classNames from 'classnames';
import { validatePattern, validateRequried } from '../util/validate';
var defaultLabel = '发送验证码';
var prefix = 'tsp-component-Verification';
var Verification = (function (_super) {
    __extends(Verification, _super);
    function Verification(props, state) {
        var _this = _super.call(this, props, state) || this;
        _this.state = {
            label: defaultLabel,
            time: _this.props.time
        };
        _this.onClick = _this.onClick.bind(_this);
        return _this;
    }
    Verification.prototype.componentWillUnmount = function () {
        clearInterval(this.interval);
    };
    Verification.prototype.setBtnLabel = function () {
        var nowTime = --this.state.time;
        this.setState({
            time: nowTime < 0 ? this.props.time : nowTime,
            label: nowTime < 0 ? defaultLabel : this.props.disabledLabel + "(" + nowTime + ")"
        });
    };
    Verification.prototype.onClick = function () {
        var _this = this;
        var inputElem = document.getElementById(this.props.inputId);
        if (!validateRequried(inputElem, function (msg) { return Toast.warning(msg); })) {
            return;
        }
        if (!validatePattern(inputElem, function (msg) { return Toast.warning(msg); })) {
            return;
        }
        if (this.props.validate) {
            if (!this.props.validate()) {
                return;
            }
        }
        if (this.state.time === this.props.time) {
            this.setBtnLabel();
            this.interval = setInterval(function () {
                _this.setBtnLabel();
                if (_this.state.time <= 0) {
                    clearInterval(_this.interval);
                    _this.setBtnLabel();
                }
            }, 1000);
            this.props.callback();
        }
    };
    Verification.prototype.render = function () {
        var disabled = this.state.time !== this.props.time;
        return (React.createElement(Hammer, { onTap: this.onClick },
            React.createElement("button", { className: classNames((_a = {},
                    _a[prefix] = true,
                    _a[this.props.className] = this.props.className,
                    _a[prefix + "-disabled"] = disabled,
                    _a)), disabled: disabled, type: "button" }, this.state.label)));
        var _a;
    };
    Verification.defaultProps = {
        time: 60,
        validate: null,
        callback: null,
        disabledLabel: '下次发送',
        inputId: ''
    };
    return Verification;
}(React.Component));
export default Verification;