diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js index f062d97d4622..169ccdb8079e 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js @@ -159,6 +159,19 @@ describe("Input Widget Functionality", function() { }); }); + it("Input Functionality To check phone number input type", function() { + // cy.openPropertyPane("inputwidget"); + cy.get(widgetsPage.innertext) + .click() + .clear(); + cy.selectDropdownValue(commonlocators.dataType, "Phone Number"); + cy.get(commonlocators.inputCountryCodeChangeType) + .invoke("text") + .then((text) => { + expect(text).to.equal("🇺🇸+1"); + }); + }); + it("Input label wrapper do not show if lable and tooltip is empty", () => { cy.get(".t--input-label-wrapper").should("not.exist"); }); diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index f8f20361e669..af22a7791640 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -116,6 +116,7 @@ "decimalType": ".t--property-control-decimals .bp3-popover-target", "allowCurrencyChange": ".t--property-control-allowcurrencychange input[type='checkbox']", "inputCurrencyChangeType": ".t--input-currency-change", + "inputCountryCodeChangeType": ".t--input-country-code-change", "viewerPage": ".t--app-viewer-page", "dropDownOptSelected": "//span[@type='p1']" } diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 80237961cfa7..c9dddd592e76 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -2303,10 +2303,9 @@ Cypress.Commands.add("onClickActions", (forSuccess, forFailure) => { .click() .type(forSuccess) .get("button.t--open-dropdown-Select-type") - .click() - .get("a.single-select div") - .contains(forSuccess) - .click(); + .first() + .click({ force: true }) + .selectOnClickOption(forSuccess); cy.wait(2000); // For Failure @@ -2322,10 +2321,8 @@ Cypress.Commands.add("onClickActions", (forSuccess, forFailure) => { .type(forFailure) .get("button.t--open-dropdown-Select-type") .last() - .click() - .get("a.single-select div") - .contains(forFailure) - .click(); + .click({ force: true }) + .selectOnClickOption(forFailure); }); Cypress.Commands.add("copyWidget", (widget, widgetLocator) => { diff --git a/app/client/src/components/ads/CurrencyCodeDropdown.tsx b/app/client/src/components/ads/CurrencyCodeDropdown.tsx new file mode 100644 index 000000000000..bce5d6b934bb --- /dev/null +++ b/app/client/src/components/ads/CurrencyCodeDropdown.tsx @@ -0,0 +1,108 @@ +import React from "react"; +import styled from "styled-components"; +import Dropdown, { DropdownOption } from "components/ads/Dropdown"; +import { CurrencyTypeOptions, CurrencyOptionProps } from "constants/Currency"; +import Icon, { IconSize } from "components/ads/Icon"; +import { countryToFlag } from "components/designSystems/blueprint/InputComponent/utilties"; + +const DropdownTriggerIconWrapper = styled.div` + height: 19px; + padding: 9px 5px 9px 12px; + width: 40px; + height: 19px; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; + line-height: 19px; + letter-spacing: -0.24px; + color: #090707; +`; + +const CurrencyIconWrapper = styled.span` + height: 100%; + padding: 6px 4px 6px 12px; + width: 28px; + position: absolute; + left: 0; + z-index: 16; + font-size: 14px; + line-height: 19px; + letter-spacing: -0.24px; + color: #090707; +`; + +const getCurrencyOptions = (): Array => { + return CurrencyTypeOptions.map((item: CurrencyOptionProps) => { + return { + leftElement: countryToFlag(item.code), + searchText: item.label, + label: `${item.currency} - ${item.currency_name}`, + value: item.code, + id: item.symbol_native, + }; + }); +}; + +export const CurrencyDropdownOptions = getCurrencyOptions(); + +export const getSelectedCurrency = ( + currencyCountryCode?: string, +): DropdownOption => { + let selectedCurrency: CurrencyOptionProps | undefined = currencyCountryCode + ? CurrencyTypeOptions.find((item: CurrencyOptionProps) => { + return item.code === currencyCountryCode; + }) + : undefined; + if (!selectedCurrency) { + selectedCurrency = { + code: "US", + currency: "USD", + currency_name: "US Dollar", + label: "United States", + phone: "1", + symbol_native: "$", + }; + } + return { + label: `${selectedCurrency.currency} - ${selectedCurrency.currency_name}`, + searchText: selectedCurrency.label, + value: selectedCurrency.code, + id: selectedCurrency.symbol_native, + }; +}; + +interface CurrencyDropdownProps { + onCurrencyTypeChange: (currencyCountryCode?: string) => void; + options: Array; + selected: DropdownOption; + allowCurrencyChange?: boolean; +} + +export default function CurrencyTypeDropdown(props: CurrencyDropdownProps) { + const selectedCurrency = getSelectedCurrency(props.selected.value).id; + if (!props.allowCurrencyChange) { + return {selectedCurrency}; + } + const dropdownTriggerIcon = ( + + {selectedCurrency} + + + ); + return ( + + ); +} diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx index b31851f0842a..6d915dfe92b3 100644 --- a/app/client/src/components/ads/Dropdown.tsx +++ b/app/client/src/components/ads/Dropdown.tsx @@ -89,7 +89,6 @@ export const DropdownContainer = styled.div<{ width: string }>` const DropdownTriggerWrapper = styled.div<{ isOpen: boolean; disabled?: boolean; - height: string; }>` height: 100%; display: flex; @@ -153,6 +152,10 @@ const Selected = styled.div<{ ? "box-shadow: 0px 0px 4px 4px rgba(203, 72, 16, 0.18)" : null}; .${Classes.TEXT} { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: calc(100% - 10px); ${(props) => props.disabled ? `color: ${props.theme.colors.dropdown.header.disabledText}` @@ -511,7 +514,6 @@ export default function Dropdown(props: DropdownProps) { const dropdownTrigger = props.dropdownTriggerIcon ? ( diff --git a/app/client/src/components/ads/ISDCodeDropdown.tsx b/app/client/src/components/ads/ISDCodeDropdown.tsx new file mode 100644 index 000000000000..68d2ef7d4339 --- /dev/null +++ b/app/client/src/components/ads/ISDCodeDropdown.tsx @@ -0,0 +1,108 @@ +import React from "react"; +import styled from "styled-components"; +import Dropdown, { DropdownOption } from "components/ads/Dropdown"; +import Icon, { IconSize } from "components/ads/Icon"; +import { countryToFlag } from "components/designSystems/blueprint/InputComponent/utilties"; +import { ISDCodeOptions, ISDCodeProps } from "constants/ISDCodes"; + +const DropdownTriggerIconWrapper = styled.div<{ disabled?: boolean }>` + padding: 9px 0px 9px 12px; + width: 85px; + min-width: 85px; + opacity: ${(props) => props.disabled && "0.6"}; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; + height: ${(props) => (props.disabled ? 32 : 19)}px; + line-height: ${(props) => (props.disabled ? 32 : 19)}px; + letter-spacing: -0.24px; + color: #090707; + position: ${(props) => props.disabled && "absolute"}; + .code { + margin-right: 4px; + pointer-events: none; + } + .icon-dropdown { + display: flex; + width: 30px; + justify-content: space-between; + } +`; + +const getISDCodeOptions = (): Array => { + return ISDCodeOptions.map((item: ISDCodeProps) => { + return { + leftElement: countryToFlag(item.code), + searchText: item.name, + label: `${item.name} (${item.dial_code})`, + value: item.code, + id: item.dial_code, + }; + }); +}; + +export const ISDCodeDropdownOptions = getISDCodeOptions(); + +export const getSelectedISDCode = (code?: string): DropdownOption => { + let selectedCountry: ISDCodeProps | undefined = code + ? ISDCodeOptions.find((item: ISDCodeProps) => { + return item.code === code; + }) + : undefined; + if (!selectedCountry) { + selectedCountry = { + name: "United States", + dial_code: "+1", + code: "US", + }; + } + return { + label: `${selectedCountry.name} (${selectedCountry.dial_code})`, + searchText: selectedCountry.name, + value: selectedCountry.code, + id: selectedCountry.dial_code, + }; +}; + +interface ISDCodeDropdownProps { + onISDCodeChange: (code?: string) => void; + options: Array; + selected: DropdownOption; + allowCountryCodeChange?: boolean; + disabled: boolean; +} + +export default function ISDCodeDropdown(props: ISDCodeDropdownProps) { + const selectedCountry = getSelectedISDCode(props.selected.value); + const dropdownTrigger = ( + +
+ {selectedCountry.value && countryToFlag(selectedCountry.value)} + +
+
{selectedCountry.id && selectedCountry.id}
+ + ); + if (props.disabled) { + return dropdownTrigger; + } + return ( + + ); +} diff --git a/app/client/src/components/designSystems/blueprint/InputComponent.tsx b/app/client/src/components/designSystems/blueprint/InputComponent/index.tsx similarity index 76% rename from app/client/src/components/designSystems/blueprint/InputComponent.tsx rename to app/client/src/components/designSystems/blueprint/InputComponent/index.tsx index c4a846937bb0..875a4678fca1 100644 --- a/app/client/src/components/designSystems/blueprint/InputComponent.tsx +++ b/app/client/src/components/designSystems/blueprint/InputComponent/index.tsx @@ -36,9 +36,14 @@ import { createMessage, INPUT_WIDGET_DEFAULT_VALIDATION_ERROR, } from "constants/messages"; -import Dropdown, { DropdownOption } from "components/ads/Dropdown"; -import { CurrencyTypeOptions, CurrencyOptionProps } from "constants/Currency"; -import Icon, { IconSize } from "components/ads/Icon"; +import CurrencyTypeDropdown, { + CurrencyDropdownOptions, + getSelectedCurrency, +} from "components/ads/CurrencyCodeDropdown"; +import ISDCodeDropdown, { + ISDCodeDropdownOptions, + getSelectedISDCode, +} from "components/ads/ISDCodeDropdown"; /** * All design system component specific logic goes here. * Ex. Blueprint has a separate numeric input and text input so switching between them goes here @@ -53,11 +58,13 @@ const InputComponentWrapper = styled((props) => ( multiline: string; hasError: boolean; allowCurrencyChange?: boolean; + disabled?: boolean; inputType: InputType; }>` flex-direction: ${(props) => (props.compactMode ? "row" : "column")}; &&&& { - .currency-type-filter { + .currency-type-filter, + .country-type-filter { width: 40px; height: 32px; position: absolute; @@ -81,6 +88,8 @@ const InputComponentWrapper = styled((props) => ( !props.allowCurrencyChange && ` padding-left: 35px;`}; + ${(props) => + props.inputType === InputTypes.PHONE_NUMBER && `padding-left: 85px;`}; box-shadow: none; border: 1px solid; border-color: ${({ hasError }) => @@ -171,116 +180,14 @@ const TextInputWrapper = styled.div` flex: 1; `; -const DropdownTriggerIconWrapper = styled.div` - height: 19px; - padding: 9px 5px 9px 12px; - width: 40px; - height: 19px; - display: flex; - align-items: center; - justify-content: space-between; - font-size: 14px; - line-height: 19px; - letter-spacing: -0.24px; - color: #090707; -`; - -const CurrencyIconWrapper = styled.span` - height: 100%; - padding: 6px 4px 6px 12px; - width: 28px; - position: absolute; - left: 0; - z-index: 16; - font-size: 14px; - line-height: 19px; - letter-spacing: -0.24px; - color: #090707; -`; - -interface CurrencyDropdownProps { - onCurrencyTypeChange: (code?: string) => void; - options: Array; - selected: DropdownOption; - allowCurrencyChange?: boolean; -} - -function CurrencyTypeDropdown(props: CurrencyDropdownProps) { - if (!props.allowCurrencyChange) { - return ( - - {getSelectedItem(props.selected.value).id} - - ); - } - const dropdownTriggerIcon = ( - - {getSelectedItem(props.selected.value).id} - - - ); +export const isNumberInputType = (inputType: InputType) => { return ( - + inputType === "INTEGER" || + inputType === "NUMBER" || + inputType === "CURRENCY" || + inputType === "PHONE_NUMBER" ); -} - -const getSelectedItem = (currencyCountryCode?: string): DropdownOption => { - let selectedCurrency: CurrencyOptionProps | undefined = currencyCountryCode - ? CurrencyTypeOptions.find((item: CurrencyOptionProps) => { - return item.code === currencyCountryCode; - }) - : undefined; - if (!selectedCurrency) { - selectedCurrency = { - code: "US", - currency: "USD", - currency_name: "US Dollar", - label: "United States", - phone: "1", - symbol_native: "$", - }; - } - return { - label: `${selectedCurrency.currency} - ${selectedCurrency.currency_name}`, - searchText: selectedCurrency.label, - value: selectedCurrency.code, - id: selectedCurrency.symbol_native, - }; }; - -const countryToFlag = (isoCode: string) => { - return typeof String.fromCodePoint !== "undefined" - ? isoCode - .toUpperCase() - .replace(/./g, (char) => - String.fromCodePoint(char.charCodeAt(0) + 127397), - ) - : isoCode; -}; - -export const getCurrencyOptions = (): Array => { - return CurrencyTypeOptions.map((item: CurrencyOptionProps) => { - return { - leftElement: countryToFlag(item.code), - searchText: item.label, - label: `${item.currency} - ${item.currency_name}`, - value: item.code, - id: item.symbol_native, - }; - }); -}; - class InputComponent extends React.Component< InputComponentProps, InputComponentState @@ -334,18 +241,39 @@ class InputComponent extends React.Component< } }; - isNumberInputType(inputType: InputType) { - return ( - inputType === "INTEGER" || - inputType === "NUMBER" || - inputType === "CURRENCY" - ); - } + getLeftIcon = (inputType: InputType, disabled: boolean) => { + if (inputType === InputTypes.PHONE_NUMBER) { + const selectedISDCode = getSelectedISDCode( + this.props.phoneNumberCountryCode, + ); + return ( + + ); + } else if (inputType === InputTypes.CURRENCY) { + const selectedCurrencyCountryCode = getSelectedCurrency( + this.props.currencyCountryCode, + ); + return ( + + ); + } else if (this.props.iconName && this.props.iconAlign === "left") { + return this.props.iconName; + } + return this.props.leftIcon; + }; getIcon(inputType: InputType) { switch (inputType) { - case "PHONE_NUMBER": - return "phone"; case "SEARCH": return "search"; case "EMAIL": @@ -384,6 +312,10 @@ class InputComponent extends React.Component< }; private numericInputComponent = () => { + const leftIcon = this.getLeftIcon( + this.props.inputType, + !!this.props.disabled, + ); const minorStepSize = this.props.inputType === InputTypes.CURRENCY ? this.props.decimalsInCurrency || 0 @@ -394,25 +326,14 @@ class InputComponent extends React.Component< className={this.props.isLoading ? "bp3-skeleton" : Classes.FILL} disabled={this.props.disabled} intent={this.props.intent} - leftIcon={ - this.props.inputType === "PHONE_NUMBER" ? ( - "phone" - ) : this.props.inputType === InputTypes.CURRENCY ? ( - - ) : this.props.iconName && this.props.iconAlign === "left" ? ( - this.props.iconName - ) : ( - undefined - ) - } + leftIcon={leftIcon} max={this.props.maxNum} maxLength={this.props.maxChars} - min={this.props.minNum} + min={ + this.props.inputType === InputTypes.PHONE_NUMBER + ? 0 + : this.props.minNum + } minorStepSize={ minorStepSize === 0 ? undefined : Math.pow(10, -1 * minorStepSize) } @@ -422,7 +343,6 @@ class InputComponent extends React.Component< onValueChange={this.onNumberChange} placeholder={this.props.placeholder} stepSize={minorStepSize === 0 ? this.props.stepSize : undefined} - type={this.props.inputType === "PHONE_NUMBER" ? "tel" : undefined} value={this.props.value} /> ); @@ -484,7 +404,7 @@ class InputComponent extends React.Component< /> ); private renderInputComponent = (inputType: InputType, isTextArea: boolean) => - this.isNumberInputType(inputType) + isNumberInputType(inputType) ? this.numericInputComponent() : this.textInputComponent(isTextArea); @@ -502,6 +422,7 @@ class InputComponent extends React.Component< {showLabelHeader && ( void; onCurrencyTypeChange: (code?: string) => void; + onISDCodeChange: (code?: string) => void; stepSize?: number; placeholder?: string; isLoading: boolean; diff --git a/app/client/src/components/designSystems/blueprint/InputComponent/utilties.tsx b/app/client/src/components/designSystems/blueprint/InputComponent/utilties.tsx new file mode 100644 index 000000000000..27a117e5f558 --- /dev/null +++ b/app/client/src/components/designSystems/blueprint/InputComponent/utilties.tsx @@ -0,0 +1,9 @@ +export const countryToFlag = (isoCode: string) => { + return typeof String.fromCodePoint !== "undefined" + ? isoCode + .toUpperCase() + .replace(/./g, (char) => + String.fromCodePoint(char.charCodeAt(0) + 127397), + ) + : isoCode; +}; diff --git a/app/client/src/components/editorComponents/HighlightedCode/themes.ts b/app/client/src/components/editorComponents/HighlightedCode/themes.ts index 087532058825..dad721c47410 100644 --- a/app/client/src/components/editorComponents/HighlightedCode/themes.ts +++ b/app/client/src/components/editorComponents/HighlightedCode/themes.ts @@ -11,7 +11,7 @@ export const LIGHT = css` text-align: left; white-space: pre; word-spacing: normal; - word-break: normal; + word-break: break-word; word-wrap: normal; line-height: 1.5; diff --git a/app/client/src/constants/Currency.tsx b/app/client/src/constants/Currency.tsx index 6a8cbae061b6..04ea4d199cde 100644 --- a/app/client/src/constants/Currency.tsx +++ b/app/client/src/constants/Currency.tsx @@ -1,4 +1,3 @@ -// 20210608001520 // https://gist.githubusercontent.com/somangshu/93c83900714d14fe86502be6c48738c7/raw/5ebdc149d599f5661d2c87c59f23d6889cc93129/country.json export interface CurrencyOptionProps { @@ -35,22 +34,6 @@ export const CurrencyTypeOptions: Array = [ phone: "93", symbol_native: "؋", }, - // { - // code: "AG", - // currency: "XCD", - // currency_name: null, - // label: "Antigua and Barbuda", - // phone: "1-268", - // symbol_native: null, - // }, - // { - // code: "AI", - // currency: "XCD", - // currency_name: null, - // label: "Anguilla", - // phone: "1-264", - // symbol_native: null, - // }, { code: "AL", currency: "ALL", @@ -67,22 +50,6 @@ export const CurrencyTypeOptions: Array = [ phone: "374", symbol_native: "դր.", }, - // { - // code: "AO", - // currency: "AOA", - // currency_name: null, - // label: "Angola", - // phone: "244", - // symbol_native: null, - // }, - // { - // code: "AQ", - // currency: "", - // currency_name: null, - // label: "Antarctica", - // phone: "672", - // symbol_native: null, - // }, { code: "AR", currency: "ARS", @@ -115,14 +82,6 @@ export const CurrencyTypeOptions: Array = [ phone: "61", symbol_native: "$", }, - // { - // code: "AW", - // currency: "AWG", - // currency_name: null, - // label: "Aruba", - // phone: "297", - // symbol_native: null, - // }, { code: "AX", currency: "EUR", @@ -147,14 +106,6 @@ export const CurrencyTypeOptions: Array = [ phone: "387", symbol_native: "KM", }, - // { - // code: "BB", - // currency: "BBD", - // currency_name: null, - // label: "Barbados", - // phone: "1-246", - // symbol_native: null, - // }, { code: "BD", currency: "BDT", @@ -219,14 +170,6 @@ export const CurrencyTypeOptions: Array = [ phone: "590", symbol_native: "€", }, - // { - // code: "BM", - // currency: "BMD", - // currency_name: null, - // label: "Bermuda", - // phone: "1-441", - // symbol_native: null, - // }, { code: "BN", currency: "BND", @@ -251,22 +194,6 @@ export const CurrencyTypeOptions: Array = [ phone: "55", symbol_native: "R$", }, - // { - // code: "BS", - // currency: "BSD", - // currency_name: null, - // label: "Bahamas", - // phone: "1-242", - // symbol_native: null, - // }, - // { - // code: "BT", - // currency: "BTN", - // currency_name: null, - // label: "Bhutan", - // phone: "975", - // symbol_native: null, - // }, { code: "BV", currency: "NOK", @@ -403,14 +330,6 @@ export const CurrencyTypeOptions: Array = [ phone: "506", symbol_native: "₡", }, - // { - // code: "CU", - // currency: "CUP", - // currency_name: null, - // label: "Cuba", - // phone: "53", - // symbol_native: null, - // }, { code: "CV", currency: "CVE", @@ -419,14 +338,6 @@ export const CurrencyTypeOptions: Array = [ phone: "238", symbol_native: "CV$", }, - // { - // code: "CW", - // currency: "ANG", - // currency_name: null, - // label: "Curacao", - // phone: "599", - // symbol_native: null, - // }, { code: "CX", currency: "AUD", @@ -475,14 +386,6 @@ export const CurrencyTypeOptions: Array = [ phone: "45", symbol_native: "kr", }, - // { - // code: "DM", - // currency: "XCD", - // currency_name: null, - // label: "Dominica", - // phone: "1-767", - // symbol_native: null, - // }, { code: "DO", currency: "DOP", @@ -563,22 +466,6 @@ export const CurrencyTypeOptions: Array = [ phone: "358", symbol_native: "€", }, - // { - // code: "FJ", - // currency: "FJD", - // currency_name: null, - // label: "Fiji", - // phone: "679", - // symbol_native: null, - // }, - // { - // code: "FK", - // currency: "FKP", - // currency_name: null, - // label: "Falkland Islands (Malvinas)", - // phone: "500", - // symbol_native: null, - // }, { code: "FM", currency: "USD", @@ -619,14 +506,6 @@ export const CurrencyTypeOptions: Array = [ phone: "44", symbol_native: "£", }, - // { - // code: "GD", - // currency: "XCD", - // currency_name: null, - // label: "Grenada", - // phone: "1-473", - // symbol_native: null, - // }, { code: "GE", currency: "GEL", @@ -659,14 +538,6 @@ export const CurrencyTypeOptions: Array = [ phone: "233", symbol_native: "GH₵", }, - // { - // code: "GI", - // currency: "GIP", - // currency_name: null, - // label: "Gibraltar", - // phone: "350", - // symbol_native: null, - // }, { code: "GL", currency: "DKK", @@ -675,14 +546,6 @@ export const CurrencyTypeOptions: Array = [ phone: "299", symbol_native: "kr", }, - // { - // code: "GM", - // currency: "GMD", - // currency_name: null, - // label: "Gambia", - // phone: "220", - // symbol_native: null, - // }, { code: "GN", currency: "GNF", @@ -747,14 +610,6 @@ export const CurrencyTypeOptions: Array = [ phone: "245", symbol_native: "CFA", }, - // { - // code: "GY", - // currency: "GYD", - // currency_name: null, - // label: "Guyana", - // phone: "592", - // symbol_native: null, - // }, { code: "HK", currency: "HKD", @@ -787,14 +642,6 @@ export const CurrencyTypeOptions: Array = [ phone: "385", symbol_native: "kn", }, - // { - // code: "HT", - // currency: "HTG", - // currency_name: null, - // label: "Haiti", - // phone: "509", - // symbol_native: null, - // }, { code: "HU", currency: "HUF", @@ -923,14 +770,6 @@ export const CurrencyTypeOptions: Array = [ phone: "254", symbol_native: "Ksh", }, - // { - // code: "KG", - // currency: "KGS", - // currency_name: null, - // label: "Kyrgyzstan", - // phone: "996", - // symbol_native: null, - // }, { code: "KH", currency: "KHR", @@ -955,22 +794,6 @@ export const CurrencyTypeOptions: Array = [ phone: "269", symbol_native: "FC", }, - // { - // code: "KN", - // currency: "XCD", - // currency_name: null, - // label: "Saint Kitts and Nevis", - // phone: "1-869", - // symbol_native: null, - // }, - // { - // code: "KP", - // currency: "KPW", - // currency_name: null, - // label: "Korea, Democratic People's Republic of", - // phone: "850", - // symbol_native: null, - // }, { code: "KR", currency: "KRW", @@ -987,14 +810,6 @@ export const CurrencyTypeOptions: Array = [ phone: "965", symbol_native: "د.ك.‏", }, - // { - // code: "KY", - // currency: "KYD", - // currency_name: null, - // label: "Cayman Islands", - // phone: "1-345", - // symbol_native: null, - // }, { code: "KZ", currency: "KZT", @@ -1003,14 +818,6 @@ export const CurrencyTypeOptions: Array = [ phone: "7", symbol_native: "тңг.", }, - // { - // code: "LA", - // currency: "LAK", - // currency_name: null, - // label: "Lao People's Democratic Republic", - // phone: "856", - // symbol_native: null, - // }, { code: "LB", currency: "LBP", @@ -1019,14 +826,6 @@ export const CurrencyTypeOptions: Array = [ phone: "961", symbol_native: "ل.ل.‏", }, - // { - // code: "LC", - // currency: "XCD", - // currency_name: null, - // label: "Saint Lucia", - // phone: "1-758", - // symbol_native: null, - // }, { code: "LI", currency: "CHF", @@ -1043,22 +842,6 @@ export const CurrencyTypeOptions: Array = [ phone: "94", symbol_native: "SL Re", }, - // { - // code: "LR", - // currency: "LRD", - // currency_name: null, - // label: "Liberia", - // phone: "231", - // symbol_native: null, - // }, - // { - // code: "LS", - // currency: "LSL", - // currency_name: null, - // label: "Lesotho", - // phone: "266", - // symbol_native: null, - // }, { code: "LT", currency: "LTL", @@ -1171,14 +954,6 @@ export const CurrencyTypeOptions: Array = [ phone: "95", symbol_native: "K", }, - // { - // code: "MN", - // currency: "MNT", - // currency_name: null, - // label: "Mongolia", - // phone: "976", - // symbol_native: null, - // }, { code: "MO", currency: "MOP", @@ -1203,22 +978,6 @@ export const CurrencyTypeOptions: Array = [ phone: "596", symbol_native: "€", }, - // { - // code: "MR", - // currency: "MRO", - // currency_name: null, - // label: "Mauritania", - // phone: "222", - // symbol_native: null, - // }, - // { - // code: "MS", - // currency: "XCD", - // currency_name: null, - // label: "Montserrat", - // phone: "1-664", - // symbol_native: null, - // }, { code: "MT", currency: "EUR", @@ -1235,22 +994,6 @@ export const CurrencyTypeOptions: Array = [ phone: "230", symbol_native: "MURs", }, - // { - // code: "MV", - // currency: "MVR", - // currency_name: null, - // label: "Maldives", - // phone: "960", - // symbol_native: null, - // }, - // { - // code: "MW", - // currency: "MWK", - // currency_name: null, - // label: "Malawi", - // phone: "265", - // symbol_native: null, - // }, { code: "MX", currency: "MXN", @@ -1283,14 +1026,6 @@ export const CurrencyTypeOptions: Array = [ phone: "264", symbol_native: "N$", }, - // { - // code: "NC", - // currency: "XPF", - // currency_name: null, - // label: "New Caledonia", - // phone: "687", - // symbol_native: null, - // }, { code: "NE", currency: "XOF", @@ -1395,22 +1130,6 @@ export const CurrencyTypeOptions: Array = [ phone: "51", symbol_native: "S/.", }, - // { - // code: "PF", - // currency: "XPF", - // currency_name: null, - // label: "French Polynesia", - // phone: "689", - // symbol_native: null, - // }, - // { - // code: "PG", - // currency: "PGK", - // currency_name: null, - // label: "Papua New Guinea", - // phone: "675", - // symbol_native: null, - // }, { code: "PH", currency: "PHP", @@ -1547,22 +1266,6 @@ export const CurrencyTypeOptions: Array = [ phone: "966", symbol_native: "ر.س.‏", }, - // { - // code: "SB", - // currency: "SBD", - // currency_name: null, - // label: "Solomon Islands", - // phone: "677", - // symbol_native: null, - // }, - // { - // code: "SC", - // currency: "SCR", - // currency_name: null, - // label: "Seychelles", - // phone: "248", - // symbol_native: null, - // }, { code: "SD", currency: "SDG", @@ -1587,14 +1290,6 @@ export const CurrencyTypeOptions: Array = [ phone: "65", symbol_native: "$", }, - // { - // code: "SH", - // currency: "SHP", - // currency_name: null, - // label: "Saint Helena", - // phone: "290", - // symbol_native: null, - // }, { code: "SI", currency: "EUR", @@ -1619,14 +1314,6 @@ export const CurrencyTypeOptions: Array = [ phone: "421", symbol_native: "€", }, - // { - // code: "SL", - // currency: "SLL", - // currency_name: null, - // label: "Sierra Leone", - // phone: "232", - // symbol_native: null, - // }, { code: "SM", currency: "EUR", @@ -1651,30 +1338,6 @@ export const CurrencyTypeOptions: Array = [ phone: "252", symbol_native: "Ssh", }, - // { - // code: "SR", - // currency: "SRD", - // currency_name: null, - // label: "Suriname", - // phone: "597", - // symbol_native: null, - // }, - // { - // code: "SS", - // currency: "SSP", - // currency_name: null, - // label: "South Sudan", - // phone: "211", - // symbol_native: null, - // }, - // { - // code: "ST", - // currency: "STD", - // currency_name: null, - // label: "Sao Tome and Principe", - // phone: "239", - // symbol_native: null, - // }, { code: "SV", currency: "USD", @@ -1683,14 +1346,6 @@ export const CurrencyTypeOptions: Array = [ phone: "503", symbol_native: "$", }, - // { - // code: "SX", - // currency: "ANG", - // currency_name: null, - // label: "Sint Maarten (Dutch part)", - // phone: "1-721", - // symbol_native: null, - // }, { code: "SY", currency: "SYP", @@ -1699,14 +1354,6 @@ export const CurrencyTypeOptions: Array = [ phone: "963", symbol_native: "ل.س.‏", }, - // { - // code: "SZ", - // currency: "SZL", - // currency_name: null, - // label: "Swaziland", - // phone: "268", - // symbol_native: null, - // }, { code: "TC", currency: "USD", @@ -1747,14 +1394,6 @@ export const CurrencyTypeOptions: Array = [ phone: "66", symbol_native: "฿", }, - // { - // code: "TJ", - // currency: "TJS", - // currency_name: null, - // label: "Tajikistan", - // phone: "992", - // symbol_native: null, - // }, { code: "TK", currency: "NZD", @@ -1771,14 +1410,6 @@ export const CurrencyTypeOptions: Array = [ phone: "670", symbol_native: "$", }, - // { - // code: "TM", - // currency: "TMT", - // currency_name: null, - // label: "Turkmenistan", - // phone: "993", - // symbol_native: null, - // }, { code: "TN", currency: "TND", @@ -1883,14 +1514,6 @@ export const CurrencyTypeOptions: Array = [ phone: "379", symbol_native: "€", }, - // { - // code: "VC", - // currency: "XCD", - // currency_name: null, - // label: "Saint Vincent and the Grenadines", - // phone: "1-784", - // symbol_native: null, - // }, { code: "VE", currency: "VEF", @@ -1923,30 +1546,6 @@ export const CurrencyTypeOptions: Array = [ phone: "84", symbol_native: "₫", }, - // { - // code: "VU", - // currency: "VUV", - // currency_name: null, - // label: "Vanuatu", - // phone: "678", - // symbol_native: null, - // }, - // { - // code: "WF", - // currency: "XPF", - // currency_name: null, - // label: "Wallis and Futuna", - // phone: "681", - // symbol_native: null, - // }, - // { - // code: "WS", - // currency: "WST", - // currency_name: null, - // label: "Samoa", - // phone: "685", - // symbol_native: null, - // }, { code: "XK", currency: "EUR", @@ -1987,12 +1586,4 @@ export const CurrencyTypeOptions: Array = [ phone: "260", symbol_native: "ZK", }, - // { - // code: "ZW", - // currency: "ZWL", - // currency_name: null, - // label: "Zimbabwe", - // phone: "263", - // symbol_native: null, - // }, ]; diff --git a/app/client/src/constants/ISDCodes.tsx b/app/client/src/constants/ISDCodes.tsx new file mode 100644 index 000000000000..6b9ce17b5b1b --- /dev/null +++ b/app/client/src/constants/ISDCodes.tsx @@ -0,0 +1,1218 @@ +export interface ISDCodeProps { + code: string; + name: string; + dial_code: string; +} + +export const ISDCodeOptions: Array = [ + { + name: "Afghanistan", + dial_code: "+93", + code: "AF", + }, + { + name: "Aland Islands", + dial_code: "+358", + code: "AX", + }, + { + name: "Albania", + dial_code: "+355", + code: "AL", + }, + { + name: "Algeria", + dial_code: "+213", + code: "DZ", + }, + { + name: "AmericanSamoa", + dial_code: "+1684", + code: "AS", + }, + { + name: "Andorra", + dial_code: "+376", + code: "AD", + }, + { + name: "Angola", + dial_code: "+244", + code: "AO", + }, + { + name: "Anguilla", + dial_code: "+1264", + code: "AI", + }, + { + name: "Antarctica", + dial_code: "+672", + code: "AQ", + }, + { + name: "Antigua and Barbuda", + dial_code: "+1268", + code: "AG", + }, + { + name: "Argentina", + dial_code: "+54", + code: "AR", + }, + { + name: "Armenia", + dial_code: "+374", + code: "AM", + }, + { + name: "Aruba", + dial_code: "+297", + code: "AW", + }, + { + name: "Australia", + dial_code: "+61", + code: "AU", + }, + { + name: "Austria", + dial_code: "+43", + code: "AT", + }, + { + name: "Azerbaijan", + dial_code: "+994", + code: "AZ", + }, + { + name: "Bahamas", + dial_code: "+1242", + code: "BS", + }, + { + name: "Bahrain", + dial_code: "+973", + code: "BH", + }, + { + name: "Bangladesh", + dial_code: "+880", + code: "BD", + }, + { + name: "Barbados", + dial_code: "+1246", + code: "BB", + }, + { + name: "Belarus", + dial_code: "+375", + code: "BY", + }, + { + name: "Belgium", + dial_code: "+32", + code: "BE", + }, + { + name: "Belize", + dial_code: "+501", + code: "BZ", + }, + { + name: "Benin", + dial_code: "+229", + code: "BJ", + }, + { + name: "Bermuda", + dial_code: "+1441", + code: "BM", + }, + { + name: "Bhutan", + dial_code: "+975", + code: "BT", + }, + { + name: "Bolivia, Plurinational State of", + dial_code: "+591", + code: "BO", + }, + { + name: "Bosnia and Herzegovina", + dial_code: "+387", + code: "BA", + }, + { + name: "Botswana", + dial_code: "+267", + code: "BW", + }, + { + name: "Brazil", + dial_code: "+55", + code: "BR", + }, + { + name: "British Indian Ocean Territory", + dial_code: "+246", + code: "IO", + }, + { + name: "Brunei Darussalam", + dial_code: "+673", + code: "BN", + }, + { + name: "Bulgaria", + dial_code: "+359", + code: "BG", + }, + { + name: "Burkina Faso", + dial_code: "+226", + code: "BF", + }, + { + name: "Burundi", + dial_code: "+257", + code: "BI", + }, + { + name: "Cambodia", + dial_code: "+855", + code: "KH", + }, + { + name: "Cameroon", + dial_code: "+237", + code: "CM", + }, + { + name: "Canada", + dial_code: "+1", + code: "CA", + }, + { + name: "Cape Verde", + dial_code: "+238", + code: "CV", + }, + { + name: "Cayman Islands", + dial_code: "+ 345", + code: "KY", + }, + { + name: "Central African Republic", + dial_code: "+236", + code: "CF", + }, + { + name: "Chad", + dial_code: "+235", + code: "TD", + }, + { + name: "Chile", + dial_code: "+56", + code: "CL", + }, + { + name: "China", + dial_code: "+86", + code: "CN", + }, + { + name: "Christmas Island", + dial_code: "+61", + code: "CX", + }, + { + name: "Cocos (Keeling) Islands", + dial_code: "+61", + code: "CC", + }, + { + name: "Colombia", + dial_code: "+57", + code: "CO", + }, + { + name: "Comoros", + dial_code: "+269", + code: "KM", + }, + { + name: "Congo", + dial_code: "+242", + code: "CG", + }, + { + name: "Congo, The Democratic Republic of the Congo", + dial_code: "+243", + code: "CD", + }, + { + name: "Cook Islands", + dial_code: "+682", + code: "CK", + }, + { + name: "Costa Rica", + dial_code: "+506", + code: "CR", + }, + { + name: "Cote d'Ivoire", + dial_code: "+225", + code: "CI", + }, + { + name: "Croatia", + dial_code: "+385", + code: "HR", + }, + { + name: "Cuba", + dial_code: "+53", + code: "CU", + }, + { + name: "Cyprus", + dial_code: "+357", + code: "CY", + }, + { + name: "Czech Republic", + dial_code: "+420", + code: "CZ", + }, + { + name: "Denmark", + dial_code: "+45", + code: "DK", + }, + { + name: "Djibouti", + dial_code: "+253", + code: "DJ", + }, + { + name: "Dominica", + dial_code: "+1767", + code: "DM", + }, + { + name: "Dominican Republic", + dial_code: "+1849", + code: "DO", + }, + { + name: "Ecuador", + dial_code: "+593", + code: "EC", + }, + { + name: "Egypt", + dial_code: "+20", + code: "EG", + }, + { + name: "El Salvador", + dial_code: "+503", + code: "SV", + }, + { + name: "Equatorial Guinea", + dial_code: "+240", + code: "GQ", + }, + { + name: "Eritrea", + dial_code: "+291", + code: "ER", + }, + { + name: "Estonia", + dial_code: "+372", + code: "EE", + }, + { + name: "Ethiopia", + dial_code: "+251", + code: "ET", + }, + { + name: "Falkland Islands (Malvinas)", + dial_code: "+500", + code: "FK", + }, + { + name: "Faroe Islands", + dial_code: "+298", + code: "FO", + }, + { + name: "Fiji", + dial_code: "+679", + code: "FJ", + }, + { + name: "Finland", + dial_code: "+358", + code: "FI", + }, + { + name: "France", + dial_code: "+33", + code: "FR", + }, + { + name: "French Guiana", + dial_code: "+594", + code: "GF", + }, + { + name: "French Polynesia", + dial_code: "+689", + code: "PF", + }, + { + name: "Gabon", + dial_code: "+241", + code: "GA", + }, + { + name: "Gambia", + dial_code: "+220", + code: "GM", + }, + { + name: "Georgia", + dial_code: "+995", + code: "GE", + }, + { + name: "Germany", + dial_code: "+49", + code: "DE", + }, + { + name: "Ghana", + dial_code: "+233", + code: "GH", + }, + { + name: "Gibraltar", + dial_code: "+350", + code: "GI", + }, + { + name: "Greece", + dial_code: "+30", + code: "GR", + }, + { + name: "Greenland", + dial_code: "+299", + code: "GL", + }, + { + name: "Grenada", + dial_code: "+1473", + code: "GD", + }, + { + name: "Guadeloupe", + dial_code: "+590", + code: "GP", + }, + { + name: "Guam", + dial_code: "+1671", + code: "GU", + }, + { + name: "Guatemala", + dial_code: "+502", + code: "GT", + }, + { + name: "Guernsey", + dial_code: "+44", + code: "GG", + }, + { + name: "Guinea", + dial_code: "+224", + code: "GN", + }, + { + name: "Guinea-Bissau", + dial_code: "+245", + code: "GW", + }, + { + name: "Guyana", + dial_code: "+595", + code: "GY", + }, + { + name: "Haiti", + dial_code: "+509", + code: "HT", + }, + { + name: "Holy See (Vatican City State)", + dial_code: "+379", + code: "VA", + }, + { + name: "Honduras", + dial_code: "+504", + code: "HN", + }, + { + name: "Hong Kong", + dial_code: "+852", + code: "HK", + }, + { + name: "Hungary", + dial_code: "+36", + code: "HU", + }, + { + name: "Iceland", + dial_code: "+354", + code: "IS", + }, + { + name: "India", + dial_code: "+91", + code: "IN", + }, + { + name: "Indonesia", + dial_code: "+62", + code: "ID", + }, + { + name: "Iran, Islamic Republic of Persian Gulf", + dial_code: "+98", + code: "IR", + }, + { + name: "Iraq", + dial_code: "+964", + code: "IQ", + }, + { + name: "Ireland", + dial_code: "+353", + code: "IE", + }, + { + name: "Isle of Man", + dial_code: "+44", + code: "IM", + }, + { + name: "Israel", + dial_code: "+972", + code: "IL", + }, + { + name: "Italy", + dial_code: "+39", + code: "IT", + }, + { + name: "Jamaica", + dial_code: "+1876", + code: "JM", + }, + { + name: "Japan", + dial_code: "+81", + code: "JP", + }, + { + name: "Jersey", + dial_code: "+44", + code: "JE", + }, + { + name: "Jordan", + dial_code: "+962", + code: "JO", + }, + { + name: "Kazakhstan", + dial_code: "+77", + code: "KZ", + }, + { + name: "Kenya", + dial_code: "+254", + code: "KE", + }, + { + name: "Kiribati", + dial_code: "+686", + code: "KI", + }, + { + name: "Korea, Democratic People's Republic of Korea", + dial_code: "+850", + code: "KP", + }, + { + name: "Korea, Republic of South Korea", + dial_code: "+82", + code: "KR", + }, + { + name: "Kuwait", + dial_code: "+965", + code: "KW", + }, + { + name: "Kyrgyzstan", + dial_code: "+996", + code: "KG", + }, + { + name: "Laos", + dial_code: "+856", + code: "LA", + }, + { + name: "Latvia", + dial_code: "+371", + code: "LV", + }, + { + name: "Lebanon", + dial_code: "+961", + code: "LB", + }, + { + name: "Lesotho", + dial_code: "+266", + code: "LS", + }, + { + name: "Liberia", + dial_code: "+231", + code: "LR", + }, + { + name: "Libyan Arab Jamahiriya", + dial_code: "+218", + code: "LY", + }, + { + name: "Liechtenstein", + dial_code: "+423", + code: "LI", + }, + { + name: "Lithuania", + dial_code: "+370", + code: "LT", + }, + { + name: "Luxembourg", + dial_code: "+352", + code: "LU", + }, + { + name: "Macao", + dial_code: "+853", + code: "MO", + }, + { + name: "Macedonia", + dial_code: "+389", + code: "MK", + }, + { + name: "Madagascar", + dial_code: "+261", + code: "MG", + }, + { + name: "Malawi", + dial_code: "+265", + code: "MW", + }, + { + name: "Malaysia", + dial_code: "+60", + code: "MY", + }, + { + name: "Maldives", + dial_code: "+960", + code: "MV", + }, + { + name: "Mali", + dial_code: "+223", + code: "ML", + }, + { + name: "Malta", + dial_code: "+356", + code: "MT", + }, + { + name: "Marshall Islands", + dial_code: "+692", + code: "MH", + }, + { + name: "Martinique", + dial_code: "+596", + code: "MQ", + }, + { + name: "Mauritania", + dial_code: "+222", + code: "MR", + }, + { + name: "Mauritius", + dial_code: "+230", + code: "MU", + }, + { + name: "Mayotte", + dial_code: "+262", + code: "YT", + }, + { + name: "Mexico", + dial_code: "+52", + code: "MX", + }, + { + name: "Micronesia, Federated States of Micronesia", + dial_code: "+691", + code: "FM", + }, + { + name: "Moldova", + dial_code: "+373", + code: "MD", + }, + { + name: "Monaco", + dial_code: "+377", + code: "MC", + }, + { + name: "Mongolia", + dial_code: "+976", + code: "MN", + }, + { + name: "Montenegro", + dial_code: "+382", + code: "ME", + }, + { + name: "Montserrat", + dial_code: "+1664", + code: "MS", + }, + { + name: "Morocco", + dial_code: "+212", + code: "MA", + }, + { + name: "Mozambique", + dial_code: "+258", + code: "MZ", + }, + { + name: "Myanmar", + dial_code: "+95", + code: "MM", + }, + { + name: "Namibia", + dial_code: "+264", + code: "NA", + }, + { + name: "Nauru", + dial_code: "+674", + code: "NR", + }, + { + name: "Nepal", + dial_code: "+977", + code: "NP", + }, + { + name: "Netherlands", + dial_code: "+31", + code: "NL", + }, + { + name: "Netherlands Antilles", + dial_code: "+599", + code: "AN", + }, + { + name: "New Caledonia", + dial_code: "+687", + code: "NC", + }, + { + name: "New Zealand", + dial_code: "+64", + code: "NZ", + }, + { + name: "Nicaragua", + dial_code: "+505", + code: "NI", + }, + { + name: "Niger", + dial_code: "+227", + code: "NE", + }, + { + name: "Nigeria", + dial_code: "+234", + code: "NG", + }, + { + name: "Niue", + dial_code: "+683", + code: "NU", + }, + { + name: "Norfolk Island", + dial_code: "+672", + code: "NF", + }, + { + name: "Northern Mariana Islands", + dial_code: "+1670", + code: "MP", + }, + { + name: "Norway", + dial_code: "+47", + code: "NO", + }, + { + name: "Oman", + dial_code: "+968", + code: "OM", + }, + { + name: "Pakistan", + dial_code: "+92", + code: "PK", + }, + { + name: "Palau", + dial_code: "+680", + code: "PW", + }, + { + name: "Palestinian Territory, Occupied", + dial_code: "+970", + code: "PS", + }, + { + name: "Panama", + dial_code: "+507", + code: "PA", + }, + { + name: "Papua New Guinea", + dial_code: "+675", + code: "PG", + }, + { + name: "Paraguay", + dial_code: "+595", + code: "PY", + }, + { + name: "Peru", + dial_code: "+51", + code: "PE", + }, + { + name: "Philippines", + dial_code: "+63", + code: "PH", + }, + { + name: "Pitcairn", + dial_code: "+872", + code: "PN", + }, + { + name: "Poland", + dial_code: "+48", + code: "PL", + }, + { + name: "Portugal", + dial_code: "+351", + code: "PT", + }, + { + name: "Puerto Rico", + dial_code: "+1939", + code: "PR", + }, + { + name: "Qatar", + dial_code: "+974", + code: "QA", + }, + { + name: "Romania", + dial_code: "+40", + code: "RO", + }, + { + name: "Russia", + dial_code: "+7", + code: "RU", + }, + { + name: "Rwanda", + dial_code: "+250", + code: "RW", + }, + { + name: "Reunion", + dial_code: "+262", + code: "RE", + }, + { + name: "Saint Barthelemy", + dial_code: "+590", + code: "BL", + }, + { + name: "Saint Helena, Ascension and Tristan Da Cunha", + dial_code: "+290", + code: "SH", + }, + { + name: "Saint Kitts and Nevis", + dial_code: "+1869", + code: "KN", + }, + { + name: "Saint Lucia", + dial_code: "+1758", + code: "LC", + }, + { + name: "Saint Martin", + dial_code: "+590", + code: "MF", + }, + { + name: "Saint Pierre and Miquelon", + dial_code: "+508", + code: "PM", + }, + { + name: "Saint Vincent and the Grenadines", + dial_code: "+1784", + code: "VC", + }, + { + name: "Samoa", + dial_code: "+685", + code: "WS", + }, + { + name: "San Marino", + dial_code: "+378", + code: "SM", + }, + { + name: "Sao Tome and Principe", + dial_code: "+239", + code: "ST", + }, + { + name: "Saudi Arabia", + dial_code: "+966", + code: "SA", + }, + { + name: "Senegal", + dial_code: "+221", + code: "SN", + }, + { + name: "Serbia", + dial_code: "+381", + code: "RS", + }, + { + name: "Seychelles", + dial_code: "+248", + code: "SC", + }, + { + name: "Sierra Leone", + dial_code: "+232", + code: "SL", + }, + { + name: "Singapore", + dial_code: "+65", + code: "SG", + }, + { + name: "Slovakia", + dial_code: "+421", + code: "SK", + }, + { + name: "Slovenia", + dial_code: "+386", + code: "SI", + }, + { + name: "Solomon Islands", + dial_code: "+677", + code: "SB", + }, + { + name: "Somalia", + dial_code: "+252", + code: "SO", + }, + { + name: "South Africa", + dial_code: "+27", + code: "ZA", + }, + { + name: "South Sudan", + dial_code: "+211", + code: "SS", + }, + { + name: "South Georgia and the South Sandwich Islands", + dial_code: "+500", + code: "GS", + }, + { + name: "Spain", + dial_code: "+34", + code: "ES", + }, + { + name: "Sri Lanka", + dial_code: "+94", + code: "LK", + }, + { + name: "Sudan", + dial_code: "+249", + code: "SD", + }, + { + name: "Suriname", + dial_code: "+597", + code: "SR", + }, + { + name: "Svalbard and Jan Mayen", + dial_code: "+47", + code: "SJ", + }, + { + name: "Swaziland", + dial_code: "+268", + code: "SZ", + }, + { + name: "Sweden", + dial_code: "+46", + code: "SE", + }, + { + name: "Switzerland", + dial_code: "+41", + code: "CH", + }, + { + name: "Syrian Arab Republic", + dial_code: "+963", + code: "SY", + }, + { + name: "Taiwan", + dial_code: "+886", + code: "TW", + }, + { + name: "Tajikistan", + dial_code: "+992", + code: "TJ", + }, + { + name: "Tanzania, United Republic of Tanzania", + dial_code: "+255", + code: "TZ", + }, + { + name: "Thailand", + dial_code: "+66", + code: "TH", + }, + { + name: "Timor-Leste", + dial_code: "+670", + code: "TL", + }, + { + name: "Togo", + dial_code: "+228", + code: "TG", + }, + { + name: "Tokelau", + dial_code: "+690", + code: "TK", + }, + { + name: "Tonga", + dial_code: "+676", + code: "TO", + }, + { + name: "Trinidad and Tobago", + dial_code: "+1868", + code: "TT", + }, + { + name: "Tunisia", + dial_code: "+216", + code: "TN", + }, + { + name: "Turkey", + dial_code: "+90", + code: "TR", + }, + { + name: "Turkmenistan", + dial_code: "+993", + code: "TM", + }, + { + name: "Turks and Caicos Islands", + dial_code: "+1649", + code: "TC", + }, + { + name: "Tuvalu", + dial_code: "+688", + code: "TV", + }, + { + name: "Uganda", + dial_code: "+256", + code: "UG", + }, + { + name: "Ukraine", + dial_code: "+380", + code: "UA", + }, + { + name: "United Arab Emirates", + dial_code: "+971", + code: "AE", + }, + { + name: "United Kingdom", + dial_code: "+44", + code: "GB", + }, + { + name: "United States", + dial_code: "+1", + code: "US", + }, + { + name: "Uruguay", + dial_code: "+598", + code: "UY", + }, + { + name: "Uzbekistan", + dial_code: "+998", + code: "UZ", + }, + { + name: "Vanuatu", + dial_code: "+678", + code: "VU", + }, + { + name: "Venezuela, Bolivarian Republic of Venezuela", + dial_code: "+58", + code: "VE", + }, + { + name: "Vietnam", + dial_code: "+84", + code: "VN", + }, + { + name: "Virgin Islands, British", + dial_code: "+1284", + code: "VG", + }, + { + name: "Virgin Islands, U.S.", + dial_code: "+1340", + code: "VI", + }, + { + name: "Wallis and Futuna", + dial_code: "+681", + code: "WF", + }, + { + name: "Yemen", + dial_code: "+967", + code: "YE", + }, + { + name: "Zambia", + dial_code: "+260", + code: "ZM", + }, + { + name: "Zimbabwe", + dial_code: "+263", + code: "ZW", + }, +]; diff --git a/app/client/src/utils/autocomplete/EntityDefinitions.ts b/app/client/src/utils/autocomplete/EntityDefinitions.ts index 8b21301ca036..9f414542e790 100644 --- a/app/client/src/utils/autocomplete/EntityDefinitions.ts +++ b/app/client/src/utils/autocomplete/EntityDefinitions.ts @@ -53,6 +53,10 @@ export const entityDefinitions = { isValid: "bool", isVisible: isVisible, isDisabled: "bool", + countryCode: { + "!type": "string", + "!doc": "Selected country code for Phone Number type input", + }, currencyCountryCode: { "!type": "string", "!doc": "Selected country code for Currency type input", diff --git a/app/client/src/widgets/InputWidget.tsx b/app/client/src/widgets/InputWidget.tsx index 0d989082da34..3a97927e4ff2 100644 --- a/app/client/src/widgets/InputWidget.tsx +++ b/app/client/src/widgets/InputWidget.tsx @@ -5,13 +5,15 @@ import { IconName } from "@blueprintjs/icons"; import { WidgetType, RenderModes, TextSize } from "constants/WidgetConstants"; import InputComponent, { InputComponentProps, - getCurrencyOptions, } from "components/designSystems/blueprint/InputComponent"; import { EventType, ExecutionResult, } from "constants/AppsmithActionConstants/ActionConstants"; -import { ValidationTypes } from "constants/WidgetValidation"; +import { + ValidationTypes, + ValidationResponse, +} from "constants/WidgetValidation"; import { createMessage, FIELD_REQUIRED_ERROR, @@ -21,6 +23,68 @@ import { DerivedPropertiesMap } from "utils/WidgetFactory"; import * as Sentry from "@sentry/react"; import withMeta, { WithMeta } from "./MetaHOC"; import { GRID_DENSITY_MIGRATION_V1 } from "mockResponses/WidgetConfigResponse"; +import { ISDCodeDropdownOptions } from "components/ads/ISDCodeDropdown"; +import { CurrencyDropdownOptions } from "components/ads/CurrencyCodeDropdown"; +import { AutocompleteDataType } from "utils/autocomplete/TernServer"; + +function defaultValueValidation( + value: unknown, + props: InputWidgetProps, + _?: any, +): ValidationResponse { + const { inputType } = props; + if ( + inputType === "INTEGER" || + inputType === "NUMBER" || + inputType === "CURRENCY" || + inputType === "PHONE_NUMBER" + ) { + if (_.isNil(value) || value === "") { + return { + isValid: true, + parsed: 0, + message: "", + }; + } + if (!Number.isFinite(value) && !_.isString(value)) { + return { + isValid: false, + parsed: 0, + message: "This value must be a number", + }; + } + return { + isValid: true, + parsed: Number(value), + message: "", + }; + } + if (_.isObject(value)) { + return { + isValid: false, + parsed: JSON.stringify(value, null, 2), + message: "This value must be string", + }; + } + let parsed = value; + const isValid = _.isString(parsed); + if (!isValid) { + try { + parsed = _.toString(parsed); + } catch (e) { + return { + isValid: false, + parsed: "", + message: "This value must be string", + }; + } + } + return { + isValid, + parsed: parsed, + message: "", + }; +} class InputWidget extends BaseWidget { constructor(props: InputWidgetProps) { @@ -60,6 +124,10 @@ class InputWidget extends BaseWidget { label: "Currency", value: "CURRENCY", }, + { + label: "Phone Number", + value: "PHONE_NUMBER", + }, ], isBindProperty: false, isTriggerProperty: false, @@ -78,6 +146,22 @@ class InputWidget extends BaseWidget { }, dependencies: ["inputType"], }, + { + helpText: "Changes the country code", + propertyName: "phoneNumberCountryCode", + label: "Default Country Code", + enableSearch: true, + dropdownHeight: "195px", + controlType: "DROP_DOWN", + placeholderText: "Search by code or country name", + options: ISDCodeDropdownOptions, + hidden: (props: InputWidgetProps) => { + return props.inputType !== InputTypes.PHONE_NUMBER; + }, + dependencies: ["inputType"], + isBindProperty: false, + isTriggerProperty: false, + }, { helpText: "Changes the type of currency", propertyName: "currencyCountryCode", @@ -86,7 +170,7 @@ class InputWidget extends BaseWidget { dropdownHeight: "195px", controlType: "DROP_DOWN", placeholderText: "Search by code or name", - options: getCurrencyOptions(), + options: CurrencyDropdownOptions, hidden: (props: InputWidgetProps) => { return props.inputType !== InputTypes.CURRENCY; }, @@ -139,7 +223,18 @@ class InputWidget extends BaseWidget { placeholderText: "Enter default text", isBindProperty: true, isTriggerProperty: false, - validation: { type: ValidationTypes.TEXT }, + validation: { + type: ValidationTypes.FUNCTION, + params: { + fn: defaultValueValidation, + expected: { + type: "string or number", + example: `value1 | 123`, + autocompleteDataType: AutocompleteDataType.STRING, + }, + }, + }, + dependencies: ["inputType"], }, { helpText: "Sets a placeholder text for the input", @@ -336,6 +431,11 @@ class InputWidget extends BaseWidget { }, { sectionName: "Icon Options", + hidden: (props: InputWidgetProps) => { + const { inputType } = props; + return inputType === "CURRENCY" || inputType === "PHONE_NUMBER"; + }, + dependencies: ["inputType"], children: [ { propertyName: "iconName", @@ -420,15 +520,21 @@ class InputWidget extends BaseWidget { const emailRegex = new RegExp(/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/); return emailRegex.test(this.text); } - else if (this.inputType === "NUMBER") { + else if ( + this.inputType === "NUMBER" || + this.inputType === "INTEGER" || + this.inputType === "CURRENCY" || + this.inputType === "PHONE_NUMBER" + ) { + let value = this.text.split(",").join(""); if (parsedRegex) { - return parsedRegex.test(this.text); + return parsedRegex.test(value); } if (this.isRequired) { - return !(this.text === '' || isNaN(this.text)); + return !(value === '' || isNaN(value)); } - return (this.text === '' || !isNaN(this.text || '')); + return (value === '' || !isNaN(value || '')); } else if (this.isRequired) { if(this.text && this.text.length) { @@ -440,7 +546,8 @@ class InputWidget extends BaseWidget { } else { return false; } - } if (parsedRegex) { + } + if (parsedRegex) { return parsedRegex.test(this.text) } else { return true; @@ -463,6 +570,7 @@ class InputWidget extends BaseWidget { isFocused: false, isDirty: false, selectedCurrencyType: undefined, + selectedCountryCode: undefined, }; } @@ -491,6 +599,18 @@ class InputWidget extends BaseWidget { } }; + onISDCodeChange = (code?: string) => { + const countryCode = code; + if (this.props.renderMode === RenderModes.CANVAS) { + super.updateWidgetProperty("phoneNumberCountryCode", countryCode); + } else { + this.props.updateWidgetMetaProperty( + "selectedPhoneNumberCountryCode", + countryCode, + ); + } + }; + handleFocusChange = (focusState: boolean) => { this.props.updateWidgetMetaProperty("isFocused", focusState); }; @@ -530,8 +650,12 @@ class InputWidget extends BaseWidget { const value = this.props.text || ""; let isInvalid = "isValid" in this.props && !this.props.isValid && !!this.props.isDirty; - const currencyCountryCode = - this.props.selectedCurrencyCountryCode ?? this.props.currencyCountryCode; + const currencyCountryCode = this.props.selectedCurrencyCountryCode + ? this.props.selectedCurrencyCountryCode + : this.props.currencyCountryCode; + const phoneNumberCountryCode = this.props.selectedPhoneNumberCountryCode + ? this.props.selectedPhoneNumberCountryCode + : this.props.phoneNumberCountryCode; const conditionalProps: Partial = {}; conditionalProps.errorMessage = this.props.errorMessage; if (this.props.isRequired && value.length === 0) { @@ -541,7 +665,7 @@ class InputWidget extends BaseWidget { conditionalProps.maxChars = this.props.maxChars; if ( this.props.defaultText && - this.props.defaultText.length > this.props.maxChars + this.props.defaultText.toString().length > this.props.maxChars ) { isInvalid = true; conditionalProps.errorMessage = createMessage( @@ -591,8 +715,10 @@ class InputWidget extends BaseWidget { } onCurrencyTypeChange={this.onCurrencyTypeChange} onFocusChange={this.handleFocusChange} + onISDCodeChange={this.onISDCodeChange} onKeyDown={this.handleKeyDown} onValueChange={this.onValueChange} + phoneNumberCountryCode={phoneNumberCountryCode} placeholder={this.props.placeholderText} showError={!!this.props.isFocused} stepSize={1} @@ -631,8 +757,9 @@ export interface InputWidgetProps extends WidgetProps, WithMeta { currencyCountryCode?: string; noOfDecimals?: number; allowCurrencyChange?: boolean; + phoneNumberCountryCode?: string; decimalsInCurrency?: number; - defaultText?: string; + defaultText?: string | number; tooltip?: string; isDisabled?: boolean; validation: boolean;