ukelli-ui/core/multiple-selector/multiple-selector.js

Base on React's UI lib. Make frontend's dev simpler and faster.

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, { PureComponent } from 'react';
import { Call } from 'basic-helper';
import { Icon } from '../icon';
var Multiple = /** @class */ (function (_super) {
    __extends(Multiple, _super);
    function Multiple(props) {
        var _this = _super.call(this, props) || this;
        var range = props.range, defaultValue = props.defaultValue;
        _this.state = {
            isShowIdea: false,
            value: defaultValue || range[0]
        };
        return _this;
    }
    Multiple.prototype.componentDidMount = function () {
        this.multipleHelper.defaultValue = '1';
    };
    Multiple.prototype.multipleOperation = function (symbol) {
        var _a = this.props.basicUnit, basicUnit = _a === void 0 ? 1 : _a;
        var value = this.state.value;
        var _result = +value;
        switch (symbol) {
            case 'plus':
                _result += basicUnit;
                break;
            case 'less':
                _result -= basicUnit;
                break;
        }
        this.changeValue(_result);
    };
    Multiple.prototype.changeValue = function (val) {
        var onChange = this.props.onChange;
        var value = +(val) || 1;
        this.setState({
            value: value
        });
        Call(onChange, value);
    };
    Multiple.prototype.checkValue = function () {
        var _a = this.props, _b = _a.min, min = _b === void 0 ? -1000 : _b, _c = _a.max, max = _c === void 0 ? 10000 : _c;
        var value = this.state.value;
        if (value < min || value === 0) {
            value = min;
        }
        else if (value > max) {
            value = max;
        }
        this.changeValue(value);
    };
    Multiple.prototype.setIdea = function (isShow) {
        this.setState({
            isShowIdea: isShow
        });
    };
    Multiple.prototype.render = function () {
        var _this = this;
        var _a = this.props, suffix = _a.suffix, range = _a.range, inputable = _a.inputable;
        var _b = this.state, isShowIdea = _b.isShowIdea, value = _b.value;
        return (React.createElement("div", { className: "multiple-helper" + (isShowIdea ? ' show' : '') },
            React.createElement("div", { className: "layout a-i-str j-c-b" },
                React.createElement("input", { type: "text", name: "multiple", className: "multiple-input-control", onFocus: function (e) {
                        e.target.select();
                    }, onBlur: function (e) {
                        var self = _this;
                        setTimeout(function () {
                            if (!isShowIdea)
                                return;
                            self.setIdea(false);
                            // self.checkValue();
                        }, 1 * 100);
                    }, value: value, ref: function (e) { _this.multipleHelper = e; }, onChange: function (e) {
                        if (!inputable)
                            return;
                        _this.changeValue(e.target.value);
                    } }),
                React.createElement("span", { className: "multiple-tip" }, suffix),
                React.createElement("span", { className: "multiple-action-btn", onClick: function (e) { return _this.multipleOperation('less'); } }, "-"),
                React.createElement("span", { className: "multiple-action-btn", onClick: function (e) { return _this.multipleOperation('plus'); } }, "+"),
                React.createElement("span", { className: "ps5 toggle-tip-btn", onClick: function (e) {
                        _this.multipleHelper.focus();
                        _this.setIdea(true);
                    } },
                    React.createElement(Icon, { n: "arrow-down" }))),
            React.createElement("div", { className: "idea-tip" }, range && range.map(function (item) { return (React.createElement("div", { key: item, className: "item", onClick: function (e) {
                    _this.setIdea(false);
                    _this.changeValue(item);
                } },
                React.createElement("span", { className: "mul" }, item),
                suffix)); }))));
    };
    Multiple.defaultProps = {
        max: 999999,
        inputable: true,
        min: 1,
        range: [1, 5, 10, 100],
    };
    return Multiple;
}(PureComponent));
export default Multiple;