material-ui-number-input

The better TextField for number inputs.

Install

Changelog

Check Change log for changes.

Properties

| Name | Type | Default | TextField | Description | | ----------------------- | ---------- | --------- | --------- | ------------------------------------------------------- | | children | node | | ✓ | | | className | string | | ✓ | The css class name of the root element. | | disabled | bool | false | ✓ | Disables the input field if set to true.| | floatingLabelFixed | bool | false | ✓ | If true, the floating label will float even when there is no value. | | id | string | | ✓ | The id prop for the input field. | | name | string | | ✓ | Name applied to the input. | | fullWidth | bool | false | ✓ | If true, the field receives the property width 100%. | | underlineShow | bool | true | ✓ | If true, shows the underline for the input field. | | defaultValue | number | | ✓ | The number to use for the default value. Must be in range [min, max] if any is setted. | | strategy | 'ignore' | 'warn' | 'allow' | 'allow' | ❌ | Strategy to use when user presses key and when value prop change it's value. | | min | number | | ❌ | The number used as minimum value limit. Must be less than max. | | max | number | | ❌ | The number used as maximum value limit. Must be greater than min. | | required | bool | false | ❌ | If true and if input is left empty than instead of 'clean', 'required' error will be emited throughout onError handler if useStrategy is not 'ignore'. | | value | string | | ✓ | The value of the input field. | | onChange | function | | ✓ | Callback function that is fired when input filed must change it's value. Signature: function(event: React.FormEvent<HTMLInputElement>, value: string) => void. | | onError | function | | ❌ | Callback function that is fired when input error status changes and strategy is not 'ignore'. Signature: function(error: 'none' | 'invalidSymbol' | 'incompleteNumber' | 'singleMinus' | 'singleFloatingPoint' | 'singleZero' | 'min' | 'max' | 'required' | 'clean') => void. | | onValid | function| | ❌ | Callback function that is fired when input's value is a valid number. Signature: function(value: number) => void | | onRequestValue* | function | | ❌ | Callback function that is fired when strategy is 'warn' or 'ignore', input is controlled and an invalid number value is passed. It provides valid number value which needs to be setted. Signature: function(value: string) => void | | errorText | node | | ✓ | The error content to display. | | errorStyle | object | | ✓ | The style object to use to override error styles. | | floatingLabelFocusStyle | object | | ✓ | The style object to use to override floating label styles when focused. | | floatingLabelStyle | object | | ✓ | The style object to use to override floating label styles. | | floatingLabelText | node | | ✓ | The content to use for the floating label element. | | hintStyle | object | | ✓ | Override the inline-styles of the TextField's hint text element. | | hintText | node | | ✓ | The hint content to display. | | inputStyle | object | | ✓ | Override the inline-styles of the TextField's input element. When multiLine is false: define the style of the input element. When multiLine is true: define the style of the container of the textarea. | | style | object | | ✓ | Override the inline-styles of the root element. | | underlineDisabledStyle | object | | ✓ | Override the inline-styles of the TextField's underline element when disabled. | | underlineFocusStyle | object | | ✓ | Override the inline-styles of the TextField's underline element when focussed. | | underlineStyle | object | | ✓ | Override the inline-styles of the TextField's underline element. |

* onRequestValue is required when strategy is 'warn' or 'ignore' and input is controlled in order to ensure correct strategy behaviour.

Strategies

| strategy | onError fired | onRequestValue fired | | -------- | ------------- | ------------------- | | 'allow' | ✓ | | | 'warn' | ✓ | ✓* | | 'ignore' | | ✓* |

* Fired when input is controlled (value is provided). If input is not controlled it's value will be automaticlly corrected when it get's invalid number value.

Errors

'none'

Fired when input's value is valid (there is no error).

'required'

Fired when required prop is true and user leaves empty the input or it gets cleared.

'clean'

Fired when required prop is false and user leaves empty the input or it gets cleared.

'invalidSymbol'

Fired when user enters none special key which is different than -,.,[0-9].

'incompleteNumber'

Fired wehn user enters - as first char in the input or when user enters the first ..

'singleMinus'

Fired when user enters - not as a first char.

'singleFloatingPoint'

Fired when user enters . and there is already one entered.

'singleZero'

Fired when user has entered 0 as first char and enters a digit key.

'min'

Fired when user enters number less than min prop value.

'max'

Fired when user enters number greater than max prop value.

public methods

NumberInput re-exposes public method getInputNode(): HTMLInputElement from TextField.

TextField methods: blur, focus, select and getValue are not exposed as they and getInputNode will be removed in material-ui 0.16 and replaced with public member input which is public and now but getInputNode is prefered until 0.16 is released. If you want to use any of those methods call them on input retunrned from getInputNode with the excpetion of getValue instead use value property.

Example

import * as React from 'react';
import NumberInput from 'material-ui-number-input';

class Demo extends React.Component {
  constructor(props) {
  super(props);
  
  this.onKeyDown = (event) => {
    console.log(`onKeyDown ${event.key}`);
  };
  
  this.onChange = (event, value) => {
    const e = event;
    console.log(`onChange ${e.target.value}, ${value}`);
  };
  
  this.onError = (error) => {
    let errorText;
    console.log(error);
    switch (error) {
      case 'required':
        errorText = 'This field is required';
        break;
      case 'invalidSymbol':
        errorText = 'You are tring to enter none number symbol';
        break;
      case 'incompleteNumber':
        errorText = 'Number is incomplete';
        break;
      case 'singleMinus':
        errorText = 'Minus can be use only for negativity';
        break;
      case 'singleFloatingPoint':
        errorText = 'There is already a floating point';
        break;
      case 'singleZero':
        errorText = 'Floating point is expected';
        break;
      case 'min':
        errorText = 'You are tring to enter number less than -10';
        break;
      case 'max':
          errorText = 'You are tring to enter number greater than 12';
          break;
      }
      this.setState({ errorText: errorText });
    };

    this.onValid = (value) => {
      console.debug(`${value} is a valid number`);
    };

    this.onRequestValue = (value) => {
      console.log(`request ${JSON.stringify(value)}`);
      this.setState({ value: value })
    }
  }
    
  render() {
    const { state, onChange, onError, onKeyDown, onValid, onRequestValue } = this; 
    return (
      <NumberInput
        id="num"
        value={state.value}
        required
        defaultValue={9}
        min={-10}
        max={12}
        strategy="warn"
        errorText={state.errorText}
        onValid={onValid}
        onChange={onChange}
        onError={onError}
        onRequestValue={onRequestValue}
        onKeyDown={onKeyDown} />
    );
  }
}

Written in Typescript and Typescript Ready! (check example)

Supports propTypes for regular JavaScript users

Testing

Tests will be added soon

Contributing

1. Fork the repository
2. npm install
3. npm run typings
4. Make changes
5. npm start
6. open http://localhost:3000
7. Make a Pull Request