@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.
- package/dist/index.js +181 -185
- package/dist/table/index.js +1187 -1191
- package/esm/table/table-head.js +2 -82
- package/esm/table/table.js +78 -4
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -24878,6 +24878,113 @@ var SpinnerComponent = function SpinnerComponent(_ref) {
|
|
|
24878
24878
|
SpinnerComponent.displayName = 'Spinner';
|
|
24879
24879
|
var Spinner = withScale(SpinnerComponent);
|
|
24880
24880
|
|
|
24881
|
+
var makeColgroup = function makeColgroup(width, columns) {
|
|
24882
|
+
var unsetWidthCount = columns.filter(function (c) {
|
|
24883
|
+
return !c.width;
|
|
24884
|
+
}).length;
|
|
24885
|
+
var customWidthTotal = columns.reduce(function (pre, current) {
|
|
24886
|
+
return current.width ? pre + current.width : pre;
|
|
24887
|
+
}, 0);
|
|
24888
|
+
var averageWidth = (width - customWidthTotal) / unsetWidthCount;
|
|
24889
|
+
if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
|
|
24890
|
+
return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
|
|
24891
|
+
return /*#__PURE__*/React.createElement("col", {
|
|
24892
|
+
key: "colgroup-".concat(index),
|
|
24893
|
+
width: column.width || averageWidth
|
|
24894
|
+
});
|
|
24895
|
+
}));
|
|
24896
|
+
};
|
|
24897
|
+
var TableHead = function TableHead(props) {
|
|
24898
|
+
var theme = useTheme();
|
|
24899
|
+
var _ref = props,
|
|
24900
|
+
columns = _ref.columns,
|
|
24901
|
+
width = _ref.width;
|
|
24902
|
+
var isScalableWidth = React.useMemo(function () {
|
|
24903
|
+
return columns.find(function (item) {
|
|
24904
|
+
return !!item.width;
|
|
24905
|
+
});
|
|
24906
|
+
}, [columns]);
|
|
24907
|
+
var colgroup = React.useMemo(function () {
|
|
24908
|
+
if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
|
|
24909
|
+
return makeColgroup(width, columns);
|
|
24910
|
+
}, [isScalableWidth, width]);
|
|
24911
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
|
|
24912
|
+
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]]])
|
|
24913
|
+
}, /*#__PURE__*/React.createElement("tr", {
|
|
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
|
+
}, columns.map(function (column, index) {
|
|
24916
|
+
return /*#__PURE__*/React.createElement("th", {
|
|
24917
|
+
style: {
|
|
24918
|
+
// textAlign: `${column?.align} !important`,
|
|
24919
|
+
// paddingLeft: '0.3rem',
|
|
24920
|
+
// paddingRight: '0.3rem',
|
|
24921
|
+
// color: `${column?.color}`,
|
|
24922
|
+
whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
|
|
24923
|
+
},
|
|
24924
|
+
key: "table-th-".concat(column.prop.toString(), "-").concat(index),
|
|
24925
|
+
"data-column": column.label,
|
|
24926
|
+
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 || "")
|
|
24927
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
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]]]) + " " + "thead-box"
|
|
24929
|
+
}, column.label, /*#__PURE__*/React.createElement("br", {
|
|
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]]])
|
|
24931
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
24932
|
+
style: {
|
|
24933
|
+
textAlign: 'center'
|
|
24934
|
+
},
|
|
24935
|
+
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]]])
|
|
24936
|
+
}, column.text)));
|
|
24937
|
+
}))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
24938
|
+
id: "134865897",
|
|
24939
|
+
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]
|
|
24940
|
+
}, "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;}")));
|
|
24941
|
+
};
|
|
24942
|
+
TableHead.displayName = 'TableHead';
|
|
24943
|
+
|
|
24944
|
+
var TableCell = function TableCell(_ref) {
|
|
24945
|
+
var columns = _ref.columns,
|
|
24946
|
+
row = _ref.row,
|
|
24947
|
+
rowIndex = _ref.rowIndex,
|
|
24948
|
+
emptyText = _ref.emptyText,
|
|
24949
|
+
onCellClick = _ref.onCellClick;
|
|
24950
|
+
/* eslint-disable react/jsx-no-useless-fragment */
|
|
24951
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
|
|
24952
|
+
var currentRowValue = row[column.prop];
|
|
24953
|
+
var cellValue = currentRowValue || emptyText;
|
|
24954
|
+
var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
|
|
24955
|
+
return /*#__PURE__*/React.createElement("td", {
|
|
24956
|
+
style: _objectSpread2({
|
|
24957
|
+
fontSize: "".concat(column === null || column === undefined ? undefined : column.fontSize),
|
|
24958
|
+
textAlign: "".concat(column === null || column === undefined ? undefined : column.align, " !important"),
|
|
24959
|
+
paddingLeft: '0.3rem',
|
|
24960
|
+
paddingRight: '0.3rem',
|
|
24961
|
+
color: "".concat(column === null || column === undefined ? undefined : column.color),
|
|
24962
|
+
whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
|
|
24963
|
+
}, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
|
|
24964
|
+
"data-column": column.label,
|
|
24965
|
+
key: "row-td-".concat(index, "-").concat(column.prop.toString()),
|
|
24966
|
+
onClick: function onClick() {
|
|
24967
|
+
return onCellClick && onCellClick(currentRowValue, rowIndex, index);
|
|
24968
|
+
},
|
|
24969
|
+
className: column.className
|
|
24970
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
24971
|
+
className: "cell"
|
|
24972
|
+
}, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
|
|
24973
|
+
}));
|
|
24974
|
+
/* eslint-enable */
|
|
24975
|
+
};
|
|
24976
|
+
|
|
24977
|
+
/* "use client" */
|
|
24978
|
+
|
|
24979
|
+
var defaultContext$2 = {
|
|
24980
|
+
columns: [],
|
|
24981
|
+
updateColumn: function updateColumn() {}
|
|
24982
|
+
};
|
|
24983
|
+
var TableContext = /*#__PURE__*/React.createContext(defaultContext$2);
|
|
24984
|
+
var useTableContext = function useTableContext() {
|
|
24985
|
+
return React.useContext(TableContext);
|
|
24986
|
+
};
|
|
24987
|
+
|
|
24881
24988
|
var lodash$1 = {exports: {}};
|
|
24882
24989
|
|
|
24883
24990
|
/**
|
|
@@ -42090,187 +42197,6 @@ function requireLodash () {
|
|
|
42090
42197
|
var lodashExports = requireLodash();
|
|
42091
42198
|
var _ = /*@__PURE__*/getDefaultExportFromCjs(lodashExports);
|
|
42092
42199
|
|
|
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
42200
|
var TableBody = function TableBody(_ref) {
|
|
42275
42201
|
var data = _ref.data,
|
|
42276
42202
|
emptyText = _ref.emptyText,
|
|
@@ -42525,6 +42451,10 @@ function TableComponent(tableProps) {
|
|
|
42525
42451
|
updateColumn: updateColumn
|
|
42526
42452
|
};
|
|
42527
42453
|
}, [columns]);
|
|
42454
|
+
var _React$useState = React.useState({}),
|
|
42455
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
42456
|
+
filters = _React$useState2[0],
|
|
42457
|
+
setFilters = _React$useState2[1];
|
|
42528
42458
|
React.useEffect(function () {
|
|
42529
42459
|
if (typeof customData === 'undefined') return;
|
|
42530
42460
|
setData(customData);
|
|
@@ -42532,7 +42462,75 @@ function TableComponent(tableProps) {
|
|
|
42532
42462
|
useResize(function () {
|
|
42533
42463
|
return updateShape();
|
|
42534
42464
|
});
|
|
42535
|
-
|
|
42465
|
+
var handleFilterChange = function handleFilterChange(name, value) {
|
|
42466
|
+
setFilters(function (prevFilters) {
|
|
42467
|
+
var updatedFilters = _objectSpread2(_objectSpread2({}, prevFilters), {}, _defineProperty$1({}, name, value));
|
|
42468
|
+
// Call onFiltersChange to propagate filter changes to the parent
|
|
42469
|
+
if (onFilters) {
|
|
42470
|
+
onFilters(updatedFilters);
|
|
42471
|
+
}
|
|
42472
|
+
return updatedFilters;
|
|
42473
|
+
});
|
|
42474
|
+
};
|
|
42475
|
+
var generateFilterInputs = function generateFilterInputs() {
|
|
42476
|
+
return columns.map(function (col) {
|
|
42477
|
+
var _String, _filters$filterName;
|
|
42478
|
+
var Header = col.label,
|
|
42479
|
+
accessor = col.filter,
|
|
42480
|
+
options = col.options;
|
|
42481
|
+
var filterName = (_String = String(col === null || col === undefined ? undefined : col.label)) === null || _String === undefined ? undefined : _String.replace(' ', '_').toLowerCase();
|
|
42482
|
+
var unq_accessor = _.uniqueId(filterName);
|
|
42483
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
42484
|
+
style: {
|
|
42485
|
+
margin: '3px'
|
|
42486
|
+
},
|
|
42487
|
+
"data-column": Header,
|
|
42488
|
+
key: unq_accessor
|
|
42489
|
+
}, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
|
|
42490
|
+
key: unq_accessor,
|
|
42491
|
+
name: filterName,
|
|
42492
|
+
value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
|
|
42493
|
+
onChange: function onChange(newValue) {
|
|
42494
|
+
return handleFilterChange(filterName, newValue);
|
|
42495
|
+
}
|
|
42496
|
+
}, /*#__PURE__*/React.createElement(Select.Option, {
|
|
42497
|
+
value: "All"
|
|
42498
|
+
}, "All ", Header), options ? options.map(function (option) {
|
|
42499
|
+
return /*#__PURE__*/React.createElement(Select.Option, {
|
|
42500
|
+
value: option.value
|
|
42501
|
+
}, option.name);
|
|
42502
|
+
}) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
|
|
42503
|
+
id: "filter-date-".concat(filterName),
|
|
42504
|
+
htmlType: "date",
|
|
42505
|
+
name: filterName,
|
|
42506
|
+
value: filters[filterName],
|
|
42507
|
+
onChange: function onChange(e) {
|
|
42508
|
+
return handleFilterChange(filterName, e.target.value);
|
|
42509
|
+
}
|
|
42510
|
+
}), accessor === 'search' && /*#__PURE__*/React.createElement(Input, {
|
|
42511
|
+
id: "filter-search-".concat(filterName),
|
|
42512
|
+
htmlType: "text",
|
|
42513
|
+
autoComplete: "off",
|
|
42514
|
+
name: filterName,
|
|
42515
|
+
style: {
|
|
42516
|
+
height: 30,
|
|
42517
|
+
minWidth: 160
|
|
42518
|
+
},
|
|
42519
|
+
value: filters[filterName],
|
|
42520
|
+
onChange: function onChange(e) {
|
|
42521
|
+
return handleFilterChange(filterName, e.target.value);
|
|
42522
|
+
},
|
|
42523
|
+
placeholder: "Search...",
|
|
42524
|
+
fullWidth: true
|
|
42525
|
+
}));
|
|
42526
|
+
});
|
|
42527
|
+
};
|
|
42528
|
+
return /*#__PURE__*/React.createElement("div", null, showFilters && /*#__PURE__*/React.createElement("div", {
|
|
42529
|
+
style: {
|
|
42530
|
+
display: 'flex',
|
|
42531
|
+
gap: 6
|
|
42532
|
+
}
|
|
42533
|
+
}, generateFilterInputs()), /*#__PURE__*/React.createElement(TableContext.Provider, {
|
|
42536
42534
|
value: contextValue
|
|
42537
42535
|
}, /*#__PURE__*/React.createElement("table", _extends({
|
|
42538
42536
|
ref: ref
|
|
@@ -42540,8 +42538,6 @@ function TableComponent(tableProps) {
|
|
|
42540
42538
|
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
42539
|
}), /*#__PURE__*/React.createElement(TableHead, {
|
|
42542
42540
|
columns: columns,
|
|
42543
|
-
onFilters: onFilters,
|
|
42544
|
-
showFilters: showFilters,
|
|
42545
42541
|
width: width
|
|
42546
42542
|
}), /*#__PURE__*/React.createElement(TableBody, {
|
|
42547
42543
|
data: data,
|
|
@@ -42556,7 +42552,7 @@ function TableComponent(tableProps) {
|
|
|
42556
42552
|
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
42557
42553
|
id: "2132340556",
|
|
42558
42554
|
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)]
|
|
42559
|
-
}, "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), ";}"))));
|
|
42555
|
+
}, "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), ";}")))));
|
|
42560
42556
|
}
|
|
42561
42557
|
TableComponent.displayName = 'Table';
|
|
42562
42558
|
TableComponent.Column = TableColumn;
|