import { createComponent , createElement , createHook , useUniqueId } from 'bumbag/utils' ; import { Palette } from 'bumbag/types' ; import { MenuItemProps } from './MenuItem' ; import * as styles from './Menu.styles' ; export type LocalMenuOptionItemProps = { alignCheck ? : 'left' | 'right' ; checked ? : boolean ; checkIcon ? : MenuItemProps [ 'iconBeforeProps' ] ; defaultChecked ? : boolean ; onChange ? : ( { checked : boolean , value : string } ) => void ; palette ? : Palette ; value ? : string ; } ; export type MenuOptionItemProps = MenuItemProps & LocalMenuOptionItemProps ; const useProps = createHook < MenuOptionItemProps > ( ( props ) => { const { alignCheck , checked , checkIcon , onChange , palette , value , ... restProps } = props ; return { ... restProps , contentTextProps : { color : checked ? palette : undefined , ... restProps . contentTextProps , } , iconBefore : props . iconBefore ? props . iconBefore : alignCheck === 'left' ? ( checked ? checkIcon : { } ) : undefined , iconBeforeProps : props . iconBeforeProps ? props . iconBeforeProps : { color : checked ? palette : undefined , } , iconAfter : props . iconAfter ? props . iconAfter : alignCheck === 'right' ? ( checked ? checkIcon : { } ) : undefined , iconAfterProps : props . iconAfterProps ? props . iconAfterProps : { color : checked ? palette : undefined , } , onPress : ( ) => onChange && onChange ( { checked : ! checked , value } ) , } ; } , { defaultProps : { alignCheck : 'left' , checkIcon : { viewBoxWidth : 16 , viewBoxHeight : 16 , paths : [ 'M14 3c-.28 0-.53.11-.71.29L6 10.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l8-8A1.003 1.003 0 0014 3z' , ] , } , palette : 'primary' , } , themeKey : 'native.Menu.OptionItem' , } ) ; export const MenuOptionItem = createComponent < MenuOptionItemProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . MenuOptionItem , htmlProps , } ) ; } , { attach : { useProps , displayName : 'native.Menu.OptionItem' , } , themeKey : 'native.Menu.OptionItem' , } ) ;