@sis-cc/dotstatsuite-visions 8.5.0 → 8.7.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 (7) hide show
  1. package/es/TableHtml5/TableHtml5.js +18 -11
  2. package/es/TableHtml5/cell.js +9 -6
  3. package/es/TableHtml5/section.js +11 -4
  4. package/lib/TableHtml5/TableHtml5.js +17 -8
  5. package/lib/TableHtml5/cell.js +9 -6
  6. package/lib/TableHtml5/section.js +11 -4
  7. package/package.json +1 -1
package/es/TableHtml5/TableHtml5.js CHANGED
@@ -1,6 +1,6 @@
1
1
  var _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; };
2
2
 
3
- import React, { useRef, useState, useEffect } from 'react';
3
+ import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
4
4
  import { makeStyles } from '@material-ui/core/styles';
5
5
  import PropTypes from 'prop-types';
6
6
  import * as R from 'ramda';
@@ -10,8 +10,6 @@ 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';
15
13
 
16
14
  /*
17
15
  * Accessibility.
@@ -77,9 +75,13 @@ var TableHtml5 = function TableHtml5(_ref) {
77
75
  _ref$testId = _ref.testId,
78
76
  testId = _ref$testId === undefined ? 'vis-table' : _ref$testId,
79
77
  HTMLRenderer = _ref.HTMLRenderer,
78
+ _ref$cellValueAccesso = _ref.cellValueAccessor,
79
+ cellValueAccessor = _ref$cellValueAccesso === undefined ? R.identity : _ref$cellValueAccesso,
80
80
  _ref$labelAccessor = _ref.labelAccessor,
81
81
  labelAccessor = _ref$labelAccessor === undefined ? defaultLabelAccessor : _ref$labelAccessor,
82
- isNoWrap = _ref.isNoWrap;
82
+ textAlign = _ref.textAlign,
83
+ _ref$isNoWrap = _ref.isNoWrap,
84
+ isNoWrap = _ref$isNoWrap === undefined ? R.always(false) : _ref$isNoWrap;
83
85
 
84
86
  var classes = useStyles();
85
87
 
@@ -94,7 +96,7 @@ var TableHtml5 = function TableHtml5(_ref) {
94
96
  var headerRef = useRef(null);
95
97
  var subHeadCellsRef = useRef([]);
96
98
 
97
- var labelAccessorhandler = useCallback(labelAccessor, []);
99
+ var cellValueAccessorHandler = useCallback(cellValueAccessor, []);
98
100
 
99
101
  useEffect(function () {
100
102
  setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
@@ -133,7 +135,8 @@ var TableHtml5 = function TableHtml5(_ref) {
133
135
  labelAccessor: labelAccessor
134
136
  }, R.pathOr({}, ['', '', '', 0], cells), {
135
137
  cellHandler: cellHandler,
136
- isOne: true
138
+ isOne: true,
139
+ textAlign: textAlign
137
140
  }));
138
141
 
139
142
  return React.createElement(
@@ -148,7 +151,7 @@ var TableHtml5 = function TableHtml5(_ref) {
148
151
  xLayoutDataLength: xLayoutDataLength,
149
152
  subHeadCellsWidth: subHeadCellsWidth,
150
153
  HTMLRenderer: HTMLRenderer,
151
- labelAccessor: labelAccessorhandler
154
+ labelAccessor: labelAccessor
152
155
  }),
153
156
  React.createElement(SubHeader, {
154
157
  headerData: headerData,
@@ -158,7 +161,7 @@ var TableHtml5 = function TableHtml5(_ref) {
158
161
  ref: subHeadCellsRef,
159
162
  subHeadCellsWidth: subHeadCellsWidth,
160
163
  HTMLRenderer: HTMLRenderer,
161
- labelAccessor: labelAccessorhandler
164
+ labelAccessor: labelAccessor
162
165
  })
163
166
  ),
164
167
  mapIndexed(function (section, index) {
@@ -177,8 +180,10 @@ var TableHtml5 = function TableHtml5(_ref) {
177
180
  SideIcon: SideIcon,
178
181
  subHeadCellsWidth: subHeadCellsWidth,
179
182
  HTMLRenderer: HTMLRenderer,
180
- labelAccessor: labelAccessorhandler,
181
- isNoWrap: isNoWrap
183
+ cellValueAccessor: cellValueAccessorHandler,
184
+ labelAccessor: labelAccessor,
185
+ isNoWrap: isNoWrap,
186
+ textAlign: textAlign
182
187
  });
183
188
  }, sectionsData)
184
189
  );
@@ -195,7 +200,9 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
195
200
  testId: PropTypes.string,
196
201
  HTMLRenderer: PropTypes.func,
197
202
  labelAccessor: PropTypes.func,
198
- isNoWrap: PropTypes.func
203
+ cellValueAccessor: PropTypes.func,
204
+ isNoWrap: PropTypes.func,
205
+ textAlign: PropTypes.string
199
206
  } : {};
200
207
 
201
208
  export default TableHtml5;
package/es/TableHtml5/cell.js CHANGED
@@ -63,7 +63,8 @@ var Cell = function Cell(_ref) {
63
63
  sideProps = _ref.sideProps,
64
64
  SideIcon = _ref.SideIcon,
65
65
  HTMLRenderer = _ref.HTMLRenderer,
66
- labelAccessor = _ref.labelAccessor;
66
+ labelAccessor = _ref.labelAccessor,
67
+ textAlign = _ref.textAlign;
67
68
 
68
69
  var classes = useStyles();
69
70
  var isRtl = getIsRtl(useTheme());
@@ -86,12 +87,13 @@ var Cell = function Cell(_ref) {
86
87
  return React.createElement(
87
88
  TableCell,
88
89
  {
89
- align: isValidNumber(intValue) ? 'right' : 'left',
90
+ align: isValidNumber(intValue) ? 'right' : textAlign,
90
91
  component: isOne ? 'div' : undefined,
91
- className: cx(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx[classes.rightAlign] = isRtl, _cx)),
92
+ className: cx(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx[classes.rightAlign] = isRtl && R.isNil(textAlign), _cx)),
92
93
  headers: headers,
93
94
  onClick: activeCellHandler,
94
- tabIndex: 0
95
+ tabIndex: 0,
96
+ style: { textAlign: textAlign }
95
97
  },
96
98
  !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
97
99
  hasFlag && React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags, labelAccessor: labelAccessor }),
@@ -103,7 +105,7 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
103
105
  intValue: PropTypes.number,
104
106
  flags: PropTypes.array,
105
107
  isOne: PropTypes.bool,
106
- value: PropTypes.string,
108
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
107
109
  headers: PropTypes.string,
108
110
  indexedDimValIds: PropTypes.object,
109
111
  cellHandler: PropTypes.func,
@@ -113,7 +115,8 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
113
115
  sideProps: PropTypes.object,
114
116
  SideIcon: PropTypes.func,
115
117
  HTMLRenderer: PropTypes.func,
116
- labelAccessor: PropTypes.func
118
+ labelAccessor: PropTypes.func,
119
+ textAlign: PropTypes.string
117
120
  } : {};
118
121
 
119
122
  export default Cell;
package/es/TableHtml5/section.js CHANGED
@@ -80,7 +80,9 @@ var Section = function Section(_ref) {
80
80
  subHeadCellsWidth = _ref.subHeadCellsWidth,
81
81
  HTMLRenderer = _ref.HTMLRenderer,
82
82
  labelAccessor = _ref.labelAccessor,
83
- isNoWrap = _ref.isNoWrap;
83
+ cellValueAccessor = _ref.cellValueAccessor,
84
+ isNoWrap = _ref.isNoWrap,
85
+ textAlign = _ref.textAlign;
84
86
 
85
87
  var classes = useStyles();
86
88
  var currentSection = R.path([0, 'key'], section);
@@ -130,7 +132,7 @@ var Section = function Section(_ref) {
130
132
  TableCell,
131
133
  {
132
134
  key: id,
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)),
135
+ 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] = R.is(Function, isNoWrap) && isNoWrap(R.prop('dimension', cell)), _cx)),
134
136
  id: id,
135
137
  headers: 'subHeader_' + index + ' ' + currentSection,
136
138
  component: 'th',
@@ -182,7 +184,9 @@ var Section = function Section(_ref) {
182
184
 
183
185
  var intersectionCellId = rowId + '/' + columnIndex;
184
186
  var isActive = R.pipe(R.propOr({}, 'intersectionCellId'), R.equals(intersectionCellId))(activeCellIds);
185
- return React.createElement(Cell, _extends({}, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
187
+ return React.createElement(Cell, _extends({}, R.pipe(R.pathOr({ value: null }, [item.key, currentSection, sectionbody.key, 0]), R.over(R.lensProp('value'), function (val) {
188
+ return R.isNil(val) ? '..' : cellValueAccessor(val);
189
+ }))(cells), {
186
190
  key: intersectionCellId,
187
191
  headers: rowIds + ' ' + columnIds + ' ' + currentSection,
188
192
  cellHandler: cellHandler,
@@ -190,6 +194,7 @@ var Section = function Section(_ref) {
190
194
  labelAccessor: labelAccessor,
191
195
  SideIcon: SideIcon,
192
196
  isActive: isActive,
197
+ textAlign: textAlign,
193
198
  isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]),
194
199
  activeCellHandler: R.is(Function)(activeCellHandler) ? function () {
195
200
  var _activeCellHandler;
@@ -220,7 +225,9 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
220
225
  subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number),
221
226
  HTMLRenderer: PropTypes.func,
222
227
  labelAccessor: PropTypes.func,
223
- isNoWrap: PropTypes.func
228
+ cellValueAccessor: PropTypes.func,
229
+ isNoWrap: PropTypes.func,
230
+ textAlign: PropTypes.string
224
231
  } : {};
225
232
 
226
233
  export default memo(Section);
package/lib/TableHtml5/TableHtml5.js CHANGED
@@ -109,9 +109,13 @@ var TableHtml5 = function TableHtml5(_ref) {
109
109
  _ref$testId = _ref.testId,
110
110
  testId = _ref$testId === undefined ? 'vis-table' : _ref$testId,
111
111
  HTMLRenderer = _ref.HTMLRenderer,
112
+ _ref$cellValueAccesso = _ref.cellValueAccessor,
113
+ cellValueAccessor = _ref$cellValueAccesso === undefined ? R.identity : _ref$cellValueAccesso,
112
114
  _ref$labelAccessor = _ref.labelAccessor,
113
115
  labelAccessor = _ref$labelAccessor === undefined ? _utils.defaultLabelAccessor : _ref$labelAccessor,
114
- isNoWrap = _ref.isNoWrap;
116
+ textAlign = _ref.textAlign,
117
+ _ref$isNoWrap = _ref.isNoWrap,
118
+ isNoWrap = _ref$isNoWrap === undefined ? R.always(false) : _ref$isNoWrap;
115
119
 
116
120
  var classes = useStyles();
117
121
 
@@ -126,7 +130,7 @@ var TableHtml5 = function TableHtml5(_ref) {
126
130
  var headerRef = (0, _react.useRef)(null);
127
131
  var subHeadCellsRef = (0, _react.useRef)([]);
128
132
 
129
- var labelAccessorhandler = (0, _react.useCallback)(labelAccessor, []);
133
+ var cellValueAccessorHandler = (0, _react.useCallback)(cellValueAccessor, []);
130
134
 
131
135
  (0, _react.useEffect)(function () {
132
136
  setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
@@ -165,7 +169,8 @@ var TableHtml5 = function TableHtml5(_ref) {
165
169
  labelAccessor: labelAccessor
166
170
  }, R.pathOr({}, ['', '', '', 0], cells), {
167
171
  cellHandler: cellHandler,
168
- isOne: true
172
+ isOne: true,
173
+ textAlign: textAlign
169
174
  }));
170
175
 
171
176
  return _react2.default.createElement(
@@ -180,7 +185,7 @@ var TableHtml5 = function TableHtml5(_ref) {
180
185
  xLayoutDataLength: xLayoutDataLength,
181
186
  subHeadCellsWidth: subHeadCellsWidth,
182
187
  HTMLRenderer: HTMLRenderer,
183
- labelAccessor: labelAccessorhandler
188
+ labelAccessor: labelAccessor
184
189
  }),
185
190
  _react2.default.createElement(_subHeader2.default, {
186
191
  headerData: headerData,
@@ -190,7 +195,7 @@ var TableHtml5 = function TableHtml5(_ref) {
190
195
  ref: subHeadCellsRef,
191
196
  subHeadCellsWidth: subHeadCellsWidth,
192
197
  HTMLRenderer: HTMLRenderer,
193
- labelAccessor: labelAccessorhandler
198
+ labelAccessor: labelAccessor
194
199
  })
195
200
  ),
196
201
  mapIndexed(function (section, index) {
@@ -209,8 +214,10 @@ var TableHtml5 = function TableHtml5(_ref) {
209
214
  SideIcon: SideIcon,
210
215
  subHeadCellsWidth: subHeadCellsWidth,
211
216
  HTMLRenderer: HTMLRenderer,
212
- labelAccessor: labelAccessorhandler,
213
- isNoWrap: isNoWrap
217
+ cellValueAccessor: cellValueAccessorHandler,
218
+ labelAccessor: labelAccessor,
219
+ isNoWrap: isNoWrap,
220
+ textAlign: textAlign
214
221
  });
215
222
  }, sectionsData)
216
223
  );
@@ -227,7 +234,9 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
227
234
  testId: _propTypes2.default.string,
228
235
  HTMLRenderer: _propTypes2.default.func,
229
236
  labelAccessor: _propTypes2.default.func,
230
- isNoWrap: _propTypes2.default.func
237
+ cellValueAccessor: _propTypes2.default.func,
238
+ isNoWrap: _propTypes2.default.func,
239
+ textAlign: _propTypes2.default.string
231
240
  } : {};
232
241
 
233
242
  exports.default = TableHtml5;
package/lib/TableHtml5/cell.js CHANGED
@@ -93,7 +93,8 @@ var Cell = function Cell(_ref) {
93
93
  sideProps = _ref.sideProps,
94
94
  SideIcon = _ref.SideIcon,
95
95
  HTMLRenderer = _ref.HTMLRenderer,
96
- labelAccessor = _ref.labelAccessor;
96
+ labelAccessor = _ref.labelAccessor,
97
+ textAlign = _ref.textAlign;
97
98
 
98
99
  var classes = useStyles();
99
100
  var isRtl = (0, _utils.getIsRtl)((0, _styles.useTheme)());
@@ -116,12 +117,13 @@ var Cell = function Cell(_ref) {
116
117
  return _react2.default.createElement(
117
118
  _TableCell2.default,
118
119
  {
119
- align: isValidNumber(intValue) ? 'right' : 'left',
120
+ align: isValidNumber(intValue) ? 'right' : textAlign,
120
121
  component: isOne ? 'div' : undefined,
121
- className: (0, _classnames2.default)(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx[classes.rightAlign] = isRtl, _cx)),
122
+ className: (0, _classnames2.default)(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx[classes.rightAlign] = isRtl && R.isNil(textAlign), _cx)),
122
123
  headers: headers,
123
124
  onClick: activeCellHandler,
124
- tabIndex: 0
125
+ tabIndex: 0,
126
+ style: { textAlign: textAlign }
125
127
  },
126
128
  !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
127
129
  hasFlag && _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags, labelAccessor: labelAccessor }),
@@ -133,7 +135,7 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
133
135
  intValue: _propTypes2.default.number,
134
136
  flags: _propTypes2.default.array,
135
137
  isOne: _propTypes2.default.bool,
136
- value: _propTypes2.default.string,
138
+ value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
137
139
  headers: _propTypes2.default.string,
138
140
  indexedDimValIds: _propTypes2.default.object,
139
141
  cellHandler: _propTypes2.default.func,
@@ -143,7 +145,8 @@ Cell.propTypes = process.env.NODE_ENV !== "production" ? {
143
145
  sideProps: _propTypes2.default.object,
144
146
  SideIcon: _propTypes2.default.func,
145
147
  HTMLRenderer: _propTypes2.default.func,
146
- labelAccessor: _propTypes2.default.func
148
+ labelAccessor: _propTypes2.default.func,
149
+ textAlign: _propTypes2.default.string
147
150
  } : {};
148
151
 
149
152
  exports.default = Cell;
package/lib/TableHtml5/section.js CHANGED
@@ -122,7 +122,9 @@ var Section = function Section(_ref) {
122
122
  subHeadCellsWidth = _ref.subHeadCellsWidth,
123
123
  HTMLRenderer = _ref.HTMLRenderer,
124
124
  labelAccessor = _ref.labelAccessor,
125
- isNoWrap = _ref.isNoWrap;
125
+ cellValueAccessor = _ref.cellValueAccessor,
126
+ isNoWrap = _ref.isNoWrap,
127
+ textAlign = _ref.textAlign;
126
128
 
127
129
  var classes = useStyles();
128
130
  var currentSection = R.path([0, 'key'], section);
@@ -172,7 +174,7 @@ var Section = function Section(_ref) {
172
174
  _TableCell2.default,
173
175
  {
174
176
  key: id,
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
+ 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] = R.is(Function, isNoWrap) && isNoWrap(R.prop('dimension', cell)), _cx)),
176
178
  id: id,
177
179
  headers: 'subHeader_' + index + ' ' + currentSection,
178
180
  component: 'th',
@@ -224,7 +226,9 @@ var Section = function Section(_ref) {
224
226
 
225
227
  var intersectionCellId = rowId + '/' + columnIndex;
226
228
  var isActive = R.pipe(R.propOr({}, 'intersectionCellId'), R.equals(intersectionCellId))(activeCellIds);
227
- return _react2.default.createElement(_cell2.default, _extends({}, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
229
+ return _react2.default.createElement(_cell2.default, _extends({}, R.pipe(R.pathOr({ value: null }, [item.key, currentSection, sectionbody.key, 0]), R.over(R.lensProp('value'), function (val) {
230
+ return R.isNil(val) ? '..' : cellValueAccessor(val);
231
+ }))(cells), {
228
232
  key: intersectionCellId,
229
233
  headers: rowIds + ' ' + columnIds + ' ' + currentSection,
230
234
  cellHandler: cellHandler,
@@ -232,6 +236,7 @@ var Section = function Section(_ref) {
232
236
  labelAccessor: labelAccessor,
233
237
  SideIcon: SideIcon,
234
238
  isActive: isActive,
239
+ textAlign: textAlign,
235
240
  isHighlight: R.any(R.identity)([R.prop(rowId)(activeCellIds), R.prop(columnIndex)(activeCellIds)]),
236
241
  activeCellHandler: R.is(Function)(activeCellHandler) ? function () {
237
242
  var _activeCellHandler;
@@ -262,7 +267,9 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
262
267
  subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number),
263
268
  HTMLRenderer: _propTypes2.default.func,
264
269
  labelAccessor: _propTypes2.default.func,
265
- isNoWrap: _propTypes2.default.func
270
+ cellValueAccessor: _propTypes2.default.func,
271
+ isNoWrap: _propTypes2.default.func,
272
+ textAlign: _propTypes2.default.string
266
273
  } : {};
267
274
 
268
275
  exports.default = (0, _react.memo)(Section);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sis-cc/dotstatsuite-visions",
3
- "version": "8.5.0",
3
+ "version": "8.7.0",
4
4
  "description": "Library of visual components",
5
5
  "author": "OECD",
6
6
  "homepage": "https://visions-qa.siscc.org/#o",