pixelize-design-library 1.1.4 → 1.1.6
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.
|
@@ -80,27 +80,28 @@ var CustomHeader = function (_a) {
|
|
|
80
80
|
alignItems: "center",
|
|
81
81
|
} },
|
|
82
82
|
react_1.default.createElement(fi_1.FiInfo, null),
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
react_1.default.createElement(react_2.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
react_1.default.createElement(react_2.
|
|
102
|
-
|
|
103
|
-
|
|
83
|
+
menuItems &&
|
|
84
|
+
react_1.default.createElement(react_2.Menu, null,
|
|
85
|
+
isOpen && (react_1.default.createElement(react_2.MenuButton, { ref: filterButtonRef, as: react_2.IconButton, "aria-label": "More options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", sx: {
|
|
86
|
+
_hover: {
|
|
87
|
+
background: "none",
|
|
88
|
+
},
|
|
89
|
+
_active: {
|
|
90
|
+
background: "none",
|
|
91
|
+
},
|
|
92
|
+
} })),
|
|
93
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
94
|
+
react_1.default.createElement(react_2.MenuList, { sx: {
|
|
95
|
+
boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)",
|
|
96
|
+
borderRadius: "8px",
|
|
97
|
+
padding: "8px",
|
|
98
|
+
backgroundColor: "white",
|
|
99
|
+
}, onMouseLeave: onClose }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
|
|
100
|
+
item.submenu ? (react_1.default.createElement(react_2.MenuItem, { closeOnSelect: false, onClick: handleSubmenuToggle }, item.label)) : (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleMenuItemClick(item.action); } }, item.label)),
|
|
101
|
+
isSubmenuOpen && item.submenu && submenuPosition && (react_1.default.createElement(react_2.Box, { position: "absolute", top: submenuPosition.top, left: submenuPosition.left, zIndex: 1, boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", borderRadius: "8px", backgroundColor: "white", padding: "8px", width: "200px" },
|
|
102
|
+
react_1.default.createElement(react_2.MenuGroup, { onMouseLeave: onClose }, item.submenu.map(function (subItem, subIndex) { return (react_1.default.createElement(react_2.MenuItem, { key: subIndex, closeOnSelect: true, onClick: function () {
|
|
103
|
+
return handleMenuItemClick(subItem.action);
|
|
104
|
+
} }, subItem.label)); })))))); })))))),
|
|
104
105
|
react_1.default.createElement(react_2.Box, { sx: { position: "absolute", right: 20, top: 0 } }, isOpen && (react_1.default.createElement(react_2.Flex, { alignItems: "center" },
|
|
105
106
|
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", backgroundColor: "white", padding: sortState === "asc" ? "1px" : "2px", borderRadius: "10px", flexDirection: "column", width: "20px", height: "20px", onClick: handleSortClick, cursor: "pointer", boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
|
|
106
107
|
react_1.default.createElement(react_2.Box, { transition: "opacity 0.2s ease-in-out", opacity: sortState === "none" ? 1 : 0, position: "absolute" },
|
|
@@ -66,6 +66,23 @@ require("./ka-table.css");
|
|
|
66
66
|
var CustomHeader_1 = __importDefault(require("./CustomHeader"));
|
|
67
67
|
var KaTable = function (_a) {
|
|
68
68
|
var columns = _a.columns, data = _a.data, _b = _a.rowKey, rowKey = _b === void 0 ? "id" : _b, Edit = _a.Edit, sorting = _a.sorting, format = _a.format, paging = _a.paging, filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems;
|
|
69
|
+
var selectionCellColumn = {
|
|
70
|
+
key: "selection-cell",
|
|
71
|
+
width: 50,
|
|
72
|
+
columnFreeze: true,
|
|
73
|
+
customHeader: false,
|
|
74
|
+
};
|
|
75
|
+
if (checkSelect &&
|
|
76
|
+
!columns.some(function (column) { return column.key === "select-cell"; })) {
|
|
77
|
+
columns.unshift(selectionCellColumn);
|
|
78
|
+
}
|
|
79
|
+
var getPreviousColumnWidth = function (key) {
|
|
80
|
+
var index = columns.findIndex(function (column) { return column.key === key; });
|
|
81
|
+
if (index > 0) {
|
|
82
|
+
return columns[index - 1].width;
|
|
83
|
+
}
|
|
84
|
+
return 0;
|
|
85
|
+
};
|
|
69
86
|
var SelectionHeader = function () {
|
|
70
87
|
var _a;
|
|
71
88
|
var table = TableFun.useTableInstance();
|
|
@@ -126,24 +143,6 @@ var KaTable = function (_a) {
|
|
|
126
143
|
}
|
|
127
144
|
} }));
|
|
128
145
|
};
|
|
129
|
-
var selectionCellColumn = {
|
|
130
|
-
key: "selection-cell",
|
|
131
|
-
isFilterable: false,
|
|
132
|
-
width: 50,
|
|
133
|
-
columnFreeze: true,
|
|
134
|
-
customHeader: false,
|
|
135
|
-
};
|
|
136
|
-
if (checkSelect &&
|
|
137
|
-
!columns.some(function (column) { return column.key === "selection-cell"; })) {
|
|
138
|
-
columns.unshift(selectionCellColumn);
|
|
139
|
-
}
|
|
140
|
-
var getPreviousColumnWidth = function (key) {
|
|
141
|
-
var index = columns.findIndex(function (column) { return column.key === key; });
|
|
142
|
-
if (index > 0) {
|
|
143
|
-
return columns[index - 1].width;
|
|
144
|
-
}
|
|
145
|
-
return 0;
|
|
146
|
-
};
|
|
147
146
|
var mergedChildComponents = __assign(__assign({}, childComponents), { headCell: {
|
|
148
147
|
content: function (props) {
|
|
149
148
|
var _a;
|
|
@@ -158,7 +157,7 @@ var KaTable = function (_a) {
|
|
|
158
157
|
props.column.customHeader === true) {
|
|
159
158
|
return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: onSortChange, onMenuItemClick: onMenuItemClick, menuItems: menuItems })));
|
|
160
159
|
}
|
|
161
|
-
if (props.column.key === "
|
|
160
|
+
if (props.column.key === "select-cell") {
|
|
162
161
|
return react_1.default.createElement(SelectionHeader, null);
|
|
163
162
|
}
|
|
164
163
|
},
|
|
@@ -214,7 +213,7 @@ var KaTable = function (_a) {
|
|
|
214
213
|
return result;
|
|
215
214
|
}
|
|
216
215
|
}
|
|
217
|
-
if (props.column.key === "
|
|
216
|
+
if (props.column.key === "select-cell") {
|
|
218
217
|
return react_1.default.createElement(SelectionCell, __assign({}, props));
|
|
219
218
|
}
|
|
220
219
|
},
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/* .ka-thead {
|
|
2
|
+
border-left: 5px solid red;
|
|
3
|
+
}
|
|
4
|
+
.ka-tbody,
|
|
5
|
+
.ka-paging {
|
|
6
|
+
border-left: 5px solid red;
|
|
7
|
+
border-bottom: none;
|
|
8
|
+
} */
|
|
9
|
+
.ka {
|
|
10
|
+
border-radius: 10px 0 0 10px;
|
|
11
|
+
border-width: 0px 0px 0px 5px;
|
|
12
|
+
border-color: #2caa3d;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.ka-thead-row,
|
|
16
|
+
.ka-row {
|
|
17
|
+
border: 1px solid #d0d4e4;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ka-thead-cell,
|
|
21
|
+
.ka-cell {
|
|
22
|
+
border-right: 1px solid #d0d4e4;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.ka-thead-cell {
|
|
26
|
+
text-align: center;
|
|
27
|
+
padding: 7px 14px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.ka-cell {
|
|
31
|
+
padding: 7px 17px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ka-thead-background {
|
|
35
|
+
background-color: #bfbcbc;
|
|
36
|
+
z-index: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ka-cell-text {
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
text-overflow: ellipsis;
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixelize-design-library",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"start": "react-scripts start",
|
|
38
|
-
"build": "tsc",
|
|
38
|
+
"build": "tsc && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
|
|
39
39
|
"test": "react-scripts test",
|
|
40
40
|
"eject": "react-scripts eject",
|
|
41
41
|
"prepare": "husky install",
|
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
64
64
|
"@types/styled-components": "^5.1.34",
|
|
65
|
+
"copyfiles": "^2.4.1",
|
|
65
66
|
"globals": "^15.8.0",
|
|
66
67
|
"husky": "^8.0.0",
|
|
67
68
|
"lint-staged": "^15.2.7",
|