@sis-cc/dotstatsuite-visions 6.5.2 → 6.6.3

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/Share/Mode.js CHANGED
@@ -4,12 +4,13 @@ import React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import * as R from 'ramda';
6
6
  import Card from '@material-ui/core/Card';
7
- import { makeStyles } from '@material-ui/core/styles';
7
+ import { makeStyles, useTheme } from '@material-ui/core/styles';
8
8
  import CardContent from '@material-ui/core/CardContent';
9
9
  import Typography from '@material-ui/core/Typography';
10
10
  import RadioGroup from '@material-ui/core/RadioGroup';
11
11
  import FormControlLabel from '@material-ui/core/FormControlLabel';
12
12
  import Radio from '@material-ui/core/Radio';
13
+ import { Tooltip, Warning as WarningIcon } from '../';
13
14
 
14
15
  var useStyles = makeStyles(function (theme) {
15
16
  return {
@@ -28,16 +29,54 @@ var useStyles = makeStyles(function (theme) {
28
29
  padding: theme.spacing(1, 0)
29
30
  }
30
31
  },
31
- label: theme.typography.body2
32
+ label: theme.typography.body2,
33
+ warning: _extends({
34
+ marginLeft: theme.spacing(0.5),
35
+ width: 'unset',
36
+ fontSize: 'inherit',
37
+ height: '1.3em'
38
+ }, R.pathOr({}, ['mixins', 'share', 'warning'], theme))
32
39
  };
33
40
  });
34
41
 
35
- var Mode = function Mode(_ref) {
36
- var changeMode = _ref.changeMode,
37
- mode = _ref.mode,
38
- _ref$modes = _ref.modes,
39
- modes = _ref$modes === undefined ? [] : _ref$modes,
40
- title = _ref.title;
42
+ var Warning = function Warning(_ref) {
43
+ var title = _ref.title;
44
+
45
+ var classes = useStyles();
46
+ var theme = useTheme();
47
+ var warningColor = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;
48
+ var warningTextColor = theme.palette.getContrastText(warningColor);
49
+ return React.createElement(
50
+ Tooltip,
51
+ {
52
+ className: classes.warning,
53
+ title: title,
54
+ tabIndex: 0,
55
+ variant: 'warning',
56
+ 'aria-hidden': false,
57
+ placement: 'bottom',
58
+ PopperProps: {
59
+ modifiers: {
60
+ flip: {
61
+ behavior: ['bottom', 'top', 'left', 'right']
62
+ }
63
+ }
64
+ }
65
+ },
66
+ React.createElement(WarningIcon, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
67
+ );
68
+ };
69
+
70
+ Warning.propTypes = process.env.NODE_ENV !== "production" ? {
71
+ title: PropTypes.string
72
+ } : {};
73
+
74
+ var Mode = function Mode(_ref2) {
75
+ var changeMode = _ref2.changeMode,
76
+ mode = _ref2.mode,
77
+ _ref2$modes = _ref2.modes,
78
+ modes = _ref2$modes === undefined ? [] : _ref2$modes,
79
+ title = _ref2.title;
41
80
 
42
81
  var classes = useStyles();
43
82
  return React.createElement(
@@ -56,14 +95,20 @@ var Mode = function Mode(_ref) {
56
95
  { onChange: function onChange(e) {
57
96
  return changeMode(e.target.value);
58
97
  }, value: mode },
59
- R.map(function (_ref2) {
60
- var label = _ref2.label,
61
- value = _ref2.value;
98
+ R.map(function (_ref3) {
99
+ var label = _ref3.label,
100
+ value = _ref3.value,
101
+ warningMessage = _ref3.warningMessage;
62
102
  return React.createElement(FormControlLabel, {
63
103
  classes: { label: classes.label },
64
104
  key: value,
65
105
  control: React.createElement(Radio, { variant: 'outlined', color: 'primary' }),
66
- label: label,
106
+ label: React.createElement(
107
+ 'span',
108
+ null,
109
+ label,
110
+ warningMessage && React.createElement(Warning, { title: warningMessage })
111
+ ),
67
112
  value: value
68
113
  });
69
114
  })(modes)
@@ -77,7 +122,8 @@ Mode.propTypes = process.env.NODE_ENV !== "production" ? {
77
122
  mode: PropTypes.string,
78
123
  modes: PropTypes.arrayOf(PropTypes.shape({
79
124
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
80
- value: PropTypes.string
125
+ value: PropTypes.string,
126
+ warningMessage: PropTypes.string
81
127
  })),
82
128
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
83
129
  } : {};
package/es/Share/index.js CHANGED
@@ -16,7 +16,13 @@
16
16
  * isSharing: PropTypes.bool,
17
17
  * mail: PropTypes.string,
18
18
  * mode: PropTypes.string,
19
- * modes: PropTypes.array,
19
+ * modes: PropTypes.arrayOf(
20
+ * PropTypes.shape({
21
+ * label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
22
+ * value: PropTypes.string,
23
+ * warningMessage: PropTypes.string,
24
+ * }),
25
+ * ),
20
26
  * labels: PropTypes.shape({
21
27
  * title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
22
28
  * disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
@@ -48,9 +54,11 @@
48
54
  * mixins: {
49
55
  * share: {
50
56
  * tile: // font, color...
57
+ * warning: // font, color, height...
51
58
  * }
52
59
  * }
53
60
  * }
61
+ * @demoReady
54
62
  */
55
63
 
56
64
  export { default } from './Share';
@@ -27,7 +27,8 @@ var useStyles = makeStyles(function (theme) {
27
27
  },
28
28
  stickyHeader: {
29
29
  position: 'sticky',
30
- top: 0
30
+ top: 0,
31
+ zIndex: 2
31
32
  }
32
33
  };
33
34
  });
@@ -55,6 +56,10 @@ export var getEnhancedValuesHeaderData = function getEnhancedValuesHeaderData(da
55
56
  }, R.times(R.always([]), colLength)))(data);
56
57
  };
57
58
 
59
+ var getCellsWidth = R.addIndex(R.reduce)(function (acc, element, index) {
60
+ return R.append(R.add(acc[index], R.propOr(0, 'offsetWidth', element)), acc);
61
+ }, [0]);
62
+
58
63
  var TableHtml5 = function TableHtml5(_ref) {
59
64
  var cells = _ref.cells,
60
65
  _ref$headerData = _ref.headerData,
@@ -71,10 +76,16 @@ var TableHtml5 = function TableHtml5(_ref) {
71
76
  headerHeight = _useState[0],
72
77
  setHeaderHeight = _useState[1];
73
78
 
79
+ var _useState2 = useState([0]),
80
+ subHeadCellsWidth = _useState2[0],
81
+ setSubHeadCellsWidth = _useState2[1];
82
+
74
83
  var headerRef = useRef(null);
84
+ var subHeadCellsRef = useRef([]);
75
85
 
76
86
  useEffect(function () {
77
87
  setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
88
+ setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
78
89
  }, [cells, headerData, sectionsData]);
79
90
 
80
91
  useEffect(function () {
@@ -82,8 +93,9 @@ var TableHtml5 = function TableHtml5(_ref) {
82
93
  var resizeListener = function resizeListener() {
83
94
  clearTimeout(timeoutId);
84
95
  timeoutId = setTimeout(function () {
85
- return setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef), 150);
86
- });
96
+ setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
97
+ setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
98
+ }, 150);
87
99
  };
88
100
  window.addEventListener('resize', resizeListener);
89
101
  return function () {
@@ -98,7 +110,6 @@ var TableHtml5 = function TableHtml5(_ref) {
98
110
  var xLayoutDataLength = R.length(xLayoutData);
99
111
  var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
100
112
  var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
101
-
102
113
  return React.createElement(
103
114
  Table,
104
115
  { className: classes.table, 'aria-label': 'table', size: 'small', style: { padding: '0px 0px' } },
@@ -108,12 +119,15 @@ var TableHtml5 = function TableHtml5(_ref) {
108
119
  React.createElement(Header, {
109
120
  headerData: headerData,
110
121
  valuesHeaderData: valuesHeaderData,
111
- xLayoutDataLength: xLayoutDataLength
122
+ xLayoutDataLength: xLayoutDataLength,
123
+ subHeadCellsWidth: subHeadCellsWidth
112
124
  }),
113
125
  React.createElement(SubHeader, {
114
126
  headerData: headerData,
115
127
  xLayoutData: xLayoutData,
116
- activeCellIds: activeCellIds
128
+ activeCellIds: activeCellIds,
129
+ ref: subHeadCellsRef,
130
+ subHeadCellsWidth: subHeadCellsWidth
117
131
  })
118
132
  ),
119
133
  mapIndexed(function (section, index) {
@@ -128,7 +142,8 @@ var TableHtml5 = function TableHtml5(_ref) {
128
142
  xLayoutDataLength: xLayoutDataLength,
129
143
  cellHandler: cellHandler,
130
144
  activeCellIds: activeCellIds,
131
- activeCellHandler: activeCellHandler
145
+ activeCellHandler: activeCellHandler,
146
+ subHeadCellsWidth: subHeadCellsWidth
132
147
  });
133
148
  }, sectionsData)
134
149
  );
@@ -3,10 +3,11 @@ 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
9
  import Flags from './flags';
10
+ import { getIsRtl } from '../utils';
10
11
 
11
12
  var useStyles = makeStyles(function (theme) {
12
13
  return {
@@ -40,9 +41,7 @@ var useStyles = makeStyles(function (theme) {
40
41
  paddingTop: 0
41
42
  },
42
43
  stickyLabel: {
43
- position: 'sticky',
44
- left: theme.spacing(1),
45
- right: theme.spacing(1)
44
+ position: 'sticky'
46
45
  }
47
46
  };
48
47
  });
@@ -53,9 +52,15 @@ var mapIndexed = R.addIndex(R.map);
53
52
  var Header = function Header(_ref) {
54
53
  var headerData = _ref.headerData,
55
54
  valuesHeaderData = _ref.valuesHeaderData,
56
- xLayoutDataLength = _ref.xLayoutDataLength;
55
+ xLayoutDataLength = _ref.xLayoutDataLength,
56
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
57
57
 
58
58
  var classes = useStyles();
59
+ var theme = useTheme();
60
+ var isRtl = getIsRtl(theme);
61
+
62
+ var stickyLabelPosition = R.sum(subHeadCellsWidth) + 30 + theme.spacing(1);
63
+
59
64
  if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(headerData)) return null;
60
65
  return timesIndexed(function (index) {
61
66
  var _cx;
@@ -74,7 +79,8 @@ var Header = function Header(_ref) {
74
79
  className: cx(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
75
80
  colSpan: R.inc(xLayoutDataLength),
76
81
  id: id,
77
- tabIndex: 0
82
+ tabIndex: 0,
83
+ style: { position: 'sticky', left: 0, right: 0, zIndex: 1 }
78
84
  },
79
85
  React.createElement(
80
86
  'div',
@@ -107,7 +113,14 @@ var Header = function Header(_ref) {
107
113
  { className: classes.cellContentCenter },
108
114
  React.createElement(
109
115
  Typography,
110
- { className: classes.stickyLabel, variant: 'body1' },
116
+ {
117
+ className: classes.stickyLabel,
118
+ style: {
119
+ left: isRtl ? theme.spacing(1) : stickyLabelPosition,
120
+ right: isRtl ? stickyLabelPosition : theme.spacing(1)
121
+ },
122
+ variant: 'body1'
123
+ },
111
124
  R.prop('label', headerItem),
112
125
  React.createElement(Flags, { flags: flags, isHeader: true })
113
126
  )
@@ -121,7 +134,8 @@ var Header = function Header(_ref) {
121
134
  Header.propTypes = process.env.NODE_ENV !== "production" ? {
122
135
  headerData: PropTypes.array,
123
136
  valuesHeaderData: PropTypes.array,
124
- xLayoutDataLength: PropTypes.number
137
+ xLayoutDataLength: PropTypes.number,
138
+ subHeadCellsWidth: PropTypes.array
125
139
  } : {};
126
140
 
127
141
  export default Header;
@@ -26,7 +26,7 @@ var useStyles = makeStyles(function (theme) {
26
26
  verticalAlign: 'middle'
27
27
  },
28
28
  fillerCell: {
29
- width: '30px',
29
+ minWidth: '30px',
30
30
  backgroundColor: theme.palette.grey[200],
31
31
  verticalAlign: 'top',
32
32
  border: 'inherit',
@@ -64,7 +64,8 @@ var Section = function Section(_ref) {
64
64
  activeCellIds = _ref.activeCellIds,
65
65
  headerHeight = _ref.headerHeight,
66
66
  sectionIndex = _ref.sectionIndex,
67
- nbColumnsByRows = _ref.nbColumnsByRows;
67
+ nbColumnsByRows = _ref.nbColumnsByRows,
68
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
68
69
 
69
70
  var classes = useStyles();
70
71
  var currentSection = R.path([0, 'key'], section);
@@ -111,7 +112,13 @@ var Section = function Section(_ref) {
111
112
  className: cx(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
112
113
  id: id,
113
114
  headers: 'subHeader_' + index + ' ' + currentSection,
114
- component: 'th'
115
+ component: 'th',
116
+ style: {
117
+ position: 'sticky',
118
+ left: subHeadCellsWidth[index],
119
+ right: subHeadCellsWidth[index],
120
+ zIndex: 1
121
+ }
115
122
  },
116
123
  React.createElement(
117
124
  'div',
@@ -133,7 +140,12 @@ var Section = function Section(_ref) {
133
140
  React.createElement(
134
141
  TableCell,
135
142
  {
136
- className: cx(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2))
143
+ 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
+ }
137
149
  },
138
150
  React.createElement(
139
151
  'div',
@@ -180,7 +192,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
180
192
  sectionIndex: PropTypes.number,
181
193
  headerNumberRows: PropTypes.number,
182
194
  nbColumnsByRows: PropTypes.array,
183
- maxColumns: PropTypes.number
195
+ maxColumns: PropTypes.number,
196
+ subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
184
197
  } : {};
185
198
 
186
199
  export default Section;
@@ -64,7 +64,7 @@ var SectionHeader = function SectionHeader(_ref) {
64
64
  {
65
65
  key: section.key,
66
66
  className: classes.stickyHeaderSection,
67
- style: { top: headerHeight + 'px' }
67
+ style: { top: headerHeight, zIndex: 2 }
68
68
  },
69
69
  React.createElement(
70
70
  TableCell,
@@ -44,10 +44,11 @@ var useStyles = makeStyles(function (theme) {
44
44
 
45
45
  var mapIndexed = R.addIndex(R.map);
46
46
 
47
- var SubHeader = function SubHeader(_ref) {
47
+ var SubHeader = React.forwardRef(function (_ref, refs) {
48
48
  var headerData = _ref.headerData,
49
49
  xLayoutData = _ref.xLayoutData,
50
- activeCellIds = _ref.activeCellIds;
50
+ activeCellIds = _ref.activeCellIds,
51
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
51
52
 
52
53
  var classes = useStyles();
53
54
  return React.createElement(
@@ -60,7 +61,16 @@ var SubHeader = function SubHeader(_ref) {
60
61
  component: 'th',
61
62
  className: classes.columnsTitle,
62
63
  key: index,
63
- id: 'subHeader_' + index
64
+ id: 'subHeader_' + index,
65
+ style: {
66
+ position: 'sticky',
67
+ left: subHeadCellsWidth[index],
68
+ right: subHeadCellsWidth[index],
69
+ zIndex: 1
70
+ },
71
+ ref: function ref(element) {
72
+ return refs.current[index] = element;
73
+ }
64
74
  },
65
75
  React.createElement(
66
76
  'div',
@@ -74,7 +84,14 @@ var SubHeader = function SubHeader(_ref) {
74
84
  )
75
85
  );
76
86
  }, xLayoutData),
77
- React.createElement(TableCell, { className: classes.fillerCell }),
87
+ React.createElement(TableCell, {
88
+ className: classes.fillerCell,
89
+ style: {
90
+ position: 'sticky',
91
+ left: R.last(subHeadCellsWidth),
92
+ right: R.last(subHeadCellsWidth)
93
+ }
94
+ }),
78
95
  mapIndexed(function (item, index) {
79
96
  var _cx;
80
97
 
@@ -88,12 +105,13 @@ var SubHeader = function SubHeader(_ref) {
88
105
  );
89
106
  }, headerData)
90
107
  );
91
- };
108
+ });
92
109
 
93
110
  SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
94
111
  activeCellIds: PropTypes.object,
95
112
  headerData: PropTypes.array,
96
- xLayoutData: PropTypes.array
113
+ xLayoutData: PropTypes.array,
114
+ subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
97
115
  } : {};
98
116
 
99
117
  export default SubHeader;
package/lib/Share/Mode.js CHANGED
@@ -42,6 +42,8 @@ var _Radio = require('@material-ui/core/Radio');
42
42
 
43
43
  var _Radio2 = _interopRequireDefault(_Radio);
44
44
 
45
+ var _ = require('../');
46
+
45
47
  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
46
48
 
47
49
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -63,16 +65,54 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
63
65
  padding: theme.spacing(1, 0)
64
66
  }
65
67
  },
66
- label: theme.typography.body2
68
+ label: theme.typography.body2,
69
+ warning: _extends({
70
+ marginLeft: theme.spacing(0.5),
71
+ width: 'unset',
72
+ fontSize: 'inherit',
73
+ height: '1.3em'
74
+ }, R.pathOr({}, ['mixins', 'share', 'warning'], theme))
67
75
  };
68
76
  });
69
77
 
70
- var Mode = function Mode(_ref) {
71
- var changeMode = _ref.changeMode,
72
- mode = _ref.mode,
73
- _ref$modes = _ref.modes,
74
- modes = _ref$modes === undefined ? [] : _ref$modes,
75
- title = _ref.title;
78
+ var Warning = function Warning(_ref) {
79
+ var title = _ref.title;
80
+
81
+ var classes = useStyles();
82
+ var theme = (0, _styles.useTheme)();
83
+ var warningColor = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;
84
+ var warningTextColor = theme.palette.getContrastText(warningColor);
85
+ return _react2.default.createElement(
86
+ _.Tooltip,
87
+ {
88
+ className: classes.warning,
89
+ title: title,
90
+ tabIndex: 0,
91
+ variant: 'warning',
92
+ 'aria-hidden': false,
93
+ placement: 'bottom',
94
+ PopperProps: {
95
+ modifiers: {
96
+ flip: {
97
+ behavior: ['bottom', 'top', 'left', 'right']
98
+ }
99
+ }
100
+ }
101
+ },
102
+ _react2.default.createElement(_.Warning, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
103
+ );
104
+ };
105
+
106
+ Warning.propTypes = process.env.NODE_ENV !== "production" ? {
107
+ title: _propTypes2.default.string
108
+ } : {};
109
+
110
+ var Mode = function Mode(_ref2) {
111
+ var changeMode = _ref2.changeMode,
112
+ mode = _ref2.mode,
113
+ _ref2$modes = _ref2.modes,
114
+ modes = _ref2$modes === undefined ? [] : _ref2$modes,
115
+ title = _ref2.title;
76
116
 
77
117
  var classes = useStyles();
78
118
  return _react2.default.createElement(
@@ -91,14 +131,20 @@ var Mode = function Mode(_ref) {
91
131
  { onChange: function onChange(e) {
92
132
  return changeMode(e.target.value);
93
133
  }, value: mode },
94
- R.map(function (_ref2) {
95
- var label = _ref2.label,
96
- value = _ref2.value;
134
+ R.map(function (_ref3) {
135
+ var label = _ref3.label,
136
+ value = _ref3.value,
137
+ warningMessage = _ref3.warningMessage;
97
138
  return _react2.default.createElement(_FormControlLabel2.default, {
98
139
  classes: { label: classes.label },
99
140
  key: value,
100
141
  control: _react2.default.createElement(_Radio2.default, { variant: 'outlined', color: 'primary' }),
101
- label: label,
142
+ label: _react2.default.createElement(
143
+ 'span',
144
+ null,
145
+ label,
146
+ warningMessage && _react2.default.createElement(Warning, { title: warningMessage })
147
+ ),
102
148
  value: value
103
149
  });
104
150
  })(modes)
@@ -112,7 +158,8 @@ Mode.propTypes = process.env.NODE_ENV !== "production" ? {
112
158
  mode: _propTypes2.default.string,
113
159
  modes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
114
160
  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
115
- value: _propTypes2.default.string
161
+ value: _propTypes2.default.string,
162
+ warningMessage: _propTypes2.default.string
116
163
  })),
117
164
  title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
118
165
  } : {};
@@ -60,7 +60,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
60
60
  },
61
61
  stickyHeader: {
62
62
  position: 'sticky',
63
- top: 0
63
+ top: 0,
64
+ zIndex: 2
64
65
  }
65
66
  };
66
67
  });
@@ -88,6 +89,10 @@ var getEnhancedValuesHeaderData = exports.getEnhancedValuesHeaderData = function
88
89
  }, R.times(R.always([]), colLength)))(data);
89
90
  };
90
91
 
92
+ var getCellsWidth = R.addIndex(R.reduce)(function (acc, element, index) {
93
+ return R.append(R.add(acc[index], R.propOr(0, 'offsetWidth', element)), acc);
94
+ }, [0]);
95
+
91
96
  var TableHtml5 = function TableHtml5(_ref) {
92
97
  var cells = _ref.cells,
93
98
  _ref$headerData = _ref.headerData,
@@ -104,10 +109,16 @@ var TableHtml5 = function TableHtml5(_ref) {
104
109
  headerHeight = _useState[0],
105
110
  setHeaderHeight = _useState[1];
106
111
 
112
+ var _useState2 = (0, _react.useState)([0]),
113
+ subHeadCellsWidth = _useState2[0],
114
+ setSubHeadCellsWidth = _useState2[1];
115
+
107
116
  var headerRef = (0, _react.useRef)(null);
117
+ var subHeadCellsRef = (0, _react.useRef)([]);
108
118
 
109
119
  (0, _react.useEffect)(function () {
110
120
  setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
121
+ setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
111
122
  }, [cells, headerData, sectionsData]);
112
123
 
113
124
  (0, _react.useEffect)(function () {
@@ -115,8 +126,9 @@ var TableHtml5 = function TableHtml5(_ref) {
115
126
  var resizeListener = function resizeListener() {
116
127
  clearTimeout(timeoutId);
117
128
  timeoutId = setTimeout(function () {
118
- return setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef), 150);
119
- });
129
+ setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
130
+ setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
131
+ }, 150);
120
132
  };
121
133
  window.addEventListener('resize', resizeListener);
122
134
  return function () {
@@ -131,7 +143,6 @@ var TableHtml5 = function TableHtml5(_ref) {
131
143
  var xLayoutDataLength = R.length(xLayoutData);
132
144
  var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
133
145
  var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
134
-
135
146
  return _react2.default.createElement(
136
147
  _Table2.default,
137
148
  { className: classes.table, 'aria-label': 'table', size: 'small', style: { padding: '0px 0px' } },
@@ -141,12 +152,15 @@ var TableHtml5 = function TableHtml5(_ref) {
141
152
  _react2.default.createElement(_header2.default, {
142
153
  headerData: headerData,
143
154
  valuesHeaderData: valuesHeaderData,
144
- xLayoutDataLength: xLayoutDataLength
155
+ xLayoutDataLength: xLayoutDataLength,
156
+ subHeadCellsWidth: subHeadCellsWidth
145
157
  }),
146
158
  _react2.default.createElement(_subHeader2.default, {
147
159
  headerData: headerData,
148
160
  xLayoutData: xLayoutData,
149
- activeCellIds: activeCellIds
161
+ activeCellIds: activeCellIds,
162
+ ref: subHeadCellsRef,
163
+ subHeadCellsWidth: subHeadCellsWidth
150
164
  })
151
165
  ),
152
166
  mapIndexed(function (section, index) {
@@ -161,7 +175,8 @@ var TableHtml5 = function TableHtml5(_ref) {
161
175
  xLayoutDataLength: xLayoutDataLength,
162
176
  cellHandler: cellHandler,
163
177
  activeCellIds: activeCellIds,
164
- activeCellHandler: activeCellHandler
178
+ activeCellHandler: activeCellHandler,
179
+ subHeadCellsWidth: subHeadCellsWidth
165
180
  });
166
181
  }, sectionsData)
167
182
  );
@@ -36,6 +36,8 @@ var _flags = require('./flags');
36
36
 
37
37
  var _flags2 = _interopRequireDefault(_flags);
38
38
 
39
+ var _utils = require('../utils');
40
+
39
41
  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
40
42
 
41
43
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,9 +74,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
72
74
  paddingTop: 0
73
75
  },
74
76
  stickyLabel: {
75
- position: 'sticky',
76
- left: theme.spacing(1),
77
- right: theme.spacing(1)
77
+ position: 'sticky'
78
78
  }
79
79
  };
80
80
  });
@@ -85,9 +85,15 @@ var mapIndexed = R.addIndex(R.map);
85
85
  var Header = function Header(_ref) {
86
86
  var headerData = _ref.headerData,
87
87
  valuesHeaderData = _ref.valuesHeaderData,
88
- xLayoutDataLength = _ref.xLayoutDataLength;
88
+ xLayoutDataLength = _ref.xLayoutDataLength,
89
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
89
90
 
90
91
  var classes = useStyles();
92
+ var theme = (0, _styles.useTheme)();
93
+ var isRtl = (0, _utils.getIsRtl)(theme);
94
+
95
+ var stickyLabelPosition = R.sum(subHeadCellsWidth) + 30 + theme.spacing(1);
96
+
91
97
  if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(headerData)) return null;
92
98
  return timesIndexed(function (index) {
93
99
  var _cx;
@@ -106,7 +112,8 @@ var Header = function Header(_ref) {
106
112
  className: (0, _classnames2.default)(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
107
113
  colSpan: R.inc(xLayoutDataLength),
108
114
  id: id,
109
- tabIndex: 0
115
+ tabIndex: 0,
116
+ style: { position: 'sticky', left: 0, right: 0, zIndex: 1 }
110
117
  },
111
118
  _react2.default.createElement(
112
119
  'div',
@@ -139,7 +146,14 @@ var Header = function Header(_ref) {
139
146
  { className: classes.cellContentCenter },
140
147
  _react2.default.createElement(
141
148
  _Typography2.default,
142
- { className: classes.stickyLabel, variant: 'body1' },
149
+ {
150
+ className: classes.stickyLabel,
151
+ style: {
152
+ left: isRtl ? theme.spacing(1) : stickyLabelPosition,
153
+ right: isRtl ? stickyLabelPosition : theme.spacing(1)
154
+ },
155
+ variant: 'body1'
156
+ },
143
157
  R.prop('label', headerItem),
144
158
  _react2.default.createElement(_flags2.default, { flags: flags, isHeader: true })
145
159
  )
@@ -153,7 +167,8 @@ var Header = function Header(_ref) {
153
167
  Header.propTypes = process.env.NODE_ENV !== "production" ? {
154
168
  headerData: _propTypes2.default.array,
155
169
  valuesHeaderData: _propTypes2.default.array,
156
- xLayoutDataLength: _propTypes2.default.number
170
+ xLayoutDataLength: _propTypes2.default.number,
171
+ subHeadCellsWidth: _propTypes2.default.array
157
172
  } : {};
158
173
 
159
174
  exports.default = Header;
@@ -68,7 +68,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
68
68
  verticalAlign: 'middle'
69
69
  },
70
70
  fillerCell: {
71
- width: '30px',
71
+ minWidth: '30px',
72
72
  backgroundColor: theme.palette.grey[200],
73
73
  verticalAlign: 'top',
74
74
  border: 'inherit',
@@ -106,7 +106,8 @@ var Section = function Section(_ref) {
106
106
  activeCellIds = _ref.activeCellIds,
107
107
  headerHeight = _ref.headerHeight,
108
108
  sectionIndex = _ref.sectionIndex,
109
- nbColumnsByRows = _ref.nbColumnsByRows;
109
+ nbColumnsByRows = _ref.nbColumnsByRows,
110
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
110
111
 
111
112
  var classes = useStyles();
112
113
  var currentSection = R.path([0, 'key'], section);
@@ -153,7 +154,13 @@ var Section = function Section(_ref) {
153
154
  className: (0, _classnames2.default)(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
154
155
  id: id,
155
156
  headers: 'subHeader_' + index + ' ' + currentSection,
156
- component: 'th'
157
+ component: 'th',
158
+ style: {
159
+ position: 'sticky',
160
+ left: subHeadCellsWidth[index],
161
+ right: subHeadCellsWidth[index],
162
+ zIndex: 1
163
+ }
157
164
  },
158
165
  _react2.default.createElement(
159
166
  'div',
@@ -175,7 +182,12 @@ var Section = function Section(_ref) {
175
182
  _react2.default.createElement(
176
183
  _TableCell2.default,
177
184
  {
178
- className: (0, _classnames2.default)(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2))
185
+ 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
+ }
179
191
  },
180
192
  _react2.default.createElement(
181
193
  'div',
@@ -222,7 +234,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
222
234
  sectionIndex: _propTypes2.default.number,
223
235
  headerNumberRows: _propTypes2.default.number,
224
236
  nbColumnsByRows: _propTypes2.default.array,
225
- maxColumns: _propTypes2.default.number
237
+ maxColumns: _propTypes2.default.number,
238
+ subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
226
239
  } : {};
227
240
 
228
241
  exports.default = Section;
@@ -97,7 +97,7 @@ var SectionHeader = function SectionHeader(_ref) {
97
97
  {
98
98
  key: section.key,
99
99
  className: classes.stickyHeaderSection,
100
- style: { top: headerHeight + 'px' }
100
+ style: { top: headerHeight, zIndex: 2 }
101
101
  },
102
102
  _react2.default.createElement(
103
103
  _TableCell2.default,
@@ -77,10 +77,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
77
77
 
78
78
  var mapIndexed = R.addIndex(R.map);
79
79
 
80
- var SubHeader = function SubHeader(_ref) {
80
+ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
81
81
  var headerData = _ref.headerData,
82
82
  xLayoutData = _ref.xLayoutData,
83
- activeCellIds = _ref.activeCellIds;
83
+ activeCellIds = _ref.activeCellIds,
84
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
84
85
 
85
86
  var classes = useStyles();
86
87
  return _react2.default.createElement(
@@ -93,7 +94,16 @@ var SubHeader = function SubHeader(_ref) {
93
94
  component: 'th',
94
95
  className: classes.columnsTitle,
95
96
  key: index,
96
- id: 'subHeader_' + index
97
+ id: 'subHeader_' + index,
98
+ style: {
99
+ position: 'sticky',
100
+ left: subHeadCellsWidth[index],
101
+ right: subHeadCellsWidth[index],
102
+ zIndex: 1
103
+ },
104
+ ref: function ref(element) {
105
+ return refs.current[index] = element;
106
+ }
97
107
  },
98
108
  _react2.default.createElement(
99
109
  'div',
@@ -107,7 +117,14 @@ var SubHeader = function SubHeader(_ref) {
107
117
  )
108
118
  );
109
119
  }, xLayoutData),
110
- _react2.default.createElement(_TableCell2.default, { className: classes.fillerCell }),
120
+ _react2.default.createElement(_TableCell2.default, {
121
+ className: classes.fillerCell,
122
+ style: {
123
+ position: 'sticky',
124
+ left: R.last(subHeadCellsWidth),
125
+ right: R.last(subHeadCellsWidth)
126
+ }
127
+ }),
111
128
  mapIndexed(function (item, index) {
112
129
  var _cx;
113
130
 
@@ -121,12 +138,13 @@ var SubHeader = function SubHeader(_ref) {
121
138
  );
122
139
  }, headerData)
123
140
  );
124
- };
141
+ });
125
142
 
126
143
  SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
127
144
  activeCellIds: _propTypes2.default.object,
128
145
  headerData: _propTypes2.default.array,
129
- xLayoutData: _propTypes2.default.array
146
+ xLayoutData: _propTypes2.default.array,
147
+ subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
130
148
  } : {};
131
149
 
132
150
  exports.default = SubHeader;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sis-cc/dotstatsuite-visions",
3
- "version": "6.5.2",
3
+ "version": "6.6.3",
4
4
  "description": "Library of visual components",
5
5
  "author": "OECD",
6
6
  "homepage": "https://visions-qa.siscc.org/#o",
@@ -76,7 +76,7 @@
76
76
  "jest-environment-jsdom-fourteen": "0.1.0",
77
77
  "jss-rtl": "^0.2.3",
78
78
  "lint-staged": "^8.2.1",
79
- "nwb": "^0.23.0",
79
+ "nwb": "0.23.0",
80
80
  "prettier": "1.12.1",
81
81
  "pretty-quick": "^1.10.0",
82
82
  "react-a11y": "^1.1.0",