From 5a9e8f78157b906277a150955fa90a28def791b5 Mon Sep 17 00:00:00 2001
From: Alexey Kryazhev <ubivaza@gmail.com>
Date: Mon, 25 Dec 2023 12:46:28 +0300
Subject: [PATCH] Add repeat (#984)

add repeat block feature
---
 packages/imask/example.html                  |  17 +--
 packages/imask/src/core/holder.ts            |   2 +
 packages/imask/src/index.ts                  |   1 +
 packages/imask/src/masked/number.ts          |   2 +-
 packages/imask/src/masked/pattern.ts         |  69 +++++----
 packages/imask/src/masked/repeat.ts          | 141 +++++++++++++++++++
 packages/imask/test/masked/pattern/insert.ts |  24 ++++
 packages/imask/test/masked/repeat.ts         |  58 ++++++++
 packages/react-imask/src/hook.ts             |   1 -
 9 files changed, 275 insertions(+), 40 deletions(-)
 create mode 100644 packages/imask/src/masked/repeat.ts
 create mode 100644 packages/imask/test/masked/repeat.ts

diff --git a/packages/imask/example.html b/packages/imask/example.html
index ac50cf1b..fff5b6e6 100644
--- a/packages/imask/example.html
+++ b/packages/imask/example.html
@@ -12,24 +12,25 @@ <h1>IMask Core Demo</h1>
   <!-- <script src="https://unpkg.com/imask"></script> -->
   <script type="text/javascript">
     const opts = {
-      mask: Date,
-      autofix: 'pad',
+      lazy: false,
+      mask: 'r0',
+      blocks: {
+        r: {
+          mask: 'a',
+          repeat: [2, 5],
+        },
+      },
     };
 
     const input = document.getElementById('input');
     var result = document.getElementById('value');
     var unmasked = document.getElementById('unmasked');
     var imask = IMask(input, opts).on('accept', () => {
-      console.log('accept', imask.value, imask.unmaskedValue, imask.typedValue);
+      console.log('accept', imask.value, imask.mask);
       result.innerHTML = imask.value;
       unmasked.innerHTML = imask.unmaskedValue;
     });
 
-    input.addEventListener('keydown', e => console.log('keydown', e.isComposing));
-    input.addEventListener('input', e => console.log('input', e.isComposing, e.inputType));
-    input.addEventListener('compositionstart', e => console.log('compositionstart'));
-    input.addEventListener('compositionend', e => console.log('compositionend'));
-
     // document.getElementById('input').addEventListener('focus', () => {
     //   imask.updateOptions({
     //     mask: mask.map((m) => ({
diff --git a/packages/imask/src/core/holder.ts b/packages/imask/src/core/holder.ts
index 62f14014..c7e2398f 100644
--- a/packages/imask/src/core/holder.ts
+++ b/packages/imask/src/core/holder.ts
@@ -1,6 +1,7 @@
 import type { default as _InputMask, InputMaskElement as _InputMaskElement } from '../controls/input';
 import type { default as _Masked } from '../masked/base';
 import type { default as _MaskedPattern } from '../masked/pattern';
+import type { default as _RepeatBlock } from '../masked/repeat';
 import type { default as _MaskedDate } from '../masked/date';
 import type { default as _MaskedDynamic } from '../masked/dynamic';
 import type { default as _MaskedEnum } from '../masked/enum';
@@ -36,6 +37,7 @@ declare namespace IMask {
   export let createMask: typeof _createMask;
   export let Masked: typeof _Masked;
   export let MaskedPattern: typeof _MaskedPattern;
+  export let RepeatBlock: typeof _RepeatBlock;
   export let MaskedDate: typeof _MaskedDate;
   export let MaskedDynamic: typeof _MaskedDynamic;
   export let MaskedEnum: typeof _MaskedEnum;
diff --git a/packages/imask/src/index.ts b/packages/imask/src/index.ts
index f915b5bf..3b18f610 100644
--- a/packages/imask/src/index.ts
+++ b/packages/imask/src/index.ts
@@ -37,6 +37,7 @@ export { default as PatternInputDefinition, type PatternInputDefinitionOptions,
 export { createPipe, pipe, PIPE_TYPE } from './masked/pipe';
 export { default as MaskedRange, type MaskedRangeOptions } from './masked/range';
 export { default as MaskedRegExp, type MaskedRegExpOptions } from './masked/regexp';
+export { default as RepeatBlock, type RepeatBlockOptions } from './masked/repeat';
 
 try { (globalThis as any).IMask = IMask; } catch {}
 export default IMask;
diff --git a/packages/imask/src/masked/number.ts b/packages/imask/src/masked/number.ts
index be210cd3..d9781e5f 100644
--- a/packages/imask/src/masked/number.ts
+++ b/packages/imask/src/masked/number.ts
@@ -307,7 +307,7 @@ class MaskedNumber extends Masked<number> {
     return parts.join(this.radix);
   }
 
-  doSkipInvalid (ch: string, flags: AppendFlags={}, checkTail?: TailDetails): boolean {
+  override doSkipInvalid (ch: string, flags: AppendFlags={}, checkTail?: TailDetails): boolean {
     const dropFractional = this.scale === 0 && ch !== this.thousandsSeparator && (
       ch === this.radix ||
       ch === MaskedNumber.UNMASKED_RADIX ||
diff --git a/packages/imask/src/masked/pattern.ts b/packages/imask/src/masked/pattern.ts
index dd050e01..61b3944a 100644
--- a/packages/imask/src/masked/pattern.ts
+++ b/packages/imask/src/masked/pattern.ts
@@ -42,6 +42,12 @@ type BlockPosData = {
   offset: number,
 };
 
+export
+type BlockExtraOptions = {
+  expose?: boolean,
+  repeat?: number | [number, number],
+};
+
 
 /** Pattern mask */
 export default
@@ -57,7 +63,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
 
   declare mask: string;
   /** */
-  declare blocks: { [key: string]: ExtendFactoryArgOptions<{ expose?: boolean }> };
+  declare blocks: { [key: string]: ExtendFactoryArgOptions<BlockExtraOptions> };
   /** */
   declare definitions: Definitions;
   /** Single char for empty input */
@@ -117,16 +123,18 @@ class MaskedPattern<Value=string> extends Masked<Value> {
         // use block name with max length
         const bName = bNames[0];
         if (bName) {
-          const { expose, ...blockOpts } = normalizeOpts(this.blocks[bName]) as NormalizedOpts<FactoryArg> & { expose?: boolean };
-          const maskedBlock = createMask({
+          const { expose, repeat, ...bOpts } = normalizeOpts(this.blocks[bName]) as NormalizedOpts<FactoryArg> & BlockExtraOptions; // TODO type Opts<Arg & Extra>
+          const blockOpts = {
             lazy: this.lazy,
             eager: this.eager,
             placeholderChar: this.placeholderChar,
             displayChar: this.displayChar,
             overwrite: this.overwrite,
-            ...blockOpts,
+            ...bOpts,
+            repeat,
             parent: this,
-          });
+          };
+          const maskedBlock = repeat != null ? new IMask.RepeatBlock(blockOpts as any /* TODO */) : createMask(blockOpts);
 
           if (maskedBlock) {
             this._blocks.push(maskedBlock);
@@ -187,30 +195,32 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     }
   }
 
-  get state (): MaskedPatternState {
+  override get state (): MaskedPatternState {
     return {
       ...super.state,
       _blocks: this._blocks.map(b => b.state),
     };
   }
 
-  set state (state: MaskedPatternState) {
-    const {_blocks, ...maskedState} = state;
+  override set state (state: MaskedPatternState) {
+    if (!state) { this.reset(); return; }
+
+    const { _blocks, ...maskedState } = state;
     this._blocks.forEach((b, bi) => b.state = _blocks[bi]);
     super.state = maskedState;
   }
 
-  reset () {
+  override reset () {
     super.reset();
     this._blocks.forEach(b => b.reset());
   }
 
-  get isComplete (): boolean {
+  override get isComplete (): boolean {
     return this.exposeBlock ? this.exposeBlock.isComplete :
       this._blocks.every(b => b.isComplete);
   }
 
-  get isFilled (): boolean {
+  override get isFilled (): boolean {
     return this._blocks.every(b => b.isFilled);
   }
 
@@ -222,17 +232,17 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     return this._blocks.every(b => b.isOptional);
   }
 
-  doCommit () {
+  override doCommit () {
     this._blocks.forEach(b => b.doCommit());
     super.doCommit();
   }
 
-  get unmaskedValue (): string {
+  override get unmaskedValue (): string {
     return this.exposeBlock ? this.exposeBlock.unmaskedValue :
       this._blocks.reduce((str, b) => str += b.unmaskedValue, '');
   }
 
-  set unmaskedValue (unmaskedValue: string) {
+  override set unmaskedValue (unmaskedValue: string) {
     if (this.exposeBlock) {
       const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length);
       this.exposeBlock.unmaskedValue = unmaskedValue;
@@ -242,13 +252,13 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     else super.unmaskedValue = unmaskedValue;
   }
 
-  get value (): string {
+  override get value (): string {
     return this.exposeBlock ? this.exposeBlock.value :
       // TODO return _value when not in change?
       this._blocks.reduce((str, b) => str += b.value, '');
   }
 
-  set value (value: string) {
+  override set value (value: string) {
     if (this.exposeBlock) {
       const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length);
       this.exposeBlock.value = value;
@@ -258,12 +268,12 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     else super.value = value;
   }
 
-  get typedValue (): Value {
+  override get typedValue (): Value {
     return this.exposeBlock ? this.exposeBlock.typedValue :
       super.typedValue;
   }
 
-  set typedValue (value: Value) {
+  override set typedValue (value: Value) {
     if (this.exposeBlock) {
       const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length);
       this.exposeBlock.typedValue = value;
@@ -273,15 +283,15 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     else super.typedValue = value;
   }
 
-  get displayValue (): string {
+  override get displayValue (): string {
     return this._blocks.reduce((str, b) => str += b.displayValue, '');
   }
 
-  appendTail (tail: string | String | TailDetails): ChangeDetails {
+  override appendTail (tail: string | String | TailDetails): ChangeDetails {
     return super.appendTail(tail).aggregate(this._appendPlaceholder());
   }
 
-  _appendEager (): ChangeDetails {
+  override _appendEager (): ChangeDetails {
     const details = new ChangeDetails();
 
     let startBlockIndex = this._mapPosToBlock(this.displayValue.length)?.index;
@@ -300,7 +310,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     return details;
   }
 
-  _appendCharRaw (ch: string, flags: AppendFlags<MaskedPatternState>={}): ChangeDetails {
+  override _appendCharRaw (ch: string, flags: AppendFlags<MaskedPatternState>={}): ChangeDetails {
     const blockIter = this._mapPosToBlock(this.displayValue.length);
     const details = new ChangeDetails();
     if (!blockIter) return details;
@@ -308,16 +318,15 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     for (let bi=blockIter.index, block; (block = this._blocks[bi]); ++bi) {
       const blockDetails = block._appendChar(ch, { ...flags, _beforeTailState: flags._beforeTailState?._blocks?.[bi] });
 
-      const skip = blockDetails.skip;
       details.aggregate(blockDetails);
 
-      if (skip || blockDetails.rawInserted) break; // go next char
+      if (blockDetails.skip || blockDetails.rawInserted) break; // go next char
     }
 
     return details;
   }
 
-  extractTail (fromPos: number=0, toPos: number=this.displayValue.length): ChunksTailDetails {
+  override extractTail (fromPos: number=0, toPos: number=this.displayValue.length): ChunksTailDetails {
     const chunkTail = new ChunksTailDetails();
     if (fromPos === toPos) return chunkTail;
 
@@ -333,7 +342,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     return chunkTail;
   }
 
-  extractInput (fromPos: number=0, toPos: number=this.displayValue.length, flags: ExtractFlags={}): string {
+  override extractInput (fromPos: number=0, toPos: number=this.displayValue.length, flags: ExtractFlags={}): string {
     if (fromPos === toPos) return '';
 
     let input = '';
@@ -356,7 +365,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
   }
 
   /** Appends placeholder depending on laziness */
-  _appendPlaceholder (toBlockIndex?: number): ChangeDetails {
+  override _appendPlaceholder (toBlockIndex?: number): ChangeDetails {
     const details = new ChangeDetails();
     if (this.lazy && toBlockIndex == null) return details;
 
@@ -427,7 +436,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     }
   }
 
-  remove (fromPos: number=0, toPos: number=this.displayValue.length): ChangeDetails {
+  override remove (fromPos: number=0, toPos: number=this.displayValue.length): ChangeDetails {
     const removeDetails = super.remove(fromPos, toPos);
     this._forEachBlocksInRange(fromPos, toPos, (b, _, bFromPos, bToPos) => {
       removeDetails.aggregate(b.remove(bFromPos, bToPos));
@@ -435,7 +444,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     return removeDetails;
   }
 
-  nearestInputPos (cursorPos: number, direction: Direction=DIRECTION.NONE): number {
+  override nearestInputPos (cursorPos: number, direction: Direction=DIRECTION.NONE): number {
     if (!this._blocks.length) return 0;
     const cursor = new PatternCursor(this, cursorPos);
 
@@ -505,7 +514,7 @@ class MaskedPattern<Value=string> extends Masked<Value> {
     return cursorPos;
   }
 
-  totalInputPositions (fromPos: number=0, toPos: number=this.displayValue.length): number {
+  override totalInputPositions (fromPos: number=0, toPos: number=this.displayValue.length): number {
     let total = 0;
     this._forEachBlocksInRange(fromPos, toPos, (b, _, bFromPos, bToPos) => {
       total += b.totalInputPositions(bFromPos, bToPos);
diff --git a/packages/imask/src/masked/repeat.ts b/packages/imask/src/masked/repeat.ts
new file mode 100644
index 00000000..01bfc371
--- /dev/null
+++ b/packages/imask/src/masked/repeat.ts
@@ -0,0 +1,141 @@
+import ChangeDetails from '../core/change-details';
+import IMask from '../core/holder';
+import { type AppendFlags } from './base';
+import createMask, { type FactoryArg, normalizeOpts, type ExtendFactoryArgOptions, type UpdateOpts } from './factory';
+import MaskedPattern, { type BlockExtraOptions, type MaskedPatternOptions, type MaskedPatternState } from './pattern';
+import type PatternBlock from './pattern/block';
+
+
+export
+type RepeatBlockExtraOptions = Pick<BlockExtraOptions, 'repeat'>;
+
+export
+type RepeatBlockOptions = ExtendFactoryArgOptions<RepeatBlockExtraOptions>;
+
+
+/** Pattern mask */
+export default
+class RepeatBlock<M extends FactoryArg> extends MaskedPattern {
+  declare _blockOpts: M & { repeat?: number };
+  declare repeat: Required<RepeatBlockExtraOptions>['repeat'];
+
+
+  get repeatFrom (): number {
+    return (
+      Array.isArray(this.repeat) ? this.repeat[0] :
+      this.repeat === Infinity ? 0 : this.repeat
+    ) ?? 0;
+  }
+
+  get repeatTo (): number {
+    return (Array.isArray(this.repeat) ? this.repeat[1] : this.repeat) ?? Infinity;
+  }
+
+  constructor (opts: RepeatBlockOptions) {
+    super(opts as MaskedPatternOptions);
+  }
+
+  override updateOptions (opts: UpdateOpts<RepeatBlockOptions>) {
+    super.updateOptions(opts as MaskedPatternOptions);
+  }
+
+  override _update (opts: UpdateOpts<M> & RepeatBlockExtraOptions) {
+    const { repeat, ...blockOpts } = normalizeOpts(opts) as any; // TODO type
+    this._blockOpts = Object.assign({}, this._blockOpts, blockOpts);
+    const block = createMask(this._blockOpts);
+    this.repeat = repeat ?? (block as any).repeat ?? this.repeat ?? Infinity; // TODO type
+
+    super._update({
+      mask: 'm'.repeat(Math.max(this.repeatTo === Infinity && this._blocks?.length || 0, this.repeatFrom)),
+      blocks: { m: block },
+      eager: block.eager,
+      overwrite: block.overwrite,
+      skipInvalid: block.skipInvalid,
+      lazy: (block as MaskedPattern).lazy,
+      placeholderChar: (block as MaskedPattern).placeholderChar,
+      displayChar: (block as MaskedPattern).displayChar,
+    });
+  }
+
+  _allocateBlock (bi: number): PatternBlock | undefined {
+    if (bi < this._blocks.length) return this._blocks[bi];
+    if (this.repeatTo === Infinity || this._blocks.length < this.repeatTo) {
+      this._blocks.push(createMask(this._blockOpts));
+      this.mask += 'm';
+      return this._blocks[this._blocks.length - 1];
+    }
+  }
+
+  override _appendCharRaw (ch: string, flags: AppendFlags<MaskedPatternState>={}): ChangeDetails {
+    const details = new ChangeDetails();
+
+    for (
+      let bi=this._mapPosToBlock(this.displayValue.length)?.index ?? Math.max(this._blocks.length - 1, 0), block, allocated;
+      // try to get a block or
+      // try to allocate a new block if not allocated already
+      (block = this._blocks[bi] ?? (allocated = !allocated && this._allocateBlock(bi)));
+      ++bi
+    ) {
+      const blockDetails = block._appendChar(ch, { ...flags, _beforeTailState: flags._beforeTailState?._blocks?.[bi] });
+
+      if (blockDetails.skip && allocated) {
+        // remove the last allocated block and break
+        this._blocks.pop();
+        this.mask = this.mask.slice(1);
+        break;
+      }
+
+      details.aggregate(blockDetails);
+
+      if (blockDetails.skip || blockDetails.rawInserted) break; // go next char
+    }
+
+    return details;
+  }
+
+  _trimEmptyTail (fromPos: number=0, toPos?: number): void {
+    const firstBlockIndex = Math.max(this._mapPosToBlock(fromPos)?.index || 0, this.repeatFrom, 0);
+    let lastBlockIndex;
+    if (toPos != null) lastBlockIndex = this._mapPosToBlock(toPos)?.index;
+    if (lastBlockIndex == null) lastBlockIndex = this._blocks.length - 1;
+
+    let removeCount = 0;
+    for (let blockIndex = lastBlockIndex; firstBlockIndex <= blockIndex; --blockIndex, ++removeCount) {
+      if (this._blocks[blockIndex].unmaskedValue) break;
+    }
+
+    if (removeCount) {
+      this._blocks.splice(lastBlockIndex - removeCount + 1, removeCount);
+      this.mask = this.mask.slice(removeCount);
+    }
+  }
+
+  override reset () {
+    super.reset();
+    this._trimEmptyTail();
+  }
+
+  override remove (fromPos: number=0, toPos: number=this.displayValue.length): ChangeDetails {
+    const removeDetails = super.remove(fromPos, toPos);
+    this._trimEmptyTail(fromPos, toPos);
+    return removeDetails;
+  }
+
+  override totalInputPositions (fromPos: number=0, toPos?: number): number {
+    if (toPos == null && this.repeatTo === Infinity) return Infinity;
+    return super.totalInputPositions(fromPos, toPos);
+  }
+
+  override get state (): MaskedPatternState {
+    return super.state;
+  }
+
+  override set state (state: MaskedPatternState) {
+    this._blocks.length = state._blocks.length;
+    this.mask = this.mask.slice(0, this._blocks.length);
+    super.state = state;
+  }
+}
+
+
+IMask.RepeatBlock = RepeatBlock;
diff --git a/packages/imask/test/masked/pattern/insert.ts b/packages/imask/test/masked/pattern/insert.ts
index 222823e2..a4a1eb01 100644
--- a/packages/imask/test/masked/pattern/insert.ts
+++ b/packages/imask/test/masked/pattern/insert.ts
@@ -3,6 +3,7 @@ import { describe, it, beforeEach, mock } from 'node:test';
 
 import { DIRECTION } from '../../../src/core/utils';
 import '../../../src/masked/number';
+import '../../../src/masked/repeat';
 import type MaskedNumber from '../../../src/masked/number';
 import MaskedRange from '../../../src/masked/range';
 import MaskedPattern from '../../../src/masked/pattern';
@@ -288,4 +289,27 @@ describe('Insert', function () {
       assert.equal(masked.value, '');
     });
   });
+
+  describe('repeat', function () {
+    it('should insert if possible and skip otherwise', function () {
+      masked.updateOptions({
+        mask: 'r0',
+        blocks: {
+          r: {
+            mask: 'a',
+            repeat: Infinity,
+          },
+        },
+      });
+
+      masked.value = 'aaaa';
+      assert.equal(masked.value, 'aaaa_');
+
+      masked.value = '0';
+      assert.equal(masked.value, '0');
+
+      masked.value = 'aa0';
+      assert.equal(masked.value, 'aa0');
+    });
+  });
 });
diff --git a/packages/imask/test/masked/repeat.ts b/packages/imask/test/masked/repeat.ts
new file mode 100644
index 00000000..c8cbf6e8
--- /dev/null
+++ b/packages/imask/test/masked/repeat.ts
@@ -0,0 +1,58 @@
+import assert from 'assert';
+import { beforeEach, describe, it } from 'node:test';
+
+import RepeatMask from '../../src/masked/repeat';
+
+
+describe('RepeatMask', function () {
+  const masked = new RepeatMask({
+    mask: '0',
+    lazy: false,
+  });
+
+  beforeEach(function () {
+    masked.updateOptions({
+      mask: '0',
+      lazy: false,
+      repeat: Infinity,
+    });
+    masked.unmaskedValue = '';
+  });
+
+  it('should extend pattern', function () {
+    for (let i=1; i<=3; ++i) {
+      masked.value = '1'.repeat(i);
+      assert.equal(masked.value, '1'.repeat(i));
+    }
+  });
+
+  it('should trim tail', function () {
+    masked.value = '123';
+    assert.equal(masked.value, '123');
+
+    masked.remove(2);
+    assert.equal(masked.value, '12');
+  });
+
+  it('should update repeat', function () {
+    masked.updateOptions({ repeat: 3 });
+    assert.equal(masked.value, '_'.repeat(3));
+
+    masked.updateOptions({ repeat: 1 });
+    assert.equal(masked.value, '_');
+
+    masked.updateOptions({ repeat: Infinity });
+    assert.equal(masked.value, '');
+  });
+
+  it('should consider minimum block count', function () {
+    masked.updateOptions({ repeat: [ 3, 5 ] });
+    assert.equal(masked.value, '_'.repeat(3));
+
+    masked.value = '1234';
+    assert.equal(masked.value, '1234');
+
+    masked.value = '';
+    assert.equal(masked.value, '_'.repeat(3));
+  });
+});
diff --git a/packages/react-imask/src/hook.ts b/packages/react-imask/src/hook.ts
index beed8014..e26a793a 100644
--- a/packages/react-imask/src/hook.ts
+++ b/packages/react-imask/src/hook.ts
@@ -1,7 +1,6 @@
 import IMask, { type InputMask, type InputMaskElement, type FactoryOpts } from 'imask';
 import { useEffect, useCallback, useState, useRef, Dispatch } from 'react';
 import type { MutableRefObject } from 'react';
-import type { ReactMaskProps } from './mixin';
 
 
 export default