@helpdice/ui 1.5.5 → 1.5.8

package/dist/table/table-head.d.ts

@@ -3,7 +3,9 @@ import { TableAbstractColumn, TableDataItemBase } from './table-types';
 interface Props<TableDataItem extends TableDataItemBase> {
     width: number;
     columns: Array<TableAbstractColumn<TableDataItem>>;
+    onFilters?: (filters: any) => void;
     stickyHeader: boolean;
+    showFilters?: boolean;
     className?: string;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;

package/dist/table/table.d.ts

@@ -9,6 +9,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
     onRow?: TableOnRowClick<TableDataItem>;
     onCell?: TableOnCellClick<TableDataItem>;
     onChange?: TableOnChange<TableDataItem>;
+    onFilters?: (filters: any) => void;
     onSelected?: (selected: any[]) => void;
     onPageChange?: (page: number, start: number, end: number) => void;
     className?: string;

package/esm/table/data-table.js

@@ -174,7 +174,7 @@ function DataTable(_ref) {
         accessor = col.filter,
         options = col.options;
       var filterName = (_String4 = String(col === null || col === void 0 ? void 0 : col.name)) === null || _String4 === void 0 ? void 0 : _String4.replace(' ', '_').toLowerCase();
-      var unq_accessor = _.uniqueId(filterName);
+      // const unq_accessor = _.uniqueId(filterName);
       // if (Header === 'actions') {
       //   return (
       //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
@@ -186,10 +186,10 @@ function DataTable(_ref) {
         style: {
           padding: '3px'
         },
-        "data-column": Header,
-        key: unq_accessor
-      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
-        key: filterName,
+        "data-column": Header
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
+      // key={filterName}
+      , {
         name: filterName,
         value: (_filterValues$filterN = filterValues[filterName]) !== null && _filterValues$filterN !== void 0 ? _filterValues$filterN : 'All',
         onChange: function onChange(newValue) {
@@ -203,8 +203,8 @@ function DataTable(_ref) {
         }, option.name);
       }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
       // id={`filter-date-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "date",
         name: filterName,
         value: filterValues[filterName],
@@ -213,8 +213,8 @@ function DataTable(_ref) {
         }
       }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
       // id={`filter-search-${filterName}`}
+      // key={filterName}
       , {
-        key: filterName,
         htmlType: "text",
         autoComplete: "off"
         // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -234,14 +234,15 @@ function DataTable(_ref) {
     });
   };
   var content = function content() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, _index) {
       var _String5;
-      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      // const colunqid = _.uniqueId(`${option.name}-${index}`);
       var dataName = (_String5 = String(option.name)) === null || _String5 === void 0 ? void 0 : _String5.replace(' ', '_').toLowerCase();
       var isSelected = !hideColumn.includes(dataName);
       return /*#__PURE__*/React.createElement(Popover.Item, {
-        selected: isSelected,
-        key: colunqid,
+        selected: isSelected
+        // key={colunqid}
+        ,
         onClick: function onClick(e) {
           return handleHideColumnClick(e, option.name);
         }
@@ -341,18 +342,18 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Refresh, null)
-  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onFilters && filter ? /*#__PURE__*/React.createElement(Popover, {
+    hideArrow: true,
+    disableItemsAutoClose: true,
+    placement: "bottomEnd",
+    child: filterContent
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     text: "Filters",
     placement: "bottomEnd",
     font: 0.8,
     px: 0.6,
     py: 0.4,
     type: "dark"
-  }, /*#__PURE__*/React.createElement(Popover, {
-    hideArrow: true,
-    disableItemsAutoClose: true,
-    placement: "bottomEnd",
-    child: filterContent
   }, /*#__PURE__*/React.createElement(Button, {
     htmlType: "button",
     onClick: handleShowFilter,
@@ -426,6 +427,9 @@ function DataTable(_ref) {
         _onPageChange(page, start, end);
       }
     },
+    onFilters: function onFilters(filters) {
+      console.log(filters);
+    },
     onRow: onRowClick,
     rowDraggable: rowDraggable,
     showFilters: openFilter,
@@ -437,12 +441,11 @@ function DataTable(_ref) {
       borderCollapse: 'collapse',
       overflow: 'auto'
     }
-  }, COLUMNS.map(function (column, index) {
+  }, COLUMNS.map(function (column) {
     return /*#__PURE__*/React.createElement(Table.Column, {
       style: column === null || column === void 0 ? void 0 : column.style,
       options: column === null || column === void 0 ? void 0 : column.options,
       fontSize: column === null || column === void 0 ? void 0 : column.fontSize,
-      key: "".concat(column.id, "-").concat(index),
       prop: column.id,
       label: column.name,
       filter: column === null || column === void 0 ? void 0 : column.filter,

package/esm/table/table-head.d.ts

@@ -3,7 +3,9 @@ import { TableAbstractColumn, TableDataItemBase } from './table-types';
 interface Props<TableDataItem extends TableDataItemBase> {
     width: number;
     columns: Array<TableAbstractColumn<TableDataItem>>;
+    onFilters?: (filters: any) => void;
     stickyHeader: boolean;
+    showFilters?: boolean;
     className?: string;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;

package/esm/table/table-head.js

@@ -1,7 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
+import Input from '../input';
+import Select from '../select';
+import Button from '../button';
 var makeColgroup = function makeColgroup(width, columns) {
   var unsetWidthCount = columns.filter(function (c) {
     return !c.width;
@@ -20,9 +25,15 @@ var makeColgroup = function makeColgroup(width, columns) {
 };
 var TableHead = function TableHead(props) {
   var theme = useTheme();
+  var _React$useState = React.useState({}),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    filters = _React$useState2[0],
+    setFilters = _React$useState2[1];
   var _ref = props,
     columns = _ref.columns,
     width = _ref.width,
+    onFilters = _ref.onFilters,
+    showFilters = _ref.showFilters,
     stickyHeader = _ref.stickyHeader;
   var isScalableWidth = useMemo(function () {
     return columns.find(function (item) {
@@ -33,6 +44,82 @@ var TableHead = function TableHead(props) {
     if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
     return makeColgroup(width, columns);
   }, [isScalableWidth, width]);
+  var handleFilterChange = function handleFilterChange(name, value) {
+    setFilters(function (prevFilters) {
+      var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
+      return updatedFilters;
+    });
+  };
+  var applyFilters = function applyFilters() {
+    if (onFilters) {
+      onFilters(filters);
+    }
+  };
+  var generateFilterInputs = function generateFilterInputs() {
+    return columns.map(function (col) {
+      var _String, _filters$filterName;
+      var Header = col.label,
+        accessor = col.filter,
+        options = col.options;
+      var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
+      // const unq_accessor = _.uniqueId(filterName);
+      // if (Header === 'actions') {
+      //   return (
+      //     <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
+      //       <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
+      //     </th>
+      //   )
+      // }
+      return /*#__PURE__*/React.createElement("th", {
+        style: {
+          padding: '3px'
+        },
+        "data-column": Header
+      }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
+      // key={unq_accessor}
+      // name={filterName}
+      , {
+        value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
+        onChange: function onChange(newValue) {
+          return handleFilterChange(filterName, newValue);
+        }
+      }, /*#__PURE__*/React.createElement(Select.Option, {
+        value: "All"
+      }, "All ", Header), options ? options.map(function (option) {
+        return /*#__PURE__*/React.createElement(Select.Option, {
+          value: option.value
+        }, option.name);
+      }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
+      // id={`filter-date-${filterName}`}
+      , {
+        htmlType: "date"
+        // name={filterName}
+        ,
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        }
+      }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
+      // id={`filter-search-${filterName}`}
+      , {
+        htmlType: "text",
+        autoComplete: "off"
+        // ref={filterRefs.current[filterName]} // Dynamically set ref}
+        // name={filterName}
+        ,
+        style: {
+          height: 30,
+          minWidth: 160
+        },
+        value: filters[filterName],
+        onChange: function onChange(e) {
+          return handleFilterChange(filterName, e.target.value);
+        },
+        placeholder: "Search...",
+        fullWidth: true
+      }));
+    });
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
@@ -40,10 +127,9 @@ var TableHead = function TableHead(props) {
       backgroundColor: '#fff'
     },
     className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
-  }, columns.map(function (column, index) {
-    var _String;
-    var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
-    console.log('Column Hide:', dataName);
+  }, columns.map(function (column, _index) {
+    var _String2;
+    var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
     return /*#__PURE__*/React.createElement("th", {
       style: _extends({
         // textAlign: `${column?.align} !important`,
@@ -53,7 +139,6 @@ var TableHead = function TableHead(props) {
         color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#333'),
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, column === null || column === void 0 ? void 0 : column.style),
-      key: "table-th-".concat(column.prop.toString(), "-").concat(index),
       "data-column": dataName,
       className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
     }, /*#__PURE__*/React.createElement("div", {
@@ -66,7 +151,15 @@ var TableHead = function TableHead(props) {
       },
       className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }, column.text)));
-  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+  })), showFilters && /*#__PURE__*/React.createElement("tr", {
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, generateFilterInputs(), /*#__PURE__*/React.createElement("th", {
+    className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return applyFilters();
+    }
+  }, "Apply")))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2156261549",
     dynamic: [stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
   }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;background-color:#fff;font-size:inherit;".concat(stickyHeader && "\n            position: sticky;\n            top: 0;\n            z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));

package/esm/table/table.d.ts

@@ -9,6 +9,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
     onRow?: TableOnRowClick<TableDataItem>;
     onCell?: TableOnCellClick<TableDataItem>;
     onChange?: TableOnChange<TableDataItem>;
+    onFilters?: (filters: any) => void;
     onSelected?: (selected: any[]) => void;
     onPageChange?: (page: number, start: number, end: number) => void;
     className?: string;

package/esm/table/table.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "cursorPagination", "previousCursor", "nextCursor", "hasMore", "onNextPage", "onPreviousPage", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -44,6 +44,7 @@ function TableComponent(tableProps) {
     onRow = _ref.onRow,
     onCell = _ref.onCell,
     onChange = _ref.onChange,
+    onFilters = _ref.onFilters,
     onPageChange = _ref.onPageChange,
     _ref$showFilters = _ref.showFilters,
     showFilters = _ref$showFilters === void 0 ? false : _ref$showFilters,
@@ -118,6 +119,8 @@ function TableComponent(tableProps) {
     className: _JSXStyle.dynamic([["1971279331", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
     stickyHeader: stickyHeader,
+    onFilters: onFilters,
+    showFilters: showFilters,
     columns: columns,
     width: width
   }), /*#__PURE__*/React.createElement(TableBody, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.5.5",
+  "version": "1.5.8",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",