@redu/react-native-component-layout - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

Break.js

 /**
  * @author Luke Brandon Farrell
- * @description Same purpose as a break element in HTML
+ * @description Renders a break with optional margin to insert space in the page.
  */
@@ -9,11 +9,21 @@
 import PropTypes from "prop-types";
-import { colors } from "../../../res/theme";
 
 /**
- * Renders a break with optional margin to insert space in the page.
+ * Break
  *
- * @param margin
- * @param horizontalRule
+ * @param all
+ * @param top
+ * @param bottom
+ * @param left
+ * @param right
+ * @param vertical
+ * @param horizontal
+ * @param row
+ * @param wrap
+ * @param align
+ * @param hr
  * @param horizontalRuleColor
  * @param horizontalRuleWidth
+ * @param style
+ * @param children
  * @param props
@@ -24,4 +34,14 @@ *
 const Break = ({
-  margin,
-  hr,
+  all,
+  top,
+  bottom,
+  left,
+  right,
+  vertical,
+  horizontal,
+  row,
+  wrap,
+  align,
+  style,
+  children,
   horizontalRuleColor,
@@ -42,23 +62,25 @@ horizontalRuleWidth,
         {
-          marginTop: margin.top,
-          marginBottom: margin.bottom,
-          marginLeft: margin.left,
-          marginRight: margin.right
+          marginTop: top || vertical || all,
+          marginBottom: bottom || vertical || all,
+          marginLeft: left || horizontal || all,
+          marginRight: right || horizontal || all,
+          flexDirection: row ? "row" : "column",
+          alignItems: align,
+          flexWrap: wrap ? "wrap" : "nowrap"
         },
-        hrStyle
+        hrStyle,
+        style
       ]}
       {...props}
-    />
+    >
+      {children}
+    </View>
   );
 };
 
+Break.defaultBreak = 8;
 Break.defaultProps = {
-  margin: {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 10
-  },
+  bottom: Break.defaultPadding,
   hr: false,
-  horizontalRuleColor: colors.GRAY_3,
+  horizontalRuleColor: "#ebebeb",
   horizontalRuleWidth: 1
@@ -68,4 +90,12 @@ };
 Break.propTypes = {
-  margin: PropTypes.object,
-  hr: PropTypes.bool,
+  all: PropTypes.number,
+  top: PropTypes.number,
+  bottom: PropTypes.number,
+  left: PropTypes.number,
+  right: PropTypes.number,
+  vertical: PropTypes.number,
+  horizontal: PropTypes.number,
+  row: PropTypes.bool,
+  wrap: PropTypes.bool,
+  align: PropTypes.string,
   horizontalRuleColor: PropTypes.string,
@@ -72,0 +102,0 @@ horizontalRuleWidth: PropTypes.number

package.json

 {
   "name": "@redu/react-native-component-layout",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Layout components",
@@ -11,3 +11,3 @@ "main": "index.js",
   "license": "ISC",
-  "gitHead": "26a6b1293ddce7537b96b18f3ad5ef37043b50a2"
+  "gitHead": "9909bca3951da4ac737b279ebf06bbc09a337816"
 }

Wrap.js

 /**
  * @author Luke Brandon Farrell
- * @description A wrap component with configurable props.
+ * @description Renders a view component with optional margin and direction settings.
  */
@@ -11,13 +11,35 @@
 /**
- * Renders a view component with optional margin and direction settings.
+ * Wrap
  *
- * @param margin
+ * @param all
+ * @param top
+ * @param bottom
+ * @param left
+ * @param right
+ * @param vertical
+ * @param horizontal
  * @param row
+ * @param wrap
+ * @param align
  * @param style
  * @param children
- * @param extraProps
+ * @param props
  *
  * @return {jsx}
  */
-const Wrap = ({ margin, row, style, children, ...extraProps }) => {
+const Wrap = ({
+  all,
+  top,
+  bottom,
+  left,
+  right,
+  vertical,
+  horizontal,
+  row,
+  wrap,
+  align,
+  style,
+  children,
+  ...props
+}) => {
   return (
@@ -27,11 +49,13 @@ <View
         {
-          paddingTop: margin.all || margin.top,
-          paddingBottom: margin.all || margin.bottom,
-          paddingLeft: margin.all || margin.left,
-          paddingRight: margin.all || margin.right,
-          flexDirection: row ? "row" : "column"
+          paddingTop: top || vertical || all,
+          paddingBottom: bottom || vertical || all,
+          paddingLeft: left || horizontal || all,
+          paddingRight: right || horizontal || all,
+          flexDirection: row ? "row" : "column",
+          alignItems: align,
+          flexWrap: wrap ? "wrap" : "nowrap"
         },
         style
       ]}
-      {...extraProps}
+      {...props}
     >
@@ -43,18 +67,23 @@ {children}
 
+Wrap.defaultPadding = 12;
 Wrap.defaultProps = {
-  margin: {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    all: null
-  },
-  row: false
+  all: Wrap.defaultPadding,
+  row: false,
+  wrap: true,
+  align: "center"
 };
 
 Wrap.propTypes = {
-  margin: PropTypes.object,
-  row: PropTypes.bool
+  all: PropTypes.number,
+  top: PropTypes.number,
+  bottom: PropTypes.number,
+  left: PropTypes.number,
+  right: PropTypes.number,
+  vertical: PropTypes.number,
+  horizontal: PropTypes.number,
+  row: PropTypes.bool,
+  wrap: PropTypes.bool,
+  align: PropTypes.string
 };
 
 export default Wrap;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Worsened metrics

Total package byte prevSize

4502

decreased by-55.18%

Number of package files

5

decreased by-44.44%

Lines of code

183

decreased by-57.54%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes