@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.
- package/HiDotsStepper/HiDot.js +151 -0
- package/HiDotsStepper/HiDotsStepper.js +146 -0
- package/HiDotsStepper/index.js +16 -0
- package/HiForm/HiAddressField.js +204 -0
- package/HiForm/HiInput.js +1 -1
- package/HiForm/index.js +9 -0
- package/HiPdfReader/HiPdfReader.js +282 -0
- package/HiPdfReader/index.js +16 -0
- package/HiSelect/HiSuggestSelect.js +2 -0
- package/HiSelectableList/HiSelectableListItem.js +1 -2
- package/HiTable/BodyCellBuilder.js +7 -8
- package/HiTable/BodyCells/CellLayout.js +20 -18
- package/HiTable/BodyCells/CellSentinel.js +12 -4
- package/HiTable/BodyRow.js +7 -1
- package/HiTable/HeaderCell.js +17 -14
- package/HiTable/HiTable.js +13 -4
- package/HiTable/HiTableBody.js +26 -12
- package/HiTable/HiTableHead.js +22 -5
- package/es/HiDotsStepper/HiDot.js +92 -0
- package/es/HiDotsStepper/HiDotsStepper.js +83 -0
- package/es/HiDotsStepper/index.js +1 -0
- package/es/HiForm/HiAddressField.js +142 -0
- package/es/HiForm/HiInput.js +1 -1
- package/es/HiForm/index.js +2 -1
- package/es/HiPdfReader/HiPdfReader.js +198 -0
- package/es/HiPdfReader/index.js +1 -0
- package/es/HiSelect/HiSuggestSelect.js +2 -0
- package/es/HiSelectableList/HiSelectableListItem.js +1 -2
- package/es/HiTable/BodyCellBuilder.js +8 -9
- package/es/HiTable/BodyCells/CellLayout.js +22 -20
- package/es/HiTable/BodyCells/CellSentinel.js +12 -4
- package/es/HiTable/BodyRow.js +7 -1
- package/es/HiTable/HeaderCell.js +17 -14
- package/es/HiTable/HiTable.js +13 -4
- package/es/HiTable/HiTableBody.js +22 -9
- package/es/HiTable/HiTableHead.js +17 -5
- package/es/styles/createHiMuiTheme.js +7 -0
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +2 -1
- package/styles/createHiMuiTheme.js +7 -0
- package/umd/hipay-material-ui.development.js +2874 -2606
- 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';
|
@@ -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', '
|
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
|
-
*
|
299
|
+
* Fixe la taille des colonnes selon le type de vue
|
300
|
+
* Sinon les colonnes s'adaptent à l'espace disponible
|
302
301
|
*/
|
303
|
-
|
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],
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
*
|
171
|
+
* Fixe la taille des colonnes selon le type de vue
|
172
|
+
* Sinon les colonnes s'adaptent à l'espace disponible
|
171
173
|
*/
|
172
|
-
|
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
|
-
|
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
|
*/
|
package/es/HiTable/BodyRow.js
CHANGED
@@ -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
|
*/
|
package/es/HiTable/HeaderCell.js
CHANGED
@@ -141,7 +141,7 @@ class HeaderCell extends React.PureComponent {
|
|
141
141
|
view,
|
142
142
|
dense,
|
143
143
|
width = cst.DEFAULT_WIDTHS[type][view],
|
144
|
-
|
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
|
-
|
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
|
-
|
365
|
+
fixedColumnWidth: PropTypes.bool,
|
363
366
|
/**
|
364
367
|
* Title alignement, est déduit de type par défaut
|
365
368
|
*/
|
package/es/HiTable/HiTable.js
CHANGED
@@ -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
|
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
|
-
|
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:
|
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
|
*/
|