ywana-core8 0.0.537 → 0.0.538

package/dist/index.umd.js

@@ -4047,7 +4047,7 @@
           fields = section.fields;
       return /*#__PURE__*/React__default["default"].createElement("section", {
         key: title
-      }, /*#__PURE__*/React__default["default"].createElement("nav", null, "\xA0"), /*#__PURE__*/React__default["default"].createElement("main", null, grouped ? group(section).map(function (group) {
+      }, grouped ? group(section).map(function (group) {
         return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, group.name.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: "group-caption"
         }, group.name) : null, group.fields.filter(function (field) {
@@ -4073,7 +4073,7 @@
           onChange: change,
           content: content
         });
-      })));
+      }));
     })));
   };
   /**
@@ -4536,9 +4536,7 @@
         Feeder = field.Feeder,
         Renderer = field.Renderer,
         _field$Adder = field.Adder,
-        Adder = _field$Adder === void 0 ? true : _field$Adder,
-        _field$editable3 = field.editable,
-        editable = _field$editable3 === void 0 ? true : _field$editable3;
+        Adder = _field$Adder === void 0 ? true : _field$Adder;
 
     function add(rows) {
       if (onChange) {
@@ -4564,7 +4562,9 @@
       }
     }
 
-    var columns = Object.values(item).map(function (item) {
+    var columns = Object.values(item).filter(function (field) {
+      return field.column === true;
+    }).map(function (item) {
       return _extends({}, item, {
         onChange: change
       });
@@ -4573,7 +4573,7 @@
       id: 'actions',
       label: 'Actions'
     });
-    var rows = value.map(function (item, index) {
+    value.map(function (item, index) {
       return _extends({}, item, {
         id: index,
         actions: [/*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -4586,26 +4586,23 @@
         })]
       });
     });
-    var table = {
-      columns: columns,
-      rows: rows
-    };
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "collection-editor"
-    }, /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement(Text, {
-      use: "caption"
-    }, label), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "actions"
-    }, Feeder ? /*#__PURE__*/React__default["default"].createElement(Feeder, {
-      onAdd: add
-    }) : null)), Renderer ? /*#__PURE__*/React__default["default"].createElement(Renderer, {
+    }, Renderer ? /*#__PURE__*/React__default["default"].createElement(Renderer, {
       field: field,
       value: value,
       onRemove: remove,
       onChange: onChange
-    }) : /*#__PURE__*/React__default["default"].createElement(DataTable, _extends({}, table, {
-      editable: editable
-    })), /*#__PURE__*/React__default["default"].createElement("footer", null, Adder ? /*#__PURE__*/React__default["default"].createElement(CollectionAdder, {
+    }) // : <DataTable {...table} editable={editable} />
+    : /*#__PURE__*/React__default["default"].createElement(TableEditor$2, {
+      icon: "info",
+      title: label,
+      data: value,
+      schema: item,
+      groupBy: "field1"
+    }), /*#__PURE__*/React__default["default"].createElement("footer", null, Feeder ? /*#__PURE__*/React__default["default"].createElement(Feeder, {
+      onAdd: add
+    }) : null, Adder ? /*#__PURE__*/React__default["default"].createElement(CollectionAdder, {
       item: item,
       onAdd: add
     }) : null));
@@ -4680,6 +4677,166 @@
       action: toggle
     }));
   };
+  /**
+   * Table Editor
+   */
+
+
+  var TableEditor$2 = function TableEditor(props) {
+    var select = function select(row) {
+      try {
+        if (onSelect) onSelect(row.id);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    var _props$data = props.data,
+        data = _props$data === void 0 ? [] : _props$data,
+        icon = props.icon,
+        title = props.title,
+        schema = props.schema,
+        editable = props.editable,
+        canDelete = props.canDelete,
+        filter = props.filter,
+        actions = props.actions,
+        className = props.className;
+
+    var _useState5 = React.useState(props.groupBy),
+        groupBy = _useState5[0],
+        setGroupBy = _useState5[1];
+
+    function changeGroup(id, value) {
+      setGroupBy(value);
+    }
+
+    function renderGroupLabel(groupName) {
+      var grouper = schema[groupBy];
+      if (!groupName || !grouper) return "";
+
+      if (grouper.options) {
+        var options = CHECK['isFunction'](grouper.options) ? grouper.options() : grouper.options;
+        var option = options.find(function (option) {
+          return option.value === groupName;
+        });
+        return option ? option.label : groupName;
+      } else {
+        return groupName;
+      }
+    }
+
+    function renderGroups() {
+      var items = filter ? filter(data) : data;
+      if (items.length === 0) return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "empty-message"
+      }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "search_off"
+      }), /*#__PURE__*/React__default["default"].createElement(Text, null, "No Result Found"));
+      var groups = items.reduce(function (groups, item) {
+        var groupName = item[groupBy];
+        var group = groups[groupName];
+        if (!group) groups[groupName] = [];
+        groups[groupName].push(item);
+        return groups;
+      }, {});
+      return Object.keys(groups).map(function (groupName) {
+        var table = {
+          columns: Object.values(schema).filter(function (field) {
+            return field.column === true;
+          }).map(function (field) {
+            var options = field.options;
+
+            if (options && typeof options == 'function') {
+              options = options();
+            }
+
+            return {
+              id: field.id,
+              label: field.label,
+              type: field.type,
+              format: field.format,
+              item: field.item ? field.item : [],
+              onChange: field.id === "checked" ? checkOne : field.editable ? change : null,
+
+              /* checked has it´s own handler */
+              options: options
+            };
+          }),
+          rows: groups[groupName].map(function (item) {
+            item.actions = actions ? actions.map(function (_action) {
+              return _action.filter ? _action.filter(item) ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+                icon: _action.icon,
+                clickable: true,
+                size: "small",
+                action: function action() {
+                  return run(_action, item);
+                }
+              }) : null : /*#__PURE__*/React__default["default"].createElement(Icon, {
+                icon: _action.icon,
+                clickable: true,
+                size: "small",
+                action: function action() {
+                  return run(_action, item);
+                }
+              });
+            }) : [];
+            if (canDelete) item.actions.push( /*#__PURE__*/React__default["default"].createElement(Icon, {
+              icon: "delete",
+              size: "small",
+              clickable: true,
+              action: function action() {
+                return remove(item.id);
+              }
+            }));
+            return item;
+          })
+        };
+        table.columns.push({
+          id: "actions"
+        });
+        var groupSize = groups[groupName].length;
+        var title = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "size"
+        }, groupSize), renderGroupLabel(groupName));
+        return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+          key: groupName
+        }, /*#__PURE__*/React__default["default"].createElement(Header, {
+          title: title
+        }, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "size"
+        }, groupSize)), /*#__PURE__*/React__default["default"].createElement(DataTable, _extends({}, table, {
+          onRowSelection: select,
+          editable: editable,
+          className: className
+        })));
+      });
+    }
+
+    function buildGroupOptions(schema) {
+      return Object.values(schema).filter(function (field) {
+        return field.grouper === true;
+      }).map(function (field) {
+        return {
+          label: field.label,
+          value: field.id
+        };
+      });
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement(Header, {
+      icon: icon,
+      title: /*#__PURE__*/React__default["default"].createElement(Text, null, title)
+    }, /*#__PURE__*/React__default["default"].createElement(DropDown, {
+      id: "groupBy",
+      label: "Agrupar Por",
+      value: groupBy,
+      options: buildGroupOptions(schema),
+      onChange: changeGroup
+    })), /*#__PURE__*/React__default["default"].createElement("main", {
+      className: "table-editor"
+    }, renderGroups()));
+  };
 
   /**
    * Create Content Dialog