sprint-asia-custom-component 0.1.142 → 0.1.143

package/dist/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  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';
+  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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +26,7 @@
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
+  var dropdownbutton__default = /*#__PURE__*/_interopDefaultLegacy(dropdownbutton);
 
   var DefaultContext = {
     color: undefined,
@@ -48834,6 +48835,10 @@
     }, footer)));
   };
 
+  Object.defineProperty(exports, 'DropdownButton', {
+    enumerable: true,
+    get: function () { return dropdownbutton__default["default"]; }
+  });
   exports.Alert = Alert;
   exports.BillerList = BillerList;
   exports.BillerProductList = BillerProductList;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.142",
+  "version": "0.1.143",
   "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}
       />
 
       {