Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix #608 #609

Merged
merged 2 commits into from
Feb 6, 2022
Merged

fix #608 #609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8ed09b
fix #608
uNmAnNeR Feb 4, 2022
5109a07
fix #610
uNmAnNeR Feb 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/react-imask/src/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import IMask from 'imask';
import { useEffect, useCallback, useState, useRef, Dispatch } from 'react';
import type { MutableRefObject } from 'react';
import type { ReactMaskProps, MaskedElement, Falsy } from './mixin';
import type { ReactMaskProps, Falsy, ReactElement } from './mixin';


export default
Expand All @@ -10,12 +10,13 @@ function useIMask<
Unmask extends ('typed' | boolean) = false,
Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] :
Unmask extends Falsy ? IMask.InputMask<Opts>['value'] :
IMask.InputMask<Opts>['unmaskedValue']
IMask.InputMask<Opts>['unmaskedValue'],
MaskElement extends ReactElement=ReactElement
>(
opts: Opts,
{ onAccept, onComplete }: Pick<ReactMaskProps<Opts, Unmask, Value>, 'onAccept' | 'onComplete'> = {}
{ onAccept, onComplete }: Pick<ReactMaskProps<Opts, Unmask, Value, MaskElement>, 'onAccept' | 'onComplete'> = {}
): {
ref: MutableRefObject<MaskedElement>,
ref: MutableRefObject<MaskElement>,
maskRef: MutableRefObject<IMask.InputMask<Opts>>,
value: IMask.InputMask<Opts>['value'],
setValue: Dispatch<IMask.InputMask<Opts>['value']>,
Expand Down
37 changes: 23 additions & 14 deletions packages/react-imask/src/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,39 @@
import React from 'react';
import IMask from 'imask';
import IMaskMixin, { IMaskInputProps, Falsy } from './mixin';
import IMaskMixin, { IMaskInputProps, Falsy, ReactElement } from './mixin';


const InputComponent = <
Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions,
Unmask extends ('typed' | boolean) = false,
Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] :
Unmask extends Falsy ? IMask.InputMask<Opts>['value'] :
IMask.InputMask<Opts>['unmaskedValue']
>({ inputRef, ...props }: IMaskInputProps<Opts, Unmask, Value>) =>
const IMaskInputClass = IMaskMixin(({ inputRef, ...props }) =>
React.createElement('input', {
...props,
ref: inputRef,
});
})
);

const IMaskInputClass = IMaskMixin(InputComponent);
const IMaskInputFn = <
Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions,
Unmask extends ('typed' | boolean) = false,
Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] :
Unmask extends Falsy ? IMask.InputMask<Opts>['value'] :
IMask.InputMask<Opts>['unmaskedValue'],
MaskElement extends ReactElement=ReactElement
>(
props: IMaskInputProps<Opts, Unmask, Value, MaskElement>,
ref: React.Ref<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>>
) =>
React.createElement(IMaskInputClass as React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>, { ...props, ref })
;

const IMaskInput = <
const IMaskInput = React.forwardRef(IMaskInputFn as <
Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions,
Unmask extends ('typed' | boolean) = false,
Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] :
Unmask extends Falsy ? IMask.InputMask<Opts>['value'] :
IMask.InputMask<Opts>['unmaskedValue']
>(props: IMaskInputProps<Opts, Unmask, Value>): React.ReactElement<IMaskInputProps<Opts, Unmask, Value>> =>
React.createElement(IMaskInputClass as any, props);
IMask.InputMask<Opts>['unmaskedValue'],
MaskElement extends ReactElement=ReactElement
>(
props: IMaskInputProps<Opts, Unmask, Value, MaskElement> & { ref?: React.Ref<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>> }
) => React.ReactElement<IMaskInputProps<Opts, Unmask, Value, MaskElement>>);


export default IMaskInput;
54 changes: 32 additions & 22 deletions packages/react-imask/src/mixin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,33 @@ import IMask from 'imask';
export
type Falsy = false | 0 | "" | null | undefined;

// TODO should be imported from core
export
type MaskedElement = HTMLInputElement | HTMLTextAreaElement;
type ReactElement = IMask.MaskElement | HTMLTextAreaElement | HTMLInputElement;

export
type ReactMaskedElement = React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>;
type ReactElementProps<MaskElement extends ReactElement=ReactElement> = React.HTMLProps<MaskElement>;

export
type ReactMaskProps<
Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions,
Unmask extends ('typed' | boolean) = false,
Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] :
Unmask extends Falsy ? IMask.InputMask<Opts>['value'] :
IMask.InputMask<Opts>['unmaskedValue']
IMask.InputMask<Opts>['unmaskedValue'],
MaskElement extends ReactElement=ReactElement
> = {
onAccept?: (value: Value, maskRef: IMask.InputMask<Opts>, e?: InputEvent) => void;
onComplete?: (value: Value, maskRef: IMask.InputMask<Opts>, e?: InputEvent) => void;
unmask?: Unmask;
value?: Value;
inputRef?: (el: MaskedElement) => void;
inputRef?: React.RefCallback<MaskElement>;
ref?: React.Ref<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>>;
}

export
type ReactMixinComponent<MaskElement extends ReactElement=ReactElement> = React.ComponentType<ReactElementProps<MaskElement> & { inputRef: React.RefCallback<MaskElement>; }>;

const MASK_PROPS: { [key in keyof (IMask.AllMaskedOptions & ReactMaskProps)]: unknown } = {
// common
mask: PropTypes.oneOfType([
Expand Down Expand Up @@ -91,7 +97,7 @@ const MASK_PROPS: { [key in keyof (IMask.AllMaskedOptions & ReactMaskProps)]: un
dispatch: PropTypes.func,

// ref
inputRef: PropTypes.func
inputRef: PropTypes.func,
};

const MASK_PROPS_NAMES = Object.keys(MASK_PROPS);
Expand All @@ -105,31 +111,35 @@ export type IMaskMixinProps<
Unmask extends ('typed' | boolean) = false,
Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] :
Unmask extends Falsy ? IMask.InputMask<Opts>['value'] :
IMask.InputMask<Opts>['unmaskedValue']
> = Opts & ReactMaskProps<Opts, Unmask, Value>;
IMask.InputMask<Opts>['unmaskedValue'],
MaskElement extends ReactElement=ReactElement
> = Opts & ReactMaskProps<Opts, Unmask, Value, MaskElement>;

export type IMaskInputProps<
Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions,
Unmask extends ('typed' | boolean) = false,
Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] :
Unmask extends Falsy ? IMask.InputMask<Opts>['value'] :
IMask.InputMask<Opts>['unmaskedValue']
> = ReactMaskedElement & IMaskMixinProps<Opts, Unmask, Value>;
IMask.InputMask<Opts>['unmaskedValue'],
MaskElement extends ReactElement=ReactElement
> = ReactElementProps<MaskElement> & IMaskMixinProps<Opts, Unmask, Value, MaskElement>;

export default function IMaskMixin<
Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions,
Unmask extends ('typed' | boolean) = false,
Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] :
Unmask extends Falsy ? IMask.InputMask<Opts>['value'] :
IMask.InputMask<Opts>['unmaskedValue']
>(ComposedComponent: React.ComponentType<ReactMaskedElement>) {
const MaskedComponent = class extends React.Component<IMaskInputProps<Opts, Unmask, Value>> {
IMask.InputMask<Opts>['unmaskedValue'],
MaskElement extends ReactElement=ReactElement
>(ComposedComponent: ReactMixinComponent<MaskElement>) {
const MaskedComponent = class extends React.Component<IMaskInputProps<Opts, Unmask, Value, MaskElement>> {
static displayName: string;
static propTypes: typeof MASK_PROPS;
element: MaskedElement;

element: MaskElement;
maskRef: IMask.InputMask<Opts>;
constructor (props: IMaskInputProps<Opts, Unmask, Value>) {

constructor (props: IMaskInputProps<Opts, Unmask, Value, MaskElement>) {
super(props);
this._inputRef = this._inputRef.bind(this);
}
Expand Down Expand Up @@ -168,7 +178,7 @@ export default function IMaskMixin<
this.destroyMask();
}

_inputRef (el: MaskedElement){
_inputRef (el: MaskElement){
this.element = el;
if (this.props.inputRef) this.props.inputRef(el);
}
Expand All @@ -188,11 +198,11 @@ export default function IMaskMixin<
}
}

_extractMaskOptionsFromProps (props: IMaskInputProps<Opts, Unmask, Value>): Opts {
_extractMaskOptionsFromProps (props: IMaskInputProps<Opts, Unmask, Value, MaskElement>): Opts {
const { ...cloneProps } = props;

// keep only mask options props
(Object.keys(cloneProps) as Array<keyof IMaskInputProps<Opts, Unmask, Value>>)
(Object.keys(cloneProps) as Array<keyof IMaskInputProps<Opts, Unmask, Value, MaskElement>>)
// TODO why need cast to string?
.filter(prop => MASK_OPTIONS_PROPS_NAMES.indexOf(prop as string) < 0)
.forEach(nonMaskProp => {
Expand All @@ -202,10 +212,10 @@ export default function IMaskMixin<
return cloneProps as unknown as Opts;
}

_extractNonMaskProps (props: IMaskInputProps<Opts, Unmask, Value>) {
_extractNonMaskProps (props: IMaskInputProps<Opts, Unmask, Value, MaskElement>): ReactElementProps<MaskElement> {
const { ...cloneProps } = props;

(MASK_PROPS_NAMES as Array<keyof IMaskInputProps<Opts, Unmask, Value>>).forEach(maskProp => {
(MASK_PROPS_NAMES as Array<keyof IMaskInputProps<Opts, Unmask, Value, MaskElement>>).forEach(maskProp => {
delete cloneProps[maskProp];
});

Expand Down Expand Up @@ -245,5 +255,5 @@ export default function IMaskMixin<
MaskedComponent.displayName = `IMask(${nestedComponentName})`;
MaskedComponent.propTypes = MASK_PROPS;

return MaskedComponent as React.ComponentType<IMaskInputProps<Opts, Unmask, Value>>;
return MaskedComponent as React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>;
}