work for #4842 add datetime mask

surveyjs · Feb 9, 2024 · ba37774 · ba37774
1 parent b0c6330
commit ba37774
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 54 deletions.
diff --git a/src/entries/chunks/model.ts b/src/entries/chunks/model.ts
@@ -284,6 +284,7 @@ export { MaskManagerType } from "../../mask/mask_manager";
 export { InputMaskBase } from "../../mask/mask_base";
 export { InputMaskPattern } from "../../mask/mask_pattern";
 export { InputMaskNumber } from "../../mask/mask_number";
+export { InputMaskDateTime } from "../../mask/mask_datetime";
 export * from "../../utils/cssClassBuilder";
 
 export { surveyCss, defaultV2Css, defaultV2ThemeName } from "../../defaultCss/defaultV2Css";

diff --git a/src/mask/mask_datetime.ts b/src/mask/mask_datetime.ts
@@ -0,0 +1,54 @@
+import { InputMaskBase } from "./mask_base";
+import { MaskManagerType } from "./mask_manager";
+import { IMaskSettings } from "./mask_settings";
+
+export interface IDateTimeMaskLiteral {
+  type: "month" | "day" | "year" | "separator";
+  value: any;
+  length: number;
+}
+
+export function getDateTimeLiterals(mask: string): Array<IDateTimeMaskLiteral> {
+  const result: Array<IDateTimeMaskLiteral> = [];
+  let prevLiteralType: string;
+
+  const createOrUpdateLiteral = (currentLiteralType: "month" | "day" | "year" | "separator", currentChar: string) => {
+    if(!!prevLiteralType && prevLiteralType === currentLiteralType) {
+      result[result.length - 1].length++;
+    } else {
+      result.push({ type: currentLiteralType, value: currentChar, length: 1 });
+    }
+  };
+
+  for(let index = 0; index < mask.length; index++) {
+    const currentChar = mask[index];
+    switch (currentChar) {
+      case "m":
+        createOrUpdateLiteral("month", "m");
+        break;
+      case "d":
+        createOrUpdateLiteral("day", "d");
+        break;
+      case "y":
+        createOrUpdateLiteral("year", "y");
+        break;
+      default:
+        result.push({ type: "separator", value: currentChar, length: 1 });
+        break;
+    }
+    prevLiteralType = result[result.length - 1].type;
+  }
+
+  return result;
+}
+
+export class InputMaskDateTime extends InputMaskBase {
+  // public processInput(args: ITextMaskInputArgs): IMaskedValue {
+  //   return { text: args.prevValue, cursorPosition: args.selectionEnd, cancelPreventDefault: false };
+  // }
+
+  public getUnmaskedValue(src: string): string { return src; }
+  public getMaskedValue(src: string): string { return src; }
+}
+
+MaskManagerType.Instance.registerMaskManagerType("datetime", (maskOptions: IMaskSettings) => { return new InputMaskDateTime(maskOptions); });
diff --git a/src/mask/mask_manager.ts b/src/mask/mask_manager.ts
@@ -37,10 +37,8 @@ export class MaskManagerType {
     return new InputMaskBase(maskOption);
   }
   public getAllTypes(): Array<string> {
-    var result = ["none"];
-    for (var key in this.creatorHash) {
-      result.push(key);
-    }
-    return result.sort();
+    const result = Object.keys(this.creatorHash).sort();
+    result.splice(0, 0, "none");
+    return result;
   }
 }
diff --git a/src/mask/mask_number.ts b/src/mask/mask_number.ts
@@ -19,23 +19,6 @@ interface INumericalComposition {
   decimalSeparatorCount?: number;
 }
 
-// export function parseNumber(str: any, decimalSeparator = "."): INumericalComposition {
-//   const result: INumericalComposition = { integralPart: 0, fractionalPart: 0 };
-//   const input = str.toString();
-
-//   const parts = input.trim().split(decimalSeparator);
-//   if(parts.length >= 2) {
-//     result.integralPart = parseInt(parts[0].trim() || 0);
-//     result.fractionalPart = parseInt(parts[1].trim() || 0);
-//   } else if(parts.length == 1) {
-//     result.integralPart = parseInt(parts[0].trim() || 0);
-//   } else {
-//     result.integralPart = parseInt(input.trim() || 0);
-//   }
-
-//   return result;
-// }
-
 export function splitString(str: string, reverse = true, n = 3): Array<string> {
   let arr = [];
 
@@ -53,22 +36,6 @@ export function splitString(str: string, reverse = true, n = 3): Array<string> {
   return arr;
 }
 
-// export function getNumberMaskedValueOld(str: string | number, option?: INumberMaskOption): string {
-//   const decimalSeparator = option?.decimal || settings.numberOptions.decimal;
-//   const thousandsSeparator = option?.thousands || settings.numberOptions.thousands;
-//   const precision = option?.precision || settings.numberOptions.precision;
-//   const parsedNumber = parseNumber(str, decimalSeparator);
-
-//   const integralPart = parsedNumber.integralPart ? splitString(parsedNumber.integralPart.toString()).join(thousandsSeparator) : "0";
-//   let fractionalPart = parsedNumber.fractionalPart ? parsedNumber.fractionalPart.toString() : "";
-//   if(fractionalPart === "") {
-//     return integralPart;
-//   } else {
-//     fractionalPart = fractionalPart.substring(0, precision);
-//     return [integralPart, fractionalPart].join(decimalSeparator);
-//   }
-// }
-
 export class InputMaskNumber extends InputMaskBase {
   private calcCursorPosition(leftPart: string, args: ITextMaskInputArgs, maskedValue: string) {
     const leftPartMaskedLength = !! leftPart ? this.displayNumber(this.parseNumber(leftPart), false).length : 0;

diff --git a/src/mask/mask_settings.ts b/src/mask/mask_settings.ts
@@ -9,15 +9,15 @@ export interface IMaskSettings {
 }
 
 export class MaskSettings extends Base implements IMaskSettings {
-  type: string;
-  mask: string;
-  dataToSave?: "masked" | "unmasked";
-  allowNegative?: boolean;
-  decimal?: string;
-  precision?: number;
-  thousands?: string;
-  min?: number;
-  max?: number;
+  @property() type: string;
+  @property() mask: string;
+  @property() dataToSave?: "masked" | "unmasked";
+  @property() allowNegative?: boolean;
+  @property() decimal?: string;
+  @property() precision?: number;
+  @property() thousands?: string;
+  @property() min?: number;
+  @property() max?: number;
   maskInstance?: IInputMaskType;
 
   private createMaskInstance() {
@@ -75,24 +75,26 @@ export class MaskSettings extends Base implements IMaskSettings {
 Serializer.addClass(
   "masksettings",
   [
-    { name: "type",
+    {
+      name: "type",
+      type: "dropdown",
       choices: ["none", "pattern", "number"],
       default: "none"
     },
-    { name: "mask",
+    { name: "dataToSave",
+      choices: ["masked", "unmasked"],
+      default: "unmasked",
       dependsOn: "type",
       visibleIf: function(obj: any) {
         if (!obj) return false;
-        return obj.type === "pattern";
+        return obj.type !== "none";
       },
     },
-    { name: "dataToSave",
-      choices: ["masked", "unmasked"],
-      default: "unmasked",
+    { name: "mask",
       dependsOn: "type",
       visibleIf: function(obj: any) {
         if (!obj) return false;
-        return obj.type !== "none";
+        return obj.type === "pattern";
       },
     },
     { name: "allowNegative:boolean",

diff --git a/tests/entries/test.ts b/tests/entries/test.ts
@@ -69,6 +69,7 @@ export * from "../mask/mask_pattern_tests";
 export * from "../mask/mask_number_tests";
 export * from "../mask/lexical_analyzer_tests";
 export * from "../mask/syntactic_analyzer_tests";
+export * from "../mask/mask_datetime_tests";
 export * from "../stylesManagerTests";
 export * from "../headerTests";
 

diff --git a/tests/mask/mask_datetime_tests.ts b/tests/mask/mask_datetime_tests.ts
@@ -0,0 +1,55 @@
+import { InputMaskDateTime, getDateTimeLiterals } from "../../src/mask/mask_datetime";
+import { settings } from "../../src/mask/mask_utils";
+
+export default QUnit.module("Datetime mask");
+
+QUnit.test("getDateTimeLiterals simple pattern", function(assert) {
+  let result = getDateTimeLiterals("m/d/yy");
+  assert.equal(result.length, 5);
+  assert.equal(result[0].type, "month");
+  assert.equal(result[0].value, "m");
+  assert.equal(result[0].length, 1);
+  assert.equal(result[1].type, "separator");
+  assert.equal(result[1].value, "/");
+  assert.equal(result[1].length, 1);
+  assert.equal(result[2].type, "day");
+  assert.equal(result[2].value, "d");
+  assert.equal(result[2].length, 1);
+  assert.equal(result[3].type, "separator");
+  assert.equal(result[3].value, "/");
+  assert.equal(result[3].length, 1);
+  assert.equal(result[4].type, "year");
+  assert.equal(result[4].value, "y");
+  assert.equal(result[4].length, 2);
+});
+
+QUnit.test("getDateTimeLiterals simple pattern", function(assert) {
+  let result = getDateTimeLiterals("mm/dd/yyyy");
+  assert.equal(result.length, 5);
+  assert.equal(result[0].type, "month");
+  assert.equal(result[0].value, "m");
+  assert.equal(result[0].length, 2);
+  assert.equal(result[1].type, "separator");
+  assert.equal(result[1].value, "/");
+  assert.equal(result[1].length, 1);
+  assert.equal(result[2].type, "day");
+  assert.equal(result[2].value, "d");
+  assert.equal(result[2].length, 2);
+  assert.equal(result[3].type, "separator");
+  assert.equal(result[3].value, "/");
+  assert.equal(result[3].length, 1);
+  assert.equal(result[4].type, "year");
+  assert.equal(result[4].value, "y");
+  assert.equal(result[4].length, 4);
+});
+
+QUnit.skip("get masked valid date text matchWholeMask = true", function(assert) {
+  settings.placeholderChar = "*";
+  const maskInstance = new InputMaskDateTime({ type: "datetime", mask: "mm/dd/yyyy" });
+  assert.equal(maskInstance.getMaskedValue(""), "**/**/****");
+  assert.equal(maskInstance.getMaskedValue("1"), "1*/**/****");
+  assert.equal(maskInstance.getMaskedValue("1234"), "12/3*/****");
+  assert.equal(maskInstance.getMaskedValue("1230198"), "12/30/567*");
+  assert.equal(maskInstance.getMaskedValue("12301987"), "12/30/1987");
+  settings.placeholderChar = "_";
+});