Feature Request: stepper for number

[pjebs]

I believe this would be a great future component:

[Dogfalo]

The native number input type already has most of this functionality. Were you able to find a MD spec for this?

[pjebs]

No MD. I just thought it would be better than the native number input. Close if appropriate.

[durnek60]

I believe this would be a great future component:

Absolutely agree with this request! Or do you have any workaround to achive this input?

[pjebs]

no workaround yet.

[pjebs]

Here is a (React) workaround:

import React from 'react'

const leftRegButtonStyle = {
    marginLeft: 8,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
}

const rightRegButtonStyle = {
    marginRight: 8,
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
}

const inputStyle = {
    width: 40,
}

const Stepper = ({ setHandler, boxIndex, value, min=0, max=0 }) => {
    const isValid = num => {
        return num >= min && (!max||num <= max);
    }
    const getValidValue = (potentialNewValue) => isValid(parseInt(potentialNewValue))?parseInt(potentialNewValue):value;

    const changeHandler = event => {
        setHandler(boxIndex)(getValidValue(event.target.value))
    };
    const increaseHandler = (event) => {
        setHandler(boxIndex)(getValidValue(value+1))
        event.preventDefault()
    }
    const decreaseHandler = (event) => {
        setHandler(boxIndex)(getValidValue(value-1))
        event.preventDefault()
    }
    return (
        <React.Fragment>
            <button style={leftRegButtonStyle} className="waves-effect waves-light btn blue-grey lighten-5 reg-btn" onClick={decreaseHandler}>-</button>
            <input type="text" style={inputStyle} onChange={changeHandler} value={value} className="center-align" />
            <button style={rightRegButtonStyle} className="waves-effect waves-light btn blue-grey lighten-5 reg-btn" onClick={increaseHandler}>+</button>
        </React.Fragment>
    )
}

export default Stepper;