@@ -11,30 +11,10 @@ import {
1111import  {  Border  }  from  '../common/styleElements' ; 
1212import  {  ThemeContext  }  from  '../common/theming/Theme' ; 
1313
14- import  {  Text  }  from  '..' ; 
14+ import  {  Text ,   CheckmarkIcon  }  from  '..' ; 
1515
16- const  switchSize  =  20 ; 
17- 
18- const  symbols  =  { 
19-   checkbox : { 
20-     default :
21-       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQoU42Q0Q4AIARFj///6BqNSat4sXFcF6ER8mEGIC9IAY2AbCKpOnBAVgA2wIuac8MFQ/m6Ih9UjVdvy3njTUwR1AkKqm4yNwAAAABJRU5ErkJggg==' , 
22-     disabled :
23-       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAR0lEQVQoU2NkIAIw4lPT0tryv6a6hhGnIpACkAFwRTAdMFNhCjAUwQTQFYDEwdYhS8BMA1kDY8MZ2EzAUAQzEdkErIpwBQcA7RckCvjAHfcAAAAASUVORK5CYII=' , 
24-   } , 
25-   radio : { 
26-     default :
27-       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKElEQVQoU2NkIAAYSVXwH6oBrhHZBJgkzFCwHEkKQBrwWoHVvQR9AQAfmgQJp08TYAAAAABJRU5ErkJggg==' , 
28-     disabled :
29-       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALUlEQVQoU2NkIAAYSVLQ0tryH6ShproGrhHOgEnCTIQpIl4BSCdeK3A5lqAvAEBkEAkDjL/SAAAAAElFTkSuQmCC' , 
30-   } , 
31-   indeterminate : { 
32-     default :
33-       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC' , 
34-     disabled :
35-       'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC' , 
36-   } , 
37- } ; 
16+ const  checkboxSize  =  20 ; 
17+ const  radioSize  =  20 ; 
3818
3919export  type  SwitchStatus  =  'checked'  |  'unchecked'  |  'indeterminate' ; 
4020
@@ -67,46 +47,41 @@ export const SwitchBase = ({
6747  const  theme  =  useContext ( ThemeContext ) ; 
6848  const  [ isPressed ,  setIsPressed ]  =  React . useState ( false ) ; 
6949  const  isRadio  =  component  ===  'radio' ; 
50+   const  switchSize  =  component  ===  'checkbox'  ? checkboxSize  : radioSize ; 
7051  const  boxSize  =  variant  ===  'flat'  ? switchSize  -  4  : switchSize ; 
7152  const  borderRadius  =  isRadio  ? boxSize  /  2  : 0 ; 
7253
7354  const  renderCheckmark  =  ( )  =>  { 
74-     const  symbolOffset  =  variant  ===  'flat'  ? 2  : 4 ; 
7555    if  ( status  ===  'checked' )  { 
76-       const  symbol  =  symbols [ component ] [ disabled  ? 'disabled'  : 'default' ] ; 
77- 
78-       return  ( 
79-         < ImageBackground 
80-           // border to compensate for Border 
81-           style = { [ 
82-             { 
83-               width : boxSize , 
84-               height : boxSize , 
85-               borderWidth : symbolOffset , 
86-               borderColor : 'transparent' , 
87-             } , 
88-           ] } 
89-           imageStyle = { { 
90-             resizeMode : 'contain' , 
91-             flex : 1 , 
92-           } } 
93-           source = { { 
94-             uri : symbol , 
56+       return  component  ===  'checkbox'  ? ( 
57+         < CheckmarkIcon  disabled = { disabled }  /> 
58+       )  : ( 
59+         < View 
60+           style = { { 
61+             borderRadius : 6 , 
62+             height : 6 , 
63+             width : 6 , 
64+             backgroundColor : disabled 
65+               ? theme . checkmarkDisabled 
66+               : theme . checkmark , 
9567          } } 
9668        /> 
9769      ) ; 
9870    } 
9971    if  ( status  ===  'indeterminate' )  { 
100-       const  symbol  =  symbols [ status ] [ disabled  ? 'disabled'  : 'default' ] ; 
101- 
10272      return  ( 
10373        < ImageBackground 
10474          style = { [ {  width : '100%' ,  height : '100%'  } ] } 
10575          imageStyle = { { 
10676            resizeMode : 'repeat' , 
10777          } } 
10878          source = { { 
109-             uri : symbol , 
79+             uri : { 
80+               default :
81+                 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC' , 
82+               disabled :
83+                 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC' , 
84+             } [ disabled  ? 'disabled'  : 'default' ] , 
11085          } } 
11186        /> 
11287      ) ; 
@@ -189,6 +164,8 @@ const styles = StyleSheet.create({
189164  } , 
190165  switchSymbol : { 
191166    marginRight : 4 , 
167+     alignItems : 'center' , 
168+     justifyContent : 'center' , 
192169  } , 
193170  labelWrapper : { 
194171    paddingHorizontal : 4 , 
0 commit comments