@uxf/data-grid 11.31.0 → 11.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/_api/index.js +2 -3
  2. package/_components/drawer.js +1 -1
  3. package/_store/reducer.js +7 -7
  4. package/body-cell/body-cell-boolean.js +2 -1
  5. package/body-cell/body-cell-url.js +1 -1
  6. package/data-grid-custom-example.stories.js +5 -5
  7. package/data-grid.js +10 -10
  8. package/data-grid.stories.js +3 -4
  9. package/export-button/export-button.js +3 -3
  10. package/export-button/export-button.stories.js +2 -3
  11. package/filter-handler/boolean-select.js +2 -2
  12. package/filter-handler/checkbox.js +1 -1
  13. package/filter-handler/date.js +2 -2
  14. package/filter-handler/datetime.js +2 -2
  15. package/filter-handler/entity-multi-select.js +1 -1
  16. package/filter-handler/entity-select.js +1 -1
  17. package/filter-handler/interval.js +1 -1
  18. package/filter-handler/multi-select.js +2 -1
  19. package/filter-handler/select.js +2 -1
  20. package/filter-handler/string.js +1 -1
  21. package/filter-list/filter-list.js +5 -4
  22. package/filter-list/filter-list.stories.js +2 -3
  23. package/filters/filters.js +2 -2
  24. package/filters/filters.stories.js +2 -3
  25. package/filters-button/filters-button.js +5 -5
  26. package/filters-button/filters-button.stories.js +2 -3
  27. package/footer/footer.js +1 -2
  28. package/fulltext-input/fulltext-input.js +3 -3
  29. package/fulltext-input/fulltext-input.stories.js +2 -3
  30. package/hidden-columns/hidden-columns.js +4 -8
  31. package/hidden-columns/hidden-columns.stories.js +2 -3
  32. package/hidden-columns-button/hidden-columns-button.js +5 -5
  33. package/hidden-columns-button/hidden-columns-button.stories.js +2 -3
  34. package/hooks/useCallbackRef.d.ts +0 -1
  35. package/linear-progress/linear-progress.js +2 -2
  36. package/package.json +10 -10
  37. package/pagination/pagination.js +2 -2
  38. package/pagination/pagination.stories.js +2 -3
  39. package/root/root.js +1 -2
  40. package/row-counts/row-counts.js +2 -2
  41. package/row-counts/row-counts.stories.js +2 -3
  42. package/rows-per-page-select/rows-per-page-select.js +3 -3
  43. package/rows-per-page-select/rows-per-page-select.stories.js +2 -3
  44. package/selected-rows-toolbar/selected-rows-toolbar.js +3 -3
  45. package/selected-rows-toolbar/selected-rows-toolbar.stories.js +3 -4
  46. package/table/components/action-cell-wrapper.js +1 -2
  47. package/table/components/action-cell.js +2 -3
  48. package/table/components/select-row-checkbox.js +2 -3
  49. package/table/hooks/use-rdg-visuals.d.ts +0 -1
  50. package/table/hooks/use-rdg-visuals.js +1 -2
  51. package/table/hooks/use-react-data-grid-columns.js +2 -3
  52. package/table/no-rows-fallback.js +1 -2
  53. package/table/table.js +10 -7
  54. package/table/table.stories.js +2 -3
  55. package/table-v2/components/action-cell.js +1 -2
  56. package/table-v2/components/body.js +1 -2
  57. package/table-v2/components/cell.js +1 -2
  58. package/table-v2/components/header-action-cell.js +1 -2
  59. package/table-v2/components/header-cell.js +3 -3
  60. package/table-v2/components/header.js +1 -2
  61. package/table-v2/components/index.d.ts +0 -1
  62. package/table-v2/components/row.js +1 -2
  63. package/table-v2/hooks/use-resizable-columns.d.ts +0 -1
  64. package/table-v2/hooks/use-resizable-columns.js +1 -2
  65. package/table-v2/no-rows-fallback.js +1 -2
  66. package/table-v2/table-v2.js +9 -7
  67. package/table-v2/table-v2.stories.js +3 -4
  68. package/table-v2/utils/get-grid-template-rows.js +1 -2
  69. package/toolbar/toolbar.js +1 -2
  70. package/toolbar-control/toolbar-control.js +6 -6
  71. package/toolbar-control/toolbar-control.stories.js +2 -3
  72. package/toolbar-customs/toolbar-customs.js +6 -4
  73. package/toolbar-customs/toolbar-customs.stories.js +1 -2
  74. package/toolbar-tabs/toolbar-tabs.js +9 -9
  75. package/toolbar-tabs/toolbar-tabs.stories.js +2 -3
  76. package/types/components.d.ts +4 -4
  77. package/types/schema.d.ts +8 -8
  78. package/use-data-grid-control/actions-factory.js +1 -2
  79. package/use-data-grid-control/use-data-grid-control.d.ts +1 -1
  80. package/use-data-grid-control/use-data-grid-control.js +1 -2
  81. package/use-data-grid-fetching/use-data-grid-fetching.js +1 -2
  82. package/utils/create-filter-component-props.js +1 -2
  83. package/utils/merge-schema-with-config.js +1 -2
  84. package/utils.js +4 -4
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.DataGridTableV2 = exports.TableV2 = void 0;
6
+ exports.DataGridTableV2 = void 0;
7
+ exports.TableV2 = TableV2;
7
8
  const show_1 = require("@uxf/core-react/components/show");
8
9
  const is_nil_1 = require("@uxf/core/utils/is-nil");
9
10
  const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
@@ -30,12 +31,14 @@ function TableV2(props) {
30
31
  const gridTemplateColumns = (0, is_nil_1.isNil)((_d = props.actionCell) === null || _d === void 0 ? void 0 : _d.width)
31
32
  ? gridTemplateColumnsWithoutAction
32
33
  : `${gridTemplateColumnsWithoutAction} ${(0, rem_1.rem)(props.actionCell.width)}`;
33
- return (react_1.default.createElement(components_1.Table, { ref: tableRef, gridTemplateColumns: gridTemplateColumns, gridTemplateRows: gridTemplateRows },
34
+ return (react_1.default.createElement(components_1.Table, { gridTemplateColumns: gridTemplateColumns, gridTemplateRows: gridTemplateRows, ref: tableRef },
34
35
  react_1.default.createElement(components_1.Table.Header, null,
35
36
  react_1.default.createElement(components_1.Table.Row, null,
36
37
  visibleColumns.map((column, index) => {
37
38
  var _a;
38
- return (react_1.default.createElement(components_1.Table.HeaderCell, { key: column.name, ref: (el) => (columnRefs.current[index] = el), column: column, onResizeStart: () => onResizeStart(index), sort: ((_a = props.state.request.s) === null || _a === void 0 ? void 0 : _a.name) === column.name ? props.state.request.s : null, onClick: column.sort ? () => props.actions.sort(column.name) : undefined }));
39
+ return (react_1.default.createElement(components_1.Table.HeaderCell, { column: column, key: column.name, onClick: column.sort ? () => props.actions.sort(column.name) : undefined, onResizeStart: () => onResizeStart(index), ref: (el) => {
40
+ columnRefs.current[index] = el;
41
+ }, sort: ((_a = props.state.request.s) === null || _a === void 0 ? void 0 : _a.name) === column.name ? props.state.request.s : null }));
39
42
  }),
40
43
  react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.actionCell) },
41
44
  react_1.default.createElement(components_1.Table.HeaderActionCell, null)))),
@@ -45,11 +48,10 @@ function TableV2(props) {
45
48
  const BodyCell =
46
49
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
47
50
  (_d = (_b = (_a = props.bodyCells) === null || _a === void 0 ? void 0 : _a[column.type]) !== null && _b !== void 0 ? _b : (_c = props.bodyCells) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : DefaultBodyCell;
48
- return (react_1.default.createElement(components_1.Table.Cell, { key: column.name, column: column },
49
- react_1.default.createElement(BodyCell, { column: column, row: row, value: row[column.name], reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } })));
51
+ return (react_1.default.createElement(components_1.Table.Cell, { column: column, key: column.name },
52
+ react_1.default.createElement(BodyCell, { column: column, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); }, row: row, value: row[column.name] })));
50
53
  }),
51
54
  (0, is_not_nil_1.isNotNil)(props.actionCell) && (react_1.default.createElement(components_1.Table.ActionCell, null,
52
- react_1.default.createElement(props.actionCell.Component, { row: row, reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); } })))))))));
55
+ react_1.default.createElement(props.actionCell.Component, { reload: () => { var _a; return (_a = props.onReload) === null || _a === void 0 ? void 0 : _a.call(props); }, row: row })))))))));
53
56
  }
54
- exports.TableV2 = TableV2;
55
57
  exports.DataGridTableV2 = TableV2;
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
6
+ exports.Default = Default;
7
7
  const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const data_1 = require("../_story-utils/data");
@@ -15,8 +15,7 @@ const table_v2_1 = require("./table-v2");
15
15
  function Default() {
16
16
  const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema, isDebug: true });
17
17
  return (react_1.default.createElement(react_1.default.Fragment, null,
18
- react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { schema: schema_1.schema, state: state, actions: actions }),
19
- react_1.default.createElement(table_v2_1.DataGridTableV2, { state: state, actions: actions, data: data_1.data, isLoading: true, error: undefined, schema: schema_1.schema, bodyCells: body_cell_1.BodyCells, isRowSelectable: true, actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") } }),
18
+ react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: actions, schema: schema_1.schema, state: state }),
19
+ react_1.default.createElement(table_v2_1.DataGridTableV2, { actionCell: { width: 150, Component: () => react_1.default.createElement("div", null, "ActionCell") }, actions: actions, bodyCells: body_cell_1.BodyCells, data: data_1.data, error: undefined, isLoading: true, isRowSelectable: true, schema: schema_1.schema, state: state }),
20
20
  react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
21
21
  }
22
- exports.Default = Default;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getGridTemplateRows = void 0;
3
+ exports.getGridTemplateRows = getGridTemplateRows;
4
4
  const is_nil_1 = require("@uxf/core/utils/is-nil");
5
5
  const rem_1 = require("@uxf/styles/units/rem");
6
6
  function getGridTemplateRows(rows, headerRowHeight, rowHeight) {
@@ -12,4 +12,3 @@ function getGridTemplateRows(rows, headerRowHeight, rowHeight) {
12
12
  }
13
13
  return `${headerRowHeight} ${rows.map(rowHeight).join(" ")}`;
14
14
  }
15
- exports.getGridTemplateRows = getGridTemplateRows;
@@ -3,11 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.DataGridToolbar = void 0;
6
+ exports.DataGridToolbar = DataGridToolbar;
7
7
  const cx_1 = require("@uxf/core/utils/cx");
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const classes_1 = require("../utils/classes");
10
10
  function DataGridToolbar(props) {
11
11
  return react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-data-grid__toolbar", props.noBorder && classes_1.NO_BORDER_CLASS) }, props.children);
12
12
  }
13
- exports.DataGridToolbar = DataGridToolbar;
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.DataGridToolbarControl = exports.ToolbarControl = void 0;
6
+ exports.DataGridToolbarControl = void 0;
7
+ exports.ToolbarControl = ToolbarControl;
7
8
  const hide_1 = require("@uxf/core-react/components/hide");
8
9
  const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
9
10
  const react_1 = __importDefault(require("react"));
@@ -15,10 +16,9 @@ const hidden_columns_button_1 = require("../hidden-columns-button");
15
16
  function ToolbarControl(props) {
16
17
  return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-control" },
17
18
  react_1.default.createElement(hide_1.Hide, { when: !props.schema.fullText },
18
- react_1.default.createElement(fulltext_input_1.DataGridFulltextInput, { state: props.state, actions: props.actions })),
19
- (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.DataGridExportButton, { state: props.state, actions: props.actions, schema: props.schema, onCsvDownload: props.onCsvDownload })),
20
- react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { state: props.state, actions: props.actions, schema: props.schema }),
21
- react_1.default.createElement(filters_button_1.DataGridFiltersButton, { state: props.state, actions: props.actions, schema: props.schema, filterHandlers: props.filterHandlers })));
19
+ react_1.default.createElement(fulltext_input_1.DataGridFulltextInput, { actions: props.actions, state: props.state })),
20
+ (0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.DataGridExportButton, { actions: props.actions, onCsvDownload: props.onCsvDownload, schema: props.schema, state: props.state })),
21
+ react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, { actions: props.actions, schema: props.schema, state: props.state }),
22
+ react_1.default.createElement(filters_button_1.DataGridFiltersButton, { actions: props.actions, filterHandlers: props.filterHandlers, schema: props.schema, state: props.state })));
22
23
  }
23
- exports.ToolbarControl = ToolbarControl;
24
24
  exports.DataGridToolbarControl = ToolbarControl;
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
6
+ exports.Default = Default;
7
7
  const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const schema_1 = require("../_story-utils/schema");
@@ -14,7 +14,6 @@ function Default() {
14
14
  const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
15
15
  return (react_1.default.createElement(react_1.default.Fragment, null,
16
16
  react_1.default.createElement("div", { className: "flex flex-row" },
17
- react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { state: state, actions: actions, schema: schema_1.schema, filterHandlers: filter_handler_1.defaultFilterHandlers, onCsvDownload: console.log })),
17
+ react_1.default.createElement(toolbar_control_1.DataGridToolbarControl, { actions: actions, filterHandlers: filter_handler_1.defaultFilterHandlers, onCsvDownload: console.log, schema: schema_1.schema, state: state })),
18
18
  react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
19
19
  }
20
- exports.Default = Default;
@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.DataGridToolbarCustoms = exports.ToolbarCustoms = void 0;
6
+ exports.DataGridToolbarCustoms = void 0;
7
+ exports.ToolbarCustoms = ToolbarCustoms;
8
+ const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
7
9
  const button_1 = require("@uxf/ui/button");
8
10
  const button_list_1 = require("@uxf/ui/button-list");
9
11
  const react_1 = __importDefault(require("react"));
@@ -12,9 +14,9 @@ function ToolbarCustoms(props) {
12
14
  if (!props.buttons) {
13
15
  return null;
14
16
  }
17
+ const firstButton = props.buttons.at(0);
15
18
  return (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs" },
16
- react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-mobile" }, props.buttons.length === 1 ? (react_1.default.createElement(button_1.Button, { href: props.buttons[0].href, onClick: props.buttons[0].onClick, size: "sm", variant: props.buttons[0].variant }, props.buttons[0].label)) : (react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, visibleButtonsCount: 1, size: "sm", openButton: { variant: "secondary" } }))),
17
- react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-desktop" }, props.buttons.map((button, index) => (react_1.default.createElement(button_1.Button, { key: index, href: button.href, onClick: button.onClick, size: "sm", variant: button.variant }, button.label))))));
19
+ react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-mobile" }, (0, is_not_nil_1.isNotNil)(firstButton) ? (react_1.default.createElement(button_1.Button, { href: firstButton.href, onClick: firstButton.onClick, size: "sm", variant: firstButton.variant }, firstButton.label)) : (react_1.default.createElement(button_list_1.ButtonList, { buttons: props.buttons, openButton: { variant: "secondary" }, size: "sm", visibleButtonsCount: 1 }))),
20
+ react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-customs-desktop" }, props.buttons.map((button, index) => (react_1.default.createElement(button_1.Button, { href: button.href, key: index, onClick: button.onClick, size: "sm", variant: button.variant }, button.label))))));
18
21
  }
19
- exports.ToolbarCustoms = ToolbarCustoms;
20
22
  exports.DataGridToolbarCustoms = ToolbarCustoms;
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
6
+ exports.Default = Default;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const toolbar_customs_1 = require("./toolbar-customs");
9
9
  function Default() {
@@ -13,4 +13,3 @@ function Default() {
13
13
  { label: "Outlined", href: "/", variant: "secondary" },
14
14
  ] }));
15
15
  }
16
- exports.Default = Default;
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.DataGridToolbarTabs = exports.ToolbarTabs = void 0;
6
+ exports.DataGridToolbarTabs = void 0;
7
+ exports.ToolbarTabs = ToolbarTabs;
7
8
  const show_1 = require("@uxf/core-react/components/show");
8
9
  const cx_1 = require("@uxf/core/utils/cx");
9
10
  const button_1 = require("@uxf/ui/button");
@@ -16,23 +17,22 @@ function Tab(props) {
16
17
  /** @deprecated Use DataGridToolbarTabs */
17
18
  function ToolbarTabs(props) {
18
19
  var _a, _b, _c, _d;
19
- return (react_1.default.createElement(show_1.Show, { when: !!((_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.length) },
20
+ return (react_1.default.createElement(show_1.Show, { when: Boolean((_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.length) },
20
21
  react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs" },
21
- react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop", "aria-label": "Tabs" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { key: t.name, title: t.label, isActive: props.state.request.tab === t.name, onClick: () => props.actions.changeTab(t) })))),
22
+ react_1.default.createElement("nav", { "aria-label": "Tabs", className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--desktop" }, (_b = props.schema.tabs) === null || _b === void 0 ? void 0 : _b.map((t) => (react_1.default.createElement(Tab, { isActive: props.state.request.tab === t.name, key: t.name, onClick: () => props.actions.changeTab(t), title: t.label })))),
22
23
  react_1.default.createElement("nav", { className: "uxf-data-grid__toolbar-tabs-nav uxf-data-grid__toolbar-tabs-nav--mobile" },
23
- react_1.default.createElement(button_1.Button, { variant: "text", className: "uxf-data-grid__toolbar-tabs-button", size: "sm", onClick: () => {
24
+ react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-button", onClick: () => {
24
25
  var _a;
25
26
  return (0, modal_service_1.openModal)({
26
- children: (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs-modal-content" }, (_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.map((item) => (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-modal-button", key: item.name, variant: "text", size: "xl", onClick: () => {
27
+ children: (react_1.default.createElement("div", { className: "uxf-data-grid__toolbar-tabs-modal-content" }, (_a = props.schema.tabs) === null || _a === void 0 ? void 0 : _a.map((item) => (react_1.default.createElement(button_1.Button, { className: "uxf-data-grid__toolbar-tabs-modal-button", key: item.name, onClick: () => {
27
28
  props.actions.changeTab(item);
28
29
  (0, modal_service_1.closeModal)();
29
- } },
30
+ }, size: "xl", variant: "text" },
30
31
  item.name === props.state.request.tab && (react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-modal-active-tab-icon", name: "check", size: 20 })),
31
32
  react_1.default.createElement("span", { className: "uxf-data-grid__toolbar-tabs-modal-button-text" }, item.label)))))),
32
33
  });
33
- } },
34
+ }, size: "sm", variant: "text" },
34
35
  react_1.default.createElement("span", { className: "uxf-data-grid__toolbar-tabs-nav-text" }, (_d = (_c = props.schema.tabs) === null || _c === void 0 ? void 0 : _c.find((t) => t.name === props.state.request.tab)) === null || _d === void 0 ? void 0 : _d.label),
35
- react_1.default.createElement(icon_1.Icon, { name: "caretDown", className: "uxf-data-grid__toolbar-tabs-button-icon", size: 16 }))))));
36
+ react_1.default.createElement(icon_1.Icon, { className: "uxf-data-grid__toolbar-tabs-button-icon", name: "caretDown", size: 16 }))))));
36
37
  }
37
- exports.ToolbarTabs = ToolbarTabs;
38
38
  exports.DataGridToolbarTabs = ToolbarTabs;
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
6
+ exports.Default = Default;
7
7
  const json_renderer_1 = require("@uxf/example/src/components/json-renderer");
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const schema_1 = require("../_story-utils/schema");
@@ -12,7 +12,6 @@ const toolbar_tabs_1 = require("./toolbar-tabs");
12
12
  function Default() {
13
13
  const { state, actions } = (0, use_data_grid_control_1.useDataGridControl)({ schema: schema_1.schema });
14
14
  return (react_1.default.createElement(react_1.default.Fragment, null,
15
- react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { state: state, actions: actions, schema: schema_1.schema }),
15
+ react_1.default.createElement(toolbar_tabs_1.DataGridToolbarTabs, { actions: actions, schema: schema_1.schema, state: state }),
16
16
  react_1.default.createElement(json_renderer_1.JsonRenderer, { value: state })));
17
17
  }
18
- exports.Default = Default;
@@ -1,14 +1,14 @@
1
1
  import { ComponentType, FC } from "react";
2
2
  import { BaseGridType, Columns, Filter } from "./schema";
3
- export type DataGridActionCell<Row> = {
4
- width: number;
5
- Component: ActionCellComponent<Row>;
6
- };
7
3
  export interface ActionCellProps<R> {
8
4
  row: R;
9
5
  reload: () => void;
10
6
  }
11
7
  export type ActionCellComponent<R> = FC<ActionCellProps<R>>;
8
+ export type DataGridActionCell<Row> = {
9
+ width: number;
10
+ Component: ActionCellComponent<Row>;
11
+ };
12
12
  export interface BodyCellProps<C, R> {
13
13
  value: any;
14
14
  column: C;
package/types/schema.d.ts CHANGED
@@ -18,6 +18,11 @@ export type BaseGridType = {
18
18
  columns: any;
19
19
  filters: any;
20
20
  };
21
+ export type ColumnConfig = {
22
+ isHidden?: boolean;
23
+ width?: number;
24
+ minWidth?: number;
25
+ };
21
26
  export type Column<Name, Type> = {
22
27
  name: Name;
23
28
  label: string | ReactElement;
@@ -26,17 +31,12 @@ export type Column<Name, Type> = {
26
31
  hidden?: boolean;
27
32
  config?: ColumnConfig;
28
33
  };
29
- export type FilterConfig = {
30
- placeholder?: string;
31
- };
32
- export type ColumnConfig = {
33
- isHidden?: boolean;
34
- width?: number;
35
- minWidth?: number;
36
- };
37
34
  export type Columns<C extends BaseGridType["columns"]> = {
38
35
  [K in keyof C]: Column<K, C[K]>;
39
36
  }[keyof C];
37
+ export type FilterConfig = {
38
+ placeholder?: string;
39
+ };
40
40
  export interface FilterOption {
41
41
  id: string | number;
42
42
  label: string;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.createActions = void 0;
3
+ exports.createActions = createActions;
4
4
  function createActions(dispatch) {
5
5
  return {
6
6
  changePage: (page) => dispatch({ type: "CHANGE_PAGE", page }),
@@ -18,4 +18,3 @@ function createActions(dispatch) {
18
18
  updateUserConfig: (userConfig) => dispatch({ type: "UPDATE_USER_CONFIG", userConfig }),
19
19
  };
20
20
  }
21
- exports.createActions = createActions;
@@ -13,7 +13,7 @@ export declare function useDataGridControl<T extends BaseGridType>(config: UseDa
13
13
  actions: {
14
14
  changePage: (page: number) => void;
15
15
  changePerPage: (perPage: number) => void;
16
- filter: (name: string, value: any, op?: string | undefined) => void;
16
+ filter: (name: string, value: any, op?: string) => void;
17
17
  filterClear: (name: string) => void;
18
18
  filterClearAll: () => void;
19
19
  sort: (columnName: string, direction?: string | null) => void;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useDataGridControl = void 0;
3
+ exports.useDataGridControl = useDataGridControl;
4
4
  const react_1 = require("react");
5
5
  const reducer_1 = require("../_store/reducer");
6
6
  const actions_factory_1 = require("./actions-factory");
@@ -9,4 +9,3 @@ function useDataGridControl(config) {
9
9
  const actions = (0, react_1.useMemo)(() => (0, actions_factory_1.createActions)(dispatch), [dispatch]);
10
10
  return { state, actions };
11
11
  }
12
- exports.useDataGridControl = useDataGridControl;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useDataGridFetching = void 0;
3
+ exports.useDataGridFetching = useDataGridFetching;
4
4
  const react_1 = require("react");
5
5
  const utils_1 = require("../utils");
6
6
  const loader_1 = require("./loader");
@@ -38,4 +38,3 @@ function useDataGridFetching(config) {
38
38
  onReload: reload,
39
39
  };
40
40
  }
41
- exports.useDataGridFetching = useDataGridFetching;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.createFilterComponentProps = void 0;
3
+ exports.createFilterComponentProps = createFilterComponentProps;
4
4
  const is_nil_1 = require("@uxf/core/utils/is-nil");
5
5
  function createFilterComponentProps(gridName, filter, state, actions) {
6
6
  const requestFilter = state.request.f.find((f) => f.name === filter.name);
@@ -13,4 +13,3 @@ function createFilterComponentProps(gridName, filter, state, actions) {
13
13
  onClear: () => actions.filterClear(filter.name),
14
14
  };
15
15
  }
16
- exports.createFilterComponentProps = createFilterComponentProps;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.mergeSchemaWithConfig = void 0;
3
+ exports.mergeSchemaWithConfig = mergeSchemaWithConfig;
4
4
  function mergeSchemaWithConfig(schema, frontendConfig) {
5
5
  var _a;
6
6
  return {
@@ -28,4 +28,3 @@ function mergeSchemaWithConfig(schema, frontendConfig) {
28
28
  }),
29
29
  };
30
30
  }
31
- exports.mergeSchemaWithConfig = mergeSchemaWithConfig;
package/utils.js CHANGED
@@ -1,6 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.createRequest = exports.encodeFilter = exports.decodeFilter = void 0;
3
+ exports.decodeFilter = decodeFilter;
4
+ exports.encodeFilter = encodeFilter;
5
+ exports.createRequest = createRequest;
4
6
  function decodeFilter(filterString) {
5
7
  var _a, _b;
6
8
  try {
@@ -13,16 +15,15 @@ function decodeFilter(filterString) {
13
15
  tab: (_a = filter.tab) !== null && _a !== void 0 ? _a : null,
14
16
  search: (_b = filter.search) !== null && _b !== void 0 ? _b : "",
15
17
  };
18
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
16
19
  }
17
20
  catch (e) {
18
21
  return null;
19
22
  }
20
23
  }
21
- exports.decodeFilter = decodeFilter;
22
24
  function encodeFilter(request) {
23
25
  return btoa(unescape(encodeURIComponent(JSON.stringify(request))));
24
26
  }
25
- exports.encodeFilter = encodeFilter;
26
27
  function createRequest(request) {
27
28
  return {
28
29
  perPage: request.perPage,
@@ -33,4 +34,3 @@ function createRequest(request) {
33
34
  tab: request.tab,
34
35
  };
35
36
  }
36
- exports.createRequest = createRequest;