@hipay/hipay-material-ui 1.0.0-beta.7 → 1.0.0-beta.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/HiBreadcrumb/HiBreadcrumb.js +143 -0
  2. package/HiBreadcrumb/HiStep.js +123 -0
  3. package/HiBreadcrumb/HiStepConnector.js +142 -0
  4. package/HiBreadcrumb/HiStepIcon.js +134 -0
  5. package/HiBreadcrumb/HiStepLabel.js +182 -0
  6. package/HiBreadcrumb/HiStepper.js +125 -0
  7. package/HiBreadcrumb/index.js +16 -0
  8. package/HiDatePicker/HiDateRangeSelector.js +1 -1
  9. package/HiDotsStepper/HiDot.js +151 -0
  10. package/HiDotsStepper/HiDotsStepper.js +146 -0
  11. package/HiDotsStepper/index.js +16 -0
  12. package/HiForm/HiAddressField.js +204 -0
  13. package/HiForm/HiFormControl.js +19 -27
  14. package/HiForm/HiInput.js +1 -1
  15. package/HiForm/HiSearchField.js +1 -1
  16. package/HiForm/index.js +9 -0
  17. package/HiPdfReader/HiPdfReader.js +282 -0
  18. package/HiPdfReader/index.js +16 -0
  19. package/HiPins/HiPins.js +0 -1
  20. package/HiSelect/HiSuggestSelect.js +2 -0
  21. package/HiSelectableList/HiSelectableListItem.js +23 -11
  22. package/HiTable/BodyCellBuilder.js +7 -8
  23. package/HiTable/BodyCells/CellLayout.js +25 -19
  24. package/HiTable/BodyCells/CellSentinel.js +12 -4
  25. package/HiTable/BodyCells/CellStatus.js +5 -1
  26. package/HiTable/BodyCells/CellText.js +2 -1
  27. package/HiTable/BodyRow.js +7 -1
  28. package/HiTable/ColumnFilter.js +5 -1
  29. package/HiTable/HeaderCell.js +17 -14
  30. package/HiTable/HiTable.js +25 -9
  31. package/HiTable/HiTableBody.js +38 -14
  32. package/HiTable/HiTableHead.js +22 -5
  33. package/HiTable/OrderColumns.js +6 -2
  34. package/es/HiBreadcrumb/HiBreadcrumb.js +73 -0
  35. package/es/HiBreadcrumb/HiStep.js +93 -0
  36. package/es/HiBreadcrumb/HiStepConnector.js +83 -0
  37. package/es/HiBreadcrumb/HiStepIcon.js +81 -0
  38. package/es/HiBreadcrumb/HiStepLabel.js +154 -0
  39. package/es/HiBreadcrumb/HiStepper.js +62 -0
  40. package/es/HiBreadcrumb/index.js +1 -0
  41. package/es/HiDatePicker/HiDateRangeSelector.js +1 -1
  42. package/es/HiDotsStepper/HiDot.js +92 -0
  43. package/es/HiDotsStepper/HiDotsStepper.js +83 -0
  44. package/es/HiDotsStepper/index.js +1 -0
  45. package/es/HiForm/HiAddressField.js +142 -0
  46. package/es/HiForm/HiFormControl.js +15 -15
  47. package/es/HiForm/HiInput.js +1 -1
  48. package/es/HiForm/HiSearchField.js +1 -1
  49. package/es/HiForm/index.js +2 -1
  50. package/es/HiPdfReader/HiPdfReader.js +198 -0
  51. package/es/HiPdfReader/index.js +1 -0
  52. package/es/HiPins/HiPins.js +0 -1
  53. package/es/HiSelect/HiSuggestSelect.js +2 -0
  54. package/es/HiSelectableList/HiSelectableListItem.js +22 -11
  55. package/es/HiTable/BodyCellBuilder.js +8 -9
  56. package/es/HiTable/BodyCells/CellLayout.js +27 -21
  57. package/es/HiTable/BodyCells/CellSentinel.js +12 -4
  58. package/es/HiTable/BodyCells/CellStatus.js +5 -1
  59. package/es/HiTable/BodyCells/CellText.js +2 -1
  60. package/es/HiTable/BodyRow.js +7 -1
  61. package/es/HiTable/ColumnFilter.js +5 -1
  62. package/es/HiTable/HeaderCell.js +17 -14
  63. package/es/HiTable/HiTable.js +25 -9
  64. package/es/HiTable/HiTableBody.js +34 -11
  65. package/es/HiTable/HiTableHead.js +17 -5
  66. package/es/HiTable/OrderColumns.js +6 -2
  67. package/es/styles/createHiMuiTheme.js +7 -0
  68. package/index.es.js +1 -1
  69. package/index.js +1 -1
  70. package/package.json +2 -1
  71. package/styles/createHiMuiTheme.js +7 -0
  72. package/umd/hipay-material-ui.development.js +2965 -2659
  73. package/umd/hipay-material-ui.production.min.js +4 -4
@@ -79,7 +79,8 @@ var styles = exports.styles = function styles(theme) {
79
79
  return {
80
80
  listItem: {
81
81
  padding: 9 + 'px 0px',
82
- fontWeight: theme.typography.fontWeightRegular
82
+ fontWeight: theme.typography.fontWeightRegular,
83
+ maxHeight: 40
83
84
  },
84
85
  listItemTitle: {
85
86
  padding: 9 + 'px 0px',
@@ -170,6 +171,11 @@ var styles = exports.styles = function styles(theme) {
170
171
  color: '#000000'
171
172
  }
172
173
  },
174
+ labelHighlightColored: {
175
+ '&>strong': {
176
+ fontWeight: theme.typography.fontWeightMedium
177
+ }
178
+ },
173
179
  primaryHighlight: {
174
180
  fontWeight: theme.typography.fontWeightMedium,
175
181
  color: theme.palette.business.primary.normal,
@@ -229,8 +235,7 @@ var HiSelectableListItem = function (_React$Component) {
229
235
  case 'image':
230
236
  var img = '';
231
237
  if (typeof item.img !== 'undefined') {
232
-
233
- img = _react2.default.createElement('img', { src: item.img, className: classes.imgListItem });
238
+ img = _react2.default.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
234
239
  }
235
240
 
236
241
  return _react2.default.createElement(
@@ -261,13 +266,7 @@ var HiSelectableListItem = function (_React$Component) {
261
266
  return _react2.default.createElement(
262
267
  'div',
263
268
  { className: itemTextClass, 'data-id': item.id },
264
- item.labelHighlight && _react2.default.createElement('span', {
265
- className: classes.labelHighlight,
266
- dangerouslySetInnerHTML: {
267
- __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
268
- }
269
- }),
270
- !item.labelHighlight && _this.getItemLabel(item),
269
+ _this.getItemLabel(item),
271
270
  _react2.default.createElement(
272
271
  'span',
273
272
  { className: classes.listItemSecondaryText },
@@ -295,8 +294,21 @@ var HiSelectableListItem = function (_React$Component) {
295
294
  }, {
296
295
  key: 'getItemLabel',
297
296
  value: function getItemLabel(item) {
298
- if (item.color) {
297
+ var classes = this.props.classes;
298
+
299
+ if (!item.labelHighlight && item.color && this.props.selected) {
299
300
  return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: item.label });
301
+ } else if (item.labelHighlight) {
302
+ var mLabel = _react2.default.createElement('span', {
303
+ className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
304
+ dangerouslySetInnerHTML: {
305
+ __html: (0, _hiHelpers.escapeHTML)(item.labelHighlight)
306
+ }
307
+ });
308
+ if (item.color && this.props.selected) {
309
+ return _react2.default.createElement(_HiColoredLabel2.default, { color: item.color, label: mLabel });
310
+ }
311
+ return mLabel;
300
312
  }
301
313
  return item.label;
302
314
  }
@@ -128,7 +128,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
128
128
  datas = _props.datas,
129
129
  view = _props.view,
130
130
  width = _props.width,
131
- fixedWidth = _props.fixedWidth,
132
131
  padding = _props.padding,
133
132
  align = _props.align,
134
133
  dense = _props.dense,
@@ -142,14 +141,14 @@ var BodyCellBuilder = function (_React$PureComponent) {
142
141
  childrenCount = _props.childrenCount,
143
142
  onOpenDetails = _props.onOpenDetails,
144
143
  lookedUp = _props.lookedUp,
145
- props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
144
+ fixedColumnWidth = _props.fixedColumnWidth,
145
+ props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'datas', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth']);
146
146
 
147
147
 
148
148
  var layoutProps = {
149
149
  type: type,
150
150
  view: view,
151
151
  width: width,
152
- fixedWidth: fixedWidth,
153
152
  align: align,
154
153
  dense: dense,
155
154
  onSelect: onSelect,
@@ -158,7 +157,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
158
157
  selected: selected,
159
158
  sticky: sticky,
160
159
  childrenCount: childrenCount,
161
- lookedUp: lookedUp
160
+ lookedUp: lookedUp,
161
+ fixedColumnWidth: fixedColumnWidth
162
162
  };
163
163
 
164
164
  var cellElement = void 0;
@@ -214,7 +214,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
214
214
  break;
215
215
 
216
216
  case cst.TYPE_ICON:
217
- if (view === cst.VIEWS.SMALL) layoutProps.fixedWidth = true;
218
217
  cellElement = _react2.default.createElement(_BodyCells.CellIcon, {
219
218
  value: datas.value,
220
219
  icon: datas.icon,
@@ -277,7 +276,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
277
276
 
278
277
  case cst.TYPE_THIRD_PARTY_SECURITY:
279
278
  layoutProps.align = 'center';
280
- layoutProps.fixedWidth = true;
281
279
  cellElement = _react2.default.createElement(_BodyCells.CellThirdPartySecurity, {
282
280
  value: datas.value,
283
281
  code: datas.code,
@@ -351,9 +349,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
351
349
  */
352
350
  ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
353
351
  /**
354
- * La largeur de la cellule est fixé (toutes les colonnes sauf une)
352
+ * Fixe la taille des colonnes selon le type de vue
353
+ * Sinon les colonnes s'adaptent à l'espace disponible
355
354
  */
356
- fixedWidth: _propTypes2.default.bool,
355
+ fixedColumnWidth: _propTypes2.default.bool,
357
356
  /**
358
357
  * Recherche lookup sur cette colonne
359
358
  */
@@ -83,6 +83,10 @@ var styles = exports.styles = function styles(theme) {
83
83
  lookedUp: {
84
84
  background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
85
85
  borderRadius: '45%'
86
+ },
87
+ pins: {
88
+ position: 'relative',
89
+ top: 3
86
90
  }
87
91
  };
88
92
  };
@@ -132,7 +136,7 @@ var CellLayout = function (_React$Component) {
132
136
  dense = _props.dense,
133
137
  _props$width = _props.width,
134
138
  width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
135
- fixedWidth = _props.fixedWidth,
139
+ fixedColumnWidth = _props.fixedColumnWidth,
136
140
  sticky = _props.sticky,
137
141
  selectable = _props.selectable,
138
142
  selected = _props.selected,
@@ -150,22 +154,23 @@ var CellLayout = function (_React$Component) {
150
154
 
151
155
  var lookedUpClassName = (0, _classnames2.default)(classes.flexContent, (0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
152
156
 
157
+ var cellStyle = {
158
+ zIndex: sticky ? 12 : 11,
159
+ textAlign: align,
160
+ position: sticky ? 'relative' : 'inherit',
161
+ border: 'none',
162
+ height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
163
+ };
164
+
165
+ if (fixedColumnWidth) {
166
+ cellStyle.maxWidth = _width;
167
+ cellStyle.minWidth = _width;
168
+ cellStyle.width = _width;
169
+ }
170
+
153
171
  return _react2.default.createElement(
154
172
  _TableCell2.default,
155
- {
156
- className: classes.root,
157
- style: {
158
- maxWidth: _width,
159
- minWidth: _width,
160
- width: _width,
161
- // la cellule sticky doit être au dessus des autres cellules du body
162
- zIndex: sticky ? 12 : 11,
163
- textAlign: align,
164
- position: sticky ? 'relative' : 'inherit',
165
- border: 'none',
166
- height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
167
- }
168
- },
173
+ { className: classes.root, style: cellStyle },
169
174
  !!selectable && _react2.default.createElement(_HiCheckbox2.default, {
170
175
  classes: { root: classes.checkbox },
171
176
  style: { margin: dense ? 6 : 10 },
@@ -196,7 +201,7 @@ var CellLayout = function (_React$Component) {
196
201
  },
197
202
  _react2.default.createElement(
198
203
  _HiPins2.default,
199
- { color: theme.palette.business.primary.normal },
204
+ { color: theme.palette.business.primary.normal, className: classes.pins },
200
205
  childrenCount
201
206
  )
202
207
  )
@@ -212,7 +217,7 @@ CellLayout.defaultProps = {
212
217
  selectable: false,
213
218
  selected: false,
214
219
  dense: false,
215
- fixedWidth: false,
220
+ fixedColumnWidth: true,
216
221
  sticky: false,
217
222
  padding: 8
218
223
  };
@@ -246,9 +251,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
246
251
  */
247
252
  width: _propTypes2.default.number,
248
253
  /**
249
- * La largeur de la cellule est fixé (toutes les colonnes sauf une)
254
+ * Fixe la taille des colonnes selon le type de vue
255
+ * Sinon les colonnes s'adaptent à l'espace disponible
250
256
  */
251
- fixedWidth: _propTypes2.default.bool,
257
+ fixedColumnWidth: _propTypes2.default.bool,
252
258
  /**
253
259
  * Title alignement, est déduit de type par défaut
254
260
  */
@@ -73,7 +73,7 @@ var CellSentinel = function (_React$PureComponent) {
73
73
  function CellSentinel(props) {
74
74
  (0, _classCallCheck3.default)(this, CellSentinel);
75
75
 
76
- var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this));
76
+ var _this = (0, _possibleConstructorReturn3.default)(this, (CellSentinel.__proto__ || (0, _getPrototypeOf2.default)(CellSentinel)).call(this, props));
77
77
 
78
78
  _this.getColorFromFraudResult = _this.getColorFromFraudResult.bind(_this);
79
79
  return _this;
@@ -124,7 +124,8 @@ var CellSentinel = function (_React$PureComponent) {
124
124
  fraudResult = _props.fraudResult,
125
125
  automaticFraudReviewResult = _props.automaticFraudReviewResult,
126
126
  pendingManualAction = _props.pendingManualAction,
127
- smartDecision = _props.smartDecision;
127
+ smartDecision = _props.smartDecision,
128
+ hideFraudResult = _props.hideFraudResult;
128
129
 
129
130
 
130
131
  var scoreLabel = score > 0 ? '+' + score : '' + score;
@@ -155,14 +156,14 @@ var CellSentinel = function (_React$PureComponent) {
155
156
  { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
156
157
  _react2.default.createElement(
157
158
  'div',
158
- null,
159
+ { style: { textAlign: 'right' } },
159
160
  _react2.default.createElement(_HiColoredLabel2.default, {
160
161
  label: scoreLabel,
161
162
  color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
162
163
  classes: { root: classes.label },
163
164
  active: pendingManualAction
164
165
  }),
165
- _react2.default.createElement(_HiColoredLabel2.default, {
166
+ !hideFraudResult && _react2.default.createElement(_HiColoredLabel2.default, {
166
167
  label: fraudResult.toUpperCase().substr(0, 1),
167
168
  color: this.getColorFromFraudResult(fraudResult),
168
169
  classes: { root: classes.label },
@@ -184,6 +185,9 @@ var CellSentinel = function (_React$PureComponent) {
184
185
  return CellSentinel;
185
186
  }(_react2.default.PureComponent);
186
187
 
188
+ CellSentinel.defaultProps = {
189
+ hideFraudResult: false
190
+ };
187
191
  CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
188
192
  /**
189
193
  * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
@@ -197,6 +201,10 @@ CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
197
201
  * Résultat de la fraude
198
202
  */
199
203
  fraudResult: _propTypes2.default.string.isRequired,
204
+ /**
205
+ * Si true le fraudResult ne sera pas affiché
206
+ */
207
+ hideFraudResult: _propTypes2.default.bool.isRequired,
200
208
  /**
201
209
  * Signal qu'il attend une réponse manuelle
202
210
  */
@@ -55,6 +55,10 @@ var styles = exports.styles = function styles(theme) {
55
55
  display: 'inline-flex',
56
56
  alignItems: 'baseline',
57
57
  maxWidth: 'calc(100% - 36px)'
58
+ },
59
+ pins: {
60
+ position: 'relative',
61
+ bottom: 1
58
62
  }
59
63
  };
60
64
  };
@@ -93,7 +97,7 @@ var CellStatus = function (_React$PureComponent) {
93
97
  _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color }),
94
98
  _react2.default.createElement(
95
99
  _HiPins2.default,
96
- { color: color, onClick: onOpenDetails },
100
+ { color: color, onClick: onOpenDetails, className: classes.pins },
97
101
  nbOperations
98
102
  )
99
103
  ) : _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
@@ -66,7 +66,8 @@ var styles = exports.styles = function styles(theme) {
66
66
  display: 'inline-block',
67
67
  overflow: 'hidden',
68
68
  textOverflow: 'ellipsis',
69
- whiteSpace: 'pre'
69
+ whiteSpace: 'pre',
70
+ width: '100%'
70
71
  },
71
72
  noEllipsisSpan: {
72
73
  display: 'inline-block',
@@ -315,7 +315,8 @@ BodyRow.defaultProps = {
315
315
  sticky: false,
316
316
  live: false,
317
317
  innerRow: false,
318
- lookupColumns: []
318
+ lookupColumns: [],
319
+ fixedColumnWidth: true
319
320
  };
320
321
  BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
321
322
  /**
@@ -326,6 +327,11 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
326
327
  * Densité d'affichage (joue sur la hauteur des lignes)
327
328
  */
328
329
  dense: _propTypes2.default.bool,
330
+ /**
331
+ * Fixe la taille des colonnes selon le type de vue
332
+ * Sinon les colonnes s'adaptent à l'espace disponible
333
+ */
334
+ fixedColumnWidth: _propTypes2.default.bool,
329
335
  /**
330
336
  * Applique le style d'une ligne intégrée a un sous-tableau
331
337
  */
@@ -345,7 +345,11 @@ var ColumnFilter = function (_React$Component) {
345
345
  _react2.default.createElement(
346
346
  'div',
347
347
  { className: classes.menuItemFilter },
348
- translations.filter,
348
+ _react2.default.createElement(
349
+ 'span',
350
+ { style: { marginRight: 4 } },
351
+ translations.filter
352
+ ),
349
353
  _react2.default.createElement(
350
354
  _HiPins2.default,
351
355
  {
@@ -227,7 +227,7 @@ var HeaderCell = function (_React$PureComponent) {
227
227
  dense = _props.dense,
228
228
  _props$width = _props.width,
229
229
  width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
230
- fixedWidth = _props.fixedWidth,
230
+ fixedColumnWidth = _props.fixedColumnWidth,
231
231
  _props$align = _props.align,
232
232
  align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
233
233
  sticky = _props.sticky,
@@ -263,19 +263,22 @@ var HeaderCell = function (_React$PureComponent) {
263
263
 
264
264
  var lookedUpClassName = (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
265
265
 
266
+ var cellStyle = {
267
+ padding: 0,
268
+ zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
269
+ backgroundColor: 'inherit',
270
+ textAlign: align
271
+ };
272
+
273
+ if (fixedColumnWidth) {
274
+ cellStyle.maxWidth = _width;
275
+ cellStyle.minWidth = _width;
276
+ cellStyle.width = _width;
277
+ }
278
+
266
279
  return _react2.default.createElement(
267
280
  _Table.TableCell,
268
- {
269
- style: {
270
- maxWidth: _width,
271
- minWidth: _width,
272
- width: _width,
273
- padding: 0,
274
- zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
275
- backgroundColor: 'inherit',
276
- textAlign: align
277
- }
278
- },
281
+ { style: cellStyle },
279
282
  _react2.default.createElement(
280
283
  'div',
281
284
  null,
@@ -366,7 +369,7 @@ HeaderCell.defaultProps = {
366
369
  sortDirection: 'asc',
367
370
  view: 'l',
368
371
  dense: false,
369
- fixedWidth: false,
372
+ fixedColumnWidth: true,
370
373
  sticky: true,
371
374
  padding: 8
372
375
  };
@@ -446,7 +449,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
446
449
  /**
447
450
  * La largeur de la cellule est fixé (toutes les colonnes sauf une)
448
451
  */
449
- fixedWidth: _propTypes2.default.bool,
452
+ fixedColumnWidth: _propTypes2.default.bool,
450
453
  /**
451
454
  * Title alignement, est déduit de type par défaut
452
455
  */
@@ -705,7 +705,9 @@ var HiTable = function (_React$Component) {
705
705
  translations = _props.translations,
706
706
  view = _props.view,
707
707
  groupBy = _props.groupBy,
708
- lookupColumns = _props.lookupColumns;
708
+ lookupColumns = _props.lookupColumns,
709
+ loading = _props.loading,
710
+ fixedColumnWidth = _props.fixedColumnWidth;
709
711
  var _state = this.state,
710
712
  dateUpdate = _state.dateUpdate,
711
713
  isScrollToBottom = _state.isScrollToBottom,
@@ -755,7 +757,8 @@ var HiTable = function (_React$Component) {
755
757
  sticky: sticky,
756
758
  view: view,
757
759
  translations: translations,
758
- lookupColumns: lookupColumns
760
+ lookupColumns: lookupColumns,
761
+ fixedColumnWidth: fixedColumnWidth
759
762
  }),
760
763
  _react2.default.createElement(_HiTableBody2.default, {
761
764
  tabId: tabId,
@@ -780,7 +783,9 @@ var HiTable = function (_React$Component) {
780
783
  groupBy: groupBy,
781
784
  onClickNext: this.handleNextStickyRow,
782
785
  groupByIds: groupByIds,
783
- lookupColumns: lookupColumns
786
+ lookupColumns: lookupColumns,
787
+ loading: loading,
788
+ fixedColumnWidth: fixedColumnWidth
784
789
  }),
785
790
  infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
786
791
  tabId: tabId,
@@ -849,7 +854,9 @@ HiTable.defaultProps = {
849
854
  }
850
855
  },
851
856
  view: 'l',
852
- lookupColumns: []
857
+ lookupColumns: [],
858
+ loading: false,
859
+ fixedColumnWidth: true
853
860
  };
854
861
  HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
855
862
  /**
@@ -880,6 +887,15 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
880
887
  * Active le filtre sur les colonnes filtrables
881
888
  */
882
889
  filterable: _propTypes2.default.bool,
890
+ /**
891
+ * Fixe la taille des colonnes selon le type de vue
892
+ * Sinon les colonnes s'adaptent à l'espace disponible
893
+ */
894
+ fixedColumnWidth: _propTypes2.default.bool,
895
+ /**
896
+ * Id de la colonne par laquelle sont regroupé les éléments
897
+ */
898
+ groupBy: _propTypes2.default.string,
883
899
  /**
884
900
  * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
885
901
  */
@@ -892,6 +908,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
892
908
  * Ajoute l'infinite scroll
893
909
  */
894
910
  infiniteScroll: _propTypes2.default.bool,
911
+ /**
912
+ * État du tableau en cours de chargement des données
913
+ */
914
+ loading: _propTypes2.default.bool,
895
915
  /**
896
916
  * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
897
917
  */
@@ -1003,10 +1023,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
1003
1023
  * Taille du tableau (L/M/S),
1004
1024
  * définit l'espace entre les cellules et leurs tailles par default
1005
1025
  */
1006
- view: _propTypes2.default.oneOf(['l', 'm', 's']),
1007
- /**
1008
- * Id de la colonne par laquelle sont regroupé les éléments
1009
- */
1010
- groupBy: _propTypes2.default.string
1026
+ view: _propTypes2.default.oneOf(['l', 'm', 's'])
1011
1027
  } : {};
1012
1028
  exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);
@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.styles = undefined;
7
7
 
8
+ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
9
+
10
+ var _defineProperty3 = _interopRequireDefault(_defineProperty2);
11
+
8
12
  var _extends2 = require('babel-runtime/helpers/extends');
9
13
 
10
14
  var _extends3 = _interopRequireDefault(_extends2);
@@ -43,6 +47,10 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
43
47
 
44
48
  var _Table = require('material-ui/Table');
45
49
 
50
+ var _classnames = require('classnames');
51
+
52
+ var _classnames2 = _interopRequireDefault(_classnames);
53
+
46
54
  var _styles = require('../styles');
47
55
 
48
56
  var _BodyRow = require('./BodyRow');
@@ -61,12 +69,6 @@ var _constants = require('./constants');
61
69
 
62
70
  var cst = _interopRequireWildcard(_constants);
63
71
 
64
- var _HiTableHead = require('./HiTableHead');
65
-
66
- var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
67
-
68
- var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
69
-
70
72
  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; } }
71
73
 
72
74
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -75,12 +77,14 @@ var styles = exports.styles = function styles(theme) {
75
77
  return {
76
78
  tbody: {
77
79
  position: 'relative',
78
- display: 'block' /* seperates the tbody from the header */
79
- , width: '100%',
80
+ width: '100%',
80
81
  overflowX: 'hidden',
81
82
  overflowY: 'auto',
82
83
  zIndex: 11
83
84
  },
85
+ tbodyFixedWidth: {
86
+ display: 'block' /* seperates the tbody from the header */
87
+ },
84
88
  tbodyRows: {
85
89
  backgroundColor: theme.palette.background3
86
90
  },
@@ -281,7 +285,9 @@ var HiTableBody = function (_React$Component) {
281
285
  numberLocale = _props.numberLocale,
282
286
  groupByIds = _props.groupByIds,
283
287
  sortedColumnId = _props.sortedColumnId,
284
- lookupColumns = _props.lookupColumns;
288
+ lookupColumns = _props.lookupColumns,
289
+ loading = _props.loading,
290
+ fixedColumnWidth = _props.fixedColumnWidth;
285
291
  var _state = this.state,
286
292
  openedParentRowId = _state.openedParentRowId,
287
293
  openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -379,7 +385,8 @@ var HiTableBody = function (_React$Component) {
379
385
  row: row,
380
386
  sticky: sticky,
381
387
  tabId: tabId,
382
- view: view
388
+ view: view,
389
+ fixedColumnWidth: fixedColumnWidth
383
390
  });
384
391
 
385
392
  if (hasChildren && openedParentRowId === row.rowId) {
@@ -408,7 +415,8 @@ var HiTableBody = function (_React$Component) {
408
415
  view: view,
409
416
  dense: dense,
410
417
  sticky: sticky,
411
- isDetail: true
418
+ isDetail: true,
419
+ fixedColumnWidth: fixedColumnWidth
412
420
  };
413
421
 
414
422
  tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
@@ -416,12 +424,18 @@ var HiTableBody = function (_React$Component) {
416
424
  }
417
425
  });
418
426
 
427
+ var tBodyClasses = (0, _classnames2.default)(classes.tbody, (0, _defineProperty3.default)({}, classes.tbodyFixedWidth, fixedColumnWidth));
428
+
419
429
  return _react2.default.createElement(
420
430
  _Table.TableBody,
421
431
  {
422
432
  id: tabId + '-body',
423
- className: classes.tbody,
424
- style: { height: height },
433
+ className: tBodyClasses,
434
+ style: (0, _extends3.default)({
435
+ height: height
436
+ }, loading && {
437
+ opacity: 0.6
438
+ }),
425
439
  onScroll: onScroll
426
440
  },
427
441
  tableRows.map(function (tableRow) {
@@ -442,7 +456,8 @@ HiTableBody.defaultProps = {
442
456
  dense: false,
443
457
  height: 450,
444
458
  sticky: true,
445
- view: 'l'
459
+ view: 'l',
460
+ loading: false
446
461
  };
447
462
  HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
448
463
  /**
@@ -470,10 +485,19 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
470
485
  * Densité d'affichage (joue sur la hauteur des lignes)
471
486
  */
472
487
  dense: _propTypes2.default.bool,
488
+ /**
489
+ * Fixe la taille des colonnes selon le type de vue
490
+ * Sinon les colonnes s'adaptent à l'espace disponible
491
+ */
492
+ fixedColumnWidth: _propTypes2.default.bool,
473
493
  /**
474
494
  * Hauteur du tableau (px)
475
495
  */
476
496
  height: _propTypes2.default.number,
497
+ /**
498
+ * État du tableau en cours de chargement des données
499
+ */
500
+ loading: _propTypes2.default.bool,
477
501
  /**
478
502
  * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
479
503
  */