pixel-react-excel-sheet 1.0.23 → 1.0.24

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -15,7 +15,11 @@ const Template = ({
   placeholder,
   onFocus,
   onBlur,
-  isValid,
+  international,
+  enableAreaCodeStretch,
+  defaultCountry,
+  disabled,
+  id,
 }: PhoneInputProps) => {
   const [phone, setPhone] = useState<string>(value || '');
   const [valid, setValid] = useState(true);
@@ -38,6 +42,11 @@ const Template = ({
       onFocus={onFocus}
       onBlur={onBlur}
       isValid={valid}
+      international={international}
+      enableAreaCodeStretch={enableAreaCodeStretch}
+      defaultCountry={defaultCountry}
+      disabled={disabled}
+      id={id}
     />
   );
 };
@@ -46,50 +55,16 @@ const Template = ({
 export const Default = Template.bind({});
 Default.args = {
   country: 'IN',
-  value: '9134567890',
+  value: '91',
   width: '400px',
   placeholder: 'Enter phone number',
   onChange: () => {},
   onFocus: () => {},
   onBlur: () => {},
   isValid: true,
-};
-
-// Story with initial value
-export const WithInitialValue = Template.bind({});
-WithInitialValue.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with a custom country
-export const WithCustomCountry = Template.bind({});
-WithCustomCountry.args = {
-  country: 'IN',
-  value: '9176543210',
-  width: '300px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: true,
-};
-
-// Story with empty value
-export const EmptyValue = Template.bind({});
-EmptyValue.args = {
-  country: 'IN',
-  value: '91',
-  width: '500px',
-  onChange: () => {},
-  placeholder: 'Enter phone number',
-  onFocus: () => {},
-  onBlur: () => {},
-  isValid: false,
+  international: true,
+  enableAreaCodeStretch: true,
+  defaultCountry: 'IN',
+  disabled: false,
+  id: 'addPrimaryNumberId',
 };

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import PhoneInput from 'react-phone-input-2';
-import 'react-phone-input-2/lib/style.css';
 import { PhoneInputProps } from './types';
 import Typography from '../Typography';
 import './PhoneInput.scss';
@@ -13,6 +12,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
   placeholder = 'Enter phone number',
   onFocus,
   onBlur,
+  id,
+  dropdownStyle = {},
+  enableAreaCodeStretch = false,
+  disabled = false,
 }) => {
   const [phone, setPhone] = useState<string>(value);
   const [isFocused, setIsFocused] = useState(false);
@@ -57,8 +60,10 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
   };
 
   return (
-    <div>
+    <div id={id}>
       <PhoneInput
+        specialLabel=""
+        countryCodeEditable={false}
         country={country}
         value={phone}
         onChange={handlePhoneChange}
@@ -77,6 +82,9 @@ const PhoneInputField: React.FC<PhoneInputProps> = ({
         placeholder={placeholder}
         onFocus={handleFocus}
         onBlur={handleBlur}
+        dropdownStyle={dropdownStyle}
+        enableAreaCodeStretch={enableAreaCodeStretch}
+        disabled={disabled}
       />
       {error && !isFocused && (
         <Typography color={'var(--error_light)'} className="error">