next-helios-fe 1.8.14 → 1.8.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
@@ -1463,7 +1463,6 @@ export interface PhoneNumberProps
|
|
1463
1463
|
label?: string;
|
1464
1464
|
description?: string;
|
1465
1465
|
options?: {
|
1466
|
-
variant?: "default" | "split";
|
1467
1466
|
width?: "full" | "fit";
|
1468
1467
|
height?: "short" | "medium" | "high";
|
1469
1468
|
};
|
@@ -1477,7 +1476,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1477
1476
|
}) => {
|
1478
1477
|
const inputRef = useRef<HTMLDivElement>(null);
|
1479
1478
|
const dropdownRef = useRef<HTMLButtonElement>(null);
|
1480
|
-
const [
|
1479
|
+
const [selectedCountry, setSelectedCountry] = useState("62");
|
1481
1480
|
const [openDropdown, setOpenDropdown] = useState(false);
|
1482
1481
|
const [dropdownWidth, setDropdownWidth] = useState<number>(0);
|
1483
1482
|
const width = options?.width === "fit" ? "w-fit" : "w-full";
|
@@ -1497,26 +1496,20 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1497
1496
|
}, []);
|
1498
1497
|
|
1499
1498
|
useEffect(() => {
|
1500
|
-
if (
|
1501
|
-
|
1502
|
-
|
1503
|
-
|
1504
|
-
|
1505
|
-
|
1506
|
-
|
1507
|
-
|
1499
|
+
if (rest.value) {
|
1500
|
+
setSelectedCountry(
|
1501
|
+
countryPhoneCode.find((item) =>
|
1502
|
+
(rest.value as string).startsWith(item.dial_code)
|
1503
|
+
)?.dial_code || ""
|
1504
|
+
);
|
1505
|
+
} else if (rest.defaultValue) {
|
1506
|
+
setSelectedCountry(
|
1507
|
+
countryPhoneCode.find((item) =>
|
1508
|
+
(rest.defaultValue as string).startsWith(item.dial_code)
|
1509
|
+
)?.dial_code || ""
|
1510
|
+
);
|
1508
1511
|
}
|
1509
|
-
}, [
|
1510
|
-
|
1511
|
-
useEffect(() => {
|
1512
|
-
rest.onChange &&
|
1513
|
-
rest.onChange({
|
1514
|
-
target: {
|
1515
|
-
value:
|
1516
|
-
options?.variant === "split" ? tempValue.join("") : tempValue[1],
|
1517
|
-
} as HTMLInputElement,
|
1518
|
-
} as React.ChangeEvent<HTMLInputElement>);
|
1519
|
-
}, [tempValue]);
|
1512
|
+
}, [rest.value, rest.defaultValue]);
|
1520
1513
|
|
1521
1514
|
return (
|
1522
1515
|
<div className="flex flex-row-reverse items-end">
|
@@ -1545,60 +1538,59 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1545
1538
|
)}
|
1546
1539
|
<div ref={inputRef} className="flex flex-row-reverse gap-4">
|
1547
1540
|
<div className="relative flex-1 flex items-center">
|
1548
|
-
|
1549
|
-
<
|
1550
|
-
|
1551
|
-
</div>
|
1552
|
-
)}
|
1541
|
+
<div className="absolute left-0 flex justify-center w-14 border-r">
|
1542
|
+
<span className="text-disabled">{`+${selectedCountry}`}</span>
|
1543
|
+
</div>
|
1553
1544
|
<input
|
1554
1545
|
type="number"
|
1555
|
-
className={`w-full border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}
|
1556
|
-
|
1557
|
-
}`}
|
1558
|
-
placeholder={rest.placeholder}
|
1559
|
-
value={tempValue[1]}
|
1546
|
+
className={`w-full ps-16 pe-4 border-default border rounded-md bg-secondary-bg [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
|
1547
|
+
placeholder="Phone number"
|
1560
1548
|
required={rest.required}
|
1561
1549
|
disabled={rest.disabled}
|
1550
|
+
value={(rest.value as string).split(selectedCountry)[1]}
|
1562
1551
|
onChange={(e) => {
|
1563
|
-
|
1552
|
+
rest.onChange &&
|
1553
|
+
rest.onChange({
|
1554
|
+
target: {
|
1555
|
+
value: `${selectedCountry}${e.target.value}`,
|
1556
|
+
} as HTMLInputElement,
|
1557
|
+
} as any);
|
1564
1558
|
}}
|
1565
1559
|
/>
|
1566
1560
|
</div>
|
1567
|
-
|
1568
|
-
<
|
1569
|
-
|
1570
|
-
|
1571
|
-
|
1572
|
-
|
1573
|
-
|
1574
|
-
|
1575
|
-
|
1576
|
-
|
1577
|
-
|
1578
|
-
|
1579
|
-
|
1580
|
-
|
1581
|
-
|
1582
|
-
|
1583
|
-
|
1584
|
-
|
1585
|
-
|
1586
|
-
|
1587
|
-
|
1588
|
-
|
1589
|
-
|
1590
|
-
|
1591
|
-
|
1592
|
-
|
1593
|
-
|
1561
|
+
<div className="relative flex items-center cursor-pointer">
|
1562
|
+
<input
|
1563
|
+
type="text"
|
1564
|
+
className={`max-w-24 w-min ps-4 pe-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default ${height} ${
|
1565
|
+
openDropdown
|
1566
|
+
? "placeholder:translate-x-1 outline-none ring-1 ring-primary shadow shadow-primary border-primary-dark"
|
1567
|
+
: "border-default placeholder:translate-x-0"
|
1568
|
+
}`}
|
1569
|
+
disabled={rest.disabled}
|
1570
|
+
value={`${
|
1571
|
+
countryPhoneCode.find(
|
1572
|
+
(item) => selectedCountry === item.dial_code
|
1573
|
+
)?.emoji
|
1574
|
+
} ${
|
1575
|
+
countryPhoneCode.find(
|
1576
|
+
(item) => selectedCountry === item.dial_code
|
1577
|
+
)?.code
|
1578
|
+
}`}
|
1579
|
+
onClick={(e) => {
|
1580
|
+
e.preventDefault();
|
1581
|
+
setOpenDropdown(true);
|
1582
|
+
dropdownRef.current?.click();
|
1583
|
+
setDropdownWidth(
|
1584
|
+
inputRef?.current?.getBoundingClientRect()?.width || 0
|
1585
|
+
);
|
1586
|
+
}}
|
1587
|
+
/>
|
1588
|
+
<div className="absolute right-4 text-xl text-disabled pointer-events-none">
|
1589
|
+
<Icon
|
1590
|
+
icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
|
1594
1591
|
/>
|
1595
|
-
<div className="absolute right-4 text-xl text-disabled pointer-events-none">
|
1596
|
-
<Icon
|
1597
|
-
icon={`gravity-ui:chevron-${openDropdown ? "up" : "down"}`}
|
1598
|
-
/>
|
1599
|
-
</div>
|
1600
1592
|
</div>
|
1601
|
-
|
1593
|
+
</div>
|
1602
1594
|
</div>
|
1603
1595
|
</label>
|
1604
1596
|
<div className="w-0 overflow-hidden">
|
@@ -1630,9 +1622,16 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1630
1622
|
key={index}
|
1631
1623
|
type="button"
|
1632
1624
|
className="flex justify-between items-center min-w-40 w-full my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
1633
|
-
disabled={
|
1625
|
+
disabled={selectedCountry === item.dial_code}
|
1634
1626
|
onClick={() => {
|
1635
|
-
|
1627
|
+
rest.onChange &&
|
1628
|
+
rest.onChange({
|
1629
|
+
target: {
|
1630
|
+
value: `${item.dial_code}${
|
1631
|
+
(rest.value as string).split(selectedCountry)[1]
|
1632
|
+
}`,
|
1633
|
+
} as HTMLInputElement,
|
1634
|
+
} as any);
|
1636
1635
|
setOpenDropdown(false);
|
1637
1636
|
}}
|
1638
1637
|
>
|
@@ -1644,6 +1643,7 @@ export const PhoneNumber: React.FC<PhoneNumberProps> = ({
|
|
1644
1643
|
</div>
|
1645
1644
|
</Dropdown>
|
1646
1645
|
</div>
|
1646
|
+
<input type="text" className="hidden" {...rest} />
|
1647
1647
|
</div>
|
1648
1648
|
);
|
1649
1649
|
};
|