@helpdice/ui 1.2.9 → 1.3.0

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 +194 -181
  2. package/dist/table/index.js +2063 -2050
  3. package/esm/table/table-head.js +92 -2
  4. package/esm/table/table.js +4 -78
  5. package/package.json +1 -1
package/esm/table/table-head.js CHANGED
@@ -1,6 +1,13 @@
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";
1
4
  import _JSXStyle from "../styled-jsx.es.js";
2
5
  import React, { useMemo } from 'react';
3
6
  import useTheme from '../use-theme';
7
+ import Input from '../input';
8
+ import _ from 'lodash';
9
+ import Select from '../select';
10
+ import Button from '../button';
4
11
  var makeColgroup = function makeColgroup(width, columns) {
5
12
  var unsetWidthCount = columns.filter(function (c) {
6
13
  return !c.width;
@@ -19,9 +26,15 @@ var makeColgroup = function makeColgroup(width, columns) {
19
26
  };
20
27
  var TableHead = function TableHead(props) {
21
28
  var theme = useTheme();
29
+ var _React$useState = React.useState({}),
30
+ _React$useState2 = _slicedToArray(_React$useState, 2),
31
+ filters = _React$useState2[0],
32
+ setFilters = _React$useState2[1];
22
33
  var _ref = props,
23
34
  columns = _ref.columns,
24
- width = _ref.width;
35
+ width = _ref.width,
36
+ onFilters = _ref.onFilters,
37
+ showFilters = _ref.showFilters;
25
38
  var isScalableWidth = useMemo(function () {
26
39
  return columns.find(function (item) {
27
40
  return !!item.width;
@@ -31,6 +44,72 @@ var TableHead = function TableHead(props) {
31
44
  if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
32
45
  return makeColgroup(width, columns);
33
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
+ var unq_accessor = _.uniqueId(filterName);
66
+ return /*#__PURE__*/React.createElement("th", {
67
+ style: {
68
+ margin: '3px'
69
+ },
70
+ "data-column": Header,
71
+ key: unq_accessor
72
+ }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
73
+ key: unq_accessor,
74
+ name: filterName,
75
+ value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
76
+ onChange: function onChange(newValue) {
77
+ return handleFilterChange(filterName, newValue);
78
+ }
79
+ }, /*#__PURE__*/React.createElement(Select.Option, {
80
+ value: "All"
81
+ }, "All ", Header), options ? options.map(function (option) {
82
+ return /*#__PURE__*/React.createElement(Select.Option, {
83
+ value: option.value
84
+ }, option.name);
85
+ }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
86
+ id: "filter-date-".concat(filterName),
87
+ htmlType: "date",
88
+ name: filterName,
89
+ value: filters[filterName],
90
+ onChange: function onChange(e) {
91
+ return handleFilterChange(filterName, e.target.value);
92
+ }
93
+ }), accessor === 'search' && /*#__PURE__*/React.createElement(Input, {
94
+ id: "filter-search-".concat(filterName),
95
+ htmlType: "text",
96
+ autoComplete: "off"
97
+ // ref={filterRefs.current[filterName]} // Dynamically set ref}
98
+ ,
99
+ name: filterName,
100
+ style: {
101
+ height: 30,
102
+ minWidth: 160
103
+ },
104
+ value: filters[filterName],
105
+ onChange: function onChange(e) {
106
+ return handleFilterChange(filterName, e.target.value);
107
+ },
108
+ placeholder: "Search...",
109
+ fullWidth: true
110
+ }));
111
+ });
112
+ };
34
113
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
35
114
  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]]])
36
115
  }, /*#__PURE__*/React.createElement("tr", {
@@ -57,7 +136,18 @@ var TableHead = function TableHead(props) {
57
136
  },
58
137
  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]]])
59
138
  }, column.text)));
60
- }))), /*#__PURE__*/React.createElement(_JSXStyle, {
139
+ }), /*#__PURE__*/React.createElement("th", {
140
+ 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]]])
141
+ })), showFilters && /*#__PURE__*/React.createElement("tr", {
142
+ 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]]])
143
+ }, generateFilterInputs(), /*#__PURE__*/React.createElement("th", {
144
+ 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]]])
145
+ }, /*#__PURE__*/React.createElement(Button, {
146
+ onClick: applyFilters,
147
+ auto: true,
148
+ px: 0.6,
149
+ scale: 2 / 3
150
+ }, "Apply")))), /*#__PURE__*/React.createElement(_JSXStyle, {
61
151
  id: "134865897",
62
152
  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]
63
153
  }, "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,4 +1,3 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
1
  import _extends from "@babel/runtime/helpers/esm/extends";
3
2
  import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
4
3
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
@@ -15,9 +14,6 @@ import useResize from '../utils/use-resize';
15
14
  import { TableContext } from './table-context';
16
15
  import useScale, { withScale } from '../use-scale';
17
16
  import TableColumn from './table-column';
18
- import Select from '../select';
19
- import Input from '../input';
20
- import _ from 'lodash';
21
17
  function TableComponent(tableProps) {
22
18
  /* eslint-disable @typescript-eslint/no-unused-vars */
23
19
  var _ref = tableProps,
@@ -81,10 +77,6 @@ function TableComponent(tableProps) {
81
77
  updateColumn: updateColumn
82
78
  };
83
79
  }, [columns]);
84
- var _React$useState = React.useState({}),
85
- _React$useState2 = _slicedToArray(_React$useState, 2),
86
- filters = _React$useState2[0],
87
- setFilters = _React$useState2[1];
88
80
  useEffect(function () {
89
81
  if (typeof customData === 'undefined') return;
90
82
  setData(customData);
@@ -92,75 +84,7 @@ function TableComponent(tableProps) {
92
84
  useResize(function () {
93
85
  return updateShape();
94
86
  });
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, {
87
+ return /*#__PURE__*/React.createElement(TableContext.Provider, {
164
88
  value: contextValue
165
89
  }, /*#__PURE__*/React.createElement("table", _extends({
166
90
  ref: ref
@@ -168,6 +92,8 @@ function TableComponent(tableProps) {
168
92
  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 || "")
169
93
  }), /*#__PURE__*/React.createElement(TableHead, {
170
94
  columns: columns,
95
+ onFilters: onFilters,
96
+ showFilters: showFilters,
171
97
  width: width
172
98
  }), /*#__PURE__*/React.createElement(TableBody, {
173
99
  data: data,
@@ -182,7 +108,7 @@ function TableComponent(tableProps) {
182
108
  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
183
109
  id: "2132340556",
184
110
  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)]
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), ";}")))));
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), ";}"))));
186
112
  }
187
113
  TableComponent.displayName = 'Table';
188
114
  TableComponent.Column = TableColumn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.2.9",
3
+ "version": "1.3.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",