@sis-cc/dotstatsuite-visions 6.6.3 → 6.6.4
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/TableHtml5/header.js
CHANGED
|
@@ -59,7 +59,7 @@ var Header = function Header(_ref) {
|
|
|
59
59
|
var theme = useTheme();
|
|
60
60
|
var isRtl = getIsRtl(theme);
|
|
61
61
|
|
|
62
|
-
var stickyLabelPosition = R.
|
|
62
|
+
var stickyLabelPosition = R.last(subHeadCellsWidth) + 30 + theme.spacing(1);
|
|
63
63
|
|
|
64
64
|
if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(headerData)) return null;
|
|
65
65
|
return timesIndexed(function (index) {
|
|
@@ -80,7 +80,7 @@ var Header = function Header(_ref) {
|
|
|
80
80
|
colSpan: R.inc(xLayoutDataLength),
|
|
81
81
|
id: id,
|
|
82
82
|
tabIndex: 0,
|
|
83
|
-
style: { position: 'sticky',
|
|
83
|
+
style: isRtl ? { position: 'sticky', zIndex: 1, right: 0 } : { position: 'sticky', zIndex: 1, left: 0 }
|
|
84
84
|
},
|
|
85
85
|
React.createElement(
|
|
86
86
|
'div',
|
package/es/TableHtml5/section.js
CHANGED
|
@@ -5,13 +5,13 @@ import * as R from 'ramda';
|
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import cx from 'classnames';
|
|
7
7
|
import Typography from '@material-ui/core/Typography';
|
|
8
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
8
|
+
import { makeStyles, useTheme } from '@material-ui/core/styles';
|
|
9
9
|
import TableBody from '@material-ui/core/TableBody';
|
|
10
10
|
import TableCell from '@material-ui/core/TableCell';
|
|
11
11
|
import TableRow from '@material-ui/core/TableRow';
|
|
12
12
|
import SectionHeader from './sectionHeader';
|
|
13
13
|
import Cell from './cell';
|
|
14
|
-
import { getLight } from '../utils';
|
|
14
|
+
import { getLight, getIsRtl } from '../utils';
|
|
15
15
|
import Flags from './flags';
|
|
16
16
|
|
|
17
17
|
var useStyles = makeStyles(function (theme) {
|
|
@@ -32,7 +32,8 @@ var useStyles = makeStyles(function (theme) {
|
|
|
32
32
|
border: 'inherit',
|
|
33
33
|
borderBottom: '1px solid ' + theme.palette.grey[500],
|
|
34
34
|
borderRight: '1px solid ' + theme.palette.grey[500],
|
|
35
|
-
padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px'
|
|
35
|
+
padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
|
|
36
|
+
position: 'sticky'
|
|
36
37
|
},
|
|
37
38
|
cellContent: {
|
|
38
39
|
display: 'flex',
|
|
@@ -49,7 +50,11 @@ var useStyles = makeStyles(function (theme) {
|
|
|
49
50
|
hierarchySpace: {
|
|
50
51
|
marginBottom: 'auto'
|
|
51
52
|
},
|
|
52
|
-
highlight: theme.mixins.table.cellHighlight
|
|
53
|
+
highlight: theme.mixins.table.cellHighlight,
|
|
54
|
+
stickyHeader: {
|
|
55
|
+
position: 'sticky',
|
|
56
|
+
zIndex: 1
|
|
57
|
+
}
|
|
53
58
|
};
|
|
54
59
|
});
|
|
55
60
|
var mapIndexed = R.addIndex(R.map);
|
|
@@ -71,6 +76,8 @@ var Section = function Section(_ref) {
|
|
|
71
76
|
var currentSection = R.path([0, 'key'], section);
|
|
72
77
|
var headerNumberRows = R.length(nbColumnsByRows);
|
|
73
78
|
var maxColumns = R.last(nbColumnsByRows);
|
|
79
|
+
var theme = useTheme();
|
|
80
|
+
var isRtl = getIsRtl(theme);
|
|
74
81
|
|
|
75
82
|
return React.createElement(
|
|
76
83
|
TableBody,
|
|
@@ -109,16 +116,11 @@ var Section = function Section(_ref) {
|
|
|
109
116
|
TableCell,
|
|
110
117
|
{
|
|
111
118
|
key: id,
|
|
112
|
-
className: cx(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
|
|
119
|
+
className: cx(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
|
|
113
120
|
id: id,
|
|
114
121
|
headers: 'subHeader_' + index + ' ' + currentSection,
|
|
115
122
|
component: 'th',
|
|
116
|
-
style: {
|
|
117
|
-
position: 'sticky',
|
|
118
|
-
left: subHeadCellsWidth[index],
|
|
119
|
-
right: subHeadCellsWidth[index],
|
|
120
|
-
zIndex: 1
|
|
121
|
-
}
|
|
123
|
+
style: isRtl ? { right: subHeadCellsWidth[index] } : { left: subHeadCellsWidth[index] }
|
|
122
124
|
},
|
|
123
125
|
React.createElement(
|
|
124
126
|
'div',
|
|
@@ -141,11 +143,7 @@ var Section = function Section(_ref) {
|
|
|
141
143
|
TableCell,
|
|
142
144
|
{
|
|
143
145
|
className: cx(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2)),
|
|
144
|
-
style: {
|
|
145
|
-
position: 'sticky',
|
|
146
|
-
left: R.last(subHeadCellsWidth),
|
|
147
|
-
right: R.last(subHeadCellsWidth)
|
|
148
|
-
}
|
|
146
|
+
style: isRtl ? { right: R.last(subHeadCellsWidth) } : { left: R.last(subHeadCellsWidth) }
|
|
149
147
|
},
|
|
150
148
|
React.createElement(
|
|
151
149
|
'div',
|
|
@@ -3,10 +3,10 @@ import * as R from 'ramda';
|
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import cx from 'classnames';
|
|
5
5
|
import Typography from '@material-ui/core/Typography';
|
|
6
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
6
|
+
import { makeStyles, useTheme } from '@material-ui/core/styles';
|
|
7
7
|
import TableCell from '@material-ui/core/TableCell';
|
|
8
8
|
import TableRow from '@material-ui/core/TableRow';
|
|
9
|
-
import { getLight } from '../utils';
|
|
9
|
+
import { getLight, getIsRtl } from '../utils';
|
|
10
10
|
import Flags from './flags';
|
|
11
11
|
|
|
12
12
|
var useStyles = makeStyles(function (theme) {
|
|
@@ -18,7 +18,9 @@ var useStyles = makeStyles(function (theme) {
|
|
|
18
18
|
borderRight: '1px solid ' + theme.palette.grey[500],
|
|
19
19
|
padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
|
|
20
20
|
color: theme.palette.grey['A700'],
|
|
21
|
-
verticalAlign: 'middle'
|
|
21
|
+
verticalAlign: 'middle',
|
|
22
|
+
position: 'sticky',
|
|
23
|
+
zIndex: 1
|
|
22
24
|
},
|
|
23
25
|
fillerCell: {
|
|
24
26
|
backgroundColor: theme.palette.grey[200],
|
|
@@ -51,6 +53,8 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
|
|
|
51
53
|
subHeadCellsWidth = _ref.subHeadCellsWidth;
|
|
52
54
|
|
|
53
55
|
var classes = useStyles();
|
|
56
|
+
var theme = useTheme();
|
|
57
|
+
var isRtl = getIsRtl(theme);
|
|
54
58
|
return React.createElement(
|
|
55
59
|
TableRow,
|
|
56
60
|
null,
|
|
@@ -62,12 +66,7 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
|
|
|
62
66
|
className: classes.columnsTitle,
|
|
63
67
|
key: index,
|
|
64
68
|
id: 'subHeader_' + index,
|
|
65
|
-
style: {
|
|
66
|
-
position: 'sticky',
|
|
67
|
-
left: subHeadCellsWidth[index],
|
|
68
|
-
right: subHeadCellsWidth[index],
|
|
69
|
-
zIndex: 1
|
|
70
|
-
},
|
|
69
|
+
style: isRtl ? { right: subHeadCellsWidth[index] } : { left: subHeadCellsWidth[index] },
|
|
71
70
|
ref: function ref(element) {
|
|
72
71
|
return refs.current[index] = element;
|
|
73
72
|
}
|
|
@@ -86,11 +85,7 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
|
|
|
86
85
|
}, xLayoutData),
|
|
87
86
|
React.createElement(TableCell, {
|
|
88
87
|
className: classes.fillerCell,
|
|
89
|
-
style: {
|
|
90
|
-
position: 'sticky',
|
|
91
|
-
left: R.last(subHeadCellsWidth),
|
|
92
|
-
right: R.last(subHeadCellsWidth)
|
|
93
|
-
}
|
|
88
|
+
style: isRtl ? { position: 'sticky', right: R.last(subHeadCellsWidth) } : { position: 'sticky', left: R.last(subHeadCellsWidth) }
|
|
94
89
|
}),
|
|
95
90
|
mapIndexed(function (item, index) {
|
|
96
91
|
var _cx;
|
package/lib/TableHtml5/header.js
CHANGED
|
@@ -92,7 +92,7 @@ var Header = function Header(_ref) {
|
|
|
92
92
|
var theme = (0, _styles.useTheme)();
|
|
93
93
|
var isRtl = (0, _utils.getIsRtl)(theme);
|
|
94
94
|
|
|
95
|
-
var stickyLabelPosition = R.
|
|
95
|
+
var stickyLabelPosition = R.last(subHeadCellsWidth) + 30 + theme.spacing(1);
|
|
96
96
|
|
|
97
97
|
if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(headerData)) return null;
|
|
98
98
|
return timesIndexed(function (index) {
|
|
@@ -113,7 +113,7 @@ var Header = function Header(_ref) {
|
|
|
113
113
|
colSpan: R.inc(xLayoutDataLength),
|
|
114
114
|
id: id,
|
|
115
115
|
tabIndex: 0,
|
|
116
|
-
style: { position: 'sticky',
|
|
116
|
+
style: isRtl ? { position: 'sticky', zIndex: 1, right: 0 } : { position: 'sticky', zIndex: 1, left: 0 }
|
|
117
117
|
},
|
|
118
118
|
_react2.default.createElement(
|
|
119
119
|
'div',
|
|
@@ -74,7 +74,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
|
74
74
|
border: 'inherit',
|
|
75
75
|
borderBottom: '1px solid ' + theme.palette.grey[500],
|
|
76
76
|
borderRight: '1px solid ' + theme.palette.grey[500],
|
|
77
|
-
padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px'
|
|
77
|
+
padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
|
|
78
|
+
position: 'sticky'
|
|
78
79
|
},
|
|
79
80
|
cellContent: {
|
|
80
81
|
display: 'flex',
|
|
@@ -91,7 +92,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
|
91
92
|
hierarchySpace: {
|
|
92
93
|
marginBottom: 'auto'
|
|
93
94
|
},
|
|
94
|
-
highlight: theme.mixins.table.cellHighlight
|
|
95
|
+
highlight: theme.mixins.table.cellHighlight,
|
|
96
|
+
stickyHeader: {
|
|
97
|
+
position: 'sticky',
|
|
98
|
+
zIndex: 1
|
|
99
|
+
}
|
|
95
100
|
};
|
|
96
101
|
});
|
|
97
102
|
var mapIndexed = R.addIndex(R.map);
|
|
@@ -113,6 +118,8 @@ var Section = function Section(_ref) {
|
|
|
113
118
|
var currentSection = R.path([0, 'key'], section);
|
|
114
119
|
var headerNumberRows = R.length(nbColumnsByRows);
|
|
115
120
|
var maxColumns = R.last(nbColumnsByRows);
|
|
121
|
+
var theme = (0, _styles.useTheme)();
|
|
122
|
+
var isRtl = (0, _utils.getIsRtl)(theme);
|
|
116
123
|
|
|
117
124
|
return _react2.default.createElement(
|
|
118
125
|
_TableBody2.default,
|
|
@@ -151,16 +158,11 @@ var Section = function Section(_ref) {
|
|
|
151
158
|
_TableCell2.default,
|
|
152
159
|
{
|
|
153
160
|
key: id,
|
|
154
|
-
className: (0, _classnames2.default)(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
|
|
161
|
+
className: (0, _classnames2.default)(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
|
|
155
162
|
id: id,
|
|
156
163
|
headers: 'subHeader_' + index + ' ' + currentSection,
|
|
157
164
|
component: 'th',
|
|
158
|
-
style: {
|
|
159
|
-
position: 'sticky',
|
|
160
|
-
left: subHeadCellsWidth[index],
|
|
161
|
-
right: subHeadCellsWidth[index],
|
|
162
|
-
zIndex: 1
|
|
163
|
-
}
|
|
165
|
+
style: isRtl ? { right: subHeadCellsWidth[index] } : { left: subHeadCellsWidth[index] }
|
|
164
166
|
},
|
|
165
167
|
_react2.default.createElement(
|
|
166
168
|
'div',
|
|
@@ -183,11 +185,7 @@ var Section = function Section(_ref) {
|
|
|
183
185
|
_TableCell2.default,
|
|
184
186
|
{
|
|
185
187
|
className: (0, _classnames2.default)(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2)),
|
|
186
|
-
style: {
|
|
187
|
-
position: 'sticky',
|
|
188
|
-
left: R.last(subHeadCellsWidth),
|
|
189
|
-
right: R.last(subHeadCellsWidth)
|
|
190
|
-
}
|
|
188
|
+
style: isRtl ? { right: R.last(subHeadCellsWidth) } : { left: R.last(subHeadCellsWidth) }
|
|
191
189
|
},
|
|
192
190
|
_react2.default.createElement(
|
|
193
191
|
'div',
|
|
@@ -51,7 +51,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
|
|
|
51
51
|
borderRight: '1px solid ' + theme.palette.grey[500],
|
|
52
52
|
padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
|
|
53
53
|
color: theme.palette.grey['A700'],
|
|
54
|
-
verticalAlign: 'middle'
|
|
54
|
+
verticalAlign: 'middle',
|
|
55
|
+
position: 'sticky',
|
|
56
|
+
zIndex: 1
|
|
55
57
|
},
|
|
56
58
|
fillerCell: {
|
|
57
59
|
backgroundColor: theme.palette.grey[200],
|
|
@@ -84,6 +86,8 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
|
|
|
84
86
|
subHeadCellsWidth = _ref.subHeadCellsWidth;
|
|
85
87
|
|
|
86
88
|
var classes = useStyles();
|
|
89
|
+
var theme = (0, _styles.useTheme)();
|
|
90
|
+
var isRtl = (0, _utils.getIsRtl)(theme);
|
|
87
91
|
return _react2.default.createElement(
|
|
88
92
|
_TableRow2.default,
|
|
89
93
|
null,
|
|
@@ -95,12 +99,7 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
|
|
|
95
99
|
className: classes.columnsTitle,
|
|
96
100
|
key: index,
|
|
97
101
|
id: 'subHeader_' + index,
|
|
98
|
-
style: {
|
|
99
|
-
position: 'sticky',
|
|
100
|
-
left: subHeadCellsWidth[index],
|
|
101
|
-
right: subHeadCellsWidth[index],
|
|
102
|
-
zIndex: 1
|
|
103
|
-
},
|
|
102
|
+
style: isRtl ? { right: subHeadCellsWidth[index] } : { left: subHeadCellsWidth[index] },
|
|
104
103
|
ref: function ref(element) {
|
|
105
104
|
return refs.current[index] = element;
|
|
106
105
|
}
|
|
@@ -119,11 +118,7 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
|
|
|
119
118
|
}, xLayoutData),
|
|
120
119
|
_react2.default.createElement(_TableCell2.default, {
|
|
121
120
|
className: classes.fillerCell,
|
|
122
|
-
style: {
|
|
123
|
-
position: 'sticky',
|
|
124
|
-
left: R.last(subHeadCellsWidth),
|
|
125
|
-
right: R.last(subHeadCellsWidth)
|
|
126
|
-
}
|
|
121
|
+
style: isRtl ? { position: 'sticky', right: R.last(subHeadCellsWidth) } : { position: 'sticky', left: R.last(subHeadCellsWidth) }
|
|
127
122
|
}),
|
|
128
123
|
mapIndexed(function (item, index) {
|
|
129
124
|
var _cx;
|