@helpdice/ui 1.5.6 → 1.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.js +104 -8
  2. package/dist/table/index.js +22044 -21948
  3. package/dist/table/table-head.d.ts +2 -0
  4. package/dist/table/table.d.ts +1 -0
  5. package/esm/table/data-table.js +3 -0
  6. package/esm/table/table-head.d.ts +2 -0
  7. package/esm/table/table-head.js +98 -4
  8. package/esm/table/table.d.ts +1 -0
  9. package/esm/table/table.js +4 -1
  10. package/package.json +1 -1
package/dist/table/table-head.d.ts CHANGED
@@ -3,7 +3,9 @@ import { TableAbstractColumn, TableDataItemBase } from './table-types';
3
3
  interface Props<TableDataItem extends TableDataItemBase> {
4
4
  width: number;
5
5
  columns: Array<TableAbstractColumn<TableDataItem>>;
6
+ onFilters?: (filters: any) => void;
6
7
  stickyHeader: boolean;
8
+ showFilters?: boolean;
7
9
  className?: string;
8
10
  }
9
11
  type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
package/dist/table/table.d.ts CHANGED
@@ -9,6 +9,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
9
9
  onRow?: TableOnRowClick<TableDataItem>;
10
10
  onCell?: TableOnCellClick<TableDataItem>;
11
11
  onChange?: TableOnChange<TableDataItem>;
12
+ onFilters?: (filters: any) => void;
12
13
  onSelected?: (selected: any[]) => void;
13
14
  onPageChange?: (page: number, start: number, end: number) => void;
14
15
  className?: string;
package/esm/table/data-table.js CHANGED
@@ -427,6 +427,9 @@ function DataTable(_ref) {
427
427
  _onPageChange(page, start, end);
428
428
  }
429
429
  },
430
+ onFilters: function onFilters(filters) {
431
+ console.log(filters);
432
+ },
430
433
  onRow: onRowClick,
431
434
  rowDraggable: rowDraggable,
432
435
  showFilters: openFilter,
package/esm/table/table-head.d.ts CHANGED
@@ -3,7 +3,9 @@ import { TableAbstractColumn, TableDataItemBase } from './table-types';
3
3
  interface Props<TableDataItem extends TableDataItemBase> {
4
4
  width: number;
5
5
  columns: Array<TableAbstractColumn<TableDataItem>>;
6
+ onFilters?: (filters: any) => void;
6
7
  stickyHeader: boolean;
8
+ showFilters?: boolean;
7
9
  className?: string;
8
10
  }
9
11
  type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
package/esm/table/table-head.js CHANGED
@@ -1,7 +1,12 @@
1
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
1
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
4
  import _JSXStyle from "../styled-jsx.es.js";
3
5
  import React, { useMemo } from 'react';
4
6
  import useTheme from '../use-theme';
7
+ import Input from '../input';
8
+ import Select from '../select';
9
+ import Button from '../button';
5
10
  var makeColgroup = function makeColgroup(width, columns) {
6
11
  var unsetWidthCount = columns.filter(function (c) {
7
12
  return !c.width;
@@ -20,9 +25,15 @@ var makeColgroup = function makeColgroup(width, columns) {
20
25
  };
21
26
  var TableHead = function TableHead(props) {
22
27
  var theme = useTheme();
28
+ var _React$useState = React.useState({}),
29
+ _React$useState2 = _slicedToArray(_React$useState, 2),
30
+ filters = _React$useState2[0],
31
+ setFilters = _React$useState2[1];
23
32
  var _ref = props,
24
33
  columns = _ref.columns,
25
34
  width = _ref.width,
35
+ onFilters = _ref.onFilters,
36
+ showFilters = _ref.showFilters,
26
37
  stickyHeader = _ref.stickyHeader;
27
38
  var isScalableWidth = useMemo(function () {
28
39
  return columns.find(function (item) {
@@ -33,6 +44,82 @@ var TableHead = function TableHead(props) {
33
44
  if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
34
45
  return makeColgroup(width, columns);
35
46
  }, [isScalableWidth, width]);
47
+ var handleFilterChange = function handleFilterChange(name, value) {
48
+ setFilters(function (prevFilters) {
49
+ var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
50
+ return updatedFilters;
51
+ });
52
+ };
53
+ var applyFilters = function applyFilters() {
54
+ if (onFilters) {
55
+ onFilters(filters);
56
+ }
57
+ };
58
+ var generateFilterInputs = function generateFilterInputs() {
59
+ return columns.map(function (col) {
60
+ var _String, _filters$filterName;
61
+ var Header = col.label,
62
+ accessor = col.filter,
63
+ options = col.options;
64
+ var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
65
+ // const unq_accessor = _.uniqueId(filterName);
66
+ // if (Header === 'actions') {
67
+ // return (
68
+ // <th style={{ margin: '3px' }} data-column={Header} key={unq_accessor}>
69
+ // <Button onClick={applyFilters} auto px={0.6} scale={2 / 3}>Apply</Button>
70
+ // </th>
71
+ // )
72
+ // }
73
+ return /*#__PURE__*/React.createElement("th", {
74
+ style: {
75
+ padding: '3px'
76
+ },
77
+ "data-column": Header
78
+ }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
79
+ // key={unq_accessor}
80
+ // name={filterName}
81
+ , {
82
+ value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
83
+ onChange: function onChange(newValue) {
84
+ return handleFilterChange(filterName, newValue);
85
+ }
86
+ }, /*#__PURE__*/React.createElement(Select.Option, {
87
+ value: "All"
88
+ }, "All ", Header), options ? options.map(function (option) {
89
+ return /*#__PURE__*/React.createElement(Select.Option, {
90
+ value: option.value
91
+ }, option.name);
92
+ }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
93
+ // id={`filter-date-${filterName}`}
94
+ , {
95
+ htmlType: "date"
96
+ // name={filterName}
97
+ ,
98
+ value: filters[filterName],
99
+ onChange: function onChange(e) {
100
+ return handleFilterChange(filterName, e.target.value);
101
+ }
102
+ }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
103
+ // id={`filter-search-${filterName}`}
104
+ , {
105
+ htmlType: "text",
106
+ autoComplete: "off"
107
+ // ref={filterRefs.current[filterName]} // Dynamically set ref}
108
+ // name={filterName}
109
+ ,
110
+ style: {
111
+ height: 30,
112
+ minWidth: 160
113
+ },
114
+ value: filters[filterName],
115
+ onChange: function onChange(e) {
116
+ return handleFilterChange(filterName, e.target.value);
117
+ },
118
+ placeholder: "Search...",
119
+ fullWidth: true
120
+ }));
121
+ });
122
+ };
36
123
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
37
124
  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]]])
38
125
  }, /*#__PURE__*/React.createElement("tr", {
@@ -41,9 +128,8 @@ var TableHead = function TableHead(props) {
41
128
  },
42
129
  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]]])
43
130
  }, columns.map(function (column, _index) {
44
- var _String;
45
- var dataName = (_String = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
46
- console.log('Column Hide:', dataName);
131
+ var _String2;
132
+ var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
47
133
  return /*#__PURE__*/React.createElement("th", {
48
134
  style: _extends({
49
135
  // textAlign: `${column?.align} !important`,
@@ -65,7 +151,15 @@ var TableHead = function TableHead(props) {
65
151
  },
66
152
  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]]])
67
153
  }, column.text)));
68
- }))), /*#__PURE__*/React.createElement(_JSXStyle, {
154
+ })), showFilters && /*#__PURE__*/React.createElement("tr", {
155
+ 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]]])
156
+ }, generateFilterInputs(), /*#__PURE__*/React.createElement("th", {
157
+ 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]]])
158
+ }, /*#__PURE__*/React.createElement(Button, {
159
+ onClick: function onClick() {
160
+ return applyFilters();
161
+ }
162
+ }, "Apply")))), /*#__PURE__*/React.createElement(_JSXStyle, {
69
163
  id: "2156261549",
70
164
  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]
71
165
  }, "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 CHANGED
@@ -9,6 +9,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
9
9
  onRow?: TableOnRowClick<TableDataItem>;
10
10
  onCell?: TableOnCellClick<TableDataItem>;
11
11
  onChange?: TableOnChange<TableDataItem>;
12
+ onFilters?: (filters: any) => void;
12
13
  onSelected?: (selected: any[]) => void;
13
14
  onPageChange?: (page: number, start: number, end: number) => void;
14
15
  className?: string;
package/esm/table/table.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
3
3
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
- 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"];
5
+ 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"];
6
6
  import _JSXStyle from "../styled-jsx.es.js";
7
7
  /* "use client" */
8
8
 
@@ -44,6 +44,7 @@ function TableComponent(tableProps) {
44
44
  onRow = _ref.onRow,
45
45
  onCell = _ref.onCell,
46
46
  onChange = _ref.onChange,
47
+ onFilters = _ref.onFilters,
47
48
  onPageChange = _ref.onPageChange,
48
49
  _ref$showFilters = _ref.showFilters,
49
50
  showFilters = _ref$showFilters === void 0 ? false : _ref$showFilters,
@@ -118,6 +119,8 @@ function TableComponent(tableProps) {
118
119
  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 || "")
119
120
  }), /*#__PURE__*/React.createElement(TableHead, {
120
121
  stickyHeader: stickyHeader,
122
+ onFilters: onFilters,
123
+ showFilters: showFilters,
121
124
  columns: columns,
122
125
  width: width
123
126
  }), /*#__PURE__*/React.createElement(TableBody, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.5.6",
3
+ "version": "1.5.8",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",