react-imask - npm Package Compare versions

Comparing version 7.5.1-alpha.0 to 7.6.0

dist/react-imask.js

@@ -190,7 +190,9 @@ (function (global, factory) {
       onAccept,
-      onComplete
+      onComplete,
+      ref = React.useRef(null),
+      defaultValue,
+      defaultUnmaskedValue,
+      defaultTypedValue
     } = _temp === void 0 ? {} : _temp;
-    const ref = React.useRef(null);
     const maskRef = React.useRef(null);
-    const [initialized, setInitialized] = React.useState(false);
     const [lastAcceptState, setLastAcceptState] = React.useState({});
@@ -202,7 +204,6 @@ const [value, setValue] = React.useState('');
       var _maskRef$current;
-      if (!initialized) return;
       (_maskRef$current = maskRef.current) == null || _maskRef$current.destroy();
       maskRef.current = null;
     }, []);
-    const _onAccept = React.useCallback(event => {
+    const storeLastAcceptedValues = React.useCallback(() => {
       const m = maskRef.current;
@@ -218,2 +219,7 @@ if (!m) return;
       setValue(m.value);
+    }, []);
+    const _onAccept = React.useCallback(event => {
+      const m = maskRef.current;
+      if (!m) return;
+      storeLastAcceptedValues();
       onAccept == null || onAccept(m.value, m, event);
@@ -223,26 +229,2 @@ }, [onAccept]);
     React.useEffect(() => {
-      const el = ref.current;
-      if (!el || !(opts != null && opts.mask)) return _destroyMask();
-      const mask = maskRef.current;
-      if (!mask) {
-        if (el && opts != null && opts.mask) {
-          maskRef.current = IMask__default.default(el, opts);
-          _onAccept();
-        }
-      } else {
-        mask == null || mask.updateOptions(opts); // TODO fix no idea
-      }
-      setInitialized(Boolean(maskRef.current));
-    }, [opts, _destroyMask, _onAccept]);
-    React.useEffect(() => {
-      if (!maskRef.current) return;
-      const mask = maskRef.current;
-      mask.on('accept', _onAccept);
-      mask.on('complete', _onComplete);
-      return () => {
-        mask.off('accept', _onAccept);
-        mask.off('complete', _onComplete);
-      };
-    }, [_onAccept, _onComplete]);
-    React.useEffect(() => {
       const {
@@ -253,6 +235,8 @@ value: lastAcceptValue,
       const mask = maskRef.current;
-      if (mask && initialized) {
-        if (lastAcceptValue !== value) mask.value = value;
-        setLastAcceptState(state);
+      if (!mask || value === undefined) return;
+      if (lastAcceptValue !== value) {
+        mask.value = value;
+        if (mask.value !== value) _onAccept();
       }
+      setLastAcceptState(state);
     }, [value]);
@@ -265,6 +249,8 @@ React.useEffect(() => {
       const mask = maskRef.current;
-      if (mask && initialized) {
-        if (lastAcceptUnmaskedValue !== unmaskedValue) mask.unmaskedValue = unmaskedValue;
-        setLastAcceptState(state);
+      if (!mask || unmaskedValue === undefined) return;
+      if (lastAcceptUnmaskedValue !== unmaskedValue) {
+        mask.unmaskedValue = unmaskedValue;
+        if (mask.unmaskedValue !== unmaskedValue) _onAccept();
       }
+      setLastAcceptState(state);
     }, [unmaskedValue]);
@@ -277,7 +263,35 @@ React.useEffect(() => {
       const mask = maskRef.current;
-      if (mask && initialized) {
-        if (lastAcceptTypedValue !== typedValue) mask.typedValue = typedValue;
-        setLastAcceptState(state);
+      if (!mask || typedValue === undefined) return;
+      if (lastAcceptTypedValue !== typedValue) {
+        mask.typedValue = typedValue;
+        if (!mask.masked.typedValueEquals(typedValue)) _onAccept();
       }
+      setLastAcceptState(state);
     }, [typedValue]);
+    React.useEffect(() => {
+      const el = ref.current;
+      if (!el || !(opts != null && opts.mask)) return _destroyMask();
+      const mask = maskRef.current;
+      if (!mask) {
+        if (el && opts != null && opts.mask) {
+          maskRef.current = IMask__default.default(el, opts);
+          storeLastAcceptedValues();
+          if (defaultValue !== undefined) setValue(defaultValue);
+          if (defaultUnmaskedValue !== undefined) setUnmaskedValue(defaultUnmaskedValue);
+          if (defaultTypedValue !== undefined) setTypedValue(defaultTypedValue);
+        }
+      } else {
+        mask == null || mask.updateOptions(opts); // TODO fix no idea
+      }
+    }, [opts, _destroyMask, _onAccept]);
+    React.useEffect(() => {
+      if (!maskRef.current) return;
+      const mask = maskRef.current;
+      mask.on('accept', _onAccept);
+      mask.on('complete', _onComplete);
+      return () => {
+        mask.off('accept', _onAccept);
+        mask.off('complete', _onComplete);
+      };
+    }, [_onAccept, _onComplete]);
     React.useEffect(() => _destroyMask, [_destroyMask]);
@@ -284,0 +298,0 @@ return {

esm/hook.d.ts

 import { type InputMask, type InputMaskElement, type FactoryOpts } from 'imask';
 import { Dispatch } from 'react';
 import type { MutableRefObject } from 'react';
-export default function useIMask<MaskElement extends InputMaskElement, Opts extends FactoryOpts = FactoryOpts>(opts: Opts, { onAccept, onComplete }?: {
+export default function useIMask<MaskElement extends InputMaskElement, Opts extends FactoryOpts = FactoryOpts>(opts: Opts, { onAccept, onComplete, ref, defaultValue, defaultUnmaskedValue, defaultTypedValue, }?: {
+    ref?: MutableRefObject<MaskElement | null>;
     onAccept?: (value: InputMask<Opts>['value'], maskRef: InputMask<Opts>, e?: InputEvent) => void;
     onComplete?: (value: InputMask<Opts>['value'], maskRef: InputMask<Opts>, e?: InputEvent) => void;
+    defaultValue?: InputMask<Opts>['value'];
+    defaultUnmaskedValue?: InputMask<Opts>['unmaskedValue'];
+    defaultTypedValue?: InputMask<Opts>['typedValue'];
 }): {
@@ -8,0 +12,0 @@ ref: MutableRefObject<MaskElement | null>;

esm/hook.js

@@ -7,7 +7,9 @@ import IMask from 'imask/esm/imask';
     onAccept,
-    onComplete
+    onComplete,
+    ref = useRef(null),
+    defaultValue,
+    defaultUnmaskedValue,
+    defaultTypedValue
   } = _temp === void 0 ? {} : _temp;
-  const ref = useRef(null);
   const maskRef = useRef(null);
-  const [initialized, setInitialized] = useState(false);
   const [lastAcceptState, setLastAcceptState] = useState({});
@@ -19,7 +21,6 @@ const [value, setValue] = useState('');
     var _maskRef$current;
-    if (!initialized) return;
     (_maskRef$current = maskRef.current) == null || _maskRef$current.destroy();
     maskRef.current = null;
   }, []);
-  const _onAccept = useCallback(event => {
+  const storeLastAcceptedValues = useCallback(() => {
     const m = maskRef.current;
@@ -35,2 +36,7 @@ if (!m) return;
     setValue(m.value);
+  }, []);
+  const _onAccept = useCallback(event => {
+    const m = maskRef.current;
+    if (!m) return;
+    storeLastAcceptedValues();
     onAccept == null || onAccept(m.value, m, event);
@@ -40,26 +46,2 @@ }, [onAccept]);
   useEffect(() => {
-    const el = ref.current;
-    if (!el || !(opts != null && opts.mask)) return _destroyMask();
-    const mask = maskRef.current;
-    if (!mask) {
-      if (el && opts != null && opts.mask) {
-        maskRef.current = IMask(el, opts);
-        _onAccept();
-      }
-    } else {
-      mask == null || mask.updateOptions(opts); // TODO fix no idea
-    }
-    setInitialized(Boolean(maskRef.current));
-  }, [opts, _destroyMask, _onAccept]);
-  useEffect(() => {
-    if (!maskRef.current) return;
-    const mask = maskRef.current;
-    mask.on('accept', _onAccept);
-    mask.on('complete', _onComplete);
-    return () => {
-      mask.off('accept', _onAccept);
-      mask.off('complete', _onComplete);
-    };
-  }, [_onAccept, _onComplete]);
-  useEffect(() => {
     const {
@@ -70,6 +52,8 @@ value: lastAcceptValue,
     const mask = maskRef.current;
-    if (mask && initialized) {
-      if (lastAcceptValue !== value) mask.value = value;
-      setLastAcceptState(state);
+    if (!mask || value === undefined) return;
+    if (lastAcceptValue !== value) {
+      mask.value = value;
+      if (mask.value !== value) _onAccept();
     }
+    setLastAcceptState(state);
   }, [value]);
@@ -82,6 +66,8 @@ useEffect(() => {
     const mask = maskRef.current;
-    if (mask && initialized) {
-      if (lastAcceptUnmaskedValue !== unmaskedValue) mask.unmaskedValue = unmaskedValue;
-      setLastAcceptState(state);
+    if (!mask || unmaskedValue === undefined) return;
+    if (lastAcceptUnmaskedValue !== unmaskedValue) {
+      mask.unmaskedValue = unmaskedValue;
+      if (mask.unmaskedValue !== unmaskedValue) _onAccept();
     }
+    setLastAcceptState(state);
   }, [unmaskedValue]);
@@ -94,7 +80,35 @@ useEffect(() => {
     const mask = maskRef.current;
-    if (mask && initialized) {
-      if (lastAcceptTypedValue !== typedValue) mask.typedValue = typedValue;
-      setLastAcceptState(state);
+    if (!mask || typedValue === undefined) return;
+    if (lastAcceptTypedValue !== typedValue) {
+      mask.typedValue = typedValue;
+      if (!mask.masked.typedValueEquals(typedValue)) _onAccept();
     }
+    setLastAcceptState(state);
   }, [typedValue]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !(opts != null && opts.mask)) return _destroyMask();
+    const mask = maskRef.current;
+    if (!mask) {
+      if (el && opts != null && opts.mask) {
+        maskRef.current = IMask(el, opts);
+        storeLastAcceptedValues();
+        if (defaultValue !== undefined) setValue(defaultValue);
+        if (defaultUnmaskedValue !== undefined) setUnmaskedValue(defaultUnmaskedValue);
+        if (defaultTypedValue !== undefined) setTypedValue(defaultTypedValue);
+      }
+    } else {
+      mask == null || mask.updateOptions(opts); // TODO fix no idea
+    }
+  }, [opts, _destroyMask, _onAccept]);
+  useEffect(() => {
+    if (!maskRef.current) return;
+    const mask = maskRef.current;
+    mask.on('accept', _onAccept);
+    mask.on('complete', _onComplete);
+    return () => {
+      mask.off('accept', _onAccept);
+      mask.off('complete', _onComplete);
+    };
+  }, [_onAccept, _onComplete]);
   useEffect(() => _destroyMask, [_destroyMask]);
@@ -101,0 +115,0 @@ return {

package.json

 {
   "name": "react-imask",
-  "version": "7.5.1-alpha.0",
+  "version": "7.6.0",
   "license": "MIT",
@@ -64,3 +64,3 @@ "author": "Alexey Kryazhev",
   "dependencies": {
-    "imask": "^7.5.1-alpha.0",
+    "imask": "^7.6.0",
     "prop-types": "^15.8.1"
@@ -74,6 +74,6 @@ },
   },
-  "gitHead": "ea4e8f1d70b0b01f45d8c3b610b903201c7628b4",
+  "gitHead": "181f6b8e412c804e9e0611d4e86d5f28dfc2e86c",
   "devDependencies": {
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
     "react": "^18.2.0",
@@ -80,0 +80,0 @@ "react-dom": "^18.2.0"

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

124338

4.29%

Lines of code

1119

4.29%

Number of low quality alerts

0

-100%

Dependency changes

• Updated

  imask@^7.6.0