import { Component , createMemo , createSignal , For , Show } from 'solid-js' ; import { Transition } from 'solid-transition-group' ; import { preventDefault , stopPropagation } from '../lib/helpers' ; import Icon from './Icon' ; interface OptionsData { label : string ; value : unknown ; } interface Props { currentValue : string | number ; options : OptionsData [ ] ; onSelect : ( value : unknown ) => void ; } const DropDown = ( props ) => { const [ isOpen , setOpenStatus ] = createSignal ( false ) ; const label = createMemo ( ( ) => { const { label = '' , value } = props . options . find ( ( { value } ) => value === props . currentValue ) || { } ; return label || String ( value ) ; } , props . currentValue , { equals : ( prev , next ) => prev === next } ) ; const closeOptions = ( ) => { if ( isOpen ( ) ) setOpenStatus ( false ) ; } ; const toggleOptions = ( ) => { setOpenStatus ( ! isOpen ( ) ) ; } ; const handleOptionClick = ( value , isActiveItem ) => preventDefault ( ( ) => ! isActiveItem && props . onSelect ( value ) ) ; return ( < div className = "dropdown" onClick = { stopPropagation ( ) } > < button className = "dropdown__trigger" onClick = { toggleOptions } onBlur = { closeOptions } type = "button" > < span className = "dropdown__trigger-title" > { label ( ) } < /span> < Icon name = { isOpen ( ) ? 'chevron-up' : 'chevron-down' } / > < /button> < Transition name = "fade" > < Show when = { isOpen ( ) } > < ul className = "dropdown__list shadow--2dp" > < For each = { props . options } > { ( { label , value } ) => { const isActiveItem = props . currentValue === value ; return ( < li className = { 'dropdown__list-item' } classList = { { 'is-active' : isActiveItem } } onClick = { handleOptionClick ( value , isActiveItem ) } > { label } < /li>); } } < /For> < /ul> < /Show> < /Transition> < /div>); } ; export default DropDown ;