import React from 'react' ; import { View , StyleSheet } from 'react-native' ; import { ListButton } from './list-button' ; import { ToggleIconButton } from './toggle-icon-button' ; import { ColorListButton } from './color-list-button' ; import type { ColorListData , TextListData , ToggleData } from '../../types' ; import { formatType } from '../../constants/formats' ; import { useToolbar } from './toolbar-context' ; interface Props { tools : Array < ToggleData | TextListData | ColorListData > ; } export const ToolSet = ( props ) => { const { tools } = props ; const { styles } = useToolbar ( ) ; const renderToggle = ( index , data ) => ( < ToggleIconButton key = { index } name = { data . name } source = { data . source } valueOff = { data . valueOff } valueOn = { data . valueOn } / > ) ; const renderTextList = ( index , data ) => ( < ListButton key = { index } name = { data . name } items = { data . values } / > ) ; const renderColorList = ( index , data ) => ( < ColorListButton key = { index } name = { data . name } items = { data . values } source = { data . source } / > ) ; const rootStyle = styles ?. toolbar ?. toolset ?. root ? styles . toolbar ?. toolset ?. root ( defaultStyles . toolset ) : defaultStyles . toolset ; return ( < View style = { rootStyle } > { tools . map ( ( tool , index ) => { const { type } = tool ; if ( type === formatType . select ) { return renderTextList ( index , tool as TextListData ) ; } else if ( type === formatType . color ) { return renderColorList ( index , tool as ColorListData ) ; } else { return renderToggle ( index , tool as ToggleData ) ; } } ) } < /View>); } ; const defaultStyles = StyleSheet . create ( { toolset : { flexDirection : 'row' , justifyContent : 'flex-start' , alignItems : 'flex-start' , paddingTop : 2 , paddingBottom : 2 , paddingLeft : 3 , paddingRight : 3 , marginRight : 1 , } , } ) ;