import ComponentStore from '@store/componentStore' ; import styles from '@styles/list.module.css' ; import cx from 'classnames' ; import React , { useEffect , useState } from 'react' ; const { CluiStore } = ComponentStore ; const { updateConfiguration } = CluiStore ; /**
 * Element of a List displayed as buttons
 * Name and Value are self explanatory
 * The Child is another JSX.Element potentially another list,
 * which is displayed on choosing the parent element
 */ type ListElement = { name : string ; value : any ; child ? : { component : any ; props : any ; paddingTop ? : number ; } ; [ name ] : any ; } ; /**
 * List Element is expected to receive the following properties
 * parents is a string of keys representing the hierarchy of the calling elements
 * Example, if Transcode Feature is calling this List for choosing the codec
 * we would get a parent array of ["TRANSCODE","FORMAT", "CODECS"]
 * Current is the default element of the list, which is selected by default
 */ type ListProps = { parents : Array < string > ; list : Array < ListElement > ; title : string ; current : ListElement ; } ; param props ListProps const List = ( props ) => { const { list , parents } = props ; const [ current , setCurrent ] = useState < ListElement > ( props . current ) ; useEffect ( ( ) => { const defaultConfiguration = { name : current . name , value : current . value } ; updateConfiguration ( defaultConfiguration , [ ... parents ] ) ; } , [ ] ) ; const handleClick = ( e , element ) => { e . preventDefault ( ) ; setCurrent ( element ) ; const newConfiguration = { name : element . name , value : element . value } ; updateConfiguration ( newConfiguration , [ ... parents ] ) ; } ; return ( < div className = { styles . optionsListWrapper } > { } < div className = { cx ( styles . optionsList , 'w-full' , 'mt-8' ) } > { list . map ( item => ( < div className = { styles . optionsListItemWrapper } key = { item . name } > < div className = { cx ( styles . optionsListItem , 'flex justify-center' , item . name === current . name ? styles . optionsListItemActive : 'text-gray-200' ) } > < button className = "outline-none text-center" type = "button" onClick = { e => handleClick ( e , item ) } > { item . name } < /button> < /div> < /div>))} < /div> { current . child && ( < div className = "child w-full" > < current . child . component { ... current . child . props } / > < /div>)} { } < style jsx > { `
          .child {
            padding-top: ${ current . child && current . child . paddingTop ? current . child . paddingTop : 0 }%;
          }
        ` } < /style> < /div>); } ; export default List ;