@99xt/first-born - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

package.json

 {
     "name": "@99xt/first-born",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "React Native UI Framework",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -170,9 +170,10 @@ # first-born
 
-You can use any [Image property](http://facebook.github.io/react-native/docs/image.html), [TouchableOpacity property](http://facebook.github.io/react-native/docs/touchableopacity.html) and the following:
+You can use any [Image property](http://facebook.github.io/react-native/docs/image.html) and the following:
 
-| Prop             | Description                                                    | Default    |
-|------------------|----------------------------------------------------------------|------------|
-| **`size`**       | Size of the image. ('small', 'medium', 'large', 'exlarge')     | `'medium'` |
-| **`customSize`** | Size of the image, if it does not fit the above defined sizes. | _None_     |
-| **`rounded`**    | If the image is to be a circle.                                | _false_    |
+| Prop             | Description                                                                                 | Default    |
+|------------------|---------------------------------------------------------------------------------------------|------------|
+| **`size`**       | Size of the image. ('small', 'medium', 'large', 'exlarge')                                  | `'medium'` |
+| **`customSize`** | Size of the image, if it does not fit the above defined sizes.                              | _None_     |
+| **`rounded`**    | If the image is to be a circle.                                                             | _false_    |
+| **`onEdit`**     | Props to handle an image change of the thumbnail. You can use all `Button` atom properties. | _None_     |
 
@@ -179,0 +180,0 @@ #### Button

src/atoms/Button.js

@@ -56,3 +56,4 @@ import React, { Component } from "react";
                 borderRadius: radiusSize + buttonPadding,
-                padding: buttonPadding / 2
+                alignItems: "center",
+                justifyContent: "center"
             });
@@ -98,3 +99,6 @@ iconSize += buttonPadding / 2;
                       color: iconColor,
-                      style: { ...child.props.style, paddingRight: 5 }
+                      style: {
+                          ...child.props.style,
+                          paddingRight: circle ? 0 : 5
+                      }
                   })
@@ -108,3 +112,3 @@ : child && child.type === Image
                           height: 25,
-                          paddingRight: 5
+                          paddingRight: circle ? 0 : 5
                       }
@@ -111,0 +115,0 @@ })

src/atoms/Thumbnail.js

 import React, { Component } from "react";
-import { TouchableOpacity, Image } from "react-native";
+import { View, Image } from "react-native";
 import PropTypes from "prop-types";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
 
@@ -14,3 +16,3 @@ const sizes = {
     render() {
-        const { rounded, size, customSize, ...otherProps } = this.props;
+        const { rounded, size, customSize, onEdit, ...otherProps } = this.props;
 
@@ -21,6 +23,26 @@ let imageSize = customSize ? customSize : sizes[size];
 
+        let buttonStyle = { position: "absolute", top: -20, right: -20 };
+
         if (rounded) {
             imageStyle = { ...imageStyle, borderRadius: imageSize / 2 };
+            buttonStyle = { ...buttonStyle, top: -5, right: -5 };
         }
 
+        if (onEdit) {
+            return (
+                <View>
+                    <Image {...otherProps} style={imageStyle} />
+                    {onEdit && (
+                        <Button {...onEdit} style={buttonStyle}>
+                            {onEdit.children ? (
+                                onEdit.children
+                            ) : (
+                                <Icon type="material" name="edit" />
+                            )}
+                        </Button>
+                    )}
+                </View>
+            );
+        }
+
         return <Image {...otherProps} style={imageStyle} />;
@@ -34,4 +56,6 @@ }
     size: PropTypes.oneOf(["small", "medium", "large", "exlarge"]),
-    ...Image.propTypes,
-    ...TouchableOpacity.propTypes
+    onEdit: PropTypes.shape({
+        ...Button.propTypes
+    }),
+    ...Image.propTypes
 };
@@ -38,0 +62,0 @@

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

189191

increased by0.61%

Lines of code

3893

increased by0.67%

Number of lines in readme file

916

increased by0.11%

No dependency changes