@digigov/ui 0.32.2 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -1
- package/admin/Drawer/__stories__/Default.js +3 -0
- package/admin/Dropdown/index.d.ts +1 -1
- package/admin/Dropdown/index.js +14 -3
- package/core/CaretContainer/index.d.ts +3 -0
- package/core/CaretContainer/index.js +30 -0
- package/core/Table/Table.stories.d.ts +1 -0
- package/core/Table/Table.stories.js +14 -0
- package/core/Table/Table.stories.playwright.json +16 -0
- package/core/Table/__stories__/WithSortFilters.d.ts +2 -0
- package/core/Table/__stories__/WithSortFilters.js +141 -0
- package/core/Table/index.d.ts +22 -1
- package/core/Table/index.js +210 -24
- package/core/index.d.ts +1 -0
- package/core/index.js +13 -0
- package/es/admin/Drawer/__stories__/Default.js +3 -0
- package/es/admin/Dropdown/index.js +14 -3
- package/es/core/CaretContainer/index.js +3 -0
- package/es/core/Table/Table.stories.js +1 -0
- package/es/core/Table/Table.stories.playwright.json +16 -0
- package/es/core/Table/__stories__/WithSortFilters.js +126 -0
- package/es/core/Table/index.js +170 -1
- package/es/core/index.js +1 -0
- package/es/registry.js +2 -0
- package/esm/admin/Drawer/__stories__/Default.js +3 -0
- package/esm/admin/Dropdown/index.js +14 -3
- package/esm/core/CaretContainer/index.js +3 -0
- package/esm/core/Table/Table.stories.js +1 -0
- package/esm/core/Table/Table.stories.playwright.json +16 -0
- package/esm/core/Table/__stories__/WithSortFilters.js +126 -0
- package/esm/core/Table/index.js +170 -1
- package/esm/core/index.js +1 -0
- package/esm/index.js +1 -1
- package/esm/registry.js +2 -0
- package/package.json +3 -3
- package/registry.d.ts +1 -0
- package/registry.js +3 -0
- package/src/admin/Drawer/__stories__/Default.tsx +3 -1
- package/src/admin/Dropdown/index.tsx +16 -7
- package/src/core/CaretContainer/index.tsx +3 -0
- package/src/core/Table/Table.stories.js +1 -0
- package/src/core/Table/Table.stories.playwright.json +16 -0
- package/src/core/Table/__stories__/WithSortFilters.tsx +189 -0
- package/src/core/Table/index.tsx +195 -2
- package/src/core/index.ts +1 -0
- package/src/registry.js +2 -0
package/es/core/Table/index.js
CHANGED
|
@@ -1,3 +1,172 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
|
+
var _excluded = ["sortedAscDesc", "sortedField", "sortedDirectionValue", "headerItems", "sortedData", "children"];
|
|
6
|
+
import React, { useCallback, useState, useRef } from 'react';
|
|
7
|
+
import Table from '@digigov/react-core/Table';
|
|
8
|
+
import { useMemo } from 'react';
|
|
9
|
+
import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/admin/Dropdown';
|
|
10
|
+
import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
|
|
11
|
+
import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
|
|
12
|
+
import { CaretIcon } from '@digigov/ui/core/SvgIcon';
|
|
13
|
+
import TableHeadCellBase from '@digigov/react-core/TableHeadCell';
|
|
14
|
+
import CaretContainer from '@digigov/ui/core/CaretContainer';
|
|
15
|
+
|
|
16
|
+
var useSortableData = function useSortableData(items) {
|
|
17
|
+
var _useState = useState(''),
|
|
18
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
19
|
+
field = _useState2[0],
|
|
20
|
+
setField = _useState2[1];
|
|
21
|
+
|
|
22
|
+
var _useState3 = useState(0),
|
|
23
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
24
|
+
directionValue = _useState4[0],
|
|
25
|
+
setDirectionValue = _useState4[1];
|
|
26
|
+
|
|
27
|
+
var sortedItems = useMemo(function () {
|
|
28
|
+
var sortableItems = _toConsumableArray(items);
|
|
29
|
+
|
|
30
|
+
if (sortableItems.length === 0) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (field) {
|
|
35
|
+
sortableItems.sort(function (a, b) {
|
|
36
|
+
if (a[field] === null) return 1;
|
|
37
|
+
if (b[field] === null) return -1;
|
|
38
|
+
if (a[field] === null && b[field] === null) return 0;
|
|
39
|
+
return a[field].toString().localeCompare(b[field].toString(), undefined, {
|
|
40
|
+
numeric: true
|
|
41
|
+
}) * (directionValue > 0 ? 1 : -1);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return sortableItems;
|
|
46
|
+
}, [items, directionValue, field]);
|
|
47
|
+
|
|
48
|
+
var sortAscDesc = function sortAscDesc(item, value) {
|
|
49
|
+
setDirectionValue(value);
|
|
50
|
+
setField(item);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
return {
|
|
54
|
+
sortedData: sortedItems,
|
|
55
|
+
sortedProps: {
|
|
56
|
+
sortedData: sortedItems,
|
|
57
|
+
sortedDirectionValue: directionValue,
|
|
58
|
+
sortedField: field,
|
|
59
|
+
sortedAscDesc: sortAscDesc
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
var TableHeadCellSort = /*#__PURE__*/React.forwardRef(function TableHeadCellSort(_ref, ref) {
|
|
65
|
+
var props = _extends({}, _ref);
|
|
66
|
+
|
|
67
|
+
return /*#__PURE__*/React.createElement(TableHeadCellSortBase, _extends({
|
|
68
|
+
ref: ref
|
|
69
|
+
}, props));
|
|
70
|
+
});
|
|
71
|
+
export var TableHeadCellSortBase = /*#__PURE__*/React.forwardRef(function TableHeadCellSortBase(_ref2, ref) {
|
|
72
|
+
var sortedAscDesc = _ref2.sortedAscDesc,
|
|
73
|
+
sortedField = _ref2.sortedField,
|
|
74
|
+
sortedDirectionValue = _ref2.sortedDirectionValue,
|
|
75
|
+
headerItems = _ref2.headerItems,
|
|
76
|
+
sortedData = _ref2.sortedData,
|
|
77
|
+
children = _ref2.children,
|
|
78
|
+
props = _objectWithoutProperties(_ref2, _excluded);
|
|
79
|
+
|
|
80
|
+
var innerRef = useRef();
|
|
81
|
+
|
|
82
|
+
var _ref3 = headerItems || {},
|
|
83
|
+
name = _ref3.name,
|
|
84
|
+
sortLabels = _ref3.sortLabels;
|
|
85
|
+
|
|
86
|
+
var _useState5 = useState(0),
|
|
87
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
88
|
+
sortDirection = _useState6[0],
|
|
89
|
+
setSortDirection = _useState6[1];
|
|
90
|
+
|
|
91
|
+
var setSortAscDesc = useCallback(function (name, value) {
|
|
92
|
+
if (sortedAscDesc) {
|
|
93
|
+
if (sortedField !== name) {
|
|
94
|
+
sortedAscDesc('', 0);
|
|
95
|
+
setSortDirection(value);
|
|
96
|
+
sortedAscDesc(name, value);
|
|
97
|
+
} else {
|
|
98
|
+
if (value !== sortDirection) {
|
|
99
|
+
setSortDirection(value);
|
|
100
|
+
sortedAscDesc(name, value);
|
|
101
|
+
} else {
|
|
102
|
+
setSortDirection(0);
|
|
103
|
+
sortedAscDesc('', 0);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}, [sortedField, sortedDirectionValue, sortDirection]);
|
|
108
|
+
|
|
109
|
+
var _onKeyDown = useCallback(function (e, name, value) {
|
|
110
|
+
if (e.key === 'Enter' && innerRef.current.contains(e.target)) {
|
|
111
|
+
if (innerRef.current.open) {
|
|
112
|
+
setSortAscDesc(name, value);
|
|
113
|
+
innerRef.current.open = false;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}, [name, sortDirection]);
|
|
117
|
+
|
|
118
|
+
var setDisabled = useCallback(function (sortedData) {
|
|
119
|
+
return sortedData === undefined || sortedData.length === 0 ? true : false;
|
|
120
|
+
}, [sortedData]);
|
|
121
|
+
var setCaretColor = useCallback(function (value) {
|
|
122
|
+
if (sortedField === name) {
|
|
123
|
+
return sortedDirectionValue === value ? 'dark' : 'gray';
|
|
124
|
+
} else {
|
|
125
|
+
return 'gray';
|
|
126
|
+
}
|
|
127
|
+
}, [sortedDirectionValue, sortedField]);
|
|
128
|
+
return /*#__PURE__*/React.createElement(TableHeadCellBase, _extends({}, props, {
|
|
129
|
+
ref: ref
|
|
130
|
+
}), /*#__PURE__*/React.createElement(Dropdown, {
|
|
131
|
+
tabIndex: 0,
|
|
132
|
+
disabled: setDisabled(sortedData),
|
|
133
|
+
ref: innerRef
|
|
134
|
+
}, /*#__PURE__*/React.createElement(DropdownButton, {
|
|
135
|
+
variant: "link",
|
|
136
|
+
underline: sortedField === name ? true : false
|
|
137
|
+
}, children, /*#__PURE__*/React.createElement(CaretContainer, {
|
|
138
|
+
marginLeft: 1
|
|
139
|
+
}, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
|
|
140
|
+
return /*#__PURE__*/React.createElement(CaretIcon, {
|
|
141
|
+
key: index,
|
|
142
|
+
direction: obj.value == 1 ? 'up' : 'down',
|
|
143
|
+
size: "m",
|
|
144
|
+
variant: setCaretColor(obj.value)
|
|
145
|
+
});
|
|
146
|
+
}))), /*#__PURE__*/React.createElement(DropdownContent, null, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
|
|
147
|
+
return /*#__PURE__*/React.createElement(NavVertical, {
|
|
148
|
+
key: index
|
|
149
|
+
}, /*#__PURE__*/React.createElement(NavVerticalItem, _extends({}, sortedField === name && sortedDirectionValue === obj.value && {
|
|
150
|
+
active: true
|
|
151
|
+
}, {
|
|
152
|
+
tabIndex: 0,
|
|
153
|
+
onClick: function onClick() {
|
|
154
|
+
if (setSortAscDesc) {
|
|
155
|
+
setSortAscDesc(name, obj.value);
|
|
156
|
+
innerRef.current.open = false;
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
onKeyDown: function onKeyDown(e) {
|
|
160
|
+
_onKeyDown(e, name, obj.value);
|
|
161
|
+
}
|
|
162
|
+
}), /*#__PURE__*/React.createElement(CaretIcon, {
|
|
163
|
+
direction: obj.value == 1 ? 'up' : 'down',
|
|
164
|
+
marginRight: 1,
|
|
165
|
+
marginTop: 1,
|
|
166
|
+
size: "m"
|
|
167
|
+
}), obj.label));
|
|
168
|
+
}))));
|
|
169
|
+
});
|
|
1
170
|
export * from '@digigov/react-core/TableContainer';
|
|
2
171
|
export * from '@digigov/react-core/Table';
|
|
3
172
|
export * from '@digigov/react-core/TableBody';
|
|
@@ -8,5 +177,5 @@ export * from '@digigov/react-core/TableHeadCell';
|
|
|
8
177
|
export * from '@digigov/react-core/TableRow';
|
|
9
178
|
export * from '@digigov/react-core/TableNoDataRow';
|
|
10
179
|
export * from '@digigov/ui/core/Table/TableFloatingScroll';
|
|
11
|
-
|
|
180
|
+
export { TableHeadCellSort, useSortableData };
|
|
12
181
|
export default Table;
|
package/es/core/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export * from '@digigov/ui/core/Accordion';
|
|
|
6
6
|
export * from '@digigov/ui/core/Blockquote';
|
|
7
7
|
export * from '@digigov/ui/core/Breadcrumbs';
|
|
8
8
|
export * from '@digigov/ui/core/Card';
|
|
9
|
+
export * from '@digigov/ui/core/CaretContainer';
|
|
9
10
|
export * from '@digigov/ui/core/Checkbox';
|
|
10
11
|
export * from '@digigov/ui/core/DateInputContainer';
|
|
11
12
|
export * from '@digigov/ui/core/Details';
|
package/es/registry.js
CHANGED
|
@@ -71,6 +71,7 @@ import * as _digigov_ui_core_Button_Icon from '@digigov/ui/core/Button/Icon';
|
|
|
71
71
|
import * as _digigov_ui_core_Button from '@digigov/ui/core/Button';
|
|
72
72
|
import * as _digigov_ui_core_Button_ThemeToggleButton from '@digigov/ui/core/Button/ThemeToggleButton';
|
|
73
73
|
import * as _digigov_ui_core_Card from '@digigov/ui/core/Card';
|
|
74
|
+
import * as _digigov_ui_core_CaretContainer from '@digigov/ui/core/CaretContainer';
|
|
74
75
|
import * as _digigov_ui_core_Checkbox from '@digigov/ui/core/Checkbox';
|
|
75
76
|
import * as _digigov_ui_core_DateInputContainer from '@digigov/ui/core/DateInputContainer';
|
|
76
77
|
import * as _digigov_ui_core_Details from '@digigov/ui/core/Details';
|
|
@@ -283,6 +284,7 @@ export default {
|
|
|
283
284
|
'@digigov/ui/core/Button': lazyImport(_digigov_ui_core_Button),
|
|
284
285
|
'@digigov/ui/core/Button/ThemeToggleButton': lazyImport(_digigov_ui_core_Button_ThemeToggleButton),
|
|
285
286
|
'@digigov/ui/core/Card': lazyImport(_digigov_ui_core_Card),
|
|
287
|
+
'@digigov/ui/core/CaretContainer': lazyImport(_digigov_ui_core_CaretContainer),
|
|
286
288
|
'@digigov/ui/core/Checkbox': lazyImport(_digigov_ui_core_Checkbox),
|
|
287
289
|
'@digigov/ui/core/DateInputContainer': lazyImport(_digigov_ui_core_DateInputContainer),
|
|
288
290
|
'@digigov/ui/core/Details': lazyImport(_digigov_ui_core_Details),
|
|
@@ -77,7 +77,9 @@ export var Default = function Default() {
|
|
|
77
77
|
|
|
78
78
|
var layout = 'vertical';
|
|
79
79
|
var border = false;
|
|
80
|
+
var fixed = false;
|
|
80
81
|
return /*#__PURE__*/React.createElement(Drawer, {
|
|
82
|
+
upRelative: "m",
|
|
81
83
|
direction: "left",
|
|
82
84
|
open: open
|
|
83
85
|
}, /*#__PURE__*/React.createElement(DrawerHeading, {
|
|
@@ -88,6 +90,7 @@ export var Default = function Default() {
|
|
|
88
90
|
layout: layout,
|
|
89
91
|
links: links,
|
|
90
92
|
border: border,
|
|
93
|
+
fixed: fixed,
|
|
91
94
|
"aria-label": "Nav list"
|
|
92
95
|
}, links.map(function (item, key) {
|
|
93
96
|
var _item$subMenu;
|
|
@@ -9,15 +9,22 @@ export * from '@digigov/react-extensions/admin/DropdownContent';
|
|
|
9
9
|
/**
|
|
10
10
|
* Dropdown component is used for showing more options with a button.
|
|
11
11
|
*/
|
|
12
|
-
export var Dropdown = function Dropdown(_ref) {
|
|
12
|
+
export var Dropdown = /*#__PURE__*/React.forwardRef(function Dropdown(_ref, ref) {
|
|
13
13
|
var _ref$closeBehaviour = _ref.closeBehaviour,
|
|
14
14
|
closeBehaviour = _ref$closeBehaviour === void 0 ? 'clickOutside' : _ref$closeBehaviour,
|
|
15
15
|
_ref$float = _ref["float"],
|
|
16
16
|
_float = _ref$float === void 0 ? false : _ref$float,
|
|
17
17
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
18
18
|
|
|
19
|
-
var innerRef = useRef();
|
|
19
|
+
var innerRef = ref || useRef();
|
|
20
20
|
useEffect(function () {
|
|
21
|
+
var keyDownHandler = function keyDownHandler(event) {
|
|
22
|
+
if (event.key === 'Escape') {
|
|
23
|
+
innerRef.current.open = false;
|
|
24
|
+
event.preventDefault();
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
|
|
21
28
|
var handleClickOutside = function handleClickOutside(event) {
|
|
22
29
|
if (innerRef.current && !innerRef.current.contains(event.target)) {
|
|
23
30
|
innerRef.current.open = false;
|
|
@@ -28,6 +35,8 @@ export var Dropdown = function Dropdown(_ref) {
|
|
|
28
35
|
document.addEventListener('click', handleClickOutside, true);
|
|
29
36
|
}
|
|
30
37
|
|
|
38
|
+
document.addEventListener('keydown', keyDownHandler);
|
|
39
|
+
|
|
31
40
|
var toggleFloat = function toggleFloat() {
|
|
32
41
|
var _innerRef$current;
|
|
33
42
|
|
|
@@ -75,6 +84,8 @@ export var Dropdown = function Dropdown(_ref) {
|
|
|
75
84
|
if (_float) {
|
|
76
85
|
innerRef.current.removeEventListener('toggle', toggleFloat);
|
|
77
86
|
}
|
|
87
|
+
|
|
88
|
+
document.removeEventListener('keydown', keyDownHandler);
|
|
78
89
|
};
|
|
79
90
|
}, []); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
80
91
|
// @ts-ignore
|
|
@@ -82,6 +93,6 @@ export var Dropdown = function Dropdown(_ref) {
|
|
|
82
93
|
return /*#__PURE__*/React.createElement(DropdownBase, _extends({
|
|
83
94
|
ref: innerRef
|
|
84
95
|
}, props));
|
|
85
|
-
};
|
|
96
|
+
});
|
|
86
97
|
export { DropdownBase };
|
|
87
98
|
export default Dropdown;
|
|
@@ -20,5 +20,6 @@ export * from './__stories__/WithLoader';
|
|
|
20
20
|
export * from './__stories__/DefinedWidth';
|
|
21
21
|
export * from './__stories__/Densed';
|
|
22
22
|
export * from './__stories__/MultipleProps';
|
|
23
|
+
export * from './__stories__/WithSortFilters';
|
|
23
24
|
export * from './__stories__/WithFloatingScroll';
|
|
24
25
|
export * from './__stories__/Full';
|
|
@@ -16,6 +16,22 @@
|
|
|
16
16
|
"title": "Toggle Loading"
|
|
17
17
|
}
|
|
18
18
|
]
|
|
19
|
+
},
|
|
20
|
+
"digigov-ui-core-table--with-sort-filters": {
|
|
21
|
+
"actionSets": [
|
|
22
|
+
{
|
|
23
|
+
"actions": [
|
|
24
|
+
{
|
|
25
|
+
"name": "click",
|
|
26
|
+
"args": {
|
|
27
|
+
"selector": "html>body>div:nth-child(5)>div>div>table>thead>tr>th:nth-child(2)>details>summary"
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
"id": "Gdm_Fpollj7d",
|
|
32
|
+
"title": "Table with filter action"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
19
35
|
}
|
|
20
36
|
}
|
|
21
37
|
}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCellSort, TableDataCell, TableNoDataRow, useSortableData } from '@digigov/ui/core/Table';
|
|
4
|
+
var headerItems = [{
|
|
5
|
+
name: 'product',
|
|
6
|
+
label: 'Προϊόν',
|
|
7
|
+
sortLabels: [{
|
|
8
|
+
label: 'Αλφαβητική σειρά (Α -> Ω)',
|
|
9
|
+
direction: 'asc',
|
|
10
|
+
value: 1
|
|
11
|
+
}, {
|
|
12
|
+
label: 'Αλφαβητική σειρά (Ω -> Α)',
|
|
13
|
+
direction: 'desc',
|
|
14
|
+
value: -1
|
|
15
|
+
}]
|
|
16
|
+
}, {
|
|
17
|
+
name: 'price',
|
|
18
|
+
label: 'Τιμή',
|
|
19
|
+
sortLabels: [{
|
|
20
|
+
label: 'Αύξουσα σειρά',
|
|
21
|
+
direction: 'ascending',
|
|
22
|
+
value: 1
|
|
23
|
+
}, {
|
|
24
|
+
label: 'Φθίνουσα σειρά',
|
|
25
|
+
direction: 'descending',
|
|
26
|
+
value: -1
|
|
27
|
+
}]
|
|
28
|
+
}, {
|
|
29
|
+
name: 'stock',
|
|
30
|
+
label: 'Στοκ',
|
|
31
|
+
sortLabels: [{
|
|
32
|
+
label: 'Αύξουσα σειρά',
|
|
33
|
+
direction: 'ascending',
|
|
34
|
+
value: 1
|
|
35
|
+
}, {
|
|
36
|
+
label: 'Φθίνουσα σειρά',
|
|
37
|
+
direction: 'descending',
|
|
38
|
+
value: -1
|
|
39
|
+
}]
|
|
40
|
+
}, {
|
|
41
|
+
name: 'date',
|
|
42
|
+
label: 'Ημερομηνία',
|
|
43
|
+
sortLabels: [{
|
|
44
|
+
label: 'Αύξουσα σειρά',
|
|
45
|
+
direction: 'ascending',
|
|
46
|
+
value: 1
|
|
47
|
+
}, {
|
|
48
|
+
label: 'Φθίνουσα σειρά',
|
|
49
|
+
direction: 'descending',
|
|
50
|
+
value: -1
|
|
51
|
+
}]
|
|
52
|
+
}];
|
|
53
|
+
var data = [{
|
|
54
|
+
id: 1,
|
|
55
|
+
product: 'Τυρί',
|
|
56
|
+
price: '4.9€',
|
|
57
|
+
stock: 20,
|
|
58
|
+
date: '2013-04-01'
|
|
59
|
+
}, {
|
|
60
|
+
id: 2,
|
|
61
|
+
product: 'Γάλα',
|
|
62
|
+
price: '1.9€',
|
|
63
|
+
stock: 32,
|
|
64
|
+
date: '2013-01-01'
|
|
65
|
+
}, {
|
|
66
|
+
id: 3,
|
|
67
|
+
product: 'Γιαούρτι',
|
|
68
|
+
price: '2.4€',
|
|
69
|
+
stock: 12,
|
|
70
|
+
date: '2002-04-12'
|
|
71
|
+
}, {
|
|
72
|
+
id: 4,
|
|
73
|
+
product: 'Κρέμα',
|
|
74
|
+
price: '3.9€',
|
|
75
|
+
stock: 8,
|
|
76
|
+
date: '2011-12-12'
|
|
77
|
+
}, {
|
|
78
|
+
id: 5,
|
|
79
|
+
product: 'Βούτυρο',
|
|
80
|
+
price: '0.9€',
|
|
81
|
+
stock: 99,
|
|
82
|
+
date: '2019-06-01'
|
|
83
|
+
}, {
|
|
84
|
+
id: 6,
|
|
85
|
+
product: 'Καφές',
|
|
86
|
+
price: '2.9€',
|
|
87
|
+
stock: 86,
|
|
88
|
+
date: '2023-02-11'
|
|
89
|
+
}, {
|
|
90
|
+
id: 7,
|
|
91
|
+
product: 'Ψωμί',
|
|
92
|
+
price: '99€',
|
|
93
|
+
stock: 12,
|
|
94
|
+
date: '2000-12-12'
|
|
95
|
+
}];
|
|
96
|
+
|
|
97
|
+
var _ref = /*#__PURE__*/React.createElement(TableCaption, null, "Table of products");
|
|
98
|
+
|
|
99
|
+
var _ref2 = /*#__PURE__*/React.createElement(TableNoDataRow, null, "No data");
|
|
100
|
+
|
|
101
|
+
export var WithSortFilters = function WithSortFilters() {
|
|
102
|
+
var _useSortableData = useSortableData(data),
|
|
103
|
+
sortedData = _useSortableData.sortedData,
|
|
104
|
+
sortedProps = _useSortableData.sortedProps;
|
|
105
|
+
|
|
106
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
107
|
+
className: "example"
|
|
108
|
+
}, /*#__PURE__*/React.createElement(TableContainer
|
|
109
|
+
/* Possible style solution in order to display dropdown properly when we have only one table row
|
|
110
|
+
* style={{
|
|
111
|
+
* overflow: 'inherit',
|
|
112
|
+
* }}
|
|
113
|
+
*/
|
|
114
|
+
, null, /*#__PURE__*/React.createElement(Table, null, _ref, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, headerItems && headerItems.length > 0 && headerItems.map(function (header, index) {
|
|
115
|
+
return /*#__PURE__*/React.createElement(TableHeadCellSort, _extends({
|
|
116
|
+
key: index
|
|
117
|
+
}, sortedProps, {
|
|
118
|
+
headerItems: header
|
|
119
|
+
}), header.label);
|
|
120
|
+
}))), /*#__PURE__*/React.createElement(TableBody, null, sortedData && sortedData.length > 0 ? sortedData.map(function (d, index) {
|
|
121
|
+
return /*#__PURE__*/React.createElement(TableRow, {
|
|
122
|
+
key: index
|
|
123
|
+
}, /*#__PURE__*/React.createElement(TableDataCell, null, d.product), /*#__PURE__*/React.createElement(TableDataCell, null, d.price), /*#__PURE__*/React.createElement(TableDataCell, null, d.stock), /*#__PURE__*/React.createElement(TableDataCell, null, new Date(d.date).toLocaleDateString('en-GB')));
|
|
124
|
+
}) : _ref2))));
|
|
125
|
+
};
|
|
126
|
+
export default WithSortFilters;
|
package/esm/core/Table/index.js
CHANGED
|
@@ -1,3 +1,172 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
4
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
|
+
var _excluded = ["sortedAscDesc", "sortedField", "sortedDirectionValue", "headerItems", "sortedData", "children"];
|
|
6
|
+
import React, { useCallback, useState, useRef } from 'react';
|
|
7
|
+
import Table from '@digigov/react-core/Table';
|
|
8
|
+
import { useMemo } from 'react';
|
|
9
|
+
import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/admin/Dropdown';
|
|
10
|
+
import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
|
|
11
|
+
import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
|
|
12
|
+
import { CaretIcon } from '@digigov/ui/core/SvgIcon';
|
|
13
|
+
import TableHeadCellBase from '@digigov/react-core/TableHeadCell';
|
|
14
|
+
import CaretContainer from '@digigov/ui/core/CaretContainer';
|
|
15
|
+
|
|
16
|
+
var useSortableData = function useSortableData(items) {
|
|
17
|
+
var _useState = useState(''),
|
|
18
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
19
|
+
field = _useState2[0],
|
|
20
|
+
setField = _useState2[1];
|
|
21
|
+
|
|
22
|
+
var _useState3 = useState(0),
|
|
23
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
24
|
+
directionValue = _useState4[0],
|
|
25
|
+
setDirectionValue = _useState4[1];
|
|
26
|
+
|
|
27
|
+
var sortedItems = useMemo(function () {
|
|
28
|
+
var sortableItems = _toConsumableArray(items);
|
|
29
|
+
|
|
30
|
+
if (sortableItems.length === 0) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (field) {
|
|
35
|
+
sortableItems.sort(function (a, b) {
|
|
36
|
+
if (a[field] === null) return 1;
|
|
37
|
+
if (b[field] === null) return -1;
|
|
38
|
+
if (a[field] === null && b[field] === null) return 0;
|
|
39
|
+
return a[field].toString().localeCompare(b[field].toString(), undefined, {
|
|
40
|
+
numeric: true
|
|
41
|
+
}) * (directionValue > 0 ? 1 : -1);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return sortableItems;
|
|
46
|
+
}, [items, directionValue, field]);
|
|
47
|
+
|
|
48
|
+
var sortAscDesc = function sortAscDesc(item, value) {
|
|
49
|
+
setDirectionValue(value);
|
|
50
|
+
setField(item);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
return {
|
|
54
|
+
sortedData: sortedItems,
|
|
55
|
+
sortedProps: {
|
|
56
|
+
sortedData: sortedItems,
|
|
57
|
+
sortedDirectionValue: directionValue,
|
|
58
|
+
sortedField: field,
|
|
59
|
+
sortedAscDesc: sortAscDesc
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
var TableHeadCellSort = /*#__PURE__*/React.forwardRef(function TableHeadCellSort(_ref, ref) {
|
|
65
|
+
var props = _extends({}, _ref);
|
|
66
|
+
|
|
67
|
+
return /*#__PURE__*/React.createElement(TableHeadCellSortBase, _extends({
|
|
68
|
+
ref: ref
|
|
69
|
+
}, props));
|
|
70
|
+
});
|
|
71
|
+
export var TableHeadCellSortBase = /*#__PURE__*/React.forwardRef(function TableHeadCellSortBase(_ref2, ref) {
|
|
72
|
+
var sortedAscDesc = _ref2.sortedAscDesc,
|
|
73
|
+
sortedField = _ref2.sortedField,
|
|
74
|
+
sortedDirectionValue = _ref2.sortedDirectionValue,
|
|
75
|
+
headerItems = _ref2.headerItems,
|
|
76
|
+
sortedData = _ref2.sortedData,
|
|
77
|
+
children = _ref2.children,
|
|
78
|
+
props = _objectWithoutProperties(_ref2, _excluded);
|
|
79
|
+
|
|
80
|
+
var innerRef = useRef();
|
|
81
|
+
|
|
82
|
+
var _ref3 = headerItems || {},
|
|
83
|
+
name = _ref3.name,
|
|
84
|
+
sortLabels = _ref3.sortLabels;
|
|
85
|
+
|
|
86
|
+
var _useState5 = useState(0),
|
|
87
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
88
|
+
sortDirection = _useState6[0],
|
|
89
|
+
setSortDirection = _useState6[1];
|
|
90
|
+
|
|
91
|
+
var setSortAscDesc = useCallback(function (name, value) {
|
|
92
|
+
if (sortedAscDesc) {
|
|
93
|
+
if (sortedField !== name) {
|
|
94
|
+
sortedAscDesc('', 0);
|
|
95
|
+
setSortDirection(value);
|
|
96
|
+
sortedAscDesc(name, value);
|
|
97
|
+
} else {
|
|
98
|
+
if (value !== sortDirection) {
|
|
99
|
+
setSortDirection(value);
|
|
100
|
+
sortedAscDesc(name, value);
|
|
101
|
+
} else {
|
|
102
|
+
setSortDirection(0);
|
|
103
|
+
sortedAscDesc('', 0);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}, [sortedField, sortedDirectionValue, sortDirection]);
|
|
108
|
+
|
|
109
|
+
var _onKeyDown = useCallback(function (e, name, value) {
|
|
110
|
+
if (e.key === 'Enter' && innerRef.current.contains(e.target)) {
|
|
111
|
+
if (innerRef.current.open) {
|
|
112
|
+
setSortAscDesc(name, value);
|
|
113
|
+
innerRef.current.open = false;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}, [name, sortDirection]);
|
|
117
|
+
|
|
118
|
+
var setDisabled = useCallback(function (sortedData) {
|
|
119
|
+
return sortedData === undefined || sortedData.length === 0 ? true : false;
|
|
120
|
+
}, [sortedData]);
|
|
121
|
+
var setCaretColor = useCallback(function (value) {
|
|
122
|
+
if (sortedField === name) {
|
|
123
|
+
return sortedDirectionValue === value ? 'dark' : 'gray';
|
|
124
|
+
} else {
|
|
125
|
+
return 'gray';
|
|
126
|
+
}
|
|
127
|
+
}, [sortedDirectionValue, sortedField]);
|
|
128
|
+
return /*#__PURE__*/React.createElement(TableHeadCellBase, _extends({}, props, {
|
|
129
|
+
ref: ref
|
|
130
|
+
}), /*#__PURE__*/React.createElement(Dropdown, {
|
|
131
|
+
tabIndex: 0,
|
|
132
|
+
disabled: setDisabled(sortedData),
|
|
133
|
+
ref: innerRef
|
|
134
|
+
}, /*#__PURE__*/React.createElement(DropdownButton, {
|
|
135
|
+
variant: "link",
|
|
136
|
+
underline: sortedField === name ? true : false
|
|
137
|
+
}, children, /*#__PURE__*/React.createElement(CaretContainer, {
|
|
138
|
+
marginLeft: 1
|
|
139
|
+
}, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
|
|
140
|
+
return /*#__PURE__*/React.createElement(CaretIcon, {
|
|
141
|
+
key: index,
|
|
142
|
+
direction: obj.value == 1 ? 'up' : 'down',
|
|
143
|
+
size: "m",
|
|
144
|
+
variant: setCaretColor(obj.value)
|
|
145
|
+
});
|
|
146
|
+
}))), /*#__PURE__*/React.createElement(DropdownContent, null, sortLabels && sortLabels.length > 0 && sortLabels.map(function (obj, index) {
|
|
147
|
+
return /*#__PURE__*/React.createElement(NavVertical, {
|
|
148
|
+
key: index
|
|
149
|
+
}, /*#__PURE__*/React.createElement(NavVerticalItem, _extends({}, sortedField === name && sortedDirectionValue === obj.value && {
|
|
150
|
+
active: true
|
|
151
|
+
}, {
|
|
152
|
+
tabIndex: 0,
|
|
153
|
+
onClick: function onClick() {
|
|
154
|
+
if (setSortAscDesc) {
|
|
155
|
+
setSortAscDesc(name, obj.value);
|
|
156
|
+
innerRef.current.open = false;
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
onKeyDown: function onKeyDown(e) {
|
|
160
|
+
_onKeyDown(e, name, obj.value);
|
|
161
|
+
}
|
|
162
|
+
}), /*#__PURE__*/React.createElement(CaretIcon, {
|
|
163
|
+
direction: obj.value == 1 ? 'up' : 'down',
|
|
164
|
+
marginRight: 1,
|
|
165
|
+
marginTop: 1,
|
|
166
|
+
size: "m"
|
|
167
|
+
}), obj.label));
|
|
168
|
+
}))));
|
|
169
|
+
});
|
|
1
170
|
export * from '@digigov/react-core/TableContainer';
|
|
2
171
|
export * from '@digigov/react-core/Table';
|
|
3
172
|
export * from '@digigov/react-core/TableBody';
|
|
@@ -8,5 +177,5 @@ export * from '@digigov/react-core/TableHeadCell';
|
|
|
8
177
|
export * from '@digigov/react-core/TableRow';
|
|
9
178
|
export * from '@digigov/react-core/TableNoDataRow';
|
|
10
179
|
export * from '@digigov/ui/core/Table/TableFloatingScroll';
|
|
11
|
-
|
|
180
|
+
export { TableHeadCellSort, useSortableData };
|
|
12
181
|
export default Table;
|
package/esm/core/index.js
CHANGED
|
@@ -6,6 +6,7 @@ export * from '@digigov/ui/core/Accordion';
|
|
|
6
6
|
export * from '@digigov/ui/core/Blockquote';
|
|
7
7
|
export * from '@digigov/ui/core/Breadcrumbs';
|
|
8
8
|
export * from '@digigov/ui/core/Card';
|
|
9
|
+
export * from '@digigov/ui/core/CaretContainer';
|
|
9
10
|
export * from '@digigov/ui/core/Checkbox';
|
|
10
11
|
export * from '@digigov/ui/core/DateInputContainer';
|
|
11
12
|
export * from '@digigov/ui/core/Details';
|
package/esm/index.js
CHANGED
package/esm/registry.js
CHANGED
|
@@ -71,6 +71,7 @@ import * as _digigov_ui_core_Button_Icon from '@digigov/ui/core/Button/Icon';
|
|
|
71
71
|
import * as _digigov_ui_core_Button from '@digigov/ui/core/Button';
|
|
72
72
|
import * as _digigov_ui_core_Button_ThemeToggleButton from '@digigov/ui/core/Button/ThemeToggleButton';
|
|
73
73
|
import * as _digigov_ui_core_Card from '@digigov/ui/core/Card';
|
|
74
|
+
import * as _digigov_ui_core_CaretContainer from '@digigov/ui/core/CaretContainer';
|
|
74
75
|
import * as _digigov_ui_core_Checkbox from '@digigov/ui/core/Checkbox';
|
|
75
76
|
import * as _digigov_ui_core_DateInputContainer from '@digigov/ui/core/DateInputContainer';
|
|
76
77
|
import * as _digigov_ui_core_Details from '@digigov/ui/core/Details';
|
|
@@ -283,6 +284,7 @@ export default {
|
|
|
283
284
|
'@digigov/ui/core/Button': lazyImport(_digigov_ui_core_Button),
|
|
284
285
|
'@digigov/ui/core/Button/ThemeToggleButton': lazyImport(_digigov_ui_core_Button_ThemeToggleButton),
|
|
285
286
|
'@digigov/ui/core/Card': lazyImport(_digigov_ui_core_Card),
|
|
287
|
+
'@digigov/ui/core/CaretContainer': lazyImport(_digigov_ui_core_CaretContainer),
|
|
286
288
|
'@digigov/ui/core/Checkbox': lazyImport(_digigov_ui_core_Checkbox),
|
|
287
289
|
'@digigov/ui/core/DateInputContainer': lazyImport(_digigov_ui_core_DateInputContainer),
|
|
288
290
|
'@digigov/ui/core/Details': lazyImport(_digigov_ui_core_Details),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digigov/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.33.0",
|
|
4
4
|
"description": "@digigov reusable components toolkit",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"clsx": "1.1.1",
|
|
21
21
|
"react": "^16.8.0 || ^17.0.0",
|
|
22
22
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
23
|
-
"@digigov/react-core": "0.
|
|
24
|
-
"@digigov/react-extensions": "0.
|
|
23
|
+
"@digigov/react-core": "0.24.0",
|
|
24
|
+
"@digigov/react-extensions": "0.22.0"
|
|
25
25
|
},
|
|
26
26
|
"gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
|
|
27
27
|
"private": false,
|
package/registry.d.ts
CHANGED
|
@@ -72,6 +72,7 @@ declare var _default: {
|
|
|
72
72
|
'@digigov/ui/core/Button': {};
|
|
73
73
|
'@digigov/ui/core/Button/ThemeToggleButton': {};
|
|
74
74
|
'@digigov/ui/core/Card': {};
|
|
75
|
+
'@digigov/ui/core/CaretContainer': {};
|
|
75
76
|
'@digigov/ui/core/Checkbox': {};
|
|
76
77
|
'@digigov/ui/core/DateInputContainer': {};
|
|
77
78
|
'@digigov/ui/core/Details': {};
|