@@ -27,10 +27,6 @@ type Props = {
27
27
* Whether FAB is mini-sized, used to create visual continuity with other elements. This has no effect if `label` is specified.
28
28
*/
29
29
small ?: boolean ,
30
- /**
31
- * Icon color of button, a dark button will render light text and vice-versa.
32
- */
33
- dark ?: boolean ,
34
30
/**
35
31
* Custom color for the `FAB`.
36
32
*/
@@ -72,10 +68,9 @@ class FAB extends React.Component<Props> {
72
68
render ( ) {
73
69
const {
74
70
small,
75
- dark,
76
71
icon,
77
72
label,
78
- color : iconColor ,
73
+ color : customColor ,
79
74
onPress,
80
75
theme,
81
76
style,
@@ -84,10 +79,18 @@ class FAB extends React.Component<Props> {
84
79
85
80
const { backgroundColor = theme . colors . accent } =
86
81
StyleSheet . flatten ( style ) || { } ;
87
- const isDark =
88
- typeof dark === 'boolean' ? dark : ! color ( backgroundColor ) . light ( ) ;
89
- const textColor = iconColor || ( isDark ? white : 'rgba(0, 0, 0, .54)' ) ;
90
- const rippleColor = color ( textColor )
82
+
83
+ let foregroundColor ;
84
+
85
+ if ( typeof customColor !== 'undefined' ) {
86
+ foregroundColor = customColor ;
87
+ } else {
88
+ foregroundColor = ! color ( backgroundColor ) . light ( )
89
+ ? white
90
+ : 'rgba(0, 0, 0, .54)' ;
91
+ }
92
+
93
+ const rippleColor = color ( foregroundColor )
91
94
. alpha ( 0.32 )
92
95
. rgb ( )
93
96
. string ( ) ;
@@ -110,12 +113,12 @@ class FAB extends React.Component<Props> {
110
113
] }
111
114
pointerEvents = "none"
112
115
>
113
- < CrossFadeIcon source = { icon } size = { 24 } color = { textColor } />
116
+ < CrossFadeIcon source = { icon } size = { 24 } color = { foregroundColor } />
114
117
{ label ? (
115
118
< Text
116
119
style = { [
117
120
styles . label ,
118
- { color : textColor , fontFamily : theme . fonts . medium } ,
121
+ { color : foregroundColor , fontFamily : theme . fonts . medium } ,
119
122
] }
120
123
>
121
124
{ label . toUpperCase ( ) }
0 commit comments