sprint-asia-custom-component 0.1.136 → 0.1.137

package/dist/index.js

@@ -26797,6 +26797,95 @@
     }, option))))));
   };
 
+  const FilterCheckboxDropdown = ({
+    options = [{
+      option: "Option 1",
+      value: "value 1"
+    }, {
+      option: "Option 2",
+      value: "value 2"
+    }, {
+      option: "Option 3",
+      value: "value 3"
+    }],
+    currentValue = [],
+    buttonText = "Filter",
+    onSelect
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedOptions, setSelectedOptions] = React.useState([]);
+    const dropdownRef = React.useRef(null);
+
+    // Inisialisasi selectedOptions dengan currentValue saat pertama kali render
+    React.useEffect(() => {
+      setSelectedOptions(currentValue);
+    }, [currentValue]);
+    React.useEffect(() => {
+      const handleOutsideClick = event => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handleOutsideClick);
+      }
+      return () => {
+        document.removeEventListener('mousedown', handleOutsideClick);
+      };
+    }, [isOpen]);
+    const handleToggleFilterCheckboxDropdown = () => {
+      setIsOpen(!isOpen);
+    };
+    const handleOptionClick = optionValue => {
+      const updatedOptions = selectedOptions.some(option => option.value === optionValue) ? selectedOptions.filter(selected => selected.value !== optionValue) : [...selectedOptions, options.find(option => option.value === optionValue)];
+      setSelectedOptions(updatedOptions);
+
+      // Menampilkan selectedOptions setelah setiap klik
+      console.log('Current selected options:', updatedOptions);
+      if (onSelect) {
+        onSelect(updatedOptions);
+      }
+    };
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "relative inline-block text-left",
+      ref: dropdownRef
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "rounded-md shadow-sm"
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
+      type: "button",
+      className: "flex items-center w-60 py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none",
+      onClick: handleToggleFilterCheckboxDropdown
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "flex-grow"
+    }, buttonText), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "ml-2"
+    }, isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, {
+      size: 16,
+      className: "text-neutral300"
+    }) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, {
+      size: 16,
+      className: "text-neutral300"
+    }))))), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "z-10 origin-top-right absolute left-0 mt-2 w-60 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none",
+      role: "menu",
+      "aria-orientation": "vertical",
+      "aria-labelledby": "options-menu"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "px-1 py-2"
+    }, options.map(val => /*#__PURE__*/React__default["default"].createElement("div", {
+      key: val.value,
+      className: `hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ${selectedOptions.some(option => option.value === val.value) ? 'bg-primary500' : ''}`,
+      onClick: () => handleOptionClick(val.value)
+    }, /*#__PURE__*/React__default["default"].createElement("input", {
+      type: "checkbox",
+      className: "mr-2",
+      checked: selectedOptions.some(option => option.value === val.value),
+      onChange: () => handleOptionClick(val.value)
+    }), /*#__PURE__*/React__default["default"].createElement("p", {
+      className: `text-sm ${selectedOptions.some(option => option.value === val.value) ? 'text-primary500' : 'text-black'}`
+    }, val.option))))));
+  };
+
   const FilterText = ({
     options = ["Type", "Company"],
     onSelect
@@ -48775,6 +48864,7 @@
   exports.EmptyData = EmptyData;
   exports.ExportToExcel = ExportToExcel;
   exports.FilterCheckbox = FilterCheckbox;
+  exports.FilterCheckboxDropdown = FilterCheckboxDropdown;
   exports.FilterDropdown = FilterDropdown;
   exports.FilterText = FilterText;
   exports.Footer = Footer;

package/package.json

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

package/src/components/filter/filterCheckboxDropdown/index.js

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
+
+const FilterCheckboxDropdown = ({ 
+    options = [
+        { option: "Option 1", value: "value 1" },
+        { option: "Option 2", value: "value 2" },
+        { option: "Option 3", value: "value 3" },
+    ], 
+    currentValue = [],
+    buttonText = "Filter",
+    onSelect 
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const dropdownRef = useRef(null);
+
+    // Inisialisasi selectedOptions dengan currentValue saat pertama kali render
+    useEffect(() => {
+        setSelectedOptions(currentValue);
+    }, [currentValue]);
+
+    useEffect(() => {
+        const handleOutsideClick = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleOutsideClick);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [isOpen]);
+
+    const handleToggleFilterCheckboxDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const handleOptionClick = (optionValue) => {
+        const updatedOptions = selectedOptions.some(option => option.value === optionValue)
+            ? selectedOptions.filter((selected) => selected.value !== optionValue)
+            : [...selectedOptions, options.find(option => option.value === optionValue)];
+
+        setSelectedOptions(updatedOptions);
+
+        // Menampilkan selectedOptions setelah setiap klik
+        console.log('Current selected options:', updatedOptions);
+
+        if (onSelect) {
+            onSelect(updatedOptions);
+        }
+    };
+
+    return (
+        <div className='relative inline-block text-left' ref={dropdownRef}>
+            <div>
+                <span className='rounded-md shadow-sm'>
+                    <button
+                        type='button'
+                        className="flex items-center w-60 py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
+                        onClick={handleToggleFilterCheckboxDropdown}
+                    >
+                        <span className='flex-grow'>{buttonText}</span>
+                        <span className='ml-2'>
+                            {isOpen ? <PiCaretUp size={16} className='text-neutral300' /> : <PiCaretDown size={16} className='text-neutral300' />}
+                        </span>
+                    </button>
+                </span>
+            </div>
+
+            {isOpen && (
+                <div
+                    className='z-10 origin-top-right absolute left-0 mt-2 w-60 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'
+                    role='menu'
+                    aria-orientation='vertical'
+                    aria-labelledby='options-menu'
+                >
+                    <div className='px-1 py-2'>
+                        {options.map((val) => (
+                            <div
+                                key={val.value}
+                                className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ${
+                                    selectedOptions.some(option => option.value === val.value) ? 'bg-primary500' : ''
+                                }`}
+                                onClick={() => handleOptionClick(val.value)}
+                            >
+                                <input
+                                    type='checkbox'
+                                    className='mr-2'
+                                    checked={selectedOptions.some(option => option.value === val.value)}
+                                    onChange={() => handleOptionClick(val.value)}
+                                />
+                                <p className={`text-sm ${selectedOptions.some(option => option.value === val.value) ? 'text-primary500' : 'text-black'}`}>
+                                    {val.option}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default FilterCheckboxDropdown;

package/src/index.js

@@ -48,6 +48,7 @@ import EmptyData from "./components/emptystate/table/emptydata";
 import NotFound from "./components/emptystate/table/notfound";
 import ExportToExcel from "./components/export/excel";
 import FilterCheckbox from "./components/filter/filterCheckbox";
+import FilterCheckboxDropdown from "./components/filter/filterCheckboxDropdown";
 import FilterText from "./components/filter/filterText";
 import Menu from "./components/menu";
 import ModalLoading from "./components/modal/modalLoading";
@@ -123,6 +124,7 @@ export {
   Menu,
   FilterText,
   FilterCheckbox,
+  FilterCheckboxDropdown,
   ExportToExcel,
   NotFound,
   EmptyData,

package/src/templates/index.js

@@ -61,6 +61,7 @@ import CellModelSix from "../components/table/listTable/cellmodesix";
 import CellModelSeven from "../components/table/listTable/cellmodelseven";
 import CustomPhone from "../components/customphone";
 import DescriptionFile from "../components/description/file";
+import FilterCheckboxDropdown from "../components/filter/filterCheckboxDropdown";
 
 const Templates = () => {
   const [startDate, setStartDate] = useState(null);
@@ -828,6 +829,7 @@ const Templates = () => {
   });
 
   const [searchFilter, setSearchFilter] = useState();
+  const [valueSelectFilter, setValueSelectFilter] = useState([]);
   const [filterDropdown, setFilterDropdown] = useState({
     option: "duar",
     value: "dfdsf",
@@ -1171,6 +1173,27 @@ const Templates = () => {
       <div className="m-9"></div>
       <FilterText options={["Option 1", "Option 2", "Option 3"]} onSelect={handleSelect} />
 
+      <div className="m-9"></div>
+      <FilterCheckboxDropdown 
+        options={[
+          {
+            option : "Option1",
+            value : "value 1"
+          },
+          {
+            option : "Option2",
+            value : "value 2"
+          },
+        ]}
+        buttonText="Division"
+        currentValue={valueSelectFilter}
+        onSelect={setValueSelectFilter} 
+      />
+
+      {
+        console.log("ini value select", valueSelectFilter)
+      }
+
       <div className="m-9"></div>
       <FilterDropdown
         options={[