@ajuhos/react-flow-chart - npm Package Compare versions

Comparing version 0.0.32 to 0.0.33

package.json

 {
   "name": "@ajuhos/react-flow-chart",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "A flexible, stateless flow chart library for react.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/components/Ports/Ports.default.js

@@ -27,15 +27,15 @@ "use strict";
         React.createElement(__1.PortsGroupDefault, { config: config, side: "top" },
-            React.createElement("div", null,
+            React.createElement(__1.PortsGroupInnerDefault, { direction: "horizontal" },
                 React.createElement(react_resize_observer_1.default, { onResize: function (rect) { setTop(rect.width); } }),
                 children.filter(function (child) { return ['input', 'top'].includes(child.props.port.type); }))),
         React.createElement(__1.PortsGroupDefault, { config: config, side: "bottom" },
-            React.createElement("div", null,
+            React.createElement(__1.PortsGroupInnerDefault, { direction: "horizontal" },
                 React.createElement(react_resize_observer_1.default, { onResize: function (rect) { setBottom(rect.width); } }),
                 children.filter(function (child) { return ['output', 'bottom'].includes(child.props.port.type); }))),
         React.createElement(__1.PortsGroupDefault, { config: config, side: "right" },
-            React.createElement("div", null,
+            React.createElement(__1.PortsGroupInnerDefault, { direction: "vertical" },
                 React.createElement(react_resize_observer_1.default, { onResize: function (rect) { setRight(rect.height); } }),
                 children.filter(function (child) { return ['right'].includes(child.props.port.type); }))),
         React.createElement(__1.PortsGroupDefault, { config: config, side: "left" },
-            React.createElement("div", null,
+            React.createElement(__1.PortsGroupInnerDefault, { direction: "vertical" },
                 React.createElement(react_resize_observer_1.default, { onResize: function (rect) { setLeft(rect.height); } }),
@@ -42,0 +42,0 @@ children.filter(function (child) { return ['left'].includes(child.props.port.type); })))));

src/components/PortsGroup/PortsGroup.default.d.ts

@@ -6,2 +6,6 @@ import { IConfig } from '../../';
 }
+export interface IPortsGroupInnerDefaultProps {
+    direction: 'horizontal' | 'vertical';
+}
+export declare const PortsGroupInnerDefault: import("styled-components").StyledComponent<"div", any, IPortsGroupInnerDefaultProps, never>;
 export declare const PortsGroupDefault: import("styled-components").StyledComponent<"div", any, IPortsGroupDefaultProps, never>;

src/components/PortsGroup/PortsGroup.default.js

@@ -7,20 +7,29 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PortsGroupDefault = void 0;
+exports.PortsGroupDefault = exports.PortsGroupInnerDefault = void 0;
 var styled_components_1 = require("styled-components");
-exports.PortsGroupDefault = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n\n  ", "\n"], ["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n\n  ",
+exports.PortsGroupInnerDefault = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n\n  ",
     "\n"])), function (props) {
+    if (props.direction === 'horizontal') {
+        return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      flex-direction: row;\n      > div {\n        margin: 0 3px;\n      }\n    "], ["\n      flex-direction: row;\n      > div {\n        margin: 0 3px;\n      }\n    "])));
+    }
+    else {
+        return styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      flex-direction: column;\n      > div {\n        margin: 3px 0;\n      }\n    "], ["\n      flex-direction: column;\n      > div {\n        margin: 3px 0;\n      }\n    "])));
+    }
+});
+exports.PortsGroupDefault = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n\n  ", "\n"], ["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n\n  ",
+    "\n"])), function (props) {
     if (props.side === 'top') {
-        return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n        left: 0;\n        top: -12px;\n        flex-direction: row;\n        align-items: center;\n        > div {\n          margin: 0 3px;\n        }\n      "], ["\n        width: 100%;\n        left: 0;\n        top: -12px;\n        flex-direction: row;\n        align-items: center;\n        > div {\n          margin: 0 3px;\n        }\n      "])));
+        return styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        width: 100%;\n        left: 0;\n        top: -12px;\n        flex-direction: row;\n      "], ["\n        width: 100%;\n        left: 0;\n        top: -12px;\n        flex-direction: row;\n      "])));
     }
     else if (props.side === 'bottom') {
-        return styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        width: 100%;\n        left: 0;\n        bottom: -12px;\n        flex-direction: row;\n        align-items: center;\n        > div {\n          margin: 0 3px;\n        }\n      "], ["\n        width: 100%;\n        left: 0;\n        bottom: -12px;\n        flex-direction: row;\n        align-items: center;\n        > div {\n          margin: 0 3px;\n        }\n      "])));
+        return styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        width: 100%;\n        left: 0;\n        bottom: -12px;\n        flex-direction: row;\n      "], ["\n        width: 100%;\n        left: 0;\n        bottom: -12px;\n        flex-direction: row;\n      "])));
     }
     else if (props.side === 'left') {
-        return styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 100%;\n        top: 0;\n        left: -12px;\n        flex-direction: column;\n        align-items: center;\n        > div {\n          margin: 3px 0;\n        }\n      "], ["\n        height: 100%;\n        top: 0;\n        left: -12px;\n        flex-direction: column;\n        align-items: center;\n        > div {\n          margin: 3px 0;\n        }\n      "])));
+        return styled_components_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        height: 100%;\n        top: 0;\n        left: -12px;\n        flex-direction: column;\n      "], ["\n        height: 100%;\n        top: 0;\n        left: -12px;\n        flex-direction: column;\n      "])));
     }
     else {
-        return styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        height: 100%;\n        top: 0;\n        right: -12px;\n        flex-direction: column;\n        align-items: center;\n        > div {\n          margin: 3px 0;\n        }\n      "], ["\n        height: 100%;\n        top: 0;\n        right: -12px;\n        flex-direction: column;\n        align-items: center;\n        > div {\n          margin: 3px 0;\n        }\n      "])));
+        return styled_components_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        height: 100%;\n        top: 0;\n        right: -12px;\n        flex-direction: column;\n      "], ["\n        height: 100%;\n        top: 0;\n        right: -12px;\n        flex-direction: column;\n      "])));
     }
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 //# sourceMappingURL=PortsGroup.default.js.map

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

187965

increased by0.58%

Lines of code

2794

increased by0.32%

No dependency changes