@sis-cc/dotstatsuite-visions 7.2.1 → 7.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.
Files changed (3) hide show
  1. package/es/Select/Select.js +44 -8
  2. package/lib/Select/Select.js +44 -7
  3. package/package.json +1 -1
package/es/Select/Select.js CHANGED
@@ -1,11 +1,12 @@
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 from 'react';
3
+ import React, { useEffect } from 'react';
4
4
  import * as R from 'ramda';
5
5
  import PropTypes from 'prop-types';
6
6
  import { makeStyles } from '@material-ui/core/styles';
7
7
  import TextField from '@material-ui/core/TextField';
8
8
  import MenuItem from '@material-ui/core/MenuItem';
9
+ import { Tooltip } from '../';
9
10
 
10
11
  var useStyles = makeStyles(function (theme) {
11
12
  return {
@@ -34,6 +35,15 @@ var Select = function Select(_ref) {
34
35
  dataTestId = _ref$dataTestId === undefined ? 'select-testid' : _ref$dataTestId;
35
36
 
36
37
  var classes = useStyles();
38
+ var ref = React.useRef(null);
39
+
40
+ var _React$useState = React.useState(false),
41
+ open = _React$useState[0],
42
+ setOpen = _React$useState[1];
43
+
44
+ var _React$useState2 = React.useState(0),
45
+ width = _React$useState2[0],
46
+ setWidth = _React$useState2[1];
37
47
 
38
48
  var handleChange = function handleChange(event) {
39
49
  if (R.is(Function)(onChange)) {
@@ -41,6 +51,12 @@ var Select = function Select(_ref) {
41
51
  }
42
52
  };
43
53
 
54
+ useEffect(function () {
55
+ if (ref.current && open) {
56
+ setWidth(ref.current.clientWidth);
57
+ }
58
+ }, [ref.current, open]);
59
+
44
60
  var getter = function getter(key) {
45
61
  return function (accessor) {
46
62
  return R.ifElse(R.is(Object), function (item) {
@@ -49,42 +65,62 @@ var Select = function Select(_ref) {
49
65
  };
50
66
  };
51
67
 
68
+ var joinByValue = R.innerJoin(function (obj, value) {
69
+ return obj.value === value;
70
+ });
71
+ var labels = R.pluck('label', joinByValue(items, R.is(Array, value) ? value : [value]));
52
72
  return React.createElement(
53
73
  TextField,
54
74
  _extends({
75
+ select: true,
55
76
  id: id,
56
77
  'data-testid': dataTestId,
57
78
  disabled: R.isEmpty(items),
58
- select: true,
59
79
  label: label,
60
80
  value: value,
81
+ title: R.join(', ', labels),
61
82
  onChange: handleChange,
62
83
  variant: 'outlined',
63
84
  size: 'small',
64
85
  fullWidth: true,
65
86
  SelectProps: {
87
+ ref: ref,
88
+ open: open,
89
+ autoWidth: true,
66
90
  multiple: isMultiple,
91
+ onOpen: function onOpen() {
92
+ return setOpen(true);
93
+ },
94
+ onClose: function onClose() {
95
+ return setOpen(false);
96
+ },
67
97
  classes: { root: classes.root },
68
98
  MenuProps: {
69
99
  getContentAnchorEl: null,
70
100
  anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
71
101
  transformOrigin: { vertical: 'top', horizontal: 'center' },
72
- classes: { paper: classes.paper }
102
+ classes: { paper: classes.paper },
103
+ PaperProps: {
104
+ style: { width: width }
105
+ }
73
106
  }
74
107
  },
75
108
  className: classes.root
76
109
  }, textFieldProps),
77
110
  R.map(function (item) {
111
+ var value = getter('value')(valueAccessor)(item);
112
+ var label = getter('label')(labelAccessor)(item);
78
113
  return React.createElement(
79
114
  MenuItem,
80
115
  {
81
- key: optionsKey + '-' + getter('value')(valueAccessor)(item),
82
- value: getter('value')(valueAccessor)(item),
116
+ key: optionsKey + '-' + value,
117
+ id: label,
118
+ value: value,
83
119
  dense: true,
84
- id: getter('label')(labelAccessor)(item),
85
- 'aria-label': getter('label')(labelAccessor)(item)
120
+ 'aria-label': label,
121
+ title: label
86
122
  },
87
- getter('label')(labelAccessor)(item)
123
+ label
88
124
  );
89
125
  })(items)
90
126
  );
package/lib/Select/Select.js CHANGED
@@ -26,6 +26,8 @@ var _MenuItem = require('@material-ui/core/MenuItem');
26
26
 
27
27
  var _MenuItem2 = _interopRequireDefault(_MenuItem);
28
28
 
29
+ var _ = require('../');
30
+
29
31
  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; } }
30
32
 
31
33
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,6 +59,15 @@ var Select = function Select(_ref) {
57
59
  dataTestId = _ref$dataTestId === undefined ? 'select-testid' : _ref$dataTestId;
58
60
 
59
61
  var classes = useStyles();
62
+ var ref = _react2.default.useRef(null);
63
+
64
+ var _React$useState = _react2.default.useState(false),
65
+ open = _React$useState[0],
66
+ setOpen = _React$useState[1];
67
+
68
+ var _React$useState2 = _react2.default.useState(0),
69
+ width = _React$useState2[0],
70
+ setWidth = _React$useState2[1];
60
71
 
61
72
  var handleChange = function handleChange(event) {
62
73
  if (R.is(Function)(onChange)) {
@@ -64,6 +75,12 @@ var Select = function Select(_ref) {
64
75
  }
65
76
  };
66
77
 
78
+ (0, _react.useEffect)(function () {
79
+ if (ref.current && open) {
80
+ setWidth(ref.current.clientWidth);
81
+ }
82
+ }, [ref.current, open]);
83
+
67
84
  var getter = function getter(key) {
68
85
  return function (accessor) {
69
86
  return R.ifElse(R.is(Object), function (item) {
@@ -72,42 +89,62 @@ var Select = function Select(_ref) {
72
89
  };
73
90
  };
74
91
 
92
+ var joinByValue = R.innerJoin(function (obj, value) {
93
+ return obj.value === value;
94
+ });
95
+ var labels = R.pluck('label', joinByValue(items, R.is(Array, value) ? value : [value]));
75
96
  return _react2.default.createElement(
76
97
  _TextField2.default,
77
98
  _extends({
99
+ select: true,
78
100
  id: id,
79
101
  'data-testid': dataTestId,
80
102
  disabled: R.isEmpty(items),
81
- select: true,
82
103
  label: label,
83
104
  value: value,
105
+ title: R.join(', ', labels),
84
106
  onChange: handleChange,
85
107
  variant: 'outlined',
86
108
  size: 'small',
87
109
  fullWidth: true,
88
110
  SelectProps: {
111
+ ref: ref,
112
+ open: open,
113
+ autoWidth: true,
89
114
  multiple: isMultiple,
115
+ onOpen: function onOpen() {
116
+ return setOpen(true);
117
+ },
118
+ onClose: function onClose() {
119
+ return setOpen(false);
120
+ },
90
121
  classes: { root: classes.root },
91
122
  MenuProps: {
92
123
  getContentAnchorEl: null,
93
124
  anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
94
125
  transformOrigin: { vertical: 'top', horizontal: 'center' },
95
- classes: { paper: classes.paper }
126
+ classes: { paper: classes.paper },
127
+ PaperProps: {
128
+ style: { width: width }
129
+ }
96
130
  }
97
131
  },
98
132
  className: classes.root
99
133
  }, textFieldProps),
100
134
  R.map(function (item) {
135
+ var value = getter('value')(valueAccessor)(item);
136
+ var label = getter('label')(labelAccessor)(item);
101
137
  return _react2.default.createElement(
102
138
  _MenuItem2.default,
103
139
  {
104
- key: optionsKey + '-' + getter('value')(valueAccessor)(item),
105
- value: getter('value')(valueAccessor)(item),
140
+ key: optionsKey + '-' + value,
141
+ id: label,
142
+ value: value,
106
143
  dense: true,
107
- id: getter('label')(labelAccessor)(item),
108
- 'aria-label': getter('label')(labelAccessor)(item)
144
+ 'aria-label': label,
145
+ title: label
109
146
  },
110
- getter('label')(labelAccessor)(item)
147
+ label
111
148
  );
112
149
  })(items)
113
150
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sis-cc/dotstatsuite-visions",
3
- "version": "7.2.1",
3
+ "version": "7.3.0",
4
4
  "description": "Library of visual components",
5
5
  "author": "OECD",
6
6
  "homepage": "https://visions-qa.siscc.org/#o",