react-imask - npm Package Compare versions

Comparing version 7.1.0-alpha.1 to 7.1.0-alpha.2

esm/hook.js

@@ -1,31 +0,17 @@
-import { _ as _objectWithoutPropertiesLoose } from './objectWithoutPropertiesLoose-26500259.js';
 import IMask from 'imask/esm/imask';
 import { useRef, useState, useCallback, useEffect } from 'react';
-import './index-of-4170d828.js';
 
-var _excluded = ["value"],
-  _excluded2 = ["unmaskedValue"],
-  _excluded3 = ["typedValue"];
 function useIMask(opts, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-    onAccept = _ref.onAccept,
-    onComplete = _ref.onComplete;
-  var ref = useRef(null);
-  var maskRef = useRef(null);
-  var _useState = useState(false),
-    initialized = _useState[0],
-    setInitialized = _useState[1];
-  var _useState2 = useState({}),
-    lastAcceptState = _useState2[0],
-    setLastAcceptState = _useState2[1];
-  var _useState3 = useState(''),
-    value = _useState3[0],
-    setValue = _useState3[1];
-  var _useState4 = useState(''),
-    unmaskedValue = _useState4[0],
-    setUnmaskedValue = _useState4[1];
-  var _useState5 = useState(),
-    typedValue = _useState5[0],
-    setTypedValue = _useState5[1];
-  var _destroyMask = useCallback(function () {
+  let {
+    onAccept,
+    onComplete
+  } = _temp === void 0 ? {} : _temp;
+  const ref = useRef(null);
+  const maskRef = useRef(null);
+  const [initialized, setInitialized] = useState(false);
+  const [lastAcceptState, setLastAcceptState] = useState({});
+  const [value, setValue] = useState('');
+  const [unmaskedValue, setUnmaskedValue] = useState('');
+  const [typedValue, setTypedValue] = useState();
+  const _destroyMask = useCallback(() => {
     var _maskRef$current;
@@ -35,4 +21,4 @@ (_maskRef$current = maskRef.current) == null ? void 0 : _maskRef$current.destroy();
   }, []);
-  var _onAccept = useCallback(function (event) {
-    var m = maskRef.current;
+  const _onAccept = useCallback(event => {
+    const m = maskRef.current;
     if (!m) return;
@@ -49,9 +35,7 @@ setLastAcceptState({
   }, [onAccept]);
-  var _onComplete = useCallback(function () {
-    return maskRef.current && (onComplete == null ? void 0 : onComplete(maskRef.current.value, maskRef.current));
-  }, [onComplete]);
-  useEffect(function () {
-    var el = ref.current;
+  const _onComplete = useCallback(() => maskRef.current && (onComplete == null ? void 0 : onComplete(maskRef.current.value, maskRef.current)), [onComplete]);
+  useEffect(() => {
+    const el = ref.current;
     if (!el || !(opts != null && opts.mask)) return _destroyMask();
-    var mask = maskRef.current;
+    const mask = maskRef.current;
     if (!mask) {
@@ -68,8 +52,8 @@ if (el && opts != null && opts.mask) {
   }, [opts, _destroyMask, _onAccept]);
-  useEffect(function () {
+  useEffect(() => {
     if (!maskRef.current) return;
-    var mask = maskRef.current;
+    const mask = maskRef.current;
     mask.on('accept', _onAccept);
     mask.on('complete', _onComplete);
-    return function () {
+    return () => {
       mask.off('accept', _onAccept);
@@ -79,35 +63,39 @@ mask.off('complete', _onComplete);
   }, [_onAccept, _onComplete]);
-  useEffect(function () {
-    var lastAcceptValue = lastAcceptState.value,
-      state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded);
-    var mask = maskRef.current;
+  useEffect(() => {
+    const {
+      value: lastAcceptValue,
+      ...state
+    } = lastAcceptState;
+    const mask = maskRef.current;
     if (mask && initialized && lastAcceptValue !== value) mask.value = value;
     setLastAcceptState(state);
   }, [value]);
-  useEffect(function () {
-    var lastAcceptUnmaskedValue = lastAcceptState.unmaskedValue,
-      state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded2);
-    var mask = maskRef.current;
+  useEffect(() => {
+    const {
+      unmaskedValue: lastAcceptUnmaskedValue,
+      ...state
+    } = lastAcceptState;
+    const mask = maskRef.current;
     if (mask && initialized && lastAcceptUnmaskedValue !== unmaskedValue) mask.unmaskedValue = unmaskedValue;
     setLastAcceptState(state);
   }, [unmaskedValue]);
-  useEffect(function () {
-    var lastAcceptTypedValue = lastAcceptState.typedValue,
-      state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded3);
-    var mask = maskRef.current;
+  useEffect(() => {
+    const {
+      typedValue: lastAcceptTypedValue,
+      ...state
+    } = lastAcceptState;
+    const mask = maskRef.current;
     if (mask && initialized && lastAcceptTypedValue !== typedValue) mask.typedValue = typedValue;
     setLastAcceptState(state);
   }, [typedValue]);
-  useEffect(function () {
-    return _destroyMask;
-  }, [_destroyMask]);
+  useEffect(() => _destroyMask, [_destroyMask]);
   return {
-    ref: ref,
-    maskRef: maskRef,
-    value: value,
-    setValue: setValue,
-    unmaskedValue: unmaskedValue,
-    setUnmaskedValue: setUnmaskedValue,
-    typedValue: typedValue,
-    setTypedValue: setTypedValue
+    ref,
+    maskRef,
+    value,
+    setValue,
+    unmaskedValue,
+    setUnmaskedValue,
+    typedValue,
+    setTypedValue
   };
@@ -114,0 +102,0 @@ }

esm/index.js

@@ -5,6 +5,4 @@ import 'imask/esm';
 export { default as useIMask } from './hook.js';
-export { I as IMaskMixin } from './mixin-2d23f9e2.js';
-import './objectWithoutPropertiesLoose-26500259.js';
-import './index-of-4170d828.js';
+export { default as IMaskMixin } from './mixin.js';
 import 'react';
 import 'prop-types';

esm/input.js

@@ -1,25 +0,24 @@
-import { I as IMaskMixin, _ as _extends } from './mixin-2d23f9e2.js';
-import { _ as _objectWithoutPropertiesLoose } from './objectWithoutPropertiesLoose-26500259.js';
 import React from 'react';
-import './index-of-4170d828.js';
+import IMaskMixin from './mixin.js';
 import 'prop-types';
 import 'imask/esm/imask';
 
-var _excluded = ["inputRef"];
-var IMaskInputClass = IMaskMixin(function (_ref) {
-  var inputRef = _ref.inputRef,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React.createElement('input', _extends({}, props, {
+const IMaskInputClass = IMaskMixin(_ref => {
+  let {
+    inputRef,
+    ...props
+  } = _ref;
+  return React.createElement('input', {
+    ...props,
     ref: inputRef
-  }));
+  });
 });
-var IMaskInputFn = function IMaskInputFn(props, ref) {
-  return React.createElement(IMaskInputClass, _extends({}, props, {
-    ref: ref
-  }));
-} // TODO fix no idea
+const IMaskInputFn = (props, ref) => React.createElement(IMaskInputClass, {
+  ...props,
+  ref
+}) // TODO fix no idea
 ;
 
-var IMaskInput = React.forwardRef(IMaskInputFn);
+const IMaskInput = React.forwardRef(IMaskInputFn);
 
 export { IMaskInput as default };

esm/mixin.js

@@ -1,5 +0,162 @@
-export { I as default } from './mixin-2d23f9e2.js';
-import './index-of-4170d828.js';
-import 'react';
-import 'prop-types';
-import 'imask/esm/imask';
+import React from 'react';
+import PropTypes from 'prop-types';
+import IMask from 'imask/esm/imask';
+
+const MASK_PROPS = {
+  // common
+  mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.string, PropTypes.instanceOf(RegExp), PropTypes.oneOf([Date, Number, IMask.Masked]), PropTypes.instanceOf(IMask.Masked)]),
+  value: PropTypes.any,
+  unmask: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['typed'])]),
+  prepare: PropTypes.func,
+  prepareChar: PropTypes.func,
+  validate: PropTypes.func,
+  commit: PropTypes.func,
+  overwrite: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['shift'])]),
+  eager: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['append', 'remove'])]),
+  skipInvalid: PropTypes.bool,
+  // events
+  onAccept: PropTypes.func,
+  onComplete: PropTypes.func,
+  // pattern
+  placeholderChar: PropTypes.string,
+  displayChar: PropTypes.string,
+  lazy: PropTypes.bool,
+  definitions: PropTypes.object,
+  blocks: PropTypes.object,
+  // enum
+  enum: PropTypes.arrayOf(PropTypes.string),
+  // range
+  maxLength: PropTypes.number,
+  from: PropTypes.number,
+  to: PropTypes.number,
+  // date
+  pattern: PropTypes.string,
+  format: PropTypes.func,
+  parse: PropTypes.func,
+  autofix: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['pad'])]),
+  // number
+  radix: PropTypes.string,
+  thousandsSeparator: PropTypes.string,
+  mapToRadix: PropTypes.arrayOf(PropTypes.string),
+  scale: PropTypes.number,
+  normalizeZeros: PropTypes.bool,
+  padFractionalZeros: PropTypes.bool,
+  min: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
+  max: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
+  // dynamic
+  dispatch: PropTypes.func,
+  // ref
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })])
+};
+const MASK_PROPS_NAMES = Object.keys(MASK_PROPS).filter(p => p !== 'value');
+const NON_MASK_OPTIONS_PROPS_NAMES = ['value', 'unmask', 'onAccept', 'onComplete', 'inputRef'];
+const MASK_OPTIONS_PROPS_NAMES = MASK_PROPS_NAMES.filter(pName => NON_MASK_OPTIONS_PROPS_NAMES.indexOf(pName) < 0);
+function IMaskMixin(ComposedComponent) {
+  var _class;
+  const MaskedComponent = (_class = class MaskedComponent extends React.Component {
+    constructor(props) {
+      super(props);
+      this._inputRef = this._inputRef.bind(this);
+    }
+    componentDidMount() {
+      if (!this.props.mask) return;
+      this.initMask();
+    }
+    componentDidUpdate() {
+      const props = this.props;
+      const maskOptions = this._extractMaskOptionsFromProps(props);
+      if (maskOptions.mask) {
+        if (this.maskRef) {
+          this.maskRef.updateOptions(maskOptions); // TODO fix
+          if ('value' in props && props.value !== undefined) this.maskValue = props.value;
+        } else {
+          this.initMask(maskOptions);
+        }
+      } else {
+        this.destroyMask();
+        if ('value' in props && props.value !== undefined) {
+          var _this$element;
+          if ((_this$element = this.element) != null && _this$element.isContentEditable && this.element.tagName !== 'INPUT' && this.element.tagName !== 'TEXTAREA') this.element.textContent = props.value;else this.element.value = props.value;
+        }
+      }
+    }
+    componentWillUnmount() {
+      this.destroyMask();
+    }
+    _inputRef(el) {
+      this.element = el;
+      if (this.props.inputRef) {
+        if (Object.prototype.hasOwnProperty.call(this.props.inputRef, 'current')) this.props.inputRef.current = el;else this.props.inputRef(el);
+      }
+    }
+    initMask(maskOptions) {
+      if (maskOptions === void 0) {
+        maskOptions = this._extractMaskOptionsFromProps(this.props);
+      }
+      this.maskRef = IMask(this.element, maskOptions).on('accept', this._onAccept.bind(this)).on('complete', this._onComplete.bind(this));
+      if ('value' in this.props && this.props.value !== undefined) this.maskValue = this.props.value;
+    }
+    destroyMask() {
+      if (this.maskRef) {
+        this.maskRef.destroy();
+        delete this.maskRef;
+      }
+    }
+    _extractMaskOptionsFromProps(props) {
+      const {
+        ...cloneProps
+      } = props;
+
+      // keep only mask options
+      Object.keys(cloneProps).filter(prop => MASK_OPTIONS_PROPS_NAMES.indexOf(prop) < 0).forEach(nonMaskProp => {
+        delete cloneProps[nonMaskProp];
+      });
+      return cloneProps;
+    }
+    _extractNonMaskProps(props) {
+      const {
+        ...cloneProps
+      } = props;
+      MASK_PROPS_NAMES.forEach(maskProp => {
+        delete cloneProps[maskProp];
+      });
+      if (!('defaultValue' in cloneProps)) cloneProps.defaultValue = props.mask ? '' : cloneProps.value;
+      delete cloneProps.value;
+      return cloneProps;
+    }
+    get maskValue() {
+      if (!this.maskRef) return '';
+      if (this.props.unmask === 'typed') return this.maskRef.typedValue;
+      if (this.props.unmask) return this.maskRef.unmaskedValue;
+      return this.maskRef.value;
+    }
+    set maskValue(value) {
+      if (!this.maskRef) return;
+      value = value == null && this.props.unmask !== 'typed' ? '' : value;
+      if (this.props.unmask === 'typed') this.maskRef.typedValue = value;else if (this.props.unmask) this.maskRef.unmaskedValue = value;else this.maskRef.value = value;
+    }
+    _onAccept(e) {
+      if (this.props.onAccept && this.maskRef) this.props.onAccept(this.maskValue, this.maskRef, e);
+    }
+    _onComplete(e) {
+      if (this.props.onComplete && this.maskRef) this.props.onComplete(this.maskValue, this.maskRef, e);
+    }
+    render() {
+      return React.createElement(ComposedComponent, {
+        ...this._extractNonMaskProps(this.props),
+        inputRef: this._inputRef
+      });
+    }
+  }, _class.displayName = void 0, _class.propTypes = void 0, _class);
+  const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
+  MaskedComponent.displayName = "IMask(" + nestedComponentName + ")";
+  MaskedComponent.propTypes = MASK_PROPS;
+  return React.forwardRef((props, ref) => React.createElement(MaskedComponent, {
+    ...props,
+    ref
+  }));
+}
+
+export { IMaskMixin as default };

package.json

 {
   "name": "react-imask",
-  "version": "7.1.0-alpha.1",
+  "version": "7.1.0-alpha.2",
   "license": "MIT",
@@ -34,3 +34,3 @@ "author": "Alexey Kryazhev",
   "dependencies": {
-    "imask": "^7.1.0-alpha.1",
+    "imask": "^7.1.0-alpha.2",
     "prop-types": "^15.8.1"
@@ -44,3 +44,3 @@ },
   },
-  "gitHead": "259cbd3af35425e29fd23a2a49b558daf0a0b1ab",
+  "gitHead": "1a94d24b5c6428c363dc63ca2c2f824e08155c50",
   "devDependencies": {
@@ -47,0 +47,0 @@ "@types/react": "^18.2.14",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

91414

decreased by-83.48%

Number of package files

22

decreased by-12%

Lines of code

819

decreased by-86.44%

Dependency changes

• Updatedimask@^7.1.0-alpha.2