react: add default template opts for hook (#962)

uNmAnNeR · Dec 11, 2023 · bf8917e · bf8917e
1 parent 882e73b
commit bf8917e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 21 deletions.
diff --git a/packages/imask/example.html b/packages/imask/example.html
@@ -3,7 +3,7 @@
 
 <body>
   <h1>IMask Core Demo</h1>
-  <input type="text" id="input" value="0000">
+  <input type="text" id="input">
   <div>value: <span id="value"></span></div>
   <div>unmasked: <span id="unmasked"></span></div>
   <div contenteditable="true" id="ce"></div>
@@ -12,7 +12,30 @@ <h1>IMask Core Demo</h1>
   <!-- <script src="https://unpkg.com/imask"></script> -->
   <script type="text/javascript">
     const opts = {
-      mask: /^.*$/
+      mask: Date,
+      pattern: 'd.`m.`Y',
+      lazy: false,
+      overwrite: true,
+      autofix: 'pad',
+      blocks: {
+        d: {
+          mask: IMask.MaskedRange,
+          from: 1,
+          to: 31,
+          maxLength: 2,
+        },
+        m: {
+          mask: IMask.MaskedRange,
+          from: 1,
+          to: 12,
+          maxLength: 2,
+        },
+        Y: {
+          mask: IMask.MaskedRange,
+          from: 2023,
+          to: 2023,
+        },
+      },
     };
 
     const input = document.getElementById('input');
@@ -24,24 +47,6 @@ <h1>IMask Core Demo</h1>
       unmasked.innerHTML = imask.unmaskedValue;
     });
 
-
-    setTimeout(() => {
-      //HMR does pretty much this:
-      input.value = 1111
-      dispatchEvents(input)
-    }, 1000)
-
-    //straight from Angular's hmr-accept.js
-    function dispatchEvents() {
-      input.dispatchEvent(new Event('input', {
-          bubbles: true,
-          cancelable: true,
-      }));
-      input.blur();
-      input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
-    }
-
-
     // document.getElementById('input').addEventListener('focus', () => {
     //   imask.updateOptions({
     //     mask: mask.map((m) => ({

diff --git a/packages/react-imask/src/hook.ts b/packages/react-imask/src/hook.ts
@@ -7,7 +7,7 @@ import type { ReactMaskProps } from './mixin';
 export default
 function useIMask<
   MaskElement extends InputMaskElement,
-  Opts extends FactoryOpts,
+  Opts extends FactoryOpts=FactoryOpts,
 >(
   opts: Opts,
   { onAccept, onComplete }: Partial<Pick<ReactMaskProps<MaskElement, Opts>, 'onAccept' | 'onComplete'>> = {}