diff --git a/example/App.js b/example/App.js index b331e51..49bd9ed 100644 --- a/example/App.js +++ b/example/App.js @@ -4,6 +4,7 @@ import {Customizable} from './Customizable'; import {UndoRedo} from './UndoRedo'; import {Textarea} from './Textarea'; import {Ref} from './Ref'; +import {MinMax} from './MinMax'; import {DefaultValue} from './DefaultValue'; @@ -40,6 +41,12 @@ export function App() {

Example 6. Create with default value

+ +
+

Example 7. With External Validation

+ +

Accepts values between 10 and 100

+
); } diff --git a/example/MinMax.js b/example/MinMax.js new file mode 100644 index 0000000..68a615a --- /dev/null +++ b/example/MinMax.js @@ -0,0 +1,44 @@ +import React from 'react'; +import {DebounceInput} from '../src'; + + +export class MinMax extends React.Component { + state = { + value: null + }; + + render() { + const {value} = this.state; + + const min = 10; + const max = 100; + + const handleChange = e => { + let newValue = Number(e.target.value); + if (newValue === 0) { + newValue = null; + } else if (newValue < min) { + newValue = min; + } else if (newValue > max) { + newValue = max; + } + this.setState({value: newValue}); + }; + + return ( +
+
+ +

Value: {JSON.stringify(value)}

+
+
+ ); + } +} diff --git a/src/Component.js b/src/Component.js index ed92b0e..8212445 100644 --- a/src/Component.js +++ b/src/Component.js @@ -53,10 +53,10 @@ export class DebounceInput extends React.PureComponent { } const {value, debounceTimeout} = this.props; - const {debounceTimeout: oldTimeout, value: oldValue} = prevProps; + const {debounceTimeout: oldTimeout} = prevProps; const {value: stateValue} = this.state; - if (typeof value !== 'undefined' && oldValue !== value && stateValue !== value) { + if (typeof value !== 'undefined' && stateValue !== value) { // Update state.value if new value passed via props, yep re-render should happen // eslint-disable-next-line react/no-did-update-set-state this.setState({value}); @@ -78,8 +78,9 @@ export class DebounceInput extends React.PureComponent { event.persist(); const {value: oldValue} = this.state; - const {minLength} = this.props; + const {debounceTimeout, minLength} = this.props; + if (debounceTimeout > 0) this.isDebouncing = true; this.setState({value: event.target.value}, () => { const {value} = this.state; @@ -132,7 +133,6 @@ export class DebounceInput extends React.PureComponent { }, debounceTimeout); this.notify = event => { - this.isDebouncing = true; debouncedChangeFunc(event); };