sprint-asia-custom-component 0.1.54 → 0.1.55

package/dist/index.js

@@ -24034,10 +24034,7 @@
   };
 
   const DropdownText = ({
-    options = [{
-      option: "Name 1",
-      value: "Value 1"
-    }],
+    options = [],
     onSelect,
     title = "Title Dropdown",
     placeholder = "Placeholder",
@@ -24045,13 +24042,9 @@
     isEdited = true,
     mode = "default",
     footer = null,
-    currentOption = {
-      option: "Name 1",
-      value: "Value 1"
-    }
+    currentOption = ""
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
-    const [selectedOption, setSelectedOption] = React.useState(null);
     const dropdownRef = React.useRef(null);
     React.useEffect(() => {
       const handleOutsideClick = event => {
@@ -24060,17 +24053,16 @@
         }
       };
       if (isOpen) {
-        document.addEventListener('mousedown', handleOutsideClick);
+        document.addEventListener("mousedown", handleOutsideClick);
       }
       return () => {
-        document.removeEventListener('mousedown', handleOutsideClick);
+        document.removeEventListener("mousedown", handleOutsideClick);
       };
     }, [isOpen]);
     const handleToggleDropdownText = () => {
       setIsOpen(!isOpen);
     };
     const handleOptionClick = (option, value) => {
-      setSelectedOption(option);
       setIsOpen(false);
       if (onSelect) {
         onSelect({
@@ -24079,6 +24071,9 @@
         });
       }
     };
+    const selectedValue = options.filter(val => {
+      return val.value === currentOption;
+    });
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "relative inline-block text-left w-full",
       ref: dropdownRef
@@ -24093,14 +24088,14 @@
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: `
-                        ${isEdited == false && "bg-neutral30 cursor-not-allowed"} 
-                        ${mode == "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
-                        ${mode == "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
+                        ${!isEdited && "bg-neutral30 cursor-not-allowed"} 
+                        ${mode === "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode === "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
                         flex items-center w-full py-2.5 text-left px-4 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`,
       onClick: () => isEdited && handleToggleDropdownText()
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: "flex-grow overflow-hidden"
-    }, selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder), /*#__PURE__*/React__default["default"].createElement("span", {
+    }, selectedValue?.length ? selectedValue[0]?.option : placeholder), /*#__PURE__*/React__default["default"].createElement("span", {
       className: "ml-2"
     }, isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, {
       size: 16,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/dropdown/dropdownText/index.js

@@ -1,124 +1,125 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { PiCaretDown, PiCaretUp, PiInfo } from 'react-icons/pi';
+import React, { useState, useEffect, useRef } from "react";
+import { PiCaretDown, PiCaretUp, PiInfo } from "react-icons/pi";
 
-const DropdownText = ({ 
-    options = [
-        {
-            option: "Name 1",
-            value: "Value 1"
-        }
-    ],
-    onSelect,
-    title = "Title Dropdown",
-    placeholder = "Placeholder",
-    isRequired = true,
-    isEdited = true,
-    mode = "default",
-    footer = null,
-    currentOption = {option : "Name 1", value:"Value 1"},
+const DropdownText = ({
+  options = [],
+  onSelect,
+  title = "Title Dropdown",
+  placeholder = "Placeholder",
+  isRequired = true,
+  isEdited = true,
+  mode = "default",
+  footer = null,
+  currentOption = "",
 }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedOption, setSelectedOption] = useState(null);
-    const dropdownRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
 
-    useEffect(() => {
-        const handleOutsideClick = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-
-        if (isOpen) {
-            document.addEventListener('mousedown', handleOutsideClick);
-        }
+  useEffect(() => {
+    const handleOutsideClick = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
 
-        return () => {
-            document.removeEventListener('mousedown', handleOutsideClick);
-        };
-    }, [isOpen]);
+    if (isOpen) {
+      document.addEventListener("mousedown", handleOutsideClick);
+    }
 
-    const handleToggleDropdownText = () => {
-        setIsOpen(!isOpen);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
     };
+  }, [isOpen]);
 
-    const handleOptionClick = (option, value) => {
-        setSelectedOption(option);
-        setIsOpen(false);
-        if (onSelect) {
-            onSelect({option: option, value: value});
-        }
-    };
+  const handleToggleDropdownText = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleOptionClick = (option, value) => {
+    setIsOpen(false);
+    if (onSelect) {
+      onSelect({ option: option, value: value });
+    }
+  };
+
+  const selectedValue = options.filter((val) => {
+    return val.value === currentOption;
+  });
 
   return (
-    <div className='relative inline-block text-left w-full' ref={dropdownRef}>
-        {title && 
-            <div className='flex'>
-                <p className="text-sm font-normal text-black mb-1">{title}</p>
-                {
-                    isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>
-                }
-            </div>
-        }
-        <div>
-            <span className='rounded-md shadow-sm'>
-                <button
-                    type='button'
-                    className={`
-                        ${isEdited == false && "bg-neutral30 cursor-not-allowed"} 
-                        ${mode == "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
-                        ${mode == "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
+    <div className="relative inline-block text-left w-full" ref={dropdownRef}>
+      {title && (
+        <div className="flex">
+          <p className="text-sm font-normal text-black mb-1">{title}</p>
+          {isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
+        </div>
+      )}
+      <div>
+        <span className="rounded-md shadow-sm">
+          <button
+            type="button"
+            className={`
+                        ${!isEdited && "bg-neutral30 cursor-not-allowed"} 
+                        ${mode === "default" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+                        ${mode === "danger" && "border-danger500 bg-danger50 cursor-pointer"} 
                         flex items-center w-full py-2.5 text-left px-4 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden`}
-                    onClick={() => isEdited && handleToggleDropdownText()}
-                >
-                    <span className='flex-grow overflow-hidden'>{selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder}</span>
-                    <span className='ml-2'>
-                        {isOpen ? <PiCaretUp size={16} className='text-neutral300' /> : <PiCaretDown size={16} className='text-neutral300' />}
-                    </span>
-                </button>
+            onClick={() => isEdited && handleToggleDropdownText()}
+          >
+            <span className="flex-grow overflow-hidden">
+              {selectedValue?.length ? selectedValue[0]?.option : placeholder}
             </span>
-        </div>
+            <span className="ml-2">
+              {isOpen ? (
+                <PiCaretUp size={16} className="text-neutral300" />
+              ) : (
+                <PiCaretDown size={16} className="text-neutral300" />
+              )}
+            </span>
+          </button>
+        </span>
+      </div>
 
-        {isOpen && isEdited && (
-            <div
-                className='z-10 origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden'
-                role='menu'
-                aria-orientation='vertical'
-                aria-labelledby='options-menu'
-            >
-                <div className='px-1 py-2 max-h-40 overflow-y-auto'>
-                    {options.map((option, index) => (
-                        <div
-                            key={index}
-                            className='hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md'
-                            onClick={() => {
-                                if (option.option !== "Loading...") {
-                                    handleOptionClick(option.option, option.value)
-                                }
-                            }}
-                        >
-                            <p className='text-sm text-black'>{option.option}</p>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        )}
+      {isOpen && isEdited && (
+        <div
+          className="z-10 origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          <div className="px-1 py-2 max-h-40 overflow-y-auto">
+            {options.map((option, index) => (
+              <div
+                key={index}
+                className="hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md"
+                onClick={() => {
+                  if (option.option !== "Loading...") {
+                    handleOptionClick(option.option, option.value);
+                  }
+                }}
+              >
+                <p className="text-sm text-black">{option.option}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
 
-        {footer && (
-            <div className='mt-1'>
-                {mode === "danger" ? (
-                    <div className='flex'>
-                        <div>
-                            <PiInfo size={16} className='text-danger500' />
-                        </div>
-                        <p className="text-danger500 text-xs ml-1">{footer}</p>
-                    </div>
-                ) : (
-                    <p className="text-black text-xs">{footer}</p>
-                )}
+      {footer && (
+        <div className="mt-1">
+          {mode === "danger" ? (
+            <div className="flex">
+              <div>
+                <PiInfo size={16} className="text-danger500" />
+              </div>
+              <p className="text-danger500 text-xs ml-1">{footer}</p>
             </div>
-        )}
+          ) : (
+            <p className="text-black text-xs">{footer}</p>
+          )}
+        </div>
+      )}
     </div>
   );
 };
 
-export default DropdownText;
+export default DropdownText;