@hipay/hipay-material-ui 1.0.0-beta.20 → 1.0.0-beta.22
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/HiLoader/HiLoader.js +9 -5
- package/HiSelect/HiSelect.js +47 -12
- package/HiSelect/HiSuggestSelect.js +35 -5
- package/HiSelectableList/HiSelectableListItem.js +30 -37
- package/HiTable/HeaderCell.js +55 -49
- package/HiTable/HiTable.js +4 -14
- package/HiTable/HiTableHead.js +4 -6
- package/HiTopBar/HiTopBar.js +10 -3
- package/es/HiLoader/HiLoader.js +9 -5
- package/es/HiSelect/HiSelect.js +41 -10
- package/es/HiSelect/HiSuggestSelect.js +33 -5
- package/es/HiSelectableList/HiSelectableListItem.js +30 -37
- package/es/HiTable/HeaderCell.js +64 -59
- package/es/HiTable/HiTable.js +4 -14
- package/es/HiTable/HiTableHead.js +4 -6
- package/es/HiTopBar/HiTopBar.js +11 -4
- package/es/utils/hiHelpers.js +3 -3
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/umd/hipay-material-ui.development.js +204 -143
- package/umd/hipay-material-ui.production.min.js +4 -4
- package/utils/hiHelpers.js +3 -3
package/es/HiLoader/HiLoader.js
CHANGED
@@ -8,11 +8,15 @@ export const styles = () => ({});
|
|
8
8
|
function HiLoader(props) {
|
9
9
|
const { theme, loading } = props;
|
10
10
|
|
11
|
-
return React.createElement(
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
11
|
+
return React.createElement(
|
12
|
+
'div',
|
13
|
+
{ id: 'hi-loader' },
|
14
|
+
React.createElement(PropagateLoader, {
|
15
|
+
loading: loading,
|
16
|
+
size: 12,
|
17
|
+
color: theme.palette.business.primary.normal
|
18
|
+
})
|
19
|
+
);
|
16
20
|
}
|
17
21
|
|
18
22
|
HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {
|
package/es/HiSelect/HiSelect.js
CHANGED
@@ -28,7 +28,7 @@ export const styles = theme => ({
|
|
28
28
|
},
|
29
29
|
popper: {
|
30
30
|
width: '100%',
|
31
|
-
zIndex:
|
31
|
+
zIndex: 1200
|
32
32
|
},
|
33
33
|
paper: {
|
34
34
|
borderRadius: '0px 2px',
|
@@ -94,6 +94,11 @@ class HiSelect extends React.PureComponent {
|
|
94
94
|
valueInOptions = true;
|
95
95
|
}
|
96
96
|
});
|
97
|
+
if (!valueInOptions && props.pinnedItem) {
|
98
|
+
if (props.value.indexOf(props.pinnedItem.id) >= 0) {
|
99
|
+
valueInOptions = true;
|
100
|
+
}
|
101
|
+
}
|
97
102
|
}
|
98
103
|
|
99
104
|
if (!valueInOptions) {
|
@@ -216,7 +221,8 @@ class HiSelect extends React.PureComponent {
|
|
216
221
|
hierarchic,
|
217
222
|
id,
|
218
223
|
placeholder,
|
219
|
-
staticPosition
|
224
|
+
staticPosition,
|
225
|
+
pinnedItem
|
220
226
|
} = this.props;
|
221
227
|
|
222
228
|
const { open, suggestions, focused } = this.state;
|
@@ -224,6 +230,11 @@ class HiSelect extends React.PureComponent {
|
|
224
230
|
let display = '';
|
225
231
|
const selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
|
226
232
|
|
233
|
+
let _suggestions = [...suggestions];
|
234
|
+
if (pinnedItem) {
|
235
|
+
_suggestions = [pinnedItem, ...suggestions];
|
236
|
+
}
|
237
|
+
|
227
238
|
if (this.state.dynamic && selectedIdList.length === 1) {
|
228
239
|
display = translations.one_item_selected.replace('%s', selectedIdList.length);
|
229
240
|
} else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
|
@@ -232,7 +243,11 @@ class HiSelect extends React.PureComponent {
|
|
232
243
|
display = translations.all;
|
233
244
|
} else if (selectedIdList.length === 1) {
|
234
245
|
if (type !== 'icon') {
|
235
|
-
|
246
|
+
let item = options.find(o => o.id === selectedIdList[0]);
|
247
|
+
if (!item && pinnedItem) {
|
248
|
+
item = pinnedItem;
|
249
|
+
}
|
250
|
+
display = item.label;
|
236
251
|
} else {
|
237
252
|
const optionSelected = options.find(o => o.id === selectedIdList[0]);
|
238
253
|
display = React.createElement(
|
@@ -289,7 +304,7 @@ class HiSelect extends React.PureComponent {
|
|
289
304
|
React.createElement(HiSelectableList, {
|
290
305
|
type: type,
|
291
306
|
parentItemSelectable: parentItemSelectable,
|
292
|
-
itemList:
|
307
|
+
itemList: _suggestions,
|
293
308
|
onSelect: this.handleSelect,
|
294
309
|
selectedIdList: selectedIdList,
|
295
310
|
checkbox: checkbox,
|
@@ -395,7 +410,7 @@ var _initialiseProps = function () {
|
|
395
410
|
this.handleClose();
|
396
411
|
} else {
|
397
412
|
if (!this.props.staticPosition) {
|
398
|
-
document.body.style.overflow = 'hidden';
|
413
|
+
//document.body.style.overflow = 'hidden';
|
399
414
|
}
|
400
415
|
this.setState({ open: true });
|
401
416
|
const options = this.props.options.slice();
|
@@ -459,7 +474,7 @@ var _initialiseProps = function () {
|
|
459
474
|
nextItem = getNextItemSelectable(document.activeElement, 'up');
|
460
475
|
} else if (event.key === 'Tab') {
|
461
476
|
if (!this.props.staticPosition) {
|
462
|
-
document.body.style.overflow = 'auto';
|
477
|
+
//document.body.style.overflow = 'auto';
|
463
478
|
}
|
464
479
|
this.setState({ open: false });
|
465
480
|
}
|
@@ -484,7 +499,7 @@ var _initialiseProps = function () {
|
|
484
499
|
|
485
500
|
this.handleClose = () => {
|
486
501
|
if (!this.props.staticPosition) {
|
487
|
-
document.body.style.overflow = 'auto';
|
502
|
+
//document.body.style.overflow = 'auto';
|
488
503
|
}
|
489
504
|
this.setState({
|
490
505
|
open: false
|
@@ -506,7 +521,7 @@ var _initialiseProps = function () {
|
|
506
521
|
};
|
507
522
|
|
508
523
|
this.handleSelect = (event, item) => {
|
509
|
-
const { multiple, value,
|
524
|
+
const { multiple, value, onChange, options, hierarchic, pinnedItem } = this.props;
|
510
525
|
const { hierarchySelected, hierarchy, nbOptions } = this.state;
|
511
526
|
const hiSelected = _extends({}, hierarchySelected);
|
512
527
|
|
@@ -551,8 +566,20 @@ var _initialiseProps = function () {
|
|
551
566
|
hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
|
552
567
|
}
|
553
568
|
} else {
|
554
|
-
|
555
|
-
|
569
|
+
if (pinnedItem && item.id === pinnedItem.id) {
|
570
|
+
_Object$keys(hiSelected).map(parentItemId => {
|
571
|
+
hiSelected[parentItemId] = [];
|
572
|
+
return true;
|
573
|
+
});
|
574
|
+
valueList = [item.id];
|
575
|
+
} else {
|
576
|
+
// item non sélectionné => on le sélectionne
|
577
|
+
if (item.hasChildren !== true) valueList.push(item.id);
|
578
|
+
|
579
|
+
if (pinnedItem && valueList.includes(pinnedItem.id)) {
|
580
|
+
valueList.splice(valueList.indexOf(pinnedItem.id), 1);
|
581
|
+
}
|
582
|
+
}
|
556
583
|
|
557
584
|
if (item.hasChildren === true) {
|
558
585
|
// Si item parent => on ajoute tous les enfants
|
@@ -735,6 +762,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
735
762
|
* Les items parents sont sélectionnables
|
736
763
|
*/
|
737
764
|
parentItemSelectable: PropTypes.bool,
|
765
|
+
/**
|
766
|
+
* Item épinglé en début de liste
|
767
|
+
*/
|
768
|
+
pinnedItem: PropTypes.object,
|
738
769
|
/**
|
739
770
|
* Placeholder affiché lorsque le select est fermé
|
740
771
|
* Surcharge le placeholder par défaut
|
@@ -116,11 +116,25 @@ class HiSuggestSelect extends React.PureComponent {
|
|
116
116
|
|
117
117
|
render() {
|
118
118
|
const _props = this.props,
|
119
|
-
{ classes,
|
120
|
-
otherProps = _objectWithoutProperties(_props, ['classes', '
|
119
|
+
{ classes, id, showMinLength, showNoResults, onSearch, translations } = _props,
|
120
|
+
otherProps = _objectWithoutProperties(_props, ['classes', 'id', 'showMinLength', 'showNoResults', 'onSearch', 'translations']);
|
121
121
|
|
122
122
|
const { focused, options } = this.state;
|
123
|
-
|
123
|
+
|
124
|
+
let optionsShown = options;
|
125
|
+
|
126
|
+
// If no results match
|
127
|
+
if (options.length === 0 && (showNoResults || showMinLength)) {
|
128
|
+
optionsShown = [{
|
129
|
+
id: '_no_result',
|
130
|
+
type: 'text',
|
131
|
+
disabled: true,
|
132
|
+
centered: true,
|
133
|
+
checkbox: false,
|
134
|
+
label: showNoResults ? translations.no_result_match : translations.min_length
|
135
|
+
}];
|
136
|
+
}
|
137
|
+
const open = !!optionsShown.length && focused;
|
124
138
|
|
125
139
|
return React.createElement(
|
126
140
|
'div',
|
@@ -137,6 +151,7 @@ class HiSuggestSelect extends React.PureComponent {
|
|
137
151
|
Target,
|
138
152
|
null,
|
139
153
|
React.createElement(HiInput, _extends({}, otherProps, {
|
154
|
+
|
140
155
|
inputId: id,
|
141
156
|
focused: focused,
|
142
157
|
inputRef: input => {
|
@@ -162,7 +177,7 @@ class HiSuggestSelect extends React.PureComponent {
|
|
162
177
|
Paper,
|
163
178
|
{ className: classes.paper },
|
164
179
|
React.createElement(HiSelectableList, {
|
165
|
-
itemList:
|
180
|
+
itemList: optionsShown,
|
166
181
|
selectedIdList: [],
|
167
182
|
checkbox: false,
|
168
183
|
onSelect: this.handleSelect,
|
@@ -178,7 +193,12 @@ class HiSuggestSelect extends React.PureComponent {
|
|
178
193
|
}
|
179
194
|
|
180
195
|
HiSuggestSelect.defaultProps = {
|
181
|
-
|
196
|
+
showMinLength: false,
|
197
|
+
showNoResults: false,
|
198
|
+
translations: {
|
199
|
+
no_result_match: 'No result match',
|
200
|
+
min_length: 'Veuillez saisir 3 caractères minimum'
|
201
|
+
},
|
182
202
|
options: []
|
183
203
|
};
|
184
204
|
HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
@@ -202,6 +222,14 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
202
222
|
* Liste de suggestions.
|
203
223
|
*/
|
204
224
|
options: PropTypes.array,
|
225
|
+
/**
|
226
|
+
* Permet d'afficher un message si pas assez de caractères
|
227
|
+
*/
|
228
|
+
showMinLength: PropTypes.bool,
|
229
|
+
/**
|
230
|
+
* Permet d'afficher un message si aucune options n'est présente
|
231
|
+
*/
|
232
|
+
showNoResults: PropTypes.bool,
|
205
233
|
/**
|
206
234
|
* Traductions (par défaut en anglais)
|
207
235
|
*/
|
@@ -295,51 +295,44 @@ class HiSelectableListItem extends React.Component {
|
|
295
295
|
listItemProps.button = false;
|
296
296
|
}
|
297
297
|
|
298
|
-
let iconAll;
|
299
|
-
if (item.id === '_all' && item.icon) {
|
300
|
-
iconAll = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
|
301
|
-
}
|
302
|
-
|
303
298
|
// calcul du padding left
|
304
299
|
let paddingLeft = 0;
|
305
300
|
|
306
301
|
if (leftPadding) {
|
307
302
|
paddingLeft = leftPadding;
|
308
|
-
} else {
|
309
|
-
// Si pas de hiérarchie, padding de 8px
|
310
|
-
if (!
|
311
|
-
|
312
|
-
|
303
|
+
} else if (!hierarchic) {
|
304
|
+
// Si pas de hiérarchie et sans checkbox, padding de 8px
|
305
|
+
if (!effectiveCheckbox) {
|
306
|
+
paddingLeft = 8;
|
307
|
+
}
|
308
|
+
} else if (selectable) {
|
309
|
+
// Si item selectionnable
|
310
|
+
// Si parent selectionnable
|
311
|
+
if (parentItemSelectable) {
|
312
|
+
// Si l'item contient une checkbox
|
313
|
+
if (effectiveCheckbox) {
|
314
|
+
paddingLeft = 16 * level;
|
315
|
+
} else {
|
316
|
+
paddingLeft = 16 * (level + 1);
|
313
317
|
}
|
314
|
-
} else if (
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
if (effectiveCheckbox) {
|
320
|
-
paddingLeft = 16 * level;
|
321
|
-
} else {
|
322
|
-
paddingLeft = 16 * (level + 1);
|
323
|
-
}
|
324
|
-
} else if (level > 0) {
|
325
|
-
if (effectiveCheckbox) {
|
326
|
-
paddingLeft = 16 * (level - 1);
|
327
|
-
} else {
|
328
|
-
paddingLeft = 16 * level;
|
329
|
-
}
|
330
|
-
} else if (!effectiveCheckbox) {
|
331
|
-
if (item.id === '_all') {
|
332
|
-
paddingLeft = 16;
|
333
|
-
} else {
|
334
|
-
paddingLeft = 16 * level;
|
335
|
-
}
|
318
|
+
} else if (level > 0) {
|
319
|
+
if (effectiveCheckbox) {
|
320
|
+
paddingLeft = 16 * (level - 1);
|
321
|
+
} else {
|
322
|
+
paddingLeft = 16 * level;
|
336
323
|
}
|
337
|
-
} else {
|
338
|
-
|
339
|
-
|
324
|
+
} else if (!effectiveCheckbox) {
|
325
|
+
if (item.id === '_all') {
|
326
|
+
paddingLeft = 16;
|
327
|
+
} else {
|
340
328
|
paddingLeft = 16 * level;
|
341
329
|
}
|
342
330
|
}
|
331
|
+
} else {
|
332
|
+
paddingLeft = 16; // Padding de 16 par défaut
|
333
|
+
if (level > 0) {
|
334
|
+
paddingLeft = 16 * level;
|
335
|
+
}
|
343
336
|
}
|
344
337
|
|
345
338
|
listItemProps.style = { paddingLeft: `${paddingLeft}px` };
|
@@ -349,8 +342,8 @@ class HiSelectableListItem extends React.Component {
|
|
349
342
|
iconDisplay = hoverIcon;
|
350
343
|
} else if (item.hasChildren) {
|
351
344
|
iconDisplay = parentIcon;
|
352
|
-
} else if (item.
|
353
|
-
iconDisplay =
|
345
|
+
} else if (item.type === 'icon' && item.icon) {
|
346
|
+
iconDisplay = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
|
354
347
|
}
|
355
348
|
|
356
349
|
return React.createElement(
|
package/es/HiTable/HeaderCell.js
CHANGED
@@ -7,7 +7,6 @@ import ButtonBase from 'material-ui/ButtonBase';
|
|
7
7
|
import FilterVariantIcon from 'mdi-material-ui/FilterVariant';
|
8
8
|
import MenuIcon from 'mdi-material-ui/Menu';
|
9
9
|
import ArrowDownwardIcon from '../svg-icons/ArrowDownward';
|
10
|
-
|
11
10
|
import HiCheckbox from '../HiCheckbox';
|
12
11
|
import { withStyles, withTheme } from '../styles';
|
13
12
|
import ColumnFilter from './ColumnFilter';
|
@@ -71,7 +70,7 @@ export const styles = theme => ({
|
|
71
70
|
transform: 'scale(1,-1)'
|
72
71
|
},
|
73
72
|
lookedUp: {
|
74
|
-
background:
|
73
|
+
background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
|
75
74
|
borderRadius: '45%'
|
76
75
|
}
|
77
76
|
});
|
@@ -96,7 +95,7 @@ class HeaderCell extends React.PureComponent {
|
|
96
95
|
|
97
96
|
this.onFilterClick = this.onFilterClick.bind(this);
|
98
97
|
this.openFilterMenu = this.openFilterMenu.bind(this);
|
99
|
-
this.
|
98
|
+
this.handleClose = this.handleClose.bind(this);
|
100
99
|
this.handleSort = this.handleSort.bind(this);
|
101
100
|
this.handleFilterChange = this.handleFilterChange.bind(this);
|
102
101
|
}
|
@@ -109,7 +108,7 @@ class HeaderCell extends React.PureComponent {
|
|
109
108
|
});
|
110
109
|
}
|
111
110
|
|
112
|
-
|
111
|
+
handleClose() {
|
113
112
|
this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
|
114
113
|
}
|
115
114
|
|
@@ -146,36 +145,37 @@ class HeaderCell extends React.PureComponent {
|
|
146
145
|
align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
|
147
146
|
sticky,
|
148
147
|
padding,
|
149
|
-
lookedUp
|
148
|
+
lookedUp,
|
149
|
+
translations
|
150
150
|
} = this.props;
|
151
151
|
|
152
152
|
const { filterOpen, anchorEl, menuFilters } = this.state;
|
153
153
|
|
154
|
-
|
154
|
+
const offset = selectable ? dense ? 32 : 40 : padding;
|
155
155
|
|
156
156
|
// Inclue le padding et/ou la checkbox dans la largeur de la cellule
|
157
|
-
|
157
|
+
const _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
|
158
158
|
// N'affiche pas le tri si il est désactivé.
|
159
|
-
|
159
|
+
const _sorted = sortable && sorted;
|
160
160
|
// N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
|
161
|
-
|
161
|
+
const _filterable = filterable && typeof filterSource !== 'undefined' && filterSource.length > 0;
|
162
162
|
|
163
163
|
// La bordure n'est pas défini en css car elle s'appliquerait
|
164
164
|
// sur le background et ne supporterait pas le scroll horizontal.
|
165
|
-
|
165
|
+
const sortedBorderElement = _sorted ? React.createElement('div', {
|
166
166
|
className: classes.sortedBorder,
|
167
167
|
style: { marginLeft: offset, marginRight: padding }
|
168
168
|
}) : null;
|
169
169
|
|
170
170
|
const sortIconClassName = classNames(classes.icon, classes.primary, {
|
171
|
-
[classes[
|
171
|
+
[classes[`sort${sortDirection}`]]: !!sortDirection
|
172
172
|
});
|
173
173
|
|
174
174
|
const filterIconClassName = classNames(classes.icon, classes.primary, {
|
175
|
-
[classes[
|
175
|
+
[classes[`filter${sortDirection}`]]: !!sortDirection
|
176
176
|
});
|
177
177
|
|
178
|
-
|
178
|
+
const _icons = _filterable || sortable ? _filterable ? _sorted ? React.createElement(FilterVariantIcon, { className: filterIconClassName }) : React.createElement(MenuIcon, { className: classes.icon }) : _sorted && React.createElement(ArrowDownwardIcon, { className: sortIconClassName }) : '';
|
179
179
|
|
180
180
|
const lookedUpClassName = classNames({ [classes.lookedUp]: lookedUp });
|
181
181
|
|
@@ -237,9 +237,9 @@ class HeaderCell extends React.PureComponent {
|
|
237
237
|
React.createElement(
|
238
238
|
'span',
|
239
239
|
{
|
240
|
-
className: classes.labelContainer + (_sorted ?
|
240
|
+
className: classes.labelContainer + (_sorted ? ` ${classes.labelContainerOrdered}` : '')
|
241
241
|
},
|
242
|
-
view !== 's' ? title : smallTitle
|
242
|
+
view !== 's' ? title : smallTitle || title
|
243
243
|
),
|
244
244
|
align !== 'right' && _icons
|
245
245
|
) : React.createElement(
|
@@ -256,7 +256,7 @@ class HeaderCell extends React.PureComponent {
|
|
256
256
|
React.createElement(
|
257
257
|
'span',
|
258
258
|
{ className: classes.labelContainer, style: { width: '100%' } },
|
259
|
-
view !== 's' ? title : smallTitle
|
259
|
+
view !== 's' ? title : smallTitle || title
|
260
260
|
)
|
261
261
|
)
|
262
262
|
),
|
@@ -267,11 +267,12 @@ class HeaderCell extends React.PureComponent {
|
|
267
267
|
title: title,
|
268
268
|
filterValueList: menuFilters,
|
269
269
|
isOpen: filterOpen,
|
270
|
-
onClose: this.
|
270
|
+
onClose: this.handleClose,
|
271
271
|
anchorEl: anchorEl,
|
272
272
|
sortable: sortable,
|
273
273
|
onSort: this.handleSort,
|
274
|
-
onFilterChange: this.handleFilterChange
|
274
|
+
onFilterChange: this.handleFilterChange,
|
275
|
+
translations: translations.columnFilter
|
275
276
|
})
|
276
277
|
);
|
277
278
|
}
|
@@ -290,18 +291,50 @@ HeaderCell.defaultProps = {
|
|
290
291
|
padding: 8
|
291
292
|
};
|
292
293
|
HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
|
294
|
+
/**
|
295
|
+
* Title alignement, est déduit de type par défaut
|
296
|
+
*/
|
297
|
+
align: PropTypes.string,
|
293
298
|
/**
|
294
299
|
* Useful to extend the style applied to components.
|
295
300
|
*/
|
296
301
|
classes: PropTypes.object,
|
302
|
+
/**
|
303
|
+
* Densité, défini la hauteur de la ligne
|
304
|
+
*/
|
305
|
+
dense: PropTypes.bool,
|
306
|
+
/**
|
307
|
+
* Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
|
308
|
+
*/
|
309
|
+
filterable: PropTypes.bool,
|
310
|
+
/**
|
311
|
+
* Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
|
312
|
+
*/
|
313
|
+
filterSource: PropTypes.array,
|
314
|
+
/**
|
315
|
+
* La largeur de la cellule est fixé (toutes les colonnes sauf une)
|
316
|
+
*/
|
317
|
+
fixedColumnWidth: PropTypes.bool,
|
297
318
|
/**
|
298
319
|
* Recherche lookup sur cette colonne
|
299
320
|
*/
|
300
321
|
lookedUp: PropTypes.bool,
|
322
|
+
/**
|
323
|
+
* Padding de la cellule (px)
|
324
|
+
*/
|
325
|
+
padding: PropTypes.number,
|
326
|
+
/**
|
327
|
+
* Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
|
328
|
+
*/
|
329
|
+
onFilterChange: PropTypes.func,
|
301
330
|
/**
|
302
331
|
* Fonction de callback au click du select
|
303
332
|
*/
|
304
333
|
onSelect: PropTypes.func,
|
334
|
+
/**
|
335
|
+
* Fonction de callback au tri - passe la direction du tri
|
336
|
+
*/
|
337
|
+
onSort: PropTypes.func,
|
305
338
|
/**
|
306
339
|
* Ajoute une checkbox
|
307
340
|
*/
|
@@ -314,69 +347,41 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
314
347
|
* Titre condensé
|
315
348
|
*/
|
316
349
|
smallTitle: PropTypes.string,
|
317
|
-
/**
|
318
|
-
* Titre de la colonne
|
319
|
-
*/
|
320
|
-
title: PropTypes.string.isRequired,
|
321
|
-
/**
|
322
|
-
* Type de cellule
|
323
|
-
*/
|
324
|
-
type: PropTypes.string.isRequired,
|
325
350
|
/**
|
326
351
|
* Ajoute la fonction de tri au click sur le label & dans le ColumnFilter
|
327
352
|
*/
|
328
353
|
sortable: PropTypes.bool,
|
329
|
-
/**
|
330
|
-
* Tri actif / inactif
|
331
|
-
*/
|
332
|
-
sorted: PropTypes.bool,
|
333
354
|
/**
|
334
355
|
* Sens du tri
|
335
356
|
*/
|
336
357
|
sortDirection: PropTypes.oneOf(['asc', 'desc']),
|
337
358
|
/**
|
338
|
-
*
|
359
|
+
* Tri actif / inactif
|
339
360
|
*/
|
340
|
-
|
361
|
+
sorted: PropTypes.bool,
|
341
362
|
/**
|
342
|
-
*
|
363
|
+
* True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
|
343
364
|
*/
|
344
|
-
|
365
|
+
sticky: PropTypes.bool,
|
345
366
|
/**
|
346
|
-
*
|
367
|
+
* Titre de la colonne
|
347
368
|
*/
|
348
|
-
|
369
|
+
title: PropTypes.string.isRequired,
|
349
370
|
/**
|
350
|
-
*
|
371
|
+
* Traduction des chaînes affichées
|
351
372
|
*/
|
352
|
-
|
373
|
+
translations: PropTypes.object,
|
353
374
|
/**
|
354
|
-
*
|
375
|
+
* Type de cellule
|
355
376
|
*/
|
356
|
-
|
377
|
+
type: PropTypes.string.isRequired,
|
357
378
|
/**
|
358
|
-
*
|
379
|
+
* View (L/M/S)
|
359
380
|
*/
|
360
|
-
|
381
|
+
view: PropTypes.oneOf(['l', 'm', 's']),
|
361
382
|
/**
|
362
383
|
* Largeur de la cellule (hors padding), est déduit de view par défaut
|
363
384
|
*/
|
364
|
-
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
365
|
-
/**
|
366
|
-
* La largeur de la cellule est fixé (toutes les colonnes sauf une)
|
367
|
-
*/
|
368
|
-
fixedColumnWidth: PropTypes.bool,
|
369
|
-
/**
|
370
|
-
* Title alignement, est déduit de type par défaut
|
371
|
-
*/
|
372
|
-
align: PropTypes.string,
|
373
|
-
/**
|
374
|
-
* True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
|
375
|
-
*/
|
376
|
-
sticky: PropTypes.bool,
|
377
|
-
/**
|
378
|
-
* Padding de la cellule (px)
|
379
|
-
*/
|
380
|
-
padding: PropTypes.number
|
385
|
+
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
381
386
|
} : {};
|
382
387
|
export default withStyles(styles, { withTheme: true, name: 'HmuiHeaderCell' })(HeaderCell);
|
package/es/HiTable/HiTable.js
CHANGED
@@ -639,7 +639,7 @@ class HiTable extends React.Component {
|
|
639
639
|
height: headerHeight,
|
640
640
|
sticky: sticky,
|
641
641
|
view: view,
|
642
|
-
translations: translations,
|
642
|
+
translations: translations.tableHead,
|
643
643
|
lookupColumns: lookupColumns,
|
644
644
|
fixedColumnWidth: fixedColumnWidth
|
645
645
|
}),
|
@@ -662,7 +662,7 @@ class HiTable extends React.Component {
|
|
662
662
|
onRowClick: onRowClick,
|
663
663
|
onScroll: this.handleVerticalScroll,
|
664
664
|
addNewRowRefs: this.addNewRowRefs,
|
665
|
-
translations: translations,
|
665
|
+
translations: translations.tableBody,
|
666
666
|
groupBy: groupBy,
|
667
667
|
onClickNext: this.handleNextStickyRow,
|
668
668
|
groupByIds: groupByIds,
|
@@ -678,7 +678,7 @@ class HiTable extends React.Component {
|
|
678
678
|
requestNextDatas: requestNextDatas,
|
679
679
|
maxAutoRequest: 3,
|
680
680
|
isScrollToBottom: isScrollToBottom,
|
681
|
-
translations: translations
|
681
|
+
translations: translations.tableFooterScroll
|
682
682
|
}),
|
683
683
|
!infiniteScroll && footerContent && React.createElement(
|
684
684
|
HiTableFooter,
|
@@ -731,17 +731,7 @@ HiTable.defaultProps = {
|
|
731
731
|
height: 450,
|
732
732
|
sticky: true,
|
733
733
|
translations: {
|
734
|
-
|
735
|
-
back_to_top: 'Back to top',
|
736
|
-
get_the_n_new_items: 'See %s new items',
|
737
|
-
choose_and_organize_columns: 'Choose & organize columns',
|
738
|
-
search: 'Search',
|
739
|
-
time: 'Time',
|
740
|
-
stickyRow: {
|
741
|
-
button: {
|
742
|
-
next: 'Next day'
|
743
|
-
}
|
744
|
-
}
|
734
|
+
back_to_top: 'Back to top'
|
745
735
|
},
|
746
736
|
view: 'l',
|
747
737
|
lookupColumns: [],
|
@@ -228,7 +228,8 @@ class HiTableHead extends React.Component {
|
|
228
228
|
align: column['align'],
|
229
229
|
sticky: firstColumn && sticky,
|
230
230
|
lookedUp: lookupColumns.includes(column.colId),
|
231
|
-
fixedColumnWidth: fixedColumnWidth
|
231
|
+
fixedColumnWidth: fixedColumnWidth,
|
232
|
+
translations: translations.headerCell
|
232
233
|
});
|
233
234
|
}
|
234
235
|
}),
|
@@ -262,7 +263,7 @@ class HiTableHead extends React.Component {
|
|
262
263
|
columns: columns,
|
263
264
|
orderedColumns: orderedColumns,
|
264
265
|
mandatoryColumnId: mandatoryColumnId,
|
265
|
-
translations: translations
|
266
|
+
translations: translations.orderColumns
|
266
267
|
})
|
267
268
|
)
|
268
269
|
),
|
@@ -304,10 +305,7 @@ HiTableHead.defaultProps = {
|
|
304
305
|
dense: false,
|
305
306
|
sticky: true,
|
306
307
|
translations: {
|
307
|
-
get_the_n_new_items: 'Get the %s new items'
|
308
|
-
choose_and_organize_columns: 'Choose & organize columns',
|
309
|
-
search: 'Search',
|
310
|
-
time: 'Time'
|
308
|
+
get_the_n_new_items: 'Get the %s new items'
|
311
309
|
},
|
312
310
|
view: 'l'
|
313
311
|
};
|