44 */
55
66import React , { Component } from 'react' ;
7- import { StyleSheet , View , Text , TouchableOpacity } from 'react-native' ;
7+ import { View , Text , TouchableOpacity } from 'react-native' ;
88
99import Theme from 'teaset/themes/Theme' ;
10+ import PropTypes from 'prop-types' ;
1011
1112type Props = {
1213 type : 'default' | 'cancel' ,
1314 title : string ,
1415 topSeparator : 'none' | 'full' | 'indent' ,
1516 bottomSeparator : 'none' | 'full' | 'indent' ,
1617 disabled : boolean ,
17- ...TouchableOpacity
18+ ...TouchableOpacity . propTypes
1819} ;
1920
2021export default class ActionSheetItem extends Component < Props > {
22+ static propTypes = {
23+ ...TouchableOpacity . propTypes ,
24+ type : PropTypes . oneOf ( [ 'default' , 'cancel' ] ) ,
25+ title : PropTypes . oneOfType ( [ PropTypes . element , PropTypes . string , PropTypes . number ] ) ,
26+ topSeparator : PropTypes . oneOfType ( [ PropTypes . element , PropTypes . oneOf ( [ 'none' , 'full' , 'indent' ] ) ] ) ,
27+ bottomSeparator : PropTypes . oneOfType ( [ PropTypes . element , PropTypes . oneOf ( [ 'none' , 'full' , 'indent' ] ) ] ) ,
28+ disabled : PropTypes . bool
29+ } ;
30+
2131 static defaultProps = {
2232 ...TouchableOpacity . defaultProps ,
2333 type : 'default' ,
@@ -26,11 +36,9 @@ export default class ActionSheetItem extends Component<Props> {
2636 disabled : false
2737 } ;
2838
29- buildProps ( ) {
30- let { style , title, topSeparator, bottomSeparator, activeOpacity, ...others } = this . props ;
31-
32- const { type , disabled , onPress } = this . props ;
33-
39+ buildStyle ( ) {
40+ let { style } = this . props ;
41+ const { type } = this . props ;
3442 style = [
3543 {
3644 backgroundColor : type === 'cancel' ? Theme . asCancelItemColor : Theme . asItemColor ,
@@ -43,105 +51,92 @@ export default class ActionSheetItem extends Component<Props> {
4351 justifyContent : 'center'
4452 }
4553 ] . concat ( style ) ;
54+ return style ;
55+ }
4656
47- let textStyle , separatorStyle ;
57+ renderSeparator ( separator ) {
58+ const { type } = this . props ;
59+
60+ const indentViewStyle = {
61+ backgroundColor : 'rgba(0,0,0,0)' ,
62+ paddingLeft : Theme . asItemPaddingLeft
63+ } ;
64+ let separatorStyle ;
4865 if ( type === 'cancel' ) {
49- textStyle = {
50- backgroundColor : 'rgba(0, 0, 0, 0)' ,
51- color : 'red' ,
52- fontSize : Theme . asCancelItemFontSize ,
53- textAlign : Theme . asCancelItemTitleAlign ,
54- opacity : disabled ? Theme . asItemDisabledOpacity : 1 ,
55- overflow : 'hidden'
56- } ;
5766 separatorStyle = {
5867 backgroundColor : Theme . asCancelItemSeparatorColor ,
5968 height : Theme . asCancelItemSeparatorLineWidth
6069 } ;
6170 } else {
62- textStyle = {
63- backgroundColor : 'rgba(0, 0, 0, 0)' ,
64- color : Theme . asItemTitleColor ,
65- fontSize : Theme . asItemFontSize ,
66- textAlign : Theme . asItemTitleAlign ,
67- opacity : disabled ? Theme . asItemDisabledOpacity : 1 ,
68- overflow : 'hidden'
69- } ;
7071 separatorStyle = {
7172 backgroundColor : Theme . asItemSeparatorColor ,
7273 height : Theme . asItemSeparatorLineWidth
7374 } ;
7475 }
75-
76- if ( ( title || title === '' || title === 0 ) && ! React . isValidElement ( title ) ) {
77- title = (
78- < Text style = { textStyle } numberOfLines = { 1 } >
79- { title }
80- </ Text >
81- ) ;
82- }
83-
84- const indentViewStyle = {
85- backgroundColor : StyleSheet . flatten ( style ) . backgroundColor ,
86- paddingLeft : Theme . asItemPaddingLeft
87- } ;
88- switch ( topSeparator ) {
89- case 'none' :
90- topSeparator = null ;
91- break ;
92- case 'full' :
93- topSeparator = < View style = { separatorStyle } /> ;
94- break ;
95- case 'indent' :
96- topSeparator = (
97- < View style = { indentViewStyle } >
98- < View style = { separatorStyle } />
99- </ View >
100- ) ;
101- break ;
102- }
103- switch ( bottomSeparator ) {
104- case 'none' :
105- bottomSeparator = null ;
106- break ;
76+ switch ( separator ) {
10777 case 'full' :
108- bottomSeparator = < View style = { separatorStyle } /> ;
109- break ;
78+ return < View style = { separatorStyle } /> ;
11079 case 'indent' :
111- bottomSeparator = (
80+ return (
11281 < View style = { indentViewStyle } >
11382 < View style = { separatorStyle } />
11483 </ View >
11584 ) ;
116- break ;
85+ default :
86+ return null ;
11787 }
88+ }
11889
119- if ( disabled ) activeOpacity = 1 ;
90+ renderTitle ( ) {
91+ const { type, title, disabled } = this . props ;
92+ if ( title === null || title === undefined || React . isValidElement ( title ) ) return title ;
12093
121- this . props = {
94+ let textStyle ;
95+ if ( type === 'cancel' ) {
96+ textStyle = {
97+ backgroundColor : 'rgba(0, 0, 0, 0)' ,
98+ color : Theme . asCancelItemTitleColor ,
99+ fontSize : Theme . asCancelItemFontSize ,
100+ textAlign : Theme . asCancelItemTitleAlign ,
101+ opacity : disabled ? Theme . asItemDisabledOpacity : 1 ,
102+ overflow : 'hidden'
103+ } ;
104+ } else {
105+ textStyle = {
106+ backgroundColor : 'rgba(0, 0, 0, 0)' ,
107+ color : Theme . asItemTitleColor ,
108+ fontSize : Theme . asItemFontSize ,
109+ textAlign : Theme . asItemTitleAlign ,
110+ opacity : disabled ? Theme . asItemDisabledOpacity : 1 ,
111+ overflow : 'hidden'
112+ } ;
113+ }
114+ return (
115+ < Text style = { textStyle } numberOfLines = { 1 } >
116+ { title }
117+ </ Text >
118+ ) ;
119+ }
120+
121+ render ( ) {
122+ const {
122123 style,
124+ children,
123125 type,
124126 title,
125127 topSeparator,
126128 bottomSeparator,
127129 disabled,
128130 activeOpacity,
129- onPress,
130131 ...others
131- } ;
132- }
133-
134- render ( ) {
135- this . buildProps ( ) ;
136-
137- const { style, title, topSeparator, bottomSeparator, ...others } = this . props ;
132+ } = this . props ;
138133 return (
139134 < View style = { { backgroundColor : 'rgba(0, 0, 0, 0)' } } >
140- { topSeparator }
141- < TouchableOpacity style = { style } { ...others } >
142- { title }
135+ { this . renderSeparator ( topSeparator ) }
136+ < TouchableOpacity style = { this . buildStyle ( ) } activeOpacity = { disabled ? 1 : activeOpacity } { ...others } >
137+ { this . renderTitle ( ) }
143138 </ TouchableOpacity >
144- { bottomSeparator }
139+ { this . renderSeparator ( bottomSeparator ) }
145140 </ View >
146141 ) ;
147142 }
0 commit comments