react-jam-ui/components/Counter/index.js

React JAM UI components

import React from 'react';
import classNames from 'classnames';
import Input from '../Input'

import './styles.styl'

export default class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: parseFloat(props.value),
            step: props.step || 1,
            align: props.align || 'center'
        }
    }
    
    componentWillReceiveProps(nextProps) {
        this.setState({
            value: nextProps.value
        });
    }
    
    onMinusCapture(e) {
        if (!this.props.disabled) {
            let val = this.state.value - this.state.step;
            val = val < this.props.min ? this.props.min : val;
            this.setState({value: val})

            if(this.props.onChange) {
                e.target.value = val
                this.props.onChange(e)
            };
        }
    }

    onPlusCapture(e) {
        if (!this.props.disabled) {
            let val = this.state.value + this.state.step;
            val = val > this.props.max ? this.props.max : val;  
            this.setState({value: val})

            if(this.props.onChange) {
                e.target.value = val
                this.props.onChange(e)
            };
        }
    }

    onChangeCapture(e) {
        if (this.props.directChange && !this.props.disabled) {
            let val = parseFloat(e.target.value);

            if (val) {
                val = val < this.props.min ? this.props.min : val;
                val = val > this.props.max ? this.props.max : val;
            } else {
                val=''
            }
            e.target.value = val;
            this.setState({value: val})
            if(this.props.onChange) this.props.onChange(e);
        }
    }

    render() {
        let classes = classNames('counter', this.props.variant, this.props.size, this.props.className, {
            'disabled': this.props.disabled,
            'error': this.props.error,
            'valid': this.props.valid
        });

        return (
            <div className={ classes }>
                <i className='counter__minus' onClick={ ::this.onMinusCapture }>-</i>
                {this.props.directChange ? <Input className='' variant={this.props.variant} type='text' size={this.props.size} disabled={this.props.disabled} value={this.state.value} bar={this.props.bar} align={ this.state.align } onChange={::this.onChangeCapture} /> : <span className={`counter_num ${this.state.align}`}>{ this.state.value }</span>}
                <i className='counter__plus' onClick={ ::this.onPlusCapture }>+</i>
            </div>
        )
    }
}