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

Comparing version 0.3.5 to 0.3.6

lib/Avatar.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View, Image, Text } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, Image, Text} from "react-native";
 import Icon from './Icon';
@@ -3,0 +4,0 @@ import { getColor } from './helpers';

lib/Button.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View, Text, TouchableNativeFeedback, Platform} from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, Text, TouchableNativeFeedback, Platform} from "react-native";
 import Ripple from './polyfill/Ripple';
@@ -3,0 +4,0 @@ import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';

lib/Card/Actions.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, View } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {StyleSheet, View} from "react-native";
 
@@ -3,0 +4,0 @@ export default class Actions extends Component {

lib/Card/Body.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, View } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {StyleSheet, View} from "react-native";
 
@@ -3,0 +4,0 @@ export default class Body extends Component {

lib/Card/index.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View, TouchableNativeFeedback } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, TouchableNativeFeedback} from "react-native";
 import Ripple from '../polyfill/Ripple';
@@ -3,0 +4,0 @@ import { getColor, isCompatible } from '../helpers';

lib/Card/Media.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, Image, View } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {StyleSheet, Image, View} from "react-native";
 
@@ -3,0 +4,0 @@ export default class Media extends Component {

lib/Checkbox.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, Text, View, TouchableHighlight } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {StyleSheet, Text, View, TouchableHighlight} from "react-native";
 import { TYPO, PRIMARY, COLOR, PRIMARY_COLORS, THEME_NAME } from './config';
@@ -3,0 +4,0 @@ import Icon from './Icon';

lib/CheckboxGroup.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View} from "react-native";
 import Checkbox from './Checkbox';
@@ -3,0 +4,0 @@ import { THEME_NAME, PRIMARY, PRIMARY_COLORS } from './config';

lib/Divider.js

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

lib/Drawer/Header.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View, Image } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, Image} from "react-native";
 
@@ -3,0 +4,0 @@ export default class Header extends Component {

lib/Drawer/index.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, ScrollView } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {ScrollView} from "react-native";
 import { THEME_NAME, PRIMARY_COLORS } from '../config';
@@ -3,0 +4,0 @@ import { getColor } from '../helpers';

lib/Drawer/Section.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View, Text, TouchableNativeFeedback } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, Text, TouchableNativeFeedback} from "react-native";
 import Icon from '../Icon';
@@ -3,0 +4,0 @@ import Ripple from '../polyfill/Ripple';

lib/Icon.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View} from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View} from "react-native";
 import { default as VectorIcon } from 'react-native-vector-icons/MaterialIcons';
@@ -11,3 +12,4 @@ import { getColor } from './helpers';
         size: PropTypes.number,
-        color: PropTypes.string
+        color: PropTypes.string,
+        allowFontScaling: PropTypes.bool
     };
@@ -17,7 +19,8 @@
         size: 30,
-        color: '#757575'
+        color: '#757575',
+        allowFontScaling: true
     };
 
     render() {
-        const { name, style, size, color } = this.props;
+        const { name, style, size, color, allowFontScaling} = this.props;
 
@@ -30,2 +33,3 @@ return (
                 style={style}
+                allowFontScaling={allowFontScaling}
             />
@@ -32,0 +36,0 @@ );

lib/IconToggle.js

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

lib/List.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, View, Text, TouchableWithoutFeedback } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {StyleSheet, View, Text, TouchableWithoutFeedback} from "react-native";
 import { TYPO } from './config';
@@ -3,0 +4,0 @@

lib/polyfill/Ripple.js

@@ -1,2 +0,4 @@
-import React, { Component, PropTypes, View, Animated, TouchableOpacity } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, Animated, TouchableOpacity, Platform} from "react-native";
+
 import elevationPolyfill from './Elevation';
@@ -38,6 +40,29 @@
         const { fadeValue ,size, pageX, pageY, rippling, scaleValue, location, elevation } = this.state;
+        let outerStyle = {}, innerStyle = style;
 
+        // Extract padding, margin from style since IOS overflow: hidden has issues with the shadow
+        if(Platform.OS == 'ios') {
+            ({outerStyle, innerStyle} = (style instanceof Array ? style : [style]).reduce((obj, styles) => {
+                if (styles instanceof Object) {
+                    Object.entries(styles).forEach(
+                        ([name, value]) =>
+                            [
+                                'marginLeft',
+                                'marginRight',
+                                'marginTop',
+                                'marginBottom',
+                                'marginHorizontal',
+                                'marginVertical',
+                                'margin',
+                                'borderRadius',
+                                'backgroundColor'
+                            ].indexOf(name) !== -1 ? obj.outerStyle[name] = value : obj.innerStyle[name] = value
+                    )
+                }
+                return obj
+            }, {outerStyle: {}, innerStyle: {}}));
+        }
+
         return (
             <TouchableOpacity
-                ref='container'
                 activeOpacity={1}
@@ -50,26 +75,29 @@ onPress={onPress}
                 <View
-                    style={[style || {}, elevationPolyfill(elevation ? elevation : 0)]}
+                    style={[elevationPolyfill(elevation ? elevation : 0), outerStyle]}
                 >
-                    <Animated.View  style={[
-                        styles.background, {
-                            backgroundColor: rippling ? rippleColor : 'transparent',
-                            opacity: fadeValue
-                        }
-                    ]}/>
-                    <Animated.View style={[
-                        styles.ripple,
-                        location &&
+                    <View ref="container" style={[styles.container, innerStyle]}>
+                        {children}
+                        <Animated.View  style={[
+                            styles.background, {
+                                backgroundColor: rippling ? rippleColor : 'transparent',
+                                opacity: fadeValue
+                            }
+                        ]}/>
+                        <Animated.View style={[
+                            styles.ripple,
+                            location &&
+                                {
+                                    backgroundColor: rippleColor,
+                                    width: size,
+                                    height: size,
+                                    top: pageY - location.pageY - size / 2,
+                                    left: pageX - location.pageX - size / 2,
+                                    borderRadius: size / 2
+                                },
                             {
-                                backgroundColor: rippleColor,
-                                width: size,
-                                height: size,
-                                top: pageY - location.pageY - size / 2,
-                                left: pageX - location.pageX - size / 2,
-                                borderRadius: size / 2
-                            },
-                        {
-                            transform: [{ scale: scaleValue }]
-                        }]}
-                    />
-                    {children}
+                                transform: [{ scale: scaleValue }]
+                            }]}
+                        />
+
+                    </View>
                 </View>
@@ -162,2 +190,2 @@ </TouchableOpacity>
     }
-};
+};

lib/RadioButton.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, Text, View, TouchableHighlight } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {StyleSheet, Text, View, TouchableHighlight} from "react-native";
 import Icon from './Icon';
@@ -3,0 +4,0 @@ import IconToggle from './IconToggle';

lib/RadioButtonGroup.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View} from "react-native";
 import RadioButton from './RadioButton';
@@ -3,0 +4,0 @@ import { PRIMARY, PRIMARY_COLORS, THEME_NAME } from './config';

lib/Ripple.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View, Text, TouchableNativeFeedback } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, Text, TouchableNativeFeedback} from "react-native";
 import { default as PolyfillRipple } from './polyfill/Ripple';
@@ -3,0 +4,0 @@ import { isCompatible } from './helpers';

lib/Subheader.js

@@ -1,2 +0,3 @@
-import React, { Component, StyleSheet, PropTypes, View, Text } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {StyleSheet, View, Text} from "react-native";
 import { TYPO, THEME_NAME } from './config';
@@ -3,0 +4,0 @@ import { getColor } from './helpers';

lib/Toolbar.js

@@ -1,2 +0,3 @@
-import React, { Component, PropTypes, View, Text } from 'react-native';
+import React, {Component, PropTypes} from "react";
+import {View, Text} from "react-native";
 import { TYPO, PRIMARY, THEME_NAME, PRIMARY_COLORS } from './config';
@@ -84,12 +85,16 @@ import { getColor } from './helpers';
                 }
-                <Text
-                    numberOfLines={1}
-                    style={[styles.title, TYPO.paperFontTitle, {
-                        color: styleMap.color,
-                        marginLeft: icon ? styles.title.marginLeft : 16
-                    }]}
-                >
-                    {title}
-                </Text>
                 {
+                    !title ? this.props.children : (
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.title, TYPO.paperFontTitle, {
+                                color: styleMap.color,
+                                marginLeft: icon ? styles.title.marginLeft : 16
+                            }]}
+                        >
+                            {title}
+                        </Text>
+                    )
+                }
+                {
                     actions &&
@@ -96,0 +101,0 @@ actions.map(function (action, i) {

package.json

 {
   "name": "react-native-material-design",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "React Native Material Design Components",
@@ -30,3 +30,3 @@ "main": "lib/index.js",
     "react-native-material-design-styles": "https://github.com/react-native-material-design/react-native-material-design-styles.git",
-    "react-native-vector-icons": "^1.0.3"
+    "react-native-vector-icons": "^2.0.1"
   },
@@ -33,0 +33,0 @@ "devDependencies": {

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

76694

increased by2.76%

Lines of code

2052

increased by2.65%

Dependency changes

• + Addedcamelcase@3.0.0(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedfind-up@1.1.2(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedget-caller-file@1.0.3(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedhosted-git-info@2.8.9(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedis-utf8@0.2.1(transitive)

• + Addedload-json-file@1.1.0(transitive)

• + Addedlodash.assign@4.2.0(transitive)

• + Addednormalize-package-data@2.5.0(transitive)

• + Addedparse-json@2.2.0(transitive)

• + Addedpath-exists@2.1.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@1.1.0(transitive)

• + Addedpify@2.3.0(transitive)

• + Addedpinkie@2.0.4(transitive)

• + Addedpinkie-promise@2.0.1(transitive)

• + Addedreact-native-vector-icons@2.1.0(transitive)

• + Addedread-pkg@1.1.0(transitive)

• + Addedread-pkg-up@1.0.1(transitive)

• + Addedrequire-directory@2.1.1(transitive)

• + Addedrequire-main-filename@1.0.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedsemver@5.7.2(transitive)

• + Addedset-blocking@2.0.0(transitive)

• + Addedspdx-correct@3.2.0(transitive)

• + Addedspdx-exceptions@2.5.0(transitive)

• + Addedspdx-expression-parse@3.0.1(transitive)

• + Addedspdx-license-ids@3.0.20(transitive)

• + Addedstrip-bom@2.0.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedvalidate-npm-package-license@3.0.4(transitive)

• + Addedwhich-module@1.0.0(transitive)

• + Addedwindow-size@0.2.0(transitive)

• + Addedyargs@4.8.1(transitive)

• + Addedyargs-parser@2.4.1(transitive)

• - Removedcamelcase@2.1.1(transitive)

• - Removedreact-native-vector-icons@1.3.4(transitive)

• - Removedwindow-size@0.1.4(transitive)

• - Removedyargs@3.32.0(transitive)

• Updatedreact-native-vector-icons@^2.0.1