sprint-asia-custom-component 0.1.142 → 0.1.144

package/dist/index.js

@@ -23901,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",
@@ -48834,6 +48834,74 @@
     }, footer)));
   };
 
+  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;
@@ -48855,6 +48923,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.142",
+  "version": "0.1.144",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",
@@ -54,7 +54,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "postcss": "^8.4.35",
-    "rollup": "^2.79.1",
+    "rollup": "^2.79.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-postcss": "^4.0.2"
   }

package/src/components/dropdownbutton/index.js

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { FaChevronDown } from 'react-icons/fa'; // Install dengan `npm install react-icons`
+
+const DropdownButton = ({ defaultType = 'Voucher Type' }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(defaultType);
+
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const handleOptionClick = (value) => {
+        setSelectedValue(value);
+        setIsOpen(false);
+    };
+
+    return (
+        <div style={{ position: 'relative', display: 'inline-block' }}>
+            <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}
+                <FaChevronDown style={{ marginLeft: '8px' }} />
+            </button>
+            {isOpen && (
+                <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,
+                    }}
+                >
+                    <ul style={{ listStyle: 'none', margin: 0, padding: '10px 0' }}>
+                        <li
+                            style={{ padding: '10px 20px', cursor: 'pointer' }}
+                            onClick={() => handleOptionClick('Digital Voucher')}
+                        >
+                            Digital Voucher
+                        </li>
+                        <li
+                            style={{ padding: '10px 20px', cursor: 'pointer' }}
+                            onClick={() => handleOptionClick('PPOB Voucher')}
+                        >
+                            PPOB Voucher
+                        </li>
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default DropdownButton;

package/src/index.js

@@ -90,6 +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";
 
 export {
   Header,
@@ -152,4 +153,5 @@ export {
   TextEditor,
   CustomPhone,
   TextArea,
+  DropdownButton,
 };

package/src/templates/index.js

@@ -62,6 +62,7 @@ import CellModelSeven from "../components/table/listTable/cellmodelseven";
 import CustomPhone from "../components/customphone";
 import DescriptionFile from "../components/description/file";
 import FilterCheckboxDropdown from "../components/filter/filterCheckboxDropdown";
+import DropdownButton from "../components/dropdownbutton";
 
 const Templates = () => {
   const [startDate, setStartDate] = useState(null);
@@ -862,9 +863,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>
 
@@ -1094,18 +1095,24 @@ const Templates = () => {
         onChangeEndDate={setEndDate}
       />
 
+      <div className="m-9"></div>
+      <p className="text-black font-bold text-2xl text-center py-2">Dropdown Button</p>
+      <DropdownButton
+        defaultType="Voucher Type" 
+      />
+
       <div className="m-9"></div>
       <p className="text-black font-bold text-2xl text-center py-2">Description</p>
       <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>
@@ -1174,20 +1181,20 @@ const Templates = () => {
       <FilterText options={["Option 1", "Option 2", "Option 3"]} onSelect={handleSelect} />
 
       <div className="m-9"></div>
-      <FilterCheckboxDropdown 
+      <FilterCheckboxDropdown
         options={[
           {
-            option : "Option1",
-            value : "value 1"
+            option: "Option1",
+            value: "value 1"
           },
           {
-            option : "Option2",
-            value : "value 2"
+            option: "Option2",
+            value: "value 2"
           },
         ]}
         buttonText="Division"
         currentValue={valueSelectFilter}
-        onSelect={setValueSelectFilter} 
+        onSelect={setValueSelectFilter}
       />
 
       {