import React from 'react' ; import { View , Image , StyleSheet , TouchableOpacity , ImageSourcePropType , } from 'react-native' ; import type { ToggleData , ToolbarTheme } from '../../types' ; import { useToolbar } from './toolbar-context' ; interface Props { name : string ; source : ImageSourcePropType ; items : Array < ToggleData > ; } export const ColorListButton = ( { name , items , source } ) => { const { theme , show , hide , open , selectionName , getSelected , styles , } = useToolbar ( ) ; const defaultStyles = makeStyles ( theme ) ; const toolStyle = styles ?. toolbar ?. toolset ?. colorListButton ?. tool ? styles . toolbar ?. toolset ?. colorListButton . tool ( defaultStyles . tool ) : defaultStyles . tool ; const overlayStyle = styles ?. toolbar ?. toolset ?. colorListButton ?. overlay ? styles . toolbar ?. toolset ?. colorListButton . overlay ( defaultStyles . overlay ) : defaultStyles . overlay ; const imageStyle = styles ?. toolbar ?. toolset ?. colorListButton ?. image ? styles . toolbar ?. toolset ?. colorListButton . image ( defaultStyles . image ) : defaultStyles . image ; const showMenu = ( ) => { if ( open && selectionName === name ) hide ( ) ; else show ( name , items ) ; } ; const selectedValue = getSelected ( name ) ; const selectedItem = items . find ( ( x ) => x . valueOn === selectedValue ) ; const isOpen = selectionName === name ; return ( < TouchableOpacity onPress = { showMenu } > < View style = { toolStyle } > < Image source = { source } style = { [ imageStyle , { tintColor : selectedItem && selectedItem . valueOn !== false && typeof selectedItem . valueOn === 'string' ? selectedItem . valueOn : theme . color , } , ] } / > { isOpen && < View style = { overlayStyle } />} < /View> < /TouchableOpacity>); } ; const makeStyles = ( theme ) => StyleSheet . create ( { overlay : { ... StyleSheet . absoluteFillObject , backgroundColor : theme . overlay , borderRadius : 3 , } , tool : { borderRadius : 3 , alignItems : 'center' , justifyContent : 'center' , padding : 2 , marginRight : 4 , marginLeft : 4 , height : Math . round ( theme . size ) , width : Math . round ( theme . size ) , } , image : { height : Math . round ( theme . size * 0.6 ) , width : Math . round ( theme . size * 0.6 ) , tintColor : theme . color , } , } ) ;