ywana-core8 0.0.906 → 0.0.907

package/dist/index.umd.js

@@ -3013,29 +3013,120 @@
      */
     var Kanban = function Kanban(_ref) {
       var children = _ref.children;
+      React.useMemo(function () {
+        var found = React__default["default"].Children.map(children, function (child) {
+          if (child.type.name === KanbanSwimlane.name) {
+            return child;
+          }
+        });
+        return found.length > 0;
+      });
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "kanban"
+        className: "kanban with-swimlanes"
       }, children);
     };
+    var KanbanHeader = function KanbanHeader(props) {
+      var columns = props.columns;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "kanban-header"
+      }, columns.map(function (column, index) {
+        var icon = column.icon,
+          title = column.title,
+          subtitle = column.subtitle,
+          badge = column.badge;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "kanban-column",
+          key: index
+        }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+          icon: icon
+        }), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "title"
+        }, /*#__PURE__*/React__default["default"].createElement(Text, {
+          use: "headline6"
+        }, title), /*#__PURE__*/React__default["default"].createElement(Text, {
+          className: "secondary-text",
+          use: "body2"
+        }, subtitle)), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "badge"
+        }, badge)));
+      }));
+    };
+    var KanbanSwimlane = function KanbanSwimlane(_ref2) {
+      var icon = _ref2.icon,
+        title = _ref2.title,
+        subtitle = _ref2.subtitle,
+        badge = _ref2.badge,
+        children = _ref2.children;
+      var _useState = React.useState(true),
+        unfold = _useState[0],
+        setUnfold = _useState[1];
+
+      // cahnge all children headless prop to true
+      // if there is only one child
+      if (children.length === 1) {
+        children = React__default["default"].cloneElement(children, {
+          headless: true
+        });
+      } else {
+        children = React__default["default"].Children.map(children, function (child) {
+          return React__default["default"].cloneElement(child, {
+            headless: true
+          });
+        });
+      }
+
+      // log al children headless prop
+      children.forEach(function (child) {
+        console.log(child.props.headless);
+      });
+      function toggle() {
+        setUnfold(!unfold);
+      }
+      var toggleIcon = unfold ? "unfold_less" : "unfold_more";
+      var toggleStyle = unfold ? "unfold" : "fold";
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "kanban-swimlane"
+      }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: icon,
+        size: "small"
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "title"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, {
+        use: "headline6"
+      }, title, ":"), /*#__PURE__*/React__default["default"].createElement(Text, {
+        className: "secondary-text",
+        use: "body2"
+      }, subtitle)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "badge"
+      }, badge), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: toggleIcon,
+        clickable: true,
+        action: toggle
+      })), /*#__PURE__*/React__default["default"].createElement("main", {
+        className: toggleStyle
+      }, children));
+    };
 
     /**
      * Kanban Column
      */
-    var KanbanColumn = function KanbanColumn(_ref2) {
-      var id = _ref2.id,
-        actions = _ref2.actions,
-        icon = _ref2.icon,
-        title = _ref2.title,
-        subtitle = _ref2.subtitle,
-        badge = _ref2.badge,
-        children = _ref2.children,
-        _ref2$minified = _ref2.minified,
-        minified = _ref2$minified === void 0 ? false : _ref2$minified,
-        _ref2$disabled = _ref2.disabled,
-        disabled = _ref2$disabled === void 0 ? false : _ref2$disabled;
-      var _useState = React.useState(minified),
-        min = _useState[0],
-        setMin = _useState[1];
+    var KanbanColumn = function KanbanColumn(_ref3) {
+      var id = _ref3.id,
+        actions = _ref3.actions,
+        _ref3$headless = _ref3.headless,
+        headless = _ref3$headless === void 0 ? false : _ref3$headless,
+        icon = _ref3.icon,
+        title = _ref3.title,
+        subtitle = _ref3.subtitle,
+        badge = _ref3.badge,
+        children = _ref3.children,
+        _ref3$minified = _ref3.minified,
+        minified = _ref3$minified === void 0 ? false : _ref3$minified,
+        _ref3$disabled = _ref3.disabled,
+        disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+      var _useState2 = React.useState(minified),
+        min = _useState2[0],
+        setMin = _useState2[1];
       function toggle() {
         setMin(!min);
       }
@@ -3048,7 +3139,7 @@
         action: toggle
       }))) : /*#__PURE__*/React__default["default"].createElement("div", {
         className: "kanban-column " + id + " " + (disabled ? 'disabled' : '')
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      }, headless ? "" : /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: icon
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "title"
@@ -3070,10 +3161,10 @@
     /**
      * Kanban Card
      */
-    var KanbanCard = function KanbanCard(_ref3) {
-      var className = _ref3.className,
-        color = _ref3.color,
-        children = _ref3.children;
+    var KanbanCard = function KanbanCard(_ref4) {
+      var className = _ref4.className,
+        color = _ref4.color,
+        children = _ref4.children;
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "kanban-card " + className + " " + color
       }, children);
@@ -11261,6 +11352,8 @@
     exports.Kanban = Kanban;
     exports.KanbanCard = KanbanCard;
     exports.KanbanColumn = KanbanColumn;
+    exports.KanbanHeader = KanbanHeader;
+    exports.KanbanSwimlane = KanbanSwimlane;
     exports.LinearProgress = LinearProgress;
     exports.List = List;
     exports.ListEditor = ListEditor;