ywana-core8 0.0.537 → 0.0.540

package/dist/index.modern.js

@@ -2057,8 +2057,18 @@ var TokenField = function TokenField(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "tokenField"
   }, /*#__PURE__*/React.createElement("label", null, label), tks.map(function (text, index) {
+    var text2 = text;
+
+    if (options) {
+      var lbl = options.find(function (opt) {
+        return opt.value == text;
+      });
+      if (lbl) text2 = lbl.label;
+      console.log(text, lbl, text2, options);
+    }
+
     return /*#__PURE__*/React.createElement(Token, {
-      text: text,
+      text: text2,
       onDelete: function onDelete() {
         return remove(index);
       }
@@ -4044,7 +4054,7 @@ var TabbedContentEditor = function TabbedContentEditor(_ref2) {
         fields = section.fields;
     return /*#__PURE__*/React.createElement("section", {
       key: title
-    }, /*#__PURE__*/React.createElement("nav", null, "\xA0"), /*#__PURE__*/React.createElement("main", null, grouped ? group(section).map(function (group) {
+    }, grouped ? group(section).map(function (group) {
       return /*#__PURE__*/React.createElement(Fragment, null, group.name.length > 0 ? /*#__PURE__*/React.createElement("div", {
         className: "group-caption"
       }, group.name) : null, group.fields.filter(function (field) {
@@ -4070,7 +4080,7 @@ var TabbedContentEditor = function TabbedContentEditor(_ref2) {
         onChange: change,
         content: content
       });
-    })));
+    }));
   })));
 };
 /**
@@ -4533,9 +4543,7 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
       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) {
@@ -4561,7 +4569,9 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
     }
   }
 
-  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
     });
@@ -4570,7 +4580,7 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
     id: 'actions',
     label: 'Actions'
   });
-  var rows = value.map(function (item, index) {
+  value.map(function (item, index) {
     return _extends({}, item, {
       id: index,
       actions: [/*#__PURE__*/React.createElement(Icon, {
@@ -4583,26 +4593,23 @@ var CollectionEditor$1 = function CollectionEditor(_ref10) {
       })]
     });
   });
-  var table = {
-    columns: columns,
-    rows: rows
-  };
   return /*#__PURE__*/React.createElement("div", {
     className: "collection-editor"
-  }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Text, {
-    use: "caption"
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: "actions"
-  }, Feeder ? /*#__PURE__*/React.createElement(Feeder, {
-    onAdd: add
-  }) : null)), Renderer ? /*#__PURE__*/React.createElement(Renderer, {
+  }, Renderer ? /*#__PURE__*/React.createElement(Renderer, {
     field: field,
     value: value,
     onRemove: remove,
     onChange: onChange
-  }) : /*#__PURE__*/React.createElement(DataTable, _extends({}, table, {
-    editable: editable
-  })), /*#__PURE__*/React.createElement("footer", null, Adder ? /*#__PURE__*/React.createElement(CollectionAdder, {
+  }) // : <DataTable {...table} editable={editable} />
+  : /*#__PURE__*/React.createElement(TableEditor$2, {
+    icon: "info",
+    title: label,
+    data: value,
+    schema: item,
+    groupBy: "field1"
+  }), /*#__PURE__*/React.createElement("footer", null, Feeder ? /*#__PURE__*/React.createElement(Feeder, {
+    onAdd: add
+  }) : null, Adder ? /*#__PURE__*/React.createElement(CollectionAdder, {
     item: item,
     onAdd: add
   }) : null));
@@ -4677,6 +4684,166 @@ var CollectionAdder = function CollectionAdder(_ref11) {
     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 = 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.createElement("div", {
+      className: "empty-message"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "search_off"
+    }), /*#__PURE__*/React.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.createElement(Icon, {
+              icon: _action.icon,
+              clickable: true,
+              size: "small",
+              action: function action() {
+                return run(_action, item);
+              }
+            }) : null : /*#__PURE__*/React.createElement(Icon, {
+              icon: _action.icon,
+              clickable: true,
+              size: "small",
+              action: function action() {
+                return run(_action, item);
+              }
+            });
+          }) : [];
+          if (canDelete) item.actions.push( /*#__PURE__*/React.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.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+        className: "size"
+      }, groupSize), renderGroupLabel(groupName));
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: groupName
+      }, /*#__PURE__*/React.createElement(Header, {
+        title: title
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "size"
+      }, groupSize)), /*#__PURE__*/React.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.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    icon: icon,
+    title: /*#__PURE__*/React.createElement(Text, null, title)
+  }, /*#__PURE__*/React.createElement(DropDown, {
+    id: "groupBy",
+    label: "Agrupar Por",
+    value: groupBy,
+    options: buildGroupOptions(schema),
+    onChange: changeGroup
+  })), /*#__PURE__*/React.createElement("main", {
+    className: "table-editor"
+  }, renderGroups()));
+};
 
 /**
  * Create Content Dialog