react-boxl - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/types/Box.d.ts

@@ -29,7 +29,9 @@ import * as React from "react";
 export interface BoxChildrenProps<T> {
+    childWrap?: BoxPropWrap<T>;
+    grow?: BoxPropGrow<T>;
     horizontalAlign?: BoxPropHorizontalAlignment<T>;
     iDirection: BoxPropDirection<T>;
     spacingInfo?: BoxPropSpacing<T>;
+    styleString?: BoxPropStyle<T>;
     verticalAlign?: BoxPropVerticalAlignment<T>;
-    childWrap?: BoxPropWrap<T>;
 }
@@ -39,4 +41,4 @@ export interface BoxChildProps<T> {
     iWidth?: BoxPropWidth<T>;
+    isDummy: boolean;
     spacingInfo?: BoxPropSpacing<T>;
-    isDummy: boolean;
 }
@@ -50,11 +52,11 @@ export declare type BoxElement = keyof React.ReactHTML;
     direction?: BoxPropDirection<T>;
+    element?: BoxElement;
     grow?: BoxPropGrow<T>;
     horizontalAlign?: BoxPropHorizontalAlignment<T>;
+    isChild?: boolean;
     spacing?: BoxPropSpacing<T>;
+    style?: BoxPropStyle<T>;
     verticalAlign?: BoxPropVerticalAlignment<T>;
     width?: BoxPropWidth<T>;
-    style?: BoxPropStyle<T>;
-    isChild?: boolean;
-    element?: BoxElement;
 }
 export declare type BoxThemeProps<T> = BoxProps<T> & ThemeProps<T>;

dist/web.js

@@ -163,3 +163,3 @@ 'use strict';
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.BoxContainer = styled__default[_this.props.element](templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n  "], ["\n    ",
+        _this.BoxContainer = styled__default[_this.props.spacing ? _this.props.element : "div"](templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", ";\n  "], ["\n    ",
             ";\n  "])), function (props) {
@@ -175,10 +175,16 @@ var isChild = _this.props.isChild;
         });
-        _this.BoxChildren = styled__default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", ";\n  "], ["\n    ",
+        _this.BoxChildren = styled__default[!_this.props.spacing ? _this.props.element : "div"](templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", ";\n  "], ["\n    ",
             ";\n  "])), function (props) {
-            var spacingInfo = props.spacingInfo, iDirection = props.iDirection, horizontalAlign = props.horizontalAlign, verticalAlign = props.verticalAlign, childWrap = props.childWrap, theme = props.theme;
+            var isChild = _this.props.isChild;
+            var spacingInfo = props.spacingInfo, iDirection = props.iDirection, horizontalAlign = props.horizontalAlign, verticalAlign = props.verticalAlign, childWrap = props.childWrap, grow = props.grow, styleString = props.styleString, theme = props.theme;
             var propsWithTheme = _this.propsWithTheme(theme);
-            return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      box-sizing: border-box;\n      display: flex;\n      flex: 1;\n      ", "\n      ", "\n      ", " \n      ", ";\n    "], ["\n      box-sizing: border-box;\n      display: flex;\n      flex: 1;\n      ",
+            var style = typeof styleString === "function"
+                ? flatten(styleString(_this.boxThemeThunk), propsWithTheme)
+                : styleString;
+            return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", ";\n      ", "\n      ", ";\n      box-sizing: border-box;\n      display: flex;\n      ", "\n      ", "\n      ", " \n      ", ";\n    "], ["\n      ",
+                ";\n      ", "\n      ", ";\n      box-sizing: border-box;\n      display: flex;\n      ",
                 "\n      ", "\n      ",
                 " \n      ",
-                ";\n    "])), styleOfProp("flex-direction", iDirection, propsWithTheme, translateDirection), styleOfProp("flex-wrap", childWrap, propsWithTheme, translateWrap), iDirection === "vertical"
+                ";\n    "])), grow !== undefined &&
+                styleOfProp("flex-grow", isChild && grow && grow < 1 ? 1 : grow, propsWithTheme), !style && "flex-grow: 1;", style, styleOfProp("flex-direction", iDirection, propsWithTheme, translateDirection), styleOfProp("flex-wrap", childWrap, propsWithTheme, translateWrap), iDirection === "vertical"
                 ? "\n        " + styleOfProp("align-items", horizontalAlign, propsWithTheme, translateHorizontalAlign) + "\n        " + styleOfProp("justify-content", verticalAlign, propsWithTheme, translateVerticalAlign) + "\n      "
@@ -207,7 +213,11 @@ : "\n          " + styleOfProp("justify-content", horizontalAlign, propsWithTheme, translateHorizontalAlign) + "\n          " + styleOfProp("align-items", verticalAlign, propsWithTheme, translateVerticalAlign) + "\n      ", styleOfProp("margin", spacingInfo, propsWithTheme, translateBoxSpacingHalf(true)));
         };
-        _this.childToBoxChild = function (isDummy) { return function (child) {
+        _this.childToBoxChild = function (isDummy, shouldUseFullStructure) { return function (child) {
             var _a = _this.props, childGrow = _a.childGrow, childWidth = _a.childWidth, spacing = _a.spacing;
             var grow = (child && child.props && child.props.grow) || childGrow;
             var width = (child && child.props && child.props.width) || childWidth;
-            return (React.createElement(_this.BoxChild, { "data-name": "BoxChild", grow: grow, iWidth: width, spacingInfo: spacing, isDummy: isDummy }, grow && !isDummy
+            var hasSpacing = spacing !== undefined;
+            var hasGrow = grow !== undefined;
+            var hasWidth = width !== undefined;
+            var shouldWrapWithChild = hasGrow || hasWidth || (hasSpacing && shouldUseFullStructure);
+            var templateWrapWithChild = (React.createElement(_this.BoxChild, { "data-name": "BoxChild", grow: grow, iWidth: width, spacingInfo: spacing, isDummy: isDummy }, grow && !isDummy
                 ? React.cloneElement(child, { isChild: true })
@@ -217,2 +227,10 @@ : isDummy
                     : child));
+            var templateNoWrapWithChild = hasGrow && !isDummy
+                ? React.cloneElement(child, { isChild: true })
+                : isDummy
+                    ? null
+                    : child;
+            return shouldWrapWithChild
+                ? templateWrapWithChild
+                : templateNoWrapWithChild;
         }; };
@@ -222,12 +240,20 @@ return _this;
     Box.prototype.render = function () {
-        var _a = this.props, childGrow = _a.childGrow, childWidth = _a.childWidth, childWrap = _a.childWrap, children = _a.children, _b = _a.direction, direction = _b === void 0 ? "vertical" : _b, _c = _a.grow, grow = _c === void 0 ? 1 : _c, horizontalAlign = _a.horizontalAlign, spacing = _a.spacing, style = _a.style, verticalAlign = _a.verticalAlign, width = _a.width, rest = __rest(_a, ["childGrow", "childWidth", "childWrap", "children", "direction", "grow", "horizontalAlign", "spacing", "style", "verticalAlign", "width"]);
+        var _a = this.props, childGrow = _a.childGrow, childWidth = _a.childWidth, childWrap = _a.childWrap, children = _a.children, _b = _a.direction, direction = _b === void 0 ? "vertical" : _b, grow = _a.grow, horizontalAlign = _a.horizontalAlign, spacing = _a.spacing, style = _a.style, verticalAlign = _a.verticalAlign, width = _a.width, isChild = _a.isChild, rest = __rest(_a, ["childGrow", "childWidth", "childWrap", "children", "direction", "grow", "horizontalAlign", "spacing", "style", "verticalAlign", "width", "isChild"]);
+        var growComputed = isChild && grow === undefined ? 1 : grow !== undefined ? grow : 1;
+        var shouldUseFullStructure = spacing !== undefined && Array.isArray(children) && children.length > 1;
         var shouldIncludeDummies = childWrap === "even";
-        var childrenWrapped = React.Children.map(children, this.childToBoxChild(false));
+        var childrenWrapped = React.Children.map(children, this.childToBoxChild(false, shouldUseFullStructure));
         var childrenDummies = shouldIncludeDummies
-            ? React.Children.map(children, this.childToBoxChild(true))
+            ? React.Children.map(children, this.childToBoxChild(true, shouldUseFullStructure))
             : null;
-        return (React.createElement(this.BoxContainer, __assign({ "data-name": "BoxContainer", grow: grow, styleString: style }, rest),
+        var templateStylerAlignerSpacer = (React.createElement(this.BoxContainer, __assign({ "data-name": "BoxContainer", grow: growComputed, styleString: style }, rest),
             React.createElement(this.BoxChildren, { "data-name": "BoxChildren", iDirection: direction, spacingInfo: spacing, horizontalAlign: horizontalAlign, verticalAlign: verticalAlign, childWrap: childWrap },
                 childrenWrapped,
                 childrenDummies)));
+        var templateAligner = (React.createElement(this.BoxChildren, __assign({ "data-name": "BoxChildren", iDirection: direction, horizontalAlign: horizontalAlign, verticalAlign: verticalAlign, childWrap: childWrap, grow: growComputed, styleString: style }, rest),
+            childrenWrapped,
+            childrenDummies));
+        return shouldUseFullStructure
+            ? templateStylerAlignerSpacer
+            : templateAligner;
     };
@@ -234,0 +260,0 @@ Box.displayName = "Box";

package.json

 {
   "name": "react-boxl",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A thing",
@@ -10,3 +10,2 @@ "author": "Crema",
   "files": [
-    "dist/lib",
     "dist/types",
@@ -29,4 +28,6 @@ "dist/web.d.ts",
     "build:watch": "npm run build -- -w",
-    "test": "node_modules/.bin/jest",
-    "test:watch": "npm run test -- --watch",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
+    "test:watch:coverage": "jest --coverage --watch",
     "storybook": "start-storybook -p 6006",
@@ -55,2 +56,3 @@ "build-storybook": "build-storybook",
     "@types/react-dom": "^16.0.9",
+    "@types/react-test-renderer": "^16.0.3",
     "@types/storybook__react": "^3.0.9",
@@ -66,2 +68,3 @@ "@types/styled-components": "^4.0.0",
     "react-dom": "^16.6.0",
+    "react-test-renderer": "^16.6.0",
     "rollup": "^0.65.2",
@@ -68,0 +71,0 @@ "rollup-plugin-filesize": "^4.0.1",

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

20397

increased by3.55%

Lines of code

325

increased by3.5%

Worsened metrics

Dev dependency count

30

increased by7.14%

Number of package files

5

decreased by-54.55%

No dependency changes