@helpdice/ui 1.2.7 → 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.
- package/dist/index.js +182 -184
- package/dist/table/index.js +834 -1965
- package/esm/table/table-head.js +2 -82
- package/esm/table/table.js +77 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var reactDom = require('react-dom');
|
|
5
|
+
var Select$1 = require('components/select');
|
|
6
|
+
var Input$1 = require('components/input');
|
|
5
7
|
var require$$0 = require('react-is');
|
|
6
8
|
var isEqual = require('react-fast-compare');
|
|
7
9
|
|
|
@@ -24878,6 +24880,113 @@ var SpinnerComponent = function SpinnerComponent(_ref) {
|
|
|
24878
24880
|
SpinnerComponent.displayName = 'Spinner';
|
|
24879
24881
|
var Spinner = withScale(SpinnerComponent);
|
|
24880
24882
|
|
|
24883
|
+
var makeColgroup = function makeColgroup(width, columns) {
|
|
24884
|
+
var unsetWidthCount = columns.filter(function (c) {
|
|
24885
|
+
return !c.width;
|
|
24886
|
+
}).length;
|
|
24887
|
+
var customWidthTotal = columns.reduce(function (pre, current) {
|
|
24888
|
+
return current.width ? pre + current.width : pre;
|
|
24889
|
+
}, 0);
|
|
24890
|
+
var averageWidth = (width - customWidthTotal) / unsetWidthCount;
|
|
24891
|
+
if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
|
|
24892
|
+
return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
|
|
24893
|
+
return /*#__PURE__*/React.createElement("col", {
|
|
24894
|
+
key: "colgroup-".concat(index),
|
|
24895
|
+
width: column.width || averageWidth
|
|
24896
|
+
});
|
|
24897
|
+
}));
|
|
24898
|
+
};
|
|
24899
|
+
var TableHead = function TableHead(props) {
|
|
24900
|
+
var theme = useTheme();
|
|
24901
|
+
var _ref = props,
|
|
24902
|
+
columns = _ref.columns,
|
|
24903
|
+
width = _ref.width;
|
|
24904
|
+
var isScalableWidth = React.useMemo(function () {
|
|
24905
|
+
return columns.find(function (item) {
|
|
24906
|
+
return !!item.width;
|
|
24907
|
+
});
|
|
24908
|
+
}, [columns]);
|
|
24909
|
+
var colgroup = React.useMemo(function () {
|
|
24910
|
+
if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
|
|
24911
|
+
return makeColgroup(width, columns);
|
|
24912
|
+
}, [isScalableWidth, width]);
|
|
24913
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
24914
|
+
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]]])
|
|
24915
|
+
}, /*#__PURE__*/React.createElement("tr", {
|
|
24916
|
+
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]]])
|
|
24917
|
+
}, columns.map(function (column, index) {
|
|
24918
|
+
return /*#__PURE__*/React.createElement("th", {
|
|
24919
|
+
style: {
|
|
24920
|
+
// textAlign: `${column?.align} !important`,
|
|
24921
|
+
// paddingLeft: '0.3rem',
|
|
24922
|
+
// paddingRight: '0.3rem',
|
|
24923
|
+
// color: `${column?.color}`,
|
|
24924
|
+
whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
|
|
24925
|
+
},
|
|
24926
|
+
key: "table-th-".concat(column.prop.toString(), "-").concat(index),
|
|
24927
|
+
"data-column": column.label,
|
|
24928
|
+
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 || "")
|
|
24929
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
24930
|
+
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"
|
|
24931
|
+
}, column.label, /*#__PURE__*/React.createElement("br", {
|
|
24932
|
+
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]]])
|
|
24933
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
24934
|
+
style: {
|
|
24935
|
+
textAlign: 'center'
|
|
24936
|
+
},
|
|
24937
|
+
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]]])
|
|
24938
|
+
}, column.text)));
|
|
24939
|
+
}))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
24940
|
+
id: "134865897",
|
|
24941
|
+
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]
|
|
24942
|
+
}, "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;}")));
|
|
24943
|
+
};
|
|
24944
|
+
TableHead.displayName = 'TableHead';
|
|
24945
|
+
|
|
24946
|
+
var TableCell = function TableCell(_ref) {
|
|
24947
|
+
var columns = _ref.columns,
|
|
24948
|
+
row = _ref.row,
|
|
24949
|
+
rowIndex = _ref.rowIndex,
|
|
24950
|
+
emptyText = _ref.emptyText,
|
|
24951
|
+
onCellClick = _ref.onCellClick;
|
|
24952
|
+
/* eslint-disable react/jsx-no-useless-fragment */
|
|
24953
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
|
|
24954
|
+
var currentRowValue = row[column.prop];
|
|
24955
|
+
var cellValue = currentRowValue || emptyText;
|
|
24956
|
+
var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
|
|
24957
|
+
return /*#__PURE__*/React.createElement("td", {
|
|
24958
|
+
style: _objectSpread2({
|
|
24959
|
+
fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
|
|
24960
|
+
textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
|
|
24961
|
+
paddingLeft: '0.3rem',
|
|
24962
|
+
paddingRight: '0.3rem',
|
|
24963
|
+
color: "".concat(column === null || column === undefined ? undefined : column.color),
|
|
24964
|
+
whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
|
|
24965
|
+
}, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
|
|
24966
|
+
"data-column": column.label,
|
|
24967
|
+
key: "row-td-".concat(index, "-").concat(column.prop.toString()),
|
|
24968
|
+
onClick: function onClick() {
|
|
24969
|
+
return onCellClick && onCellClick(currentRowValue, rowIndex, index);
|
|
24970
|
+
},
|
|
24971
|
+
className: column.className
|
|
24972
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
24973
|
+
className: "cell"
|
|
24974
|
+
}, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
|
|
24975
|
+
}));
|
|
24976
|
+
/* eslint-enable */
|
|
24977
|
+
};
|
|
24978
|
+
|
|
24979
|
+
/* "use client" */
|
|
24980
|
+
|
|
24981
|
+
var defaultContext$2 = {
|
|
24982
|
+
columns: [],
|
|
24983
|
+
updateColumn: function updateColumn() {}
|
|
24984
|
+
};
|
|
24985
|
+
var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
|
|
24986
|
+
var useTableContext = function useTableContext() {
|
|
24987
|
+
return React.useContext(TableContext);
|
|
24988
|
+
};
|
|
24989
|
+
|
|
24881
24990
|
var lodash$1 = {exports: {}};
|
|
24882
24991
|
|
|
24883
24992
|
/**
|
|
@@ -42090,187 +42199,6 @@ function requireLodash () {
|
|
|
42090
42199
|
var lodashExports = requireLodash();
|
|
42091
42200
|
var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
|
|
42092
42201
|
|
|
42093
|
-
var makeColgroup = function makeColgroup(width, columns) {
|
|
42094
|
-
var unsetWidthCount = columns.filter(function (c) {
|
|
42095
|
-
return !c.width;
|
|
42096
|
-
}).length;
|
|
42097
|
-
var customWidthTotal = columns.reduce(function (pre, current) {
|
|
42098
|
-
return current.width ? pre + current.width : pre;
|
|
42099
|
-
}, 0);
|
|
42100
|
-
var averageWidth = (width - customWidthTotal) / unsetWidthCount;
|
|
42101
|
-
if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
|
|
42102
|
-
return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
|
|
42103
|
-
return /*#__PURE__*/React.createElement("col", {
|
|
42104
|
-
key: "colgroup-".concat(index),
|
|
42105
|
-
width: column.width || averageWidth
|
|
42106
|
-
});
|
|
42107
|
-
}));
|
|
42108
|
-
};
|
|
42109
|
-
var TableHead = function TableHead(props) {
|
|
42110
|
-
var theme = useTheme();
|
|
42111
|
-
var _React$useState = React.useState({}),
|
|
42112
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
42113
|
-
filters = _React$useState2[0],
|
|
42114
|
-
setFilters = _React$useState2[1];
|
|
42115
|
-
var _ref = props,
|
|
42116
|
-
columns = _ref.columns,
|
|
42117
|
-
width = _ref.width,
|
|
42118
|
-
onFilters = _ref.onFilters,
|
|
42119
|
-
showFilters = _ref.showFilters;
|
|
42120
|
-
var isScalableWidth = React.useMemo(function () {
|
|
42121
|
-
return columns.find(function (item) {
|
|
42122
|
-
return !!item.width;
|
|
42123
|
-
});
|
|
42124
|
-
}, [columns]);
|
|
42125
|
-
var colgroup = React.useMemo(function () {
|
|
42126
|
-
if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
|
|
42127
|
-
return makeColgroup(width, columns);
|
|
42128
|
-
}, [isScalableWidth, width]);
|
|
42129
|
-
var handleFilterChange = function handleFilterChange(name, value) {
|
|
42130
|
-
setFilters(function (prevFilters) {
|
|
42131
|
-
var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
|
|
42132
|
-
// Call onFiltersChange to propagate filter changes to the parent
|
|
42133
|
-
if (onFilters) {
|
|
42134
|
-
onFilters(updatedFilters);
|
|
42135
|
-
}
|
|
42136
|
-
return updatedFilters;
|
|
42137
|
-
});
|
|
42138
|
-
};
|
|
42139
|
-
var generateFilterInputs = function generateFilterInputs() {
|
|
42140
|
-
return columns.map(function (col) {
|
|
42141
|
-
var _String, _filters$filterName;
|
|
42142
|
-
var Header = col.label,
|
|
42143
|
-
accessor = col.filter,
|
|
42144
|
-
options = col.options;
|
|
42145
|
-
var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
|
|
42146
|
-
var unq_accessor = _.uniqueId(filterName);
|
|
42147
|
-
return /*#__PURE__*/React.createElement("th", {
|
|
42148
|
-
style: {
|
|
42149
|
-
margin: '3px'
|
|
42150
|
-
},
|
|
42151
|
-
"data-column": Header,
|
|
42152
|
-
key: unq_accessor
|
|
42153
|
-
}, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
|
|
42154
|
-
key: unq_accessor,
|
|
42155
|
-
name: filterName,
|
|
42156
|
-
value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
|
|
42157
|
-
onChange: function onChange(newValue) {
|
|
42158
|
-
return handleFilterChange(filterName, newValue);
|
|
42159
|
-
}
|
|
42160
|
-
}, /*#__PURE__*/React.createElement(Select.Option, {
|
|
42161
|
-
value: "All"
|
|
42162
|
-
}, "All ", Header), options ? options.map(function (option) {
|
|
42163
|
-
return /*#__PURE__*/React.createElement(Select.Option, {
|
|
42164
|
-
value: option.value
|
|
42165
|
-
}, option.name);
|
|
42166
|
-
}) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
|
|
42167
|
-
id: "filter-date-".concat(filterName),
|
|
42168
|
-
htmlType: "date",
|
|
42169
|
-
name: filterName,
|
|
42170
|
-
value: filters[filterName],
|
|
42171
|
-
onChange: function onChange(e) {
|
|
42172
|
-
return handleFilterChange(filterName, e.target.value);
|
|
42173
|
-
}
|
|
42174
|
-
}), accessor === 'search' && /*#__PURE__*/React.createElement("th", {
|
|
42175
|
-
"data-column": Header
|
|
42176
|
-
}, /*#__PURE__*/React.createElement(Input, {
|
|
42177
|
-
id: "filter-search-".concat(filterName),
|
|
42178
|
-
htmlType: "text"
|
|
42179
|
-
// ref={filterRefs.current[filterName]} // Dynamically set ref}
|
|
42180
|
-
,
|
|
42181
|
-
name: filterName,
|
|
42182
|
-
style: {
|
|
42183
|
-
height: 30,
|
|
42184
|
-
minWidth: 160
|
|
42185
|
-
},
|
|
42186
|
-
value: filters[filterName],
|
|
42187
|
-
onChange: function onChange(e) {
|
|
42188
|
-
return handleFilterChange(filterName, e.target.value);
|
|
42189
|
-
},
|
|
42190
|
-
placeholder: "Search...",
|
|
42191
|
-
fullWidth: true
|
|
42192
|
-
})));
|
|
42193
|
-
});
|
|
42194
|
-
};
|
|
42195
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
42196
|
-
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]]])
|
|
42197
|
-
}, /*#__PURE__*/React.createElement("tr", {
|
|
42198
|
-
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]]])
|
|
42199
|
-
}, columns.map(function (column, index) {
|
|
42200
|
-
return /*#__PURE__*/React.createElement("th", {
|
|
42201
|
-
style: {
|
|
42202
|
-
// textAlign: `${column?.align} !important`,
|
|
42203
|
-
// paddingLeft: '0.3rem',
|
|
42204
|
-
// paddingRight: '0.3rem',
|
|
42205
|
-
// color: `${column?.color}`,
|
|
42206
|
-
whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
|
|
42207
|
-
},
|
|
42208
|
-
key: "table-th-".concat(column.prop.toString(), "-").concat(index),
|
|
42209
|
-
"data-column": column.label,
|
|
42210
|
-
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 || "")
|
|
42211
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
42212
|
-
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"
|
|
42213
|
-
}, column.label, /*#__PURE__*/React.createElement("br", {
|
|
42214
|
-
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]]])
|
|
42215
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
42216
|
-
style: {
|
|
42217
|
-
textAlign: 'center'
|
|
42218
|
-
},
|
|
42219
|
-
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]]])
|
|
42220
|
-
}, column.text)));
|
|
42221
|
-
})), showFilters && /*#__PURE__*/React.createElement("tr", {
|
|
42222
|
-
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]]])
|
|
42223
|
-
}, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
42224
|
-
id: "134865897",
|
|
42225
|
-
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]
|
|
42226
|
-
}, "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;}")));
|
|
42227
|
-
};
|
|
42228
|
-
TableHead.displayName = 'TableHead';
|
|
42229
|
-
|
|
42230
|
-
var TableCell = function TableCell(_ref) {
|
|
42231
|
-
var columns = _ref.columns,
|
|
42232
|
-
row = _ref.row,
|
|
42233
|
-
rowIndex = _ref.rowIndex,
|
|
42234
|
-
emptyText = _ref.emptyText,
|
|
42235
|
-
onCellClick = _ref.onCellClick;
|
|
42236
|
-
/* eslint-disable react/jsx-no-useless-fragment */
|
|
42237
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
|
|
42238
|
-
var currentRowValue = row[column.prop];
|
|
42239
|
-
var cellValue = currentRowValue || emptyText;
|
|
42240
|
-
var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
|
|
42241
|
-
return /*#__PURE__*/React.createElement("td", {
|
|
42242
|
-
style: _objectSpread2({
|
|
42243
|
-
fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
|
|
42244
|
-
textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
|
|
42245
|
-
paddingLeft: '0.3rem',
|
|
42246
|
-
paddingRight: '0.3rem',
|
|
42247
|
-
color: "".concat(column === null || column === undefined ? undefined : column.color),
|
|
42248
|
-
whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
|
|
42249
|
-
}, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
|
|
42250
|
-
"data-column": column.label,
|
|
42251
|
-
key: "row-td-".concat(index, "-").concat(column.prop.toString()),
|
|
42252
|
-
onClick: function onClick() {
|
|
42253
|
-
return onCellClick && onCellClick(currentRowValue, rowIndex, index);
|
|
42254
|
-
},
|
|
42255
|
-
className: column.className
|
|
42256
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
42257
|
-
className: "cell"
|
|
42258
|
-
}, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
|
|
42259
|
-
}));
|
|
42260
|
-
/* eslint-enable */
|
|
42261
|
-
};
|
|
42262
|
-
|
|
42263
|
-
/* "use client" */
|
|
42264
|
-
|
|
42265
|
-
var defaultContext$2 = {
|
|
42266
|
-
columns: [],
|
|
42267
|
-
updateColumn: function updateColumn() {}
|
|
42268
|
-
};
|
|
42269
|
-
var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
|
|
42270
|
-
var useTableContext = function useTableContext() {
|
|
42271
|
-
return React.useContext(TableContext);
|
|
42272
|
-
};
|
|
42273
|
-
|
|
42274
42202
|
var TableBody = function TableBody(_ref) {
|
|
42275
42203
|
var data = _ref.data,
|
|
42276
42204
|
emptyText = _ref.emptyText,
|
|
@@ -42525,6 +42453,10 @@ function TableComponent(tableProps) {
|
|
|
42525
42453
|
updateColumn: updateColumn
|
|
42526
42454
|
};
|
|
42527
42455
|
}, [columns]);
|
|
42456
|
+
var _React$useState = React.useState({}),
|
|
42457
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
42458
|
+
filters = _React$useState2[0],
|
|
42459
|
+
setFilters = _React$useState2[1];
|
|
42528
42460
|
React.useEffect(function () {
|
|
42529
42461
|
if (typeof customData === 'undefined') return;
|
|
42530
42462
|
setData(customData);
|
|
@@ -42532,16 +42464,82 @@ function TableComponent(tableProps) {
|
|
|
42532
42464
|
useResize(function () {
|
|
42533
42465
|
return updateShape();
|
|
42534
42466
|
});
|
|
42467
|
+
var handleFilterChange = function handleFilterChange(name, value) {
|
|
42468
|
+
setFilters(function (prevFilters) {
|
|
42469
|
+
var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
|
|
42470
|
+
// Call onFiltersChange to propagate filter changes to the parent
|
|
42471
|
+
if (onFilters) {
|
|
42472
|
+
onFilters(updatedFilters);
|
|
42473
|
+
}
|
|
42474
|
+
return updatedFilters;
|
|
42475
|
+
});
|
|
42476
|
+
};
|
|
42477
|
+
var generateFilterInputs = function generateFilterInputs() {
|
|
42478
|
+
return columns.map(function (col) {
|
|
42479
|
+
var _String, _filters$filterName;
|
|
42480
|
+
var Header = col.label,
|
|
42481
|
+
accessor = col.filter,
|
|
42482
|
+
options = col.options;
|
|
42483
|
+
var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
|
|
42484
|
+
var unq_accessor = _.uniqueId(filterName);
|
|
42485
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
42486
|
+
style: {
|
|
42487
|
+
margin: '3px'
|
|
42488
|
+
},
|
|
42489
|
+
"data-column": Header,
|
|
42490
|
+
key: unq_accessor
|
|
42491
|
+
}, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select$1, {
|
|
42492
|
+
key: unq_accessor,
|
|
42493
|
+
name: filterName,
|
|
42494
|
+
value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
|
|
42495
|
+
onChange: function onChange(newValue) {
|
|
42496
|
+
return handleFilterChange(filterName, newValue);
|
|
42497
|
+
}
|
|
42498
|
+
}, /*#__PURE__*/React.createElement(Select$1.Option, {
|
|
42499
|
+
value: "All"
|
|
42500
|
+
}, "All ", Header), options ? options.map(function (option) {
|
|
42501
|
+
return /*#__PURE__*/React.createElement(Select$1.Option, {
|
|
42502
|
+
value: option.value
|
|
42503
|
+
}, option.name);
|
|
42504
|
+
}) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input$1, {
|
|
42505
|
+
id: "filter-date-".concat(filterName),
|
|
42506
|
+
htmlType: "date",
|
|
42507
|
+
name: filterName,
|
|
42508
|
+
value: filters[filterName],
|
|
42509
|
+
onChange: function onChange(e) {
|
|
42510
|
+
return handleFilterChange(filterName, e.target.value);
|
|
42511
|
+
}
|
|
42512
|
+
}), accessor === 'search' && /*#__PURE__*/React.createElement(Input$1, {
|
|
42513
|
+
id: "filter-search-".concat(filterName),
|
|
42514
|
+
htmlType: "text",
|
|
42515
|
+
autoComplete: "off",
|
|
42516
|
+
name: filterName,
|
|
42517
|
+
style: {
|
|
42518
|
+
height: 30,
|
|
42519
|
+
minWidth: 160
|
|
42520
|
+
},
|
|
42521
|
+
value: filters[filterName],
|
|
42522
|
+
onChange: function onChange(e) {
|
|
42523
|
+
return handleFilterChange(filterName, e.target.value);
|
|
42524
|
+
},
|
|
42525
|
+
placeholder: "Search...",
|
|
42526
|
+
fullWidth: true
|
|
42527
|
+
}));
|
|
42528
|
+
});
|
|
42529
|
+
};
|
|
42535
42530
|
return /*#__PURE__*/React.createElement(TableContext.Provider, {
|
|
42536
42531
|
value: contextValue
|
|
42537
|
-
}, /*#__PURE__*/React.createElement("
|
|
42532
|
+
}, showFilters && /*#__PURE__*/React.createElement("div", {
|
|
42533
|
+
style: {
|
|
42534
|
+
display: 'flex',
|
|
42535
|
+
gap: 6
|
|
42536
|
+
}
|
|
42537
|
+
}, generateFilterInputs()), /*#__PURE__*/React.createElement("table", _extends({
|
|
42538
42538
|
ref: ref
|
|
42539
42539
|
}, props, {
|
|
42540
42540
|
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 || "")
|
|
42541
42541
|
}), /*#__PURE__*/React.createElement(TableHead, {
|
|
42542
42542
|
columns: columns,
|
|
42543
|
-
onFilters: onFilters,
|
|
42544
|
-
showFilters: showFilters,
|
|
42545
42543
|
width: width
|
|
42546
42544
|
}), /*#__PURE__*/React.createElement(TableBody, {
|
|
42547
42545
|
data: data,
|