react-native-color-palette - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

index.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import {TouchableOpacity, View, Text, StyleSheet} from 'react-native';
+import {TouchableOpacity, View, Text} from 'react-native';
 import FAIcon from 'react-native-vector-icons/FontAwesome'
@@ -13,16 +13,8 @@
     this.onChange = this.onChange.bind(this);
-    this.setColor = this.setColor.bind(this);
   }
 
-  setColor(props) {
-    this.setState({color: props.value})
-  }
-
-  componentDidMount() {
-    this.setColor(this.props)
-  }
-
   componentWillReceiveProps(nextProps) {
-    if (nextProps.value !== this.props.value)
-      this.setColor(nextProps)
+    if (nextProps.value !== this.props.value) {
+      this.setState({color: nextProps.value})
+    }
   }
@@ -35,13 +27,36 @@
   onChange(color) {
-    this.setState({color}, () => this.props.onChange(color))
+    this.setState({color: color}, () => this.props.onChange(color))
   }
   render() {
+    const colorPaletteStyles = {
+      colorContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      colorOption: {
+        borderWidth: 1,
+        borderColor: 'rgba(0,0,0,0.2)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 30,
+        height: 30,
+        marginHorizontal: 10,
+        marginVertical: 10,
+        borderRadius: 15,
+        elevation: 5,
+        shadowOffset: {width: 2, height: 2,},
+        shadowColor: 'black',
+        shadowOpacity: .25,
+      }
+    };
     return (
       <View style={{flex: 1}}>
         <Text>{this.props.title}</Text>
-        <View style={{...styles.colorContainer, ...this.props.paletteStyles}}>
+        <View style={{...colorPaletteStyles.colorContainer, ...this.props.paletteStyles}}>
           {this.props.colors.map((color) => {
             return (
               <TouchableOpacity
-                style={{...styles.colorOption, backgroundColor: color}}
+                style={{...colorPaletteStyles.colorOption, backgroundColor: color}}
                 onPress={() => this.onChange(color)}
@@ -51,7 +66,7 @@ key={color}
                 {this.state.color === color &&
-                  <FAIcon
-                    name={'check-circle-o'}
-                    size={25}
-                    color={this.getContrastColor(color)}
-                  />
+                <FAIcon
+                  name={'check-circle-o'}
+                  size={25}
+                  color={this.getContrastColor(color)}
+                />
                 }
@@ -66,26 +81,2 @@ </TouchableOpacity>
 }
-
-const styles = StyleSheet.create({
-  colorContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  colorOption: {
-    borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.2)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 30,
-    height: 30,
-    marginHorizontal: 10,
-    marginVertical: 10,
-    borderRadius: 15,
-    elevation: 5,
-    shadowOffset: {width: 2, height: 2,},
-    shadowColor: 'black',
-    shadowOpacity: .25,
-  }
-});
 ColorPalette.defaultProps = {
@@ -92,0 +83,0 @@ colors: [

package.json

 {
   "name": "react-native-color-palette",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A react native module for simple hex color selection",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Worsened metrics

Total package byte prevSize

46835

decreased by-0.12%

Lines of code

93

decreased by-6.06%

No dependency changes