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

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 (43) hide show
  1. package/HiDotsStepper/HiDot.js +151 -0
  2. package/HiDotsStepper/HiDotsStepper.js +146 -0
  3. package/HiDotsStepper/index.js +16 -0
  4. package/HiForm/HiAddressField.js +204 -0
  5. package/HiForm/HiInput.js +1 -1
  6. package/HiForm/index.js +9 -0
  7. package/HiPdfReader/HiPdfReader.js +282 -0
  8. package/HiPdfReader/index.js +16 -0
  9. package/HiSelect/HiSuggestSelect.js +2 -0
  10. package/HiSelectableList/HiSelectableListItem.js +1 -2
  11. package/HiTable/BodyCellBuilder.js +7 -8
  12. package/HiTable/BodyCells/CellLayout.js +20 -18
  13. package/HiTable/BodyCells/CellSentinel.js +12 -4
  14. package/HiTable/BodyRow.js +7 -1
  15. package/HiTable/HeaderCell.js +17 -14
  16. package/HiTable/HiTable.js +13 -4
  17. package/HiTable/HiTableBody.js +26 -12
  18. package/HiTable/HiTableHead.js +22 -5
  19. package/es/HiDotsStepper/HiDot.js +92 -0
  20. package/es/HiDotsStepper/HiDotsStepper.js +83 -0
  21. package/es/HiDotsStepper/index.js +1 -0
  22. package/es/HiForm/HiAddressField.js +142 -0
  23. package/es/HiForm/HiInput.js +1 -1
  24. package/es/HiForm/index.js +2 -1
  25. package/es/HiPdfReader/HiPdfReader.js +198 -0
  26. package/es/HiPdfReader/index.js +1 -0
  27. package/es/HiSelect/HiSuggestSelect.js +2 -0
  28. package/es/HiSelectableList/HiSelectableListItem.js +1 -2
  29. package/es/HiTable/BodyCellBuilder.js +8 -9
  30. package/es/HiTable/BodyCells/CellLayout.js +22 -20
  31. package/es/HiTable/BodyCells/CellSentinel.js +12 -4
  32. package/es/HiTable/BodyRow.js +7 -1
  33. package/es/HiTable/HeaderCell.js +17 -14
  34. package/es/HiTable/HiTable.js +13 -4
  35. package/es/HiTable/HiTableBody.js +22 -9
  36. package/es/HiTable/HiTableHead.js +17 -5
  37. package/es/styles/createHiMuiTheme.js +7 -0
  38. package/index.es.js +1 -1
  39. package/index.js +1 -1
  40. package/package.json +2 -1
  41. package/styles/createHiMuiTheme.js +7 -0
  42. package/umd/hipay-material-ui.development.js +2874 -2606
  43. package/umd/hipay-material-ui.production.min.js +4 -4
@@ -0,0 +1,198 @@
1
+ import _extends from 'babel-runtime/helpers/extends';
2
+ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3
+ import React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import { Document, Page } from 'react-pdf';
6
+ import HiButton from '../HiButton';
7
+ import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
8
+ import ChevronLeftIcon from 'mdi-material-ui/ChevronLeft';
9
+ import { CircularProgress } from 'material-ui/Progress';
10
+ import { withStyles } from '../styles';
11
+
12
+ export const styles = theme => ({
13
+ root: {
14
+ position: 'relative'
15
+ },
16
+ pageNumber: {
17
+ position: 'absolute',
18
+ bottom: 16,
19
+ left: -24,
20
+ backgroundColor: '#FFFFFF',
21
+ borderRadius: 4,
22
+ paddingTop: 7,
23
+ paddingBottom: 7,
24
+ paddingRight: 8,
25
+ paddingLeft: 8,
26
+ fontSize: 15,
27
+ fontFamily: theme.typography.fontFamily,
28
+ boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
29
+ color: '#737373'
30
+ },
31
+ pagesNavigation: {
32
+ position: 'absolute',
33
+ top: 16,
34
+ right: -30,
35
+ backgroundColor: '#FFFFFF',
36
+ borderRadius: 3,
37
+ paddingTop: 4,
38
+ paddingBottom: 4,
39
+ paddingRight: 3,
40
+ paddingLeft: 3,
41
+ fontFamily: theme.typography.fontFamily,
42
+ boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
43
+ color: '#737373',
44
+ '&>button:first-child': {
45
+ marginRight: 6
46
+ }
47
+ },
48
+ navigationButton: {
49
+ padding: 0,
50
+ minWidth: 0,
51
+ minHeight: 0
52
+ }
53
+ });
54
+
55
+ // Constantes utilisées pour le redimentionnement du PDF (format mobile par exemple)
56
+ const maxWindowWidth = 900;
57
+ const maxPdfWidth = 600;
58
+
59
+ var _ref = React.createElement(CircularProgress, null);
60
+
61
+ var _ref2 = React.createElement(ChevronLeftIcon, null);
62
+
63
+ var _ref3 = React.createElement(ChevronRightIcon, null);
64
+
65
+ class HiPdfReader extends React.PureComponent {
66
+ constructor(...args) {
67
+ var _temp;
68
+
69
+ return _temp = super(...args), this.state = {
70
+ numPages: null,
71
+ pageNumber: 1,
72
+ error: false,
73
+ width: 600
74
+ }, this.handleLoadSuccess = ({ numPages }) => {
75
+ this.setState({ numPages, error: false });
76
+ }, this.handleLoadError = () => {
77
+ this.setState({ error: true });
78
+ }, this.handleClickNextPage = () => {
79
+ this.setState({ pageNumber: this.state.pageNumber + 1 });
80
+ }, this.handleClickPreviousPage = () => {
81
+ this.setState({ pageNumber: this.state.pageNumber - 1 });
82
+ }, _temp;
83
+ }
84
+
85
+ // Calculate & Update state of new dimensions
86
+ updateDimensions() {
87
+ if (window.innerWidth < maxWindowWidth) {
88
+ let updateWidth = Math.round(window.innerWidth * 100 / maxWindowWidth / 100 * maxPdfWidth);
89
+ this.setState({ width: updateWidth });
90
+ } else {
91
+ this.setState({ width: maxPdfWidth });
92
+ }
93
+ }
94
+
95
+ componentDidMount() {
96
+ this.updateDimensions();
97
+ window.addEventListener('resize', this.updateDimensions.bind(this));
98
+ }
99
+
100
+ componentWillUnmount() {
101
+ window.removeEventListener('resize', this.updateDimensions.bind(this));
102
+ }
103
+
104
+ // Fonction appelée une fois le pdf correctement chargé
105
+
106
+
107
+ // Fonction appelée en cas d'erreur de chargement du pdf
108
+
109
+
110
+ // Fonction appelée au clic du bouton pour visualiser la page suivante du pdf
111
+
112
+
113
+ // Fonction appelée au clic du bouton pour visualiser la page précédente du pdf
114
+
115
+
116
+ // Render
117
+ render() {
118
+ const { pageNumber, numPages, error } = this.state;
119
+ const _props = this.props,
120
+ { classes, file, displayPagination, displayNavigationButtons } = _props,
121
+ props = _objectWithoutProperties(_props, ['classes', 'file', 'displayPagination', 'displayNavigationButtons']);
122
+
123
+ return React.createElement(
124
+ 'div',
125
+ { className: classes.root },
126
+ React.createElement(
127
+ Document,
128
+ _extends({
129
+ className: classes.style,
130
+ file: file,
131
+ onLoadSuccess: this.handleLoadSuccess,
132
+ onLoadError: this.handleLoadError,
133
+ loading: _ref
134
+ }, props),
135
+ React.createElement(Page, {
136
+ pageNumber: pageNumber,
137
+ renderAnnotations: false,
138
+ renderTextLayer: false,
139
+ width: this.state.width
140
+ })
141
+ ),
142
+ !error && numPages > 1 && displayPagination && React.createElement(
143
+ 'span',
144
+ { className: classes.pageNumber },
145
+ 'Page ',
146
+ pageNumber,
147
+ ' sur ',
148
+ numPages
149
+ ),
150
+ !error && numPages > 1 && displayNavigationButtons && React.createElement(
151
+ 'span',
152
+ { className: classes.pagesNavigation },
153
+ React.createElement(
154
+ HiButton,
155
+ {
156
+ onClick: this.handleClickPreviousPage,
157
+ disabled: pageNumber === 1,
158
+ className: classes.navigationButton
159
+ },
160
+ _ref2
161
+ ),
162
+ React.createElement(
163
+ HiButton,
164
+ {
165
+ onClick: this.handleClickNextPage,
166
+ disabled: pageNumber === numPages,
167
+ className: classes.navigationButton
168
+ },
169
+ _ref3
170
+ )
171
+ )
172
+ );
173
+ }
174
+ }
175
+
176
+ HiPdfReader.defaultProps = {
177
+ displayPagination: true,
178
+ displayNavigationButtons: true
179
+ };
180
+ HiPdfReader.propTypes = process.env.NODE_ENV !== "production" ? {
181
+ /**
182
+ * Surcharge les classes du composant
183
+ */
184
+ classes: PropTypes.object,
185
+ /**
186
+ * Chemin vers le fichier PDF
187
+ */
188
+ file: PropTypes.string.isRequired,
189
+ /**
190
+ * On affiche la pagination si le PDF contient plusieurs pages
191
+ */
192
+ displayPagination: PropTypes.bool,
193
+ /**
194
+ * On affiche les boutons de navigation entre les pages si le PDF contient plusieurs pages
195
+ */
196
+ displayNavigationButtons: PropTypes.bool
197
+ } : {};
198
+ export default withStyles(styles, { name: 'HmuiHiPdfReader', index: 51 })(HiPdfReader);
@@ -0,0 +1 @@
1
+ export { default } from './HiPdfReader';
@@ -77,6 +77,8 @@ class HiSuggestSelect extends React.PureComponent {
77
77
  items[0].focus();
78
78
  }
79
79
  }, 1);
80
+ } else if (event.key === 'Escape') {
81
+ this.setState({ options: [] });
80
82
  }
81
83
  };
82
84
 
@@ -158,8 +158,7 @@ class HiSelectableListItem extends React.Component {
158
158
  case 'image':
159
159
  let img = '';
160
160
  if (typeof item.img !== 'undefined') {
161
-
162
- img = React.createElement('img', { src: item.img, className: classes.imgListItem });
161
+ img = React.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
163
162
  }
164
163
 
165
164
  return React.createElement(
@@ -79,7 +79,6 @@ export default class BodyCellBuilder extends React.PureComponent {
79
79
  datas,
80
80
  view,
81
81
  width,
82
- fixedWidth,
83
82
  padding,
84
83
  align,
85
84
  dense,
@@ -92,15 +91,15 @@ export default class BodyCellBuilder extends React.PureComponent {
92
91
  numberLocale,
93
92
  childrenCount,
94
93
  onOpenDetails,
95
- lookedUp
94
+ lookedUp,
95
+ fixedColumnWidth
96
96
  } = _props,
97
- props = _objectWithoutProperties(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
97
+ props = _objectWithoutProperties(_props, ['ukey', 'type', 'datas', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth']);
98
98
 
99
99
  const layoutProps = {
100
100
  type,
101
101
  view,
102
102
  width,
103
- fixedWidth,
104
103
  align,
105
104
  dense,
106
105
  onSelect,
@@ -109,7 +108,8 @@ export default class BodyCellBuilder extends React.PureComponent {
109
108
  selected,
110
109
  sticky,
111
110
  childrenCount,
112
- lookedUp
111
+ lookedUp,
112
+ fixedColumnWidth
113
113
  };
114
114
 
115
115
  let cellElement;
@@ -165,7 +165,6 @@ export default class BodyCellBuilder extends React.PureComponent {
165
165
  break;
166
166
 
167
167
  case cst.TYPE_ICON:
168
- if (view === cst.VIEWS.SMALL) layoutProps.fixedWidth = true;
169
168
  cellElement = React.createElement(CellIcon, {
170
169
  value: datas.value,
171
170
  icon: datas.icon,
@@ -228,7 +227,6 @@ export default class BodyCellBuilder extends React.PureComponent {
228
227
 
229
228
  case cst.TYPE_THIRD_PARTY_SECURITY:
230
229
  layoutProps.align = 'center';
231
- layoutProps.fixedWidth = true;
232
230
  cellElement = React.createElement(CellThirdPartySecurity, {
233
231
  value: datas.value,
234
232
  code: datas.code,
@@ -298,9 +296,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
298
296
  */
299
297
  ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
300
298
  /**
301
- * La largeur de la cellule est fixé (toutes les colonnes sauf une)
299
+ * Fixe la taille des colonnes selon le type de vue
300
+ * Sinon les colonnes s'adaptent à l'espace disponible
302
301
  */
303
- fixedWidth: PropTypes.bool,
302
+ fixedColumnWidth: PropTypes.bool,
304
303
  /**
305
304
  * Recherche lookup sur cette colonne
306
305
  */
@@ -61,34 +61,35 @@ class CellLayout extends React.Component {
61
61
  const {
62
62
  classes, type, children,
63
63
  align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
64
- view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedWidth, sticky,
64
+ view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedColumnWidth, sticky,
65
65
  selectable, selected, onSelect, childrenCount, theme, padding,
66
66
  lookedUp
67
67
  } = this.props;
68
68
 
69
- let offset = selectable ? dense ? 32 : 40 : 0;
69
+ const offset = selectable ? dense ? 32 : 40 : 0;
70
70
 
71
71
  // Inclus le padding et/ou la checkbox dans la largeur de la cellule
72
- let _width = width + offset + (selectable ? padding : 2 * padding);
72
+ const _width = width + offset + (selectable ? padding : 2 * padding);
73
73
 
74
74
  const lookedUpClassName = classNames(classes.flexContent, { [classes.lookedUp]: lookedUp });
75
75
 
76
+ const cellStyle = {
77
+ zIndex: sticky ? 12 : 11,
78
+ textAlign: align,
79
+ position: sticky ? 'relative' : 'inherit',
80
+ border: 'none',
81
+ height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
82
+ };
83
+
84
+ if (fixedColumnWidth) {
85
+ cellStyle.maxWidth = _width;
86
+ cellStyle.minWidth = _width;
87
+ cellStyle.width = _width;
88
+ }
89
+
76
90
  return React.createElement(
77
91
  TableCell,
78
- {
79
- className: classes.root,
80
- style: {
81
- maxWidth: _width,
82
- minWidth: _width,
83
- width: _width,
84
- // la cellule sticky doit être au dessus des autres cellules du body
85
- zIndex: sticky ? 12 : 11,
86
- textAlign: align,
87
- position: sticky ? 'relative' : 'inherit',
88
- border: 'none',
89
- height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
90
- }
91
- },
92
+ { className: classes.root, style: cellStyle },
92
93
  !!selectable && React.createElement(HiCheckbox, {
93
94
  classes: { root: classes.checkbox },
94
95
  style: { margin: dense ? 6 : 10 },
@@ -133,7 +134,7 @@ CellLayout.defaultProps = {
133
134
  selectable: false,
134
135
  selected: false,
135
136
  dense: false,
136
- fixedWidth: false,
137
+ fixedColumnWidth: true,
137
138
  sticky: false,
138
139
  padding: 8
139
140
  };
@@ -167,9 +168,10 @@ CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
167
168
  */
168
169
  width: PropTypes.number,
169
170
  /**
170
- * La largeur de la cellule est fixé (toutes les colonnes sauf une)
171
+ * Fixe la taille des colonnes selon le type de vue
172
+ * Sinon les colonnes s'adaptent à l'espace disponible
171
173
  */
172
- fixedWidth: PropTypes.bool,
174
+ fixedColumnWidth: PropTypes.bool,
173
175
  /**
174
176
  * Title alignement, est déduit de type par défaut
175
177
  */
@@ -21,7 +21,7 @@ export const styles = theme => ({
21
21
  class CellSentinel extends React.PureComponent {
22
22
 
23
23
  constructor(props) {
24
- super();
24
+ super(props);
25
25
 
26
26
  this.getColorFromFraudResult = this.getColorFromFraudResult.bind(this);
27
27
  }
@@ -66,7 +66,8 @@ class CellSentinel extends React.PureComponent {
66
66
  fraudResult,
67
67
  automaticFraudReviewResult,
68
68
  pendingManualAction,
69
- smartDecision
69
+ smartDecision,
70
+ hideFraudResult
70
71
  } = this.props;
71
72
 
72
73
  const scoreLabel = score > 0 ? `+${score}` : `${score}`;
@@ -97,14 +98,14 @@ class CellSentinel extends React.PureComponent {
97
98
  { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
98
99
  React.createElement(
99
100
  'div',
100
- null,
101
+ { style: { textAlign: 'right' } },
101
102
  React.createElement(HiColoredLabel, {
102
103
  label: scoreLabel,
103
104
  color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
104
105
  classes: { root: classes.label },
105
106
  active: pendingManualAction
106
107
  }),
107
- React.createElement(HiColoredLabel, {
108
+ !hideFraudResult && React.createElement(HiColoredLabel, {
108
109
  label: fraudResult.toUpperCase().substr(0, 1),
109
110
  color: this.getColorFromFraudResult(fraudResult),
110
111
  classes: { root: classes.label },
@@ -124,6 +125,9 @@ class CellSentinel extends React.PureComponent {
124
125
  }
125
126
  }
126
127
 
128
+ CellSentinel.defaultProps = {
129
+ hideFraudResult: false
130
+ };
127
131
  CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
128
132
  /**
129
133
  * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
@@ -137,6 +141,10 @@ CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
137
141
  * Résultat de la fraude
138
142
  */
139
143
  fraudResult: PropTypes.string.isRequired,
144
+ /**
145
+ * Si true le fraudResult ne sera pas affiché
146
+ */
147
+ hideFraudResult: PropTypes.bool.isRequired,
140
148
  /**
141
149
  * Signal qu'il attend une réponse manuelle
142
150
  */
@@ -241,7 +241,8 @@ BodyRow.defaultProps = {
241
241
  sticky: false,
242
242
  live: false,
243
243
  innerRow: false,
244
- lookupColumns: []
244
+ lookupColumns: [],
245
+ fixedColumnWidth: true
245
246
  };
246
247
  BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
247
248
  /**
@@ -252,6 +253,11 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
252
253
  * Densité d'affichage (joue sur la hauteur des lignes)
253
254
  */
254
255
  dense: PropTypes.bool,
256
+ /**
257
+ * Fixe la taille des colonnes selon le type de vue
258
+ * Sinon les colonnes s'adaptent à l'espace disponible
259
+ */
260
+ fixedColumnWidth: PropTypes.bool,
255
261
  /**
256
262
  * Applique le style d'une ligne intégrée a un sous-tableau
257
263
  */
@@ -141,7 +141,7 @@ class HeaderCell extends React.PureComponent {
141
141
  view,
142
142
  dense,
143
143
  width = cst.DEFAULT_WIDTHS[type][view],
144
- fixedWidth,
144
+ fixedColumnWidth,
145
145
  align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
146
146
  sticky,
147
147
  padding,
@@ -178,19 +178,22 @@ class HeaderCell extends React.PureComponent {
178
178
 
179
179
  const lookedUpClassName = classNames({ [classes.lookedUp]: lookedUp });
180
180
 
181
+ const cellStyle = {
182
+ padding: 0,
183
+ zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
184
+ backgroundColor: 'inherit',
185
+ textAlign: align
186
+ };
187
+
188
+ if (fixedColumnWidth) {
189
+ cellStyle.maxWidth = _width;
190
+ cellStyle.minWidth = _width;
191
+ cellStyle.width = _width;
192
+ }
193
+
181
194
  return React.createElement(
182
195
  TableCell,
183
- {
184
- style: {
185
- maxWidth: _width,
186
- minWidth: _width,
187
- width: _width,
188
- padding: 0,
189
- zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
190
- backgroundColor: 'inherit',
191
- textAlign: align
192
- }
193
- },
196
+ { style: cellStyle },
194
197
  React.createElement(
195
198
  'div',
196
199
  null,
@@ -279,7 +282,7 @@ HeaderCell.defaultProps = {
279
282
  sortDirection: 'asc',
280
283
  view: 'l',
281
284
  dense: false,
282
- fixedWidth: false,
285
+ fixedColumnWidth: true,
283
286
  sticky: true,
284
287
  padding: 8
285
288
  };
@@ -359,7 +362,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
359
362
  /**
360
363
  * La largeur de la cellule est fixé (toutes les colonnes sauf une)
361
364
  */
362
- fixedWidth: PropTypes.bool,
365
+ fixedColumnWidth: PropTypes.bool,
363
366
  /**
364
367
  * Title alignement, est déduit de type par défaut
365
368
  */
@@ -582,7 +582,8 @@ class HiTable extends React.Component {
582
582
  view,
583
583
  groupBy,
584
584
  lookupColumns,
585
- loading
585
+ loading,
586
+ fixedColumnWidth
586
587
  } = this.props;
587
588
 
588
589
  const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
@@ -628,7 +629,8 @@ class HiTable extends React.Component {
628
629
  sticky: sticky,
629
630
  view: view,
630
631
  translations: translations,
631
- lookupColumns: lookupColumns
632
+ lookupColumns: lookupColumns,
633
+ fixedColumnWidth: fixedColumnWidth
632
634
  }),
633
635
  React.createElement(HiTableBody, {
634
636
  tabId: tabId,
@@ -654,7 +656,8 @@ class HiTable extends React.Component {
654
656
  onClickNext: this.handleNextStickyRow,
655
657
  groupByIds: groupByIds,
656
658
  lookupColumns: lookupColumns,
657
- loading: loading
659
+ loading: loading,
660
+ fixedColumnWidth: fixedColumnWidth
658
661
  }),
659
662
  infiniteScroll && React.createElement(HiTableFooterScroll, {
660
663
  tabId: tabId,
@@ -720,7 +723,8 @@ HiTable.defaultProps = {
720
723
  },
721
724
  view: 'l',
722
725
  lookupColumns: [],
723
- loading: false
726
+ loading: false,
727
+ fixedColumnWidth: true
724
728
  };
725
729
  HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
726
730
  /**
@@ -751,6 +755,11 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
751
755
  * Active le filtre sur les colonnes filtrables
752
756
  */
753
757
  filterable: PropTypes.bool,
758
+ /**
759
+ * Fixe la taille des colonnes selon le type de vue
760
+ * Sinon les colonnes s'adaptent à l'espace disponible
761
+ */
762
+ fixedColumnWidth: PropTypes.bool,
754
763
  /**
755
764
  * Id de la colonne par laquelle sont regroupé les éléments
756
765
  */
@@ -2,23 +2,24 @@ import _extends from 'babel-runtime/helpers/extends';
2
2
  import React from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import { TableBody, TableRow } from 'material-ui/Table';
5
- import { withStyles, withTheme } from '../styles';
5
+ import classNames from 'classnames';
6
+ import { withStyles } from '../styles';
6
7
  import BodyRow from './BodyRow';
7
8
  import ChildRow from './ChildRow';
8
9
  import HiStickyRow from './HiStickyRow';
9
10
  import * as cst from './constants';
10
- import { SORTED_COLUMN_ERROR_MESSAGE } from './HiTableHead';
11
- import isRequiredIf from 'react-proptype-conditional-require';
12
11
 
13
12
  export const styles = theme => ({
14
13
  tbody: {
15
14
  position: 'relative',
16
- display: 'block' /* seperates the tbody from the header */
17
- , width: '100%',
15
+ width: '100%',
18
16
  overflowX: 'hidden',
19
17
  overflowY: 'auto',
20
18
  zIndex: 11
21
19
  },
20
+ tbodyFixedWidth: {
21
+ display: 'block' /* seperates the tbody from the header */
22
+ },
22
23
  tbodyRows: {
23
24
  backgroundColor: theme.palette.background3
24
25
  },
@@ -192,7 +193,8 @@ class HiTableBody extends React.Component {
192
193
  groupByIds,
193
194
  sortedColumnId,
194
195
  lookupColumns,
195
- loading
196
+ loading,
197
+ fixedColumnWidth
196
198
  } = this.props;
197
199
 
198
200
  const { openedParentRowId, openedDetailsRowIdList } = this.state;
@@ -289,7 +291,8 @@ class HiTableBody extends React.Component {
289
291
  row,
290
292
  sticky,
291
293
  tabId,
292
- view
294
+ view,
295
+ fixedColumnWidth
293
296
  });
294
297
 
295
298
  if (hasChildren && openedParentRowId === row.rowId) {
@@ -318,7 +321,8 @@ class HiTableBody extends React.Component {
318
321
  view,
319
322
  dense,
320
323
  sticky,
321
- isDetail: true
324
+ isDetail: true,
325
+ fixedColumnWidth
322
326
  };
323
327
 
324
328
  tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
@@ -326,11 +330,15 @@ class HiTableBody extends React.Component {
326
330
  }
327
331
  });
328
332
 
333
+ const tBodyClasses = classNames(classes.tbody, {
334
+ [classes.tbodyFixedWidth]: fixedColumnWidth
335
+ });
336
+
329
337
  return React.createElement(
330
338
  TableBody,
331
339
  {
332
340
  id: `${tabId}-body`,
333
- className: classes.tbody,
341
+ className: tBodyClasses,
334
342
  style: _extends({
335
343
  height
336
344
  }, loading && {
@@ -383,6 +391,11 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
383
391
  * Densité d'affichage (joue sur la hauteur des lignes)
384
392
  */
385
393
  dense: PropTypes.bool,
394
+ /**
395
+ * Fixe la taille des colonnes selon le type de vue
396
+ * Sinon les colonnes s'adaptent à l'espace disponible
397
+ */
398
+ fixedColumnWidth: PropTypes.bool,
386
399
  /**
387
400
  * Hauteur du tableau (px)
388
401
  */