Merge pull request #127 from nkbt/more-defauls-values

More default values

example/App.js

@@ -4,7 +4,7 @@ import {Customizable} from './Customizable';
 import {UndoRedo} from './UndoRedo';
 import {Textarea} from './Textarea';
 import {Ref} from './Ref';
-import {Falsy} from './Falsy';
+import {DefaultValue} from './DefaultValue';
 
 
 export const App = () => (
@@ -36,8 +36,8 @@ export const App = () => (
     </section>
 
     <section className="section">
-      <h2>Example 6. Falsy value</h2>
-      <Falsy />
+      <h2>Example 6. Create with default value</h2>
+      <DefaultValue />
     </section>
   </div>
 );

example/DefaultValue.js

@@ -0,0 +1,125 @@
+import React, {useState, useCallback} from 'react';
+import {DebounceInput} from '../src';
+
+
+export const DefaultValue = () => {
+  const [type, setType] = useState('number');
+  const [value, setValue] = useState(0);
+
+  const onChange = useCallback(e => setValue(e.target.value), [setValue]);
+
+  const onEmptyNumber = useCallback(() => {
+    setType(undefined);
+    setValue(undefined);
+    setTimeout(() => {
+      setType('number');
+    });
+  }, [setValue, setType]);
+
+  const onNumberZero = useCallback(() => {
+    setType(undefined);
+    setValue(undefined);
+    setTimeout(() => {
+      setValue(0);
+      setType('number');
+    });
+  }, [setValue, setType]);
+
+  const onNumber = useCallback(() => {
+    setType(undefined);
+    setValue(undefined);
+    setTimeout(() => {
+      setValue(5);
+      setType('number');
+    });
+  }, [setValue, setType]);
+
+  const onEmptyText = useCallback(() => {
+    setType(undefined);
+    setValue(undefined);
+    setTimeout(() => {
+      setType('text');
+    });
+  }, [setValue, setType]);
+
+  const onText = useCallback(() => {
+    setType(undefined);
+    setValue(undefined);
+    setTimeout(() => {
+      setValue('some text');
+      setType('text');
+    });
+  }, [setValue, setType]);
+
+  const onDestroy = useCallback(() => {
+    setValue(undefined);
+    setType(undefined);
+  }, [setValue, setType]);
+
+
+  return (
+    <>
+      <div className="config">
+        <label className="label">
+          <button
+            type="button"
+            className="input"
+            onClick={onNumberZero}>
+            Number with value 0
+          </button>
+        </label>
+        <label className="label">
+          <button
+            type="button"
+            className="input"
+            onClick={onEmptyNumber}>
+            Number with no value
+          </button>
+        </label>
+        <label className="label">
+          <button
+            type="button"
+            className="input"
+            onClick={onNumber}>
+            Number with some value
+          </button>
+        </label>
+        <label className="label">
+          <button
+            type="button"
+            className="input"
+            onClick={onEmptyText}>
+            Text with no value
+          </button>
+        </label>
+        <label className="label">
+          <button
+            type="button"
+            className="input"
+            onClick={onText}>
+            Text with some value
+          </button>
+        </label>
+        <label className="label">
+          <button
+            type="button"
+            className="input"
+            onClick={onDestroy}>
+            Destroy
+          </button>
+        </label>
+      </div>
+
+      {type && (
+        <DebounceInput
+          type={type}
+          value={value}
+          debounceTimeout={500}
+          onChange={onChange} />
+      )}
+
+      <p>Type: {JSON.stringify(type)}</p>
+      <p>Value: {JSON.stringify(value)}</p>
+    </>
+  );
+};

example/app.css

@@ -11,6 +11,10 @@
   padding-bottom: 20px;
 }
 
+.config button {
+  margin: 5px 0;
+}
+
 .label {
   padding-right: 20px;
 }

package.json

@@ -32,7 +32,8 @@
     "postversion": "git push --follow-tags",
     "nuke": "rm -rf node_modules yarn.lock",
     "postnuke": "yarn install",
-    "deps": "! depcheck --specials=bin,eslint --ignore-dirs=build,lib,pub  --ignores=@types/* | grep --invert-match 'No depcheck issue'"
+    "deps": "! depcheck --specials=bin,eslint --ignore-dirs=build,lib,pub  --ignores=@types/* | grep --invert-match 'No depcheck issue'",
+    "validate": "yarn lint && yarn test && yarn deps"
   },
   "repository": {
     "type": "git",