Skip to content

Commit

Permalink
core: fire change events if raw input was changed
Browse files Browse the repository at this point in the history
  • Loading branch information
uNmAnNeR committed Dec 21, 2023
1 parent 3a390bb commit 9bae1d6
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 3 deletions.
51 changes: 50 additions & 1 deletion packages/imask/example.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,57 @@ <h1>IMask Core Demo</h1>
<script src="dist/imask.js"></script>
<!-- <script src="https://unpkg.com/imask"></script> -->
<script type="text/javascript">
const numberOpts = {
mask: Number,
thousandsSeparator: ' ',
scale: 2,
radix: '.',
expose: true,
};

class NegativeNumberMask extends IMask.MaskedNumber {
get typedValue () {
return -Math.abs(super.typedValue);
}
set typedValue (value) {
super.typedValue = Math.abs(value);
}
}

function dispatchMaskIndex (value) {
if (!value) return 0;
else if (value.indexOf('-') === 0 || value.indexOf('-') === 1) return 2;
else return 1;
}

const opts = {
mask: //g,
mask: [
{
mask: '',
},
{
mask: '$num',
blocks: {
num: numberOpts,
}
},
{
mask: '{-}$num',
blocks: {
num: {
...numberOpts,
mask: NegativeNumberMask,
min: 0,
}
}
}
],
dispatch: (appended, dynamicMasked, flags, tail) => {
const value = dynamicMasked.rawInputValue + appended + String(tail);
const masked = dynamicMasked.compiledMasks[dispatchMaskIndex(value)];
dynamicMasked.exposeMask = masked;
return masked;
}
};

const input = document.getElementById('input');
Expand Down
25 changes: 23 additions & 2 deletions packages/imask/src/controls/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
declare _value: string;
declare _changingCursorPos: number;
declare _unmaskedValue: string;
declare _rawInputValue: string;
declare _selection: Selection;
declare _cursorChanging?: ReturnType<typeof setTimeout>;
declare _inputEvent?: InputEvent;
Expand All @@ -44,6 +45,7 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
this._listeners = {};
this._value = '';
this._unmaskedValue = '';
this._rawInputValue = '';

this._saveSelection = this._saveSelection.bind(this);
this._onInput = this._onInput.bind(this);
Expand Down Expand Up @@ -109,6 +111,19 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
this.alignCursor();
}

/** Raw input value */
get rawInputValue (): string {
return this._rawInputValue;
}

set rawInputValue (str: string) {
if (this.rawInputValue === str) return;

this.masked.rawInputValue = str;
this.updateControl();
this.alignCursor();
}

/** Typed unmasked value */
get typedValue (): FactoryReturnMasked<Opts>['typedValue'] {
return this.masked.typedValue;
Expand Down Expand Up @@ -195,12 +210,18 @@ class InputMask<Opts extends FactoryArg=Record<string, unknown>> {
updateControl () {
const newUnmaskedValue = this.masked.unmaskedValue;
const newValue = this.masked.value;
const newRawInputValue = this.masked.rawInputValue;
const newDisplayValue = this.displayValue;
const isChanged = (this.unmaskedValue !== newUnmaskedValue ||
this.value !== newValue);

const isChanged =
this.unmaskedValue !== newUnmaskedValue ||
this.value !== newValue ||
this._rawInputValue !== newRawInputValue
;

this._unmaskedValue = newUnmaskedValue;
this._value = newValue;
this._rawInputValue = newRawInputValue;

if (this.el.value !== newDisplayValue) this.el.value = newDisplayValue;
if (isChanged) this._fireChangeEvents();
Expand Down

0 comments on commit 9bae1d6

Please sign in to comment.