hy-checkbox/lib/Slider/slider.js

checkbox & radio ui components for react

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _rcSlider = require('rc-slider');

var _rcSlider2 = _interopRequireDefault(_rcSlider);

var _Input = require('../Input');

var _Input2 = _interopRequireDefault(_Input);

require('rc-slider/assets/index.css');

require('./slider.less');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Range = _rcSlider2.default.Range;

var VmSlider = function (_React$Component) {
    _inherits(VmSlider, _React$Component);

    function VmSlider(props) {
        _classCallCheck(this, VmSlider);

        var _this = _possibleConstructorReturn(this, (VmSlider.__proto__ || Object.getPrototypeOf(VmSlider)).call(this, props));

        _this.state = {
            inputValue: _this.props.value,
            sliderValue: _this.props.value
        };
        return _this;
    }
    /**
     * 滑动条滑动事件
     */


    _createClass(VmSlider, [{
        key: 'handleChange',
        value: function handleChange(value) {
            this.setState({
                inputValue: value,
                sliderValue: value
            });
            var _props = this.props,
                onChange = _props.onChange,
                id = _props.id;

            onChange(value, id);
        }
        /**
         * 文本框事件
         */

    }, {
        key: 'handleInputChange',
        value: function handleInputChange(e) {
            var value = e.target.value;
            this.setState({
                inputValue: value
            });
        }
        /**
         * 文本框失去焦点，判断只能为数字，控制滑动条滑动
         */

    }, {
        key: 'handleInputBlur',
        value: function handleInputBlur(e) {
            var inputValue = this.state.inputValue;
            var _props2 = this.props,
                max = _props2.max,
                min = _props2.min;

            if (isNaN(inputValue)) {
                return;
            }
            inputValue = parseInt(inputValue);
            if (inputValue < min || inputValue > max) {
                return;
            }
            this.handleChange(inputValue);
        }
        /**
         * 文本框回车事件
         */

    }, {
        key: 'handleKeyUp',
        value: function handleKeyUp(e) {
            if (e.keyCode == '13') {
                this.handleInputBlur(e);
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var me = this;

            var _props3 = this.props,
                onChange = _props3.onChange,
                unit = _props3.unit,
                prefixCls = _props3.prefixCls,
                value = _props3.value,
                props = _objectWithoutProperties(_props3, ['onChange', 'unit', 'prefixCls', 'value']);

            var _state = this.state,
                sliderValue = _state.sliderValue,
                inputValue = _state.inputValue;

            return _react2.default.createElement(
                'div',
                { className: (0, _classnames2.default)(prefixCls + '-contain') },
                _react2.default.createElement(_rcSlider2.default, _extends({ onChange: me.handleChange.bind(me), prefixCls: prefixCls, value: sliderValue }, props)),
                _react2.default.createElement(
                    'div',
                    { className: (0, _classnames2.default)(prefixCls + '-input') },
                    _react2.default.createElement(_Input2.default, { className: (0, _classnames2.default)(prefixCls + '-in-input'), onChange: me.handleInputChange.bind(me), value: inputValue,
                        type: 'text', onBlur: me.handleInputBlur.bind(me), onKeyUp: me.handleKeyUp.bind(me) }),
                    _react2.default.createElement(
                        'span',
                        { className: (0, _classnames2.default)(prefixCls + '-unit') },
                        unit
                    )
                )
            );
        }
    }]);

    return VmSlider;
}(_react2.default.Component);

VmSlider.propTypes = {
    value: _react2.default.PropTypes.number,
    onChange: _react2.default.PropTypes.func,
    max: _react2.default.PropTypes.number,
    min: _react2.default.PropTypes.number,
    step: _react2.default.PropTypes.number,
    id: _react2.default.PropTypes.string,
    prefixCls: _react2.default.PropTypes.string
};
VmSlider.defaultProps = {
    prefixCls: 'ult-slider'
};

var CustomizedRange = function (_React$Component2) {
    _inherits(CustomizedRange, _React$Component2);

    function CustomizedRange(props) {
        _classCallCheck(this, CustomizedRange);

        var _this2 = _possibleConstructorReturn(this, (CustomizedRange.__proto__ || Object.getPrototypeOf(CustomizedRange)).call(this, props));

        _this2.onLowerBoundChange = function (e) {
            _this2.setState({ lowerBound: +e.target.value });
        };

        _this2.onUpperBoundChange = function (e) {
            _this2.setState({ upperBound: +e.target.value });
        };

        _this2.onSliderChange = function (value) {
            log(value);
            _this2.setState({
                value: value
            });
        };

        _this2.handleApply = function () {
            var _this2$state = _this2.state,
                lowerBound = _this2$state.lowerBound,
                upperBound = _this2$state.upperBound;

            _this2.setState({ value: [lowerBound, upperBound] });
        };

        _this2.state = {
            lowerBound: 20,
            upperBound: 40,
            value: [20, 40]
        };
        return _this2;
    }

    _createClass(CustomizedRange, [{
        key: 'render',
        value: function render() {
            return _react2.default.createElement(
                'div',
                null,
                _react2.default.createElement(
                    'label',
                    null,
                    'LowerBound: '
                ),
                _react2.default.createElement('input', { type: 'number', value: this.state.lowerBound, onChange: this.onLowerBoundChange }),
                _react2.default.createElement('br', null),
                _react2.default.createElement(
                    'label',
                    null,
                    'UpperBound: '
                ),
                _react2.default.createElement('input', { type: 'number', value: this.state.upperBound, onChange: this.onUpperBoundChange }),
                _react2.default.createElement('br', null),
                _react2.default.createElement(
                    'button',
                    { onClick: this.handleApply },
                    'Apply'
                ),
                _react2.default.createElement('br', null),
                _react2.default.createElement('br', null),
                _react2.default.createElement(Range, { allowCross: false, value: this.state.value, onChange: this.onSliderChange })
            );
        }
    }]);

    return CustomizedRange;
}(_react2.default.Component);

exports.default = VmSlider;