license import React from 'react' ; import { SvgProps } from 'react-native-svg' ; import { GestureResponderEvent , NativeSyntheticEvent , StyleSheet , TargetedEvent , View , } from 'react-native' ; import { EvaStatus , FalsyText , RenderProp , TouchableWeb , TouchableWebElement , TouchableWebProps , Overwrite , LiteralUnion , } from '../../devsupport' ; import { Interaction , styled , StyledComponentProps , StyleType , } from '../../theme' ; import { TextProps } from '../text/text.component' ; import { CheckMark , CheckMarkProps , } from '../shared/checkmark.component' ; import { Minus , MinusProps , } from '../shared/minus.component' ; type CheckBoxStyledProps = Overwrite < StyledComponentProps , { appearance ? : LiteralUnion < 'default' | string > ; } > ; export interface CheckBoxProps extends TouchableWebProps , CheckBoxStyledProps { children ? : RenderProp < TextProps > | React . ReactText ; checked ? : boolean ; onChange ? : ( checked : boolean , indeterminate : boolean ) => void ; indeterminate ? : boolean ; status ? : EvaStatus ; } export type CheckBoxElement = React . ReactElement < CheckBoxProps > ; extends React . Component property property property property property property overview-example overview-example overview-example overview-example overview-example overview-example @ styled ( 'CheckBox' ) export class CheckBox extends React . Component < CheckBoxProps > { private onMouseEnter = ( event ) : void => { this . props . eva . dispatch ( [ Interaction . HOVER ] ) ; this . props . onMouseEnter && this . props . onMouseEnter ( event ) ; } ; private onMouseLeave = ( event ) : void => { this . props . eva . dispatch ( [ ] ) ; this . props . onMouseLeave && this . props . onMouseLeave ( event ) ; } ; private onFocus = ( event ) : void => { this . props . eva . dispatch ( [ Interaction . FOCUSED ] ) ; this . props . onFocus && this . props . onFocus ( event ) ; } ; private onBlur = ( event ) : void => { this . props . eva . dispatch ( [ ] ) ; this . props . onBlur && this . props . onBlur ( event ) ; } ; private onPress = ( ) : void => { this . props . eva . dispatch ( [ ] ) ; this . props . onChange && this . props . onChange ( ! this . props . checked , false ) ; } ; private onPressIn = ( event ) : void => { this . props . eva . dispatch ( [ Interaction . ACTIVE ] ) ; this . props . onPressIn && this . props . onPressIn ( event ) ; } ; private onPressOut = ( event ) : void => { this . props . eva . dispatch ( [ ] ) ; this . props . onPressOut && this . props . onPressOut ( event ) ; } ; private getComponentStyle = ( source ) => { const { textMarginHorizontal , textFontFamily , textFontSize , textFontWeight , textColor , iconWidth , iconHeight , iconBorderRadius , iconTintColor , outlineWidth , outlineHeight , outlineBorderRadius , outlineBackgroundColor , ... containerParameters } = source ; return { selectContainer : containerParameters , text : { marginHorizontal : textMarginHorizontal , fontFamily : textFontFamily , fontSize : textFontSize , fontWeight : textFontWeight , color : textColor , } , icon : { width : iconWidth , height : iconHeight , fill : iconTintColor , stroke : iconTintColor , strokeWidth : 3 , } , highlight : { width : outlineWidth , height : outlineHeight , borderRadius : outlineBorderRadius , backgroundColor : outlineBackgroundColor , } , } ; } ; private renderIconElement = ( style ) : React . ReactElement < SvgProps > => { const Icon = this . props . indeterminate ? Minus : CheckMark ; return ( < Icon { ... style } / > ) ; } ; public render ( ) { const { eva , style , disabled , children , ... touchableProps } = this . props ; const evaStyle = this . getComponentStyle ( eva . style ) ; return ( < TouchableWeb { ... touchableProps } style = { [ styles . container , style ] } disabled = { disabled } onMouseEnter = { this . onMouseEnter } onMouseLeave = { this . onMouseLeave } onFocus = { this . onFocus } onBlur = { this . onBlur } onPress = { this . onPress } onPressIn = { this . onPressIn } onPressOut = { this . onPressOut } > < View style = { styles . highlightContainer } > < View style = { [ evaStyle . highlight , styles . highlight ] } /> < View style = { [ evaStyle . selectContainer , styles . selectContainer ] } > { this . renderIconElement ( evaStyle . icon ) } < /View> < /View> < FalsyText style = { evaStyle . text } component = { children } / > < /TouchableWeb>); } } const styles = StyleSheet . create ( { container : { flexDirection : 'row' , alignItems : 'center' , } , highlightContainer : { justifyContent : 'center' , alignItems : 'center' , } , selectContainer : { justifyContent : 'center' , alignItems : 'center' , } , highlight : { position : 'absolute' , } , } ) ;