react-boxl - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/types/Box.d.ts

@@ -53,3 +53,4 @@ import * as React from "react";
     style?: BoxPropStyle<T>;
+    isChild?: boolean;
 }
 export declare type BoxThemeProps<T> = BoxProps<T> & ThemeProps<T>;

dist/web.d.ts

@@ -5,2 +5,5 @@ import * as React from "react";
     static displayName: string;
+    static defaultProps: {
+        isChild: boolean;
+    };
     private BoxContainer;
@@ -10,4 +13,5 @@ private BoxChildren;
     render(): JSX.Element;
+    private propsWithTheme;
     private boxThemeThunk;
     private childToBoxChild;
 }

dist/web.js

@@ -81,3 +81,4 @@ 'use strict';
         case "function": {
-            var result = typeof prop === "function" && props && prop(props);
+            var propTyped = prop;
+            var result = props && propTyped(props);
             return result && props
@@ -94,5 +95,6 @@ ? typeof result === "object"
                     case "function": {
+                        var valueTyped = value;
                         return (acc +=
                             typeof value === "function" && props
-                                ? key + " { " + attribute + ": " + translate(value(props)) + "; }"
+                                ? key + " { " + attribute + ": " + translate(valueTyped(props)) + "; }"
                                 : "");
@@ -165,7 +167,10 @@ }
             ";\n  "])), function (props) {
+            var isChild = _this.props.isChild;
             var grow = props.grow, styleString = props.styleString, theme = props.theme;
+            var propsWithTheme = _this.propsWithTheme(theme);
             var style = typeof styleString === "function"
-                ? flatten(styleString(_this.boxThemeThunk), props)
+                ? flatten(styleString(_this.boxThemeThunk), propsWithTheme)
                 : styleString;
-            return styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        box-sizing: border-box;\n        display: flex;\n        ", ";\n        ", ";\n      "], ["\n        box-sizing: border-box;\n        display: flex;\n        ", ";\n        ", ";\n      "])), styleOfProp("flex-grow", grow, props), style);
+            return styled.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        box-sizing: border-box;\n        display: flex;\n        ", ";\n        ", ";\n      "], ["\n        box-sizing: border-box;\n        display: flex;\n        ",
+                ";\n        ", ";\n      "])), styleOfProp("flex-grow", isChild && grow && grow < 1 ? 1 : grow, propsWithTheme), style);
         });
@@ -175,7 +180,9 @@ _this.BoxChildren = styled__default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", ";\n  "], ["\n    ",
             var spacingInfo = props.spacingInfo, iDirection = props.iDirection, horizontalAlign = props.horizontalAlign, verticalAlign = props.verticalAlign, childWrap = props.childWrap, theme = props.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      ", "\n      ", "\n      ",
+            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      ",
+                "\n      ", "\n      ",
                 " \n      ",
-                ";\n    "])), styleOfProp("flex-direction", iDirection, theme, translateDirection), styleOfProp("flex-wrap", childWrap, theme, translateWrap), iDirection === "vertical"
-                ? "\n        " + styleOfProp("align-items", horizontalAlign, props, translateHorizontalAlign) + "\n        " + styleOfProp("justify-content", verticalAlign, props, translateVerticalAlign) + "\n      "
-                : "\n          " + styleOfProp("justify-content", horizontalAlign, props, translateHorizontalAlign) + "\n          " + styleOfProp("align-items", verticalAlign, props, translateVerticalAlign) + "\n      ", styleOfProp("margin", spacingInfo, props, translateBoxSpacingHalf(true)));
+                ";\n    "])), 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      "
+                : "\n          " + styleOfProp("justify-content", horizontalAlign, propsWithTheme, translateHorizontalAlign) + "\n          " + styleOfProp("align-items", verticalAlign, propsWithTheme, translateVerticalAlign) + "\n      ", styleOfProp("margin", spacingInfo, propsWithTheme, translateBoxSpacingHalf(true)));
         });
@@ -185,7 +192,9 @@ _this.BoxChild = styled__default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", ";\n  "], ["\n    ",
             var spacingInfo = props.spacingInfo, grow = props.grow, iWidth = props.iWidth, isDummy = props.isDummy, theme = props.theme;
-            return styled.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-sizing: border-box;\n      display: flex;\n      ", "\n      ", "", ";\n    "], ["\n      box-sizing: border-box;\n      display: flex;\n      ", "\n      ", "",
-                ";\n    "])), styleOfProp("flex-grow", grow, props), iWidth ? "flex-basis: " + iWidth + ";" : "", spacingInfo && !isDummy
-                ? styleOfProp("padding", spacingInfo, props, translateBoxSpacingHalf())
+            var propsWithTheme = _this.propsWithTheme(theme);
+            return styled.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      box-sizing: border-box;\n      display: flex;\n      ", "\n      ", "\n      ", "", ";\n    "], ["\n      box-sizing: border-box;\n      display: flex;\n      ", "\n      ", "\n      ", "",
+                ";\n    "])), styleOfProp("flex-grow", grow, propsWithTheme), isDummy ? "height: 0;" : "", iWidth ? "flex-basis: " + iWidth + ";" : "", spacingInfo && !isDummy
+                ? styleOfProp("padding", spacingInfo, propsWithTheme, translateBoxSpacingHalf())
                 : "");
         });
+        _this.propsWithTheme = function (theme) { return (__assign({}, _this.props, { theme: theme })); };
         _this.boxThemeThunk = function (literals) {
@@ -203,5 +212,9 @@ var interpolations = [];
             var _a = _this.props, childGrow = _a.childGrow, childWidth = _a.childWidth, spacing = _a.spacing;
-            var grow = (child && child.props && child.props.grow) || 0;
-            var width = child && child.props && child.props.width;
-            return (React.createElement(_this.BoxChild, { grow: grow || childGrow, iWidth: width || childWidth, spacingInfo: spacing, isDummy: isDummy }, !isDummy && child));
+            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
+                ? React.cloneElement(child, { isChild: true })
+                : isDummy
+                    ? null
+                    : child));
         }; };
@@ -211,22 +224,17 @@ 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, _d = _a.spacing, spacing = _d === void 0 ? 0 : _d, style = _a.style, verticalAlign = _a.verticalAlign, width = _a.width, rest = __rest(_a, ["childGrow", "childWidth", "childWrap", "children", "direction", "grow", "horizontalAlign", "spacing", "style", "verticalAlign", "width"]);
-        var shouldIncludeBoxChildren = !!(direction === "horizontal" ||
-            spacing ||
-            horizontalAlign ||
-            verticalAlign ||
-            childWrap);
-        var shouldWrapChildren = !!(spacing ||
-            childGrow ||
-            childWidth ||
-            childWrap === "even");
+        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 shouldIncludeDummies = childWrap === "even";
-        var childrenWrapped = shouldWrapChildren
-            ? React.Children.map(children, this.childToBoxChild(false))
-            : children;
-        var childrenDummies = shouldIncludeDummies &&
-            React.Children.map(children, this.childToBoxChild(true));
-        var childrenComputed = [childrenWrapped, childrenDummies];
-        return (React.createElement(this.BoxContainer, __assign({ grow: grow, styleString: style }, rest), shouldIncludeBoxChildren ? (React.createElement(this.BoxChildren, { iDirection: direction, spacingInfo: spacing, horizontalAlign: horizontalAlign, verticalAlign: verticalAlign, childWrap: childWrap }, childrenComputed)) : (childrenComputed)));
+        var childrenWrapped = React.Children.map(children, this.childToBoxChild(false));
+        var childrenDummies = shouldIncludeDummies
+            ? React.Children.map(children, this.childToBoxChild(true))
+            : null;
+        return (React.createElement(this.BoxContainer, __assign({ "data-name": "BoxContainer", grow: grow, styleString: style }, rest),
+            React.createElement(this.BoxChildren, { "data-name": "BoxChildren", iDirection: direction, spacingInfo: spacing, horizontalAlign: horizontalAlign, verticalAlign: verticalAlign, childWrap: childWrap },
+                childrenWrapped,
+                childrenDummies)));
     };
     Box.displayName = "Box";
+    Box.defaultProps = {
+        isChild: false,
+    };
     return Box;
@@ -233,0 +241,0 @@ }(React.PureComponent));

package.json

 {
   "name": "react-boxl",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A thing",
@@ -10,3 +10,6 @@ "author": "Crema",
   "files": [
-    "dist"
+    "dist/lib",
+    "dist/types",
+    "dist/web.d.ts",
+    "dist/web.js"
   ],
@@ -35,3 +38,4 @@ "watch": {
     "watch": "npm-watch",
-    "watch:loki": "npm-watch loki"
+    "watch:loki": "npm-watch loki",
+    "prepublishOnly": "npm run build"
   },
@@ -44,24 +48,24 @@ "dependencies": {},
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.10",
-    "@storybook/addon-links": "^3.4.10",
-    "@storybook/addons": "^3.4.10",
-    "@storybook/react": "^3.4.10",
-    "@types/jest": "^23.3.3",
-    "@types/react": "^16.4.13",
-    "@types/react-dom": "^16.0.7",
+    "@storybook/addon-actions": "^3.4.11",
+    "@storybook/addon-links": "^3.4.11",
+    "@storybook/addons": "^3.4.11",
+    "@storybook/react": "^3.4.11",
+    "@types/jest": "^23.3.9",
+    "@types/react": "^16.4.18",
+    "@types/react-dom": "^16.0.9",
     "@types/storybook__react": "^3.0.9",
-    "@types/styled-components": "^3.0.0",
+    "@types/styled-components": "^4.0.0",
     "babel-core": "^6.26.3",
-    "jest": "^23.5.0",
+    "jest": "^23.6.0",
     "loki": "^0.13.0",
     "npm-run-all": "^4.1.3",
     "npm-watch": "^0.4.0",
-    "prettier": "^1.14.2",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "rollup": "^0.65.0",
+    "prettier": "^1.14.3",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "rollup": "^0.65.2",
     "rollup-plugin-filesize": "^4.0.1",
-    "rollup-plugin-typescript2": "^0.17.0",
-    "styled-components": "^4.0.2",
-    "ts-jest": "^23.10.3",
+    "rollup-plugin-typescript2": "^0.17.2",
+    "styled-components": "^4.0.3",
+    "ts-jest": "^23.10.4",
     "ts-loader": "^3.5.0",
@@ -72,3 +76,3 @@ "tslint": "^5.11.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.0.3"
+    "typescript": "^3.1.6"
   },
@@ -75,0 +79,0 @@ "loki": {

No alert changes

Worsened metrics

Total package byte prevSize

19493

decreased by-2.68%

Number of package files

11

decreased by-15.38%

Lines of code

310

decreased by-4.91%

No dependency changes