new stuff

Author: lodev09

components/ActionSheet.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Cell from './Cell';
+import Cell, { CELL_MIN_HEIGHT } from './Cell';
 import CellGroup from './CellGroup';
 
 import theme from '../lib/theme';
@@ -22,8 +22,9 @@ export const ActionItem = function(props) {
   return <View {...props} />
 }
 
-const BORDER_RADIUS = theme.isIOS ? theme.radius : 0;
-const MARGIN = theme.isIOS ? theme.margin : 0;
+const BORDER_RADIUS = theme.value(theme.radius, 0);
+const MARGIN = theme.value(theme.margin, 0);
+const STATUS_BAR_HEIGHT = 20;
 
 class ActionSheet extends React.Component {
   static defaultProps = {
@@ -180,13 +181,23 @@ class ActionSheet extends React.Component {
           this.close(item.props.onPress);
         };
 
+        let isDisabled = false;
         const tintColor = item.props.destructive ? theme.color.danger : item.props.tintColor;
 
+        if (item.props.disabled) {
+          if (typeof item.props.disabled === 'function') {
+            isDisabled = item.props.disabled();
+          } else {
+            isDisabled = item.props.disabled;
+          }
+        }
+
         return (
           <View key={'action-item-' + i}>
             <Cell
               {...item.props}
               onPress={item.props.onPress ? itemOnPress : null}
+              disabled={isDisabled}
               style={[
                 item.props.backgroundColor && { backgroundColor: item.props.backgroundColor },
                 isFirstChild && styles.borderTopRadius,
@@ -264,7 +275,7 @@ const styles = StyleSheet.create({
     backgroundColor: theme.color.white
   },
   title: {
-    fontSize: theme.isIOS ? theme.font.xsmall : theme.font.small,
+    fontSize: theme.value(theme.font.xsmall, theme.font.small),
     color: theme.color.muted
   },
   actionsContainer: {
@@ -280,7 +291,7 @@ const styles = StyleSheet.create({
     backgroundColor: theme.color.white
   },
   actionItemsList: {
-    marginTop: theme.isIOS ? 68 : 48
+    marginTop: theme.value(CELL_MIN_HEIGHT + STATUS_BAR_HEIGHT, CELL_MIN_HEIGHT)
   },
   cancelText: {
     textAlign: 'center',
@@ -290,12 +301,10 @@ const styles = StyleSheet.create({
     flex: 1
   },
   borderTopRadius: {
-    borderTopRightRadius: BORDER_RADIUS,
-    borderTopLeftRadius: BORDER_RADIUS,
+    ...theme.borderRadius.top
   },
   borderBottomRadius: {
-    borderBottomRightRadius: BORDER_RADIUS,
-    borderBottomLeftRadius: BORDER_RADIUS
+    ...theme.borderRadius.bottom
   }
 });
 

components/Cell.js

@@ -11,11 +11,11 @@ import {
   Platform
 } from 'react-native';
 
-const CELL_MIN_HEIGHT = 48;
+export const CELL_MIN_HEIGHT = 48;
 const ICON_DEFAULT_SIZE = 24;
 const TITLE_MIN_WIDTH = 98;
 const CORNER_MIN_WIDTH = theme.padding;
-const Touchable = theme.isIOS ? TouchableHighlight : TouchableNativeFeedback;
+const Touchable = theme.value(TouchableHighlight, TouchableNativeFeedback);
 let ANDROID_BACKGROUND = null;
 
 if (theme.isAndroid) {
@@ -42,6 +42,7 @@ class Cell extends React.Component {
     selected: false,
     iconSelected: 'check-box',
     iconUnSelected: 'check-box-outline-blank',
+    disabled: false,
     onSelect: () => null
   }
 
@@ -60,7 +61,8 @@ class Cell extends React.Component {
     iconUnSelected: React.PropTypes.string,
     onSelect: React.PropTypes.func,
     onPress: React.PropTypes.func,
-    onLongPress: React.PropTypes.func
+    onLongPress: React.PropTypes.func,
+    disabled: React.PropTypes.bool
   }
 
   constructor(props) {
@@ -273,9 +275,17 @@ class Cell extends React.Component {
       <Touchable
         background={theme.isAndroid && this.props.onPress ? ANDROID_BACKGROUND : null}
         onPress={this.props.onPress || isSelecting ? this.handleCellOnPress : null}
+        disabled={this.props.disabled}
         onLongPress={this.props.onLongPress}
       >
-        <View style={[ styles.container, this.props.style, this.props.selected && isSelecting ? styles.selectedContainer : null ]} >
+        <View
+          style={[
+            styles.container,
+            this.props.selected && isSelecting ? styles.selectedContainer : null,
+            this.props.disabled && { opacity: 0.5 },
+            this.props.style
+          ]}
+        >
           {this.renderSelect()}
           <View
             style={[

components/CellGroup.js

@@ -98,7 +98,7 @@ const styles = StyleSheet.create({
     ...theme.separator
   },
   header: {
-    paddingVertical: theme.isIOS ? theme.padding : theme.padding / 2,
+    paddingVertical: theme.value(theme.padding, theme.padding / 2),
     paddingHorizontal: theme.padding * 1.5
   },
   headerText: {

components/CellInput.js

@@ -9,35 +9,46 @@ import {
   TextInput
 } from 'react-native';
 
-const BASE_HEIGHT = 23;
+const BASE_HEIGHT = 20;
+const OFFSET = theme.value(10, 4);
 
 class CellInput extends React.Component {
   static defaultProps = {
     rows: 1,
-    autoResize: false
+    autoResize: false,
+    minRows: 1
   }
 
   static propTypes = {
     ...TextInput.propTypes,
     rows: React.PropTypes.number,
+    minRows: React.PropTypes.number,
     autoResize: React.PropTypes.bool
   }
 
   constructor(props) {
     super(props);
 
+    let height = BASE_HEIGHT;
+
+    // autorize is not yet supported in android (?)
+    if (this.props.multiline && (!this.props.autoResize || theme.isAndroid)) {
+      height = Math.max(BASE_HEIGHT * this.props.rows, BASE_HEIGHT * this.props.minRows);
+    }
+
     this.state = {
-      rows: this.props.rows
+      height
     }
   }
 
   handleOnContentSizeChange = (e) => {
     const contentHeight = e.nativeEvent.contentSize.height;
 
-    if (this.props.autoResize) {
+    // autorize is not yet supported in android (?)
+    if (this.props.autoResize && theme.isIOS) {
       if ((contentHeight - contentHeight % BASE_HEIGHT) / BASE_HEIGHT < this.props.rows) {
-        this.setNativeProps({
-          height: contentHeight
+        this.setState({
+          height: Math.max(BASE_HEIGHT * this.props.minRows, contentHeight)
         });
       }
     }
@@ -56,22 +67,17 @@ class CellInput extends React.Component {
   }
 
   renderTextInput() {
-    const textInputStyle = this.props.multiline &&
-      {
-        // paddingBottom: theme.padding,
-        height: this.props.autoResize ? BASE_HEIGHT : BASE_HEIGHT * this.props.rows
-      }
-
     return (
       <TextInput
         ref={component => this._textInput = component}
         clearButtonMode="while-editing"
         selectionColor={theme.color.info}
+        placeholderTextColor={this.props.placeholderTextColor || theme.color.muted}
+        autoCapitalize="sentences"
         {...this.props}
-        style={[ styles.textInput, textInputStyle, this.props.style ]}
+        style={[ styles.textInput, { height: this.state.height + OFFSET } ]}
         onContentSizeChange={this.handleOnContentSizeChange}
         placeholder={this.props.multiline === true ? this.props.title || this.props.placeholder : this.props.placeholder}
-        placeholderTextColor={theme.color.muted}
         underlineColorAndroid="transparent"
       />
     );
@@ -82,8 +88,10 @@ class CellInput extends React.Component {
       <Cell
         icon={this.props.icon}
         tintColor={this.props.tintColor}
+        disclosure={this.props.disclosure}
+        contentPosition="top"
         title={!this.props.multiline && this.props.title}
-        style={this.props.editable === false && styles.inputDisabled}
+        style={[ this.props.editable === false && styles.inputDisabled, this.props.style ]}
       >
         {this.renderTextInput()}
       </Cell>
@@ -95,6 +103,7 @@ const styles = StyleSheet.create({
   textInput: {
     fontSize: theme.font.medium,
     textAlign: 'left',
+    textAlignVertical: 'top',
     flex: 1,
     height: BASE_HEIGHT,
     padding: 0

components/CellSwipeable.js

@@ -3,8 +3,7 @@ import React from 'react';
 import Cell from './Cell';
 
 import {
-	View,
-	StyleSheet
+	View
 } from 'react-native';
 
 // https://raw.githubusercontent.com/facebook/react-native/master/Libraries/Experimental/SwipeableRow/SwipeableRow.js

components/SelectList.js

@@ -261,7 +261,7 @@ class SelectList extends React.Component {
     }
 
     return (
-      <View style={this.props.modal === true ? styles.headerView : styles.separator} />
+      <View style={styles.separator} />
     );
   }
 
@@ -275,13 +275,14 @@ class SelectList extends React.Component {
   }
 
   renderListView() {
-    if (!this.props.data) {
+    if (!this.props.data || (this.props.realm && this.props.data && this.props.data.length === 0)) {
       return (
         <View>
           {this.renderHeader()}
-          <Cell>
-            <Text style={styles.placeholder}>{this.props.placeholder ? this.props.placeholder : DEFAULT_PLACEHOLDER }</Text>
-          </Cell>
+          <Cell
+            title={this.props.placeholder || DEFAULT_PLACEHOLDER }
+            tintColor={theme.color.muted}
+          />
           <View style={styles.separator} />
           {this.props.renderFooter && this.renderFooter()}
         </View>
@@ -339,20 +340,7 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
     backgroundColor: BACKGROUND_COLOR,
-    elevation: 5,
-    zIndex: 10
-  },
-  placeholder: {
-    flex: 1,
-    fontSize: theme.font.small,
-    fontWeight: '500',
-    color: theme.color.muted
-  },
-  headerView: {
-    ...theme.border.top,
-    ...theme.border.bottom,
-    height: 5,
-    backgroundColor: BACKGROUND_COLOR
+    elevation: 5
   },
   headerText: {
     fontSize: theme.font.xsmall,

components/TagsInput.js

@@ -244,7 +244,7 @@ const styles = StyleSheet.create({
   },
   textInput: {
     fontSize: theme.font.medium,
-    height: theme.isIOS ? 20 : 25,
+    height: theme.value(20, 25),
     padding: 0
   },
   textInputFocus: {

lib/theme.js

@@ -24,27 +24,42 @@ const colors = {
   lightGrey: '#e9e9e9'
 };
 
-const borderWidth = StyleSheet.hairlineWidth; // 1 / PixelRatio.get();
+const value = (ios = null, android = null) => {
+  return Platform.select({
+    ios,
+    android
+  });
+};
+
+const borderWidth = StyleSheet.hairlineWidth;
+const radius = value(5, 2);
+const padding = value(10, 16);
+const margin = value(10, 8);
 
 const borders = {};
+const borderRadius = {};
+
 ['Bottom', 'Top', 'Left', 'Right'].forEach((key) => {
   const keyName = key === 'all' ? '' : key;
 
   borders[key.toLowerCase()] = {
     ['border' + keyName + 'Width']: borderWidth,
     ['border' + keyName + 'Color']: colors.border
   };
+
+  borderRadius[key.toLowerCase()] = {
+    ['border' + keyName + 'RightRadius']: radius,
+      ['border' + keyName + 'LeftRadius']: radius,
+  };
 });
 
 export default theme = {
   border: { ...borders },
+  borderRadius: { ...borderRadius },
   separator: {
     backgroundColor: colors.border,
     height: borderWidth
   },
-  radius: Platform.OS === 'ios' ? 5 : 2,
-  padding: Platform.OS === 'ios' ? 10 : 16,
-  margin: Platform.OS === 'ios' ? 10 : 8,
   color: colors,
   font: {
     xxsmall: 10,
@@ -57,7 +72,6 @@ export default theme = {
   },
   background: colors.light,
   backgroundDarker: colors.lightGrey,
-  borderWidth: borderWidth,
   borderColor: colors.border,
   iconWidth: 29,
   styles: {
@@ -68,6 +82,11 @@ export default theme = {
       alignItems: 'flex-end'
     }
   },
-  isAndroid: Platform.OS === 'android',
-  isIOS: Platform.OS === 'ios'
+  isAndroid: value(false, true),
+  isIOS: value(true, false),
+  borderWidth,
+  radius,
+  padding,
+  margin,
+  value
 };