diff --git a/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/autocompleteConfig.ts b/app/client/src/widgets/wds/WDSCurrencyInputWidget/config/autocompleteConfig.ts index 799029825624..8796f4c1dc14 100644 --- 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 index 154ae98f7209..697839de0e14 100644 --- 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 index db0a90995c5e..a41e3da810f6 100644 --- 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,13 +272,13 @@ 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", @@ -288,7 +286,7 @@ class WDSCurrencyInputWidget extends WDSBaseInputWidget< 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 index dd124e4983e6..b7fb65a6fcff 100644 --- 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 index 0c289e4a2ae0..1149fc040488 100644 --- a/app/client/src/widgets/wds/WDSPhoneInputWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSPhoneInputWidget/widget/index.tsx @@ -106,7 +106,8 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget< static getMetaPropertiesMap(): Record { return merge(super.getMetaPropertiesMap(), { - value: "", + rawText: "", + parsedText: "", dialCode: undefined, }); } @@ -114,6 +115,8 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget< static getDefaultPropertiesMap(): Record { 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,10 +201,10 @@ 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); } }; @@ -207,17 +212,17 @@ class WDSPhoneInputWidget extends WDSBaseInputWidget< 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} /> );