@helpdice/ui 1.2.6 → 1.2.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 (8) hide show
  1. package/dist/index.js +189 -191
  2. package/dist/table/index.js +839 -1970
  3. package/dist/table/table-body.d.ts +1 -1
  4. package/esm/table/table-body.d.ts +1 -1
  5. package/esm/table/table-body.js +7 -7
  6. package/esm/table/table-head.js +2 -82
  7. package/esm/table/table.js +77 -3
  8. package/package.json +1 -1
package/dist/table/table-body.d.ts CHANGED
@@ -15,7 +15,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
15
15
  type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
16
16
  export type TableBodyProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
17
17
  declare const TableBody: {
18
- <TableDataItem extends TableDataItemBase>({ data, hover, emptyText, onRow, onCell, rowClassName, rowDraggable, readOnly, onSelected }: TableBodyProps<TableDataItem>): React.JSX.Element;
18
+ <TableDataItem extends TableDataItemBase>({ data, emptyText, onRow, onCell, rowClassName, rowDraggable, readOnly, onSelected }: TableBodyProps<TableDataItem>): React.JSX.Element;
19
19
  displayName: string;
20
20
  };
21
21
  export default TableBody;
package/esm/table/table-body.d.ts CHANGED
@@ -15,7 +15,7 @@ interface Props<TableDataItem extends TableDataItemBase> {
15
15
  type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
16
16
  export type TableBodyProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
17
17
  declare const TableBody: {
18
- <TableDataItem extends TableDataItemBase>({ data, hover, emptyText, onRow, onCell, rowClassName, rowDraggable, readOnly, onSelected }: TableBodyProps<TableDataItem>): React.JSX.Element;
18
+ <TableDataItem extends TableDataItemBase>({ data, emptyText, onRow, onCell, rowClassName, rowDraggable, readOnly, onSelected }: TableBodyProps<TableDataItem>): React.JSX.Element;
19
19
  displayName: string;
20
20
  };
21
21
  export default TableBody;
package/esm/table/table-body.js CHANGED
@@ -9,7 +9,6 @@ import useClasses from '../use-classes';
9
9
  import _ from 'lodash';
10
10
  var TableBody = function TableBody(_ref) {
11
11
  var data = _ref.data,
12
- hover = _ref.hover,
13
12
  emptyText = _ref.emptyText,
14
13
  onRow = _ref.onRow,
15
14
  onCell = _ref.onCell,
@@ -79,12 +78,9 @@ var TableBody = function TableBody(_ref) {
79
78
  // ) as unknown as TableDataItem
80
79
  // console.log(frow);
81
80
  var isRowSelected = selected.indexOf(row) !== -1;
82
- return /*#__PURE__*/React.createElement("tr", {
81
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
83
82
  draggable: rowDraggable,
84
83
  role: "checkbox",
85
- className: useClasses({
86
- hover: hover
87
- }, "".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)),
88
84
  onDragStart: onDragStart,
89
85
  "aria-checked": selected.indexOf(row) !== -1,
90
86
  tabIndex: -1,
@@ -101,14 +97,18 @@ var TableBody = function TableBody(_ref) {
101
97
  handleClick(e, row);
102
98
  }
103
99
  }
104
- }
100
+ },
101
+ className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
105
102
  }, /*#__PURE__*/React.createElement(TableCell, {
106
103
  columns: cols,
107
104
  row: rw,
108
105
  rowIndex: index,
109
106
  emptyText: emptyText,
110
107
  onCellClick: onCell
111
- }));
108
+ })), /*#__PURE__*/React.createElement(_JSXStyle, {
109
+ id: "2019708038",
110
+ dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
111
+ }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
112
112
  }
113
113
  return /*#__PURE__*/React.createElement("tbody", {
114
114
  className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
package/esm/table/table-head.js CHANGED
@@ -1,12 +1,6 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
- import _extends from "@babel/runtime/helpers/esm/extends";
3
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
4
1
  import _JSXStyle from "../styled-jsx.es.js";
5
2
  import React, { useMemo } from 'react';
6
3
  import useTheme from '../use-theme';
7
- import Input from '../input';
8
- import _ from 'lodash';
9
- import Select from '../select';
10
4
  var makeColgroup = function makeColgroup(width, columns) {
11
5
  var unsetWidthCount = columns.filter(function (c) {
12
6
  return !c.width;
@@ -25,15 +19,9 @@ var makeColgroup = function makeColgroup(width, columns) {
25
19
  };
26
20
  var TableHead = function TableHead(props) {
27
21
  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];
32
22
  var _ref = props,
33
23
  columns = _ref.columns,
34
- width = _ref.width,
35
- onFilters = _ref.onFilters,
36
- showFilters = _ref.showFilters;
24
+ width = _ref.width;
37
25
  var isScalableWidth = useMemo(function () {
38
26
  return columns.find(function (item) {
39
27
  return !!item.width;
@@ -43,72 +31,6 @@ var TableHead = function TableHead(props) {
43
31
  if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
44
32
  return makeColgroup(width, columns);
45
33
  }, [isScalableWidth, width]);
46
- var handleFilterChange = function handleFilterChange(name, value) {
47
- setFilters(function (prevFilters) {
48
- var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
49
- // Call onFiltersChange to propagate filter changes to the parent
50
- if (onFilters) {
51
- onFilters(updatedFilters);
52
- }
53
- return updatedFilters;
54
- });
55
- };
56
- var generateFilterInputs = function generateFilterInputs() {
57
- return columns.map(function (col) {
58
- var _String, _filters$filterName;
59
- var Header = col.label,
60
- accessor = col.filter,
61
- options = col.options;
62
- var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
63
- var unq_accessor = _.uniqueId(filterName);
64
- return /*#__PURE__*/React.createElement("th", {
65
- style: {
66
- margin: '3px'
67
- },
68
- "data-column": Header,
69
- key: unq_accessor
70
- }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
71
- key: unq_accessor,
72
- name: filterName,
73
- value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
74
- onChange: function onChange(newValue) {
75
- return handleFilterChange(filterName, newValue);
76
- }
77
- }, /*#__PURE__*/React.createElement(Select.Option, {
78
- value: "All"
79
- }, "All ", Header), options ? options.map(function (option) {
80
- return /*#__PURE__*/React.createElement(Select.Option, {
81
- value: option.value
82
- }, option.name);
83
- }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
84
- id: "filter-date-".concat(filterName),
85
- htmlType: "date",
86
- name: filterName,
87
- value: filters[filterName],
88
- onChange: function onChange(e) {
89
- return handleFilterChange(filterName, e.target.value);
90
- }
91
- }), accessor === 'search' && /*#__PURE__*/React.createElement("th", {
92
- "data-column": Header
93
- }, /*#__PURE__*/React.createElement(Input, {
94
- id: "filter-search-".concat(filterName),
95
- htmlType: "text"
96
- // ref={filterRefs.current[filterName]} // Dynamically set ref}
97
- ,
98
- name: filterName,
99
- style: {
100
- height: 30,
101
- minWidth: 160
102
- },
103
- value: filters[filterName],
104
- onChange: function onChange(e) {
105
- return handleFilterChange(filterName, e.target.value);
106
- },
107
- placeholder: "Search...",
108
- fullWidth: true
109
- })));
110
- });
111
- };
112
34
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
113
35
  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]]])
114
36
  }, /*#__PURE__*/React.createElement("tr", {
@@ -135,9 +57,7 @@ var TableHead = function TableHead(props) {
135
57
  },
136
58
  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]]])
137
59
  }, column.text)));
138
- })), showFilters && /*#__PURE__*/React.createElement("tr", {
139
- 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]]])
140
- }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
60
+ }))), /*#__PURE__*/React.createElement(_JSXStyle, {
141
61
  id: "134865897",
142
62
  dynamic: [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]
143
63
  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}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.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
1
2
  import _extends from "@babel/runtime/helpers/esm/extends";
2
3
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
3
4
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
@@ -14,6 +15,9 @@ import useResize from '../utils/use-resize';
14
15
  import { TableContext } from './table-context';
15
16
  import useScale, { withScale } from '../use-scale';
16
17
  import TableColumn from './table-column';
18
+ import Select from 'components/select';
19
+ import Input from 'components/input';
20
+ import _ from 'lodash';
17
21
  function TableComponent(tableProps) {
18
22
  /* eslint-disable @typescript-eslint/no-unused-vars */
19
23
  var _ref = tableProps,
@@ -77,6 +81,10 @@ function TableComponent(tableProps) {
77
81
  updateColumn: updateColumn
78
82
  };
79
83
  }, [columns]);
84
+ var _React$useState = React.useState({}),
85
+ _React$useState2 = _slicedToArray(_React$useState, 2),
86
+ filters = _React$useState2[0],
87
+ setFilters = _React$useState2[1];
80
88
  useEffect(function () {
81
89
  if (typeof customData === 'undefined') return;
82
90
  setData(customData);
@@ -84,16 +92,82 @@ function TableComponent(tableProps) {
84
92
  useResize(function () {
85
93
  return updateShape();
86
94
  });
95
+ var handleFilterChange = function handleFilterChange(name, value) {
96
+ setFilters(function (prevFilters) {
97
+ var updatedFilters = _extends({}, prevFilters, _defineProperty({}, name, value));
98
+ // Call onFiltersChange to propagate filter changes to the parent
99
+ if (onFilters) {
100
+ onFilters(updatedFilters);
101
+ }
102
+ return updatedFilters;
103
+ });
104
+ };
105
+ var generateFilterInputs = function generateFilterInputs() {
106
+ return columns.map(function (col) {
107
+ var _String, _filters$filterName;
108
+ var Header = col.label,
109
+ accessor = col.filter,
110
+ options = col.options;
111
+ var filterName = (_String = String(col === null || col === void 0 ? void 0 : col.label)) === null || _String === void 0 ? void 0 : _String.replace(' ', '_').toLowerCase();
112
+ var unq_accessor = _.uniqueId(filterName);
113
+ return /*#__PURE__*/React.createElement("div", {
114
+ style: {
115
+ margin: '3px'
116
+ },
117
+ "data-column": Header,
118
+ key: unq_accessor
119
+ }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
120
+ key: unq_accessor,
121
+ name: filterName,
122
+ value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
123
+ onChange: function onChange(newValue) {
124
+ return handleFilterChange(filterName, newValue);
125
+ }
126
+ }, /*#__PURE__*/React.createElement(Select.Option, {
127
+ value: "All"
128
+ }, "All ", Header), options ? options.map(function (option) {
129
+ return /*#__PURE__*/React.createElement(Select.Option, {
130
+ value: option.value
131
+ }, option.name);
132
+ }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
133
+ id: "filter-date-".concat(filterName),
134
+ htmlType: "date",
135
+ name: filterName,
136
+ value: filters[filterName],
137
+ onChange: function onChange(e) {
138
+ return handleFilterChange(filterName, e.target.value);
139
+ }
140
+ }), accessor === 'search' && /*#__PURE__*/React.createElement(Input, {
141
+ id: "filter-search-".concat(filterName),
142
+ htmlType: "text",
143
+ autoComplete: "off",
144
+ name: filterName,
145
+ style: {
146
+ height: 30,
147
+ minWidth: 160
148
+ },
149
+ value: filters[filterName],
150
+ onChange: function onChange(e) {
151
+ return handleFilterChange(filterName, e.target.value);
152
+ },
153
+ placeholder: "Search...",
154
+ fullWidth: true
155
+ }));
156
+ });
157
+ };
87
158
  return /*#__PURE__*/React.createElement(TableContext.Provider, {
88
159
  value: contextValue
89
- }, /*#__PURE__*/React.createElement("table", _extends({
160
+ }, showFilters && /*#__PURE__*/React.createElement("div", {
161
+ style: {
162
+ display: 'flex',
163
+ gap: 6
164
+ }
165
+ }, generateFilterInputs()), /*#__PURE__*/React.createElement("table", _extends({
90
166
  ref: ref
91
167
  }, props, {
92
168
  className: _JSXStyle.dynamic([["2132340556", [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 || "")
93
169
  }), /*#__PURE__*/React.createElement(TableHead, {
94
170
  columns: columns,
95
- onFilters: onFilters,
96
- showFilters: showFilters,
97
171
  width: width
98
172
  }), /*#__PURE__*/React.createElement(TableBody, {
99
173
  data: data,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.2.6",
3
+ "version": "1.2.8",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",