@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.
- package/_api/index.js +2 -3
- package/_components/drawer.js +1 -1
- package/_store/reducer.js +7 -7
- package/body-cell/body-cell-boolean.js +2 -1
- package/body-cell/body-cell-url.js +1 -1
- package/data-grid-custom-example.stories.js +5 -5
- package/data-grid.js +10 -10
- package/data-grid.stories.js +3 -4
- package/export-button/export-button.js +3 -3
- package/export-button/export-button.stories.js +2 -3
- package/filter-handler/boolean-select.js +2 -2
- package/filter-handler/checkbox.js +1 -1
- package/filter-handler/date.js +2 -2
- package/filter-handler/datetime.js +2 -2
- package/filter-handler/entity-multi-select.js +1 -1
- package/filter-handler/entity-select.js +1 -1
- package/filter-handler/interval.js +1 -1
- package/filter-handler/multi-select.js +2 -1
- package/filter-handler/select.js +2 -1
- package/filter-handler/string.js +1 -1
- package/filter-list/filter-list.js +5 -4
- package/filter-list/filter-list.stories.js +2 -3
- package/filters/filters.js +2 -2
- package/filters/filters.stories.js +2 -3
- package/filters-button/filters-button.js +5 -5
- package/filters-button/filters-button.stories.js +2 -3
- package/footer/footer.js +1 -2
- package/fulltext-input/fulltext-input.js +3 -3
- package/fulltext-input/fulltext-input.stories.js +2 -3
- package/hidden-columns/hidden-columns.js +4 -8
- package/hidden-columns/hidden-columns.stories.js +2 -3
- package/hidden-columns-button/hidden-columns-button.js +5 -5
- package/hidden-columns-button/hidden-columns-button.stories.js +2 -3
- package/hooks/useCallbackRef.d.ts +0 -1
- package/linear-progress/linear-progress.js +2 -2
- package/package.json +10 -10
- package/pagination/pagination.js +2 -2
- package/pagination/pagination.stories.js +2 -3
- package/root/root.js +1 -2
- package/row-counts/row-counts.js +2 -2
- package/row-counts/row-counts.stories.js +2 -3
- package/rows-per-page-select/rows-per-page-select.js +3 -3
- package/rows-per-page-select/rows-per-page-select.stories.js +2 -3
- package/selected-rows-toolbar/selected-rows-toolbar.js +3 -3
- package/selected-rows-toolbar/selected-rows-toolbar.stories.js +3 -4
- package/table/components/action-cell-wrapper.js +1 -2
- package/table/components/action-cell.js +2 -3
- package/table/components/select-row-checkbox.js +2 -3
- package/table/hooks/use-rdg-visuals.d.ts +0 -1
- package/table/hooks/use-rdg-visuals.js +1 -2
- package/table/hooks/use-react-data-grid-columns.js +2 -3
- package/table/no-rows-fallback.js +1 -2
- package/table/table.js +10 -7
- package/table/table.stories.js +2 -3
- package/table-v2/components/action-cell.js +1 -2
- package/table-v2/components/body.js +1 -2
- package/table-v2/components/cell.js +1 -2
- package/table-v2/components/header-action-cell.js +1 -2
- package/table-v2/components/header-cell.js +3 -3
- package/table-v2/components/header.js +1 -2
- package/table-v2/components/index.d.ts +0 -1
- package/table-v2/components/row.js +1 -2
- package/table-v2/hooks/use-resizable-columns.d.ts +0 -1
- package/table-v2/hooks/use-resizable-columns.js +1 -2
- package/table-v2/no-rows-fallback.js +1 -2
- package/table-v2/table-v2.js +9 -7
- package/table-v2/table-v2.stories.js +3 -4
- package/table-v2/utils/get-grid-template-rows.js +1 -2
- package/toolbar/toolbar.js +1 -2
- package/toolbar-control/toolbar-control.js +6 -6
- package/toolbar-control/toolbar-control.stories.js +2 -3
- package/toolbar-customs/toolbar-customs.js +6 -4
- package/toolbar-customs/toolbar-customs.stories.js +1 -2
- package/toolbar-tabs/toolbar-tabs.js +9 -9
- package/toolbar-tabs/toolbar-tabs.stories.js +2 -3
- package/types/components.d.ts +4 -4
- package/types/schema.d.ts +8 -8
- package/use-data-grid-control/actions-factory.js +1 -2
- package/use-data-grid-control/use-data-grid-control.d.ts +1 -1
- package/use-data-grid-control/use-data-grid-control.js +1 -2
- package/use-data-grid-fetching/use-data-grid-fetching.js +1 -2
- package/utils/create-filter-component-props.js +1 -2
- package/utils/merge-schema-with-config.js +1 -2
- package/utils.js +4 -4
package/table-v2/table-v2.js
CHANGED
|
@@ -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 =
|
|
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, {
|
|
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,
|
|
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, {
|
|
49
|
-
react_1.default.createElement(BodyCell, { column: column,
|
|
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, {
|
|
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 =
|
|
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
|
|
19
|
-
react_1.default.createElement(table_v2_1.DataGridTableV2, {
|
|
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 =
|
|
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;
|
package/toolbar/toolbar.js
CHANGED
|
@@ -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 =
|
|
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 =
|
|
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, {
|
|
19
|
-
(0, is_not_nil_1.isNotNil)(props.onCsvDownload) && (react_1.default.createElement(export_button_1.DataGridExportButton, {
|
|
20
|
-
react_1.default.createElement(hidden_columns_button_1.DataGridHiddenColumnsButton, {
|
|
21
|
-
react_1.default.createElement(filters_button_1.DataGridFiltersButton, {
|
|
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 =
|
|
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, {
|
|
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 =
|
|
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" },
|
|
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, {
|
|
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 =
|
|
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 =
|
|
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:
|
|
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"
|
|
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, {
|
|
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,
|
|
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, {
|
|
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 =
|
|
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, {
|
|
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;
|
package/types/components.d.ts
CHANGED
|
@@ -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 =
|
|
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
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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.
|
|
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;
|