@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.
- package/HiBreadcrumb/HiBreadcrumb.js +143 -0
- package/HiBreadcrumb/HiStep.js +123 -0
- package/HiBreadcrumb/HiStepConnector.js +142 -0
- package/HiBreadcrumb/HiStepIcon.js +134 -0
- package/HiBreadcrumb/HiStepLabel.js +182 -0
- package/HiBreadcrumb/HiStepper.js +125 -0
- package/HiBreadcrumb/index.js +16 -0
- package/HiDatePicker/HiDateRangeSelector.js +1 -1
- 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/HiFormControl.js +19 -27
- package/HiForm/HiInput.js +1 -1
- package/HiForm/HiSearchField.js +1 -1
- package/HiForm/index.js +9 -0
- package/HiPdfReader/HiPdfReader.js +282 -0
- package/HiPdfReader/index.js +16 -0
- package/HiPins/HiPins.js +0 -1
- package/HiSelect/HiSuggestSelect.js +2 -0
- package/HiSelectableList/HiSelectableListItem.js +23 -11
- package/HiTable/BodyCellBuilder.js +7 -8
- package/HiTable/BodyCells/CellLayout.js +25 -19
- package/HiTable/BodyCells/CellSentinel.js +12 -4
- package/HiTable/BodyCells/CellStatus.js +5 -1
- package/HiTable/BodyCells/CellText.js +2 -1
- package/HiTable/BodyRow.js +7 -1
- package/HiTable/ColumnFilter.js +5 -1
- package/HiTable/HeaderCell.js +17 -14
- package/HiTable/HiTable.js +25 -9
- package/HiTable/HiTableBody.js +38 -14
- package/HiTable/HiTableHead.js +22 -5
- package/HiTable/OrderColumns.js +6 -2
- package/es/HiBreadcrumb/HiBreadcrumb.js +73 -0
- package/es/HiBreadcrumb/HiStep.js +93 -0
- package/es/HiBreadcrumb/HiStepConnector.js +83 -0
- package/es/HiBreadcrumb/HiStepIcon.js +81 -0
- package/es/HiBreadcrumb/HiStepLabel.js +154 -0
- package/es/HiBreadcrumb/HiStepper.js +62 -0
- package/es/HiBreadcrumb/index.js +1 -0
- package/es/HiDatePicker/HiDateRangeSelector.js +1 -1
- 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/HiFormControl.js +15 -15
- package/es/HiForm/HiInput.js +1 -1
- package/es/HiForm/HiSearchField.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/HiPins/HiPins.js +0 -1
- package/es/HiSelect/HiSuggestSelect.js +2 -0
- package/es/HiSelectableList/HiSelectableListItem.js +22 -11
- package/es/HiTable/BodyCellBuilder.js +8 -9
- package/es/HiTable/BodyCells/CellLayout.js +27 -21
- package/es/HiTable/BodyCells/CellSentinel.js +12 -4
- package/es/HiTable/BodyCells/CellStatus.js +5 -1
- package/es/HiTable/BodyCells/CellText.js +2 -1
- package/es/HiTable/BodyRow.js +7 -1
- package/es/HiTable/ColumnFilter.js +5 -1
- package/es/HiTable/HeaderCell.js +17 -14
- package/es/HiTable/HiTable.js +25 -9
- package/es/HiTable/HiTableBody.js +34 -11
- package/es/HiTable/HiTableHead.js +17 -5
- package/es/HiTable/OrderColumns.js +6 -2
- 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 +2965 -2659
- 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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
*
|
352
|
+
* Fixe la taille des colonnes selon le type de vue
|
353
|
+
* Sinon les colonnes s'adaptent à l'espace disponible
|
355
354
|
*/
|
356
|
-
|
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
|
-
|
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
|
-
|
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
|
-
*
|
254
|
+
* Fixe la taille des colonnes selon le type de vue
|
255
|
+
* Sinon les colonnes s'adaptent à l'espace disponible
|
250
256
|
*/
|
251
|
-
|
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
|
-
|
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 })
|
package/HiTable/BodyRow.js
CHANGED
@@ -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
|
*/
|
package/HiTable/ColumnFilter.js
CHANGED
@@ -345,7 +345,11 @@ var ColumnFilter = function (_React$Component) {
|
|
345
345
|
_react2.default.createElement(
|
346
346
|
'div',
|
347
347
|
{ className: classes.menuItemFilter },
|
348
|
-
|
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
|
{
|
package/HiTable/HeaderCell.js
CHANGED
@@ -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
|
-
|
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
|
-
|
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
|
-
|
452
|
+
fixedColumnWidth: _propTypes2.default.bool,
|
450
453
|
/**
|
451
454
|
* Title alignement, est déduit de type par défaut
|
452
455
|
*/
|
package/HiTable/HiTable.js
CHANGED
@@ -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);
|
package/HiTable/HiTableBody.js
CHANGED
@@ -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
|
-
|
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:
|
424
|
-
style: {
|
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
|
*/
|