@dhis2-ui/table 8.2.6 → 8.3.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/data-table-cell.js +6 -1
- package/build/cjs/data-table/data-table.stories.js +17 -1
- package/build/cjs/data-table/table-elements/table-data-cell/table-data-cell.js +11 -5
- package/build/cjs/data-table/table-elements/table-data-cell/table-data-cell.styles.js +2 -2
- package/build/cjs/data-table/table-elements/table-header-cell/table-header-cell.js +11 -5
- package/build/cjs/data-table/table-elements/table-header-cell/table-header-cell.styles.js +2 -2
- package/build/es/data-table/data-table-cell.js +6 -1
- package/build/es/data-table/data-table.stories.js +17 -1
- package/build/es/data-table/table-elements/table-data-cell/table-data-cell.js +10 -5
- package/build/es/data-table/table-elements/table-data-cell/table-data-cell.styles.js +2 -2
- package/build/es/data-table/table-elements/table-header-cell/table-header-cell.js +10 -5
- package/build/es/data-table/table-elements/table-header-cell/table-header-cell.styles.js +2 -2
- package/package.json +4 -4
|
@@ -23,6 +23,7 @@ const DataTableCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
23
23
|
let {
|
|
24
24
|
active,
|
|
25
25
|
align,
|
|
26
|
+
backgroundColor,
|
|
26
27
|
bordered,
|
|
27
28
|
children,
|
|
28
29
|
className,
|
|
@@ -46,6 +47,7 @@ const DataTableCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
46
47
|
return /*#__PURE__*/_react.default.createElement(TableCell, {
|
|
47
48
|
active: active,
|
|
48
49
|
align: align,
|
|
50
|
+
backgroundColor: backgroundColor,
|
|
49
51
|
bordered: bordered,
|
|
50
52
|
className: className,
|
|
51
53
|
colSpan: colSpan,
|
|
@@ -76,9 +78,12 @@ DataTableCell.defaultProps = {
|
|
|
76
78
|
const stylePropType = (0, _propTypes.mutuallyExclusive)(['valid', 'error', 'muted'], _propTypes2.default.bool);
|
|
77
79
|
const requiredIfFixedPropType = (0, _propTypes.requiredIf)(props => props.fixed, _propTypes2.default.string);
|
|
78
80
|
DataTableCell.propTypes = {
|
|
79
|
-
/** To toggle
|
|
81
|
+
/** To toggle border color, for example for editing */
|
|
80
82
|
active: _propTypes2.default.bool,
|
|
81
83
|
align: _propTypes2.default.oneOf(['left', 'center', 'right']),
|
|
84
|
+
|
|
85
|
+
/** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
|
|
86
|
+
backgroundColor: _propTypes2.default.string,
|
|
82
87
|
bordered: _propTypes2.default.bool,
|
|
83
88
|
children: _propTypes2.default.node,
|
|
84
89
|
className: _propTypes2.default.string,
|
|
@@ -199,7 +199,23 @@ const IndividualCellTemplate = args => /*#__PURE__*/_react.default.createElement
|
|
|
199
199
|
valid: true
|
|
200
200
|
}, "Valid"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
|
|
201
201
|
muted: true
|
|
202
|
-
}, "Muted"))
|
|
202
|
+
}, "Muted")), /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
|
|
203
|
+
tag: "th",
|
|
204
|
+
backgroundColor: "lightgreen"
|
|
205
|
+
}, "Custom background (lightgreen)"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
|
|
206
|
+
backgroundColor: "#eff"
|
|
207
|
+
}, "#eff"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
|
|
208
|
+
active: true,
|
|
209
|
+
backgroundColor: "yellow"
|
|
210
|
+
}, "yellow"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, "None")), /*#__PURE__*/_react.default.createElement(_dataTableRow.DataTableRow, {
|
|
211
|
+
selected: true
|
|
212
|
+
}, /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
|
|
213
|
+
tag: "th"
|
|
214
|
+
}, "Custom background (on selected row )"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
|
|
215
|
+
backgroundColor: "#eff"
|
|
216
|
+
}, "#eff"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, {
|
|
217
|
+
backgroundColor: "yellow"
|
|
218
|
+
}, "yellow"), /*#__PURE__*/_react.default.createElement(_dataTableCell.DataTableCell, null, "None"))));
|
|
203
219
|
|
|
204
220
|
const CellStyling = IndividualCellTemplate.bind({});
|
|
205
221
|
exports.CellStyling = CellStyling;
|
|
@@ -9,6 +9,8 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
|
9
9
|
|
|
10
10
|
var _propTypes = require("@dhis2/prop-types");
|
|
11
11
|
|
|
12
|
+
var _uiConstants = require("@dhis2/ui-constants");
|
|
13
|
+
|
|
12
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
15
|
|
|
14
16
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
@@ -29,6 +31,7 @@ const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
29
31
|
let {
|
|
30
32
|
active,
|
|
31
33
|
align,
|
|
34
|
+
backgroundColor,
|
|
32
35
|
bordered,
|
|
33
36
|
children,
|
|
34
37
|
className,
|
|
@@ -55,7 +58,7 @@ const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
55
58
|
"data-test": dataTest,
|
|
56
59
|
role: role,
|
|
57
60
|
scope: scope,
|
|
58
|
-
className: "jsx-".concat(_tableDataCellStyles.default.__hash) + " " + _style.default.dynamic([["
|
|
61
|
+
className: "jsx-".concat(_tableDataCellStyles.default.__hash) + " " + _style.default.dynamic([["1402113910", [left, align, width, backgroundColor || _uiConstants.colors.white, backgroundColor || _uiConstants.colors.teal100, backgroundColor || _uiConstants.colors.grey100, backgroundColor || _uiConstants.colors.grey200, backgroundColor || '#cdeae8']]]) + " " + ((0, _classnames.default)(className, {
|
|
59
62
|
active,
|
|
60
63
|
bordered,
|
|
61
64
|
error,
|
|
@@ -67,9 +70,9 @@ const TableDataCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
67
70
|
}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
68
71
|
id: _tableDataCellStyles.default.__hash
|
|
69
72
|
}, _tableDataCellStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
70
|
-
id: "
|
|
71
|
-
dynamic: [left, align, width]
|
|
72
|
-
}, ["td.__jsx-style-dynamic-selector{left:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";}")]));
|
|
73
|
+
id: "1402113910",
|
|
74
|
+
dynamic: [left, align, width, backgroundColor || _uiConstants.colors.white, backgroundColor || _uiConstants.colors.teal100, backgroundColor || _uiConstants.colors.grey100, backgroundColor || _uiConstants.colors.grey200, backgroundColor || '#cdeae8']
|
|
75
|
+
}, ["td.__jsx-style-dynamic-selector{left:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || _uiConstants.colors.white, ";}"), "tr.selected>td.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || _uiConstants.colors.teal100, ";}"), "tr:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || _uiConstants.colors.grey100, ";}"), "tr:active>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || _uiConstants.colors.grey200, ";}"), "tr.selected:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || '#cdeae8', ";}")]));
|
|
73
76
|
});
|
|
74
77
|
exports.TableDataCell = TableDataCell;
|
|
75
78
|
TableDataCell.displayName = 'TableDataCell';
|
|
@@ -81,9 +84,12 @@ TableDataCell.defaultProps = {
|
|
|
81
84
|
};
|
|
82
85
|
const stylePropType = (0, _propTypes.mutuallyExclusive)(['valid', 'error', 'muted'], _propTypes2.default.bool);
|
|
83
86
|
TableDataCell.propTypes = {
|
|
84
|
-
/** To toggle
|
|
87
|
+
/** To toggle border color, for example for editing */
|
|
85
88
|
active: _propTypes2.default.bool,
|
|
86
89
|
align: _propTypes2.default.oneOf(['left', 'center', 'right']),
|
|
90
|
+
|
|
91
|
+
/** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
|
|
92
|
+
backgroundColor: _propTypes2.default.string,
|
|
87
93
|
bordered: _propTypes2.default.bool,
|
|
88
94
|
children: _propTypes2.default.node,
|
|
89
95
|
className: _propTypes2.default.string,
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = ["td.jsx-
|
|
11
|
-
_defaultExport.__hash = "
|
|
10
|
+
const _defaultExport = ["td.jsx-369355652{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";color:").concat(_uiConstants.colors.grey900, ";}"), "td.active.jsx-369355652{outline:2px solid ".concat(_uiConstants.colors.grey600, ";outline-offset:-2px;}"), "td.bordered.jsx-369355652{border-right:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "td.bordered.jsx-369355652:last-child{border-right:1px solid transparent;}", "td.error.jsx-369355652{color:".concat(_uiConstants.colors.red700, ";}"), "td.muted.jsx-369355652{color:".concat(_uiConstants.colors.grey700, ";font-style:italic;}"), "td.valid.jsx-369355652{color:".concat(_uiConstants.colors.green700, ";}"), "td.large.jsx-369355652{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-369355652{border-bottom:1px solid transparent;}", "tfoot tr:first-child td.jsx-369355652{border-top:1px solid ".concat(_uiConstants.colors.grey300, ";}")];
|
|
11
|
+
_defaultExport.__hash = "369355652";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -9,6 +9,8 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
|
9
9
|
|
|
10
10
|
var _propTypes = require("@dhis2/prop-types");
|
|
11
11
|
|
|
12
|
+
var _uiConstants = require("@dhis2/ui-constants");
|
|
13
|
+
|
|
12
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
15
|
|
|
14
16
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
@@ -30,6 +32,7 @@ const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
30
32
|
let {
|
|
31
33
|
active,
|
|
32
34
|
align,
|
|
35
|
+
backgroundColor,
|
|
33
36
|
bordered,
|
|
34
37
|
children,
|
|
35
38
|
className,
|
|
@@ -58,7 +61,7 @@ const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
58
61
|
"data-test": dataTest,
|
|
59
62
|
role: role,
|
|
60
63
|
scope: scope,
|
|
61
|
-
className: "jsx-".concat(_tableHeaderCellStyles.default.__hash) + " " + _style.default.dynamic([["
|
|
64
|
+
className: "jsx-".concat(_tableHeaderCellStyles.default.__hash) + " " + _style.default.dynamic([["178320390", [left, top, align, width, backgroundColor || _uiConstants.colors.grey200, backgroundColor || _uiConstants.colors.grey300, backgroundColor || _uiConstants.colors.grey300, backgroundColor || _uiConstants.colors.grey200]]]) + " " + ((0, _classnames.default)(className, {
|
|
62
65
|
active,
|
|
63
66
|
bordered,
|
|
64
67
|
error,
|
|
@@ -72,9 +75,9 @@ const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
72
75
|
}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
73
76
|
id: _tableHeaderCellStyles.default.__hash
|
|
74
77
|
}, _tableHeaderCellStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
75
|
-
id: "
|
|
76
|
-
dynamic: [left, top, align, width]
|
|
77
|
-
}, ["th.__jsx-style-dynamic-selector{left:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";}")]));
|
|
78
|
+
id: "178320390",
|
|
79
|
+
dynamic: [left, top, align, width, backgroundColor || _uiConstants.colors.grey200, backgroundColor || _uiConstants.colors.grey300, backgroundColor || _uiConstants.colors.grey300, backgroundColor || _uiConstants.colors.grey200]
|
|
80
|
+
}, ["th.__jsx-style-dynamic-selector{left:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || _uiConstants.colors.grey200, ";}"), "thead th.fixedHorizontally.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || _uiConstants.colors.grey300, ";}"), "tbody>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle),tfoot>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || _uiConstants.colors.grey300, ";}"), "tbody>tr:active>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || _uiConstants.colors.grey200, ";}")]));
|
|
78
81
|
});
|
|
79
82
|
exports.TableHeaderCell = TableHeaderCell;
|
|
80
83
|
TableHeaderCell.displayName = 'TableHeaderCell';
|
|
@@ -87,9 +90,12 @@ TableHeaderCell.defaultProps = {
|
|
|
87
90
|
};
|
|
88
91
|
const stylePropType = (0, _propTypes.mutuallyExclusive)(['valid', 'error', 'muted'], _propTypes2.default.bool);
|
|
89
92
|
TableHeaderCell.propTypes = {
|
|
90
|
-
/** To toggle
|
|
93
|
+
/** To toggle border color, for example for editing */
|
|
91
94
|
active: _propTypes2.default.bool,
|
|
92
95
|
align: _propTypes2.default.oneOf(['left', 'center', 'right']),
|
|
96
|
+
|
|
97
|
+
/** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
|
|
98
|
+
backgroundColor: _propTypes2.default.string,
|
|
93
99
|
bordered: _propTypes2.default.bool,
|
|
94
100
|
children: _propTypes2.default.node,
|
|
95
101
|
className: _propTypes2.default.string,
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = ["th.jsx-
|
|
11
|
-
_defaultExport.__hash = "
|
|
10
|
+
const _defaultExport = ["th.jsx-2515928253{padding:12px;border:1px solid transparant;border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";color:").concat(_uiConstants.colors.grey800, ";font-weight:normal;font-size:14px;vertical-align:top;}"), "thead th.jsx-2515928253{padding:8px 12px;font-size:13px;}", "th.jsx-2515928253:last-of-type{border-right:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "th.active.jsx-2515928253{outline:2px solid ".concat(_uiConstants.colors.grey600, ";outline-offset:-2px;}"), "th.bordered.jsx-2515928253{border-right:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "th.bordered.jsx-2515928253:last-child{border-right:1px solid transparent;}", "th.error.jsx-2515928253{color:".concat(_uiConstants.colors.red700, ";}"), "th.muted.jsx-2515928253{color:".concat(_uiConstants.colors.grey700, ";font-style:italic;}"), "th.valid.jsx-2515928253{color:".concat(_uiConstants.colors.green700, ";}"), "th.large.jsx-2515928253{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-2515928253{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-2515928253{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-2515928253{position:-webkit-sticky;position:sticky;z-index:2;}", "thead th.fixedHorizontally.jsx-2515928253{z-index:3;}", "tr:last-child th.jsx-2515928253{border-bottom:1px solid transparent;}", "thead tr:last-child th.jsx-2515928253{border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "tfoot>tr:first-child th.jsx-2515928253{border-top:1px solid ".concat(_uiConstants.colors.grey300, ";}")];
|
|
11
|
+
_defaultExport.__hash = "2515928253";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -6,6 +6,7 @@ export const DataTableCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
6
6
|
let {
|
|
7
7
|
active,
|
|
8
8
|
align,
|
|
9
|
+
backgroundColor,
|
|
9
10
|
bordered,
|
|
10
11
|
children,
|
|
11
12
|
className,
|
|
@@ -29,6 +30,7 @@ export const DataTableCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
29
30
|
return /*#__PURE__*/React.createElement(TableCell, {
|
|
30
31
|
active: active,
|
|
31
32
|
align: align,
|
|
33
|
+
backgroundColor: backgroundColor,
|
|
32
34
|
bordered: bordered,
|
|
33
35
|
className: className,
|
|
34
36
|
colSpan: colSpan,
|
|
@@ -58,9 +60,12 @@ DataTableCell.defaultProps = {
|
|
|
58
60
|
const stylePropType = mutuallyExclusive(['valid', 'error', 'muted'], PropTypes.bool);
|
|
59
61
|
const requiredIfFixedPropType = requiredIf(props => props.fixed, PropTypes.string);
|
|
60
62
|
DataTableCell.propTypes = {
|
|
61
|
-
/** To toggle
|
|
63
|
+
/** To toggle border color, for example for editing */
|
|
62
64
|
active: PropTypes.bool,
|
|
63
65
|
align: PropTypes.oneOf(['left', 'center', 'right']),
|
|
66
|
+
|
|
67
|
+
/** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
|
|
68
|
+
backgroundColor: PropTypes.string,
|
|
64
69
|
bordered: PropTypes.bool,
|
|
65
70
|
children: PropTypes.node,
|
|
66
71
|
className: PropTypes.string,
|
|
@@ -170,7 +170,23 @@ const IndividualCellTemplate = args => /*#__PURE__*/React.createElement(DataTabl
|
|
|
170
170
|
valid: true
|
|
171
171
|
}, "Valid"), /*#__PURE__*/React.createElement(DataTableCell, {
|
|
172
172
|
muted: true
|
|
173
|
-
}, "Muted"))
|
|
173
|
+
}, "Muted")), /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
|
|
174
|
+
tag: "th",
|
|
175
|
+
backgroundColor: "lightgreen"
|
|
176
|
+
}, "Custom background (lightgreen)"), /*#__PURE__*/React.createElement(DataTableCell, {
|
|
177
|
+
backgroundColor: "#eff"
|
|
178
|
+
}, "#eff"), /*#__PURE__*/React.createElement(DataTableCell, {
|
|
179
|
+
active: true,
|
|
180
|
+
backgroundColor: "yellow"
|
|
181
|
+
}, "yellow"), /*#__PURE__*/React.createElement(DataTableCell, null, "None")), /*#__PURE__*/React.createElement(DataTableRow, {
|
|
182
|
+
selected: true
|
|
183
|
+
}, /*#__PURE__*/React.createElement(DataTableCell, {
|
|
184
|
+
tag: "th"
|
|
185
|
+
}, "Custom background (on selected row )"), /*#__PURE__*/React.createElement(DataTableCell, {
|
|
186
|
+
backgroundColor: "#eff"
|
|
187
|
+
}, "#eff"), /*#__PURE__*/React.createElement(DataTableCell, {
|
|
188
|
+
backgroundColor: "yellow"
|
|
189
|
+
}, "yellow"), /*#__PURE__*/React.createElement(DataTableCell, null, "None"))));
|
|
174
190
|
|
|
175
191
|
export const CellStyling = IndividualCellTemplate.bind({});
|
|
176
192
|
CellStyling.args = {};
|
|
@@ -3,6 +3,7 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
3
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
4
|
|
|
5
5
|
import { mutuallyExclusive, requiredIf } from '@dhis2/prop-types';
|
|
6
|
+
import { colors } from '@dhis2/ui-constants';
|
|
6
7
|
import cx from 'classnames';
|
|
7
8
|
import PropTypes from 'prop-types';
|
|
8
9
|
import React, { forwardRef } from 'react';
|
|
@@ -11,6 +12,7 @@ export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
11
12
|
let {
|
|
12
13
|
active,
|
|
13
14
|
align,
|
|
15
|
+
backgroundColor,
|
|
14
16
|
bordered,
|
|
15
17
|
children,
|
|
16
18
|
className,
|
|
@@ -37,7 +39,7 @@ export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
37
39
|
"data-test": dataTest,
|
|
38
40
|
role: role,
|
|
39
41
|
scope: scope,
|
|
40
|
-
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["
|
|
42
|
+
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["1402113910", [left, align, width, backgroundColor || colors.white, backgroundColor || colors.teal100, backgroundColor || colors.grey100, backgroundColor || colors.grey200, backgroundColor || '#cdeae8']]]) + " " + (cx(className, {
|
|
41
43
|
active,
|
|
42
44
|
bordered,
|
|
43
45
|
error,
|
|
@@ -49,9 +51,9 @@ export const TableDataCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
49
51
|
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
50
52
|
id: styles.__hash
|
|
51
53
|
}, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
52
|
-
id: "
|
|
53
|
-
dynamic: [left, align, width]
|
|
54
|
-
}, ["td.__jsx-style-dynamic-selector{left:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";}")]));
|
|
54
|
+
id: "1402113910",
|
|
55
|
+
dynamic: [left, align, width, backgroundColor || colors.white, backgroundColor || colors.teal100, backgroundColor || colors.grey100, backgroundColor || colors.grey200, backgroundColor || '#cdeae8']
|
|
56
|
+
}, ["td.__jsx-style-dynamic-selector{left:".concat(left, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || colors.white, ";}"), "tr.selected>td.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || colors.teal100, ";}"), "tr:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey100, ";}"), "tr:active>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey200, ";}"), "tr.selected:hover>td.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || '#cdeae8', ";}")]));
|
|
55
57
|
});
|
|
56
58
|
TableDataCell.displayName = 'TableDataCell';
|
|
57
59
|
TableDataCell.defaultProps = {
|
|
@@ -62,9 +64,12 @@ TableDataCell.defaultProps = {
|
|
|
62
64
|
};
|
|
63
65
|
const stylePropType = mutuallyExclusive(['valid', 'error', 'muted'], PropTypes.bool);
|
|
64
66
|
TableDataCell.propTypes = {
|
|
65
|
-
/** To toggle
|
|
67
|
+
/** To toggle border color, for example for editing */
|
|
66
68
|
active: PropTypes.bool,
|
|
67
69
|
align: PropTypes.oneOf(['left', 'center', 'right']),
|
|
70
|
+
|
|
71
|
+
/** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
|
|
72
|
+
backgroundColor: PropTypes.string,
|
|
68
73
|
bordered: PropTypes.bool,
|
|
69
74
|
children: PropTypes.node,
|
|
70
75
|
className: PropTypes.string,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = ["td.jsx-
|
|
3
|
-
_defaultExport.__hash = "
|
|
2
|
+
const _defaultExport = ["td.jsx-369355652{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ".concat(colors.grey300, ";color:").concat(colors.grey900, ";}"), "td.active.jsx-369355652{outline:2px solid ".concat(colors.grey600, ";outline-offset:-2px;}"), "td.bordered.jsx-369355652{border-right:1px solid ".concat(colors.grey300, ";}"), "td.bordered.jsx-369355652:last-child{border-right:1px solid transparent;}", "td.error.jsx-369355652{color:".concat(colors.red700, ";}"), "td.muted.jsx-369355652{color:".concat(colors.grey700, ";font-style:italic;}"), "td.valid.jsx-369355652{color:".concat(colors.green700, ";}"), "td.large.jsx-369355652{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-369355652{border-bottom:1px solid transparent;}", "tfoot tr:first-child td.jsx-369355652{border-top:1px solid ".concat(colors.grey300, ";}")];
|
|
3
|
+
_defaultExport.__hash = "369355652";
|
|
4
4
|
export default _defaultExport;
|
|
@@ -3,6 +3,7 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
3
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
4
|
|
|
5
5
|
import { mutuallyExclusive, requiredIf } from '@dhis2/prop-types';
|
|
6
|
+
import { colors } from '@dhis2/ui-constants';
|
|
6
7
|
import cx from 'classnames';
|
|
7
8
|
import PropTypes from 'prop-types';
|
|
8
9
|
import React, { forwardRef } from 'react';
|
|
@@ -12,6 +13,7 @@ export const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
12
13
|
let {
|
|
13
14
|
active,
|
|
14
15
|
align,
|
|
16
|
+
backgroundColor,
|
|
15
17
|
bordered,
|
|
16
18
|
children,
|
|
17
19
|
className,
|
|
@@ -40,7 +42,7 @@ export const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
40
42
|
"data-test": dataTest,
|
|
41
43
|
role: role,
|
|
42
44
|
scope: scope,
|
|
43
|
-
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["
|
|
45
|
+
className: "jsx-".concat(styles.__hash) + " " + _JSXStyle.dynamic([["178320390", [left, top, align, width, backgroundColor || colors.grey200, backgroundColor || colors.grey300, backgroundColor || colors.grey300, backgroundColor || colors.grey200]]]) + " " + (cx(className, {
|
|
44
46
|
active,
|
|
45
47
|
bordered,
|
|
46
48
|
error,
|
|
@@ -54,9 +56,9 @@ export const TableHeaderCell = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
54
56
|
}), children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
55
57
|
id: styles.__hash
|
|
56
58
|
}, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
57
|
-
id: "
|
|
58
|
-
dynamic: [left, top, align, width]
|
|
59
|
-
}, ["th.__jsx-style-dynamic-selector{left:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";}")]));
|
|
59
|
+
id: "178320390",
|
|
60
|
+
dynamic: [left, top, align, width, backgroundColor || colors.grey200, backgroundColor || colors.grey300, backgroundColor || colors.grey300, backgroundColor || colors.grey200]
|
|
61
|
+
}, ["th.__jsx-style-dynamic-selector{left:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";background-color:").concat(backgroundColor || colors.grey200, ";}"), "thead th.fixedHorizontally.__jsx-style-dynamic-selector{background-color:".concat(backgroundColor || colors.grey300, ";}"), "tbody>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle),tfoot>tr:hover>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey300, ";}"), "tbody>tr:active>th.__jsx-style-dynamic-selector:not(.staticStyle){background-color:".concat(backgroundColor || colors.grey200, ";}")]));
|
|
60
62
|
});
|
|
61
63
|
TableHeaderCell.displayName = 'TableHeaderCell';
|
|
62
64
|
TableHeaderCell.defaultProps = {
|
|
@@ -68,9 +70,12 @@ TableHeaderCell.defaultProps = {
|
|
|
68
70
|
};
|
|
69
71
|
const stylePropType = mutuallyExclusive(['valid', 'error', 'muted'], PropTypes.bool);
|
|
70
72
|
TableHeaderCell.propTypes = {
|
|
71
|
-
/** To toggle
|
|
73
|
+
/** To toggle border color, for example for editing */
|
|
72
74
|
active: PropTypes.bool,
|
|
73
75
|
align: PropTypes.oneOf(['left', 'center', 'right']),
|
|
76
|
+
|
|
77
|
+
/** Sets background color of the cell. Disables dynamic background colors from active, hover, and selected states */
|
|
78
|
+
backgroundColor: PropTypes.string,
|
|
74
79
|
bordered: PropTypes.bool,
|
|
75
80
|
children: PropTypes.node,
|
|
76
81
|
className: PropTypes.string,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = ["th.jsx-
|
|
3
|
-
_defaultExport.__hash = "
|
|
2
|
+
const _defaultExport = ["th.jsx-2515928253{padding:12px;border:1px solid transparant;border-bottom:1px solid ".concat(colors.grey300, ";color:").concat(colors.grey800, ";font-weight:normal;font-size:14px;vertical-align:top;}"), "thead th.jsx-2515928253{padding:8px 12px;font-size:13px;}", "th.jsx-2515928253:last-of-type{border-right:1px solid ".concat(colors.grey300, ";}"), "th.active.jsx-2515928253{outline:2px solid ".concat(colors.grey600, ";outline-offset:-2px;}"), "th.bordered.jsx-2515928253{border-right:1px solid ".concat(colors.grey300, ";}"), "th.bordered.jsx-2515928253:last-child{border-right:1px solid transparent;}", "th.error.jsx-2515928253{color:".concat(colors.red700, ";}"), "th.muted.jsx-2515928253{color:".concat(colors.grey700, ";font-style:italic;}"), "th.valid.jsx-2515928253{color:".concat(colors.green700, ";}"), "th.large.jsx-2515928253{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-2515928253{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-2515928253{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-2515928253{position:-webkit-sticky;position:sticky;z-index:2;}", "thead th.fixedHorizontally.jsx-2515928253{z-index:3;}", "tr:last-child th.jsx-2515928253{border-bottom:1px solid transparent;}", "thead tr:last-child th.jsx-2515928253{border-bottom:1px solid ".concat(colors.grey300, ";}"), "tfoot>tr:first-child th.jsx-2515928253{border-top:1px solid ".concat(colors.grey300, ";}")];
|
|
3
|
+
_defaultExport.__hash = "2515928253";
|
|
4
4
|
export default _defaultExport;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/table",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.3.0",
|
|
4
4
|
"description": "UI Table",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
"styled-jsx": "^4"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@dhis2/prop-types": "^3.
|
|
36
|
-
"@dhis2/ui-constants": "8.
|
|
37
|
-
"@dhis2/ui-icons": "8.
|
|
35
|
+
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
+
"@dhis2/ui-constants": "8.3.0",
|
|
37
|
+
"@dhis2/ui-icons": "8.3.0",
|
|
38
38
|
"classnames": "^2.3.1",
|
|
39
39
|
"prop-types": "^15.7.2"
|
|
40
40
|
},
|