@hipay/hipay-material-ui 1.0.0-beta.27 → 1.0.0-beta.29

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 (65) hide show
  1. package/HiCheckbox/HiCheckbox.js +6 -3
  2. package/HiColoredLabel/HiColoredLabel.js +2 -2
  3. package/HiDatePicker/HiDateRangeSelector.js +32 -9
  4. package/HiForm/HiSearchField.js +7 -1
  5. package/HiSelect/HiSelect.js +187 -77
  6. package/HiSelect/HiSuggestSelect.js +37 -9
  7. package/HiSelect/SelectInput.js +63 -10
  8. package/HiSelectableList/HiSelectableListItem.js +2 -1
  9. package/HiTable/BodyCellBuilder.js +22 -16
  10. package/HiTable/BodyCells/CellAccount.js +1 -5
  11. package/HiTable/BodyCells/CellAddress.js +3 -50
  12. package/HiTable/BodyCells/CellCountry.js +0 -4
  13. package/HiTable/BodyCells/CellDate.js +4 -13
  14. package/HiTable/BodyCells/CellIcon.js +10 -27
  15. package/HiTable/BodyCells/CellImage.js +1 -21
  16. package/HiTable/BodyCells/CellLayout.js +11 -4
  17. package/HiTable/BodyCells/CellNumeric.js +3 -23
  18. package/HiTable/BodyCells/CellSentinel.js +20 -49
  19. package/HiTable/BodyCells/CellStatus.js +11 -19
  20. package/HiTable/BodyCells/CellText.js +3 -10
  21. package/HiTable/BodyCells/CellThirdPartySecurity.js +4 -18
  22. package/HiTable/BodyCells/index.js +0 -9
  23. package/HiTable/BodyRow.js +15 -17
  24. package/HiTable/HiTable.js +41 -26
  25. package/HiTable/HiTableBody.js +2 -1
  26. package/HiTable/HiTableContextMenu.js +4 -3
  27. package/HiTable/constants.js +2 -2
  28. package/es/HiCheckbox/HiCheckbox.js +6 -3
  29. package/es/HiColoredLabel/HiColoredLabel.js +2 -2
  30. package/es/HiDatePicker/HiDateRangeSelector.js +27 -9
  31. package/es/HiForm/HiSearchField.js +2 -1
  32. package/es/HiSelect/HiSelect.js +133 -36
  33. package/es/HiSelect/HiSuggestSelect.js +36 -10
  34. package/es/HiSelect/SelectInput.js +50 -10
  35. package/es/HiSelectableList/HiSelectableListItem.js +2 -1
  36. package/es/HiTable/BodyCellBuilder.js +21 -19
  37. package/es/HiTable/BodyCells/CellAccount.js +1 -5
  38. package/es/HiTable/BodyCells/CellAddress.js +3 -44
  39. package/es/HiTable/BodyCells/CellCountry.js +0 -2
  40. package/es/HiTable/BodyCells/CellDate.js +4 -10
  41. package/es/HiTable/BodyCells/CellIcon.js +10 -24
  42. package/es/HiTable/BodyCells/CellImage.js +1 -21
  43. package/es/HiTable/BodyCells/CellLayout.js +10 -4
  44. package/es/HiTable/BodyCells/CellNumeric.js +3 -16
  45. package/es/HiTable/BodyCells/CellSentinel.js +20 -46
  46. package/es/HiTable/BodyCells/CellStatus.js +11 -16
  47. package/es/HiTable/BodyCells/CellText.js +3 -7
  48. package/es/HiTable/BodyCells/CellThirdPartySecurity.js +3 -15
  49. package/es/HiTable/BodyCells/index.js +0 -2
  50. package/es/HiTable/BodyRow.js +12 -14
  51. package/es/HiTable/HiTable.js +41 -26
  52. package/es/HiTable/HiTableBody.js +2 -1
  53. package/es/HiTable/HiTableContextMenu.js +4 -3
  54. package/es/HiTable/constants.js +7 -7
  55. package/es/utils/HiIconBuilder.js +12 -4
  56. package/es/utils/hiHelpers.js +1 -1
  57. package/index.es.js +1 -1
  58. package/index.js +1 -1
  59. package/package.json +1 -1
  60. package/umd/hipay-material-ui.development.js +23532 -23548
  61. package/umd/hipay-material-ui.production.min.js +5 -5
  62. package/utils/HiIconBuilder.js +13 -3
  63. package/utils/hiHelpers.js +1 -1
  64. package/HiTable/BodyCells/CellAccountNumber.js +0 -229
  65. package/es/HiTable/BodyCells/CellAccountNumber.js +0 -171
@@ -94,12 +94,14 @@ var HiIconBuilder = function (_PureComponent) {
94
94
  var _props = this.props,
95
95
  icon = _props.icon,
96
96
  size = _props.size,
97
+ width = _props.width,
98
+ height = _props.height,
97
99
  className = _props.className,
98
100
  style = _props.style,
99
101
  onClick = _props.onClick,
100
102
  color = _props.color,
101
103
  backgroundColor = _props.backgroundColor,
102
- others = (0, _objectWithoutProperties3.default)(_props, ['icon', 'size', 'className', 'style', 'onClick', 'color', 'backgroundColor']);
104
+ others = (0, _objectWithoutProperties3.default)(_props, ['icon', 'size', 'width', 'height', 'className', 'style', 'onClick', 'color', 'backgroundColor']);
103
105
 
104
106
 
105
107
  var props = {};
@@ -132,8 +134,8 @@ var HiIconBuilder = function (_PureComponent) {
132
134
  return _react2.default.createElement(IconName, (0, _extends3.default)({
133
135
  className: className,
134
136
  style: (0, _extends3.default)({
135
- height: size,
136
- width: size
137
+ height: height ? height : size,
138
+ width: width ? width : size
137
139
  }, color && { color: color, fill: color }, backgroundColor && { backgroundColor: backgroundColor, padding: 2, borderRadius: size }, style),
138
140
  onClick: onClick
139
141
  }, props, others));
@@ -170,6 +172,14 @@ HiIconBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
170
172
  * Taile de la police
171
173
  */
172
174
  size: _propTypes2.default.number,
175
+ /**
176
+ * Largeur de l'icone (px)
177
+ */
178
+ width: _propTypes2.default.number,
179
+ /**
180
+ * Hauteur de l'icone (px)
181
+ */
182
+ height: _propTypes2.default.number,
173
183
  /**
174
184
  * Style surchargé
175
185
  */
@@ -185,7 +185,7 @@ function getNextItemSelectable(node, direction) {
185
185
  if (node.nextSibling === null) {
186
186
  return null;
187
187
  } else if (node.nextSibling.tabIndex === -1) {
188
- return this.getNextItemSelectable(node.nextSibling, direction);
188
+ return getNextItemSelectable(node.nextSibling, direction);
189
189
  }
190
190
  return node.nextSibling;
191
191
  } else if (node.previousSibling === null) {
@@ -1,229 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.styles = undefined;
7
-
8
- var _stringify = require('babel-runtime/core-js/json/stringify');
9
-
10
- var _stringify2 = _interopRequireDefault(_stringify);
11
-
12
- var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
13
-
14
- var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
15
-
16
- var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
17
-
18
- var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
19
-
20
- var _createClass2 = require('babel-runtime/helpers/createClass');
21
-
22
- var _createClass3 = _interopRequireDefault(_createClass2);
23
-
24
- var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
25
-
26
- var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
27
-
28
- var _inherits2 = require('babel-runtime/helpers/inherits');
29
-
30
- var _inherits3 = _interopRequireDefault(_inherits2);
31
-
32
- var _react = require('react');
33
-
34
- var _react2 = _interopRequireDefault(_react);
35
-
36
- var _propTypes = require('prop-types');
37
-
38
- var _propTypes2 = _interopRequireDefault(_propTypes);
39
-
40
- var _mdiMaterialUi = require('mdi-material-ui');
41
-
42
- var _Tooltip = require('../../Tooltip');
43
-
44
- var _Tooltip2 = _interopRequireDefault(_Tooltip);
45
-
46
- var _styles = require('../../styles');
47
-
48
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
49
-
50
- var styles = exports.styles = function styles(theme) {
51
- return {
52
- tooltipWrapper: {
53
- textAlign: 'center'
54
- },
55
- coloredIndicator: {
56
- backgroundColor: '#ffffff',
57
- borderRadius: '50%',
58
- float: 'left',
59
- width: 12,
60
- height: 'auto',
61
- position: 'relative',
62
- top: 5,
63
- right: 3
64
- },
65
- leftEllipsisSpan: {
66
- display: 'inline-block',
67
- overflow: 'hidden',
68
- textOverflow: 'ellipsis',
69
- whiteSpace: 'pre',
70
- direction: 'rtl',
71
- width: '49%'
72
- },
73
- rightEllipsisSpan: {
74
- display: 'inline-block',
75
- overflow: 'hidden',
76
- textOverflow: 'ellipsis',
77
- whiteSpace: 'pre'
78
- },
79
- noEllipsisSpan: {
80
- display: 'inline-block',
81
- overflow: 'hidden',
82
- whiteSpace: 'pre',
83
- maxWidth: '50%'
84
- }
85
- };
86
- };
87
-
88
- /**
89
- * Cette cellule permet d'afficher un numéro de compte
90
- * Le tooltip affiche les informations complémentaires (country, expiration date..)
91
- */
92
-
93
- var CellAccountNumber = function (_React$Component) {
94
- (0, _inherits3.default)(CellAccountNumber, _React$Component);
95
-
96
- function CellAccountNumber() {
97
- (0, _classCallCheck3.default)(this, CellAccountNumber);
98
- return (0, _possibleConstructorReturn3.default)(this, (CellAccountNumber.__proto__ || (0, _getPrototypeOf2.default)(CellAccountNumber)).apply(this, arguments));
99
- }
100
-
101
- (0, _createClass3.default)(CellAccountNumber, [{
102
- key: 'shouldComponentUpdate',
103
- value: function shouldComponentUpdate(nextProps, nextState) {
104
- return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
105
- }
106
- }, {
107
- key: 'render',
108
- value: function render() {
109
- var _this2 = this;
110
-
111
- var _props = this.props,
112
- classes = _props.classes,
113
- value = _props.value,
114
- country = _props.country,
115
- expirationDate = _props.expirationDate,
116
- expirationDateLabel = _props.expirationDateLabel,
117
- statusColor = _props.statusColor,
118
- issuer = _props.issuer;
119
-
120
-
121
- var dateDisplayed = new Date(expirationDate);
122
-
123
- if (isNaN(dateDisplayed.getMonth()) || isNaN(dateDisplayed.getFullYear())) {
124
- dateDisplayed = '';
125
- } else {
126
- dateDisplayed = (dateDisplayed.getMonth() + 1 < 10 ? '' + dateDisplayed.getMonth() + 1 : dateDisplayed.getMonth() + 1) + '/' + dateDisplayed.getFullYear();
127
- }
128
-
129
- var tooltipContent = _react2.default.createElement(
130
- 'div',
131
- { className: classes.tooltipWrapper },
132
- _react2.default.createElement(
133
- 'div',
134
- null,
135
- issuer
136
- ),
137
- _react2.default.createElement(
138
- 'div',
139
- null,
140
- value || 'N/A'
141
- ),
142
- expirationDate && _react2.default.createElement(
143
- 'div',
144
- null,
145
- statusColor ? _react2.default.createElement(_mdiMaterialUi.Circle, {
146
- style: { color: statusColor },
147
- className: classes.coloredIndicator
148
- }) : '',
149
- expirationDateLabel && expirationDateLabel + ' : ',
150
- dateDisplayed
151
- ),
152
- _react2.default.createElement(
153
- 'div',
154
- null,
155
- country
156
- )
157
- );
158
-
159
- var start = value ? value.substr(0, Math.round(value.length / 2)) : '';
160
- // reverse string for rtl display
161
- var end = value ? value.substr(Math.round(value.length / 2)).split('').reverse().join('') : '';
162
-
163
- return _react2.default.createElement(
164
- _Tooltip2.default,
165
- { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
166
- _react2.default.createElement(
167
- 'div',
168
- { className: classes.rightEllipsisSpan, style: { width: '100%' } },
169
- _react2.default.createElement(
170
- 'div',
171
- {
172
- ref: function ref(div) {
173
- _this2.cellText = div;
174
- }
175
- },
176
- _react2.default.createElement(
177
- 'span',
178
- { className: classes.noEllipsisSpan },
179
- start
180
- ),
181
- _react2.default.createElement(
182
- 'span',
183
- { className: classes.leftEllipsisSpan },
184
- end
185
- )
186
- )
187
- )
188
- );
189
- }
190
- }]);
191
- return CellAccountNumber;
192
- }(_react2.default.Component);
193
-
194
- CellAccountNumber.propTypes = process.env.NODE_ENV !== "production" ? {
195
- /**
196
- * Useful to extend the style applied to components.
197
- */
198
- classes: _propTypes2.default.object,
199
- /**
200
- * Pays du compte
201
- */
202
- country: _propTypes2.default.string,
203
- /**
204
- * Date d'expiration
205
- */
206
- expirationDate: _propTypes2.default.string,
207
- /**
208
- * Label de la date d'expiration
209
- */
210
- expirationDateLabel: _propTypes2.default.string,
211
- /**
212
- * Banque issuer
213
- */
214
- issuer: _propTypes2.default.string,
215
- /**
216
- * Couleur représentant le statut du compte (utilisé pour caractériser la date d'expiration)
217
- */
218
- statusColor: _propTypes2.default.string,
219
- /**
220
- * True si la colonne est la première colonne et doit avoir un comportement "sticky"
221
- * lors du scroll horizontal
222
- */
223
- sticky: _propTypes2.default.bool,
224
- /**
225
- * Numéro du compte
226
- */
227
- value: _propTypes2.default.string
228
- } : {};
229
- exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellAccountNumber' })(CellAccountNumber);
@@ -1,171 +0,0 @@
1
- import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
2
- import React from 'react';
3
- import PropTypes from 'prop-types';
4
- import { Circle } from 'mdi-material-ui';
5
- import Tooltip from '../../Tooltip';
6
- import { withStyles, withTheme } from '../../styles';
7
-
8
- export const styles = theme => ({
9
- tooltipWrapper: {
10
- textAlign: 'center'
11
- },
12
- coloredIndicator: {
13
- backgroundColor: '#ffffff',
14
- borderRadius: '50%',
15
- float: 'left',
16
- width: 12,
17
- height: 'auto',
18
- position: 'relative',
19
- top: 5,
20
- right: 3
21
- },
22
- leftEllipsisSpan: {
23
- display: 'inline-block',
24
- overflow: 'hidden',
25
- textOverflow: 'ellipsis',
26
- whiteSpace: 'pre',
27
- direction: 'rtl',
28
- width: '49%'
29
- },
30
- rightEllipsisSpan: {
31
- display: 'inline-block',
32
- overflow: 'hidden',
33
- textOverflow: 'ellipsis',
34
- whiteSpace: 'pre'
35
- },
36
- noEllipsisSpan: {
37
- display: 'inline-block',
38
- overflow: 'hidden',
39
- whiteSpace: 'pre',
40
- maxWidth: '50%'
41
- }
42
- });
43
-
44
- /**
45
- * Cette cellule permet d'afficher un numéro de compte
46
- * Le tooltip affiche les informations complémentaires (country, expiration date..)
47
- */
48
- class CellAccountNumber extends React.Component {
49
-
50
- shouldComponentUpdate(nextProps, nextState) {
51
- return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
52
- }
53
-
54
- render() {
55
- const {
56
- classes,
57
- value,
58
- country,
59
- expirationDate,
60
- expirationDateLabel,
61
- statusColor,
62
- issuer
63
- } = this.props;
64
-
65
- let dateDisplayed = new Date(expirationDate);
66
-
67
- if (isNaN(dateDisplayed.getMonth()) || isNaN(dateDisplayed.getFullYear())) {
68
- dateDisplayed = '';
69
- } else {
70
- dateDisplayed = `${dateDisplayed.getMonth() + 1 < 10 ? `${dateDisplayed.getMonth()}${1}` : dateDisplayed.getMonth() + 1}/${dateDisplayed.getFullYear()}`;
71
- }
72
-
73
- const tooltipContent = React.createElement(
74
- 'div',
75
- { className: classes.tooltipWrapper },
76
- React.createElement(
77
- 'div',
78
- null,
79
- issuer
80
- ),
81
- React.createElement(
82
- 'div',
83
- null,
84
- value || 'N/A'
85
- ),
86
- expirationDate && React.createElement(
87
- 'div',
88
- null,
89
- statusColor ? React.createElement(Circle, {
90
- style: { color: statusColor },
91
- className: classes.coloredIndicator
92
- }) : '',
93
- expirationDateLabel && `${expirationDateLabel} : `,
94
- dateDisplayed
95
- ),
96
- React.createElement(
97
- 'div',
98
- null,
99
- country
100
- )
101
- );
102
-
103
- const start = value ? value.substr(0, Math.round(value.length / 2)) : '';
104
- // reverse string for rtl display
105
- const end = value ? value.substr(Math.round(value.length / 2)).split('').reverse().join('') : '';
106
-
107
- return React.createElement(
108
- Tooltip,
109
- { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
110
- React.createElement(
111
- 'div',
112
- { className: classes.rightEllipsisSpan, style: { width: '100%' } },
113
- React.createElement(
114
- 'div',
115
- {
116
- ref: div => {
117
- this.cellText = div;
118
- }
119
- },
120
- React.createElement(
121
- 'span',
122
- { className: classes.noEllipsisSpan },
123
- start
124
- ),
125
- React.createElement(
126
- 'span',
127
- { className: classes.leftEllipsisSpan },
128
- end
129
- )
130
- )
131
- )
132
- );
133
- }
134
- }
135
-
136
- CellAccountNumber.propTypes = process.env.NODE_ENV !== "production" ? {
137
- /**
138
- * Useful to extend the style applied to components.
139
- */
140
- classes: PropTypes.object,
141
- /**
142
- * Pays du compte
143
- */
144
- country: PropTypes.string,
145
- /**
146
- * Date d'expiration
147
- */
148
- expirationDate: PropTypes.string,
149
- /**
150
- * Label de la date d'expiration
151
- */
152
- expirationDateLabel: PropTypes.string,
153
- /**
154
- * Banque issuer
155
- */
156
- issuer: PropTypes.string,
157
- /**
158
- * Couleur représentant le statut du compte (utilisé pour caractériser la date d'expiration)
159
- */
160
- statusColor: PropTypes.string,
161
- /**
162
- * True si la colonne est la première colonne et doit avoir un comportement "sticky"
163
- * lors du scroll horizontal
164
- */
165
- sticky: PropTypes.bool,
166
- /**
167
- * Numéro du compte
168
- */
169
- value: PropTypes.string
170
- } : {};
171
- export default withStyles(styles, { withTheme: true, name: 'HmuiCellAccountNumber' })(CellAccountNumber);