@tcn/ui 0.0.1

package/src/inputs/mask_input/mask.ts

@@ -0,0 +1,309 @@
+import { AlphaCharacter } from './alpha_character.js';
+import { AlphaNumericCharacter } from './alpha_numeric_character.js';
+import { Character } from './character.js';
+import { ConstantCharacter } from './constant_character.js';
+import { LanguageCharacter } from './language_character.js';
+import { MaskConfig } from './mask_config.js';
+import { MaskCursor } from './mask_cursor.js';
+import { NumericCharacter } from './numeric_character.js';
+
+const characterMap = {
+  a: AlphaCharacter,
+  '9': NumericCharacter,
+  '*': AlphaNumericCharacter,
+  u: LanguageCharacter,
+};
+
+const dynamicCharacters = Object.keys(characterMap);
+
+export class Mask implements MaskCursor {
+  private _cursorPosition: number;
+  private _characters: Character[];
+
+  get currentCharacter() {
+    return this._characters[this._cursorPosition];
+  }
+
+  constructor(config: MaskConfig) {
+    this._cursorPosition = 0;
+    this._characters = this._makeCharacters(config);
+  }
+
+  moveRight(): void {
+    this._cursorPosition = Math.min(this._characters.length, this._cursorPosition + 1);
+    this.currentCharacter && this.currentCharacter.enterFromLeft(this);
+  }
+
+  moveLeft(): void {
+    if (this._cursorPosition === 0) {
+      return;
+    }
+
+    this._cursorPosition = Math.max(0, this._cursorPosition - 1);
+    this.currentCharacter && this.currentCharacter.enterFromRight(this);
+  }
+
+  forceMoveTo(position: number): void {
+    const finalPosition = Math.min(this.getCharacterLength(), position);
+
+    this._cursorPosition = finalPosition;
+  }
+
+  moveTo(position: number): void {
+    const prevCharacter = this._characters[position - 1];
+    const isCursorBeyond = position >= this._characters.length;
+    this._cursorPosition = position;
+
+    if (isCursorBeyond && prevCharacter && !prevCharacter.isFilled()) {
+      this.moveLeft();
+    }
+
+    this.currentCharacter && this.currentCharacter.enter(this);
+  }
+
+  getCursorPosition(): number {
+    return this._cursorPosition;
+  }
+
+  insert(character: string): boolean {
+    const parts = [...character];
+
+    if (parts.length > 1) {
+      throw new Error('You can only insert a single character.');
+    }
+
+    if (this.currentCharacter) {
+      return this.currentCharacter.insert(character, this);
+    }
+
+    return false;
+  }
+
+  insertPush(character: string) {
+    const parts = [...character];
+
+    if (parts.length > 1) {
+      throw new Error('You can only insert a single character.');
+    }
+
+    if (this.currentCharacter != null && this.currentCharacter.type !== 'constant') {
+      return this.currentCharacter.insert(character, this);
+    }
+
+    return false;
+  }
+
+  deleteCharacter(): void {
+    this.currentCharacter && this.currentCharacter.delete();
+  }
+
+  clearAll(): void {
+    this._characters.forEach(c => c.delete());
+    this._cursorPosition = 0;
+  }
+
+  clearRange(start: number, end?: number) {
+    end = end == null ? this._characters.length - 1 : end;
+
+    for (let i = start; i < end; i++) {
+      this._characters[i] && this._characters[i].delete();
+    }
+  }
+
+  getFilledValue() {
+    const cursorPosition = this._cursorPosition;
+    const characters: string[] = [];
+
+    for (let x = 0; x < this._characters.length; x++) {
+      const c = this._characters[x];
+
+      if (!c.isFilled() && c.type !== 'constant') {
+        let hasMoreFilled = false;
+        for (let i = x; i < this._characters.length; i++) {
+          const character = this._characters[i];
+          if (character.isFilled() && character.type !== 'constant') {
+            hasMoreFilled = true;
+            break;
+          }
+        }
+
+        if (!hasMoreFilled) {
+          while (cursorPosition > x) {
+            const constantCharacter = this._characters[x];
+            characters.push(constantCharacter.value);
+            x++;
+          }
+          break;
+        }
+      }
+
+      characters.push(c.value);
+    }
+
+    return characters.join('');
+  }
+
+  isFilledBeyondIndex(index: number) {
+    for (let x = index + 1; x < this._characters.length; x++) {
+      if (this._characters[x].isFilled() && this._characters[x].type !== 'constant') {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  isEmptyBeforeIndex(index: number) {
+    for (let x = index - 1; x > 0; x--) {
+      if (!this._characters[x].isFilled()) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  isPreviousCharacterEmpty(): boolean {
+    const index = this._cursorPosition - 1;
+    const character = this._characters[index];
+
+    if (character == null) {
+      return false;
+    }
+
+    if (character.type === 'constant' && !this.arePreviousCharactersAllConstants()) {
+      return true;
+    }
+
+    return !character.isFilled();
+  }
+
+  arePreviousCharactersAllConstants(index = this._cursorPosition - 1): boolean {
+    return this._characters.slice(0, index).every(c => c.type === 'constant');
+  }
+
+  ifFilled() {
+    return this._characters.filter(c => c.type !== 'constant').every(c => c.isFilled());
+  }
+
+  getValue() {
+    return this._characters.map(c => c.value).join('');
+  }
+
+  getFilledLength() {
+    return this.getFilledValue().length;
+  }
+
+  getValueLength() {
+    return this.getValue().length;
+  }
+
+  getCharacterLength(): number {
+    return this._characters.length;
+  }
+
+  getInsertableSlotLength(): number {
+    return this._characters.filter(c => c.type !== 'constant').length;
+  }
+
+  getInsertableSlotIndexForCharacter(characterIndex: number): number {
+    let insertableSlotCount = 0;
+    const length = Math.min(characterIndex, this._characters.length - 1);
+
+    for (let x = 0; x < length; x++) {
+      const character = this._characters[x];
+      if (character.type !== 'constant') {
+        insertableSlotCount++;
+      }
+    }
+
+    return insertableSlotCount;
+  }
+
+  getCharacterIndexforInsertableSlotIndex(slotIndex: number): number {
+    let insertableSlotCount = 0;
+
+    for (let x = 0; x < this._characters.length; x++) {
+      const character = this._characters[x];
+      if (character.type !== 'constant') {
+        insertableSlotCount++;
+      }
+
+      if (insertableSlotCount > slotIndex) {
+        return x;
+      }
+    }
+
+    return this._characters.length;
+  }
+
+  getInsertableSlotValues(): string {
+    const values = this._characters
+      .filter(c => c.type !== 'constant' && c.isFilled())
+      .map(c => c.value)
+      .join('');
+
+    return values;
+  }
+
+  getValueWithinRange(start: number, end: number) {
+    const characters: string[] = [];
+    for (let x = start; x < end; x++) {
+      characters.push(this._characters[x].value);
+    }
+
+    return characters.join('');
+  }
+
+  private _makeCharacters(config: MaskConfig) {
+    const { mask, placeholder } = config;
+    const characters: Character[] = [];
+    const { maskParts, placeholderParts } = this._getParts(mask, placeholder);
+
+    for (let x = 0; x < maskParts.length; x++) {
+      let character = maskParts[x];
+      let placeholderCharacter = placeholderParts[x];
+      const isEscaping = character === '\\';
+      const CharacterType = characterMap[character];
+      if (isEscaping || CharacterType == null) {
+        if (isEscaping) {
+          x++;
+          character = maskParts[x];
+        }
+        characters.push(new ConstantCharacter(character, placeholderCharacter));
+      } else {
+        characters.push(new CharacterType(character, placeholderCharacter));
+      }
+    }
+
+    return characters;
+  }
+
+  private _getParts(mask: string, placeholder?: string) {
+    const parts = [...mask];
+    const placeholderParts =
+      placeholder != null ? [...placeholder] : new Array(parts.length);
+    if (placeholderParts.length !== parts.length) {
+      throw new Error(
+        'Invalid mask overlay. It needs to be the exact character length as the mask.'
+      );
+    }
+    this._validateMask(mask, parts);
+
+    return {
+      maskParts: parts,
+      placeholderParts: placeholderParts,
+    };
+  }
+
+  private _validateMask(mask: string, parts: string[]) {
+    if (mask.length === 0) {
+      throw new Error('Mask cannot be an empty string.');
+    }
+
+    const constants = parts.filter(c => dynamicCharacters.indexOf(c) === -1);
+    if (constants.length === parts.length) {
+      throw new Error('You cannot have a mask that is all constants.');
+    }
+  }
+}

package/src/inputs/mask_input/mask_config.ts

@@ -0,0 +1,25 @@
+export interface MaskConfig {
+  /**
+   * * '9' 0-9
+   * * 'a' A-Z, a-z
+   * * '*' A-Z, a-z, 0-9
+   * * All other characters are considered as constants. To use "9", "a", or "*" as a constant
+   * escape it with a backslash. This example, "$9.\9\9" will allow the user to decide what
+   * the first number will be, but because the second two are escaped, they became constants
+   * and part of the template.
+   * @example
+   * <InputMask mask={{mask: "99/99/9999"}}>
+   */
+  mask: string;
+  /**
+   * The placeholder overlays the mask to give more meaning to the mask. If the
+   * placeholder has a different amount of characters it will throw a run time error.
+   *
+   * In the example below the input's value would be "mm/dd/yyyy". If the user types a "0"
+   * then a "5", then the input's value would be "05/dd/yyyy". By default the placeholder
+   * places "_" in every spot the user can put custom input.
+   * @example
+   * <InputMask mask={{mask:"99/99/99", placeholder:"mm/dd/yyyy"}} />
+   */
+  placeholder?: string;
+}

package/src/inputs/mask_input/mask_cursor.ts

@@ -0,0 +1,23 @@
+export interface MaskCursor {
+  moveRight(): void;
+
+  moveLeft(): void;
+
+  moveTo(position: number): void;
+
+  insert(value: string): boolean;
+
+  insertPush(value: string): boolean;
+
+  isFilledBeyondIndex(index: number): boolean;
+
+  isEmptyBeforeIndex(index: number): boolean;
+
+  isPreviousCharacterEmpty(): boolean;
+
+  arePreviousCharactersAllConstants(): boolean;
+
+  getCharacterLength(): number;
+
+  getCursorPosition(): number;
+}

package/src/inputs/mask_input/mask_input.stories.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { MaskInput as Component, MaskInputProps } from './mask_input.js';
+import styles from '../__storybook__/stories.module.css';
+
+export default {
+  title: 'Mask Input',
+};
+
+function Base(props: Omit<MaskInputProps, 'onChange'>) {
+  const [value, setValue] = useState<string>('');
+
+  return <Component value={value} onChange={setValue} {...props} />;
+}
+
+export function MaskInput() {
+  return (
+    <table className={styles.story}>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Component</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Baseline</td>
+          <td>
+            <Base mask={{ mask: '99/99/9999', placeholder: 'mm/dd/yyyy' }} />
+          </td>
+        </tr>
+        <tr>
+          <td>Disabled</td>
+          <td>
+            <Base mask={{ mask: '99/99/9999', placeholder: 'mm/dd/yyyy' }} disabled />
+          </td>
+        </tr>
+        <tr>
+          <td>Phone Number</td>
+          <td>
+            <Base mask={{ mask: '(999) 999-9999', placeholder: '(___) ___-____' }} />
+          </td>
+        </tr>
+        <tr>
+          <td>India Phone Number</td>
+          <td>
+            <Base
+              mask={[
+                { mask: '99999-99999', placeholder: '_____-_____' },
+                { mask: '999-99999999', placeholder: '___-________' },
+              ]}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>Time</td>
+          <td>
+            <Base mask={[{ mask: '99:99:99', placeholder: 'hh:mm:ss' }]} />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/src/inputs/mask_input/mask_input.tsx

@@ -0,0 +1,246 @@
+import { useSignalValue } from '@tcn/state';
+import { useForkRef } from '../../utils/index.js';
+import React, { useRef, useState, useLayoutEffect } from 'react';
+import { InputProps } from '../input/input.js';
+import { KeyCaptureInput, Range } from './key_capture_input.js';
+import { MaskConfig } from './mask_config.js';
+import { MaskPresenter } from './mask_presenter.js';
+
+export interface MaskInputProps extends Omit<InputProps, 'onChange' | 'placeholder'> {
+  value?: string;
+  mask: MaskConfig | MaskConfig[];
+  onChange?: (value: string, isComplete: boolean) => void;
+  preparePasteValue?: (value: string) => string;
+  prepareCutValue?: (value: string) => string;
+  prepareCopyValue?: (value: string) => string;
+}
+
+export const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(
+  function MaskInput(
+    {
+      value = '',
+      onChange,
+      mask,
+      onPaste,
+      onCut,
+      onCopy,
+      preparePasteValue = s => s,
+      prepareCutValue = s => s,
+      prepareCopyValue = s => s,
+      ...props
+    }: MaskInputProps,
+    ref
+  ) {
+    // Fix copy on input, its not working
+    const masks = Array.isArray(mask) ? mask : [mask];
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const forkedRef = useForkRef(ref, inputRef);
+
+    const [presenter] = useState(() => {
+      const presenter = new MaskPresenter(masks);
+      return presenter;
+    });
+
+    const internalValue = useSignalValue(presenter.valueBroadcast);
+    useSignalValue(presenter.maskConfigsBroadcast);
+
+    function handleInput(
+      input: string,
+      key: string,
+      selection: Range | null,
+      cursorPosition: number,
+      _: number,
+      inputElement: HTMLInputElement
+    ) {
+      if (selection != null) {
+        presenter.setSelection(selection.start, selection.end);
+      } else {
+        presenter.forceMoveCursorTo(cursorPosition);
+      }
+
+      switch (key) {
+        case 'Delete': {
+          presenter.delete();
+        }
+        case 'Backspace': {
+          presenter.backspace();
+        }
+      }
+
+      presenter.insertText(input);
+
+      const value = presenter.valueBroadcast.get();
+      const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();
+
+      inputElement.value = value;
+      inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);
+
+      onChange && onChange(value, presenter.isComplete());
+    }
+
+    useLayoutEffect(() => {
+      const masks = Array.isArray(mask) ? mask : [mask];
+
+      const oldMaskString = masks.map(m => m.mask).join('|');
+      const newMaskString = presenter.maskConfigsBroadcast
+        .get()
+        .map(m => m.mask)
+        .join('|');
+
+      if (oldMaskString !== newMaskString) {
+        presenter.setMaskConfigs(masks);
+      }
+    }, [presenter, mask]);
+
+    useLayoutEffect(() => {
+      presenter.setValue(value);
+      const selection = presenter.selectionBroadcast.get();
+      const cursorPosition = presenter.cursorPositionBroadcast.get();
+
+      const input = inputRef.current;
+
+      if (input != null) {
+        const hasSelection = selection != null;
+
+        if (hasSelection) {
+          input.setSelectionRange(selection.start, selection.end);
+        } else {
+          input.setSelectionRange(cursorPosition, cursorPosition);
+        }
+      }
+    }, [presenter, value]);
+
+    function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {
+      const inputElement = event.currentTarget;
+      const start = inputElement.selectionStart;
+      const end = inputElement.selectionEnd;
+      const hasSelection = start != null && end != null && start !== end;
+
+      if (hasSelection) {
+        presenter.setSelection(start, end);
+      } else {
+        presenter.moveCursorTo(start || 0);
+      }
+
+      presenter.insertText(preparePasteValue(event.clipboardData.getData('text/plain')));
+      const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();
+
+      inputElement.value = presenter.valueBroadcast.get();
+      inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);
+
+      event.preventDefault();
+      onPaste && onPaste(event);
+      onChange && onChange(presenter.valueBroadcast.get(), presenter.isComplete());
+    }
+
+    function handleCut(event: React.ClipboardEvent<HTMLInputElement>) {
+      const inputElement = event.currentTarget;
+      const start = inputElement.selectionStart;
+      const end = inputElement.selectionEnd;
+      const hasSelection = start != null && end != null && start !== end;
+
+      if (hasSelection) {
+        presenter.setSelection(start, end);
+        const value = prepareCutValue(presenter.getSelectedValue());
+        presenter.clearRange(start, end);
+        const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();
+
+        event.clipboardData.setData('text/plain', value);
+        inputElement.value = presenter.valueBroadcast.get();
+        inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);
+      }
+
+      event.preventDefault();
+      onCut && onCut(event);
+    }
+
+    function handleCopy(event: React.ClipboardEvent<HTMLInputElement>) {
+      const input = event.currentTarget;
+      const start = input.selectionStart;
+      const end = input.selectionEnd;
+      const hasSelection = start != null && end != null && start !== end;
+
+      if (hasSelection) {
+        presenter.setSelection(start, end);
+        const value = prepareCopyValue(presenter.getSelectedValue());
+
+        event.clipboardData.setData('text/plain', value);
+      }
+
+      event.preventDefault();
+      onCopy && onCopy(event);
+    }
+
+    useLayoutEffect(() => {
+      let mode = 'unknown';
+
+      const input = inputRef.current;
+
+      if (input == null) {
+        return;
+      }
+
+      function handleMouseDown() {
+        mode = 'mouse';
+      }
+
+      function handleKeyDown() {
+        mode = 'keyboard';
+      }
+
+      function handleSelection() {
+        const input = inputRef.current;
+
+        if (input == null) {
+          return;
+        }
+
+        const start = input.selectionStart;
+        const end = input.selectionEnd;
+        const hasSelection = start != null && end != null && start !== end;
+        if (input !== document.activeElement || mode === 'keyboard') {
+          mode = 'unknown';
+          return;
+        }
+
+        const value = presenter.filledValueBroadcast.get();
+
+        if (hasSelection && value.length === 0) {
+          presenter.moveCursorTo(0);
+          input.setSelectionRange(0, 0);
+          mode = 'unknown';
+          return;
+        }
+
+        if (!hasSelection) {
+          presenter.moveCursorTo(end || 0);
+          const cursorPosition = presenter.cursorPositionBroadcast.get();
+          input.setSelectionRange(cursorPosition, cursorPosition);
+        }
+
+        mode = 'unknown';
+      }
+
+      document.addEventListener('selectionchange', handleSelection);
+      document.addEventListener('mousedown', handleMouseDown);
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('selectionchange', handleSelection);
+        document.removeEventListener('mousedown', handleMouseDown);
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [presenter]);
+
+    return (
+      <KeyCaptureInput
+        value={internalValue}
+        ref={forkedRef}
+        onCopy={handleCopy}
+        onPaste={handlePaste}
+        onCut={handleCut}
+        onKeyCapture={handleInput}
+        {...props}
+      />
+    );
+  }
+);