Explorar el Código

Toolbar accepts button style props

Yedidya Kennard hace 8 años
padre
commit
7bb4bf8440
Se han modificado 1 ficheros con 23 adiciones y 4 borrados
  1. 23
    4
      src/RichTextToolbar.js

+ 23
- 4
src/RichTextToolbar.js Ver fichero

1
 import React, {Component, PropTypes} from 'react';
1
 import React, {Component, PropTypes} from 'react';
2
-import {ListView, View, TouchableOpacity, Text} from 'react-native';
2
+import {ListView, View, TouchableOpacity, Text, StyleSheet} from 'react-native';
3
 import {actions} from './const';
3
 import {actions} from './const';
4
 
4
 
5
 const defaultActions = [
5
 const defaultActions = [
22
   return texts;
22
   return texts;
23
 }
23
 }
24
 
24
 
25
+
25
 export default class RichTextToolbar extends Component {
26
 export default class RichTextToolbar extends Component {
26
 
27
 
27
   static propTypes = {
28
   static propTypes = {
28
     getEditor: PropTypes.func.isRequired,
29
     getEditor: PropTypes.func.isRequired,
29
     actions: PropTypes.array,
30
     actions: PropTypes.array,
30
     onPressAddLink: PropTypes.func,
31
     onPressAddLink: PropTypes.func,
31
-    onPressAddImage: PropTypes.func
32
+    onPressAddImage: PropTypes.func,
33
+    selectedButtonStyle: PropTypes.object,
34
+    unselectedButtonStyle: PropTypes.object
32
   };
35
   };
33
 
36
 
34
   constructor(props) {
37
   constructor(props) {
73
     }
76
     }
74
   }
77
   }
75
 
78
 
79
+  _getButtonSelectedStyle() {
80
+    return this.props.selectedButtonStyle ? this.props.selectedButtonStyle : styles.defaultSelectedButton;
81
+  }
76
 
82
 
83
+  _getButtonUnselectedStyle() {
84
+    return this.props.unselectedButtonStyle ? this.props.unselectedButtonStyle : styles.defaultUnselectedButton;
85
+  }
77
 
86
 
78
   _renderAction(action, selected) {
87
   _renderAction(action, selected) {
79
     return (
88
     return (
80
       <TouchableOpacity
89
       <TouchableOpacity
81
           key={action}
90
           key={action}
82
-          style={{height: 50, width: 50, backgroundColor: selected? 'red' : undefined, justifyContent: 'center'}}
91
+          style={[
92
+            {height: 50, width: 50, justifyContent: 'center'},
93
+            selected ? this._getButtonSelectedStyle() : this._getButtonUnselectedStyle()
94
+          ]}
83
           onPress={() => this._onPress(action)}
95
           onPress={() => this._onPress(action)}
84
       >
96
       >
85
         <Text style={{textAlign: 'center'}}>
97
         <Text style={{textAlign: 'center'}}>
144
         break;
156
         break;
145
     }
157
     }
146
   }
158
   }
147
-}
159
+}
160
+
161
+const styles = StyleSheet.create({
162
+  defaultSelectedButton: {
163
+    backgroundColor: 'red'
164
+  },
165
+  defaultUnselectedButton: {}
166
+});