@helpdice/ui 1.1.9 → 1.2.0

package/dist/index.js

@@ -42144,16 +42144,17 @@ var TableHead = function TableHead(props) {
       var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
       var unq_accessor = _.uniqueId(filterName);
       if (accessor === 'fixed') {
+        var _filters$filterName;
         // Dropdown filter for categorical data (category, status)
         return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Select, {
           key: unq_accessor,
           name: filterName,
-          value: filters[filterName],
+          value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
           onChange: function onChange(newValue) {
             return handleFilterChange(filterName, newValue);
           }
         }, /*#__PURE__*/React.createElement(Select.Option, {
-          value: ""
+          value: "All"
         }, "All ", Header), options ? options.map(function (option) {
           return /*#__PURE__*/React.createElement(Select.Option, {
             value: option.value
@@ -42173,25 +42174,26 @@ var TableHead = function TableHead(props) {
           }
         }));
       }
-
-      // Text search filter for other fields (like name)
-      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
-        id: "filter-search-".concat(filterName),
-        htmlType: "text"
-        // 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
-      }));
+      if (accessor === 'search') {
+        // Text search filter
+        return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
+          id: "filter-search-".concat(filterName),
+          htmlType: "text"
+          // 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", {
@@ -42270,18 +42272,37 @@ var TableBody = function TableBody(_ref) {
     onCell = _ref.onCell,
     rowClassName = _ref.rowClassName,
     _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable;
-    _ref.readOnly;
-    var onSelected = _ref.onSelected;
+    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    onSelected = _ref.onSelected;
   var theme = useTheme();
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0];
-    _useState2[1];
+    selected = _useState2[0],
+    setSelected = _useState2[1];
   var _useTableContext = useTableContext(),
     columns = _useTableContext.columns;
-  var rowClickHandler = function rowClickHandler(row, index) {
-    onRow && onRow(row, index);
+  // const rowClickHandler = (row: TableDataItem, index: number) => {
+  //   onRow && onRow(row, index)
+  // }
+
+  var handleClick = function handleClick(_event, id) {
+    if (readOnly) {
+      return true;
+    }
+    var selectedIndex = selected.indexOf(id);
+    var newSelected = [];
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+    }
+    setSelected(newSelected);
   };
 
   // const handleSelectAllClick = (event: { target: { checked: any } }) => {
@@ -42309,16 +42330,11 @@ var TableBody = function TableBody(_ref) {
     delete rw.table;
     delete rw.style;
     delete rw.onDragStart;
-    console.log(row);
-    var frow = Object.fromEntries(Object.entries(row).filter(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        ky = _ref3[0];
-        _ref3[1];
-      return ky !== '_id' && cols.map(function (col) {
-        return col.id;
-      }).includes(ky);
-    }));
-    console.log(frow);
+    // console.log(row);
+    // const frow = Object.fromEntries(
+    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
+    // ) as unknown as TableDataItem
+    // console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
     return /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,
@@ -42336,8 +42352,10 @@ var TableBody = function TableBody(_ref) {
       }, rowStyle),
       onClick: function onClick(e) {
         if (!rowDraggable) {
-          {
-            rowClickHandler(row, index);
+          if (onRow) {
+            onRow(row, index);
+          } else {
+            handleClick(e, row);
           }
         }
       }
@@ -42404,6 +42422,7 @@ var TableColumn = function TableColumn(columnProps) {
     label = _ref.label,
     width = _ref.width,
     filter = _ref.filter,
+    options = _ref.options,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     renderHandler = _ref.render;
@@ -42417,12 +42436,13 @@ var TableColumn = function TableColumn(columnProps) {
     updateColumn({
       label: children || label,
       filter: filter,
+      options: options,
       prop: safeProp,
       width: width,
       className: className,
       renderHandler: function renderHandler() {}
     });
-  }, [children, filter, label, prop, width, className, renderHandler]);
+  }, [children, filter, options, label, prop, width, className, renderHandler]);
   return null;
 };
 TableColumn.displayName = 'TableColumn';

package/dist/table/index.js

@@ -19870,16 +19870,17 @@ var TableHead = function TableHead(props) {
       var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
       var unq_accessor = _.uniqueId(filterName);
       if (accessor === 'fixed') {
+        var _filters$filterName;
         // Dropdown filter for categorical data (category, status)
         return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Select, {
           key: unq_accessor,
           name: filterName,
-          value: filters[filterName],
+          value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
           onChange: function onChange(newValue) {
             return handleFilterChange(filterName, newValue);
           }
         }, /*#__PURE__*/React.createElement(Select.Option, {
-          value: ""
+          value: "All"
         }, "All ", Header), options ? options.map(function (option) {
           return /*#__PURE__*/React.createElement(Select.Option, {
             value: option.value
@@ -19899,25 +19900,26 @@ var TableHead = function TableHead(props) {
           }
         }));
       }
-
-      // Text search filter for other fields (like name)
-      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
-        id: "filter-search-".concat(filterName),
-        htmlType: "text"
-        // 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
-      }));
+      if (accessor === 'search') {
+        // Text search filter
+        return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
+          id: "filter-search-".concat(filterName),
+          htmlType: "text"
+          // 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", {
@@ -19996,18 +19998,37 @@ var TableBody = function TableBody(_ref) {
     onCell = _ref.onCell,
     rowClassName = _ref.rowClassName,
     _ref$rowDraggable = _ref.rowDraggable,
-    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable;
-    _ref.readOnly;
-    var onSelected = _ref.onSelected;
+    rowDraggable = _ref$rowDraggable === undefined ? false : _ref$rowDraggable,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === undefined ? false : _ref$readOnly,
+    onSelected = _ref.onSelected;
   var theme = useTheme();
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0];
-    _useState2[1];
+    selected = _useState2[0],
+    setSelected = _useState2[1];
   var _useTableContext = useTableContext(),
     columns = _useTableContext.columns;
-  var rowClickHandler = function rowClickHandler(row, index) {
-    onRow && onRow(row, index);
+  // const rowClickHandler = (row: TableDataItem, index: number) => {
+  //   onRow && onRow(row, index)
+  // }
+
+  var handleClick = function handleClick(_event, id) {
+    if (readOnly) {
+      return true;
+    }
+    var selectedIndex = selected.indexOf(id);
+    var newSelected = [];
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+    }
+    setSelected(newSelected);
   };
 
   // const handleSelectAllClick = (event: { target: { checked: any } }) => {
@@ -20035,16 +20056,11 @@ var TableBody = function TableBody(_ref) {
     delete rw.table;
     delete rw.style;
     delete rw.onDragStart;
-    console.log(row);
-    var frow = Object.fromEntries(Object.entries(row).filter(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        ky = _ref3[0];
-        _ref3[1];
-      return ky !== '_id' && cols.map(function (col) {
-        return col.id;
-      }).includes(ky);
-    }));
-    console.log(frow);
+    // console.log(row);
+    // const frow = Object.fromEntries(
+    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
+    // ) as unknown as TableDataItem
+    // console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
     return /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,
@@ -20062,8 +20078,10 @@ var TableBody = function TableBody(_ref) {
       }, rowStyle),
       onClick: function onClick(e) {
         if (!rowDraggable) {
-          {
-            rowClickHandler(row, index);
+          if (onRow) {
+            onRow(row, index);
+          } else {
+            handleClick(e, row);
           }
         }
       }
@@ -20173,6 +20191,7 @@ var TableColumn = function TableColumn(columnProps) {
     label = _ref.label,
     width = _ref.width,
     filter = _ref.filter,
+    options = _ref.options,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     renderHandler = _ref.render;
@@ -20186,12 +20205,13 @@ var TableColumn = function TableColumn(columnProps) {
     updateColumn({
       label: children || label,
       filter: filter,
+      options: options,
       prop: safeProp,
       width: width,
       className: className,
       renderHandler: function renderHandler() {}
     });
-  }, [children, filter, label, prop, width, className, renderHandler]);
+  }, [children, filter, options, label, prop, width, className, renderHandler]);
   return null;
 };
 TableColumn.displayName = 'TableColumn';

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

@@ -5,6 +5,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     label?: string;
     filter?: string;
     width?: number;
+    options?: any[];
     className?: string;
     render?: TableColumnRender<TableDataItem>;
 };

package/esm/table/table-body.js

@@ -26,9 +26,10 @@ var TableBody = function TableBody(_ref) {
     setSelected = _useState2[1];
   var _useTableContext = useTableContext(),
     columns = _useTableContext.columns;
-  var rowClickHandler = function rowClickHandler(row, index) {
-    onRow && onRow(row, index);
-  };
+  // const rowClickHandler = (row: TableDataItem, index: number) => {
+  //   onRow && onRow(row, index)
+  // }
+
   var handleClick = function handleClick(_event, id) {
     if (readOnly) {
       return true;
@@ -72,16 +73,11 @@ var TableBody = function TableBody(_ref) {
     delete rw.table;
     delete rw.style;
     delete rw.onDragStart;
-    console.log(row);
-    var frow = Object.fromEntries(Object.entries(row).filter(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        ky = _ref3[0],
-        _ = _ref3[1];
-      return ky !== '_id' && cols.map(function (col) {
-        return col.id;
-      }).includes(ky);
-    }));
-    console.log(frow);
+    // console.log(row);
+    // const frow = Object.fromEntries(
+    //   Object.entries(row).filter(([ky, _]) => ky !== '_id' && cols.map((col: any) => col.id).includes(ky))
+    // ) as unknown as TableDataItem
+    // console.log(frow);
     var isRowSelected = selected.indexOf(row) !== -1;
     return /*#__PURE__*/React.createElement("tr", {
       draggable: rowDraggable,
@@ -99,8 +95,8 @@ var TableBody = function TableBody(_ref) {
       }, rowStyle),
       onClick: function onClick(e) {
         if (!rowDraggable) {
-          if (rowClickHandler) {
-            rowClickHandler(row, index);
+          if (onRow) {
+            onRow(row, index);
           } else {
             handleClick(e, row);
           }

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

@@ -5,6 +5,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     label?: string;
     filter?: string;
     width?: number;
+    options?: any[];
     className?: string;
     render?: TableColumnRender<TableDataItem>;
 };

package/esm/table/table-column.js

@@ -10,6 +10,7 @@ var TableColumn = function TableColumn(columnProps) {
     label = _ref.label,
     width = _ref.width,
     filter = _ref.filter,
+    options = _ref.options,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
     renderHandler = _ref.render;
@@ -23,12 +24,13 @@ var TableColumn = function TableColumn(columnProps) {
     updateColumn({
       label: children || label,
       filter: filter,
+      options: options,
       prop: safeProp,
       width: width,
       className: className,
       renderHandler: function renderHandler() {}
     });
-  }, [children, filter, label, prop, width, className, renderHandler]);
+  }, [children, filter, options, label, prop, width, className, renderHandler]);
   return null;
 };
 TableColumn.displayName = 'TableColumn';

package/esm/table/table-head.js

@@ -61,16 +61,17 @@ var TableHead = function TableHead(props) {
       var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
       var unq_accessor = _.uniqueId(filterName);
       if (accessor === 'fixed') {
+        var _filters$filterName;
         // Dropdown filter for categorical data (category, status)
         return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Select, {
           key: unq_accessor,
           name: filterName,
-          value: filters[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: ""
+          value: "All"
         }, "All ", Header), options ? options.map(function (option) {
           return /*#__PURE__*/React.createElement(Select.Option, {
             value: option.value
@@ -90,25 +91,26 @@ var TableHead = function TableHead(props) {
           }
         }));
       }
-
-      // Text search filter for other fields (like name)
-      return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
-        id: "filter-search-".concat(filterName),
-        htmlType: "text"
-        // 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
-      }));
+      if (accessor === 'search') {
+        // Text search filter
+        return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
+          id: "filter-search-".concat(filterName),
+          htmlType: "text"
+          // 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", {

package/package.json

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