qbs-react-grid 2.0.4 → 2.0.5
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/es/qbsTable/QbsTable.js +18 -5
- package/es/qbsTable/Toolbar.js +45 -4
- package/es/qbsTable/commontypes.d.ts +10 -0
- package/es/qbsTable/utilities/ColumShowHide.js +2 -24
- package/es/qbsTable/utilities/empty.js +1 -1
- package/es/qbsTable/utilities/icons.d.ts +3 -0
- package/es/qbsTable/utilities/icons.js +64 -0
- package/lib/qbsTable/QbsTable.js +18 -5
- package/lib/qbsTable/Toolbar.js +44 -3
- package/lib/qbsTable/commontypes.d.ts +10 -0
- package/lib/qbsTable/utilities/ColumShowHide.js +2 -24
- package/lib/qbsTable/utilities/empty.js +1 -1
- package/lib/qbsTable/utilities/icons.d.ts +3 -0
- package/lib/qbsTable/utilities/icons.js +69 -2
- package/package.json +1 -1
- package/src/customSelect.tsx +88 -88
- package/src/qbsTable/QbsTable.tsx +16 -5
- package/src/qbsTable/Toolbar.tsx +32 -3
- package/src/qbsTable/commontypes.ts +15 -6
- package/src/qbsTable/utilities/ColumShowHide.tsx +3 -5
- package/src/qbsTable/utilities/empty.tsx +2 -2
- package/src/qbsTable/utilities/icons.tsx +77 -0
- package/src/utils/useTableRows.ts +1 -1
package/es/qbsTable/QbsTable.js
CHANGED
|
@@ -99,7 +99,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
99
99
|
_ref$tableView = _ref.tableView,
|
|
100
100
|
tableView = _ref$tableView === void 0 ? true : _ref$tableView,
|
|
101
101
|
_ref$enableTableToggl = _ref.enableTableToggle,
|
|
102
|
-
enableTableToggle = _ref$enableTableToggl === void 0 ?
|
|
102
|
+
enableTableToggle = _ref$enableTableToggl === void 0 ? true : _ref$enableTableToggl,
|
|
103
103
|
_ref$cardColumLimit = _ref.cardColumLimit,
|
|
104
104
|
cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
|
|
105
105
|
_ref$childDetailHeadi = _ref.childDetailHeading,
|
|
@@ -113,7 +113,15 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
113
113
|
infiniteLoading = _ref.infiniteLoading,
|
|
114
114
|
_ref$infiniteScroll = _ref.infiniteScroll,
|
|
115
115
|
infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
|
|
116
|
-
propsViewMode = _ref.viewMode
|
|
116
|
+
propsViewMode = _ref.viewMode,
|
|
117
|
+
_ref$rowViewToggle = _ref.rowViewToggle,
|
|
118
|
+
rowViewToggle = _ref$rowViewToggle === void 0 ? true : _ref$rowViewToggle,
|
|
119
|
+
_ref$defaultRowView = _ref.defaultRowView,
|
|
120
|
+
defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
|
|
121
|
+
_ref$fullWidthView = _ref.fullWidthView,
|
|
122
|
+
fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
|
|
123
|
+
setTableFullView = _ref.setTableFullView,
|
|
124
|
+
setRowViewToggle = _ref.setRowViewToggle;
|
|
117
125
|
var _useState = useState(false),
|
|
118
126
|
loading = _useState[0],
|
|
119
127
|
setLoading = _useState[1];
|
|
@@ -233,13 +241,13 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
233
241
|
}
|
|
234
242
|
}, [wordWrap]);
|
|
235
243
|
useEffect(function () {
|
|
236
|
-
if (
|
|
244
|
+
if (!defaultRowView) {
|
|
237
245
|
setWordWrap('break-word');
|
|
238
246
|
} else {
|
|
239
247
|
setWordWrap(false);
|
|
240
248
|
}
|
|
241
249
|
REFRESH_KEY = REFRESH_KEY + 1;
|
|
242
|
-
}, [
|
|
250
|
+
}, [defaultRowView]);
|
|
243
251
|
var onReorder = useCallback(function (columns) {
|
|
244
252
|
setColumns(columns);
|
|
245
253
|
}, []);
|
|
@@ -276,7 +284,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
276
284
|
searchPlaceholder: searchPlaceholder,
|
|
277
285
|
setTableViewToggle: setTableViewToggle,
|
|
278
286
|
tableViewToggle: tableViewToggle,
|
|
279
|
-
enableTableToggle: enableTableToggle
|
|
287
|
+
enableTableToggle: enableTableToggle,
|
|
288
|
+
rowViewToggle: rowViewToggle,
|
|
289
|
+
defaultRowView: defaultRowView,
|
|
290
|
+
fullWidthView: fullWidthView,
|
|
291
|
+
setTableFullView: setTableFullView,
|
|
292
|
+
setRowViewToggle: setRowViewToggle
|
|
280
293
|
};
|
|
281
294
|
var themeToggle = useMemo(function () {
|
|
282
295
|
return document.getElementById('themeToggle');
|
package/es/qbsTable/Toolbar.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useCallback, useRef, useState } from 'react';
|
|
2
2
|
import useResponsiveStore from '../utils/useResponsiveStore';
|
|
3
3
|
import debounce from './utilities/debounce';
|
|
4
|
-
import { CardView, TableView } from './utilities/icons';
|
|
4
|
+
import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
|
|
5
5
|
import SearchInput from './utilities/SearchInput';
|
|
6
6
|
import { getRowDisplayRange } from './utilities/tablecalc';
|
|
7
7
|
import TooltipComponent from './utilities/ToolTip';
|
|
@@ -27,7 +27,15 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
27
27
|
tableViewToggle = _ref.tableViewToggle,
|
|
28
28
|
setTableViewToggle = _ref.setTableViewToggle,
|
|
29
29
|
_ref$enableTableToggl = _ref.enableTableToggle,
|
|
30
|
-
enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl
|
|
30
|
+
enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
|
|
31
|
+
_ref$rowViewToggle = _ref.rowViewToggle,
|
|
32
|
+
rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
|
|
33
|
+
_ref$defaultRowView = _ref.defaultRowView,
|
|
34
|
+
defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
|
|
35
|
+
_ref$fullWidthView = _ref.fullWidthView,
|
|
36
|
+
fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
|
|
37
|
+
setTableFullView = _ref.setTableFullView,
|
|
38
|
+
setRowViewToggle = _ref.setRowViewToggle;
|
|
31
39
|
var debouncedOnSearch = useCallback(debounce(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
|
|
32
40
|
var _useState = useState(searchValue),
|
|
33
41
|
searchParam = _useState[0],
|
|
@@ -97,8 +105,41 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
97
105
|
strokeLinejoin: "round",
|
|
98
106
|
d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
|
|
99
107
|
}))), tableHeaderActions, /*#__PURE__*/React.createElement("div", {
|
|
100
|
-
className: " pr-1 cursor-pointer relative
|
|
101
|
-
},
|
|
108
|
+
className: " pr-1 cursor-pointer relative table_custom_ctions "
|
|
109
|
+
}, rowViewToggle && /*#__PURE__*/React.createElement("div", {
|
|
110
|
+
className: "flex gap-2 qbs-row-switch-cntainer"
|
|
111
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
112
|
+
className: "flex gap-2 table_cell_style"
|
|
113
|
+
}, /*#__PURE__*/React.createElement(TooltipComponent, {
|
|
114
|
+
tableBodyRef: toolbarRef,
|
|
115
|
+
title: 'Switch to Default View'
|
|
116
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
117
|
+
onClick: function onClick() {
|
|
118
|
+
return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
|
|
119
|
+
}
|
|
120
|
+
}, /*#__PURE__*/React.createElement(DefaultView, {
|
|
121
|
+
className: "" + (defaultRowView ? 'active' : '')
|
|
122
|
+
}))), /*#__PURE__*/React.createElement(TooltipComponent, {
|
|
123
|
+
tableBodyRef: toolbarRef,
|
|
124
|
+
title: 'Switch to Compact View'
|
|
125
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
126
|
+
onClick: function onClick() {
|
|
127
|
+
return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
|
|
128
|
+
}
|
|
129
|
+
}, /*#__PURE__*/React.createElement(ContentView, {
|
|
130
|
+
className: "" + (!defaultRowView ? 'active' : '')
|
|
131
|
+
})))), /*#__PURE__*/React.createElement("div", {
|
|
132
|
+
className: " table_full_width"
|
|
133
|
+
}, /*#__PURE__*/React.createElement(TooltipComponent, {
|
|
134
|
+
tableBodyRef: toolbarRef,
|
|
135
|
+
title: 'Switch to Full Screen'
|
|
136
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
137
|
+
onClick: function onClick() {
|
|
138
|
+
return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
|
|
139
|
+
}
|
|
140
|
+
}, /*#__PURE__*/React.createElement(ExpandIcon, {
|
|
141
|
+
className: "" + (fullWidthView ? 'active' : '')
|
|
142
|
+
}))))), enableTableToggle && !isMobile && /*#__PURE__*/React.createElement("div", {
|
|
102
143
|
className: "qbs-table-top-icons flex gap-2"
|
|
103
144
|
}, /*#__PURE__*/React.createElement(TooltipComponent, {
|
|
104
145
|
tableBodyRef: toolbarRef,
|
|
@@ -132,6 +132,11 @@ export interface QbsTableProps {
|
|
|
132
132
|
infiniteScroll?: boolean;
|
|
133
133
|
infiniteLoading?: boolean;
|
|
134
134
|
viewMode?: string;
|
|
135
|
+
rowViewToggle?: boolean;
|
|
136
|
+
defaultRowView?: boolean;
|
|
137
|
+
fullWidthView?: boolean;
|
|
138
|
+
setTableFullView?: (value: boolean) => void;
|
|
139
|
+
setRowViewToggle?: (value: boolean) => void;
|
|
135
140
|
}
|
|
136
141
|
export interface QbsTableToolbarProps {
|
|
137
142
|
title?: string;
|
|
@@ -167,5 +172,10 @@ export interface QbsTableToolbarProps {
|
|
|
167
172
|
hidden?: boolean;
|
|
168
173
|
customHide?: string;
|
|
169
174
|
}[];
|
|
175
|
+
rowViewToggle?: boolean;
|
|
176
|
+
defaultRowView?: boolean;
|
|
177
|
+
fullWidthView?: boolean;
|
|
178
|
+
setTableFullView?: (value: boolean) => void;
|
|
179
|
+
setRowViewToggle?: (value: boolean) => void;
|
|
170
180
|
}
|
|
171
181
|
export {};
|
|
@@ -9,9 +9,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
9
9
|
handleResetColumns = _ref.handleResetColumns,
|
|
10
10
|
handleColumnToggle = _ref.handleColumnToggle,
|
|
11
11
|
_ref$tableHeight = _ref.tableHeight,
|
|
12
|
-
tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight
|
|
13
|
-
viewMode = _ref.viewMode,
|
|
14
|
-
setViewMode = _ref.setViewMode;
|
|
12
|
+
tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
|
|
15
13
|
var _useState = useState(null),
|
|
16
14
|
draggedItem = _useState[0],
|
|
17
15
|
setDraggedItem = _useState[1];
|
|
@@ -217,26 +215,6 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
217
215
|
onClick: function onClick() {
|
|
218
216
|
return handleColToggle();
|
|
219
217
|
}
|
|
220
|
-
}, "Save")))
|
|
221
|
-
className: "qbs-table-popup-item"
|
|
222
|
-
}, /*#__PURE__*/React.createElement("label", {
|
|
223
|
-
className: "flex items-center gap-2"
|
|
224
|
-
}, /*#__PURE__*/React.createElement("input", {
|
|
225
|
-
type: "radio",
|
|
226
|
-
value: "compact",
|
|
227
|
-
checked: viewMode === 'compact',
|
|
228
|
-
onChange: function onChange() {
|
|
229
|
-
return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('compact');
|
|
230
|
-
}
|
|
231
|
-
}), "Compact View"), /*#__PURE__*/React.createElement("label", {
|
|
232
|
-
className: "flex items-center gap-2"
|
|
233
|
-
}, /*#__PURE__*/React.createElement("input", {
|
|
234
|
-
type: "radio",
|
|
235
|
-
value: "expanded",
|
|
236
|
-
checked: viewMode === 'expanded',
|
|
237
|
-
onChange: function onChange() {
|
|
238
|
-
return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('expanded');
|
|
239
|
-
}
|
|
240
|
-
}), "Default View")))));
|
|
218
|
+
}, "Save"))))));
|
|
241
219
|
};
|
|
242
220
|
export default ColumnToggle;
|
|
@@ -70,7 +70,7 @@ var NoData = function NoData(_ref) {
|
|
|
70
70
|
}), /*#__PURE__*/React.createElement("path", {
|
|
71
71
|
fill: "#797979",
|
|
72
72
|
d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
|
|
73
|
-
})),
|
|
73
|
+
})), ' '), /*#__PURE__*/React.createElement("p", {
|
|
74
74
|
className: "text-center text-common font-bold text-blackAlt nodata-title"
|
|
75
75
|
}, title), /*#__PURE__*/React.createElement("span", {
|
|
76
76
|
className: "text-xxs font-medium text-grey-medium nodata-sub-title"
|
|
@@ -6,3 +6,6 @@ export declare const TableIcon: React.FC<any>;
|
|
|
6
6
|
export declare const CardIcon: React.FC<any>;
|
|
7
7
|
export declare const CardView: React.FC<any>;
|
|
8
8
|
export declare const TableView: React.FC<any>;
|
|
9
|
+
export declare const ExpandIcon: React.FC<any>;
|
|
10
|
+
export declare const ContentView: React.FC<any>;
|
|
11
|
+
export declare const DefaultView: React.FC<any>;
|
|
@@ -125,4 +125,68 @@ export var TableView = function TableView(_ref5) {
|
|
|
125
125
|
stroke: "currentColor",
|
|
126
126
|
strokeWidth: "1.5"
|
|
127
127
|
}));
|
|
128
|
+
};
|
|
129
|
+
export var ExpandIcon = function ExpandIcon(_ref6) {
|
|
130
|
+
var className = _ref6.className;
|
|
131
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
132
|
+
width: "16",
|
|
133
|
+
height: "16",
|
|
134
|
+
className: className,
|
|
135
|
+
viewBox: "0 0 16 16",
|
|
136
|
+
fill: "none",
|
|
137
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
138
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
139
|
+
d: "M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668",
|
|
140
|
+
stroke: "#585858",
|
|
141
|
+
strokeWidth: "1.5",
|
|
142
|
+
strokeLinecap: "round",
|
|
143
|
+
strokeLinejoin: "round"
|
|
144
|
+
}));
|
|
145
|
+
};
|
|
146
|
+
export var ContentView = function ContentView(_ref7) {
|
|
147
|
+
var className = _ref7.className;
|
|
148
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
149
|
+
width: "16",
|
|
150
|
+
height: "17",
|
|
151
|
+
className: className,
|
|
152
|
+
viewBox: "0 0 16 17",
|
|
153
|
+
fill: "none",
|
|
154
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
155
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
156
|
+
d: "M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z",
|
|
157
|
+
stroke: "#585858",
|
|
158
|
+
strokeLinecap: "round",
|
|
159
|
+
strokeLinejoin: "round"
|
|
160
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
161
|
+
d: "M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z",
|
|
162
|
+
stroke: "#585858",
|
|
163
|
+
strokeLinecap: "round",
|
|
164
|
+
strokeLinejoin: "round"
|
|
165
|
+
}));
|
|
166
|
+
};
|
|
167
|
+
export var DefaultView = function DefaultView(_ref8) {
|
|
168
|
+
var className = _ref8.className;
|
|
169
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
170
|
+
width: "16",
|
|
171
|
+
height: "17",
|
|
172
|
+
className: className,
|
|
173
|
+
viewBox: "0 0 16 17",
|
|
174
|
+
fill: "none",
|
|
175
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
176
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
177
|
+
fillRule: "evenodd",
|
|
178
|
+
clipRule: "evenodd",
|
|
179
|
+
d: "M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z",
|
|
180
|
+
fill: "#585858"
|
|
181
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
182
|
+
fillRule: "evenodd",
|
|
183
|
+
clipRule: "evenodd",
|
|
184
|
+
d: "M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z",
|
|
185
|
+
fill: "#585858"
|
|
186
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
187
|
+
fillRule: "evenodd",
|
|
188
|
+
clipRule: "evenodd",
|
|
189
|
+
d: "M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z",
|
|
190
|
+
fill: "#585858"
|
|
191
|
+
}));
|
|
128
192
|
};
|
package/lib/qbsTable/QbsTable.js
CHANGED
|
@@ -105,7 +105,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
105
105
|
_ref$tableView = _ref.tableView,
|
|
106
106
|
tableView = _ref$tableView === void 0 ? true : _ref$tableView,
|
|
107
107
|
_ref$enableTableToggl = _ref.enableTableToggle,
|
|
108
|
-
enableTableToggle = _ref$enableTableToggl === void 0 ?
|
|
108
|
+
enableTableToggle = _ref$enableTableToggl === void 0 ? true : _ref$enableTableToggl,
|
|
109
109
|
_ref$cardColumLimit = _ref.cardColumLimit,
|
|
110
110
|
cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
|
|
111
111
|
_ref$childDetailHeadi = _ref.childDetailHeading,
|
|
@@ -119,7 +119,15 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
119
119
|
infiniteLoading = _ref.infiniteLoading,
|
|
120
120
|
_ref$infiniteScroll = _ref.infiniteScroll,
|
|
121
121
|
infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
|
|
122
|
-
propsViewMode = _ref.viewMode
|
|
122
|
+
propsViewMode = _ref.viewMode,
|
|
123
|
+
_ref$rowViewToggle = _ref.rowViewToggle,
|
|
124
|
+
rowViewToggle = _ref$rowViewToggle === void 0 ? true : _ref$rowViewToggle,
|
|
125
|
+
_ref$defaultRowView = _ref.defaultRowView,
|
|
126
|
+
defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
|
|
127
|
+
_ref$fullWidthView = _ref.fullWidthView,
|
|
128
|
+
fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
|
|
129
|
+
setTableFullView = _ref.setTableFullView,
|
|
130
|
+
setRowViewToggle = _ref.setRowViewToggle;
|
|
123
131
|
var _useState = (0, _react.useState)(false),
|
|
124
132
|
loading = _useState[0],
|
|
125
133
|
setLoading = _useState[1];
|
|
@@ -239,13 +247,13 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
239
247
|
}
|
|
240
248
|
}, [wordWrap]);
|
|
241
249
|
(0, _react.useEffect)(function () {
|
|
242
|
-
if (
|
|
250
|
+
if (!defaultRowView) {
|
|
243
251
|
setWordWrap('break-word');
|
|
244
252
|
} else {
|
|
245
253
|
setWordWrap(false);
|
|
246
254
|
}
|
|
247
255
|
REFRESH_KEY = REFRESH_KEY + 1;
|
|
248
|
-
}, [
|
|
256
|
+
}, [defaultRowView]);
|
|
249
257
|
var onReorder = (0, _react.useCallback)(function (columns) {
|
|
250
258
|
setColumns(columns);
|
|
251
259
|
}, []);
|
|
@@ -282,7 +290,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
282
290
|
searchPlaceholder: searchPlaceholder,
|
|
283
291
|
setTableViewToggle: setTableViewToggle,
|
|
284
292
|
tableViewToggle: tableViewToggle,
|
|
285
|
-
enableTableToggle: enableTableToggle
|
|
293
|
+
enableTableToggle: enableTableToggle,
|
|
294
|
+
rowViewToggle: rowViewToggle,
|
|
295
|
+
defaultRowView: defaultRowView,
|
|
296
|
+
fullWidthView: fullWidthView,
|
|
297
|
+
setTableFullView: setTableFullView,
|
|
298
|
+
setRowViewToggle: setRowViewToggle
|
|
286
299
|
};
|
|
287
300
|
var themeToggle = (0, _react.useMemo)(function () {
|
|
288
301
|
return document.getElementById('themeToggle');
|
package/lib/qbsTable/Toolbar.js
CHANGED
|
@@ -34,7 +34,15 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
34
34
|
tableViewToggle = _ref.tableViewToggle,
|
|
35
35
|
setTableViewToggle = _ref.setTableViewToggle,
|
|
36
36
|
_ref$enableTableToggl = _ref.enableTableToggle,
|
|
37
|
-
enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl
|
|
37
|
+
enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
|
|
38
|
+
_ref$rowViewToggle = _ref.rowViewToggle,
|
|
39
|
+
rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
|
|
40
|
+
_ref$defaultRowView = _ref.defaultRowView,
|
|
41
|
+
defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
|
|
42
|
+
_ref$fullWidthView = _ref.fullWidthView,
|
|
43
|
+
fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
|
|
44
|
+
setTableFullView = _ref.setTableFullView,
|
|
45
|
+
setRowViewToggle = _ref.setRowViewToggle;
|
|
38
46
|
var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
|
|
39
47
|
var _useState = (0, _react.useState)(searchValue),
|
|
40
48
|
searchParam = _useState[0],
|
|
@@ -104,8 +112,41 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
104
112
|
strokeLinejoin: "round",
|
|
105
113
|
d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
|
|
106
114
|
}))), tableHeaderActions, /*#__PURE__*/_react["default"].createElement("div", {
|
|
107
|
-
className: " pr-1 cursor-pointer relative
|
|
108
|
-
},
|
|
115
|
+
className: " pr-1 cursor-pointer relative table_custom_ctions "
|
|
116
|
+
}, rowViewToggle && /*#__PURE__*/_react["default"].createElement("div", {
|
|
117
|
+
className: "flex gap-2 qbs-row-switch-cntainer"
|
|
118
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
119
|
+
className: "flex gap-2 table_cell_style"
|
|
120
|
+
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
121
|
+
tableBodyRef: toolbarRef,
|
|
122
|
+
title: 'Switch to Default View'
|
|
123
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
124
|
+
onClick: function onClick() {
|
|
125
|
+
return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
|
|
126
|
+
}
|
|
127
|
+
}, /*#__PURE__*/_react["default"].createElement(_icons.DefaultView, {
|
|
128
|
+
className: "" + (defaultRowView ? 'active' : '')
|
|
129
|
+
}))), /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
130
|
+
tableBodyRef: toolbarRef,
|
|
131
|
+
title: 'Switch to Compact View'
|
|
132
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
133
|
+
onClick: function onClick() {
|
|
134
|
+
return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
|
|
135
|
+
}
|
|
136
|
+
}, /*#__PURE__*/_react["default"].createElement(_icons.ContentView, {
|
|
137
|
+
className: "" + (!defaultRowView ? 'active' : '')
|
|
138
|
+
})))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
139
|
+
className: " table_full_width"
|
|
140
|
+
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
141
|
+
tableBodyRef: toolbarRef,
|
|
142
|
+
title: 'Switch to Full Screen'
|
|
143
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
144
|
+
onClick: function onClick() {
|
|
145
|
+
return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
|
|
146
|
+
}
|
|
147
|
+
}, /*#__PURE__*/_react["default"].createElement(_icons.ExpandIcon, {
|
|
148
|
+
className: "" + (fullWidthView ? 'active' : '')
|
|
149
|
+
}))))), enableTableToggle && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
|
|
109
150
|
className: "qbs-table-top-icons flex gap-2"
|
|
110
151
|
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
111
152
|
tableBodyRef: toolbarRef,
|
|
@@ -132,6 +132,11 @@ export interface QbsTableProps {
|
|
|
132
132
|
infiniteScroll?: boolean;
|
|
133
133
|
infiniteLoading?: boolean;
|
|
134
134
|
viewMode?: string;
|
|
135
|
+
rowViewToggle?: boolean;
|
|
136
|
+
defaultRowView?: boolean;
|
|
137
|
+
fullWidthView?: boolean;
|
|
138
|
+
setTableFullView?: (value: boolean) => void;
|
|
139
|
+
setRowViewToggle?: (value: boolean) => void;
|
|
135
140
|
}
|
|
136
141
|
export interface QbsTableToolbarProps {
|
|
137
142
|
title?: string;
|
|
@@ -167,5 +172,10 @@ export interface QbsTableToolbarProps {
|
|
|
167
172
|
hidden?: boolean;
|
|
168
173
|
customHide?: string;
|
|
169
174
|
}[];
|
|
175
|
+
rowViewToggle?: boolean;
|
|
176
|
+
defaultRowView?: boolean;
|
|
177
|
+
fullWidthView?: boolean;
|
|
178
|
+
setTableFullView?: (value: boolean) => void;
|
|
179
|
+
setRowViewToggle?: (value: boolean) => void;
|
|
170
180
|
}
|
|
171
181
|
export {};
|
|
@@ -15,9 +15,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
15
15
|
handleResetColumns = _ref.handleResetColumns,
|
|
16
16
|
handleColumnToggle = _ref.handleColumnToggle,
|
|
17
17
|
_ref$tableHeight = _ref.tableHeight,
|
|
18
|
-
tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight
|
|
19
|
-
viewMode = _ref.viewMode,
|
|
20
|
-
setViewMode = _ref.setViewMode;
|
|
18
|
+
tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
|
|
21
19
|
var _useState = (0, _react.useState)(null),
|
|
22
20
|
draggedItem = _useState[0],
|
|
23
21
|
setDraggedItem = _useState[1];
|
|
@@ -223,27 +221,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
223
221
|
onClick: function onClick() {
|
|
224
222
|
return handleColToggle();
|
|
225
223
|
}
|
|
226
|
-
}, "Save")))
|
|
227
|
-
className: "qbs-table-popup-item"
|
|
228
|
-
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
229
|
-
className: "flex items-center gap-2"
|
|
230
|
-
}, /*#__PURE__*/_react["default"].createElement("input", {
|
|
231
|
-
type: "radio",
|
|
232
|
-
value: "compact",
|
|
233
|
-
checked: viewMode === 'compact',
|
|
234
|
-
onChange: function onChange() {
|
|
235
|
-
return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('compact');
|
|
236
|
-
}
|
|
237
|
-
}), "Compact View"), /*#__PURE__*/_react["default"].createElement("label", {
|
|
238
|
-
className: "flex items-center gap-2"
|
|
239
|
-
}, /*#__PURE__*/_react["default"].createElement("input", {
|
|
240
|
-
type: "radio",
|
|
241
|
-
value: "expanded",
|
|
242
|
-
checked: viewMode === 'expanded',
|
|
243
|
-
onChange: function onChange() {
|
|
244
|
-
return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('expanded');
|
|
245
|
-
}
|
|
246
|
-
}), "Default View")))));
|
|
224
|
+
}, "Save"))))));
|
|
247
225
|
};
|
|
248
226
|
var _default = ColumnToggle;
|
|
249
227
|
exports["default"] = _default;
|
|
@@ -75,7 +75,7 @@ var NoData = function NoData(_ref) {
|
|
|
75
75
|
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
76
76
|
fill: "#797979",
|
|
77
77
|
d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
|
|
78
|
-
})),
|
|
78
|
+
})), ' '), /*#__PURE__*/_react["default"].createElement("p", {
|
|
79
79
|
className: "text-center text-common font-bold text-blackAlt nodata-title"
|
|
80
80
|
}, title), /*#__PURE__*/_react["default"].createElement("span", {
|
|
81
81
|
className: "text-xxs font-medium text-grey-medium nodata-sub-title"
|
|
@@ -6,3 +6,6 @@ export declare const TableIcon: React.FC<any>;
|
|
|
6
6
|
export declare const CardIcon: React.FC<any>;
|
|
7
7
|
export declare const CardView: React.FC<any>;
|
|
8
8
|
export declare const TableView: React.FC<any>;
|
|
9
|
+
export declare const ExpandIcon: React.FC<any>;
|
|
10
|
+
export declare const ContentView: React.FC<any>;
|
|
11
|
+
export declare const DefaultView: React.FC<any>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
exports.__esModule = true;
|
|
5
|
-
exports.ThreeDotIcon = exports.TableView = exports.TableIcon = exports.SettingsIcon = exports.CardView = exports.CardIcon = exports.ArrowUpIcon = void 0;
|
|
5
|
+
exports.ThreeDotIcon = exports.TableView = exports.TableIcon = exports.SettingsIcon = exports.ExpandIcon = exports.DefaultView = exports.ContentView = exports.CardView = exports.CardIcon = exports.ArrowUpIcon = void 0;
|
|
6
6
|
var _react = _interopRequireDefault(require("react"));
|
|
7
7
|
var ThreeDotIcon = function ThreeDotIcon() {
|
|
8
8
|
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
@@ -137,4 +137,71 @@ var TableView = function TableView(_ref5) {
|
|
|
137
137
|
strokeWidth: "1.5"
|
|
138
138
|
}));
|
|
139
139
|
};
|
|
140
|
-
exports.TableView = TableView;
|
|
140
|
+
exports.TableView = TableView;
|
|
141
|
+
var ExpandIcon = function ExpandIcon(_ref6) {
|
|
142
|
+
var className = _ref6.className;
|
|
143
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
144
|
+
width: "16",
|
|
145
|
+
height: "16",
|
|
146
|
+
className: className,
|
|
147
|
+
viewBox: "0 0 16 16",
|
|
148
|
+
fill: "none",
|
|
149
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
150
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
151
|
+
d: "M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668",
|
|
152
|
+
stroke: "#585858",
|
|
153
|
+
strokeWidth: "1.5",
|
|
154
|
+
strokeLinecap: "round",
|
|
155
|
+
strokeLinejoin: "round"
|
|
156
|
+
}));
|
|
157
|
+
};
|
|
158
|
+
exports.ExpandIcon = ExpandIcon;
|
|
159
|
+
var ContentView = function ContentView(_ref7) {
|
|
160
|
+
var className = _ref7.className;
|
|
161
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
162
|
+
width: "16",
|
|
163
|
+
height: "17",
|
|
164
|
+
className: className,
|
|
165
|
+
viewBox: "0 0 16 17",
|
|
166
|
+
fill: "none",
|
|
167
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
168
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
169
|
+
d: "M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z",
|
|
170
|
+
stroke: "#585858",
|
|
171
|
+
strokeLinecap: "round",
|
|
172
|
+
strokeLinejoin: "round"
|
|
173
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
174
|
+
d: "M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z",
|
|
175
|
+
stroke: "#585858",
|
|
176
|
+
strokeLinecap: "round",
|
|
177
|
+
strokeLinejoin: "round"
|
|
178
|
+
}));
|
|
179
|
+
};
|
|
180
|
+
exports.ContentView = ContentView;
|
|
181
|
+
var DefaultView = function DefaultView(_ref8) {
|
|
182
|
+
var className = _ref8.className;
|
|
183
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
184
|
+
width: "16",
|
|
185
|
+
height: "17",
|
|
186
|
+
className: className,
|
|
187
|
+
viewBox: "0 0 16 17",
|
|
188
|
+
fill: "none",
|
|
189
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
190
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
191
|
+
fillRule: "evenodd",
|
|
192
|
+
clipRule: "evenodd",
|
|
193
|
+
d: "M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z",
|
|
194
|
+
fill: "#585858"
|
|
195
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
196
|
+
fillRule: "evenodd",
|
|
197
|
+
clipRule: "evenodd",
|
|
198
|
+
d: "M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z",
|
|
199
|
+
fill: "#585858"
|
|
200
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
201
|
+
fillRule: "evenodd",
|
|
202
|
+
clipRule: "evenodd",
|
|
203
|
+
d: "M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z",
|
|
204
|
+
fill: "#585858"
|
|
205
|
+
}));
|
|
206
|
+
};
|
|
207
|
+
exports.DefaultView = DefaultView;
|
package/package.json
CHANGED
package/src/customSelect.tsx
CHANGED
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
import React, { FC, useState, useEffect, useRef } from 'react';
|
|
2
|
-
|
|
3
|
-
type CustomSelectProps = {
|
|
4
|
-
options: number[];
|
|
5
|
-
selectedValue: number;
|
|
6
|
-
onChange: (value: number) => void;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
|
|
10
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
11
|
-
const [dropdownPosition, setDropdownPosition] = useState('bottom');
|
|
12
|
-
const ref = useRef<HTMLDivElement>(null);
|
|
13
|
-
const inputRef = useRef<HTMLDivElement>(null);
|
|
14
|
-
|
|
15
|
-
const adjustDropdownPosition = () => {
|
|
16
|
-
if (inputRef.current) {
|
|
17
|
-
const inputBoxRect = inputRef.current.getBoundingClientRect();
|
|
18
|
-
const viewportHeight = window.innerHeight;
|
|
19
|
-
|
|
20
|
-
const spaceAbove = inputBoxRect.top;
|
|
21
|
-
const spaceBelow = viewportHeight - inputBoxRect.bottom;
|
|
22
|
-
|
|
23
|
-
if (spaceAbove > spaceBelow) {
|
|
24
|
-
setDropdownPosition('top');
|
|
25
|
-
} else {
|
|
26
|
-
setDropdownPosition('bottom');
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const handleToggle = () => {
|
|
32
|
-
setIsOpen(prevIsOpen => !prevIsOpen);
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const handleSelect = (value: number) => {
|
|
36
|
-
onChange(value);
|
|
37
|
-
setIsOpen(false);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
const handleClickOutside = (event: MouseEvent) => {
|
|
41
|
-
if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
42
|
-
setIsOpen(false);
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
useEffect(() => {
|
|
47
|
-
if (isOpen) {
|
|
48
|
-
adjustDropdownPosition();
|
|
49
|
-
window.addEventListener('resize', adjustDropdownPosition);
|
|
50
|
-
} else {
|
|
51
|
-
window.removeEventListener('resize', adjustDropdownPosition);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return () => {
|
|
55
|
-
window.removeEventListener('resize', adjustDropdownPosition);
|
|
56
|
-
};
|
|
57
|
-
}, [isOpen]);
|
|
58
|
-
|
|
59
|
-
useEffect(() => {
|
|
60
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
61
|
-
return () => {
|
|
62
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
63
|
-
};
|
|
64
|
-
}, []);
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<div className="custom-select" ref={ref}>
|
|
68
|
-
<div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
|
|
69
|
-
{selectedValue}
|
|
70
|
-
</div>
|
|
71
|
-
{isOpen && (
|
|
72
|
-
<ul className={`custom-select-options ${dropdownPosition}`}>
|
|
73
|
-
{options.map(option => (
|
|
74
|
-
<li
|
|
75
|
-
key={option}
|
|
76
|
-
className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
|
|
77
|
-
onClick={() => handleSelect(option)}
|
|
78
|
-
>
|
|
79
|
-
{option}
|
|
80
|
-
</li>
|
|
81
|
-
))}
|
|
82
|
-
</ul>
|
|
83
|
-
)}
|
|
84
|
-
</div>
|
|
85
|
-
);
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
export default CustomSelect;
|
|
1
|
+
import React, { FC, useState, useEffect, useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
type CustomSelectProps = {
|
|
4
|
+
options: number[];
|
|
5
|
+
selectedValue: number;
|
|
6
|
+
onChange: (value: number) => void;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
|
|
10
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
11
|
+
const [dropdownPosition, setDropdownPosition] = useState('bottom');
|
|
12
|
+
const ref = useRef<HTMLDivElement>(null);
|
|
13
|
+
const inputRef = useRef<HTMLDivElement>(null);
|
|
14
|
+
|
|
15
|
+
const adjustDropdownPosition = () => {
|
|
16
|
+
if (inputRef.current) {
|
|
17
|
+
const inputBoxRect = inputRef.current.getBoundingClientRect();
|
|
18
|
+
const viewportHeight = window.innerHeight;
|
|
19
|
+
|
|
20
|
+
const spaceAbove = inputBoxRect.top;
|
|
21
|
+
const spaceBelow = viewportHeight - inputBoxRect.bottom;
|
|
22
|
+
|
|
23
|
+
if (spaceAbove > spaceBelow) {
|
|
24
|
+
setDropdownPosition('top');
|
|
25
|
+
} else {
|
|
26
|
+
setDropdownPosition('bottom');
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const handleToggle = () => {
|
|
32
|
+
setIsOpen(prevIsOpen => !prevIsOpen);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const handleSelect = (value: number) => {
|
|
36
|
+
onChange(value);
|
|
37
|
+
setIsOpen(false);
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const handleClickOutside = (event: MouseEvent) => {
|
|
41
|
+
if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
42
|
+
setIsOpen(false);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (isOpen) {
|
|
48
|
+
adjustDropdownPosition();
|
|
49
|
+
window.addEventListener('resize', adjustDropdownPosition);
|
|
50
|
+
} else {
|
|
51
|
+
window.removeEventListener('resize', adjustDropdownPosition);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
return () => {
|
|
55
|
+
window.removeEventListener('resize', adjustDropdownPosition);
|
|
56
|
+
};
|
|
57
|
+
}, [isOpen]);
|
|
58
|
+
|
|
59
|
+
useEffect(() => {
|
|
60
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
61
|
+
return () => {
|
|
62
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
63
|
+
};
|
|
64
|
+
}, []);
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<div className="custom-select" ref={ref}>
|
|
68
|
+
<div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
|
|
69
|
+
{selectedValue}
|
|
70
|
+
</div>
|
|
71
|
+
{isOpen && (
|
|
72
|
+
<ul className={`custom-select-options ${dropdownPosition}`}>
|
|
73
|
+
{options.map(option => (
|
|
74
|
+
<li
|
|
75
|
+
key={option}
|
|
76
|
+
className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
|
|
77
|
+
onClick={() => handleSelect(option)}
|
|
78
|
+
>
|
|
79
|
+
{option}
|
|
80
|
+
</li>
|
|
81
|
+
))}
|
|
82
|
+
</ul>
|
|
83
|
+
)}
|
|
84
|
+
</div>
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export default CustomSelect;
|
|
@@ -87,7 +87,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
87
87
|
emptySubTitle,
|
|
88
88
|
emptyTitle,
|
|
89
89
|
tableView = true,
|
|
90
|
-
enableTableToggle =
|
|
90
|
+
enableTableToggle = true,
|
|
91
91
|
cardColumLimit = 5,
|
|
92
92
|
childDetailHeading = '',
|
|
93
93
|
isCustomTableCardView = false,
|
|
@@ -97,7 +97,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
97
97
|
loadMoreData,
|
|
98
98
|
infiniteLoading,
|
|
99
99
|
infiniteScroll = false,
|
|
100
|
-
viewMode: propsViewMode
|
|
100
|
+
viewMode: propsViewMode,
|
|
101
|
+
rowViewToggle = true,
|
|
102
|
+
defaultRowView = true,
|
|
103
|
+
fullWidthView = false,
|
|
104
|
+
setTableFullView,
|
|
105
|
+
setRowViewToggle
|
|
101
106
|
}) => {
|
|
102
107
|
const [loading, setLoading] = useState(false);
|
|
103
108
|
const [columns, setColumns] = useState(propColumn);
|
|
@@ -215,13 +220,14 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
215
220
|
}
|
|
216
221
|
}, [wordWrap]);
|
|
217
222
|
useEffect(() => {
|
|
218
|
-
if (
|
|
223
|
+
if (!defaultRowView) {
|
|
219
224
|
setWordWrap('break-word');
|
|
220
225
|
} else {
|
|
221
226
|
setWordWrap(false);
|
|
222
227
|
}
|
|
223
228
|
REFRESH_KEY = REFRESH_KEY + 1;
|
|
224
|
-
}, [
|
|
229
|
+
}, [defaultRowView]);
|
|
230
|
+
|
|
225
231
|
const onReorder = useCallback((columns: QbsColumnProps[]) => {
|
|
226
232
|
setColumns(columns);
|
|
227
233
|
}, []);
|
|
@@ -258,7 +264,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
258
264
|
searchPlaceholder: searchPlaceholder,
|
|
259
265
|
setTableViewToggle: setTableViewToggle,
|
|
260
266
|
tableViewToggle: tableViewToggle,
|
|
261
|
-
enableTableToggle: enableTableToggle
|
|
267
|
+
enableTableToggle: enableTableToggle,
|
|
268
|
+
rowViewToggle: rowViewToggle,
|
|
269
|
+
defaultRowView: defaultRowView,
|
|
270
|
+
fullWidthView: fullWidthView,
|
|
271
|
+
setTableFullView: setTableFullView,
|
|
272
|
+
setRowViewToggle: setRowViewToggle
|
|
262
273
|
};
|
|
263
274
|
const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
|
|
264
275
|
|
package/src/qbsTable/Toolbar.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import React, { useCallback, useRef, useState } from 'react';
|
|
|
3
3
|
import useResponsiveStore from '../utils/useResponsiveStore';
|
|
4
4
|
import { QbsTableToolbarProps } from './commontypes';
|
|
5
5
|
import debounce from './utilities/debounce';
|
|
6
|
-
import { CardView, TableView } from './utilities/icons';
|
|
6
|
+
import { CardView, ContentView, DefaultView, ExpandIcon, TableView } from './utilities/icons';
|
|
7
7
|
import SearchInput from './utilities/SearchInput';
|
|
8
8
|
import { getRowDisplayRange } from './utilities/tablecalc';
|
|
9
9
|
import TooltipComponent from './utilities/ToolTip';
|
|
@@ -27,7 +27,12 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
|
|
|
27
27
|
searchPlaceholder,
|
|
28
28
|
tableViewToggle,
|
|
29
29
|
setTableViewToggle,
|
|
30
|
-
enableTableToggle = false
|
|
30
|
+
enableTableToggle = false,
|
|
31
|
+
rowViewToggle = false,
|
|
32
|
+
defaultRowView = true,
|
|
33
|
+
fullWidthView = false,
|
|
34
|
+
setTableFullView,
|
|
35
|
+
setRowViewToggle
|
|
31
36
|
}) => {
|
|
32
37
|
const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
|
|
33
38
|
const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
|
|
@@ -103,7 +108,31 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
|
|
|
103
108
|
</span>
|
|
104
109
|
)}
|
|
105
110
|
{tableHeaderActions}
|
|
106
|
-
<div className=" pr-1 cursor-pointer relative
|
|
111
|
+
<div className=" pr-1 cursor-pointer relative table_custom_ctions ">
|
|
112
|
+
{rowViewToggle && (
|
|
113
|
+
<div className="flex gap-2 qbs-row-switch-cntainer">
|
|
114
|
+
<div className="flex gap-2 table_cell_style">
|
|
115
|
+
<TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Default View'}>
|
|
116
|
+
<div onClick={() => setRowViewToggle?.(true)}>
|
|
117
|
+
<DefaultView className={`${defaultRowView ? 'active' : ''}`} />
|
|
118
|
+
</div>
|
|
119
|
+
</TooltipComponent>
|
|
120
|
+
<TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Compact View'}>
|
|
121
|
+
<div onClick={() => setRowViewToggle?.(false)}>
|
|
122
|
+
<ContentView className={`${!defaultRowView ? 'active' : ''}`} />
|
|
123
|
+
</div>
|
|
124
|
+
</TooltipComponent>
|
|
125
|
+
</div>
|
|
126
|
+
<div className=" table_full_width">
|
|
127
|
+
<TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Full Screen'}>
|
|
128
|
+
<div onClick={() => setTableFullView?.(!fullWidthView)}>
|
|
129
|
+
<ExpandIcon className={`${fullWidthView ? 'active' : ''}`} />
|
|
130
|
+
</div>
|
|
131
|
+
</TooltipComponent>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
)}
|
|
135
|
+
|
|
107
136
|
{enableTableToggle && !isMobile && (
|
|
108
137
|
<div className="qbs-table-top-icons flex gap-2">
|
|
109
138
|
<TooltipComponent tableBodyRef={toolbarRef} title={'Switch to Table View'}>
|
|
@@ -130,12 +130,16 @@ export interface QbsTableProps {
|
|
|
130
130
|
handleTableCardView?: (data: any) => React.ReactNode;
|
|
131
131
|
isCustomTableCardView?: boolean;
|
|
132
132
|
handleCustomCardLoader?: () => React.ReactNode;
|
|
133
|
-
hasMoreData?: boolean
|
|
134
|
-
loadMoreData?: ()=> void
|
|
135
|
-
infiniteScroll?: boolean
|
|
136
|
-
infiniteLoading?:boolean
|
|
137
|
-
viewMode?:string
|
|
138
|
-
|
|
133
|
+
hasMoreData?: boolean;
|
|
134
|
+
loadMoreData?: () => void;
|
|
135
|
+
infiniteScroll?: boolean;
|
|
136
|
+
infiniteLoading?: boolean;
|
|
137
|
+
viewMode?: string;
|
|
138
|
+
rowViewToggle?: boolean;
|
|
139
|
+
defaultRowView?: boolean;
|
|
140
|
+
fullWidthView?: boolean;
|
|
141
|
+
setTableFullView?: (value: boolean) => void;
|
|
142
|
+
setRowViewToggle?: (value: boolean) => void;
|
|
139
143
|
}
|
|
140
144
|
|
|
141
145
|
export interface QbsTableToolbarProps {
|
|
@@ -172,4 +176,9 @@ export interface QbsTableToolbarProps {
|
|
|
172
176
|
hidden?: boolean;
|
|
173
177
|
customHide?: string;
|
|
174
178
|
}[];
|
|
179
|
+
rowViewToggle?: boolean;
|
|
180
|
+
defaultRowView?: boolean;
|
|
181
|
+
fullWidthView?: boolean;
|
|
182
|
+
setTableFullView?: (value: boolean) => void;
|
|
183
|
+
setRowViewToggle?: (value: boolean) => void;
|
|
175
184
|
}
|
|
@@ -24,9 +24,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
|
|
|
24
24
|
setIsOpen,
|
|
25
25
|
handleResetColumns,
|
|
26
26
|
handleColumnToggle,
|
|
27
|
-
tableHeight = 450
|
|
28
|
-
viewMode,
|
|
29
|
-
setViewMode
|
|
27
|
+
tableHeight = 450
|
|
30
28
|
}) => {
|
|
31
29
|
const [draggedItem, setDraggedItem] = useState<number | null>(null);
|
|
32
30
|
const popupRef = useRef<HTMLDivElement | null>(null);
|
|
@@ -243,7 +241,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
|
|
|
243
241
|
</div>
|
|
244
242
|
</>
|
|
245
243
|
)}
|
|
246
|
-
<div className="qbs-table-popup-item">
|
|
244
|
+
{/* <div className="qbs-table-popup-item">
|
|
247
245
|
<label className="flex items-center gap-2">
|
|
248
246
|
<input
|
|
249
247
|
type="radio"
|
|
@@ -263,7 +261,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
|
|
|
263
261
|
/>
|
|
264
262
|
Default View
|
|
265
263
|
</label>
|
|
266
|
-
</div>
|
|
264
|
+
</div> */}
|
|
267
265
|
</div>
|
|
268
266
|
</div>
|
|
269
267
|
)}
|
|
@@ -18,7 +18,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
|
|
|
18
18
|
}}
|
|
19
19
|
>
|
|
20
20
|
<div style={{ width: 145, marginBottom: 20 }} className="nodata-img">
|
|
21
|
-
|
|
21
|
+
<svg
|
|
22
22
|
xmlns="http://www.w3.org/2000/svg"
|
|
23
23
|
width="148"
|
|
24
24
|
height="132"
|
|
@@ -71,7 +71,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
|
|
|
71
71
|
fill="#797979"
|
|
72
72
|
d="M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
|
|
73
73
|
></path>
|
|
74
|
-
</svg>
|
|
74
|
+
</svg>{' '}
|
|
75
75
|
</div>
|
|
76
76
|
<p className="text-center text-common font-bold text-blackAlt nodata-title">{title}</p>
|
|
77
77
|
<span className="text-xxs font-medium text-grey-medium nodata-sub-title">{subtitle}</span>
|
|
@@ -134,3 +134,80 @@ export const TableView: React.FC<any> = ({ className }) => {
|
|
|
134
134
|
</svg>
|
|
135
135
|
);
|
|
136
136
|
};
|
|
137
|
+
|
|
138
|
+
export const ExpandIcon: React.FC<any> = ({ className }) => {
|
|
139
|
+
return (
|
|
140
|
+
<svg
|
|
141
|
+
width="16"
|
|
142
|
+
height="16"
|
|
143
|
+
className={className}
|
|
144
|
+
viewBox="0 0 16 16"
|
|
145
|
+
fill="none"
|
|
146
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
147
|
+
>
|
|
148
|
+
<path
|
|
149
|
+
d="M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668"
|
|
150
|
+
stroke="#585858"
|
|
151
|
+
strokeWidth="1.5"
|
|
152
|
+
strokeLinecap="round"
|
|
153
|
+
strokeLinejoin="round"
|
|
154
|
+
/>
|
|
155
|
+
</svg>
|
|
156
|
+
);
|
|
157
|
+
};
|
|
158
|
+
export const ContentView: React.FC<any> = ({ className }) => {
|
|
159
|
+
return (
|
|
160
|
+
<svg
|
|
161
|
+
width="16"
|
|
162
|
+
height="17"
|
|
163
|
+
className={className}
|
|
164
|
+
viewBox="0 0 16 17"
|
|
165
|
+
fill="none"
|
|
166
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
167
|
+
>
|
|
168
|
+
<path
|
|
169
|
+
d="M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z"
|
|
170
|
+
stroke="#585858"
|
|
171
|
+
strokeLinecap="round"
|
|
172
|
+
strokeLinejoin="round"
|
|
173
|
+
/>
|
|
174
|
+
<path
|
|
175
|
+
d="M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z"
|
|
176
|
+
stroke="#585858"
|
|
177
|
+
strokeLinecap="round"
|
|
178
|
+
strokeLinejoin="round"
|
|
179
|
+
/>
|
|
180
|
+
</svg>
|
|
181
|
+
);
|
|
182
|
+
};
|
|
183
|
+
export const DefaultView: React.FC<any> = ({ className }) => {
|
|
184
|
+
return (
|
|
185
|
+
<svg
|
|
186
|
+
width="16"
|
|
187
|
+
height="17"
|
|
188
|
+
className={className}
|
|
189
|
+
viewBox="0 0 16 17"
|
|
190
|
+
fill="none"
|
|
191
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
192
|
+
>
|
|
193
|
+
<path
|
|
194
|
+
fillRule="evenodd"
|
|
195
|
+
clipRule="evenodd"
|
|
196
|
+
d="M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z"
|
|
197
|
+
fill="#585858"
|
|
198
|
+
/>
|
|
199
|
+
<path
|
|
200
|
+
fillRule="evenodd"
|
|
201
|
+
clipRule="evenodd"
|
|
202
|
+
d="M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z"
|
|
203
|
+
fill="#585858"
|
|
204
|
+
/>
|
|
205
|
+
<path
|
|
206
|
+
fillRule="evenodd"
|
|
207
|
+
clipRule="evenodd"
|
|
208
|
+
d="M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z"
|
|
209
|
+
fill="#585858"
|
|
210
|
+
/>
|
|
211
|
+
</svg>
|
|
212
|
+
);
|
|
213
|
+
};
|
|
@@ -8,7 +8,7 @@ import defer from './defer';
|
|
|
8
8
|
|
|
9
9
|
interface TableRowsProps<Row, Key> {
|
|
10
10
|
prefix: (str: string) => string;
|
|
11
|
-
wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all'| 'fit-content';
|
|
11
|
+
wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all' | 'fit-content';
|
|
12
12
|
data: readonly Row[];
|
|
13
13
|
expandedRowKeys: readonly Key[];
|
|
14
14
|
}
|