fuse-importer 0.25.1 → 0.25.2
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/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterDropzone.js +7 -2
- package/lib/esm/Importer/common/Spreadsheet/styles.d.ts +1 -1
- package/lib/esm/Importer/contexts/ImporterContextProvider.js +6 -4
- package/lib/esm/common/Table/TableView/TableCells.d.ts +4 -0
- package/lib/esm/common/Table/TableView/TableCells.js +39 -0
- package/lib/esm/common/Table/TableView/index.d.ts +2 -1
- package/lib/esm/common/Table/TableView/index.js +5 -10
- package/lib/esm/common/Table/index.d.ts +3 -1
- package/lib/esm/common/Table/index.js +94 -3
- package/lib/esm/common/Table/useReorderRows.d.ts +4 -0
- package/lib/esm/common/Table/useReorderRows.js +83 -0
- package/lib/main.js +5 -5
- package/package.json +4 -1
|
@@ -71,9 +71,14 @@ var ImporterDropzone = function () {
|
|
|
71
71
|
return XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
|
|
72
72
|
};
|
|
73
73
|
var fileData = getDataFromFile(results);
|
|
74
|
-
var
|
|
74
|
+
var filteredArray = fileData
|
|
75
|
+
.map(function (subArray) {
|
|
76
|
+
return subArray.filter(function (value) { return value || value === 0 || value === false; });
|
|
77
|
+
})
|
|
78
|
+
.filter(function (subArray) { return subArray.length > 0; });
|
|
79
|
+
var headersCount = filteredArray[0].length;
|
|
75
80
|
if (validHeadersCount(headersCount)) {
|
|
76
|
-
setUploadedData(
|
|
81
|
+
setUploadedData(filteredArray);
|
|
77
82
|
}
|
|
78
83
|
setIsUploading(false);
|
|
79
84
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const SpreadSheetData: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
|
|
3
3
|
export declare const SpreadSheetWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled/utils").CSSProps, never>;
|
|
4
|
-
export declare const TableView: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const TableView: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, ...props }: import("../../../common/Table/TableView").TableViewProps) => JSX.Element>, import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -80,10 +80,12 @@ export var ImporterContextProvider = function (_a) {
|
|
|
80
80
|
apiToken,
|
|
81
81
|
]);
|
|
82
82
|
var uploadedDataHeaders = useMemo(function () {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
var _a;
|
|
84
|
+
var initialParsing = (_a = uploadedData === null || uploadedData === void 0 ? void 0 : uploadedData[0]) === null || _a === void 0 ? void 0 : _a.map(function (ud) {
|
|
85
|
+
return typeof ud === "number" ? ud.toString() : ud;
|
|
86
|
+
});
|
|
87
|
+
var onlyValidValues = initialParsing === null || initialParsing === void 0 ? void 0 : initialParsing.filter(function (val) { return val; });
|
|
88
|
+
return (onlyValidValues === null || onlyValidValues === void 0 ? void 0 : onlyValidValues.length) ? onlyValidValues : [];
|
|
87
89
|
}, [uploadedData]);
|
|
88
90
|
useEffect(function () {
|
|
89
91
|
if (!templateHeaderMatchings)
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { CSS } from "@dnd-kit/utilities";
|
|
14
|
+
import { useSortable } from "@dnd-kit/sortable";
|
|
15
|
+
import { Div } from "../../../styled/utils";
|
|
16
|
+
import { TableRow } from "./TableRow";
|
|
17
|
+
import React from "react";
|
|
18
|
+
import { areEqual } from "react-window";
|
|
19
|
+
var Cell = React.memo(function (_a) {
|
|
20
|
+
var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
|
|
21
|
+
var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
|
|
22
|
+
var item = items[rowIndex];
|
|
23
|
+
return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey }) })));
|
|
24
|
+
}, areEqual);
|
|
25
|
+
var DraggableCell = React.memo(function (_a) {
|
|
26
|
+
var data = _a.data, rowIndex = _a.rowIndex, baseStyle = _a.style;
|
|
27
|
+
var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
|
|
28
|
+
var item = items[rowIndex];
|
|
29
|
+
var _b = useSortable({
|
|
30
|
+
id: item.id,
|
|
31
|
+
}), listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform;
|
|
32
|
+
var dragAndDropStyles = {
|
|
33
|
+
transform: CSS.Transform.toString(transform),
|
|
34
|
+
};
|
|
35
|
+
var dragAndDropHandler = __assign({}, listeners);
|
|
36
|
+
item.dragAndDropHandler = dragAndDropHandler;
|
|
37
|
+
return (_jsx(Div, __assign({ style: __assign(__assign({}, baseStyle), dragAndDropStyles), ref: setNodeRef }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey }) })));
|
|
38
|
+
}, areEqual);
|
|
39
|
+
export { Cell, DraggableCell };
|
|
@@ -37,5 +37,6 @@ export type TableViewProps = {
|
|
|
37
37
|
onTableScroll?: (scrollTop: number) => void;
|
|
38
38
|
onRowClick?: (row: any) => void;
|
|
39
39
|
getItemKey?: (row: any) => string;
|
|
40
|
+
shouldBeDraggable?: boolean;
|
|
40
41
|
} & DivCSSProps;
|
|
41
|
-
export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, ...props }: TableViewProps) => JSX.Element>;
|
|
42
|
+
export declare const TableView: React.MemoExoticComponent<({ data, columns, pageSize, onRowClick, sortBy, isLoading, highlightFirstRow, setSortBy, rowWidth, onSectionRendered, tableHeadersHeight, rowHeight, h, onTableScroll, getItemKey, shouldBeDraggable, ...props }: TableViewProps) => JSX.Element>;
|
|
@@ -24,16 +24,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
24
24
|
}
|
|
25
25
|
return t;
|
|
26
26
|
};
|
|
27
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
28
|
import React, { useRef, useMemo, useCallback } from "react";
|
|
29
29
|
import { FixedSizeGrid as Grid, areEqual } from "react-window";
|
|
30
30
|
import AutoSizer from "react-virtualized-auto-sizer";
|
|
31
31
|
import styled, { css } from "styled-components";
|
|
32
|
+
import { SortableContext, verticalListSortingStrategy, } from "@dnd-kit/sortable";
|
|
32
33
|
import { Div } from "../../../styled/utils";
|
|
33
34
|
import { Spinner } from "../../Spinner";
|
|
34
35
|
import { defaultTableRowHeightPx, defaultTableHeaderHeightPx } from "./common";
|
|
35
36
|
import { TableHeaders } from "./TableHeaders";
|
|
36
|
-
import {
|
|
37
|
+
import { Cell, DraggableCell } from "./TableCells";
|
|
37
38
|
export * from "./common";
|
|
38
39
|
export * from "./TableHeaders";
|
|
39
40
|
export * from "./TableRow";
|
|
@@ -56,14 +57,8 @@ var buildGridStyles = function (rowWidth) {
|
|
|
56
57
|
gridStyles = __assign(__assign({}, gridStyles), { overflowX: "scroll" });
|
|
57
58
|
return gridStyles;
|
|
58
59
|
};
|
|
59
|
-
var Cell = React.memo(function (_a) {
|
|
60
|
-
var data = _a.data, rowIndex = _a.rowIndex, style = _a.style;
|
|
61
|
-
var items = data.items, onRowClick = data.onRowClick, columns = data.columns, highlightFirstRow = data.highlightFirstRow, rowHeight = data.rowHeight, getItemKey = data.getItemKey;
|
|
62
|
-
var item = items[rowIndex];
|
|
63
|
-
return (_jsx(Div, __assign({ style: style }, { children: _jsx(TableRow, { columns: columns, onRowClick: onRowClick, highlightFirstRow: highlightFirstRow, h: rowHeight, row: item, indexI: rowIndex, isLast: rowIndex === items.length - 1, pRelative: true, getItemKey: getItemKey }) })));
|
|
64
|
-
}, areEqual);
|
|
65
60
|
export var TableView = React.memo(function (_a) {
|
|
66
|
-
var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey"]);
|
|
61
|
+
var data = _a.data, columns = _a.columns, pageSize = _a.pageSize, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.sortBy, sortBy = _c === void 0 ? { field: null, direction: null } : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.highlightFirstRow, highlightFirstRow = _e === void 0 ? false : _e, _f = _a.setSortBy, setSortBy = _f === void 0 ? null : _f, _g = _a.rowWidth, rowWidth = _g === void 0 ? 1 : _g, onSectionRendered = _a.onSectionRendered, _h = _a.tableHeadersHeight, tableHeadersHeight = _h === void 0 ? defaultTableHeaderHeightPx : _h, _j = _a.rowHeight, rowHeight = _j === void 0 ? defaultTableRowHeightPx : _j, _k = _a.h, h = _k === void 0 ? 500 : _k, _l = _a.onTableScroll, onTableScroll = _l === void 0 ? null : _l, _m = _a.getItemKey, getItemKey = _m === void 0 ? null : _m, _o = _a.shouldBeDraggable, shouldBeDraggable = _o === void 0 ? false : _o, props = __rest(_a, ["data", "columns", "pageSize", "onRowClick", "sortBy", "isLoading", "highlightFirstRow", "setSortBy", "rowWidth", "onSectionRendered", "tableHeadersHeight", "rowHeight", "h", "onTableScroll", "getItemKey", "shouldBeDraggable"]);
|
|
67
62
|
/*
|
|
68
63
|
multiply the rowWidth by 0.95 to let the user know they can scroll
|
|
69
64
|
horizontally (will display partial column on the right)
|
|
@@ -104,7 +99,7 @@ export var TableView = React.memo(function (_a) {
|
|
|
104
99
|
}); }, [data, onRowClick, columns, highlightFirstRow, rowHeight]);
|
|
105
100
|
return (_jsxs(TableViewWrapper, __assign({ "data-test-id": "table-view-wrapper", isLoading: isLoading, h: tableHeight }, props, { children: [tableHeadersUI, loadingUI, _jsx(AutoSizer, { children: function (_a) {
|
|
106
101
|
var width = _a.width, height = _a.height;
|
|
107
|
-
return (_jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })));
|
|
102
|
+
return (_jsxs(_Fragment, { children: [shouldBeDraggable && (_jsx(SortableContext, __assign({ items: data, strategy: verticalListSortingStrategy }, { children: _jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: DraggableCell })) }))), !shouldBeDraggable && (_jsx(Grid, __assign({ style: buildGridStyles(_rowWidth), width: width, columnCount: 1, itemData: itemData, onItemsRendered: onItemsRendered, onScroll: onScroll, columnWidth: Math.floor(width * _rowWidth), height: height - tableHeadersHeight, rowHeight: rowHeight, rowCount: data.length }, { children: Cell })))] }));
|
|
108
103
|
} })] })));
|
|
109
104
|
}, areEqual);
|
|
110
105
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -3,7 +3,9 @@ type Props = {
|
|
|
3
3
|
blankState?: JSX.Element | null;
|
|
4
4
|
columns: any[];
|
|
5
5
|
onRowClick?: (row: any) => void;
|
|
6
|
+
templateSlug?: string;
|
|
7
|
+
shouldBeDraggable?: boolean;
|
|
6
8
|
} & DivCSSProps;
|
|
7
|
-
declare const Table: ({ columns, onRowClick, blankState, ...props }: Props) => JSX.Element;
|
|
9
|
+
declare const Table: ({ columns, onRowClick, blankState, templateSlug, shouldBeDraggable, ...props }: Props) => JSX.Element;
|
|
8
10
|
export { Table };
|
|
9
11
|
export * from "./TableDataProvider";
|
|
@@ -13,6 +13,42 @@ var __assign = (this && this.__assign) || function () {
|
|
|
13
13
|
};
|
|
14
14
|
return __assign.apply(this, arguments);
|
|
15
15
|
};
|
|
16
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
17
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
18
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
19
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
20
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
21
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
22
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
26
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
27
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
28
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
29
|
+
function step(op) {
|
|
30
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
31
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
32
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
33
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
34
|
+
switch (op[0]) {
|
|
35
|
+
case 0: case 1: t = op; break;
|
|
36
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
37
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
38
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
39
|
+
default:
|
|
40
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
41
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
42
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
43
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
44
|
+
if (t[2]) _.ops.pop();
|
|
45
|
+
_.trys.pop(); continue;
|
|
46
|
+
}
|
|
47
|
+
op = body.call(thisArg, _);
|
|
48
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
49
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
50
|
+
}
|
|
51
|
+
};
|
|
16
52
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
17
53
|
var t = {};
|
|
18
54
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -26,19 +62,74 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
26
62
|
};
|
|
27
63
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
64
|
import styled, { css } from "styled-components";
|
|
65
|
+
import { DndContext, useSensors, useSensor, PointerSensor, KeyboardSensor, closestCenter, } from "@dnd-kit/core";
|
|
66
|
+
import { restrictToVerticalAxis, restrictToWindowEdges, } from "@dnd-kit/modifiers";
|
|
67
|
+
import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
|
|
29
68
|
import { Div } from "../../styled/utils";
|
|
30
69
|
import { Pagination } from "./Pagination";
|
|
31
70
|
import { useTableContext } from "./TableDataProvider";
|
|
32
71
|
import { TableView as TableViewBase } from "./TableView";
|
|
72
|
+
import { useReorderRows } from "./useReorderRows";
|
|
73
|
+
import { addToast } from "../../common/Toast";
|
|
33
74
|
var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
|
|
34
75
|
return p.withPagination && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 0px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n "], ["\n border-radius: 0px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n "])));
|
|
35
76
|
});
|
|
36
77
|
var Table = function (_a) {
|
|
37
|
-
var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, props = __rest(_a, ["columns", "onRowClick", "blankState"]);
|
|
38
|
-
var
|
|
78
|
+
var columns = _a.columns, _b = _a.onRowClick, onRowClick = _b === void 0 ? null : _b, _c = _a.blankState, blankState = _c === void 0 ? null : _c, templateSlug = _a.templateSlug, _d = _a.shouldBeDraggable, shouldBeDraggable = _d === void 0 ? false : _d, props = __rest(_a, ["columns", "onRowClick", "blankState", "templateSlug", "shouldBeDraggable"]);
|
|
79
|
+
var _e = useTableContext(), data = _e.data, isLoading = _e.isLoading, sortBy = _e.sortBy, setSortBy = _e.setSortBy, totalPages = _e.totalPages;
|
|
80
|
+
var reorderRows = useReorderRows(templateSlug).reorderRows;
|
|
39
81
|
var withPagination = data.length > 0 && totalPages > 1;
|
|
82
|
+
var sensors = useSensors(useSensor(PointerSensor, {
|
|
83
|
+
activationConstraint: {
|
|
84
|
+
distance: 8,
|
|
85
|
+
},
|
|
86
|
+
}), useSensor(KeyboardSensor, {
|
|
87
|
+
coordinateGetter: sortableKeyboardCoordinates,
|
|
88
|
+
}));
|
|
40
89
|
var paginationUI = (_jsx(_Fragment, { children: withPagination && (_jsx(Div, __assign({ dflex: true, justifyCenter: true, pb: 50 }, { children: _jsx(Pagination, {}) }))) }));
|
|
41
|
-
|
|
90
|
+
var handleDragEnd = function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
|
91
|
+
var active, over, overIndex, overIndexIsFalsyButNotZero, error_1;
|
|
92
|
+
var _a, _b, _c;
|
|
93
|
+
return __generator(this, function (_d) {
|
|
94
|
+
switch (_d.label) {
|
|
95
|
+
case 0:
|
|
96
|
+
active = event.active, over = event.over;
|
|
97
|
+
overIndex = (_c = (_b = (_a = over === null || over === void 0 ? void 0 : over.data) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.sortable) === null || _c === void 0 ? void 0 : _c.index;
|
|
98
|
+
overIndexIsFalsyButNotZero = !overIndex && overIndex !== 0;
|
|
99
|
+
if (!(active === null || active === void 0 ? void 0 : active.id) || overIndexIsFalsyButNotZero || active.id === over.id) {
|
|
100
|
+
return [2 /*return*/];
|
|
101
|
+
}
|
|
102
|
+
_d.label = 1;
|
|
103
|
+
case 1:
|
|
104
|
+
_d.trys.push([1, 3, , 4]);
|
|
105
|
+
return [4 /*yield*/, reorderRows(active.id, overIndex + 1)];
|
|
106
|
+
case 2:
|
|
107
|
+
_d.sent();
|
|
108
|
+
return [3 /*break*/, 4];
|
|
109
|
+
case 3:
|
|
110
|
+
error_1 = _d.sent();
|
|
111
|
+
addToast("Failed to reorder rows", "error");
|
|
112
|
+
return [3 /*break*/, 4];
|
|
113
|
+
case 4: return [2 /*return*/];
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
}); };
|
|
117
|
+
var dndContextValues = {
|
|
118
|
+
sensors: shouldBeDraggable ? sensors : undefined,
|
|
119
|
+
collisionDetection: shouldBeDraggable ? closestCenter : undefined,
|
|
120
|
+
onDragEnd: shouldBeDraggable ? handleDragEnd : undefined,
|
|
121
|
+
modifiers: shouldBeDraggable
|
|
122
|
+
? [restrictToVerticalAxis, restrictToWindowEdges]
|
|
123
|
+
: undefined,
|
|
124
|
+
};
|
|
125
|
+
return (_jsxs(Div, __assign({}, props, { children: [data.length ? (_jsx(DndContext, __assign({ sensors: dndContextValues.sensors, collisionDetection: dndContextValues.collisionDetection, onDragEnd: dndContextValues.onDragEnd, modifiers: dndContextValues.modifiers }, { children: _jsx(TableView, __assign({ pageSize: data.length, withPagination: withPagination, shouldBeDraggable: shouldBeDraggable }, {
|
|
126
|
+
isLoading: isLoading,
|
|
127
|
+
data: data,
|
|
128
|
+
columns: columns,
|
|
129
|
+
sortBy: sortBy,
|
|
130
|
+
setSortBy: setSortBy,
|
|
131
|
+
onRowClick: onRowClick,
|
|
132
|
+
})) }))) : (blankState), paginationUI] })));
|
|
42
133
|
};
|
|
43
134
|
export { Table };
|
|
44
135
|
export * from "./TableDataProvider";
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
49
|
+
import { addToast } from "..";
|
|
50
|
+
import { api } from "../../api";
|
|
51
|
+
import { Div } from "../../styled/utils";
|
|
52
|
+
import { useTableContext } from "./TableDataProvider";
|
|
53
|
+
export var useReorderRows = function (templateSlug, customMessage) {
|
|
54
|
+
var getData = useTableContext().getData;
|
|
55
|
+
var reorderRows = function (columnId, position) { return __awaiter(void 0, void 0, void 0, function () {
|
|
56
|
+
var apiUrl, defaultMessage, confirmationMessage, error_1;
|
|
57
|
+
return __generator(this, function (_a) {
|
|
58
|
+
switch (_a.label) {
|
|
59
|
+
case 0:
|
|
60
|
+
apiUrl = "/api/v1/templates/".concat(templateSlug, "/columns/").concat(columnId);
|
|
61
|
+
defaultMessage = (_jsx(Div, __assign({ alignCenter: true }, { children: _jsx(Div, { children: "Columns reordered successfully" }) })));
|
|
62
|
+
confirmationMessage = (_jsx(Div, __assign({ spaceBetween: true, alignCenter: true }, { children: customMessage || defaultMessage })));
|
|
63
|
+
_a.label = 1;
|
|
64
|
+
case 1:
|
|
65
|
+
_a.trys.push([1, 3, , 4]);
|
|
66
|
+
return [4 /*yield*/, api.patch(apiUrl, {
|
|
67
|
+
position: position,
|
|
68
|
+
})];
|
|
69
|
+
case 2:
|
|
70
|
+
_a.sent();
|
|
71
|
+
addToast(confirmationMessage, "success");
|
|
72
|
+
getData();
|
|
73
|
+
return [3 /*break*/, 4];
|
|
74
|
+
case 3:
|
|
75
|
+
error_1 = _a.sent();
|
|
76
|
+
addToast("Failed to reorder rows", "error");
|
|
77
|
+
return [3 /*break*/, 4];
|
|
78
|
+
case 4: return [2 /*return*/];
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}); };
|
|
82
|
+
return { reorderRows: reorderRows };
|
|
83
|
+
};
|