0.0.21

Author: lodev09

components/ActionSheet.js

@@ -28,7 +28,9 @@ const TOP_OFFSET = 20;
 class ActionSheet extends React.Component {
   static defaultProps = {
     animated: true,
-    mode: 'default'
+    mode: 'default',
+    cancelText: 'Cancel',
+    destructive: false
   }
 
   static propTypes = {
@@ -39,7 +41,10 @@ class ActionSheet extends React.Component {
       'default', // default
       'list'
     ]),
-    title: React.PropTypes.any
+    title: React.PropTypes.any,
+    cancelText: React.PropTypes.string,
+    onCancelPress: React.PropTypes.func,
+    destructive: React.PropTypes.bool
   }
 
   constructor(props) {
@@ -121,6 +126,10 @@ class ActionSheet extends React.Component {
     this.animateToValue(0, this.props.onOpen);
   }
 
+  handleCancelOnPress = () => {
+    this.close(this.props.onCancelPress);
+  }
+
   renderActionItems() {
     const children = React.Children.toArray(this.props.children);
 
@@ -134,6 +143,14 @@ class ActionSheet extends React.Component {
       children.unshift(title);
     }
 
+    if (this.props.cancelText) {
+      children.push(
+        <ActionItem backgroundColor={theme.color.light} onPress={this.handleCancelOnPress} >
+          <Text style={styles.cancelText} >{this.props.cancelText.toUpperCase()}</Text>
+        </ActionItem>
+      );
+    }
+
     return children.map((item, i) => {
 
       const isFirstChild = i === 0;
@@ -155,8 +172,6 @@ class ActionSheet extends React.Component {
           </View>
         );
       } else {
-        const title = item.props.destructive ? <Text style={styles.actionDestructiveText} >{item.props.title.toUpperCase()}</Text> : item.props.title;
-
         const itemOnPress = () => {
           this.close(item.props.onPress);
         };
@@ -165,13 +180,13 @@ class ActionSheet extends React.Component {
           <View key={'action-item-' + i}>
             <Cell
               {...item.props}
-              title={title}
-              onPress={item.props.destructive || item.props.onPress ? itemOnPress : null}
+              onPress={item.props.onPress && itemOnPress}
               style={[
-                item.props.destructive ? styles.actionDestructive : item.props.backgroundColor && { backgroundColor: item.props.backgroundColor },
+                item.props.backgroundColor && { backgroundColor: item.props.backgroundColor },
                 isFirstChild ? styles.borderTopRadius : null,
                 isLastChild ? styles.borderBottomRadius : null
               ]}
+              tintColor={item.props.destructive && theme.color.danger}
             />
             {separator}
           </View>
@@ -232,15 +247,14 @@ const styles = StyleSheet.create({
     backgroundColor: theme.color.white
   },
 
-  actionDestructive: {
+  cancelContainer: {
     backgroundColor: theme.color.light
   },
-  actionDestructiveText: {
+  cancelText: {
     textAlign: 'center',
     fontSize: theme.font.small,
     fontWeight: '600',
-    color: theme.color.muted,
-    flex: 1
+    color: theme.color.muted
   },
   borderTopRadius: {
     borderTopRightRadius: theme.radius,

components/Cell.js

@@ -181,8 +181,7 @@ const styles = StyleSheet.create({
     textAlign: 'right'
   },
   titleContainer: {
-    minWidth: TITLE_MIN_WIDTH,
-    // flex: 1,
+    minWidth: TITLE_MIN_WIDTH
   },
   title: {
     fontSize: theme.font.medium, 

components/CellInput.js

@@ -43,6 +43,10 @@ class CellInput extends React.Component {
     }
   }
 
+  focus() {
+    this._textInput.focus();
+  }
+
   renderTextInput() {
     const textInputStyle = this.props.multiline &&
       {

components/CellSheet.js

@@ -38,6 +38,7 @@ class CellSheet extends React.Component {
           onClose={this.props.onClose}
           onOpen={this.props.onOpen}
           mode={this.props.mode}
+          cancelText={this.props.cancelText || 'Cancel'}
         >
            {this.props.children /* children should go here, not to the Cell */}
         </ActionSheet>

components/DatePicker.js

@@ -49,7 +49,10 @@ class DatePicker extends React.Component {
 
   render() {
     return (
-      <ActionSheet ref={component => this._actionSheet = component} >
+      <ActionSheet
+        ref={component => this._actionSheet = component}
+        cancelText="Done"
+      >
         {
           Platform.OS === 'ios' &&
           <DatePickerIOS
@@ -58,7 +61,6 @@ class DatePicker extends React.Component {
             onDateChange={this.handleOnDateChange}
           />
         }
-        <ActionItem title="Done" destructive />
       </ActionSheet>
     );
   }

components/SelectList.js

@@ -219,11 +219,12 @@ class SelectList extends React.Component {
 
   renderListView() {
     if (!this.props.data) {
-      const title = <Text style={styles.placeholder}>{this.props.placeholder ? this.props.placeholder : DEFAULT_PLACEHOLDER }</Text>;
       return (
         <View>
           {this.renderHeader()}
-          <Cell title={title} />
+          <Cell>
+            <Text style={styles.placeholder}>{this.props.placeholder ? this.props.placeholder : DEFAULT_PLACEHOLDER }</Text>
+          </Cell>
           <View style={styles.separator} />
           {this.props.renderFooter && this.props.renderFooter()}
         </View>
@@ -254,6 +255,7 @@ class SelectList extends React.Component {
           onClose={this.props.onClose}
           onOpen={this.props.onOpen}
           mode="list"
+          cancelText={null}
         >
           <BlurView blurType="xlight" >
             {this.renderListView()}