import "./FormSelect.scss"; import React, { useState } from "react"; import { toHeaderCase, toSentenceCase } from "js-convert-case"; import { useField } from "formik"; export default function FormSelect({ name, options, placeholder = `Select ${toHeaderCase(name)}`, label = toHeaderCase(name), className, search = true, }) { const [filterText, setFilterText] = useState(""), [fieldLabel, setFieldLabel] = useState(""); const [, meta, helper] = useField(name); const setField = (value, label) => { helper.setValue(value); setFieldLabel(label); }; return ( <div className={`mb-3 ${className}`}> {label && ( <label htmlFor={`${name}Select`} className='form-label fw-bold'> {label} </label> )} <div className='dropdown'> <button className='position-relative btn btn-white dropdown-toggle w-100 d-flex justify-content-between align-items-center' type='button' id={`${name}-select`} data-bs-toggle='dropdown' aria-expanded='false' > {!!meta.error ? <div className='select-input-invalid-feedback'></div> : null} {fieldLabel || placeholder} </button> <ul className='dropdown-menu w-100 p-2 rounded' aria-labelledby={`${name}-select`}> {search && ( <div className='input-group mb-2'> <span className='input-group-text' id={`${name}-search-input-icon`}> <i className='bi bi-search' /> </span> <input type='text' name='filterText' className='form-control' placeholder='Search' aria-describedby={`${name}-search-input-icon`} aria-label='Username' autoComplete='off' onChange={(e) => setFilterText(e.target.value)} /> </div> )} {options .filter((o) => o.label.toLowerCase().includes(filterText.toLowerCase())) .map((option, index) => ( <li key={index} onClick={() => setField(option.value, option.label)} className={`dropdown-item cursor-pointer ${fieldLabel === option ? "active" : ""}`} > {option.label} </li> ))} </ul> {!!meta.error ? <div className='text-danger ms-1'>{toSentenceCase(meta.error)}</div> : null} </div> </div> ); }