import './SSelect.scss' ; import { useState , useRef , useCallback } from 'react' ; import clsx from 'clsx' ; import { IChevronDown , IChevronUp } from '../assets/icons' ; import { useOutsideClick } from '../hooks' ; export interface SSelectMap { [ key ] : { text : string ; data ? : unknown ; } ; } interface SSelectProps < TMap extends SSelectMap > { value : string ; onChange : ( value : keyof TMap , data ? : unknown ) => void ; map : TMap ; disabled ? : boolean ; className ? : string ; } function SSelect < TMap extends SSelectMap > ( { value , onChange , map , disabled , className , } ) { const [ active , setActive ] = useState ( false ) ; const handleChange = useCallback ( ( value , data ? ) => { setActive ( false ) ; onChange ( value , data ) ; } , [ onChange ] ) ; const clickRef = useRef < HTMLDivElement > ( null ) ; useOutsideClick ( clickRef , ( ) => { setActive ( false ) ; } ) ; return ( < div className = { clsx ( 's-select' , { 's-select--disabled' : disabled } , className ) } ref = { clickRef } > < div className = { clsx ( 's-select-value' , { 's-select-value--active' : active } ) } onClick = { ( ) => setActive ( ( val ) => ! disabled && ! val ) } > < div className = 'disp' > { map [ value ] ? map [ value ] . text : 'Unknown' } < /div> < div className = 'btn' > { active ? < IChevronUp / > : < IChevronDown />}</div > < /div> { active && ( < div className = 's-select-options' > { Object . keys ( map ) . map ( ( key ) => ( < div className = 's-select-option' onClick = { ( ) => handleChange ( key , map [ key ] . data ) } key = { key } > { map [ key ] ? map [ key ] . text : 'Unknown' } < /div>))} < /div>)} < /div>); } export default SSelect ;