@helpdice/ui 1.2.7 → 1.2.9

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 (5) hide show
  1. package/dist/index.js +181 -185
  2. package/dist/table/index.js +1187 -1191
  3. package/esm/table/table-head.js +2 -82
  4. package/esm/table/table.js +78 -4
  5. package/package.json +1 -1
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 '../select';
19
+ import Input from '../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,7 +92,75 @@ function TableComponent(tableProps) {
84
92
  useResize(function () {
85
93
  return updateShape();
86
94
  });
87
- return /*#__PURE__*/React.createElement(TableContext.Provider, {
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
+ };
158
+ return /*#__PURE__*/React.createElement("div", null, showFilters && /*#__PURE__*/React.createElement("div", {
159
+ style: {
160
+ display: 'flex',
161
+ gap: 6
162
+ }
163
+ }, generateFilterInputs()), /*#__PURE__*/React.createElement(TableContext.Provider, {
88
164
  value: contextValue
89
165
  }, /*#__PURE__*/React.createElement("table", _extends({
90
166
  ref: ref
@@ -92,8 +168,6 @@ function TableComponent(tableProps) {
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,
@@ -108,7 +182,7 @@ function TableComponent(tableProps) {
108
182
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
109
183
  id: "2132340556",
110
184
  dynamic: [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)]
111
- }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
185
+ }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")))));
112
186
  }
113
187
  TableComponent.displayName = 'Table';
114
188
  TableComponent.Column = TableColumn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.2.7",
3
+ "version": "1.2.9",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",