fix #888

uNmAnNeR · Jul 18, 2023 · a2a7809 · a2a7809
1 parent ddac2b2
commit a2a7809
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 24 deletions.
diff --git a/packages/imask/example.html b/packages/imask/example.html
@@ -12,9 +12,20 @@ <h1>IMask Core Demo</h1>
   <!-- <script src="https://unpkg.com/imask"></script> -->
   <script type="text/javascript">
     const opts = {
-      mask: IMask.MaskedEnum,
-      enum: ['a', 'bc', 'def'],
-      lazy: false,
+      mask: `d $`,
+      blocks: {
+        d: {
+          mask: Number,
+          scale: 2,
+          signed: false,
+          thousandsSeparator: " ",
+          padFractionalZeros: false,
+          normalizeZeros: false,
+          radix: ",",
+          mapToRadix: [".", "б", "^", "ю", "&"]
+        }
+      },
+      lazy: false
     };
 
     var result = document.getElementById('value');

diff --git a/packages/imask/src/masked/number.ts b/packages/imask/src/masked/number.ts
@@ -18,9 +18,7 @@ type MaskedNumberOptions = MaskedOptions<MaskedNumber,
   | 'padFractionalZeros'
 >;
 
-/**
-  Number mask
-*/
+/** Number mask */
 export default
 class MaskedNumber extends Masked<number> {
   static UNMASKED_RADIX = '.';
@@ -112,7 +110,7 @@ class MaskedNumber extends Masked<number> {
   }
 
   override doPrepareChar (ch: string, flags: AppendFlags={}): [string, ChangeDetails] {
-    ch = this._removeThousandsSeparators(
+    const [prepCh, details] = super.doPrepareChar(this._removeThousandsSeparators(
       this.scale && this.mapToRadix.length && (
         /*
           radix should be mapped when
@@ -125,9 +123,7 @@ class MaskedNumber extends Masked<number> {
         flags.input && flags.raw ||
         !flags.input && !flags.raw
       ) ? ch.replace(this._mapToRadixRegExp, this.radix) : ch
-    );
-
-    const [prepCh, details] = super.doPrepareChar(ch, flags);
+    ), flags);
     if (ch && !prepCh) details.skip = true;
 
     if (prepCh && !this.allowPositive && !this.value && prepCh !== '-') details.aggregate(this._appendChar('-'));

diff --git a/packages/react-imask/example.html b/packages/react-imask/example.html
@@ -17,22 +17,24 @@ <h1>React IMask Plugin Demo</h1>
     function IMaskHook () {
       const [ opts, setOpts ] = React.useState({ mask: Number });
 
-      const { ref, value, setValue } = ReactIMask.useIMask(opts, /* { onAccept, onComplete } */);
-
-      React.useEffect(() => {
-        if (value) return;
-
-        /*setTimeout(() => {
-          setValue('123')
-          console.log('set value from hook');
-        }, 1000); */
+      const { ref, value, setValue } = ReactIMask.useIMask({
+        blocks: {
+          d: {
+            mask: Number,
+            scale: 2,
+            signed: false,
+            thousandsSeparator: " ",
+            padFractionalZeros: false,
+            normalizeZeros: false,
+            radix: ",",
+            mapToRadix: [".", "б", "^", "ю", "&"]
+          }
+        },
+        mask: `d $`,
+        lazy: false
       });
 
-      React.useEffect(() => {
-        console.log('masked value changed', value);
-      }, [value]);
-
-      return React.createElement('input', { ref, defaultValue: 10 });
+      return React.createElement('input', { ref, defaultValue: '10000000' });
     }
 
     class App extends React.Component {

diff --git a/packages/react-imask/src/hook.ts b/packages/react-imask/src/hook.ts
@@ -34,6 +34,7 @@ function useIMask<
   const [typedValue, setTypedValue] = useState<InputMask<Opts>['typedValue']>();
 
   const _destroyMask = useCallback(() => {
+    if (!initialized) return;
     maskRef.current?.destroy();
     maskRef.current = null;
   }, []);