I have a small package, for my app, that wraps react-imask, setting up default onAccept and onComplete handlers and applying it all to a styled input using the IMaskMixin. A controlled input, where value and onChange are passed in (onAccept and onComplete use the onChange internally). Both imask and react-imask are dependencies, and not bundled into that package's final code.
I use that wrapped component in another package of my application. My package, imask and react-imask are all dependencies. Within this package, I use my wrapped component for various masked inputs.
In one such component (a date time picker), I pass in a custom blocks prop that I define in a separate file.
import IMask from 'imask';
// also tried import {MaskedRange, MaskedEnum} from 'imask'
// and tried import MaskedRange from 'imask/masked/range'
// with import MaskedEnum from 'imask/masked/enum'
export const blocks = {
MM: {
mask: IMask.MaskedRange,
from: 1,
to: 12,
},
DD: {
mask: IMask.MaskedRange,
from: 1,
to: 31,
},
YY: {
mask: IMask.MaskedRange,
from: 0,
to: 99,
},
yyyy: {
mask: IMask.MaskedRange,
from: 1850,
to: 9999,
},
h: {
mask: IMask.MaskedRange,
from: 1,
to: 12,
},
hh: {
mask: IMask.MaskedRange,
from: 1,
to: 12,
},
KK: {
mask: IMask.MaskedRange,
from: 0,
to: 23,
},
mm: {
mask: IMask.MaskedRange,
from: 0,
to: 59,
},
A: {
mask: IMask.MaskedEnum,
enum: ['AM', 'PM'],
},
a: {
mask: IMask.MaskedEnum,
enum: ['am', 'pm'],
},
};
Currently I am working all of this with a story in Storybook to troubleshoot. When all of this was with v6.0.7 it was working fine. But I just tried updating to v.7.5.0 and now I lose my masking and get the following in the console when attempting to type in the field.
Class constructor MaskedRange cannot be invoked without 'new'
I have tried reworking all of this in several different ways, but have been unsuccessful. Any assistance is greatly appreciated.
I have a small package, for my app, that wraps
react-imask, setting up defaultonAcceptandonCompletehandlers and applying it all to a styled input using theIMaskMixin. A controlled input, wherevalueandonChangeare passed in (onAcceptandonCompleteuse theonChangeinternally). Bothimaskandreact-imaskare dependencies, and not bundled into that package's final code.I use that wrapped component in another package of my application. My package,
imaskandreact-imaskare all dependencies. Within this package, I use my wrapped component for various masked inputs.In one such component (a date time picker), I pass in a custom
blocksprop that I define in a separate file.Currently I am working all of this with a story in Storybook to troubleshoot. When all of this was with v6.0.7 it was working fine. But I just tried updating to v.7.5.0 and now I lose my masking and get the following in the console when attempting to type in the field.
I have tried reworking all of this in several different ways, but have been unsuccessful. Any assistance is greatly appreciated.