@helpdice/ui 1.2.0 → 1.2.2

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

@@ -7,6 +7,9 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     width?: number;
     options?: any[];
     className?: string;
+    noWrap?: boolean;
+    align?: string;
+    fontSize?: string | number;
     render?: TableColumnRender<TableDataItem>;
 };
 declare const TableColumn: {

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

@@ -4,6 +4,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
     width: number;
     columns: Array<TableAbstractColumn<TableDataItem>>;
     onFilters?: (filters: any) => void;
+    showFilters?: boolean;
     className?: string;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;

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

@@ -11,6 +11,7 @@ export type TableAbstractColumn<TableDataItem> = {
     align?: string;
     color?: string;
     noWrap?: boolean;
+    fontSize?: string | number;
     options?: any[];
     renderHandler: TableColumnRender<TableDataItemBase>;
 };

package/dist/table/table.d.ts

@@ -14,6 +14,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
     className?: string;
     rowDraggable?: boolean;
     readOnly?: boolean;
+    showFilters?: boolean;
     rowClassName?: TableRowClassNameHandler<TableDataItem>;
 }
 type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;

package/esm/index.d.ts

@@ -77,7 +77,7 @@ export { default as Spacer } from './spacer';
 export type { SpacerProps } from './spacer';
 export { default as Spinner } from './spinner';
 export type { SpinnerProps } from './spinner';
-export { default as Table } from './table';
+export { default as Table, DataTable } from './table';
 export type { TableProps, TableColumnProps } from './table';
 export { default as Tabs } from './tabs';
 export type { TabsProps } from './tabs';

package/esm/index.js

@@ -45,7 +45,7 @@ export { default as Slider } from './slider';
 export { default as Snippet } from './snippet';
 export { default as Spacer } from './spacer';
 export { default as Spinner } from './spinner';
-export { default as Table } from './table';
+export { default as Table, DataTable } from './table';
 export { default as Tabs } from './tabs';
 export { default as Tag } from './tag';
 export { default as Text } from './text';

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

@@ -0,0 +1,36 @@
+import React from 'react';
+type DataTableProps = {
+    cols: any[];
+    rows: any[];
+    readOnly?: boolean;
+    loading?: boolean;
+    heading?: never[];
+    filter?: boolean;
+    menu?: never;
+    sideMenu?: boolean;
+    style?: object;
+    children?: React.ReactNode;
+    stickyHeader?: boolean;
+    hasMore?: boolean;
+    nextFn?: () => void;
+    onBack?: () => void;
+    infiniteLoader?: React.ReactNode;
+    endMessage?: React.ReactNode;
+    onRefresh?: () => void;
+    onFilters?: (filters: object) => void;
+    onSelectedDelete?: (selected: never[]) => void;
+    onSelectedEdit?: (selected: never) => void;
+    onSelected?: (selected: any) => void;
+    disableViewColumn?: boolean;
+    rowDraggable?: boolean;
+    onDragOver?: () => void;
+    onDragEnter?: () => void;
+    onDragLeave?: () => void;
+    onDrop?: () => void;
+    onRowClick?: (row: any) => void;
+    disableMenu?: boolean;
+};
+declare function DataTable({ cols, rows, readOnly, heading, filter, menu, sideMenu, style, children, onBack, onRefresh, // Function
+onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, disableMenu }: DataTableProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DataTable>;
+export default _default;

package/esm/table/data-table.js

@@ -5,7 +5,7 @@ import React, { memo, useEffect, useState } from 'react';
 import { ArrowLeft, Columns, Delete, Edit, Filters, Refresh } from '@helpdice/icons';
 // import InfiniteScroll from 'react-infinite-scroll-component';
 import _ from 'lodash';
-import Text from '../text';
+// import Text from '../text';
 import Container from '../grid/grid-container';
 import Grid from '../grid';
 import Button from '../button';
@@ -18,8 +18,6 @@ function DataTable(_ref) {
     rows = _ref$rows === void 0 ? [] : _ref$rows,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
     _ref$heading = _ref.heading,
     heading = _ref$heading === void 0 ? [] : _ref$heading,
     _ref$filter = _ref.filter,
@@ -30,24 +28,10 @@ function DataTable(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     children = _ref.children,
-    _ref$stickyHeader = _ref.stickyHeader,
-    stickyHeader = _ref$stickyHeader === void 0 ? true : _ref$stickyHeader,
-    _ref$hasMore = _ref.hasMore,
-    hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
-    nextFn = _ref.nextFn,
     _ref$onBack = _ref.onBack,
     onBack = _ref$onBack === void 0 ? function () {
       window.history.back();
     } : _ref$onBack,
-    _ref$infiniteLoader = _ref.infiniteLoader,
-    infiniteLoader = _ref$infiniteLoader === void 0 ? /*#__PURE__*/React.createElement(Text, {
-      style: {
-        width: '100%',
-        textAlign: 'center'
-      }
-    }, "Loading...") : _ref$infiniteLoader,
-    _ref$endMessage = _ref.endMessage,
-    endMessage = _ref$endMessage === void 0 ? null : _ref$endMessage,
     onRefresh = _ref.onRefresh,
     onFilters = _ref.onFilters,
     onSelectedDelete = _ref.onSelectedDelete,
@@ -65,30 +49,28 @@ function DataTable(_ref) {
     _ref$disableMenu = _ref.disableMenu,
     disableMenu = _ref$disableMenu === void 0 ? false : _ref$disableMenu;
   var TABLE_ID = _.uniqueId('tbl');
-  var _useState = useState(null),
+  // const [anchorEl, setAnchorEl] = useState(null);
+  var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    anchorEl = _useState2[0],
-    setAnchorEl = _useState2[1];
+    selected = _useState2[0],
+    setSelected = _useState2[1];
+  // const [table_filters] = useDebounce(filters, 500);
+  // const open = Boolean(anchorEl);
+  // const handleMenuOpen = (event: any) => {
+  //     setAnchorEl(event.currentTarget);
+  // };
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    selected = _useState4[0],
-    setSelected = _useState4[1];
-  // const [table_filters] = useDebounce(filters, 500);
-  var open = Boolean(anchorEl);
-  var handleMenuOpen = function handleMenuOpen(event) {
-    setAnchorEl(event.currentTarget);
-  };
-  var _useState5 = useState([]),
+    hideColumn = _useState4[0],
+    _setHideColumn = _useState4[1];
+  // const handleMenuClose = () => {
+  //     setAnchorEl(null);
+  // };
+
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    hideColumn = _useState6[0],
-    setHideColumn = _useState6[1];
-  var handleMenuClose = function handleMenuClose() {
-    setAnchorEl(null);
-  };
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    openFilter = _useState8[0],
-    setOpenFilter = _useState8[1];
+    openFilter = _useState6[0],
+    setOpenFilter = _useState6[1];
   var handleShowFilter = function handleShowFilter() {
     return setOpenFilter(!openFilter);
   };
@@ -100,57 +82,58 @@ function DataTable(_ref) {
   useEffect(function () {
     cols.forEach(function (col) {
       if (hideColumn.includes(col.name)) {
-        document.querySelectorAll("[column=\"".concat(col.name, "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
           el.style.display = 'none';
         });
       } else {
-        document.querySelectorAll("[column=\"".concat(col.name, "\"]")).forEach(function (el) {
+        document.querySelectorAll("[data-column=\"".concat(col.name, "\"]")).forEach(function (el) {
           el.style.display = '';
         });
       }
     });
   }, [hideColumn, cols, rows]);
-  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);
-  };
-  var handleSelectAllClick = function handleSelectAllClick(event) {
-    if (event.target.checked) {
-      var newSelecteds = rows.map(function (n) {
-        return n._id;
-      });
-      setSelected(newSelecteds);
-      return;
-    }
-    setSelected([]);
-  };
-  var handleHideColumnClick = function handleHideColumnClick(event, id) {
-    var selectedIndex = hideColumn.indexOf(id);
-    var newSelected = [];
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(hideColumn, id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(hideColumn.slice(1));
-    } else if (selectedIndex === hideColumn.length - 1) {
-      newSelected = newSelected.concat(hideColumn.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
-    }
-    setHideColumn(newSelected);
-  };
+
+  // const handleClick = (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>, id: any) => {
+  //     if (readOnly) {
+  //         return true;
+  //     }
+  //     const selectedIndex = selected.indexOf(id as never);
+  //     let newSelected: never[] | ((prevState: never[]) => never[]) = [];
+  //     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 } }) => {
+  //     if (event.target.checked) {
+  //         const newSelecteds = rows.map((n: { _id: any }) => n._id);
+  //         setSelected(newSelecteds as never[]);
+  //         return;
+  //     }
+  //     setSelected([]);
+  // };
+
+  // const handleHideColumnClick = (event: React.MouseEvent<HTMLLIElement, MouseEvent>, id: any) => {
+  //     const selectedIndex = hideColumn.indexOf(id as never);
+  //     let newSelected: any[] | ((prevState: never[]) => never[]) = [];
+  //     if (selectedIndex === -1) {
+  //         newSelected = newSelected.concat(hideColumn, id);
+  //     } else if (selectedIndex === 0) {
+  //         newSelected = newSelected.concat(hideColumn.slice(1));
+  //     } else if (selectedIndex === hideColumn.length - 1) {
+  //         newSelected = newSelected.concat(hideColumn.slice(0, -1));
+  //     } else if (selectedIndex > 0) {
+  //         newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
+  //     }
+  //     setHideColumn(newSelected as never[]);
+  // };
 
   // Children change reset selected
   useEffect(function () {
@@ -288,7 +271,7 @@ function DataTable(_ref) {
     py: 0.4,
     type: "dark"
   }, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleMenuOpen,
+    onClick: function onClick() {},
     auto: true,
     scale: 2 / 3,
     px: 0.6,
@@ -324,6 +307,13 @@ function DataTable(_ref) {
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
+    onRow: onRowClick,
+    rowDraggable: rowDraggable,
+    showFilters: openFilter,
+    onSelected: function onSelected(selected) {
+      return setSelected(selected);
+    },
+    onFilters: onFilters,
     data: rows,
     style: {
       borderCollapse: 'collapse',

package/esm/table/index.d.ts

@@ -1,5 +1,6 @@
 import Table from './table';
 export type { TableProps } from './table';
 export type { TableColumnProps } from './table-column';
-export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender, } from './table-types';
+export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender } from './table-types';
+export { default as DataTable } from './data-table';
 export default Table;

package/esm/table/index.js

@@ -1,2 +1,3 @@
 import Table from './table';
+export { default as DataTable } from './data-table';
 export default Table;

package/esm/table/table-cell.js

@@ -13,11 +13,14 @@ var TableCell = function TableCell(_ref) {
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
     return /*#__PURE__*/React.createElement("td", {
       style: _extends({
+        fontSize: "".concat(column === null || column === void 0 ? void 0 : column.fontSize),
         textAlign: "".concat(column === null || column === void 0 ? void 0 : column.align, " !important"),
-        p: 0,
+        paddingLeft: '0.3rem',
+        paddingRight: '0.3rem',
         color: "".concat(column === null || column === void 0 ? void 0 : column.color),
         whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
       }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
+      "data-column": column.label,
       key: "row-td-".concat(index, "-").concat(column.prop.toString()),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);

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

@@ -7,6 +7,9 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     width?: number;
     options?: any[];
     className?: string;
+    noWrap?: boolean;
+    align?: string;
+    fontSize?: string | number;
     render?: TableColumnRender<TableDataItem>;
 };
 declare const TableColumn: {

package/esm/table/table-column.js

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

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

@@ -4,6 +4,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
     width: number;
     columns: Array<TableAbstractColumn<TableDataItem>>;
     onFilters?: (filters: any) => void;
+    showFilters?: boolean;
     className?: string;
 }
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;

package/esm/table/table-head.js

@@ -32,7 +32,8 @@ var TableHead = function TableHead(props) {
   var _ref = props,
     columns = _ref.columns,
     width = _ref.width,
-    onFilters = _ref.onFilters;
+    onFilters = _ref.onFilters,
+    showFilters = _ref.showFilters;
   var isScalableWidth = useMemo(function () {
     return columns.find(function (item) {
       return !!item.width;
@@ -63,7 +64,9 @@ var TableHead = function TableHead(props) {
       if (accessor === 'fixed') {
         var _filters$filterName;
         // Dropdown filter for categorical data (category, status)
-        return /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Select, {
+        return /*#__PURE__*/React.createElement("td", {
+          "data-column": Header
+        }, /*#__PURE__*/React.createElement(Select, {
           key: unq_accessor,
           name: filterName,
           value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
@@ -81,8 +84,10 @@ var TableHead = function TableHead(props) {
       if (accessor === 'date') {
         // Date filter
         return /*#__PURE__*/React.createElement("th", {
+          "data-column": Header,
           key: unq_accessor
         }, /*#__PURE__*/React.createElement(Input, {
+          id: "filter-date-".concat(filterName),
           htmlType: "date",
           name: filterName,
           value: filters[filterName],
@@ -93,7 +98,9 @@ var TableHead = function TableHead(props) {
       }
       if (accessor === 'search') {
         // Text search filter
-        return /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(Input, {
+        return /*#__PURE__*/React.createElement("th", {
+          "data-column": Header
+        }, /*#__PURE__*/React.createElement(Input, {
           id: "filter-search-".concat(filterName),
           htmlType: "text"
           // ref={filterRefs.current[filterName]} // Dynamically set ref}
@@ -120,6 +127,7 @@ var TableHead = function TableHead(props) {
   }, columns.map(function (column, index) {
     return /*#__PURE__*/React.createElement("th", {
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
+      "data-column": column.label,
       className: _JSXStyle.dynamic([["134865897", [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", {
       className: _JSXStyle.dynamic([["134865897", [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-box"
@@ -131,7 +139,7 @@ var TableHead = function TableHead(props) {
       },
       className: _JSXStyle.dynamic([["134865897", [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("tr", {
+  })), showFilters && /*#__PURE__*/React.createElement("tr", {
     className: _JSXStyle.dynamic([["134865897", [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(_JSXStyle, {
     id: "134865897",

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

@@ -11,6 +11,7 @@ export type TableAbstractColumn<TableDataItem> = {
     align?: string;
     color?: string;
     noWrap?: boolean;
+    fontSize?: string | number;
     options?: any[];
     renderHandler: TableColumnRender<TableDataItemBase>;
 };

package/esm/table/table.d.ts

@@ -14,6 +14,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
     className?: string;
     rowDraggable?: boolean;
     readOnly?: boolean;
+    showFilters?: boolean;
     rowClassName?: TableRowClassNameHandler<TableDataItem>;
 }
 type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;

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", "onRow", "onCell", "onChange", "onFilters", "onSelected", "className", "rowClassName"];
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -33,6 +33,8 @@ function TableComponent(tableProps) {
     onCell = _ref.onCell,
     onChange = _ref.onChange,
     onFilters = _ref.onFilters,
+    _ref$showFilters = _ref.showFilters,
+    showFilters = _ref$showFilters === void 0 ? false : _ref$showFilters,
     onSelected = _ref.onSelected,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
@@ -91,6 +93,7 @@ function TableComponent(tableProps) {
   }), /*#__PURE__*/React.createElement(TableHead, {
     columns: columns,
     onFilters: onFilters,
+    showFilters: showFilters,
     width: width
   }), /*#__PURE__*/React.createElement(TableBody, {
     data: data,

package/package.json

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