@sis-cc/dotstatsuite-visions 8.0.9 → 8.2.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.
Files changed (5) hide show
  1. package/es/TableHtml5/TableHtml5.js +27 -18
  2. package/es/TableHtml5/section.js +17 -7
  3. package/lib/TableHtml5/TableHtml5.js +25 -18
  4. package/lib/TableHtml5/section.js +16 -8
  5. package/package.json +1 -3
package/es/TableHtml5/TableHtml5.js CHANGED
@@ -10,6 +10,8 @@ import SubHeader from './subHeader';
10
10
  import Section from './section';
11
11
  import Cell from './cell';
12
12
  import { defaultLabelAccessor } from './utils';
13
+ import { useMemo } from 'react';
14
+ import { useCallback } from 'react';
13
15
 
14
16
  /*
15
17
  * Accessibility.
@@ -24,7 +26,8 @@ var useStyles = makeStyles(function (theme) {
24
26
  table: {
25
27
  borderCollapse: 'separate',
26
28
  borderLeft: 'thin solid ' + theme.palette.grey[500],
27
- borderTop: 'thin solid ' + theme.palette.grey[500]
29
+ borderTop: 'thin solid ' + theme.palette.grey[500],
30
+ padding: '0px 0px'
28
31
  },
29
32
  stickyHeader: {
30
33
  position: 'sticky',
@@ -75,7 +78,8 @@ var TableHtml5 = function TableHtml5(_ref) {
75
78
  testId = _ref$testId === undefined ? 'vis-table' : _ref$testId,
76
79
  HTMLRenderer = _ref.HTMLRenderer,
77
80
  _ref$labelAccessor = _ref.labelAccessor,
78
- labelAccessor = _ref$labelAccessor === undefined ? defaultLabelAccessor : _ref$labelAccessor;
81
+ labelAccessor = _ref$labelAccessor === undefined ? defaultLabelAccessor : _ref$labelAccessor,
82
+ isNoWrap = _ref.isNoWrap;
79
83
 
80
84
  var classes = useStyles();
81
85
 
@@ -90,6 +94,8 @@ var TableHtml5 = function TableHtml5(_ref) {
90
94
  var headerRef = useRef(null);
91
95
  var subHeadCellsRef = useRef([]);
92
96
 
97
+ var labelAccessorhandler = useCallback(labelAccessor, []);
98
+
93
99
  useEffect(function () {
94
100
  setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
95
101
  setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
@@ -110,6 +116,17 @@ var TableHtml5 = function TableHtml5(_ref) {
110
116
  };
111
117
  }, []);
112
118
 
119
+ var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
120
+ var xLayoutDataLength = R.length(xLayoutData);
121
+
122
+ var _useMemo = useMemo(function () {
123
+ var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
124
+ var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
125
+ return { valuesHeaderData: valuesHeaderData, nbColumnsByRows: nbColumnsByRows };
126
+ }, [headerData]),
127
+ valuesHeaderData = _useMemo.valuesHeaderData,
128
+ nbColumnsByRows = _useMemo.nbColumnsByRows;
129
+
113
130
  var isSingleObs = R.hasPath(['', '', '', 0], cells);
114
131
  if (isSingleObs) return React.createElement(Cell, _extends({
115
132
  HTMLRenderer: HTMLRenderer,
@@ -119,19 +136,9 @@ var TableHtml5 = function TableHtml5(_ref) {
119
136
  isOne: true
120
137
  }));
121
138
 
122
- var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
123
- var xLayoutDataLength = R.length(xLayoutData);
124
- var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
125
- var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
126
139
  return React.createElement(
127
140
  Table,
128
- {
129
- className: classes.table,
130
- 'aria-label': 'table',
131
- size: 'small',
132
- style: { padding: '0px 0px' },
133
- 'data-testid': testId
134
- },
141
+ { className: classes.table, 'aria-label': 'table', size: 'small', 'data-testid': testId },
135
142
  React.createElement(
136
143
  'thead',
137
144
  { ref: headerRef, className: classes.stickyHeader },
@@ -141,7 +148,7 @@ var TableHtml5 = function TableHtml5(_ref) {
141
148
  xLayoutDataLength: xLayoutDataLength,
142
149
  subHeadCellsWidth: subHeadCellsWidth,
143
150
  HTMLRenderer: HTMLRenderer,
144
- labelAccessor: labelAccessor
151
+ labelAccessor: labelAccessorhandler
145
152
  }),
146
153
  React.createElement(SubHeader, {
147
154
  headerData: headerData,
@@ -151,12 +158,12 @@ var TableHtml5 = function TableHtml5(_ref) {
151
158
  ref: subHeadCellsRef,
152
159
  subHeadCellsWidth: subHeadCellsWidth,
153
160
  HTMLRenderer: HTMLRenderer,
154
- labelAccessor: labelAccessor
161
+ labelAccessor: labelAccessorhandler
155
162
  })
156
163
  ),
157
164
  mapIndexed(function (section, index) {
158
165
  return React.createElement(Section, {
159
- key: index,
166
+ key: 'section-' + index,
160
167
  sectionIndex: index,
161
168
  headerHeight: headerHeight,
162
169
  nbColumnsByRows: nbColumnsByRows,
@@ -170,7 +177,8 @@ var TableHtml5 = function TableHtml5(_ref) {
170
177
  SideIcon: SideIcon,
171
178
  subHeadCellsWidth: subHeadCellsWidth,
172
179
  HTMLRenderer: HTMLRenderer,
173
- labelAccessor: labelAccessor
180
+ labelAccessor: labelAccessorhandler,
181
+ isNoWrap: isNoWrap
174
182
  });
175
183
  }, sectionsData)
176
184
  );
@@ -186,7 +194,8 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
186
194
  SideIcon: PropTypes.func,
187
195
  testId: PropTypes.string,
188
196
  HTMLRenderer: PropTypes.func,
189
- labelAccessor: PropTypes.func
197
+ labelAccessor: PropTypes.func,
198
+ isNoWrap: PropTypes.func
190
199
  } : {};
191
200
 
192
201
  export default TableHtml5;
package/es/TableHtml5/section.js CHANGED
@@ -9,12 +9,12 @@ 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
- import { isTimePeriodDimension } from '@sis-cc/dotstatsuite-sdmxjs';
13
12
  import SectionHeader from './sectionHeader';
14
13
  import Cell from './cell';
15
14
  import { getLight, getIsRtl } from '../utils';
16
15
  import { getValue } from './utils';
17
16
  import Flags from './flags';
17
+ import { memo } from 'react';
18
18
 
19
19
  var useStyles = makeStyles(function (theme) {
20
20
  return {
@@ -79,7 +79,8 @@ var Section = function Section(_ref) {
79
79
  SideIcon = _ref.SideIcon,
80
80
  subHeadCellsWidth = _ref.subHeadCellsWidth,
81
81
  HTMLRenderer = _ref.HTMLRenderer,
82
- labelAccessor = _ref.labelAccessor;
82
+ labelAccessor = _ref.labelAccessor,
83
+ isNoWrap = _ref.isNoWrap;
83
84
 
84
85
  var classes = useStyles();
85
86
  var currentSection = R.path([0, 'key'], section);
@@ -129,7 +130,7 @@ var Section = function Section(_ref) {
129
130
  TableCell,
130
131
  {
131
132
  key: id,
132
- className: cx(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx[classes.timePeriodCells] = isTimePeriodDimension(R.prop('dimension', cell)), _cx)),
133
+ className: cx(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx[classes.timePeriodCells] = isNoWrap(R.prop('dimension', cell)), _cx)),
133
134
  id: id,
134
135
  headers: 'subHeader_' + index + ' ' + currentSection,
135
136
  component: 'th',
@@ -147,7 +148,11 @@ var Section = function Section(_ref) {
147
148
  Typography,
148
149
  { variant: 'body1', tabIndex: 0 },
149
150
  R.prop('label', value),
150
- React.createElement(Flags, { HTMLRenderer: HTMLRenderer, labelAccessor: labelAccessor, flags: flags })
151
+ React.createElement(Flags, {
152
+ HTMLRenderer: HTMLRenderer,
153
+ labelAccessor: labelAccessor,
154
+ flags: flags
155
+ })
151
156
  )
152
157
  )
153
158
  );
@@ -162,7 +167,11 @@ var Section = function Section(_ref) {
162
167
  'div',
163
168
  { className: classes.flagContainer },
164
169
  !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody) }),
165
- React.createElement(Flags, { HTMLRenderer: HTMLRenderer, labelAccessor: labelAccessor, flags: R.prop('flags', sectionbody) })
170
+ React.createElement(Flags, {
171
+ HTMLRenderer: HTMLRenderer,
172
+ labelAccessor: labelAccessor,
173
+ flags: R.prop('flags', sectionbody)
174
+ })
166
175
  )
167
176
  ),
168
177
  mapIndexed(function (item, columnIndex) {
@@ -210,7 +219,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
210
219
  SideIcon: PropTypes.func,
211
220
  subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number),
212
221
  HTMLRenderer: PropTypes.func,
213
- labelAccessor: PropTypes.func
222
+ labelAccessor: PropTypes.func,
223
+ isNoWrap: PropTypes.func
214
224
  } : {};
215
225
 
216
- export default Section;
226
+ export default memo(Section);
package/lib/TableHtml5/TableHtml5.js CHANGED
@@ -58,7 +58,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
58
58
  table: {
59
59
  borderCollapse: 'separate',
60
60
  borderLeft: 'thin solid ' + theme.palette.grey[500],
61
- borderTop: 'thin solid ' + theme.palette.grey[500]
61
+ borderTop: 'thin solid ' + theme.palette.grey[500],
62
+ padding: '0px 0px'
62
63
  },
63
64
  stickyHeader: {
64
65
  position: 'sticky',
@@ -109,7 +110,8 @@ var TableHtml5 = function TableHtml5(_ref) {
109
110
  testId = _ref$testId === undefined ? 'vis-table' : _ref$testId,
110
111
  HTMLRenderer = _ref.HTMLRenderer,
111
112
  _ref$labelAccessor = _ref.labelAccessor,
112
- labelAccessor = _ref$labelAccessor === undefined ? _utils.defaultLabelAccessor : _ref$labelAccessor;
113
+ labelAccessor = _ref$labelAccessor === undefined ? _utils.defaultLabelAccessor : _ref$labelAccessor,
114
+ isNoWrap = _ref.isNoWrap;
113
115
 
114
116
  var classes = useStyles();
115
117
 
@@ -124,6 +126,8 @@ var TableHtml5 = function TableHtml5(_ref) {
124
126
  var headerRef = (0, _react.useRef)(null);
125
127
  var subHeadCellsRef = (0, _react.useRef)([]);
126
128
 
129
+ var labelAccessorhandler = (0, _react.useCallback)(labelAccessor, []);
130
+
127
131
  (0, _react.useEffect)(function () {
128
132
  setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
129
133
  setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
@@ -144,6 +148,17 @@ var TableHtml5 = function TableHtml5(_ref) {
144
148
  };
145
149
  }, []);
146
150
 
151
+ var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
152
+ var xLayoutDataLength = R.length(xLayoutData);
153
+
154
+ var _useMemo = (0, _react.useMemo)(function () {
155
+ var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
156
+ var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
157
+ return { valuesHeaderData: valuesHeaderData, nbColumnsByRows: nbColumnsByRows };
158
+ }, [headerData]),
159
+ valuesHeaderData = _useMemo.valuesHeaderData,
160
+ nbColumnsByRows = _useMemo.nbColumnsByRows;
161
+
147
162
  var isSingleObs = R.hasPath(['', '', '', 0], cells);
148
163
  if (isSingleObs) return _react2.default.createElement(_cell2.default, _extends({
149
164
  HTMLRenderer: HTMLRenderer,
@@ -153,19 +168,9 @@ var TableHtml5 = function TableHtml5(_ref) {
153
168
  isOne: true
154
169
  }));
155
170
 
156
- var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
157
- var xLayoutDataLength = R.length(xLayoutData);
158
- var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
159
- var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
160
171
  return _react2.default.createElement(
161
172
  _Table2.default,
162
- {
163
- className: classes.table,
164
- 'aria-label': 'table',
165
- size: 'small',
166
- style: { padding: '0px 0px' },
167
- 'data-testid': testId
168
- },
173
+ { className: classes.table, 'aria-label': 'table', size: 'small', 'data-testid': testId },
169
174
  _react2.default.createElement(
170
175
  'thead',
171
176
  { ref: headerRef, className: classes.stickyHeader },
@@ -175,7 +180,7 @@ var TableHtml5 = function TableHtml5(_ref) {
175
180
  xLayoutDataLength: xLayoutDataLength,
176
181
  subHeadCellsWidth: subHeadCellsWidth,
177
182
  HTMLRenderer: HTMLRenderer,
178
- labelAccessor: labelAccessor
183
+ labelAccessor: labelAccessorhandler
179
184
  }),
180
185
  _react2.default.createElement(_subHeader2.default, {
181
186
  headerData: headerData,
@@ -185,12 +190,12 @@ var TableHtml5 = function TableHtml5(_ref) {
185
190
  ref: subHeadCellsRef,
186
191
  subHeadCellsWidth: subHeadCellsWidth,
187
192
  HTMLRenderer: HTMLRenderer,
188
- labelAccessor: labelAccessor
193
+ labelAccessor: labelAccessorhandler
189
194
  })
190
195
  ),
191
196
  mapIndexed(function (section, index) {
192
197
  return _react2.default.createElement(_section2.default, {
193
- key: index,
198
+ key: 'section-' + index,
194
199
  sectionIndex: index,
195
200
  headerHeight: headerHeight,
196
201
  nbColumnsByRows: nbColumnsByRows,
@@ -204,7 +209,8 @@ var TableHtml5 = function TableHtml5(_ref) {
204
209
  SideIcon: SideIcon,
205
210
  subHeadCellsWidth: subHeadCellsWidth,
206
211
  HTMLRenderer: HTMLRenderer,
207
- labelAccessor: labelAccessor
212
+ labelAccessor: labelAccessorhandler,
213
+ isNoWrap: isNoWrap
208
214
  });
209
215
  }, sectionsData)
210
216
  );
@@ -220,7 +226,8 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
220
226
  SideIcon: _propTypes2.default.func,
221
227
  testId: _propTypes2.default.string,
222
228
  HTMLRenderer: _propTypes2.default.func,
223
- labelAccessor: _propTypes2.default.func
229
+ labelAccessor: _propTypes2.default.func,
230
+ isNoWrap: _propTypes2.default.func
224
231
  } : {};
225
232
 
226
233
  exports.default = TableHtml5;
package/lib/TableHtml5/section.js CHANGED
@@ -38,8 +38,6 @@ var _TableRow = require('@material-ui/core/TableRow');
38
38
 
39
39
  var _TableRow2 = _interopRequireDefault(_TableRow);
40
40
 
41
- var _dotstatsuiteSdmxjs = require('@sis-cc/dotstatsuite-sdmxjs');
42
-
43
41
  var _sectionHeader = require('./sectionHeader');
44
42
 
45
43
  var _sectionHeader2 = _interopRequireDefault(_sectionHeader);
@@ -123,7 +121,8 @@ var Section = function Section(_ref) {
123
121
  SideIcon = _ref.SideIcon,
124
122
  subHeadCellsWidth = _ref.subHeadCellsWidth,
125
123
  HTMLRenderer = _ref.HTMLRenderer,
126
- labelAccessor = _ref.labelAccessor;
124
+ labelAccessor = _ref.labelAccessor,
125
+ isNoWrap = _ref.isNoWrap;
127
126
 
128
127
  var classes = useStyles();
129
128
  var currentSection = R.path([0, 'key'], section);
@@ -173,7 +172,7 @@ var Section = function Section(_ref) {
173
172
  _TableCell2.default,
174
173
  {
175
174
  key: id,
176
- 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[classes.timePeriodCells] = (0, _dotstatsuiteSdmxjs.isTimePeriodDimension)(R.prop('dimension', cell)), _cx)),
175
+ 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[classes.timePeriodCells] = isNoWrap(R.prop('dimension', cell)), _cx)),
177
176
  id: id,
178
177
  headers: 'subHeader_' + index + ' ' + currentSection,
179
178
  component: 'th',
@@ -191,7 +190,11 @@ var Section = function Section(_ref) {
191
190
  _Typography2.default,
192
191
  { variant: 'body1', tabIndex: 0 },
193
192
  R.prop('label', value),
194
- _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, labelAccessor: labelAccessor, flags: flags })
193
+ _react2.default.createElement(_flags2.default, {
194
+ HTMLRenderer: HTMLRenderer,
195
+ labelAccessor: labelAccessor,
196
+ flags: flags
197
+ })
195
198
  )
196
199
  )
197
200
  );
@@ -206,7 +209,11 @@ var Section = function Section(_ref) {
206
209
  'div',
207
210
  { className: classes.flagContainer },
208
211
  !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody) }),
209
- _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, labelAccessor: labelAccessor, flags: R.prop('flags', sectionbody) })
212
+ _react2.default.createElement(_flags2.default, {
213
+ HTMLRenderer: HTMLRenderer,
214
+ labelAccessor: labelAccessor,
215
+ flags: R.prop('flags', sectionbody)
216
+ })
210
217
  )
211
218
  ),
212
219
  mapIndexed(function (item, columnIndex) {
@@ -254,8 +261,9 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
254
261
  SideIcon: _propTypes2.default.func,
255
262
  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number),
256
263
  HTMLRenderer: _propTypes2.default.func,
257
- labelAccessor: _propTypes2.default.func
264
+ labelAccessor: _propTypes2.default.func,
265
+ isNoWrap: _propTypes2.default.func
258
266
  } : {};
259
267
 
260
- exports.default = Section;
268
+ exports.default = (0, _react.memo)(Section);
261
269
  module.exports = exports['default'];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sis-cc/dotstatsuite-visions",
3
- "version": "8.0.9",
3
+ "version": "8.2.0",
4
4
  "description": "Library of visual components",
5
5
  "author": "OECD",
6
6
  "homepage": "https://visions-qa.siscc.org/#o",
@@ -50,13 +50,11 @@
50
50
  "@material-ui/core": "^4.9.5",
51
51
  "@material-ui/icons": "^4.5.1",
52
52
  "@material-ui/styles": "^4.5.0",
53
- "@sis-cc/dotstatsuite-sdmxjs": "^8.x",
54
53
  "react": "16.x"
55
54
  },
56
55
  "devDependencies": {
57
56
  "@babel/eslint-parser": "^7.5.4",
58
57
  "@babel/plugin-syntax-dynamic-import": "^7.2.0",
59
- "@sis-cc/dotstatsuite-sdmxjs": "*",
60
58
  "@testing-library/jest-dom": "^5.1.1",
61
59
  "@testing-library/react": "^9.4.1",
62
60
  "babel-jest": "^24.8.0",