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

Comparing version 0.3.0 to 0.3.1

lib/Drawer/Section.js

@@ -50,3 +50,3 @@ import React, { Component, PropTypes, View, Text, TouchableNativeFeedback } from 'react-native';
         );
-    }
+    };
 
@@ -53,0 +53,0 @@ render() {

lib/Icon.js

@@ -9,3 +9,3 @@ import React, { Component, PropTypes } from 'react-native';
         name: PropTypes.string.isRequired,
-        style: PropTypes.object,
+        style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
         size: PropTypes.number,
@@ -12,0 +12,0 @@ color: PropTypes.string

lib/IconToggle.js

@@ -22,2 +22,10 @@ import React, { Component, PropTypes, Text, View, Animated } from 'react-native';
 
+    componentDidUpdate(prevProps) {
+        if (this.props && this.props.badge) {
+            if (this.props.badge.value !== prevProps.badge.value) {
+                this._animateBadgeCounter();
+            }
+        }
+    };
+
     static propTypes = {
@@ -32,2 +40,3 @@ color: PropTypes.string.isRequired,
             value: PropTypes.number,
+            animate: PropTypes.bool,
             backgroundColor: PropTypes.string,
@@ -41,3 +50,3 @@ textColor: PropTypes.string
         disabled: false,
-        percent: 90,
+        percent: 90
     };
@@ -71,8 +80,10 @@
             badge = Object.assign({},
-                { value: badge.value },
-                badge.backgroundColor ? { backgroundColor: badge.backgroundColor } : { backgroundColor: 'paperRed' },
-                badge.textColor ? { textColor: badge.textColor } : { textColor: '#ffffff' }
+                {value: badge.value},
+                badge.backgroundColor ? {backgroundColor: badge.backgroundColor} : {backgroundColor: 'paperRed'},
+                badge.textColor ? {textColor: badge.textColor} : {textColor: '#ffffff'}
             );
         }
 
+        this.badgeAnim = this.badgeAnim || new Animated.Value(0);
+
         return (
@@ -82,4 +93,4 @@ <View {...this._responder}>
                     {size &&
-                        <Animated.View
-                            style={[{
+                    <Animated.View
+                        style={[{
                                 position: 'absolute',
@@ -95,3 +106,3 @@ left: ((1 - percent) * size) / 2,
                             }]}
-                        />
+                    />
                     }
@@ -102,13 +113,33 @@ <View onLayout={(event) => { this.setSize(event) }}>
                     {size && badge && typeof badge.value === 'number' &&
-                        <View style={[
+                    <Animated.View style={[
                             styles.badgeContainer, {
                                 backgroundColor: getColor(badge.backgroundColor),
                                 top: size / 10,
-                                right: size / 10
+                                right: size / 10,
+                                transform: [   // Array order matters
+								{scale: this.badgeAnim.interpolate({
+								  inputRange: [0, 1],
+								  outputRange: [1, 1.25]
+								})},
+								{translateX: this.badgeAnim.interpolate({
+								  inputRange: [0, 1],
+								  outputRange: [0, -6]
+								})},
+								{translateY: this.badgeAnim.interpolate({
+								  inputRange: [0, 1],
+								  outputRange: [0, 5]
+								})},
+								{rotate: this.badgeAnim.interpolate({
+								  inputRange: [0, 1],
+								  outputRange: [
+									'0deg', '45deg' // 'deg' or 'rad'
+								  ]
+								})}
+							  ]
                             }]}
-                        >
-                            <Text style={[styles.badgeText, { color: getColor(badge.textColor) }]}>
-                                {badge.value}
-                            </Text>
-                        </View>
+                    >
+                        <Text style={[styles.badgeText, { color: getColor(badge.textColor) }]}>
+                            {badge.value}
+                        </Text>
+                    </Animated.View>
                     }
@@ -137,2 +168,3 @@ </View>
 
+
     /**
@@ -158,2 +190,18 @@ *
      */
+    _animateBadgeCounter = () => {
+        if (this.badgeAnim && this.props.badge && this.props.badge.animate !== false) {
+            Animated.spring(this.badgeAnim, {
+                toValue: 0,   // Returns to the start
+                velocity: 8,  // Velocity makes it move
+                tension: -5, // Slow
+                friction: 1,  // Oscillate a lot
+                duration: 300
+            }).start();
+        }
+    };
+
+    /**
+     *
+     * @private
+     */
     _handleResponderEnd = () => {
@@ -160,0 +208,0 @@ const { disabled, onPress } = this.props;

lib/polyfill/Ripple.js

@@ -42,3 +42,3 @@ import React, { Component, PropTypes, View, Animated } from 'react-native';
         clearTimeout(this.timeout);
-    }
+    };
 
@@ -148,3 +148,3 @@ render() {
         })
-    }
+    };
 
@@ -151,0 +151,0 @@ }

lib/Subheader.js

@@ -11,3 +11,4 @@ import React, { Component, StyleSheet, PropTypes, View, Text } from 'react-native';
         inset: PropTypes.bool,
-        theme: PropTypes.oneOf(THEME_NAME)
+        theme: PropTypes.oneOf(THEME_NAME),
+        lines: PropTypes.number
     };
@@ -18,7 +19,8 @@
         inset: false,
-        theme: 'light'
+        theme: 'light',
+        lines: 1
     };
 
     render() {
-        const { text, color, inset } = this.props;
+        const { text, color, inset, lines } = this.props;
 
@@ -32,2 +34,3 @@ return (
                 <Text
+                    numberOfLines={lines}
                     style={[styles.text, {
@@ -34,0 +37,0 @@ color: getColor(color),

lib/Toolbar.js

@@ -51,2 +51,7 @@ import React, { Component, PropTypes, View, Text } from 'react-native';
 
+        const opacityMap = {
+            light: .38,
+            dark: .30
+        };
+
         const styleMap = {
@@ -92,2 +97,3 @@ backgroundColor: overrides && overrides.backgroundColor ? getColor(overrides.backgroundColor) : themeMap[theme].backgroundColor,
                                 onPress={action.onPress}
+                                disabled={action.disabled}
                             >
@@ -97,3 +103,3 @@ <Icon name={action.icon}
                                       color={styleMap.iconColor}
-                                      style={styles.icon}
+                                      style={[styles.icon, action.disabled ? { opacity: opacityMap[theme] } : null]}
                                 />
@@ -111,2 +117,6 @@ </IconToggle>
     toolbar: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
         height: 56,
@@ -113,0 +123,0 @@ flexDirection: 'row',

package.json

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

README.md

 # React Native Material Design
 
+[![Dependency Status](https://david-dm.org/react-native-material-design/react-native-material-design.svg)](https://david-dm.org/react-native-material-design/react-native-material-design.svg)
+[![GitHub issues](https://img.shields.io/github/issues/react-native-material-design/react-native-material-design.svg)](https://github.com/react-native-material-design/react-native-material-design/issues)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/react-native-material-design/react-native-material-design/master/LICENSE)
+[![Join the chat at https://gitter.im/react-native-material-design/react-native-material-design](https://badges.gitter.im/react-native-material-design/react-native-material-design.svg)](https://gitter.im/react-native-material-design/react-native-material-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
 React Native components which implement [Material Design](https://www.google.com/design/spec/material-design/introduction.html).
@@ -10,2 +15,5 @@
 
+Looking for a demo app? [Check out the repo](https://github.com/react-native-material-design/demo-app).
+Or view it online [here](https://appetize.io/app/hyp1m20y515c16cj5yw2karcjg)!
+
 ## Installation
@@ -48,2 +56,2 @@
 - Ensure no lint warns occur via `npm run lint`.
-- Follow the Material Design [guidelines](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids).
+- Follow the Material Design [guidelines](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids).

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

68577

increased by4.45%

Lines of code

1852

increased by3.12%

Number of lines in readme file

56

increased by19.15%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes