React.js mutate style

"use strict";

require("./range_field.less");

var React = require("react");
var ReactDom = require("react-dom");
var $ = require("jquery");

class RangeField extends React.Component{
    constructor(props){
        super();

        this.drag_a_start = this.drag_a_start.bind(this);
        this.drag_b_start = this.drag_b_start.bind(this);
        this.drag_a_move = this.drag_a_move.bind(this);
        this.drag_b_move = this.drag_b_move.bind(this);
        this.drag_a_end = this.drag_a_end.bind(this);
        this.drag_b_end = this.drag_b_end.bind(this);

        this.state = {
             "min":0,
             "value_a":props.valueA | 0,
             "max":2000,
             "value_b":props.valueB | 0,
             "size":0
            }
    }

    componentWillMount(){
        var state = {};
        if (this.props.min){
            state.min = this.props.min|0;
        }
        if (this.props.valueA){
            state.value_a = this.props.valueA|0;
        }
        if (this.props.max){
            state.max = this.props.max|0;
        }
        if (this.props.valueB){
            state.value_b = this.props.valueB|0;
        }
        this.setState(state);
    }

    componentDidMount(){
        var st = {};
        var size = this.refs.line.offsetWidth;
        st.size = size;
        this.setState(st);

        $(this.refs.span_a).on("mousedown", this.drag_a_start);
        $(this.refs.span_b).on("mousedown", this.drag_b_start);
    }

    drag_a_start(e){
        this.move_a_handler = this.drag_a_move;
        this.up_a_handler = this.drag_a_end;

        $(document).on("mousemove",this.move_a_handler);
        $(document).on("mouseup",this.up_a_handler);

        this.start_x = e.clientX;
        this.old_val = this.state.value_a;
        if (this.old_val == -1){
            this.old_val = 0;
        }
    }

    drag_b_start(e){
        this.move_b_handler = this.drag_b_move;
        this.up_b_handler = this.drag_b_end;

        $(document).on("mousemove",this.move_b_handler);
        $(document).on("mouseup",this.up_b_handler);

        this.start_x = e.clientX;
        this.old_val = this.state.value_b;
        if (this.old_val == -1){
            this.old_val = this.props.max|0;
        }

    }

    drag_a_move(e){
        var step = (this.props.max - this.props.min) / this.state.size ;
        var value = this.old_val + (e.clientX - this.start_x)* step;
        if (value < this.props.min){
            value = this.props.min;
        }
        if (value > this.state.value_b){
            value = this.props.min;
        }
        value = value | 0;
        var st = {value_a:  value };
        this.setState(st);
    }

    drag_b_move(e){
        var step = (this.props.max - this.props.min) / this.state.size ;
        var value = this.old_val | 0;
        value += (e.clientX - this.start_x)* step;
        if (value < this.state.value_a){
            value = this.props.max;
        }
        if (value > this.props.max){
            value = this.props.max;
        }
        value = value | 0;
        var st = {value_b:  value };
        this.setState(st);
    }

    drag_a_end(e){
        $(document).off("mousemove",this.move_a_handler);
        $(document).off("mouseup",this.up_a_handler);
    }

    drag_b_end(e){
        $(document).off("mousemove",this.move_b_handler);
        $(document).off("mouseup",this.up_b_handler);
    }

    render(){
        var size = this.state.size;

        var start = 10;
        var end = 120;

        if (this.state.value_a==-1){
            start = 0;
        }else{
            start = size/(this.props.max-this.props.min)*this.state.value_a;
        }

        if (this.state.value_b==-1){
            end = size;
        }else{
            end = size/(this.props.max-this.props.min)*this.state.value_b;
        }


        var handler_a_style = {
            cursor: "pointer",
            left: start
        };

        var handler_b_style = {
            cursor: "pointer",
            left: end
        };


        var handler_b = <span className="rangefield__handler right" style={handler_b_style} ref="span_b"></span>

        var range_style = {
            left : start,
            width : end-start
        };

        var inp_style = {display: "none"};

        var val_a_text = this.props.min;
        var val_b_text = this.props.max;

        if (this.state.value_a > 0){
            val_a_text = this.state.value_a;
        }
        if (this.state.value_b > 0){
            val_b_text = this.state.value_b;
        }
        var name_a = this.props.nameA || "cost_min";
        var name_b = this.props.nameB || "cost_max";

        return (
            <div className="rangefield" ref="line">
                <div className="rangefield__value">{val_a_text}-{val_b_text}</div>
                <div className="rangefield__area" style={range_style} ></div>
                <span className="rangefield__handler left" style={handler_a_style} ref="span_a"></span>
                {handler_b}
                <input type="text" name={name_a} value={this.state.value_a} style={inp_style} />
                <input type="text" name={name_b} value={this.state.value_b} style={inp_style} />
            </div>
        );
    }
}

module.exports = RangeField;