sprint-asia-custom-component 0.1.156 → 0.1.157

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.156",
+  "version": "0.1.157",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "country-codes-list": "^2.0.0",
     "file-saver": "^2.0.5",
+    "flag-icon-css": "^4.1.7",
     "react": "^18.2.0",
     "react-datepicker": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-icons": "^4.12.0",
+    "react-phone-input-2": "^2.15.1",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",

package/src/components/dropdownphone/index.js

@@ -0,0 +1,173 @@
+import React, { useState, useEffect, useRef } from "react";
+import { PiCaretDown, PiCaretUp, PiInfo } from "react-icons/pi";
+import { customList } from "country-codes-list";
+
+const DropdownPhone = ({
+    dropdownCountry = { option: "+62", value: "id", label: "Indonesia" },
+    setDropdownCountry,
+    title = "",
+    isRequired = true,
+    value = "",
+    onChangeInput,
+    footer = null,
+    mode = "default",
+    placeholder = "",
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapperRef = useRef(null);
+    const [wrapperWidth, setWrapperWidth] = useState(0);
+    const [options, setOptions] = useState([]);
+
+    useEffect(() => {
+        const list = Object.entries(
+            customList("countryCode", "{countryNameEn} +{countryCallingCode}")
+        ).map(([code, label]) => {
+            const [countryName, callingCode] = label.split(" +");
+            return {
+                option: `+${callingCode}`,
+                value: code.toLowerCase(),
+                label: countryName,
+            };
+        });
+
+        const sortedList = list.sort((a, b) => a.label.localeCompare(b.label));
+
+        const indonesiaExists = sortedList.some(
+            (item) => item.value === "id" && item.option === "+62"
+        );
+        if (!indonesiaExists) {
+            sortedList.push({
+                option: "+62",
+                value: "id",
+                label: "Indonesia",
+            });
+        }
+
+        setOptions(sortedList);
+    }, []);
+
+    useEffect(() => {
+        if (wrapperRef.current) {
+            setWrapperWidth(wrapperRef.current.offsetWidth);
+        }
+    }, [wrapperRef.current, value]);
+
+    const handleClickOption = (data) => {
+        setIsOpen(false);
+        setDropdownCountry(data);
+    };
+
+    return (
+        <div className="w-full">
+            {title && (
+                <div className="flex mb-1">
+                    <p className="text-sm font-normal text-black">{title}</p>
+                    {isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
+                </div>
+            )}
+
+            <div ref={wrapperRef} className="relative w-full">
+                <div
+                    className={`
+                        flex items-center rounded-md overflow-hidden w-full pr-3
+                        ${mode === "danger"
+                            ? "border border-danger500 bg-danger50"
+                            : "border border-neutral50 bg-neutral20"}
+                    `}
+                >
+                    <div
+                        className="flex items-center px-3 py-2 cursor-pointer border-r border-neutral50 mr-3"
+                        onClick={() => setIsOpen(!isOpen)}
+                    >
+                        <img
+                            src={`https://flagcdn.com/w40/${dropdownCountry.value}.png`}
+                            alt={dropdownCountry.label}
+                            className="w-4 h-4 object-cover rounded-full"
+                        />
+                        <p className="text-sm font-bold text-neutral300 ml-3 mr-2">
+                            {dropdownCountry.option}
+                        </p>
+                        {isOpen ? <PiCaretUp /> : <PiCaretDown />}
+                    </div>
+
+                    <input
+                        type="number"
+                        value={value}
+                        onChange={onChangeInput}
+                        className={`
+                            flex-1 w-full py-2.5 text-sm text-black focus:outline-none
+                            placeholder:text-neutral300
+                            ${mode === "danger" ? "bg-danger50 text-danger500" : "bg-neutral20"}
+                        `}
+                        placeholder={placeholder}
+                    />
+                </div>
+
+                {isOpen && (
+                    <div
+                        className="absolute top-full mt-1 z-10 rounded-md shadow-md bg-neutral20 ring-1 ring-black ring-opacity-5 overflow-y-auto max-h-64 no-scrollbar"
+                        style={{ width: wrapperWidth }}
+                    >
+                        <div className="py-2 bg-white">
+                            <div className="bg-neutral20 rounded-lg px-4 py-2.5 my-1 mx-2 cursor-default">
+                                <div className="flex items-center gap-2">
+                                    <img
+                                        src={`https://flagcdn.com/w40/${dropdownCountry.value}.png`}
+                                        alt={dropdownCountry.label}
+                                        className="w-5 h-5 object-cover rounded-full"
+                                    />
+                                    <p className="text-sm text-black">
+                                        {
+                                            dropdownCountry.label ||
+                                            options.find((opt) => opt.value === dropdownCountry.value && opt.option === dropdownCountry.option)?.label
+                                        }
+                                    </p>
+                                    <p className="text-sm text-black">{dropdownCountry.option}</p>
+                                </div>
+                            </div>
+
+                            {options
+                                .filter(
+                                    (opt) =>
+                                        opt.value !== dropdownCountry.value ||
+                                        opt.option !== dropdownCountry.option
+                                )
+                                .map((option, index) => (
+                                    <div
+                                        key={index}
+                                        className="bg-white rounded-lg px-4 py-2.5 my-1 mx-2 cursor-pointer transition-all hover:bg-neutral20"
+                                        onClick={() => handleClickOption(option)}
+                                    >
+                                        <div className="flex items-center gap-2">
+                                            <img
+                                                src={`https://flagcdn.com/w40/${option.value}.png`}
+                                                alt={option.label}
+                                                className="w-5 h-5 object-cover rounded-full"
+                                            />
+                                            <p className="text-sm text-black">{option.label}</p>
+                                            <p className="text-sm text-black">{option.option}</p>
+                                        </div>
+                                    </div>
+                                ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {footer && (
+                <div className="mt-1">
+                    {mode === "danger" ? (
+                        <div className="flex items-center">
+                            <PiInfo size={16} className="text-danger500" />
+                            <p className="text-danger500 text-xs ml-1">{footer}</p>
+                        </div>
+                    ) : (
+                        <p className="text-black text-xs">{footer}</p>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default DropdownPhone;

package/src/index.js

@@ -84,6 +84,7 @@ import CellModelSix from "./components/table/listTable/cellmodesix";
 import CellModelSeven from "./components/table/listTable/cellmodelseven";
 import DetailDivision from "./components/table/listTable/report/detaildivision";
 import SearchDropdown from "./components/searchdropdown";
+import DropdownPhone from "./components/dropdownphone";
 import FilterDropdown from "./components/filter/filterDropdown";
 import Footer from "./components/footer";
 import Header from "./components/header";
@@ -104,6 +105,7 @@ export {
   CellModelSeven,
   DetailDivision,
   SearchDropdown,
+  DropdownPhone,
   FilterDropdown,
   HeaderTable,
   TextInput,

package/src/templates/index.js

@@ -44,6 +44,7 @@ import ModalBilling from "../components/modal/modalBilling";
 import ModalDeclineBilling from "../components/modal/modalDeclineBilling";
 import TextEditor from "../components/texteditor";
 import SearchDropdown from "../components/searchdropdown";
+import DropdownPhone from "../components/dropdownphone";
 import LimitList from "../components/table/listTable/limit";
 import ModalLimit from "../components/modal/modalLimit";
 import VerticalStepBar from "../components/verticalstepbar";
@@ -836,6 +837,12 @@ const Templates = () => {
     value: "dfdsf",
   });
 
+  const [dropdownCountry, setDropdownCountry] = useState({
+    option: "+62",
+    value: "id",
+    label: "Indonesia"
+  });
+
   const onHandleEnter = () => {
     console.log(searchFilter, filterDropdown);
   };
@@ -863,9 +870,9 @@ const Templates = () => {
           titleRightButton="Submit"
           isActiveLeftButton
           isActiveRightButton
-          onClickLeftButton={() => {}}
-          onClickRightButton={() => {}}
-          additionalButton={<PrimaryButton title={"Additional"} onClick={() => {}} isActive={true} />}
+          onClickLeftButton={() => { }}
+          onClickRightButton={() => { }}
+          additionalButton={<PrimaryButton title={"Additional"} onClick={() => { }} isActive={true} />}
         />
       </div>
 
@@ -1104,13 +1111,13 @@ const Templates = () => {
       <Description
         title="Sample Title"
         value={"This is a sample description.\n HHEHEEH \n LOh"}
-        // image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
+      // image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
       />
       <Description
         title="Sample Title"
         value={"This is a sample description.\n HHEHEEH \n LOh"}
         icon={<PiCalendarBlank size={20} />}
-        // image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
+      // image="https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
       />
 
       <div className="m-9"></div>
@@ -1392,6 +1399,18 @@ const Templates = () => {
         onEnterPress={onHandleEnter}
       />
 
+      <div className="m-9"></div>
+      <DropdownPhone
+        title="PIC Phone Number"
+        placeholder="Input Phone Number"
+        dropdownCountry={dropdownCountry}
+        setDropdownCountry={setDropdownCountry}
+        value={inputValue}
+        onChange={setInputValue}
+        footer="Error message here"
+        mode="danger"
+      />
+
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Stepper</p>
       {scenarios.map((scenario, index) => (