@deviceinsight/ng-ui-components 6.28.0 → 6.30.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.
@@ -35,6 +35,7 @@ export declare type Props<T, ID extends string | number | undefined | null = any
35
35
  * Each column can also be extended to be sortable and/or filterable
36
36
  */
37
37
  export default class Reactable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
38
+ componentDidUpdate(prevProps: Props<T, ID>): void;
38
39
  render(): React.JSX.Element;
39
40
  }
40
41
  //# sourceMappingURL=Reactable.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,MAAM;CAoBN"}
1
+ {"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;IAgB1C,MAAM;CAoBN"}
@@ -34,6 +34,18 @@ const ReactableTable_1 = __importDefault(require("./helpers/ReactableTable"));
34
34
  * Each column can also be extended to be sortable and/or filterable
35
35
  */
36
36
  class Reactable extends React.Component {
37
+ componentDidUpdate(prevProps) {
38
+ const { pageable, paginationSettings, onChangePage } = this.props;
39
+ if (!pageable) {
40
+ return;
41
+ }
42
+ const totalPages = pageable.totalPages || 0;
43
+ const currentPage = paginationSettings.page;
44
+ const clampedPage = totalPages > 0 ? Math.min(currentPage, totalPages - 1) : 0;
45
+ if (currentPage !== clampedPage) {
46
+ onChangePage(clampedPage);
47
+ }
48
+ }
37
49
  render() {
38
50
  const { paginationSettings, pageable, onChangePage, onChangeSize } = this.props;
39
51
  const showPagination = onChangeSize
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+F5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
1
+ {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAKrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6H5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
@@ -30,14 +30,19 @@ const react_1 = __importStar(require("react"));
30
30
  const i18n_1 = require("../../../i18n");
31
31
  const ReactableTextFilter_1 = __importDefault(require("./ReactableTextFilter"));
32
32
  const helper_1 = require("./helper");
33
+ const SelectWithSearch_1 = __importDefault(require("../../input/SelectWithSearch"));
33
34
  const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
34
35
  const { t } = (0, i18n_1.useTranslation)();
35
36
  const [state, setState] = (0, react_1.useState)({});
37
+ const onFilterRef = (0, react_1.useRef)(onFilter);
38
+ (0, react_1.useEffect)(() => {
39
+ onFilterRef.current = onFilter;
40
+ }, [onFilter]);
36
41
  (0, react_1.useEffect)(() => {
37
42
  setState((prev) => {
38
43
  const merged = {};
39
44
  for (const cd of columnDefs) {
40
- merged[cd.name] = prev[cd.name] !== undefined ? prev[cd.name] : cd.filterable?.initialValue ?? '';
45
+ merged[cd.name] = prev[cd.name] !== undefined ? prev[cd.name] : (cd.filterable?.initialValue ?? '');
41
46
  }
42
47
  const prevKeys = Object.keys(prev);
43
48
  const mergedKeys = Object.keys(merged);
@@ -47,11 +52,11 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
47
52
  return prev; // no change
48
53
  }
49
54
  if (Object.values(merged).some((v) => v)) {
50
- onFilter(merged);
55
+ onFilterRef.current(merged);
51
56
  }
52
57
  return merged;
53
58
  });
54
- }, [columnDefs, onFilter]);
59
+ }, [columnDefs]);
55
60
  const changeFilter = (columnName, value) => {
56
61
  const newState = { ...state, [columnName]: value };
57
62
  setState(newState);
@@ -78,17 +83,30 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
78
83
  throw new Error(`No filterOptions found for column type: options on columnDef: ${columnDef.name}`);
79
84
  }
80
85
  const filterOptions = columnDef.filterable.filterOptions;
81
- return (react_1.default.createElement("select", { onChange: (event) => {
82
- changeFilter(columnDef.name, event.target.value);
83
- }, value: state[columnDef.name] },
84
- react_1.default.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
85
- defaultValue: '- All -'
86
- })),
87
- filterOptions.map((option) => (react_1.default.createElement("option", { className: (0, helper_1.getClassName)(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
88
- ? option.label
89
- : t(option.label.id, {
90
- defaultValue: option.label.defaultValue
91
- }))))));
86
+ if (columnDef.filterable.searchableOptions) {
87
+ const searchableOptions = filterOptions.map((option) => ({
88
+ type: 'item',
89
+ label: typeof option.label === 'string'
90
+ ? option.label
91
+ : t(option.label.id, { defaultValue: option.label.defaultValue }),
92
+ value: option.value
93
+ }));
94
+ const value = state[columnDef.name];
95
+ return (react_1.default.createElement(SelectWithSearch_1.default, { options: searchableOptions, onChange: (item) => {
96
+ changeFilter(columnDef.name, item?.value);
97
+ }, value: value ? searchableOptions.find((opt) => opt.value === value.toString()) : null, clearable: true }));
98
+ }
99
+ else {
100
+ return (react_1.default.createElement("select", { onChange: (event) => {
101
+ changeFilter(columnDef.name, event.target.value);
102
+ }, value: state[columnDef.name] },
103
+ react_1.default.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
104
+ defaultValue: '- All -'
105
+ })),
106
+ filterOptions.map((option) => (react_1.default.createElement("option", { className: (0, helper_1.getClassName)(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
107
+ ? option.label
108
+ : t(option.label.id, { defaultValue: option.label.defaultValue }))))));
109
+ }
92
110
  };
93
111
  return (react_1.default.createElement("tr", { className: "di filterrow form" }, columnDefs.map((columnDef) => (react_1.default.createElement("td", { key: columnDef.name, style: { textAlign: columnDef.align || 'left' } }, getFilterByColumnDef(columnDef))))));
94
112
  };
@@ -12,6 +12,7 @@ declare type ReactableColumnFilterable<T> = {
12
12
  filterFn?: (item: T, value: string) => boolean;
13
13
  initialValue?: string;
14
14
  placeholder?: string;
15
+ searchableOptions?: boolean;
15
16
  };
16
17
  export declare type ReactableColumnDef<T> = {
17
18
  name: string;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
@@ -35,6 +35,7 @@ export declare type Props<T, ID extends string | number | undefined | null = any
35
35
  * Each column can also be extended to be sortable and/or filterable
36
36
  */
37
37
  export default class Reactable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
38
+ componentDidUpdate(prevProps: Props<T, ID>): void;
38
39
  render(): React.JSX.Element;
39
40
  }
40
41
  //# sourceMappingURL=Reactable.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,MAAM;CAoBN"}
1
+ {"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;IAgB1C,MAAM;CAoBN"}
@@ -6,6 +6,18 @@ import ReactableTable from './helpers/ReactableTable';
6
6
  * Each column can also be extended to be sortable and/or filterable
7
7
  */
8
8
  export default class Reactable extends React.Component {
9
+ componentDidUpdate(prevProps) {
10
+ const { pageable, paginationSettings, onChangePage } = this.props;
11
+ if (!pageable) {
12
+ return;
13
+ }
14
+ const totalPages = pageable.totalPages || 0;
15
+ const currentPage = paginationSettings.page;
16
+ const clampedPage = totalPages > 0 ? Math.min(currentPage, totalPages - 1) : 0;
17
+ if (currentPage !== clampedPage) {
18
+ onChangePage(clampedPage);
19
+ }
20
+ }
9
21
  render() {
10
22
  const { paginationSettings, pageable, onChangePage, onChangeSize } = this.props;
11
23
  const showPagination = onChangeSize
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+F5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
1
+ {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAKrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6H5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
@@ -1,15 +1,20 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import React, { useEffect, useRef, useState } from 'react';
2
2
  import { useTranslation } from '../../../i18n';
3
3
  import ReactableTextFilter from './ReactableTextFilter';
4
4
  import { getClassName } from './helper';
5
+ import SelectWithSearch from '../../input/SelectWithSearch';
5
6
  const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
6
7
  const { t } = useTranslation();
7
8
  const [state, setState] = useState({});
9
+ const onFilterRef = useRef(onFilter);
10
+ useEffect(() => {
11
+ onFilterRef.current = onFilter;
12
+ }, [onFilter]);
8
13
  useEffect(() => {
9
14
  setState((prev) => {
10
15
  const merged = {};
11
16
  for (const cd of columnDefs) {
12
- merged[cd.name] = prev[cd.name] !== undefined ? prev[cd.name] : cd.filterable?.initialValue ?? '';
17
+ merged[cd.name] = prev[cd.name] !== undefined ? prev[cd.name] : (cd.filterable?.initialValue ?? '');
13
18
  }
14
19
  const prevKeys = Object.keys(prev);
15
20
  const mergedKeys = Object.keys(merged);
@@ -19,11 +24,11 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
19
24
  return prev; // no change
20
25
  }
21
26
  if (Object.values(merged).some((v) => v)) {
22
- onFilter(merged);
27
+ onFilterRef.current(merged);
23
28
  }
24
29
  return merged;
25
30
  });
26
- }, [columnDefs, onFilter]);
31
+ }, [columnDefs]);
27
32
  const changeFilter = (columnName, value) => {
28
33
  const newState = { ...state, [columnName]: value };
29
34
  setState(newState);
@@ -50,17 +55,30 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
50
55
  throw new Error(`No filterOptions found for column type: options on columnDef: ${columnDef.name}`);
51
56
  }
52
57
  const filterOptions = columnDef.filterable.filterOptions;
53
- return (React.createElement("select", { onChange: (event) => {
54
- changeFilter(columnDef.name, event.target.value);
55
- }, value: state[columnDef.name] },
56
- React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
57
- defaultValue: '- All -'
58
- })),
59
- filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
60
- ? option.label
61
- : t(option.label.id, {
62
- defaultValue: option.label.defaultValue
63
- }))))));
58
+ if (columnDef.filterable.searchableOptions) {
59
+ const searchableOptions = filterOptions.map((option) => ({
60
+ type: 'item',
61
+ label: typeof option.label === 'string'
62
+ ? option.label
63
+ : t(option.label.id, { defaultValue: option.label.defaultValue }),
64
+ value: option.value
65
+ }));
66
+ const value = state[columnDef.name];
67
+ return (React.createElement(SelectWithSearch, { options: searchableOptions, onChange: (item) => {
68
+ changeFilter(columnDef.name, item?.value);
69
+ }, value: value ? searchableOptions.find((opt) => opt.value === value.toString()) : null, clearable: true }));
70
+ }
71
+ else {
72
+ return (React.createElement("select", { onChange: (event) => {
73
+ changeFilter(columnDef.name, event.target.value);
74
+ }, value: state[columnDef.name] },
75
+ React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
76
+ defaultValue: '- All -'
77
+ })),
78
+ filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
79
+ ? option.label
80
+ : t(option.label.id, { defaultValue: option.label.defaultValue }))))));
81
+ }
64
82
  };
65
83
  return (React.createElement("tr", { className: "di filterrow form" }, columnDefs.map((columnDef) => (React.createElement("td", { key: columnDef.name, style: { textAlign: columnDef.align || 'left' } }, getFilterByColumnDef(columnDef))))));
66
84
  };
@@ -12,6 +12,7 @@ declare type ReactableColumnFilterable<T> = {
12
12
  filterFn?: (item: T, value: string) => boolean;
13
13
  initialValue?: string;
14
14
  placeholder?: string;
15
+ searchableOptions?: boolean;
15
16
  };
16
17
  export declare type ReactableColumnDef<T> = {
17
18
  name: string;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
@@ -35,6 +35,7 @@ export declare type Props<T, ID extends string | number | undefined | null = any
35
35
  * Each column can also be extended to be sortable and/or filterable
36
36
  */
37
37
  export default class Reactable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
38
+ componentDidUpdate(prevProps: Props<T, ID>): void;
38
39
  render(): React.JSX.Element;
39
40
  }
40
41
  //# sourceMappingURL=Reactable.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,MAAM;CAoBN"}
1
+ {"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;IAgB1C,MAAM;CAoBN"}
@@ -6,6 +6,18 @@ import ReactableTable from './helpers/ReactableTable';
6
6
  * Each column can also be extended to be sortable and/or filterable
7
7
  */
8
8
  export default class Reactable extends React.Component {
9
+ componentDidUpdate(prevProps) {
10
+ const { pageable, paginationSettings, onChangePage } = this.props;
11
+ if (!pageable) {
12
+ return;
13
+ }
14
+ const totalPages = pageable.totalPages || 0;
15
+ const currentPage = paginationSettings.page;
16
+ const clampedPage = totalPages > 0 ? Math.min(currentPage, totalPages - 1) : 0;
17
+ if (currentPage !== clampedPage) {
18
+ onChangePage(clampedPage);
19
+ }
20
+ }
9
21
  render() {
10
22
  const { paginationSettings, pageable, onChangePage, onChangeSize } = this.props;
11
23
  const showPagination = onChangeSize
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+F5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
1
+ {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAKrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6H5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
@@ -1,15 +1,20 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import React, { useEffect, useRef, useState } from 'react';
2
2
  import { useTranslation } from '../../../i18n';
3
3
  import ReactableTextFilter from './ReactableTextFilter';
4
4
  import { getClassName } from './helper';
5
+ import SelectWithSearch from '../../input/SelectWithSearch';
5
6
  const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
6
7
  const { t } = useTranslation();
7
8
  const [state, setState] = useState({});
9
+ const onFilterRef = useRef(onFilter);
10
+ useEffect(() => {
11
+ onFilterRef.current = onFilter;
12
+ }, [onFilter]);
8
13
  useEffect(() => {
9
14
  setState((prev) => {
10
15
  const merged = {};
11
16
  for (const cd of columnDefs) {
12
- merged[cd.name] = prev[cd.name] !== undefined ? prev[cd.name] : cd.filterable?.initialValue ?? '';
17
+ merged[cd.name] = prev[cd.name] !== undefined ? prev[cd.name] : (cd.filterable?.initialValue ?? '');
13
18
  }
14
19
  const prevKeys = Object.keys(prev);
15
20
  const mergedKeys = Object.keys(merged);
@@ -19,11 +24,11 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
19
24
  return prev; // no change
20
25
  }
21
26
  if (Object.values(merged).some((v) => v)) {
22
- onFilter(merged);
27
+ onFilterRef.current(merged);
23
28
  }
24
29
  return merged;
25
30
  });
26
- }, [columnDefs, onFilter]);
31
+ }, [columnDefs]);
27
32
  const changeFilter = (columnName, value) => {
28
33
  const newState = { ...state, [columnName]: value };
29
34
  setState(newState);
@@ -50,17 +55,30 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
50
55
  throw new Error(`No filterOptions found for column type: options on columnDef: ${columnDef.name}`);
51
56
  }
52
57
  const filterOptions = columnDef.filterable.filterOptions;
53
- return (React.createElement("select", { onChange: (event) => {
54
- changeFilter(columnDef.name, event.target.value);
55
- }, value: state[columnDef.name] },
56
- React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
57
- defaultValue: '- All -'
58
- })),
59
- filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
60
- ? option.label
61
- : t(option.label.id, {
62
- defaultValue: option.label.defaultValue
63
- }))))));
58
+ if (columnDef.filterable.searchableOptions) {
59
+ const searchableOptions = filterOptions.map((option) => ({
60
+ type: 'item',
61
+ label: typeof option.label === 'string'
62
+ ? option.label
63
+ : t(option.label.id, { defaultValue: option.label.defaultValue }),
64
+ value: option.value
65
+ }));
66
+ const value = state[columnDef.name];
67
+ return (React.createElement(SelectWithSearch, { options: searchableOptions, onChange: (item) => {
68
+ changeFilter(columnDef.name, item?.value);
69
+ }, value: value ? searchableOptions.find((opt) => opt.value === value.toString()) : null, clearable: true }));
70
+ }
71
+ else {
72
+ return (React.createElement("select", { onChange: (event) => {
73
+ changeFilter(columnDef.name, event.target.value);
74
+ }, value: state[columnDef.name] },
75
+ React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
76
+ defaultValue: '- All -'
77
+ })),
78
+ filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
79
+ ? option.label
80
+ : t(option.label.id, { defaultValue: option.label.defaultValue }))))));
81
+ }
64
82
  };
65
83
  return (React.createElement("tr", { className: "di filterrow form" }, columnDefs.map((columnDef) => (React.createElement("td", { key: columnDef.name, style: { textAlign: columnDef.align || 'left' } }, getFilterByColumnDef(columnDef))))));
66
84
  };
@@ -12,6 +12,7 @@ declare type ReactableColumnFilterable<T> = {
12
12
  filterFn?: (item: T, value: string) => boolean;
13
13
  initialValue?: string;
14
14
  placeholder?: string;
15
+ searchableOptions?: boolean;
15
16
  };
16
17
  export declare type ReactableColumnDef<T> = {
17
18
  name: string;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deviceinsight/ng-ui-components",
3
- "version": "6.28.0",
3
+ "version": "6.30.0",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -92,6 +92,7 @@
92
92
  "@testing-library/react": "^13.4.0",
93
93
  "@testing-library/user-event": "14.4.3",
94
94
  "@types/lodash": "4.17.16",
95
+ "@types/minimatch": "^5.1.2",
95
96
  "@types/node": "22.13.13",
96
97
  "@types/react": "18.3.12",
97
98
  "@types/react-datepicker": "4.3.4",