sprint-asia-custom-component 0.1.143 → 0.1.145

package/dist/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('.components/dropdownbutton')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '.components/dropdownbutton'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MyComponent = {}, global.React, global.dropdownbutton));
-})(this, (function (exports, React, dropdownbutton) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.MyComponent = {}, global.React));
+})(this, (function (exports, React) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +26,6 @@
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
-  var dropdownbutton__default = /*#__PURE__*/_interopDefaultLegacy(dropdownbutton);
 
   var DefaultContext = {
     color: undefined,
@@ -23902,7 +23901,7 @@
   };
 
   // THIS FILE IS AUTO GENERATED
-  function FaFileAlt(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 384 512"},"child":[{"tag":"path","attr":{"d":"M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"}}]})(props);}function FaFileImage(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 384 512"},"child":[{"tag":"path","attr":{"d":"M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"}}]})(props);}
+  function FaChevronDown(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 448 512"},"child":[{"tag":"path","attr":{"d":"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"}}]})(props);}function FaFileAlt(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 384 512"},"child":[{"tag":"path","attr":{"d":"M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"}}]})(props);}function FaFileImage(props){return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 384 512"},"child":[{"tag":"path","attr":{"d":"M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"}}]})(props);}
 
   const DescriptionFile = ({
     title = "Title",
@@ -24157,6 +24156,7 @@
     const selectedValue = options.filter(val => {
       return val.value === currentOption;
     });
+    const hasData = options.length > 0;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: `relative inline-block text-left w-full ${className}`,
       ref: dropdownRef
@@ -24171,11 +24171,11 @@
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
       className: `
-                        ${!isEdited && "bg-neutral30 cursor-not-allowed"} 
-                        ${mode === "default" && currentOption === "" && "border-neutral50 bg-neutral20 cursor-pointer"} 
-                        ${mode === "default" && currentOption !== "" && "border-black 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`,
+              ${!isEdited && "bg-neutral30 cursor-not-allowed"} 
+              ${mode === "default" && currentOption === "" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+              ${mode === "default" && currentOption !== "" && "border-black 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"
@@ -24194,7 +24194,7 @@
       "aria-labelledby": "options-menu"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "px-1 py-2 max-h-40 overflow-y-auto"
-    }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
+    }, hasData ? options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
       key: index,
       className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md",
       onClick: () => {
@@ -24204,7 +24204,11 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement("p", {
       className: "text-sm text-black"
-    }, option.option))))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
+    }, option.option))) : /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "bg-white py-2.5 px-4 my-0.5 rounded-md"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "text-sm text-neutral500"
+    }, "No data")))), footer && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mt-1"
     }, mode === "danger" ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex"
@@ -48835,10 +48839,74 @@
     }, footer)));
   };
 
-  Object.defineProperty(exports, 'DropdownButton', {
-    enumerable: true,
-    get: function () { return dropdownbutton__default["default"]; }
-  });
+  const DropdownButton = ({
+    defaultType = 'Voucher Type'
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedValue, setSelectedValue] = React.useState(defaultType);
+    const toggleDropdown = () => {
+      setIsOpen(!isOpen);
+    };
+    const handleOptionClick = value => {
+      setSelectedValue(value);
+      setIsOpen(false);
+    };
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        position: 'relative',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
+      onClick: toggleDropdown,
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        border: '1px solid #007bff',
+        background: '#fff',
+        color: '#007bff',
+        borderRadius: '5px',
+        padding: '10px 15px',
+        cursor: 'pointer',
+        fontSize: '16px',
+        fontWeight: 'bold'
+      }
+    }, selectedValue, /*#__PURE__*/React__default["default"].createElement(FaChevronDown, {
+      style: {
+        marginLeft: '8px'
+      }
+    })), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '100%',
+        left: '0',
+        background: '#fff',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        borderRadius: '5px',
+        marginTop: '8px',
+        zIndex: 10
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("ul", {
+      style: {
+        listStyle: 'none',
+        margin: 0,
+        padding: '10px 0'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("li", {
+      style: {
+        padding: '10px 20px',
+        cursor: 'pointer'
+      },
+      onClick: () => handleOptionClick('Digital Voucher')
+    }, "Digital Voucher"), /*#__PURE__*/React__default["default"].createElement("li", {
+      style: {
+        padding: '10px 20px',
+        cursor: 'pointer'
+      },
+      onClick: () => handleOptionClick('PPOB Voucher')
+    }, "PPOB Voucher"))));
+  };
+
   exports.Alert = Alert;
   exports.BillerList = BillerList;
   exports.BillerProductList = BillerProductList;
@@ -48860,6 +48928,7 @@
   exports.Description = Description;
   exports.DescriptionFile = DescriptionFile;
   exports.DetailDivision = DetailDivision;
+  exports.DropdownButton = DropdownButton;
   exports.DropdownCard = DropdownCard;
   exports.DropdownChip = DropdownChip;
   exports.DropdownText = DropdownText;

package/package.json

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

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

@@ -47,6 +47,8 @@ const DropdownText = ({
     return val.value === currentOption;
   });
 
+  const hasData = options.length > 0;
+
   return (
     <div className={`relative inline-block text-left w-full ${className}`} ref={dropdownRef}>
       {title && (
@@ -60,11 +62,11 @@ const DropdownText = ({
           <button
             type="button"
             className={`
-                        ${!isEdited && "bg-neutral30 cursor-not-allowed"} 
-                        ${mode === "default" && currentOption === "" && "border-neutral50 bg-neutral20 cursor-pointer"} 
-                        ${mode === "default" && currentOption !== "" && "border-black 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`}
+              ${!isEdited && "bg-neutral30 cursor-not-allowed"} 
+              ${mode === "default" && currentOption === "" && "border-neutral50 bg-neutral20 cursor-pointer"} 
+              ${mode === "default" && currentOption !== "" && "border-black 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">
@@ -89,19 +91,25 @@ const DropdownText = ({
           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>
+            {hasData ? (
+              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 className="bg-white py-2.5 px-4 my-0.5 rounded-md">
+                <p className="text-sm text-neutral500">No data</p>
               </div>
-            ))}
+            )}
           </div>
         </div>
       )}

package/src/index.js

@@ -90,7 +90,7 @@ import Header from "./components/header";
 import TextEditor from "./components/texteditor";
 import CustomPhone from "./components/customphone";
 import TextArea from "./components/textarea";
-import DropdownButton from ".components/dropdownbutton";
+import DropdownButton from "./components/dropdownbutton";
 
 export {
   Header,