@hipay/hipay-material-ui 2.0.0-beta.76 → 2.1.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.
- package/CHANGELOG.md +77 -0
- package/HiDatePicker/HiDatePicker.js +0 -4
- package/HiExpansionPanel/HiExpansionPanel.js +19 -10
- package/HiForm/index.js +17 -1
- package/HiNotice/HiKPI.js +13 -9
- package/HiPaymentMeans/HiPaymentMeans.js +36 -32
- package/HiSelect/HiSelect.js +49 -51
- package/HiSelect/HiSuggestSelect.js +62 -54
- package/HiSelectableList/HiSelectableList.js +28 -9
- package/HiSelectableList/HiSelectableListItem.js +1 -1
- package/README.md +2 -2
- package/es/HiDatePicker/HiDatePicker.js +0 -2
- package/es/HiExpansionPanel/HiExpansionPanel.js +19 -10
- package/es/HiForm/index.js +3 -1
- package/es/HiNotice/HiKPI.js +14 -9
- package/es/HiPaymentMeans/HiPaymentMeans.js +34 -32
- package/es/HiSelect/HiSelect.js +30 -27
- package/es/HiSelect/HiSuggestSelect.js +61 -52
- package/es/HiSelectableList/HiSelectableList.js +26 -8
- package/es/HiSelectableList/HiSelectableListItem.js +1 -1
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
@@ -19,8 +19,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
19
19
|
|
20
20
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
21
21
|
|
22
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
23
|
-
|
24
22
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
25
23
|
|
26
24
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
@@ -87,7 +85,8 @@ function (_React$PureComponent) {
|
|
87
85
|
value: function getDerivedStateFromProps(props, state) {
|
88
86
|
if (JSON.stringify(props.options) !== JSON.stringify(state.options)) {
|
89
87
|
return {
|
90
|
-
options: props.options
|
88
|
+
options: props.options,
|
89
|
+
suggestionFocusIndex: -1
|
91
90
|
};
|
92
91
|
}
|
93
92
|
|
@@ -101,6 +100,14 @@ function (_React$PureComponent) {
|
|
101
100
|
(0, _classCallCheck2.default)(this, HiSuggestSelect);
|
102
101
|
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSuggestSelect).call(this, props));
|
103
102
|
|
103
|
+
_this.getInputElement = function (el) {
|
104
|
+
_this.textInput = el;
|
105
|
+
|
106
|
+
if (_this.props.inputRef) {
|
107
|
+
_this.props.inputRef(_this.textInput);
|
108
|
+
}
|
109
|
+
};
|
110
|
+
|
104
111
|
_this.handleSelect = function (event, value) {
|
105
112
|
document.body.style.overflow = 'auto';
|
106
113
|
|
@@ -144,74 +151,73 @@ function (_React$PureComponent) {
|
|
144
151
|
};
|
145
152
|
|
146
153
|
_this.handleKeyDownSearch = function (event) {
|
147
|
-
if (event.key === 'ArrowDown'
|
148
|
-
|
154
|
+
if (event.key === 'ArrowDown') {
|
155
|
+
event.preventDefault();
|
149
156
|
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
157
|
+
if (_this.state.suggestionFocusIndex < _this.props.options.length - 1) {
|
158
|
+
_this.setState(function (prevState) {
|
159
|
+
return {
|
160
|
+
suggestionFocusIndex: prevState.suggestionFocusIndex + 1
|
161
|
+
};
|
162
|
+
});
|
163
|
+
}
|
164
|
+
} else if (event.key === 'ArrowUp') {
|
165
|
+
event.preventDefault();
|
154
166
|
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
167
|
+
if (_this.state.suggestionFocusIndex >= 0) {
|
168
|
+
_this.setState(function (prevState) {
|
169
|
+
return {
|
170
|
+
suggestionFocusIndex: prevState.suggestionFocusIndex - 1
|
171
|
+
};
|
172
|
+
});
|
173
|
+
}
|
174
|
+
} else if (event.key === 'Enter' && _this.state.suggestionFocusIndex >= 0) {
|
175
|
+
event.preventDefault(); // Suggestion focused
|
176
|
+
|
177
|
+
_this.handleSelect(event, _this.state.options[_this.state.suggestionFocusIndex]);
|
160
178
|
} else if (event.key === 'Escape') {
|
161
179
|
_this.setState({
|
162
|
-
options: []
|
180
|
+
options: [],
|
181
|
+
suggestionFocusIndex: -1
|
163
182
|
});
|
164
183
|
}
|
165
184
|
};
|
166
185
|
|
167
|
-
_this.
|
168
|
-
|
169
|
-
options: props.options
|
170
|
-
};
|
171
|
-
_this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)(_this));
|
172
|
-
_this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
|
173
|
-
_this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
|
174
|
-
_this.getInputElement = _this.getInputElement.bind((0, _assertThisInitialized2.default)(_this));
|
175
|
-
return _this;
|
176
|
-
}
|
177
|
-
|
178
|
-
(0, _createClass2.default)(HiSuggestSelect, [{
|
179
|
-
key: "getInputElement",
|
180
|
-
value: function getInputElement(el) {
|
181
|
-
this.textInput = el;
|
182
|
-
|
183
|
-
if (this.props.inputRef) {
|
184
|
-
this.props.inputRef(this.textInput);
|
185
|
-
}
|
186
|
-
}
|
187
|
-
}, {
|
188
|
-
key: "handleFocus",
|
189
|
-
value: function handleFocus(event) {
|
190
|
-
this.setState({
|
186
|
+
_this.handleFocus = function (event) {
|
187
|
+
_this.setState({
|
191
188
|
focused: true
|
192
189
|
});
|
193
190
|
|
194
|
-
if (
|
195
|
-
|
191
|
+
if (_this.props.onFocusInput) {
|
192
|
+
_this.props.onFocusInput(event);
|
196
193
|
}
|
197
|
-
}
|
198
|
-
|
199
|
-
|
200
|
-
value: function handleBlur(event) {
|
194
|
+
};
|
195
|
+
|
196
|
+
_this.handleBlur = function (event) {
|
201
197
|
// Si on click sur un élément de HiInput, on garde le focus
|
202
198
|
// Par exemple sur l'icone reset
|
203
|
-
if (!event.relatedTarget || !
|
204
|
-
|
199
|
+
if (!event.relatedTarget || !_this.overlay || !_this.overlay.contains(event.relatedTarget)) {
|
200
|
+
_this.setState({
|
205
201
|
options: [],
|
206
|
-
focused: false
|
202
|
+
focused: false,
|
203
|
+
suggestionFocusIndex: -1
|
207
204
|
});
|
208
205
|
|
209
|
-
if (
|
210
|
-
|
206
|
+
if (_this.props.onBlurInput) {
|
207
|
+
_this.props.onBlurInput(event);
|
211
208
|
}
|
212
209
|
}
|
213
|
-
}
|
214
|
-
|
210
|
+
};
|
211
|
+
|
212
|
+
_this.state = {
|
213
|
+
focused: false,
|
214
|
+
options: props.options,
|
215
|
+
suggestionFocusIndex: -1
|
216
|
+
};
|
217
|
+
return _this;
|
218
|
+
}
|
219
|
+
|
220
|
+
(0, _createClass2.default)(HiSuggestSelect, [{
|
215
221
|
key: "render",
|
216
222
|
value: function render() {
|
217
223
|
var _this2 = this;
|
@@ -229,7 +235,8 @@ function (_React$PureComponent) {
|
|
229
235
|
otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align", "inputClasses"]);
|
230
236
|
var _this$state = this.state,
|
231
237
|
focused = _this$state.focused,
|
232
|
-
options = _this$state.options
|
238
|
+
options = _this$state.options,
|
239
|
+
suggestionFocusIndex = _this$state.suggestionFocusIndex;
|
233
240
|
var optionsShown = options; // If loading
|
234
241
|
|
235
242
|
if (loading) {
|
@@ -288,7 +295,8 @@ function (_React$PureComponent) {
|
|
288
295
|
hideCheckbox: true,
|
289
296
|
onSelect: this.handleSelect,
|
290
297
|
translations: translations,
|
291
|
-
onKeyDown: this.handleKeyDown
|
298
|
+
onKeyDown: this.handleKeyDown,
|
299
|
+
suggestionFocusIndex: suggestionFocusIndex
|
292
300
|
})))));
|
293
301
|
}
|
294
302
|
}]);
|
@@ -11,6 +11,8 @@ exports.default = exports.styles = void 0;
|
|
11
11
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
13
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
15
|
+
|
14
16
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15
17
|
|
16
18
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
@@ -39,10 +41,16 @@ var _keycode = _interopRequireDefault(require("keycode"));
|
|
39
41
|
|
40
42
|
var _reactLazyload = _interopRequireWildcard(require("react-lazyload"));
|
41
43
|
|
42
|
-
var
|
44
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
45
|
+
|
46
|
+
var styles = function styles(theme) {
|
43
47
|
return {
|
44
48
|
root: {
|
45
49
|
padding: 0
|
50
|
+
},
|
51
|
+
suggestionFocus: {
|
52
|
+
backgroundColor: theme.palette.action.hover,
|
53
|
+
fontWeight: theme.typography.fontWeightMedium
|
46
54
|
}
|
47
55
|
};
|
48
56
|
};
|
@@ -96,8 +104,8 @@ function (_React$PureComponent) {
|
|
96
104
|
}
|
97
105
|
};
|
98
106
|
|
99
|
-
_this.buildRecursiveListItem = function (item) {
|
100
|
-
var level = arguments.length >
|
107
|
+
_this.buildRecursiveListItem = function (item, index) {
|
108
|
+
var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
101
109
|
var _this$props = _this.props,
|
102
110
|
checkedIcon = _this$props.checkedIcon,
|
103
111
|
disabled = _this$props.disabled,
|
@@ -110,7 +118,9 @@ function (_React$PureComponent) {
|
|
110
118
|
sort = _this$props.sort,
|
111
119
|
onKeyDown = _this$props.onKeyDown,
|
112
120
|
onKeyUp = _this$props.onKeyUp,
|
113
|
-
|
121
|
+
suggestionFocusIndex = _this$props.suggestionFocusIndex,
|
122
|
+
classes = _this$props.classes,
|
123
|
+
others = (0, _objectWithoutProperties2.default)(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp", "suggestionFocusIndex", "classes"]);
|
114
124
|
|
115
125
|
if (sort && item.children) {
|
116
126
|
item.children.sort(_this.compareItem);
|
@@ -147,11 +157,14 @@ function (_React$PureComponent) {
|
|
147
157
|
onKeyUp: onKeyUp,
|
148
158
|
selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
|
149
159
|
,
|
150
|
-
item: item
|
160
|
+
item: item,
|
161
|
+
classes: {
|
162
|
+
listItem: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.suggestionFocus, index === suggestionFocusIndex))
|
163
|
+
}
|
151
164
|
}, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
|
152
165
|
return !(subItem.displayed === false);
|
153
166
|
}).map(function (subItem) {
|
154
|
-
return _this.buildRecursiveListItem(subItem, level + 1);
|
167
|
+
return _this.buildRecursiveListItem(subItem, index, level + 1);
|
155
168
|
}));
|
156
169
|
|
157
170
|
if (lazy) {
|
@@ -255,8 +268,8 @@ function (_React$PureComponent) {
|
|
255
268
|
}, itemList.filter(function (item) {
|
256
269
|
return !(item.displayed === false);
|
257
270
|
}) // don't remove if undefined
|
258
|
-
.map(function (item) {
|
259
|
-
return _this3.buildRecursiveListItem(item);
|
271
|
+
.map(function (item, index) {
|
272
|
+
return _this3.buildRecursiveListItem(item, index);
|
260
273
|
}));
|
261
274
|
}
|
262
275
|
}]);
|
@@ -347,6 +360,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
347
360
|
*/
|
348
361
|
selectedItemIdList: _propTypes.default.array,
|
349
362
|
|
363
|
+
/**
|
364
|
+
* Index de l'item "focus"
|
365
|
+
*/
|
366
|
+
suggestionFocusIndex: _propTypes.default.number,
|
367
|
+
|
350
368
|
/**
|
351
369
|
* Tri des éléments selon leur label
|
352
370
|
*/
|
@@ -365,7 +383,8 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
365
383
|
|
366
384
|
var _default = (0, _withStyles.default)(styles, {
|
367
385
|
hiComponent: true,
|
368
|
-
name: 'HmuiHiSelectableList'
|
386
|
+
name: 'HmuiHiSelectableList',
|
387
|
+
index: 51
|
369
388
|
})(HiSelectableList);
|
370
389
|
|
371
390
|
exports.default = _default;
|
@@ -378,7 +378,7 @@ function (_React$PureComponent) {
|
|
378
378
|
indeterminateIcon: indeterminateIcon
|
379
379
|
}), type === 'image' && img && _react.default.createElement("img", {
|
380
380
|
src: img,
|
381
|
-
alt:
|
381
|
+
alt: '',
|
382
382
|
onError: function onError(e) {
|
383
383
|
if (fallbackImage) {
|
384
384
|
e.target.src = "".concat(fallbackImage);
|
package/README.md
CHANGED
@@ -240,8 +240,8 @@ npm install -g cz-conventional-changelog
|
|
240
240
|
|
241
241
|
1. Changer la version dans package.json et dans packages/hipay-material-ui/package.json
|
242
242
|
2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
|
243
|
-
3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
|
244
|
-
4. Build : ```npm run build```
|
243
|
+
3. Commiter la release : ```git ci -am "chore(release): VERSION DATE (YYYY-mm-dd)```
|
244
|
+
4. Build : ```cd packages/hipay-material-ui/ && npm run build```
|
245
245
|
5. Publish :
|
246
246
|
|
247
247
|
```sh
|
@@ -18,8 +18,6 @@ import Weekday from './Weekday';
|
|
18
18
|
import HiTextField from '../HiForm/HiTextField';
|
19
19
|
import styles from './stylesheet';
|
20
20
|
import { isMobile } from 'react-device-detect';
|
21
|
-
import classNames from 'classnames';
|
22
|
-
import HiFormControl from '../HiForm/HiFormControl';
|
23
21
|
import HiDatePickerMobile from './HiDatePickerMobile';
|
24
22
|
|
25
23
|
class HiDatePicker extends React.Component {
|
@@ -12,11 +12,14 @@ import withStyles from '../styles/withStyles';
|
|
12
12
|
import classNames from 'classnames';
|
13
13
|
export const styles = theme => ({
|
14
14
|
summaryContent: {
|
15
|
-
display: '
|
15
|
+
display: 'flex',
|
16
|
+
alignItems: 'baseline',
|
17
|
+
justifyContent: 'space-between',
|
16
18
|
border: 'none',
|
17
19
|
'&$expanded': {
|
18
20
|
margin: 'initial'
|
19
|
-
}
|
21
|
+
},
|
22
|
+
maxWidth: '100%'
|
20
23
|
},
|
21
24
|
summaryRoot: {
|
22
25
|
borderBottom: '1px solid #E3E6E7',
|
@@ -46,17 +49,21 @@ export const styles = theme => ({
|
|
46
49
|
display: 'flex',
|
47
50
|
alignItems: 'center',
|
48
51
|
fontSize: 11,
|
49
|
-
lineHeight: '24px',
|
50
|
-
float: 'right',
|
51
|
-
marginRight: 32,
|
52
52
|
'&>svg': {
|
53
53
|
fontSize: 18,
|
54
54
|
marginLeft: 3
|
55
55
|
},
|
56
|
-
|
56
|
+
'&>button': {
|
57
57
|
marginRight: -12
|
58
|
-
}
|
58
|
+
},
|
59
|
+
marginLeft: 24,
|
60
|
+
overflow: 'hidden'
|
59
61
|
}),
|
62
|
+
secondaryHeadingSpan: {
|
63
|
+
overflow: 'hidden',
|
64
|
+
whiteSpace: 'nowrap',
|
65
|
+
textOverflow: 'ellipsis'
|
66
|
+
},
|
60
67
|
panel: {
|
61
68
|
boxShadow: 'none',
|
62
69
|
border: 'none'
|
@@ -116,10 +123,12 @@ class HiExpansionPanel extends React.PureComponent {
|
|
116
123
|
}),
|
117
124
|
expandIcon: !collapseDisable && _ref
|
118
125
|
}, React.createElement("div", {
|
119
|
-
className: classes.secondaryHeading
|
120
|
-
}, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled, secondaryHeadingIcon), React.createElement("div", {
|
121
126
|
className: classes.heading
|
122
|
-
}, heading)
|
127
|
+
}, heading), React.createElement("div", {
|
128
|
+
className: classes.secondaryHeading
|
129
|
+
}, React.createElement("span", {
|
130
|
+
className: classes.secondaryHeadingSpan
|
131
|
+
}, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled), secondaryHeadingIcon)), !!children && React.createElement(ExpansionPanelDetails, {
|
123
132
|
className: classes.panelDetails
|
124
133
|
}, children));
|
125
134
|
}
|
package/es/HiForm/index.js
CHANGED
@@ -6,4 +6,6 @@ export { default as HiInput } from './HiInput';
|
|
6
6
|
export { default as HiPasswordField } from './HiPasswordField';
|
7
7
|
export { default as HiSearchField } from './HiSearchField';
|
8
8
|
export { default as HiSlider } from './HiSlider';
|
9
|
-
export { default as HiTextField } from './HiTextField';
|
9
|
+
export { default as HiTextField } from './HiTextField';
|
10
|
+
export { default as HiUpload } from './HiUpload';
|
11
|
+
export { default as HiUploadField } from './HiUploadField';
|
package/es/HiNotice/HiKPI.js
CHANGED
@@ -15,7 +15,11 @@ export const styles = theme => ({
|
|
15
15
|
textAlign: 'center',
|
16
16
|
flexDirection: 'column',
|
17
17
|
alignItems: 'center',
|
18
|
-
fontFamily: theme.typography.fontFamily
|
18
|
+
fontFamily: theme.typography.fontFamily,
|
19
|
+
transition: 'height .5s ease-out'
|
20
|
+
},
|
21
|
+
rootDisable: {
|
22
|
+
cursor: 'default'
|
19
23
|
},
|
20
24
|
error: {
|
21
25
|
boxShadow: '0px 2px 4px 0px rgba(213, 0, 0, 0.24)',
|
@@ -109,21 +113,22 @@ class HiKPI extends React.Component {
|
|
109
113
|
[classes.error]: color === 'error' && !disable,
|
110
114
|
[classes.positive]: color === 'positive' && !disable,
|
111
115
|
[classes.active]: active,
|
112
|
-
[classes.minify]: minify
|
116
|
+
[classes.minify]: minify,
|
117
|
+
[classes.rootDisable]: disable
|
113
118
|
});
|
114
|
-
return React.createElement(
|
115
|
-
in: !minify,
|
116
|
-
timeout: "auto",
|
117
|
-
collapsedHeight: "88px"
|
118
|
-
}, React.createElement(ButtonBase, {
|
119
|
+
return React.createElement(ButtonBase, {
|
119
120
|
className: rootclass,
|
120
121
|
onClick: !disable ? this.handleClick(id) : undefined,
|
121
|
-
title: tooltip
|
122
|
+
title: tooltip,
|
123
|
+
disableRipple: disable
|
122
124
|
}, title && React.createElement("h3", {
|
123
125
|
className: classes.title
|
124
126
|
}, title), React.createElement("div", {
|
125
127
|
className: classes.body
|
126
|
-
}, minify && bodyMinify ? bodyMinify : body),
|
128
|
+
}, minify && bodyMinify ? bodyMinify : body), React.createElement(Collapse, {
|
129
|
+
in: !minify,
|
130
|
+
timeout: 'auto'
|
131
|
+
}, React.createElement("div", {
|
127
132
|
className: classes.subtitle
|
128
133
|
}, subtitle)));
|
129
134
|
}
|
@@ -276,7 +276,8 @@ class HiPaymentMeans extends React.Component {
|
|
276
276
|
theme,
|
277
277
|
translations,
|
278
278
|
type,
|
279
|
-
yearMember
|
279
|
+
yearMember,
|
280
|
+
fallbackImage
|
280
281
|
} = this.props;
|
281
282
|
let formatNumber;
|
282
283
|
|
@@ -308,7 +309,27 @@ class HiPaymentMeans extends React.Component {
|
|
308
309
|
username = `${translations.gender_male} ${cardUser}`;
|
309
310
|
}
|
310
311
|
|
311
|
-
|
312
|
+
let creditDebit = null;
|
313
|
+
|
314
|
+
if (translations.credit && translations.debit) {
|
315
|
+
creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
|
316
|
+
}
|
317
|
+
|
318
|
+
const imgComponent = React.createElement("img", {
|
319
|
+
src: brandLogo,
|
320
|
+
alt: '',
|
321
|
+
className: classNames(classes.logo, {
|
322
|
+
[classes.logoLeft]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0,
|
323
|
+
[classes.logoRight]: ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0
|
324
|
+
}),
|
325
|
+
onError: e => {
|
326
|
+
if (fallbackImage) {
|
327
|
+
e.target.src = `${fallbackImage}`;
|
328
|
+
} else {
|
329
|
+
e.target.style.display = 'none';
|
330
|
+
}
|
331
|
+
}
|
332
|
+
});
|
312
333
|
let cardLayout;
|
313
334
|
|
314
335
|
switch (type) {
|
@@ -328,11 +349,7 @@ class HiPaymentMeans extends React.Component {
|
|
328
349
|
className: classNames(classes.labelLarge, classes.userNameWallet)
|
329
350
|
}, username), React.createElement("span", {
|
330
351
|
className: classNames(classes.stripe, classes.stripeBottomLeft)
|
331
|
-
}, React.createElement("
|
332
|
-
src: brandLogo,
|
333
|
-
alt: '',
|
334
|
-
className: classNames(classes.logo, classes.logoLeft)
|
335
|
-
})), React.createElement("span", {
|
352
|
+
}, imgComponent), React.createElement("span", {
|
336
353
|
className: classNames(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
|
337
354
|
})));
|
338
355
|
break;
|
@@ -346,11 +363,7 @@ class HiPaymentMeans extends React.Component {
|
|
346
363
|
}
|
347
364
|
}, React.createElement("span", {
|
348
365
|
className: classNames(classes.stripe, classes.stripeTopRight)
|
349
|
-
}, React.createElement("
|
350
|
-
src: brandLogo,
|
351
|
-
alt: '',
|
352
|
-
className: classNames(classes.logo, classes.logoRight)
|
353
|
-
})), React.createElement("span", {
|
366
|
+
}, imgComponent), React.createElement("span", {
|
354
367
|
className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
|
355
368
|
}), React.createElement("div", {
|
356
369
|
className: classNames(classes.number, classes.cardNumber)
|
@@ -373,11 +386,7 @@ class HiPaymentMeans extends React.Component {
|
|
373
386
|
}
|
374
387
|
}, React.createElement("span", {
|
375
388
|
className: classNames(classes.stripe, classes.stripeTopRight)
|
376
|
-
}, React.createElement("
|
377
|
-
src: brandLogo,
|
378
|
-
alt: '',
|
379
|
-
className: classNames(classes.logo, classes.logoRight)
|
380
|
-
})), React.createElement("span", {
|
389
|
+
}, imgComponent), React.createElement("span", {
|
381
390
|
className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
|
382
391
|
}, React.createElement("div", {
|
383
392
|
className: classes.corporateLabel,
|
@@ -414,11 +423,7 @@ class HiPaymentMeans extends React.Component {
|
|
414
423
|
}
|
415
424
|
}, React.createElement("span", {
|
416
425
|
className: classNames(classes.stripe, classes.stripeTopLeft)
|
417
|
-
}, React.createElement("
|
418
|
-
src: brandLogo,
|
419
|
-
alt: '',
|
420
|
-
className: classNames(classes.logo, classes.logoLeft)
|
421
|
-
})), React.createElement("span", {
|
426
|
+
}, imgComponent), React.createElement("span", {
|
422
427
|
className: classNames(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
|
423
428
|
}), cardNumber && React.createElement("div", {
|
424
429
|
className: classNames(classes.labelMedium, classes.ibanLabel)
|
@@ -440,11 +445,7 @@ class HiPaymentMeans extends React.Component {
|
|
440
445
|
}
|
441
446
|
}, React.createElement("span", {
|
442
447
|
className: classNames(classes.stripe, classes.stripeTopRight)
|
443
|
-
}, React.createElement("
|
444
|
-
src: brandLogo,
|
445
|
-
alt: '',
|
446
|
-
className: classNames(classes.logo, classes.logoRight)
|
447
|
-
})), React.createElement("span", {
|
448
|
+
}, imgComponent), React.createElement("span", {
|
448
449
|
className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
|
449
450
|
}, React.createElement("img", {
|
450
451
|
src: logoMerchant,
|
@@ -467,11 +468,7 @@ class HiPaymentMeans extends React.Component {
|
|
467
468
|
}
|
468
469
|
}, React.createElement("span", {
|
469
470
|
className: classNames(classes.stripe, classes.stripeTopRight)
|
470
|
-
}, React.createElement("
|
471
|
-
src: brandLogo,
|
472
|
-
alt: '',
|
473
|
-
className: classNames(classes.logo, classes.logoRight)
|
474
|
-
})), React.createElement("span", {
|
471
|
+
}, imgComponent), React.createElement("span", {
|
475
472
|
className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
|
476
473
|
}), React.createElement("div", {
|
477
474
|
className: classNames(classes.number, classes.cardNumber)
|
@@ -579,6 +576,11 @@ HiPaymentMeans.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
579
576
|
*/
|
580
577
|
credit: PropTypes.bool,
|
581
578
|
|
579
|
+
/**
|
580
|
+
* Chemin vers l'image à afficher par défaut si le logo n'est pas trouvé
|
581
|
+
*/
|
582
|
+
fallbackImage: PropTypes.string,
|
583
|
+
|
582
584
|
/**
|
583
585
|
* Logo du moyen de paiement
|
584
586
|
*/
|
package/es/HiSelect/HiSelect.js
CHANGED
@@ -148,6 +148,7 @@ class HiSelect extends React.PureComponent {
|
|
148
148
|
className: classes.selectIconLabel
|
149
149
|
}, React.createElement(HiIcon, {
|
150
150
|
className: classes.labelIcon,
|
151
|
+
color: item.color,
|
151
152
|
icon: item.icon
|
152
153
|
}), item.label);
|
153
154
|
} else if (type === 'image' || item.type === 'image') {
|
@@ -435,6 +436,20 @@ class HiSelect extends React.PureComponent {
|
|
435
436
|
}, '');
|
436
437
|
};
|
437
438
|
|
439
|
+
this.getLengthItemList = itemList => {
|
440
|
+
let itemListLength = 0;
|
441
|
+
itemList.forEach(parent => {
|
442
|
+
if (parent.displayed !== false) {
|
443
|
+
itemListLength += 1;
|
444
|
+
|
445
|
+
if (parent.children) {
|
446
|
+
itemListLength += this.getLengthItemList(parent.children);
|
447
|
+
}
|
448
|
+
}
|
449
|
+
});
|
450
|
+
return itemListLength;
|
451
|
+
};
|
452
|
+
|
438
453
|
this.state = {
|
439
454
|
alertOpen: false,
|
440
455
|
open: false,
|
@@ -444,16 +459,6 @@ class HiSelect extends React.PureComponent {
|
|
444
459
|
openDown: true,
|
445
460
|
overlayWidth: 0
|
446
461
|
};
|
447
|
-
this.handleBlur = this.handleBlur.bind(this);
|
448
|
-
this.handleClick = this.handleClick.bind(this);
|
449
|
-
this.handleClose = this.handleClose.bind(this);
|
450
|
-
this.handleClickAway = this.handleClickAway.bind(this);
|
451
|
-
this.handleFocus = this.handleFocus.bind(this);
|
452
|
-
this.handleSearch = this.handleSearch.bind(this);
|
453
|
-
this.handleSearchReset = this.handleSearchReset.bind(this);
|
454
|
-
this.handleSelect = this.handleSelect.bind(this);
|
455
|
-
this.handleSuggestions = this.handleSuggestions.bind(this);
|
456
|
-
this.getInputElement = this.getInputElement.bind(this);
|
457
462
|
}
|
458
463
|
|
459
464
|
componentDidMount() {
|
@@ -487,20 +492,6 @@ class HiSelect extends React.PureComponent {
|
|
487
492
|
*/
|
488
493
|
|
489
494
|
|
490
|
-
getLengthItemList(itemList) {
|
491
|
-
let itemListLength = 0;
|
492
|
-
itemList.forEach(parent => {
|
493
|
-
if (parent.displayed !== false) {
|
494
|
-
itemListLength += 1;
|
495
|
-
|
496
|
-
if (parent.children) {
|
497
|
-
itemListLength += this.getLengthItemList(parent.children);
|
498
|
-
}
|
499
|
-
}
|
500
|
-
});
|
501
|
-
return itemListLength;
|
502
|
-
}
|
503
|
-
|
504
495
|
render() {
|
505
496
|
const {
|
506
497
|
alert,
|
@@ -525,6 +516,7 @@ class HiSelect extends React.PureComponent {
|
|
525
516
|
searchValue = this.state.searchValue,
|
526
517
|
startAdornment,
|
527
518
|
staticPosition,
|
519
|
+
maxOptionsDisplayed,
|
528
520
|
buildSelectProps = this.buildSelectProps // use parent builder if defined
|
529
521
|
|
530
522
|
} = this.props;
|
@@ -593,7 +585,7 @@ class HiSelect extends React.PureComponent {
|
|
593
585
|
// In case we have a nested list
|
594
586
|
const itemListLength = this.getLengthItemList(itemList); // +1 for search input
|
595
587
|
|
596
|
-
const nbItems = itemListLength <=
|
588
|
+
const nbItems = itemListLength <= maxOptionsDisplayed - 2 ? itemListLength + 1 : maxOptionsDisplayed - 1;
|
597
589
|
popperStyle.transform = `translate3d(-1px, -${nbItems * 40 + 2}px, 0px)`;
|
598
590
|
} else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
|
599
591
|
popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
|
@@ -606,6 +598,8 @@ class HiSelect extends React.PureComponent {
|
|
606
598
|
this.placement = placement;
|
607
599
|
}
|
608
600
|
|
601
|
+
const nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
|
602
|
+
const autoHeightMax = nbItemsDisplayed * 40 - 10;
|
609
603
|
return React.createElement(ClickAwayListener, {
|
610
604
|
onClickAway: this.handleClickAway
|
611
605
|
}, React.createElement(Grow, {
|
@@ -615,13 +609,16 @@ class HiSelect extends React.PureComponent {
|
|
615
609
|
transformOrigin: '0 0 0'
|
616
610
|
}
|
617
611
|
}, React.createElement(Paper, {
|
612
|
+
style: maxOptionsDisplayed < 12 ? {
|
613
|
+
maxHeight: 40 * maxOptionsDisplayed
|
614
|
+
} : {},
|
618
615
|
className: classes.paper
|
619
616
|
}, (this.placement && this.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends({
|
620
617
|
ref: contentEl => {
|
621
618
|
this.optionsContent = contentEl;
|
622
619
|
},
|
623
620
|
autoHeight: true,
|
624
|
-
autoHeightMax:
|
621
|
+
autoHeightMax: autoHeightMax
|
625
622
|
}, onScrollReachBottom && {
|
626
623
|
onScroll: this.handleScroll
|
627
624
|
}), React.createElement(HiSelectableList, _extends({
|
@@ -742,7 +739,8 @@ HiSelect.defaultProps = {
|
|
742
739
|
one_child: '%s item'
|
743
740
|
},
|
744
741
|
type: 'text',
|
745
|
-
filterFunc: filterValue
|
742
|
+
filterFunc: filterValue,
|
743
|
+
maxOptionsDisplayed: 12
|
746
744
|
};
|
747
745
|
HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
748
746
|
/**
|
@@ -826,6 +824,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
826
824
|
*/
|
827
825
|
loading: PropTypes.bool,
|
828
826
|
|
827
|
+
/**
|
828
|
+
* Nombre max d'items affichés
|
829
|
+
*/
|
830
|
+
maxOptionsDisplayed: PropTypes.number,
|
831
|
+
|
829
832
|
/**
|
830
833
|
* Autorise la sélection de plusieurs valeurs
|
831
834
|
*/
|