refactor text and value to parsedText and rawText

appsmithorg · May 23, 2024 · 527ec19 · 527ec19
1 parent 4e7216f
commit 527ec19
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 45 deletions.
diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/autocompleteConfig.ts b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/autocompleteConfig.ts
@@ -4,12 +4,12 @@ export const autocompleteConfig = {
   "!doc":
     "An input text field is used to capture a currency value. Inputs are used in forms and can have custom validations.",
   "!url": "https://docs.appsmith.com/widget-reference/currency-input",
-  text: {
+  parsedText: {
     "!type": "string",
     "!doc": "The formatted text value of the input",
     "!url": "https://docs.appsmith.com/widget-reference/currency-input",
   },
-  value: {
+  rawText: {
     "!type": "number",
     "!doc": "The value of the input",
     "!url": "https://docs.appsmith.com/widget-reference/currency-input",

diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/widget/derived.js b/app/client/src/widgets/wds/WDSCurrencyInputWidget/widget/derived.js
@@ -52,7 +52,7 @@ export default {
   },
   //
   value: (props, moment, _) => {
-    const text = props.text;
+    const text = props.parsedText;
 
     function getLocale() {
       return navigator.languages?.[0] || "en-US";

diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSCurrencyInputWidget/widget/index.tsx
@@ -110,7 +110,7 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget<
   static getDerivedPropertiesMap() {
     return {
       isValid: `{{(()=>{${derivedProperties.isValid}})()}}`,
-      value: `{{(()=>{${derivedProperties.value}})()}}`,
+      rawText: `{{(()=>{${derivedProperties.value}})()}}`,
     };
   }
 
@@ -137,9 +137,9 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget<
 
   componentDidUpdate(prevProps: CurrencyInputWidgetProps) {
     if (
-      prevProps.text !== this.props.text &&
+      prevProps.text !== this.props.parsedText &&
       !this.props.isFocused &&
-      this.props.text === String(this.props.defaultText)
+      this.props.parsedText === String(this.props.defaultText)
     ) {
       this.formatText();
     }
@@ -175,7 +175,7 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget<
       Sentry.captureException(e);
     }
 
-    this.props.updateWidgetMetaProperty("text", String(formattedValue), {
+    this.props.updateWidgetMetaProperty("parsedText", String(formattedValue), {
       triggerPropertyName: "onTextChanged",
       dynamicString: this.props.onTextChanged,
       event: {
@@ -195,14 +195,12 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget<
 
     try {
       if (isFocused) {
-        const text = this.props.text || "";
-
+        const text = this.props.parsedText || "";
         const deFormattedValue = text.replace(
           new RegExp("\\" + getLocaleThousandSeparator(), "g"),
           "",
         );
-        this.props.updateWidgetMetaProperty("text", deFormattedValue);
-
+        this.props.updateWidgetMetaProperty("parsedText", deFormattedValue);
         this.props.updateWidgetMetaProperty("isFocused", isFocused, {
           triggerPropertyName: "onFocus",
           dynamicString: this.props.onFocus,
@@ -211,12 +209,12 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget<
           },
         });
       } else {
-        if (this.props.text) {
+        if (this.props.parsedText) {
           const formattedValue = formatCurrencyNumber(
             this.props.decimals,
-            this.props.text,
+            this.props.parsedText,
           );
-          this.props.updateWidgetMetaProperty("text", formattedValue);
+          this.props.updateWidgetMetaProperty("parsedText", formattedValue);
         }
         this.props.updateWidgetMetaProperty("isFocused", isFocused, {
           triggerPropertyName: "onBlur",
@@ -229,7 +227,7 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget<
     } catch (e) {
       log.error(e);
       Sentry.captureException(e);
-      this.props.updateWidgetMetaProperty("text", this.props.text);
+      this.props.updateWidgetMetaProperty("parsedText", this.props.parsedText);
     }
 
     super.onFocusChange(!!isFocused);
@@ -274,21 +272,21 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget<
   };
 
   isTextFormatted = () => {
-    return this.props.text.includes(getLocaleThousandSeparator());
+    return this.props.parsedText.includes(getLocaleThousandSeparator());
   };
 
   formatText() {
-    if (!!this.props.text && !this.isTextFormatted()) {
+    if (!!this.props.parsedText && !this.isTextFormatted()) {
       try {
-        const floatVal = parseFloat(this.props.text);
+        const floatVal = parseFloat(this.props.parsedText);
 
         const formattedValue = Intl.NumberFormat(getLocale(), {
           style: "decimal",
           minimumFractionDigits: this.props.decimals,
           maximumFractionDigits: this.props.decimals,
         }).format(floatVal);
 
-        this.props.updateWidgetMetaProperty("text", formattedValue);
+        this.props.updateWidgetMetaProperty("parsedText", formattedValue);
       } catch (e) {
         log.error(e);
         Sentry.captureException(e);
@@ -297,7 +295,7 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget<
   }
 
   getWidgetView() {
-    const value = this.props.text ?? "";
+    const value = this.props.parsedText ?? "";
 
     const validation = validateInput(this.props);
 

diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/config/autocompleteConfig.ts b/app/client/src/widgets/wds/WDSPhoneInputWidget/config/autocompleteConfig.ts
@@ -4,12 +4,12 @@ export const autocompleteConfig = {
   "!doc":
     "An input text field is used to capture a phone number. Inputs are used in forms and can have custom validations.",
   "!url": "https://docs.appsmith.com/widget-reference/phone-input",
-  text: {
+  parsedText: {
     "!type": "string",
-    "!doc": "The text value of the input",
+    "!doc": "The formatted text value of the input",
     "!url": "https://docs.appsmith.com/widget-reference/phone-input",
   },
-  value: {
+  rawText: {
     "!type": "string",
     "!doc": "The unformatted text value of the input",
     "!url": "https://docs.appsmith.com/widget-reference/phone-input",

diff --git a/app/client/src/widgets/wds/WDSPhoneInputWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSPhoneInputWidget/widget/index.tsx
@@ -106,14 +106,17 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget<
 
   static getMetaPropertiesMap(): Record<string, any> {
     return merge(super.getMetaPropertiesMap(), {
-      value: "",
+      rawText: "",
+      parsedText: "",
       dialCode: undefined,
     });
   }
 
   static getDefaultPropertiesMap(): Record<string, string> {
     return merge(super.getDefaultPropertiesMap(), {
       dialCode: "defaultDialCode",
+      rawText: "defaultText",
+      parsedText: "defaultText",
     });
   }
 
@@ -141,13 +144,13 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget<
   }
 
   componentDidMount() {
-    //format the defaultText and store it in text
-    if (!!this.props.text) {
+    // format the defaultText and store it in text
+    if (!!this.props.parseText) {
       try {
-        const formattedValue = this.getFormattedPhoneNumber(this.props.text);
+        const formattedValue = this.getFormattedPhoneNumber(this.props.rawText);
 
-        this.props.updateWidgetMetaProperty("value", this.props.text);
-        this.props.updateWidgetMetaProperty("text", formattedValue);
+        this.props.updateWidgetMetaProperty("rawText", this.props.rawText);
+        this.props.updateWidgetMetaProperty("parsedText", formattedValue);
       } catch (e) {
         log.error(e);
         Sentry.captureException(e);
@@ -161,24 +164,26 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget<
     }
 
     if (prevProps.allowFormatting !== this.props.allowFormatting) {
-      const formattedValue = this.getFormattedPhoneNumber(this.props.value);
+      const formattedValue = this.getFormattedPhoneNumber(this.props.rawText);
 
-      this.props.updateWidgetMetaProperty("text", formattedValue);
+      this.props.updateWidgetMetaProperty("parsedText", formattedValue);
     }
 
     // When the default text changes
     if (
-      prevProps.text !== this.props.text &&
-      this.props.text === this.props.defaultText
+      prevProps.parsedText !== this.props.parsedText &&
+      this.props.parsedText === this.props.defaultText
     ) {
-      const formattedValue = this.getFormattedPhoneNumber(this.props.text);
+      const formattedValue = this.getFormattedPhoneNumber(
+        this.props.parsedText,
+      );
 
       if (formattedValue) {
         this.props.updateWidgetMetaProperty(
-          "value",
+          "rawText",
           parseIncompletePhoneNumber(formattedValue),
         );
-        this.props.updateWidgetMetaProperty("text", formattedValue);
+        this.props.updateWidgetMetaProperty("parsedText", formattedValue);
       }
     }
 
@@ -196,28 +201,28 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget<
     this.props.updateWidgetMetaProperty("dialCode", dialCode);
     this.props.updateWidgetMetaProperty("countryCode", countryCode);
 
-    if (this.props.value && this.props.allowFormatting) {
-      const formattedValue = this.getFormattedPhoneNumber(this.props.value);
+    if (this.props.rawText && this.props.allowFormatting) {
+      const formattedValue = this.getFormattedPhoneNumber(this.props.rawText);
 
-      this.props.updateWidgetMetaProperty("text", formattedValue);
+      this.props.updateWidgetMetaProperty("parsedText", formattedValue);
     }
   };
 
   onValueChange = (value: string) => {
     let formattedValue;
 
     // Don't format, as value is typed, when user is deleting
-    if (value && value.length > this.props.text?.length) {
+    if (value && value.length > this.props.parsedText?.length) {
       formattedValue = this.getFormattedPhoneNumber(value);
     } else {
       formattedValue = value;
     }
 
     this.props.updateWidgetMetaProperty(
-      "value",
+      "rawText",
       parseIncompletePhoneNumber(formattedValue),
     );
-    this.props.updateWidgetMetaProperty("text", formattedValue, {
+    this.props.updateWidgetMetaProperty("parsedText", formattedValue, {
       triggerPropertyName: "onTextChanged",
       dynamicString: this.props.onTextChanged,
       event: {
@@ -278,11 +283,11 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget<
 
   resetWidgetText = () => {
     super.resetWidgetText();
-    this.props.updateWidgetMetaProperty("value", undefined);
+    this.props.updateWidgetMetaProperty("rawText", undefined);
   };
 
   getWidgetView() {
-    const value = this.props.text ?? "";
+    const rawText = this.props.parsedText ?? "";
 
     const validation = validateInput(this.props);
 
@@ -305,7 +310,7 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget<
         placeholder={this.props.placeholderText}
         tooltip={this.props.tooltip}
         validationStatus={validation.validattionStatus}
-        value={value}
+        value={rawText}
         widgetId={this.props.widgetId}
       />
     );