import { Pressable, ViewStyle, type PressableProps } from 'react-native'; import { useThemeColor } from '@/hooks/use-theme-color'; export type ThemedPressableProps = PressableProps & { lightColor?: string; darkColor?: string; lvl?:number; lvlPressed?:number; border?:number; opacity?:string; shadow?: boolean; }; //nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\ export function ThemedButton({ style, lightColor, darkColor,lvl=1,lvlPressed=1,border=-1,opacity="FF",shadow=false, ...otherProps }: ThemedPressableProps) { var lvlStr:string = "background"; var lvlStrPressed:string = "background"; var borderColor =""; var borderWidth = 0; if(lvl>=0 && lvl<6){ lvlStr+=lvl; } else lvlStr+='5'; if((lvl+lvlPressed)>=0 && (lvl+lvlPressed)<6){ lvlStrPressed+=(lvl+lvlPressed); } else lvlStrPressed+='0'; const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity; const backgroundPressed = useThemeColor({ light: lightColor, dark: darkColor },lvlStrPressed as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity; if(border!=-1){ var borderStr = ""; if(border>=0 && border<6){ borderStr="background"+border; borderColor = useThemeColor({ light: lightColor, dark: darkColor },borderStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5'); borderWidth = 2; } else{ borderColor = backgroundColor } } const shadowStyle: ViewStyle = { //android elevation: 10, //iOS shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.2, shadowRadius: 6, } return [{ backgroundColor: state.pressed ? backgroundPressed: backgroundColor, borderColor, borderWidth }, shadow && shadowStyle, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>; }