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);
};