react-native-material-ui - npm Package Compare versions

Comparing version 0.4.2 to 0.6.0

lib/Avatar.js

@@ -1,4 +0,5 @@
-import React, { Component, PropTypes, View, Image, Text } from 'react-native';
+import { getColor } from './helpers';
+import { View, Image, Text } from 'react-native';
 import Icon from './Icon';
-import { getColor } from './helpers';
+import React, { Component, PropTypes } from 'react';
 
@@ -5,0 +6,0 @@ export default class Avatar extends Component {

lib/Button.js

@@ -1,5 +0,6 @@
-import React, { Component, PropTypes, View, Text, TouchableNativeFeedback } from 'react-native';
+import { getColor, isCompatible } from './helpers';
+import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';
+import { View, Text, TouchableNativeFeedback } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 import Ripple from './polyfill/Ripple';
-import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';
-import { getColor, isCompatible } from './helpers';
 
@@ -13,3 +14,2 @@ const styles = {
         paddingHorizontal: 16,
-        margin: 6,
         borderRadius: 2
@@ -54,3 +54,9 @@ },
     }
+    onPress = () => {
+        const { text, onPress } = this.props;
 
+        if (onPress) {
+            onPress(text);
+        }
+    }
     setElevation = () => {
@@ -78,3 +84,2 @@ this.setState({
             raised,
-            onPress,
             onLongPress
@@ -229,3 +234,3 @@ } = this.props;
                   rippleColor={rippleColor}
-                  onPress={!disabled ? onPress : null}
+                  onPress={!disabled ? this.onPress : null}
                   onLongPress={!disabled ? onLongPress : null}
@@ -252,3 +257,3 @@ style={[
               background={TouchableNativeFeedback.Ripple(rippleColor)}
-              onPress={!disabled ? onPress : null}
+              onPress={!disabled ? this.onPress : null}
               onLongPress={!disabled ? onLongPress : null}
@@ -255,0 +260,0 @@ onPressIn={raised ? this.setElevation : null}

lib/Card/Actions.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -3,0 +4,0 @@ const styles = StyleSheet.create({

lib/Card/Body.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -3,0 +4,0 @@ const styles = StyleSheet.create({

lib/Card/index.js

@@ -1,8 +0,8 @@
-import React, { Component, PropTypes, View, TouchableNativeFeedback } from 'react-native';
-import Ripple from '../polyfill/Ripple';
 import { getColor, isCompatible } from '../helpers';
-
+import { View, TouchableNativeFeedback } from 'react-native';
+import Actions from './Actions';
+import Body from './Body';
 import Media from './Media';
-import Body from './Body';
-import Actions from './Actions';
+import React, { Component, PropTypes } from 'react';
+import Ripple from '../polyfill/Ripple';
 
@@ -9,0 +9,0 @@ import { COLOR } from '../config';

lib/Card/Media.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, Image, View } from 'react-native';
+import { StyleSheet, Image, View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -3,0 +4,0 @@ const styles = StyleSheet.create({

lib/Checkbox.js

@@ -1,13 +0,6 @@
-import React, {
-    Component,
-    StyleSheet,
-    PropTypes,
-    Text,
-    View,
-    TouchableHighlight
-} from 'react-native';
-
+import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
 import { TYPO, PRIMARY, COLOR, PRIMARY_COLORS, THEME_NAME } from './config';
 import Icon from './Icon';
 import IconToggle from './IconToggle';
+import React, { Component, PropTypes } from 'react';
 
@@ -14,0 +7,0 @@ const typos = StyleSheet.create(TYPO);

lib/CheckboxGroup.js

@@ -1,4 +0,5 @@
-import React, { Component, PropTypes, View } from 'react-native';
+import { THEME_NAME, PRIMARY, PRIMARY_COLORS } from './config';
+import { View } from 'react-native';
 import Checkbox from './Checkbox';
-import { THEME_NAME, PRIMARY, PRIMARY_COLORS } from './config';
+import React, { Component, PropTypes } from 'react';
 
@@ -5,0 +6,0 @@ export default class CheckboxGroup extends Component {

lib/Divider.js

@@ -1,3 +0,4 @@
-import React, { Component, PropTypes, View } from 'react-native';
 import { THEME_NAME } from './config';
+import { View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -4,0 +5,0 @@ const styles = {

lib/Drawer/Header.js

@@ -0,3 +1,4 @@
+import { View, Image } from 'react-native';
 import HeaderAccount from './HeaderAccount';
-import React, { Component, PropTypes, View, Image } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -4,0 +5,0 @@

lib/Drawer/HeaderAccount.js

@@ -0,3 +1,4 @@
+import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import IconToggle from '../IconToggle';
-import React, { Component, PropTypes, View, Text, TouchableWithoutFeedback } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -4,0 +5,0 @@

lib/Drawer/index.js

@@ -1,6 +0,6 @@
-import React, { Component, PropTypes, ScrollView } from 'react-native';
+import { getColor } from '../helpers';
+import { ScrollView } from 'react-native';
 import { THEME_NAME, PRIMARY_COLORS } from '../config';
-import { getColor } from '../helpers';
-
 import Header from './Header';
+import React, { Component, PropTypes } from 'react';
 import Section from './Section';
@@ -7,0 +7,0 @@

lib/Drawer/Section.js

@@ -1,6 +0,7 @@
-import React, { Component, PropTypes, View, Text, TouchableNativeFeedback } from 'react-native';
+import { isCompatible } from '../helpers';
+import { TYPO } from '../config';
+import { View, Text, TouchableNativeFeedback } from 'react-native';
 import Icon from '../Icon';
+import React, { Component, PropTypes } from 'react';
 import Ripple from '../polyfill/Ripple';
-import { TYPO } from '../config';
-import { isCompatible } from '../helpers';
 
@@ -7,0 +8,0 @@ const styles = {

lib/Icon.js

@@ -1,4 +0,4 @@
-import React, { Component, PropTypes } from 'react-native';
 import { default as VectorIcon } from 'react-native-vector-icons/MaterialIcons';
 import { getColor } from './helpers';
+import React, { Component, PropTypes } from 'react';
 
@@ -5,0 +5,0 @@ export default class Icon extends Component {

lib/IconToggle.js

@@ -1,3 +0,4 @@
-import React, { Component, PropTypes, Text, View, Animated } from 'react-native';
 import { getColor } from './helpers';
+import { Text, View, Animated } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -4,0 +5,0 @@ const styles = {

lib/index.js

@@ -9,2 +9,4 @@ export { COLOR, TYPO, PRIMARY_COLORS, THEME_NAME } from './config';
 export { default as Divider } from './Divider';
+export { default as Dialog } from './Dialog/Dialog';
+export { default as DialogDefaultActions } from './Dialog/DialogDefaultActions';
 export { default as Icon } from './Icon';
@@ -21,1 +23,2 @@ export { default as IconToggle } from './IconToggle';
 export { default as Toolbar } from './Toolbar';
+export { default as ToolbarExperimental } from './Toolbar/ToolbarExperimental';

lib/List.js

@@ -1,6 +0,4 @@
-import React, {
-    Component,
+import {
     findNodeHandle,
     StyleSheet,
-    PropTypes,
     UIManager,
@@ -12,9 +10,10 @@ View,
 } from 'react-native';
-
 import { TYPO } from './config';
 import Icon from './Icon';
 import IconToggle from './IconToggle';
+import React, { Component, PropTypes } from 'react';
 
 const defaultStyles = StyleSheet.create({
     listContainer: {
+        backgroundColor: '#ffffff',
         flex: 1,
@@ -39,3 +38,2 @@ flexDirection: 'row',
     leftAvatar: {
-        flex: 1,
     },
@@ -106,3 +104,3 @@
         onPress: PropTypes.func,
-        onPressValue: PropTypes.object,
+        onPressValue: PropTypes.any,
         onLeftIconClick: PropTypes.func,
@@ -198,2 +196,3 @@ onRightIconClick: PropTypes.func
             menuActions,
+            onPress,
             onRightIconClick,
@@ -207,4 +206,3 @@ primaryColor,
 
-        return (
-            <TouchableNativeFeedback onPress={this._onListItemPressed}>
+        const content = (
                 <View style={[defaultStyles.listContainer, styles.listContainer]}>
@@ -253,2 +251,3 @@
                                           lines > 2 && { height: 22 * (lines - 1) - 4 },
+                                          lines === 'dynamic' && { height: null },
                                           defaultStyles.secondaryText
@@ -321,5 +320,14 @@ ]}
                 </View>
-            </TouchableNativeFeedback>
         );
+
+        if (onPress) {
+            return (
+                <TouchableNativeFeedback onPress={this._onListItemPressed}>
+                    {content}
+                </TouchableNativeFeedback>
+            );
+        }
+
+        return content;
     }
 }

lib/ListItemControl.js

@@ -1,11 +0,4 @@
-import React, {
-    Component,
-    StyleSheet,
-    PropTypes,
-    View,
-    Text,
-    TouchableNativeFeedback
-} from 'react-native';
-
+import { StyleSheet, View, Text, TouchableNativeFeedback } from 'react-native';
 import { TYPO } from './config';
+import React, { Component, PropTypes } from 'react';
 
@@ -12,0 +5,0 @@ const defaultStyles = StyleSheet.create({

lib/Menu/Menu.js

 import Item from './MenuItem';
 import Items from './MenuItems';
-import React, { PropTypes } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
-export default class Menu extends React.Component {
+export default class Menu extends Component {
 
@@ -7,0 +7,0 @@ static contextTypes = {

lib/Menu/MenuController.js

@@ -0,5 +1,6 @@
+import { View } from 'react-native';
 import Overlay from './Overlay';
-import React, { PropTypes, View } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
-export default class MenuController extends React.Component {
+export default class MenuController extends Component {
 
@@ -6,0 +7,0 @@ static childContextTypes = {

lib/Menu/MenuItem.js

@@ -1,2 +0,3 @@
-import React, { PropTypes, Text, TouchableNativeFeedback, View, StyleSheet } from 'react-native';
+import { Text, TouchableNativeFeedback, View, StyleSheet } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -17,3 +18,3 @@ const styles = StyleSheet.create({
 
-export default class MenuItem extends React.Component {
+export default class MenuItem extends Component {
 
@@ -20,0 +21,0 @@ static propTypes = {

lib/Menu/MenuItems.js

@@ -1,4 +0,5 @@
-import React, { PropTypes, View, StyleSheet } from 'react-native';
+import { View, StyleSheet, NativeModules } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
-const { NativeModules: { UIManager } } = React;
+const UIManager = NativeModules.UIManager;
 
@@ -21,3 +22,3 @@
 
-export default class MenuItems extends React.Component {
+export default class MenuItems extends Component {
 
@@ -24,0 +25,0 @@ static propTypes = {

lib/Menu/Overlay.js

@@ -1,8 +0,3 @@
-import React, {
-    Dimensions,
-    PropTypes,
-    TouchableWithoutFeedback,
-    View,
-    StyleSheet
-} from 'react-native';
+import { Dimensions, TouchableWithoutFeedback, View, StyleSheet } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -27,3 +22,3 @@ const window = Dimensions.get('window');
 
-export default class Overlay extends React.Component {
+export default class Overlay extends Component {
 
@@ -30,0 +25,0 @@ static propTypes = {

lib/polyfill/Ripple.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View, Animated, TouchableOpacity } from 'react-native';
+import { View, Animated, TouchableOpacity } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -3,0 +4,0 @@

lib/RadioButton.js

@@ -1,13 +0,6 @@
-import React, {
-    Component,
-    StyleSheet,
-    PropTypes,
-    Text,
-    View,
-    TouchableHighlight
-} from 'react-native';
-
+import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
+import { TYPO, PRIMARY, COLOR, THEME_NAME, PRIMARY_COLORS } from './config';
 import Icon from './Icon';
 import IconToggle from './IconToggle';
-import { TYPO, PRIMARY, COLOR, THEME_NAME, PRIMARY_COLORS } from './config';
+import React, { Component, PropTypes } from 'react';
 
@@ -14,0 +7,0 @@ const typos = StyleSheet.create(TYPO);

lib/RadioButtonGroup.js

@@ -1,4 +0,5 @@
-import React, { Component, PropTypes, View } from 'react-native';
+import { PRIMARY, PRIMARY_COLORS, THEME_NAME } from './config';
+import { View } from 'react-native';
 import RadioButton from './RadioButton';
-import { PRIMARY, PRIMARY_COLORS, THEME_NAME } from './config';
+import React, { Component, PropTypes } from 'react';
 
@@ -5,0 +6,0 @@ export default class RadioButtonGroup extends Component {

lib/Ripple.js

@@ -1,4 +0,5 @@
-import React, { Component, PropTypes, View, TouchableNativeFeedback } from 'react-native';
 import { default as PolyfillRipple } from './polyfill/Ripple';
 import { isCompatible } from './helpers';
+import { View, TouchableNativeFeedback } from 'react-native';
+import React, { Component, PropTypes } from 'react';
 
@@ -5,0 +6,0 @@ export default class Ripple extends Component {

lib/Subheader.js

@@ -1,4 +0,5 @@
-import React, { Component, StyleSheet, PropTypes, View, Text } from 'react-native';
+import { getColor } from './helpers';
+import { StyleSheet, View, Text } from 'react-native';
 import { TYPO, THEME_NAME } from './config';
-import { getColor } from './helpers';
+import React, { Component, PropTypes } from 'react';
 
@@ -19,3 +20,4 @@ const styles = StyleSheet.create({
         theme: PropTypes.oneOf(THEME_NAME),
-        lines: PropTypes.number
+        lines: PropTypes.number,
+        style: PropTypes.object,
     };
@@ -31,3 +33,3 @@
     render() {
-        const { text, color, inset, lines } = this.props;
+        const { text, color, inset, lines, style } = this.props;
 
@@ -38,3 +40,3 @@ return (
                   paddingLeft: inset ? 72 : 16
-              }]}
+              }, style]}
             >
@@ -41,0 +43,0 @@ <Text

lib/Toolbar.js

@@ -1,24 +0,21 @@
-import React, {
-    Component,
+import {
     findNodeHandle,
-    PropTypes,
+    NativeModules,
     StyleSheet,
-    UIManager,
+    Text,
+    TextInput,
+    TouchableWithoutFeedback,
     View,
-    Text,
-    TextInput
 } from 'react-native';
-
+import { getColor } from './helpers';
 import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';
-import { getColor } from './helpers';
 import Icon from './Icon';
 import IconToggle from './IconToggle';
 import isFunction from './utils';
+import React, { Component, PropTypes } from 'react';
 
+const UIManager = NativeModules.UIManager;
+
 const styles = StyleSheet.create({
     toolbar: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
         height: 56,
@@ -44,2 +41,3 @@ flexDirection: 'row',
         title: PropTypes.string,
+        onTitlePress: PropTypes.func,
         theme: PropTypes.oneOf(THEME_NAME),
@@ -62,3 +60,2 @@ primary: PropTypes.oneOf(PRIMARY_COLORS),
             onPress: PropTypes.func,
-            counter: PropTypes.shape()
         })),
@@ -72,5 +69,8 @@ menuActions: PropTypes.shape({
             onSearchClosed: PropTypes.func,
-            placeholder: PropTypes.string
-        })
-
+            placeholder: PropTypes.string,
+            onSearchPressed: PropTypes.func,
+            onSubmitEditing: PropTypes.func,
+            autoFocus: PropTypes.bool
+        }),
+        isSearchActive: PropTypes.bool,
     };
@@ -88,6 +88,7 @@
         this.state = {
-            isSearchActive: false,
+            isSearchActive: props.isSearchActive,
             searchValue: ''
         };
     }
+
     _handleShowPopupError() { }
@@ -114,2 +115,8 @@ _onMenuPressed = () => {
     _onSearchPressed = () => {
+        const { searchable } = this.props;
+
+        if (isFunction(searchable.onSearchPressed)) {
+            searchable.onSearchPressed();
+        }
+
         this.setState({
@@ -132,5 +139,12 @@ isSearchActive: true,
     };
+
+
+    focusSearchField() {
+        this._searchFieldRef.focus();
+    }
+
     render() {
         const {
             title,
+            onTitlePress,
             theme,
@@ -192,3 +206,3 @@ primary,
         if (this.state.isSearchActive) {
-            iconMap = 'keyboard-backspace';
+            iconMap = 'arrow-back';
             onIconPressMap = this._onSearchClosePressed;
@@ -230,11 +244,13 @@ styleMap.backgroundColor = getColor('paperGrey100');
                     !this.state.isSearchActive &&
-                    <Text
-                      numberOfLines={1}
-                      style={[styles.title, TYPO.paperFontTitle, {
-                          color: styleMap.color,
-                          marginLeft: iconMap ? styles.title.marginLeft : 16
-                      }]}
-                    >
-                        {title}
-                    </Text>
+                    <TouchableWithoutFeedback onPress={onTitlePress}>
+                        <Text
+                          numberOfLines={1}
+                          style={[styles.title, TYPO.paperFontTitle, {
+                              color: styleMap.color,
+                              marginLeft: iconMap ? styles.title.marginLeft : 16
+                          }]}
+                        >
+                            {title}
+                        </Text>
+                    </TouchableWithoutFeedback>
                 }
@@ -244,4 +260,6 @@ {
                     <TextInput
-                      autoFocus
+                      ref={(ref) => { this._searchFieldRef = ref; }}
+                      autoFocus={searchable.autoFocus}
                       onChangeText={this._onSearchTextChanged}
+                      onSubmitEditing={searchable.onSubmitEditing}
                       placeholder={searchable.placeholder}
@@ -248,0 +266,0 @@ style={[styles.title, TYPO.paperFontTitle, {

package.json

 {
   "name": "react-native-material-ui",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "React Native Material Design Components",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

129221

increased by29.64%

Number of package files

47

increased by17.5%

Lines of code

3789

increased by31.97%

No dependency changes