ywana-core8 0.0.943 → 0.0.945

package/dist/index.umd.js

@@ -1840,8 +1840,25 @@
         icon: "search_off"
       }), /*#__PURE__*/React__default["default"].createElement(Text, null, emptyMessage)))))));
     };
+
+    /**
+     * DataTableFiltersRow
+     */
     var DataTableFiltersRow = function DataTableFiltersRow(_ref4) {
       var columns = _ref4.columns;
+      var _useState3 = React.useState({}),
+        form = _useState3[0],
+        setForm = _useState3[1];
+      function changeFilter(id, value, onFilter) {
+        var _extends2;
+        setForm(_extends({}, form, (_extends2 = {}, _extends2[id] = value, _extends2)));
+        if (onFilter) onFilter(value);
+      }
+      function clear() {
+        setForm({});
+      }
+      var dirty = Object.keys(form).length > 0; // dirty if there are filters set
+
       return /*#__PURE__*/React__default["default"].createElement("tr", {
         className: "filters-row"
       }, columns.map(function (_ref5) {
@@ -1851,18 +1868,30 @@
           options = _ref5.options;
         var field = options ? /*#__PURE__*/React__default["default"].createElement(DropDown, {
           id: id,
+          value: form[id],
           options: options,
-          onChange: onFilter,
+          onChange: function onChange(id, value) {
+            return changeFilter(id, value, onFilter);
+          },
           outlined: true
         }) : /*#__PURE__*/React__default["default"].createElement(TextField, {
           id: id,
-          onChange: onFilter,
+          value: form[id],
+          onChange: function onChange(id, value) {
+            return changeFilter(id, value, onFilter);
+          },
           outlined: true
         });
         return /*#__PURE__*/React__default["default"].createElement("td", {
           className: "filter-cell"
         }, filterable ? field : null);
-      }));
+      }), /*#__PURE__*/React__default["default"].createElement("td", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "close",
+        size: "small",
+        clickable: true,
+        action: clear,
+        disabled: !dirty
+      })));
     };
 
     /**
@@ -1880,9 +1909,9 @@
       var _row$selected = row.selected,
         selected = _row$selected === void 0 ? false : _row$selected,
         className = row.className;
-      var _useState3 = React.useState(expanded),
-        isInfoOpen = _useState3[0],
-        toggleInfo = _useState3[1];
+      var _useState4 = React.useState(expanded),
+        isInfoOpen = _useState4[0],
+        toggleInfo = _useState4[1];
       var infoIcon = isInfoOpen ? 'expand_less' : 'expand_more';
       var style = isInfoOpen ? "expanded" : "";
       if (selected) style += " selected";