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 { 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) => {
@ -51,8 +51,8 @@ const SelectMultiple = ({
<span
className={
selectedValues.length > 0
? 'placeholder-style-selected'
: 'placeholder-style'
? "placeholder-style-selected"
: "placeholder-style"
}
>
<div className="selected-badges-container">
@ -60,8 +60,11 @@ const SelectMultiple = ({
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
key={val}
className="badge badge-selected-item mx-1 mb-1"
>
{found ? found[labelKey] : ""}
</span>
);
})
@ -73,7 +76,6 @@ const SelectMultiple = ({
<i className="bx bx-chevron-down"></i>
</div>
{isOpen && (
<div className="multi-select-dropdown-options">
<div className="multi-select-dropdown-search">
@ -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"
@ -107,12 +111,14 @@ const SelectMultiple = ({
);
})}
{!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>
)}