admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

added marign for select item

Browse Source
This commit is contained in:
Pramod Mahajan 2025-05-27 15:03:21 +05:30
parent 360bfc5650
commit 1b399c1ebf
1 changed files with 51 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/common/SelectMultiple.jsx
View File

@ -1,21 +1,21 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from "react";
import { useFormContext } from 'react-hook-form'; import { useFormContext } from "react-hook-form";
import './MultiSelectDropdown.css'; import "./MultiSelectDropdown.css";
const SelectMultiple = ({ const SelectMultiple = ({
name, name,
options = [], options = [],
label = 'Select options', label = "Select options",
labelKey = 'name', labelKey = "name",
valueKey = 'id', valueKey = "id",
placeholder = 'Please select...', placeholder = "Please select...",
IsLoading = false IsLoading = false,
}) => { }) => {
const { setValue, watch } = useFormContext(); const { setValue, watch } = useFormContext();
const selectedValues = watch(name) || []; const selectedValues = watch(name) || [];
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [searchText, setSearchText] = useState(''); const [searchText, setSearchText] = useState("");
const dropdownRef = useRef(null); const dropdownRef = useRef(null);
useEffect(() => { useEffect(() => {
@ -24,8 +24,8 @@ const SelectMultiple = ({
setIsOpen(false); setIsOpen(false);
} }
}; };
document.addEventListener('mousedown', handleClickOutside); document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside);
}, []); }, []);
const handleCheckboxChange = (value) => { const handleCheckboxChange = (value) => {
@ -51,8 +51,8 @@ const SelectMultiple = ({
<span <span
className={ className={
selectedValues.length > 0 selectedValues.length > 0
? 'placeholder-style-selected' ? "placeholder-style-selected"
: 'placeholder-style' : "placeholder-style"
} }
> >
<div className="selected-badges-container"> <div className="selected-badges-container">
@ -60,8 +60,11 @@ const SelectMultiple = ({
selectedValues.map((val) => { selectedValues.map((val) => {
const found = options.find((opt) => opt[valueKey] === val); const found = options.find((opt) => opt[valueKey] === val);
return ( return (
<span key={val} className="badge badge-selected-item mx-1 mb-1"> <span
{found ? found[labelKey] : ''} key={val}
className="badge badge-selected-item mx-1 mb-1"
>
{found ? found[labelKey] : ""}
</span> </span>
); );
}) })
@ -73,7 +76,6 @@ const SelectMultiple = ({
<i className="bx bx-chevron-down"></i> <i className="bx bx-chevron-down"></i>
</div> </div>
{isOpen && ( {isOpen && (
<div className="multi-select-dropdown-options"> <div className="multi-select-dropdown-options">
<div className="multi-select-dropdown-search"> <div className="multi-select-dropdown-search">
@ -94,7 +96,9 @@ const SelectMultiple = ({
return ( return (
<div <div
key={valueVal} key={valueVal}
className={`multi-select-dropdown-option ${isChecked ? 'selected' : ''}`} className={`multi-select-dropdown-option ${
isChecked ? "selected" : ""
}`}
> >
<input <input
type="checkbox" type="checkbox"
@ -107,12 +111,14 @@ const SelectMultiple = ({
); );
})} })}
{!IsLoading && filteredOptions.length === 0 && ( {!IsLoading && filteredOptions.length === 0 && (
<div className='multi-select-dropdown-Not-found'> <div className="multi-select-dropdown-Not-found">
<label className="text-muted">Not Found {`'${searchText}'`}</label> <label className="text-muted">
Not Found {`'${searchText}'`}
</label>
</div> </div>
)} )}
{IsLoading && filteredOptions.length === 0 && ( {IsLoading && filteredOptions.length === 0 && (
<div className='multi-select-dropdown-Not-found'> <div className="multi-select-dropdown-Not-found">
<label className="text-muted">Loading...</label> <label className="text-muted">Loading...</label>
</div> </div>
)} )}