From e9dc0f57107674a5bced1d3b654a64b0ecccca13 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Thu, 20 Mar 2025 03:08:38 +0530 Subject: [PATCH] Phone input done --- .../Components/PhoneInput/PhoneInput.jsx | 96 ++ .../Inspector/Components/PhoneInput/en.js | 239 ++++ .../RightSideBar/Inspector/Inspector.jsx | 3 + .../WidgetManager/widgets/phoneinput.js | 16 +- .../Widgets/BaseComponents/hooks/useInput.js | 4 +- .../src/AppBuilder/Widgets/PhoneInput.jsx | 50 +- frontend/src/_styles/theme.scss | 1102 ++++++++++++++++- .../Configuration.scss | 8 + .../apps/services/widget-config/phoneinput.js | 16 +- 9 files changed, 1464 insertions(+), 70 deletions(-) create mode 100644 frontend/src/AppBuilder/RightSideBar/Inspector/Components/PhoneInput/PhoneInput.jsx create mode 100644 frontend/src/AppBuilder/RightSideBar/Inspector/Components/PhoneInput/en.js 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 ( +
+ +