@dhis2-ui/table 9.0.1 → 9.1.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/build/cjs/data-table/__tests__/data-table-row.test.js +13 -0
- package/build/cjs/data-table/data-table-row/data-table-row.js +6 -3
- package/build/cjs/table/table-row.js +9 -5
- package/build/es/data-table/__tests__/data-table-row.test.js +13 -0
- package/build/es/data-table/data-table-row/data-table-row.js +6 -3
- package/build/es/table/table-row.js +10 -5
- package/package.json +3 -3
|
@@ -118,4 +118,17 @@ describe('<DataTableRow>', () => {
|
|
|
118
118
|
expanded: true
|
|
119
119
|
});
|
|
120
120
|
});
|
|
121
|
+
it('accepts a hover prop', () => {
|
|
122
|
+
const cb = jest.fn();
|
|
123
|
+
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
|
|
124
|
+
expandable: true,
|
|
125
|
+
expandableContent: "test",
|
|
126
|
+
onExpandToggle: cb,
|
|
127
|
+
onMouseOver: cb,
|
|
128
|
+
onClick: cb
|
|
129
|
+
}));
|
|
130
|
+
wrapper.find('tr').simulate('mouseover');
|
|
131
|
+
wrapper.find('tr').simulate('click');
|
|
132
|
+
expect(cb).toHaveBeenCalledTimes(2);
|
|
133
|
+
});
|
|
121
134
|
});
|
|
@@ -29,6 +29,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
29
29
|
|
|
30
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
31
|
|
|
32
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
33
|
+
|
|
32
34
|
const DataTableRow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
33
35
|
let {
|
|
34
36
|
children,
|
|
@@ -39,7 +41,8 @@ const DataTableRow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
39
41
|
selected,
|
|
40
42
|
draggable,
|
|
41
43
|
role,
|
|
42
|
-
onExpandToggle
|
|
44
|
+
onExpandToggle,
|
|
45
|
+
...rest
|
|
43
46
|
} = _ref;
|
|
44
47
|
const [isHoveringExpandedContent, setIsHoveringExpandedContent] = (0, _react.useState)(false);
|
|
45
48
|
const classes = (0, _classnames.default)(className, _dataTableRowStyles.default.className, {
|
|
@@ -52,14 +55,14 @@ const DataTableRow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
52
55
|
const childCount = _react.default.Children.count(children);
|
|
53
56
|
|
|
54
57
|
const colSpan = String(draggable || expandableContent ? childCount + 1 : childCount);
|
|
55
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.TableRow, {
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.TableRow, _extends({
|
|
56
59
|
ref: ref,
|
|
57
60
|
className: classes,
|
|
58
61
|
dataTest: dataTest,
|
|
59
62
|
selected: selected,
|
|
60
63
|
draggable: draggable,
|
|
61
64
|
role: role
|
|
62
|
-
}, draggable && /*#__PURE__*/_react.default.createElement(_dragHandleCell.DragHandleCell, null), expandableContent && /*#__PURE__*/_react.default.createElement(_expandHandleCell.ExpandHandleCell, {
|
|
65
|
+
}, rest), draggable && /*#__PURE__*/_react.default.createElement(_dragHandleCell.DragHandleCell, null), expandableContent && /*#__PURE__*/_react.default.createElement(_expandHandleCell.ExpandHandleCell, {
|
|
63
66
|
expanded: expanded,
|
|
64
67
|
onClick: onExpandToggle
|
|
65
68
|
}), children, _dataTableRowStyles.default.styles), expandableContent && expanded && /*#__PURE__*/_react.default.createElement(_expandedRow.ExpandedRow, {
|
|
@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
23
|
|
|
24
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
|
+
|
|
24
26
|
const tableRowStyles = [".zebraStriping.jsx-3124144591:nth-child(even){background:#fbfcfd;}"];
|
|
25
27
|
tableRowStyles.__hash = "3124144591";
|
|
26
28
|
|
|
@@ -30,19 +32,21 @@ const TableRow = _ref => {
|
|
|
30
32
|
children,
|
|
31
33
|
className,
|
|
32
34
|
dataTest,
|
|
33
|
-
suppressZebraStriping
|
|
35
|
+
suppressZebraStriping,
|
|
36
|
+
...rest
|
|
34
37
|
} = _ref;
|
|
35
38
|
const {
|
|
36
39
|
suppressZebraStriping: suppressZebraStripingFromContext
|
|
37
40
|
} = (0, _react.useContext)(_tableContext.TableContext);
|
|
38
41
|
const zebraStriping = typeof suppressZebraStriping !== 'undefined' ? !suppressZebraStriping : !suppressZebraStripingFromContext;
|
|
39
|
-
return /*#__PURE__*/_react.default.createElement("tr", {
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement("tr", _extends({
|
|
40
43
|
"data-test": dataTest,
|
|
41
|
-
role: role
|
|
42
|
-
|
|
44
|
+
role: role
|
|
45
|
+
}, rest, {
|
|
46
|
+
className: "jsx-".concat(tableRowStyles.__hash) + " " + (rest && rest.className != null && rest.className || (0, _classnames.default)(className, {
|
|
43
47
|
zebraStriping
|
|
44
48
|
}) || "")
|
|
45
|
-
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
49
|
+
}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
46
50
|
id: tableRowStyles.__hash
|
|
47
51
|
}, tableRowStyles));
|
|
48
52
|
};
|
|
@@ -105,4 +105,17 @@ describe('<DataTableRow>', () => {
|
|
|
105
105
|
expanded: true
|
|
106
106
|
});
|
|
107
107
|
});
|
|
108
|
+
it('accepts a hover prop', () => {
|
|
109
|
+
const cb = jest.fn();
|
|
110
|
+
const wrapper = mount( /*#__PURE__*/React.createElement(DataTableRow, {
|
|
111
|
+
expandable: true,
|
|
112
|
+
expandableContent: "test",
|
|
113
|
+
onExpandToggle: cb,
|
|
114
|
+
onMouseOver: cb,
|
|
115
|
+
onClick: cb
|
|
116
|
+
}));
|
|
117
|
+
wrapper.find('tr').simulate('mouseover');
|
|
118
|
+
wrapper.find('tr').simulate('click');
|
|
119
|
+
expect(cb).toHaveBeenCalledTimes(2);
|
|
120
|
+
});
|
|
108
121
|
});
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
1
3
|
import { requiredIf } from '@dhis2/prop-types';
|
|
2
4
|
import cx from 'classnames';
|
|
3
5
|
import PropTypes from 'prop-types';
|
|
@@ -17,7 +19,8 @@ export const DataTableRow = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
17
19
|
selected,
|
|
18
20
|
draggable,
|
|
19
21
|
role,
|
|
20
|
-
onExpandToggle
|
|
22
|
+
onExpandToggle,
|
|
23
|
+
...rest
|
|
21
24
|
} = _ref;
|
|
22
25
|
const [isHoveringExpandedContent, setIsHoveringExpandedContent] = useState(false);
|
|
23
26
|
const classes = cx(className, resolvedCss.className, {
|
|
@@ -28,14 +31,14 @@ export const DataTableRow = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
28
31
|
});
|
|
29
32
|
const childCount = React.Children.count(children);
|
|
30
33
|
const colSpan = String(draggable || expandableContent ? childCount + 1 : childCount);
|
|
31
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, {
|
|
34
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableRow, _extends({
|
|
32
35
|
ref: ref,
|
|
33
36
|
className: classes,
|
|
34
37
|
dataTest: dataTest,
|
|
35
38
|
selected: selected,
|
|
36
39
|
draggable: draggable,
|
|
37
40
|
role: role
|
|
38
|
-
}, draggable && /*#__PURE__*/React.createElement(DragHandleCell, null), expandableContent && /*#__PURE__*/React.createElement(ExpandHandleCell, {
|
|
41
|
+
}, rest), draggable && /*#__PURE__*/React.createElement(DragHandleCell, null), expandableContent && /*#__PURE__*/React.createElement(ExpandHandleCell, {
|
|
39
42
|
expanded: expanded,
|
|
40
43
|
onClick: onExpandToggle
|
|
41
44
|
}), children, resolvedCss.styles), expandableContent && expanded && /*#__PURE__*/React.createElement(ExpandedRow, {
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
|
+
|
|
3
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
+
|
|
2
5
|
import cx from 'classnames';
|
|
3
6
|
import PropTypes from 'prop-types';
|
|
4
7
|
import React, { useContext } from 'react';
|
|
@@ -11,19 +14,21 @@ export const TableRow = _ref => {
|
|
|
11
14
|
children,
|
|
12
15
|
className,
|
|
13
16
|
dataTest,
|
|
14
|
-
suppressZebraStriping
|
|
17
|
+
suppressZebraStriping,
|
|
18
|
+
...rest
|
|
15
19
|
} = _ref;
|
|
16
20
|
const {
|
|
17
21
|
suppressZebraStriping: suppressZebraStripingFromContext
|
|
18
22
|
} = useContext(TableContext);
|
|
19
23
|
const zebraStriping = typeof suppressZebraStriping !== 'undefined' ? !suppressZebraStriping : !suppressZebraStripingFromContext;
|
|
20
|
-
return /*#__PURE__*/React.createElement("tr", {
|
|
24
|
+
return /*#__PURE__*/React.createElement("tr", _extends({
|
|
21
25
|
"data-test": dataTest,
|
|
22
|
-
role: role
|
|
23
|
-
|
|
26
|
+
role: role
|
|
27
|
+
}, rest, {
|
|
28
|
+
className: "jsx-".concat(tableRowStyles.__hash) + " " + (rest && rest.className != null && rest.className || cx(className, {
|
|
24
29
|
zebraStriping
|
|
25
30
|
}) || "")
|
|
26
|
-
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
31
|
+
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
27
32
|
id: tableRowStyles.__hash
|
|
28
33
|
}, tableRowStyles));
|
|
29
34
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/table",
|
|
3
|
-
"version": "9.0
|
|
3
|
+
"version": "9.1.0",
|
|
4
4
|
"description": "UI Table",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@dhis2/prop-types": "^3.1.2",
|
|
37
|
-
"@dhis2/ui-constants": "9.0
|
|
38
|
-
"@dhis2/ui-icons": "9.0
|
|
37
|
+
"@dhis2/ui-constants": "9.1.0",
|
|
38
|
+
"@dhis2/ui-icons": "9.1.0",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
40
|
"prop-types": "^15.7.2"
|
|
41
41
|
},
|