diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/PhoneInput/PhoneInput.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/PhoneInput/PhoneInput.jsx new file mode 100644 index 0000000000..65ccf82591 --- /dev/null +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/PhoneInput/PhoneInput.jsx @@ -0,0 +1,96 @@ +import React, { useState } from 'react'; +import Accordion from '@/_ui/Accordion'; +import { baseComponentProperties } from '../DefaultComponent'; +import Select from '@/_ui/Select'; +import useStore from '@/AppBuilder/_stores/store'; +import { countries } from './en'; + +export const PhoneInput = ({ componentMeta, darkMode, ...restProps }) => { + const { + layoutPropertyChanged, + component, + paramUpdated, + dataQueries, + currentState, + eventsChanged, + apps, + allComponents, + } = restProps; + + const properties = Object.keys(componentMeta.properties); + const events = Object.keys(componentMeta.events); + const validations = Object.keys(componentMeta.validation || {}); + const resolvedProperties = useStore((state) => state.getResolvedComponent(component.id)?.properties); + const defaultCountry = resolvedProperties?.defaultCountry || 'None'; + + const renderCustomOption = ({ label, value: optionValue }) => { + const optionStyle = { + display: 'flex', + alignItems: 'center', + justifyContent: 'start', + height: '18px', + gap: '6px', + cursor: 'pointer', + fontFamily: 'IBM Plex Sans', + fontSize: '12px', + lineHeight: '18px', + fontWeight: '400', + color: darkMode ? '#fff' : '#1B1F24', + }; + + return ( +
+
+ {label} +
+ ); + }; + + const getCountryDropdown = () => { + return ( +
+ +