@ngrdt/utils 0.0.4 → 0.0.6

package/src/lib/utils/date-format.ts

@@ -0,0 +1,580 @@
+import { RdtDateUtils } from './date';
+import { RdtHTMLUtils } from './html';
+import { RdtStringUtils } from './string';
+
+interface RdtNumericNode {
+  type: RdtFormatType.Day | RdtFormatType.Month | RdtFormatType.Year;
+  maxLength: number;
+  minLength: number;
+}
+
+interface RdtSeparatorNode {
+  type: RdtFormatType.Constant;
+  value: string;
+}
+
+type RdtFormatNode = RdtSeparatorNode | RdtNumericNode;
+
+enum RdtFormatType {
+  Day = 'day',
+  Month = 'month',
+  Year = 'year',
+  Constant = 'constant',
+}
+
+export const PRIMENG_DATE_FORMAT_META: Record<string, RdtNumericNode> = {
+  d: {
+    type: RdtFormatType.Day,
+    minLength: 1,
+    maxLength: 2,
+  },
+  dd: {
+    type: RdtFormatType.Day,
+    minLength: 2,
+    maxLength: 2,
+  },
+  m: {
+    type: RdtFormatType.Month,
+    minLength: 1,
+    maxLength: 2,
+  },
+  mm: {
+    type: RdtFormatType.Month,
+    minLength: 2,
+    maxLength: 2,
+  },
+  y: {
+    type: RdtFormatType.Year,
+    minLength: 2,
+    maxLength: 2,
+  },
+  yy: {
+    type: RdtFormatType.Year,
+    minLength: 4,
+    maxLength: 4,
+  },
+};
+
+export interface RdtDateInputConfig {
+  format: string;
+  yearInputMode: RdtYearInputMode;
+  twoDigitYearInputStrategy: RdtTwoDigitYearInputConversionStrategy;
+  leadingZeroMode: RdtLeadingZeroInputMode;
+  symbolMeta: Record<string, RdtNumericNode>;
+  insertMode: RdtInsertMode;
+}
+
+export enum RdtInsertMode {
+  Overwrite,
+  Shift,
+}
+
+export enum RdtPasteMode {
+  Replace,
+  Insert,
+}
+
+export enum RdtYearInputMode {
+  FourDigit = 0b01,
+  TwoDigit = 0b10,
+  Both = 0b11,
+}
+
+export enum RdtLeadingZeroInputMode {
+  NoLeadingZero = 0b01,
+  LeadingZero = 0b10,
+  Both = 0b11,
+}
+
+export type RdtTwoDigitYearInputConversionStrategy = 'past' | 'future';
+
+function getDigitCount(value: number) {
+  return (Math.log10(value) + 1) | 0;
+}
+
+export class RdtDateParser {
+  private cfg: RdtDateInputConfig;
+  private _value: Date | null;
+  private _inputValue: string;
+  private _parsedFormat: RdtFormatNode[];
+  private deleting: boolean;
+  private caretPosition: number;
+
+  constructor(cfg: RdtDateInputConfig) {
+    this.cfg = cfg;
+    this._inputValue = '';
+    this._value = null;
+    this._parsedFormat = this.parseFormat(cfg);
+    this.deleting = false;
+    this.caretPosition = 0;
+  }
+
+  set leadingZeroMode(mode: RdtLeadingZeroInputMode) {
+    this.cfg.leadingZeroMode = mode;
+    this._parsedFormat = this.parseFormat(this.cfg);
+  }
+  get leadingZeroMode() {
+    return this.cfg.leadingZeroMode;
+  }
+
+  set yearInputMode(mode: RdtYearInputMode) {
+    this.cfg.yearInputMode = mode;
+    this._parsedFormat = this.parseFormat(this.cfg);
+  }
+  get yearInputMode() {
+    return this.cfg.yearInputMode;
+  }
+
+  set twoDigitYearInputStrategy(
+    strategy: RdtTwoDigitYearInputConversionStrategy
+  ) {
+    this.cfg.twoDigitYearInputStrategy = strategy;
+    this._parsedFormat = this.parseFormat(this.cfg);
+  }
+  get twoDigitYearInputStrategy() {
+    return this.cfg.twoDigitYearInputStrategy;
+  }
+
+  set insertMode(mode: RdtInsertMode) {
+    this.cfg.insertMode = mode;
+    this._parsedFormat = this.parseFormat(this.cfg);
+  }
+  get insertMode() {
+    return this.cfg.insertMode;
+  }
+
+  set format(format: string) {
+    this.cfg.format = format;
+    this._parsedFormat = this.parseFormat(this.cfg);
+  }
+
+  get format() {
+    return this.cfg.format;
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Backspace') {
+      this.deleting = true;
+    }
+    const target = event.target as HTMLInputElement;
+    this.caretPosition = target.selectionStart ?? target.value.length - 1;
+  }
+
+  onKeyUp(event: KeyboardEvent) {
+    if (event.key === 'Backspace') {
+      this.deleting = false;
+    }
+  }
+
+  onInput(event: InputEvent) {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+    const caretPosition = target.selectionStart ?? value.length - 1;
+    const res = this.parse(value, caretPosition);
+    target.value = res.prettyInput;
+    RdtHTMLUtils.setCaretPosition(target, res.caret);
+    this._value = res.date;
+    this._inputValue = res.prettyInput;
+    this.caretPosition = res.caret;
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  set value(d: Date | null) {
+    if (!(d instanceof Date)) {
+      this._value = null;
+      this._inputValue = '';
+      return;
+    }
+    let result = '';
+
+    this._parsedFormat.forEach((node) => {
+      switch (node.type) {
+        case RdtFormatType.Constant:
+          result += node.value;
+          break;
+        case RdtFormatType.Day:
+          result += `${d.getDate()}`.padStart(node.minLength, '0');
+          break;
+        case RdtFormatType.Month:
+          result += `${d.getMonth() + 1}`.padStart(node.minLength, '0');
+          break;
+        case RdtFormatType.Year:
+          result += `${d.getFullYear() % 10 ** node.maxLength}`.padStart(
+            node.minLength,
+            '0'
+          );
+          break;
+      }
+    });
+    this._value = d;
+    this._inputValue = result;
+  }
+
+  set inputValue(value: string) {
+    this._inputValue = value;
+  }
+
+  get inputValue() {
+    return this._inputValue;
+  }
+
+  parse(
+    input: string,
+    caretPosition = this.caretPosition,
+    deleting = this.deleting
+  ) {
+    let rest = input;
+    let day: number | null = null,
+      month: number | null = null,
+      year: number | null = null;
+
+    let output = '';
+    let targetCaret = caretPosition;
+    let allComplete = true;
+    let ambiguous = false;
+
+    for (let i = 0; i < this._parsedFormat.length; i++) {
+      if (rest.length === 0) {
+        break;
+      }
+      const node = this._parsedFormat[i];
+
+      const firstNumber = rest.search(/\d/);
+
+      if (node.type === RdtFormatType.Constant) {
+        if (firstNumber > 0) {
+          const value = deleting
+            ? rest.substring(0, node.value.length)
+            : rest.substring(0, firstNumber);
+          // In case we are deleting from separator, delete previous number as well
+          if (deleting && value !== node.value) {
+            if (rest.length === input.length) {
+              continue;
+            } else {
+              targetCaret -= node.value.length - value.length;
+            }
+          }
+          rest = rest.substring(firstNumber);
+        }
+        output += node.value;
+      } else {
+        if (firstNumber < 0) {
+          break;
+        }
+
+        if (targetCaret > output.length) {
+          allComplete = true;
+        }
+
+        if (node.type === RdtFormatType.Year) {
+          if (
+            this.cfg.yearInputMode & RdtYearInputMode.FourDigit &&
+            (rest.match(/^\d{3,4}/) ||
+              (rest.match(/^\d{2}$/) && i !== this._parsedFormat.length - 1))
+          ) {
+            if (
+              !deleting &&
+              this.cfg.insertMode === RdtInsertMode.Overwrite &&
+              rest.match(/^\d{5}/) &&
+              caretPosition < rest.length &&
+              caretPosition - output.length <= 5 &&
+              RdtStringUtils.isNumericCharacter(rest[caretPosition])
+            ) {
+              rest =
+                rest.substring(0, caretPosition) +
+                rest.substring(caretPosition + 1);
+            }
+            if (rest.match(/^\d{4}/)) {
+              const strVal = rest.substring(0, 4);
+              year = parseInt(strVal);
+              rest = rest.substring(4);
+              output += strVal;
+              if (!deleting) {
+                ({ rest, targetCaret } = this.useUpNumbersUntilNextSeparator(
+                  rest,
+                  targetCaret,
+                  true,
+                  deleting
+                ));
+              }
+            } else if (rest.match(/^\d{3}/)) {
+              output += rest.substring(0, 3);
+              rest = rest.substring(3);
+              if (output.length <= targetCaret) {
+                allComplete = false;
+              }
+            } else {
+              output = rest.substring(0, 2);
+              rest = rest.substring(2);
+              if (output.length <= targetCaret) {
+                allComplete = false;
+              }
+            }
+          } else if (
+            this.cfg.yearInputMode & RdtYearInputMode.TwoDigit &&
+            rest.match(/^\d{2}/) &&
+            (this.containsNonNumericCharacters(rest.substring(2)) ||
+              i === this._parsedFormat.length - 1)
+          ) {
+            const strVal = rest.substring(0, 2);
+            const y2 = parseInt(strVal);
+            if (this.cfg.twoDigitYearInputStrategy === 'past') {
+              year = RdtDateUtils.doubleDigitYearToPast(y2);
+            } else {
+              year = RdtDateUtils.doubleDigitYearToFuture(y2);
+            }
+            rest = rest.substring(2);
+            if (!deleting) {
+              ({ rest, targetCaret } = this.useUpNumbersUntilNextSeparator(
+                rest,
+                targetCaret,
+                true,
+                deleting
+              ));
+            }
+            output += strVal;
+            if (
+              this.cfg.yearInputMode & RdtYearInputMode.FourDigit &&
+              i === this._parsedFormat.length - 1
+            ) {
+              ambiguous = true;
+            }
+          } else if (rest.match(/^\d/)) {
+            output += rest[0];
+            rest = rest.substring(1);
+            if (output.length <= targetCaret) {
+              allComplete = false;
+            }
+          }
+        } else if (node.type === RdtFormatType.Month) {
+          const val = this.readNumber(
+            1,
+            12,
+            output,
+            rest,
+            targetCaret,
+            deleting
+          );
+          output = val.output;
+          rest = val.rest;
+          targetCaret = val.targetCaret;
+          if (val.value !== null) {
+            month = val.value;
+            // Add separator in case it's complete
+            if (val.complete && !deleting) {
+              ({ rest, targetCaret } = this.useUpNumbersUntilNextSeparator(
+                rest,
+                targetCaret,
+                true,
+                deleting
+              ));
+            }
+            if (!val.complete && output.length <= targetCaret) {
+              allComplete = false;
+            }
+          }
+        } else if (node.type === RdtFormatType.Day) {
+          const val = this.readNumber(
+            1,
+            31,
+            output,
+            rest,
+            targetCaret,
+            deleting
+          );
+          output = val.output;
+          rest = val.rest;
+          targetCaret = val.targetCaret;
+          if (val.value !== null) {
+            day = val.value;
+            // Add separator in case it's complete
+            if (val.complete && !deleting) {
+              ({ rest, targetCaret } = this.useUpNumbersUntilNextSeparator(
+                rest,
+                targetCaret,
+                true,
+                deleting
+              ));
+            }
+            if (!val.complete && output.length <= targetCaret) {
+              allComplete = false;
+            }
+          }
+        }
+      }
+    }
+
+    let date: Date | null = null;
+    if (year !== null && month !== null && day !== null) {
+      date = new Date(year, month - 1, day);
+      if (date.getMonth() !== month - 1) {
+        date = null;
+      }
+    }
+
+    targetCaret = Math.min(targetCaret, output.length + 1);
+
+    if (!deleting) {
+      if (caretPosition === input.length) {
+        targetCaret = output.length;
+      } else if (allComplete) {
+        while (
+          targetCaret > 0 &&
+          output.length > targetCaret &&
+          !RdtStringUtils.isNumericCharacter(output[targetCaret])
+        ) {
+          targetCaret++;
+        }
+      }
+    } else if (!date) {
+      output = input;
+      targetCaret = caretPosition;
+    }
+
+    return {
+      prettyInput: output,
+      date: date,
+      complete: date !== null,
+      caret: targetCaret,
+      ambiguous: ambiguous || date === null,
+    };
+  }
+
+  private readNumber(
+    min: number,
+    max: number,
+    output: string,
+    rest: string,
+    targetCaret: number,
+    deleting: boolean
+  ) {
+    const maxDigits = getDigitCount(max);
+
+    let value: number | null = null;
+    let strVal = '';
+    let complete = false;
+    if (!(this.cfg.leadingZeroMode & RdtLeadingZeroInputMode.NoLeadingZero)) {
+      const regex = new RegExp(`^\\d{${maxDigits}}`);
+      if (rest.match(regex)) {
+        strVal = rest.substring(0, maxDigits);
+        output += strVal;
+        rest = rest.substring(maxDigits);
+        value = parseInt(strVal);
+      }
+    } else {
+      let digits = rest.match(/^\d+/)?.[0] ?? '';
+
+      if (digits.length > 0) {
+        digits = digits.slice(0, maxDigits);
+        value = parseInt(digits);
+        if (value < min) {
+          value = null;
+          let nines = '9';
+          while (
+            digits.length + 1 > maxDigits ||
+            parseInt(digits + nines) < min
+          ) {
+            digits = digits.slice(0, -1);
+            nines += '9';
+          }
+        } else {
+          while (value > max && digits.length > 0) {
+            digits = digits.slice(0, -1);
+            value = parseInt(digits);
+          }
+          if (digits.length === 0) {
+            value = null;
+          }
+        }
+        if (
+          digits[0] === '0' &&
+          min !== 0 &&
+          !(this.cfg.leadingZeroMode & RdtLeadingZeroInputMode.LeadingZero)
+        ) {
+          value = null;
+          digits = '';
+        }
+      }
+
+      output += digits;
+      rest = rest.substring(digits.length);
+      strVal = digits;
+    }
+
+    if (value !== null && value >= min && value <= max) {
+      complete = strVal.length === maxDigits || value * 10 > max;
+      ({ rest, targetCaret } = this.useUpNumbersUntilNextSeparator(
+        rest,
+        targetCaret,
+        complete && !deleting,
+        deleting
+      ));
+      return { value, complete, output, rest, targetCaret };
+    } else {
+      return { value: null, complete: false, output, rest, targetCaret };
+    }
+  }
+
+  private parseFormat(cfg: RdtDateInputConfig) {
+    const keys = Object.keys(cfg.symbolMeta);
+    keys.sort((a, b) => b.length - a.length);
+
+    let rest = cfg.format;
+    const result: RdtFormatNode[] = [];
+
+    while (rest.length > 0) {
+      const indices = keys.map((key) => rest.indexOf(key));
+      const minI = indices.indexOf(Math.min(...indices.filter((i) => i >= 0)));
+      const minIndex = indices[minI];
+      const minKey = keys[minI];
+
+      if (minIndex > 0) {
+        result.push({
+          type: RdtFormatType.Constant,
+          value: rest.substring(0, minIndex),
+        });
+        rest = rest.substring(minIndex);
+      } else if (minIndex < 0) {
+        result.push({
+          type: RdtFormatType.Constant,
+          value: rest,
+        });
+        rest = '';
+      } else {
+        result.push(cfg.symbolMeta[minKey]);
+        rest = rest.substring(minIndex + minKey.length);
+      }
+    }
+
+    return result;
+  }
+
+  private useUpNumbersUntilNextSeparator(
+    input: string,
+    targetCaret: number,
+    insertSeparator: boolean,
+    deleting: boolean
+  ) {
+    let i = 0;
+    while (i < input.length && RdtStringUtils.isNumericCharacter(input[i])) {
+      i++;
+    }
+    if (i !== input.length) {
+      return {
+        rest: input.substring(i),
+        targetCaret: targetCaret - (deleting ? i : 0),
+      };
+    } else if (insertSeparator) {
+      return { rest: ' ' + input, targetCaret: targetCaret };
+    } else {
+      return { rest: input, targetCaret };
+    }
+  }
+
+  private containsNonNumericCharacters(input: string) {
+    return input.search(/\D/) >= 0;
+  }
+}