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 866049e385
commit 478aedf2ae
1 changed files with 51 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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