@sb1/ffe-tables-react 100.12.4 → 101.0.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/es/CellContent.js +2 -25
- package/es/Table.js +7 -33
- package/es/TableBody.js +2 -25
- package/es/TableCaption.js +2 -25
- package/es/TableContext.js +11 -13
- package/es/TableDataCell.js +2 -25
- package/es/TableFoot.js +2 -25
- package/es/TableHead.js +2 -25
- package/es/TableHeaderCell.js +10 -33
- package/es/TableRow.js +2 -25
- package/es/TableRowExpandable.js +12 -35
- package/es/texts.js +4 -4
- package/es/types.js +1 -1
- package/lib/CellContent.js +4 -27
- package/lib/Table.js +10 -36
- package/lib/TableBody.js +4 -27
- package/lib/TableCaption.js +4 -27
- package/lib/TableContext.js +12 -14
- package/lib/TableDataCell.js +6 -29
- package/lib/TableFoot.js +4 -27
- package/lib/TableHead.js +4 -27
- package/lib/TableHeaderCell.js +15 -38
- package/lib/TableRow.js +4 -27
- package/lib/TableRowExpandable.js +18 -41
- package/lib/texts.js +4 -4
- package/package.json +8 -8
package/es/CellContent.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("div", __assign({ className: classNames('ffe-table__cell-content', className) }, rest)));
|
|
3
|
+
export const CellContent = ({ className, ...rest }) => {
|
|
4
|
+
return (React.createElement("div", { className: classNames('ffe-table__cell-content', className), ...rest }));
|
|
28
5
|
};
|
package/es/Table.js
CHANGED
|
@@ -1,38 +1,12 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { TableProvider, TableContext, } from './TableContext';
|
|
26
|
-
export
|
|
27
|
-
var className = _a.className, initialSort = _a.initialSort, children = _a.children, _b = _a.breakPoint, breakPoint = _b === void 0 ? 'sm' : _b, rest = __rest(_a, ["className", "initialSort", "children", "breakPoint"]);
|
|
4
|
+
export const Table = React.forwardRef(({ className, initialSort, children, breakPoint = 'sm', ...rest }, ref) => {
|
|
28
5
|
return (React.createElement(TableProvider, { initialSort: initialSort },
|
|
29
|
-
React.createElement(TableContext.Consumer, null,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
})
|
|
36
|
-
: children));
|
|
37
|
-
})));
|
|
6
|
+
React.createElement(TableContext.Consumer, null, ({ activeSortOrder, activeSortKey }) => (React.createElement("table", { className: classNames('ffe-table', { 'ffe-table--break-sm': breakPoint === 'sm' }, { 'ffe-table--break-md': breakPoint === 'md' }, className), ref: ref, ...rest }, typeof children === 'function'
|
|
7
|
+
? children({
|
|
8
|
+
activeSortOrder,
|
|
9
|
+
activeSortKey,
|
|
10
|
+
})
|
|
11
|
+
: children)))));
|
|
38
12
|
});
|
package/es/TableBody.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("tbody", __assign({ className: classNames('ffe-table__body', className) }, rest)));
|
|
3
|
+
export const TableBody = ({ className, ...rest }) => {
|
|
4
|
+
return (React.createElement("tbody", { className: classNames('ffe-table__body', className), ...rest }));
|
|
28
5
|
};
|
package/es/TableCaption.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("caption", __assign({ className: classNames('ffe-table__caption', className), ref: ref }, rest)));
|
|
3
|
+
export const TableCaption = React.forwardRef(({ className, ...rest }, ref) => {
|
|
4
|
+
return (React.createElement("caption", { className: classNames('ffe-table__caption', className), ref: ref, ...rest }));
|
|
28
5
|
});
|
package/es/TableContext.js
CHANGED
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { ariaSortOrders } from './types';
|
|
3
|
-
export
|
|
4
|
-
updateSort:
|
|
5
|
-
getSort:
|
|
3
|
+
export const TableContext = React.createContext({
|
|
4
|
+
updateSort: () => null,
|
|
5
|
+
getSort: () => 'none',
|
|
6
6
|
});
|
|
7
|
-
|
|
8
|
-
if (sort === void 0) { sort = 'none'; }
|
|
7
|
+
const getNextSort = (sort = 'none') => {
|
|
9
8
|
return sort
|
|
10
9
|
? ariaSortOrders[(ariaSortOrders.indexOf(sort) + 1) % ariaSortOrders.length]
|
|
11
10
|
: 'none';
|
|
12
11
|
};
|
|
13
|
-
export
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
var updateSort = function (sortKey) {
|
|
12
|
+
export const TableProvider = ({ initialSort, children }) => {
|
|
13
|
+
var _a;
|
|
14
|
+
const [activeSortOrder, setActiveSortOrder] = useState((_a = initialSort === null || initialSort === void 0 ? void 0 : initialSort.sortOrder) !== null && _a !== void 0 ? _a : 'none');
|
|
15
|
+
const [activeSortKey, setActiveSortKey] = useState(initialSort === null || initialSort === void 0 ? void 0 : initialSort.sortKey);
|
|
16
|
+
const updateSort = (sortKey) => {
|
|
19
17
|
if (sortKey === activeSortKey) {
|
|
20
18
|
setActiveSortOrder(getNextSort(activeSortOrder));
|
|
21
19
|
}
|
|
@@ -24,11 +22,11 @@ export var TableProvider = function (_a) {
|
|
|
24
22
|
setActiveSortOrder(getNextSort('none'));
|
|
25
23
|
}
|
|
26
24
|
};
|
|
27
|
-
|
|
25
|
+
const getSort = (sortKey) => {
|
|
28
26
|
if (sortKey === activeSortKey) {
|
|
29
27
|
return activeSortOrder;
|
|
30
28
|
}
|
|
31
29
|
return 'none';
|
|
32
30
|
};
|
|
33
|
-
return (React.createElement(TableContext.Provider, { value: { activeSortOrder
|
|
31
|
+
return (React.createElement(TableContext.Provider, { value: { activeSortOrder, activeSortKey, updateSort, getSort } }, children));
|
|
34
32
|
};
|
package/es/TableDataCell.js
CHANGED
|
@@ -1,32 +1,9 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { CellContent } from './CellContent';
|
|
26
4
|
import { StrongText } from '@sb1/ffe-core-react';
|
|
27
|
-
export
|
|
28
|
-
|
|
29
|
-
return (React.createElement("td", __assign({ className: classNames('ffe-table__td', className), ref: ref }, rest),
|
|
5
|
+
export const TableDataCell = React.forwardRef(({ className, columnHeader, children, ...rest }, ref) => {
|
|
6
|
+
return (React.createElement("td", { className: classNames('ffe-table__td', className), ref: ref, ...rest },
|
|
30
7
|
React.createElement(CellContent, null,
|
|
31
8
|
columnHeader && (React.createElement(StrongText, { className: "ffe-table__column-header", "aria-hidden": true },
|
|
32
9
|
columnHeader,
|
package/es/TableFoot.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("tfoot", __assign({ className: classNames('ffe-table__foot', className) }, rest)));
|
|
3
|
+
export const TableFoot = ({ className, ...rest }) => {
|
|
4
|
+
return (React.createElement("tfoot", { className: classNames('ffe-table__foot', className), ...rest }));
|
|
28
5
|
};
|
package/es/TableHead.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("thead", __assign({ className: classNames('ffe-table__head', className) }, rest)));
|
|
3
|
+
export const TableHead = ({ className, ...rest }) => {
|
|
4
|
+
return (React.createElement("thead", { className: classNames('ffe-table__head', className), ...rest }));
|
|
28
5
|
};
|
package/es/TableHeaderCell.js
CHANGED
|
@@ -1,51 +1,28 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React, { useContext, useRef } from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
26
4
|
import { TableContext } from './TableContext';
|
|
27
5
|
import { CellContent } from './CellContent';
|
|
28
6
|
// arrow_upward_alt (weight 300)
|
|
29
|
-
|
|
7
|
+
const arrowUpIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00NTAuMDAxLTYzNS42OTQgMzE3LjA3Ni01MDIuNzdxLTguMzA3IDguMzA3LTIwLjg4NCA4LjUtMTIuNTc2LjE5Mi0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NiAwLTEyLjM4NSA4LjY5My0yMS4wNzdsMTc5Ljc2OS0xNzkuNzY5cTEwLjg0Ni0xMC44NDYgMjUuMzA3LTEwLjg0NiAxNC40NjEgMCAyNS4zMDcgMTAuODQ2bDE3OS43NjkgMTc5Ljc2OXE4LjMwOCA4LjMwOCA4LjUgMjAuODg0LjE5MyAxMi41NzctOC41IDIxLjI2OS04LjY5MiA4LjY5Mi0yMS4wNzYgOC42OTJ0LTIxLjA3Ni04LjY5Mkw1MDkuOTk5LTYzNS42OTR2MzUxLjg0OHEwIDEyLjc2OC04LjYxNSAyMS4zODQtOC42MTUgOC42MTUtMjEuMzg0IDguNjE1dC0yMS4zODQtOC42MTVxLTguNjE1LTguNjE2LTguNjE1LTIxLjM4NHYtMzUxLjg0OFoiLz48L3N2Zz4=';
|
|
30
8
|
// swap_vert (weight 300)
|
|
31
|
-
|
|
32
|
-
export
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
return (React.createElement("th", __assign({ className: classNames('ffe-table__th', { 'ffe-table__th--sortable': sortKey }, {
|
|
9
|
+
const unfoldIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0zNjYuNTI1LTQ1NC4yMzJxLTEyLjc1NSAwLTIxLjM3LTguNjI1LTguNjE1LTguNjI0LTguNjE1LTIxLjM3NHYtMjYxLjIzMmwtOTIuNjk0IDkyLjY5NHEtOC4xMTUgOC4zMDctMjAuMjg4IDguMzA3dC0yMS40OC04LjYwOHEtOS4zMDgtOS4zOTEtOS4zMDgtMjEuNDY4dDkuMzA4LTIxLjM4NGwxMzguNzY5LTEzOC43NjlxNS42MTUtNS42MTUgMTEuODk3LTcuOTIzdDEzLjQ2Mi0yLjMwOHE3LjE3OSAwIDEzLjY0IDIuMzI1IDYuNDYyIDIuMzI2IDEyIDcuOTA2bDEzOS43NjkgMTM5Ljc2OXE4LjkyMyA4LjkyMyA4LjgwOCAyMC42OTItLjExNiAxMS43NjktOS40MjMgMjEuMTYtOS4zMDcgOC42MDgtMjEuMDc2IDguOTE2LTExLjc2OS4zMDgtMjEuMDc3LTlsLTkyLjMwOS05Mi4zMDl2MjYxLjYxN3EwIDEyLjU4Ni04LjYyOCAyMS4xLTguNjI5IDguNTE0LTIxLjM4NSA4LjUxNFptMjI3LjI2OSAzMzguNzY5cS03LjE3OSAwLTEzLjY0LTIuMzI1LTYuNDYyLTIuMzI1LTEyLTcuOTA2TDQyOC4zODUtMjY1LjQ2M3EtOC45MjMtOC45MjItOC44MDgtMjAuNjkxLjExNi0xMS43NjkgOS40MjMtMjEuMTYgOS4zMDctOC42MDkgMjEuMDc2LTguOTE3IDExLjc2OS0uMzA3IDIxLjA3NyA5bDkyLjMwOSA5Mi4zMDl2LTI2MS42MTZxMC0xMi41ODYgOC42MjgtMjEuMTAxIDguNjI5LTguNTE0IDIxLjM4NS04LjUxNCAxMi43NTUgMCAyMS4zNyA4LjYyNXQ4LjYxNSAyMS4zNzR2MjYxLjIzMmw5Mi42OTQtOTIuNjkzcTguMTE1LTguMzA4IDIwLjI4OC04LjMwOHQyMS40OCA4LjYwOXE5LjMwOCA5LjM5MSA5LjMwOCAyMS40NjcgMCAxMi4wNzctOS4zMDggMjEuMzg0TDYxOS4xNTMtMTI1LjY5NHEtNS42MTUgNS42MTYtMTEuODk3IDcuOTIzLTYuMjgyIDIuMzA4LTEzLjQ2MiAyLjMwOFoiLz48L3N2Zz4=';
|
|
10
|
+
export const TableHeaderCell = React.forwardRef(({ className, sortKey, children, onClick, ...rest }, ref) => {
|
|
11
|
+
const { updateSort, getSort } = useContext(TableContext);
|
|
12
|
+
const sortButtonRef = useRef(null);
|
|
13
|
+
const ariaSort = sortKey ? getSort(sortKey) : undefined;
|
|
14
|
+
return (React.createElement("th", { className: classNames('ffe-table__th', { 'ffe-table__th--sortable': sortKey }, {
|
|
38
15
|
'ffe-table__th--sortable-ascending': ariaSort === 'ascending',
|
|
39
16
|
}, {
|
|
40
17
|
'ffe-table__th--sortable-descending': ariaSort === 'descending',
|
|
41
|
-
}, className), "aria-sort": ariaSort, onClick:
|
|
18
|
+
}, className), "aria-sort": ariaSort, onClick: e => {
|
|
42
19
|
var _a, _b;
|
|
43
20
|
if (!((_a = sortButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
44
21
|
(_b = sortButtonRef.current) === null || _b === void 0 ? void 0 : _b.click();
|
|
45
22
|
}
|
|
46
23
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
47
|
-
}, ref: ref
|
|
48
|
-
React.createElement("button", { className: "ffe-table__sort-button", type: "button", onClick:
|
|
24
|
+
}, ref: ref, ...rest }, sortKey ? (React.createElement(CellContent, null,
|
|
25
|
+
React.createElement("button", { className: "ffe-table__sort-button", type: "button", onClick: () => updateSort(sortKey), ref: sortButtonRef },
|
|
49
26
|
React.createElement("span", null, children),
|
|
50
27
|
React.createElement(Icon, { fileUrl: ariaSort === 'none' ? unfoldIcon : arrowUpIcon, size: "md" })))) : (React.createElement(CellContent, null, children))));
|
|
51
28
|
});
|
package/es/TableRow.js
CHANGED
|
@@ -1,28 +1,5 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
return (React.createElement("tr", __assign({ className: classNames('ffe-table__tr', className), ref: ref }, rest)));
|
|
3
|
+
export const TableRow = React.forwardRef(({ className, ...rest }, ref) => {
|
|
4
|
+
return (React.createElement("tr", { className: classNames('ffe-table__tr', className), ref: ref, ...rest }));
|
|
28
5
|
});
|
package/es/TableRowExpandable.js
CHANGED
|
@@ -1,49 +1,26 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import React, { useRef, useState, useId } from 'react';
|
|
24
2
|
import classNames from 'classnames';
|
|
25
3
|
import { Icon } from '@sb1/ffe-icons-react';
|
|
26
4
|
import { Collapse } from '@sb1/ffe-collapse-react';
|
|
27
5
|
import { txt } from './texts';
|
|
28
6
|
import { CellContent } from './CellContent';
|
|
29
|
-
export
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
var expandIdHidden = !isAnimating && !isOpen;
|
|
7
|
+
export const TableRowExpandable = React.forwardRef(({ className, expandContent, children, locale = 'nb', onClick, isDefaultOpen, ...rest }, ref) => {
|
|
8
|
+
const [isOpen, setIsOpen] = useState(!!isDefaultOpen);
|
|
9
|
+
const expandoRowId = useId();
|
|
10
|
+
const [isAnimating, setIsAnimating] = useState(false);
|
|
11
|
+
const expandButtonRef = useRef(null);
|
|
12
|
+
const expandIdHidden = !isAnimating && !isOpen;
|
|
36
13
|
return (React.createElement(React.Fragment, null,
|
|
37
|
-
React.createElement("tr",
|
|
14
|
+
React.createElement("tr", { className: classNames('ffe-table__tr', 'ffe-table__tr--expand', {
|
|
38
15
|
'ffe-table__tr--expand-open': isOpen,
|
|
39
16
|
}, {
|
|
40
17
|
'ffe-table__tr--animating': isAnimating,
|
|
41
|
-
}, className), onClick:
|
|
18
|
+
}, className), onClick: e => {
|
|
42
19
|
var _a, _b;
|
|
43
20
|
if (!((_a = expandButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
44
21
|
(_b = expandButtonRef.current) === null || _b === void 0 ? void 0 : _b.click();
|
|
45
22
|
}
|
|
46
|
-
}, ref: ref
|
|
23
|
+
}, ref: ref, ...rest },
|
|
47
24
|
children,
|
|
48
25
|
React.createElement("td", { className: "ffe-table__expand-button-td" },
|
|
49
26
|
React.createElement(CellContent, null,
|
|
@@ -51,14 +28,14 @@ export var TableRowExpandable = React.forwardRef(function (_a, ref) {
|
|
|
51
28
|
'ffe-table__expand-button--open': isOpen,
|
|
52
29
|
}), ref: expandButtonRef, type: "button", "aria-label": isOpen
|
|
53
30
|
? txt[locale].showLess
|
|
54
|
-
: txt[locale].showMore, "aria-controls": expandoRowId, "aria-expanded": isOpen, onClick:
|
|
55
|
-
setIsOpen(
|
|
31
|
+
: txt[locale].showMore, "aria-controls": expandoRowId, "aria-expanded": isOpen, onClick: e => {
|
|
32
|
+
setIsOpen(prev => !prev);
|
|
56
33
|
setIsAnimating(true);
|
|
57
34
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
58
35
|
} },
|
|
59
36
|
React.createElement(Icon, { fileUrl: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+", size: "md" }))))),
|
|
60
37
|
React.createElement("tr", { className: "ffe-table__expand-content-tr", "aria-hidden": expandIdHidden, id: expandoRowId },
|
|
61
38
|
React.createElement("td", { colSpan: 9999 },
|
|
62
|
-
React.createElement(Collapse, { isOpen: isOpen, onRest:
|
|
39
|
+
React.createElement(Collapse, { isOpen: isOpen, onRest: () => setIsAnimating(false) },
|
|
63
40
|
React.createElement(CellContent, { className: "ffe-table__expand-content" }, !expandIdHidden && (typeof expandContent === "function" ? expandContent(setIsOpen) : expandContent)))))));
|
|
64
41
|
});
|
package/es/texts.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
const nb = {
|
|
2
2
|
showMore: 'Vis mer',
|
|
3
3
|
showLess: 'Vis mindre',
|
|
4
4
|
};
|
|
5
|
-
|
|
5
|
+
const nn = {
|
|
6
6
|
showMore: 'Vis meir',
|
|
7
7
|
showLess: 'Vis mindre',
|
|
8
8
|
};
|
|
9
|
-
|
|
9
|
+
const en = {
|
|
10
10
|
showMore: 'Show more',
|
|
11
11
|
showLess: 'Show less',
|
|
12
12
|
};
|
|
13
|
-
export
|
|
13
|
+
export const txt = { nb, nn, en };
|
package/es/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const ariaSortOrders = ['none', 'ascending', 'descending'];
|
package/lib/CellContent.js
CHANGED
|
@@ -1,35 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.CellContent = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('ffe-table__cell-content', className) }, rest)));
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
const CellContent = ({ className, ...rest }) => {
|
|
10
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)('ffe-table__cell-content', className), ...rest }));
|
|
34
11
|
};
|
|
35
12
|
exports.CellContent = CellContent;
|
package/lib/Table.js
CHANGED
|
@@ -1,44 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.Table = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
exports.Table = react_1.default.forwardRef(
|
|
33
|
-
var className = _a.className, initialSort = _a.initialSort, children = _a.children, _b = _a.breakPoint, breakPoint = _b === void 0 ? 'sm' : _b, rest = __rest(_a, ["className", "initialSort", "children", "breakPoint"]);
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
const TableContext_1 = require("./TableContext");
|
|
10
|
+
exports.Table = react_1.default.forwardRef(({ className, initialSort, children, breakPoint = 'sm', ...rest }, ref) => {
|
|
34
11
|
return (react_1.default.createElement(TableContext_1.TableProvider, { initialSort: initialSort },
|
|
35
|
-
react_1.default.createElement(TableContext_1.TableContext.Consumer, null,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
})
|
|
42
|
-
: children));
|
|
43
|
-
})));
|
|
12
|
+
react_1.default.createElement(TableContext_1.TableContext.Consumer, null, ({ activeSortOrder, activeSortKey }) => (react_1.default.createElement("table", { className: (0, classnames_1.default)('ffe-table', { 'ffe-table--break-sm': breakPoint === 'sm' }, { 'ffe-table--break-md': breakPoint === 'md' }, className), ref: ref, ...rest }, typeof children === 'function'
|
|
13
|
+
? children({
|
|
14
|
+
activeSortOrder,
|
|
15
|
+
activeSortKey,
|
|
16
|
+
})
|
|
17
|
+
: children)))));
|
|
44
18
|
});
|
package/lib/TableBody.js
CHANGED
|
@@ -1,35 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.TableBody = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
return (react_1.default.createElement("tbody", __assign({ className: (0, classnames_1.default)('ffe-table__body', className) }, rest)));
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
const TableBody = ({ className, ...rest }) => {
|
|
10
|
+
return (react_1.default.createElement("tbody", { className: (0, classnames_1.default)('ffe-table__body', className), ...rest }));
|
|
34
11
|
};
|
|
35
12
|
exports.TableBody = TableBody;
|
package/lib/TableCaption.js
CHANGED
|
@@ -1,34 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.TableCaption = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
exports.TableCaption = react_1.default.forwardRef(
|
|
32
|
-
|
|
33
|
-
return (react_1.default.createElement("caption", __assign({ className: (0, classnames_1.default)('ffe-table__caption', className), ref: ref }, rest)));
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
exports.TableCaption = react_1.default.forwardRef(({ className, ...rest }, ref) => {
|
|
10
|
+
return (react_1.default.createElement("caption", { className: (0, classnames_1.default)('ffe-table__caption', className), ref: ref, ...rest }));
|
|
34
11
|
});
|
package/lib/TableContext.js
CHANGED
|
@@ -34,24 +34,22 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
exports.TableProvider = exports.TableContext = void 0;
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
const react_1 = __importStar(require("react"));
|
|
38
|
+
const types_1 = require("./types");
|
|
39
39
|
exports.TableContext = react_1.default.createContext({
|
|
40
|
-
updateSort:
|
|
41
|
-
getSort:
|
|
40
|
+
updateSort: () => null,
|
|
41
|
+
getSort: () => 'none',
|
|
42
42
|
});
|
|
43
|
-
|
|
44
|
-
if (sort === void 0) { sort = 'none'; }
|
|
43
|
+
const getNextSort = (sort = 'none') => {
|
|
45
44
|
return sort
|
|
46
45
|
? types_1.ariaSortOrders[(types_1.ariaSortOrders.indexOf(sort) + 1) % types_1.ariaSortOrders.length]
|
|
47
46
|
: 'none';
|
|
48
47
|
};
|
|
49
|
-
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
var updateSort = function (sortKey) {
|
|
48
|
+
const TableProvider = ({ initialSort, children }) => {
|
|
49
|
+
var _a;
|
|
50
|
+
const [activeSortOrder, setActiveSortOrder] = (0, react_1.useState)((_a = initialSort === null || initialSort === void 0 ? void 0 : initialSort.sortOrder) !== null && _a !== void 0 ? _a : 'none');
|
|
51
|
+
const [activeSortKey, setActiveSortKey] = (0, react_1.useState)(initialSort === null || initialSort === void 0 ? void 0 : initialSort.sortKey);
|
|
52
|
+
const updateSort = (sortKey) => {
|
|
55
53
|
if (sortKey === activeSortKey) {
|
|
56
54
|
setActiveSortOrder(getNextSort(activeSortOrder));
|
|
57
55
|
}
|
|
@@ -60,12 +58,12 @@ var TableProvider = function (_a) {
|
|
|
60
58
|
setActiveSortOrder(getNextSort('none'));
|
|
61
59
|
}
|
|
62
60
|
};
|
|
63
|
-
|
|
61
|
+
const getSort = (sortKey) => {
|
|
64
62
|
if (sortKey === activeSortKey) {
|
|
65
63
|
return activeSortOrder;
|
|
66
64
|
}
|
|
67
65
|
return 'none';
|
|
68
66
|
};
|
|
69
|
-
return (react_1.default.createElement(exports.TableContext.Provider, { value: { activeSortOrder
|
|
67
|
+
return (react_1.default.createElement(exports.TableContext.Provider, { value: { activeSortOrder, activeSortKey, updateSort, getSort } }, children));
|
|
70
68
|
};
|
|
71
69
|
exports.TableProvider = TableProvider;
|
package/lib/TableDataCell.js
CHANGED
|
@@ -1,38 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.TableDataCell = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
exports.TableDataCell = react_1.default.forwardRef(
|
|
34
|
-
|
|
35
|
-
return (react_1.default.createElement("td", __assign({ className: (0, classnames_1.default)('ffe-table__td', className), ref: ref }, rest),
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
const CellContent_1 = require("./CellContent");
|
|
10
|
+
const ffe_core_react_1 = require("@sb1/ffe-core-react");
|
|
11
|
+
exports.TableDataCell = react_1.default.forwardRef(({ className, columnHeader, children, ...rest }, ref) => {
|
|
12
|
+
return (react_1.default.createElement("td", { className: (0, classnames_1.default)('ffe-table__td', className), ref: ref, ...rest },
|
|
36
13
|
react_1.default.createElement(CellContent_1.CellContent, null,
|
|
37
14
|
columnHeader && (react_1.default.createElement(ffe_core_react_1.StrongText, { className: "ffe-table__column-header", "aria-hidden": true },
|
|
38
15
|
columnHeader,
|
package/lib/TableFoot.js
CHANGED
|
@@ -1,35 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.TableFoot = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
return (react_1.default.createElement("tfoot", __assign({ className: (0, classnames_1.default)('ffe-table__foot', className) }, rest)));
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
const TableFoot = ({ className, ...rest }) => {
|
|
10
|
+
return (react_1.default.createElement("tfoot", { className: (0, classnames_1.default)('ffe-table__foot', className), ...rest }));
|
|
34
11
|
};
|
|
35
12
|
exports.TableFoot = TableFoot;
|
package/lib/TableHead.js
CHANGED
|
@@ -1,35 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.TableHead = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
return (react_1.default.createElement("thead", __assign({ className: (0, classnames_1.default)('ffe-table__head', className) }, rest)));
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
const TableHead = ({ className, ...rest }) => {
|
|
10
|
+
return (react_1.default.createElement("thead", { className: (0, classnames_1.default)('ffe-table__head', className), ...rest }));
|
|
34
11
|
};
|
|
35
12
|
exports.TableHead = TableHead;
|
package/lib/TableHeaderCell.js
CHANGED
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -43,48 +32,36 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
43
32
|
return result;
|
|
44
33
|
};
|
|
45
34
|
})();
|
|
46
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
-
var t = {};
|
|
48
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
-
t[p] = s[p];
|
|
50
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
-
t[p[i]] = s[p[i]];
|
|
54
|
-
}
|
|
55
|
-
return t;
|
|
56
|
-
};
|
|
57
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
58
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
59
37
|
};
|
|
60
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
61
39
|
exports.TableHeaderCell = void 0;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
|
|
43
|
+
const TableContext_1 = require("./TableContext");
|
|
44
|
+
const CellContent_1 = require("./CellContent");
|
|
67
45
|
// arrow_upward_alt (weight 300)
|
|
68
|
-
|
|
46
|
+
const arrowUpIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00NTAuMDAxLTYzNS42OTQgMzE3LjA3Ni01MDIuNzdxLTguMzA3IDguMzA3LTIwLjg4NCA4LjUtMTIuNTc2LjE5Mi0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NiAwLTEyLjM4NSA4LjY5My0yMS4wNzdsMTc5Ljc2OS0xNzkuNzY5cTEwLjg0Ni0xMC44NDYgMjUuMzA3LTEwLjg0NiAxNC40NjEgMCAyNS4zMDcgMTAuODQ2bDE3OS43NjkgMTc5Ljc2OXE4LjMwOCA4LjMwOCA4LjUgMjAuODg0LjE5MyAxMi41NzctOC41IDIxLjI2OS04LjY5MiA4LjY5Mi0yMS4wNzYgOC42OTJ0LTIxLjA3Ni04LjY5Mkw1MDkuOTk5LTYzNS42OTR2MzUxLjg0OHEwIDEyLjc2OC04LjYxNSAyMS4zODQtOC42MTUgOC42MTUtMjEuMzg0IDguNjE1dC0yMS4zODQtOC42MTVxLTguNjE1LTguNjE2LTguNjE1LTIxLjM4NHYtMzUxLjg0OFoiLz48L3N2Zz4=';
|
|
69
47
|
// swap_vert (weight 300)
|
|
70
|
-
|
|
71
|
-
exports.TableHeaderCell = react_1.default.forwardRef(
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
return (react_1.default.createElement("th", __assign({ className: (0, classnames_1.default)('ffe-table__th', { 'ffe-table__th--sortable': sortKey }, {
|
|
48
|
+
const unfoldIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0zNjYuNTI1LTQ1NC4yMzJxLTEyLjc1NSAwLTIxLjM3LTguNjI1LTguNjE1LTguNjI0LTguNjE1LTIxLjM3NHYtMjYxLjIzMmwtOTIuNjk0IDkyLjY5NHEtOC4xMTUgOC4zMDctMjAuMjg4IDguMzA3dC0yMS40OC04LjYwOHEtOS4zMDgtOS4zOTEtOS4zMDgtMjEuNDY4dDkuMzA4LTIxLjM4NGwxMzguNzY5LTEzOC43NjlxNS42MTUtNS42MTUgMTEuODk3LTcuOTIzdDEzLjQ2Mi0yLjMwOHE3LjE3OSAwIDEzLjY0IDIuMzI1IDYuNDYyIDIuMzI2IDEyIDcuOTA2bDEzOS43NjkgMTM5Ljc2OXE4LjkyMyA4LjkyMyA4LjgwOCAyMC42OTItLjExNiAxMS43NjktOS40MjMgMjEuMTYtOS4zMDcgOC42MDgtMjEuMDc2IDguOTE2LTExLjc2OS4zMDgtMjEuMDc3LTlsLTkyLjMwOS05Mi4zMDl2MjYxLjYxN3EwIDEyLjU4Ni04LjYyOCAyMS4xLTguNjI5IDguNTE0LTIxLjM4NSA4LjUxNFptMjI3LjI2OSAzMzguNzY5cS03LjE3OSAwLTEzLjY0LTIuMzI1LTYuNDYyLTIuMzI1LTEyLTcuOTA2TDQyOC4zODUtMjY1LjQ2M3EtOC45MjMtOC45MjItOC44MDgtMjAuNjkxLjExNi0xMS43NjkgOS40MjMtMjEuMTYgOS4zMDctOC42MDkgMjEuMDc2LTguOTE3IDExLjc2OS0uMzA3IDIxLjA3NyA5bDkyLjMwOSA5Mi4zMDl2LTI2MS42MTZxMC0xMi41ODYgOC42MjgtMjEuMTAxIDguNjI5LTguNTE0IDIxLjM4NS04LjUxNCAxMi43NTUgMCAyMS4zNyA4LjYyNXQ4LjYxNSAyMS4zNzR2MjYxLjIzMmw5Mi42OTQtOTIuNjkzcTguMTE1LTguMzA4IDIwLjI4OC04LjMwOHQyMS40OCA4LjYwOXE5LjMwOCA5LjM5MSA5LjMwOCAyMS40NjcgMCAxMi4wNzctOS4zMDggMjEuMzg0TDYxOS4xNTMtMTI1LjY5NHEtNS42MTUgNS42MTYtMTEuODk3IDcuOTIzLTYuMjgyIDIuMzA4LTEzLjQ2MiAyLjMwOFoiLz48L3N2Zz4=';
|
|
49
|
+
exports.TableHeaderCell = react_1.default.forwardRef(({ className, sortKey, children, onClick, ...rest }, ref) => {
|
|
50
|
+
const { updateSort, getSort } = (0, react_1.useContext)(TableContext_1.TableContext);
|
|
51
|
+
const sortButtonRef = (0, react_1.useRef)(null);
|
|
52
|
+
const ariaSort = sortKey ? getSort(sortKey) : undefined;
|
|
53
|
+
return (react_1.default.createElement("th", { className: (0, classnames_1.default)('ffe-table__th', { 'ffe-table__th--sortable': sortKey }, {
|
|
77
54
|
'ffe-table__th--sortable-ascending': ariaSort === 'ascending',
|
|
78
55
|
}, {
|
|
79
56
|
'ffe-table__th--sortable-descending': ariaSort === 'descending',
|
|
80
|
-
}, className), "aria-sort": ariaSort, onClick:
|
|
57
|
+
}, className), "aria-sort": ariaSort, onClick: e => {
|
|
81
58
|
var _a, _b;
|
|
82
59
|
if (!((_a = sortButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
83
60
|
(_b = sortButtonRef.current) === null || _b === void 0 ? void 0 : _b.click();
|
|
84
61
|
}
|
|
85
62
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
86
|
-
}, ref: ref
|
|
87
|
-
react_1.default.createElement("button", { className: "ffe-table__sort-button", type: "button", onClick:
|
|
63
|
+
}, ref: ref, ...rest }, sortKey ? (react_1.default.createElement(CellContent_1.CellContent, null,
|
|
64
|
+
react_1.default.createElement("button", { className: "ffe-table__sort-button", type: "button", onClick: () => updateSort(sortKey), ref: sortButtonRef },
|
|
88
65
|
react_1.default.createElement("span", null, children),
|
|
89
66
|
react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: ariaSort === 'none' ? unfoldIcon : arrowUpIcon, size: "md" })))) : (react_1.default.createElement(CellContent_1.CellContent, null, children))));
|
|
90
67
|
});
|
package/lib/TableRow.js
CHANGED
|
@@ -1,34 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
27
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
6
|
exports.TableRow = void 0;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
exports.TableRow = react_1.default.forwardRef(
|
|
32
|
-
|
|
33
|
-
return (react_1.default.createElement("tr", __assign({ className: (0, classnames_1.default)('ffe-table__tr', className), ref: ref }, rest)));
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
9
|
+
exports.TableRow = react_1.default.forwardRef(({ className, ...rest }, ref) => {
|
|
10
|
+
return (react_1.default.createElement("tr", { className: (0, classnames_1.default)('ffe-table__tr', className), ref: ref, ...rest }));
|
|
34
11
|
});
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -43,46 +32,34 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
43
32
|
return result;
|
|
44
33
|
};
|
|
45
34
|
})();
|
|
46
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
-
var t = {};
|
|
48
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
-
t[p] = s[p];
|
|
50
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
-
t[p[i]] = s[p[i]];
|
|
54
|
-
}
|
|
55
|
-
return t;
|
|
56
|
-
};
|
|
57
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
58
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
59
37
|
};
|
|
60
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
61
39
|
exports.TableRowExpandable = void 0;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
exports.TableRowExpandable = react_1.default.forwardRef(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
var expandIdHidden = !isAnimating && !isOpen;
|
|
40
|
+
const react_1 = __importStar(require("react"));
|
|
41
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
const ffe_icons_react_1 = require("@sb1/ffe-icons-react");
|
|
43
|
+
const ffe_collapse_react_1 = require("@sb1/ffe-collapse-react");
|
|
44
|
+
const texts_1 = require("./texts");
|
|
45
|
+
const CellContent_1 = require("./CellContent");
|
|
46
|
+
exports.TableRowExpandable = react_1.default.forwardRef(({ className, expandContent, children, locale = 'nb', onClick, isDefaultOpen, ...rest }, ref) => {
|
|
47
|
+
const [isOpen, setIsOpen] = (0, react_1.useState)(!!isDefaultOpen);
|
|
48
|
+
const expandoRowId = (0, react_1.useId)();
|
|
49
|
+
const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
|
|
50
|
+
const expandButtonRef = (0, react_1.useRef)(null);
|
|
51
|
+
const expandIdHidden = !isAnimating && !isOpen;
|
|
75
52
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
76
|
-
react_1.default.createElement("tr",
|
|
53
|
+
react_1.default.createElement("tr", { className: (0, classnames_1.default)('ffe-table__tr', 'ffe-table__tr--expand', {
|
|
77
54
|
'ffe-table__tr--expand-open': isOpen,
|
|
78
55
|
}, {
|
|
79
56
|
'ffe-table__tr--animating': isAnimating,
|
|
80
|
-
}, className), onClick:
|
|
57
|
+
}, className), onClick: e => {
|
|
81
58
|
var _a, _b;
|
|
82
59
|
if (!((_a = expandButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
|
|
83
60
|
(_b = expandButtonRef.current) === null || _b === void 0 ? void 0 : _b.click();
|
|
84
61
|
}
|
|
85
|
-
}, ref: ref
|
|
62
|
+
}, ref: ref, ...rest },
|
|
86
63
|
children,
|
|
87
64
|
react_1.default.createElement("td", { className: "ffe-table__expand-button-td" },
|
|
88
65
|
react_1.default.createElement(CellContent_1.CellContent, null,
|
|
@@ -90,14 +67,14 @@ exports.TableRowExpandable = react_1.default.forwardRef(function (_a, ref) {
|
|
|
90
67
|
'ffe-table__expand-button--open': isOpen,
|
|
91
68
|
}), ref: expandButtonRef, type: "button", "aria-label": isOpen
|
|
92
69
|
? texts_1.txt[locale].showLess
|
|
93
|
-
: texts_1.txt[locale].showMore, "aria-controls": expandoRowId, "aria-expanded": isOpen, onClick:
|
|
94
|
-
setIsOpen(
|
|
70
|
+
: texts_1.txt[locale].showMore, "aria-controls": expandoRowId, "aria-expanded": isOpen, onClick: e => {
|
|
71
|
+
setIsOpen(prev => !prev);
|
|
95
72
|
setIsAnimating(true);
|
|
96
73
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
97
74
|
} },
|
|
98
75
|
react_1.default.createElement(ffe_icons_react_1.Icon, { fileUrl: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+", size: "md" }))))),
|
|
99
76
|
react_1.default.createElement("tr", { className: "ffe-table__expand-content-tr", "aria-hidden": expandIdHidden, id: expandoRowId },
|
|
100
77
|
react_1.default.createElement("td", { colSpan: 9999 },
|
|
101
|
-
react_1.default.createElement(ffe_collapse_react_1.Collapse, { isOpen: isOpen, onRest:
|
|
78
|
+
react_1.default.createElement(ffe_collapse_react_1.Collapse, { isOpen: isOpen, onRest: () => setIsAnimating(false) },
|
|
102
79
|
react_1.default.createElement(CellContent_1.CellContent, { className: "ffe-table__expand-content" }, !expandIdHidden && (typeof expandContent === "function" ? expandContent(setIsOpen) : expandContent)))))));
|
|
103
80
|
});
|
package/lib/texts.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.txt = void 0;
|
|
4
|
-
|
|
4
|
+
const nb = {
|
|
5
5
|
showMore: 'Vis mer',
|
|
6
6
|
showLess: 'Vis mindre',
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
const nn = {
|
|
9
9
|
showMore: 'Vis meir',
|
|
10
10
|
showLess: 'Vis mindre',
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
const en = {
|
|
13
13
|
showMore: 'Show more',
|
|
14
14
|
showLess: 'Show less',
|
|
15
15
|
};
|
|
16
|
-
exports.txt = { nb
|
|
16
|
+
exports.txt = { nb, nn, en };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sb1/ffe-tables-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "101.0.0",
|
|
4
4
|
"description": "React implementation of ffe-tables",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "SpareBank 1",
|
|
@@ -25,14 +25,14 @@
|
|
|
25
25
|
"test:watch": "ffe-buildtool jest --watch"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@sb1/ffe-collapse-react": "^
|
|
29
|
-
"@sb1/ffe-core-react": "^
|
|
30
|
-
"@sb1/ffe-icons-react": "^
|
|
31
|
-
"@sb1/ffe-tables": "^
|
|
32
|
-
"classnames": "^2.
|
|
28
|
+
"@sb1/ffe-collapse-react": "^101.0.0",
|
|
29
|
+
"@sb1/ffe-core-react": "^101.0.0",
|
|
30
|
+
"@sb1/ffe-icons-react": "^101.0.0",
|
|
31
|
+
"@sb1/ffe-tables": "^101.0.0",
|
|
32
|
+
"classnames": "^2.5.1"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@sb1/ffe-buildtool": "^
|
|
35
|
+
"@sb1/ffe-buildtool": "^101.0.0",
|
|
36
36
|
"react": "^18.2.0",
|
|
37
37
|
"react-dom": "^18.2.0"
|
|
38
38
|
},
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"publishConfig": {
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "7714019dbb9001551cb5d1c262c58afd609d4fb0"
|
|
46
46
|
}
|