/**
 * @file stepper.tsx
 * @author lihuanji
 *
 * 步进器
 */
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 React, { PureComponent } from 'react';
import classnames from 'classnames';
var styles = require('./style.module.styl');
var addIcon = require('./add.svg');
var cutIcon = require('./cut.svg');
var Stepper = /** @class */ (function (_super) {
    __extends(Stepper, _super);
    function Stepper(props) {
        var _this = _super.call(this, props) || this;
        // 存储高度，用于判读是否需要滑动视图
        _this.scroll = document.documentElement.clientHeight;
        var value = props.value || props.min || 1;
        _this.state = {
            num: value,
            disableAddButton: Boolean(props.max && value === props.max),
            disableCutButton: value === props.min
        };
        _this.add = _this.add.bind(_this);
        _this.cut = _this.cut.bind(_this);
        _this.handleChange = _this.handleChange.bind(_this);
        _this.handleFocus = _this.handleFocus.bind(_this);
        _this.handleBlur = _this.handleBlur.bind(_this);
        return _this;
    }
    Stepper.prototype.componentWillReceiveProps = function (nextProps) {
        if (this.props !== nextProps && nextProps.value) {
            this.setState({
                num: nextProps.value,
                disableAddButton: nextProps.value === nextProps.max,
                disableCutButton: nextProps.value === nextProps.min
            });
        }
    };
    /**
     * 增加数量
     */
    Stepper.prototype.add = function (e) {
        e.stopPropagation();
        var _a = this.props, _b = _a.step, step = _b === void 0 ? 1 : _b, max = _a.max, value = _a.value, onButtonClick = _a.onButtonClick;
        var num = this.state.num;
        if (max && max <= num) {
            this.setState({
                disableAddButton: true
            });
            return;
        }
        var showValue = num + step;
        if (!value) {
            this.setState({
                num: showValue,
                disableAddButton: showValue === max,
                disableCutButton: false
            });
        }
        onButtonClick && onButtonClick(showValue);
    };
    /**
     * 删除数量
     */
    Stepper.prototype.cut = function (e) {
        e.stopPropagation();
        var _a = this.props, _b = _a.min, min = _b === void 0 ? 1 : _b, _c = _a.step, step = _c === void 0 ? 1 : _c, value = _a.value, onButtonClick = _a.onButtonClick;
        var num = this.state.num;
        if (min >= num) {
            this.setState({
                disableCutButton: true
            });
            return;
        }
        var showValue = num - step;
        if (!value) {
            this.setState({
                num: showValue,
                disableAddButton: false,
                disableCutButton: showValue === min
            });
        }
        onButtonClick && onButtonClick(showValue);
    };
    /**
     * input变化
     *
     * @param {object} e 事件对象
     */
    Stepper.prototype.handleChange = function (e) {
        var onChange = this.props.onChange;
        var val = parseInt(e.currentTarget.value, 10);
        this.setState({
            num: val
        });
        onChange && onChange(val);
    };
    Stepper.prototype.handleFocus = function (e) {
        var _this = this;
        e.stopPropagation();
        e.preventDefault();
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
        // 解决安卓输入页面未上滑
        if (isAndroid) {
            var interval_1 = setInterval(function () {
                if (document.documentElement.clientHeight !== _this.scroll) {
                    _this.stepperRef.scrollIntoViewIfNeeded();
                    clearInterval(interval_1);
                }
            }, 100);
        }
        this.props.onFocus && this.props.onFocus();
    };
    /**
     * input失去焦点
     *
     * @param {object} e 事件对象
     */
    Stepper.prototype.handleBlur = function (e) {
        var _a = this.props, onBlur = _a.onBlur, max = _a.max, _b = _a.min, min = _b === void 0 ? 1 : _b;
        var val = parseInt(e.currentTarget.value, 10);
        var showValue = val;
        if (max && val >= max) {
            showValue = max;
        }
        if (val < min || !showValue) {
            showValue = min;
        }
        if (!this.props.value) {
            this.setState({
                num: showValue,
                disableAddButton: showValue === this.props.max,
                disableCutButton: showValue === this.props.min
            });
        }
        onBlur && onBlur(showValue);
    };
    Stepper.prototype.render = function () {
        var _a, _b;
        var _this = this;
        var _c = this.state, num = _c.num, disableAddButton = _c.disableAddButton, disableCutButton = _c.disableCutButton;
        var disabled = this.props.disabled;
        return (<div className={styles.Stepper} ref={function (ref) {
            _this.stepperRef = ref;
        }}>
                <div className={classnames(styles.StepperButton, styles.StepperCut, (_a = {}, _a[styles.disable] = disableCutButton || disabled, _a))} onClick={!disabled ? this.cut : undefined}>
                    <img className={styles.StepperIcon} src={cutIcon}/>
                </div>
                <div className={styles.StepperPut}>
                    <input disabled={disabled} onChange={this.handleChange} onBlur={this.handleBlur} onFocus={this.handleFocus} onClick={this.handleFocus} value={num} type="number"/>
                </div>
                <div className={classnames(styles.StepperButton, styles.StepperAdd, (_b = {}, _b[styles.disable] = disableAddButton || disabled, _b))} onClick={!disabled ? this.add : undefined}>
                    <img className={styles.StepperIcon} src={addIcon}/>
                </div>
            </div>);
    };
    Stepper.defaultProps = {
        value: null,
        step: 1,
        min: 1,
        max: null,
        onFocus: function () { },
        onChange: function () { },
        onBlur: function () { },
        onButtonClick: function () { },
        disabled: false
    };
    return Stepper;
}(PureComponent));
export default Stepper;