@hipay/hipay-material-ui 1.0.0-beta.12 → 1.0.0-beta.14
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/HiDatePicker/HiDateRangePicker.js +69 -28
- package/HiDatePicker/HiDateRangeSelector.js +14 -6
- package/HiDatePicker/Overlays/Overlay.js +9 -3
- package/HiDatePicker/stylesheet.js +7 -0
- package/HiSelect/HiSelect.js +1 -1
- package/HiTable/BodyCellBuilder.js +10 -8
- package/HiTable/BodyCells/CellImage.js +5 -1
- package/HiTable/HiTable.js +38 -4
- package/HiTable/HiTableBody.js +12 -4
- package/HiTable/HiTableFooter.js +131 -0
- package/es/HiDatePicker/HiDateRangePicker.js +65 -27
- package/es/HiDatePicker/HiDateRangeSelector.js +15 -7
- package/es/HiDatePicker/Overlays/Overlay.js +10 -3
- package/es/HiDatePicker/stylesheet.js +7 -0
- package/es/HiSelect/HiSelect.js +1 -1
- package/es/HiTable/BodyCellBuilder.js +11 -9
- package/es/HiTable/BodyCells/CellImage.js +5 -1
- package/es/HiTable/HiTable.js +36 -5
- package/es/HiTable/HiTableBody.js +12 -4
- package/es/HiTable/HiTableFooter.js +74 -0
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/umd/hipay-material-ui.development.js +7087 -6960
- package/umd/hipay-material-ui.production.min.js +5 -5
@@ -0,0 +1,131 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.styles = undefined;
|
7
|
+
|
8
|
+
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
9
|
+
|
10
|
+
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
11
|
+
|
12
|
+
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
13
|
+
|
14
|
+
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
15
|
+
|
16
|
+
var _createClass2 = require('babel-runtime/helpers/createClass');
|
17
|
+
|
18
|
+
var _createClass3 = _interopRequireDefault(_createClass2);
|
19
|
+
|
20
|
+
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
21
|
+
|
22
|
+
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
23
|
+
|
24
|
+
var _inherits2 = require('babel-runtime/helpers/inherits');
|
25
|
+
|
26
|
+
var _inherits3 = _interopRequireDefault(_inherits2);
|
27
|
+
|
28
|
+
var _react = require('react');
|
29
|
+
|
30
|
+
var _react2 = _interopRequireDefault(_react);
|
31
|
+
|
32
|
+
var _Table = require('material-ui/Table');
|
33
|
+
|
34
|
+
var _styles = require('../styles');
|
35
|
+
|
36
|
+
var _propTypes = require('prop-types');
|
37
|
+
|
38
|
+
var _propTypes2 = _interopRequireDefault(_propTypes);
|
39
|
+
|
40
|
+
var _constants = require('./constants');
|
41
|
+
|
42
|
+
var cst = _interopRequireWildcard(_constants);
|
43
|
+
|
44
|
+
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; } }
|
45
|
+
|
46
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
47
|
+
|
48
|
+
var styles = exports.styles = function styles(theme) {
|
49
|
+
return {
|
50
|
+
tfoot: {
|
51
|
+
zIndex: 13
|
52
|
+
},
|
53
|
+
tfootCell: {
|
54
|
+
borderTop: '1px solid',
|
55
|
+
borderTopColor: theme.palette.line.stepper
|
56
|
+
},
|
57
|
+
patchDiv: {
|
58
|
+
position: 'relative',
|
59
|
+
border: 'none',
|
60
|
+
width: 0,
|
61
|
+
paddingRight: 0,
|
62
|
+
paddingTop: 0,
|
63
|
+
paddingBottom: 0,
|
64
|
+
height: '100%',
|
65
|
+
zIndex: 12,
|
66
|
+
backgroundColor: 'inherit'
|
67
|
+
}
|
68
|
+
};
|
69
|
+
};
|
70
|
+
|
71
|
+
var HiTableFooter = function (_React$Component) {
|
72
|
+
(0, _inherits3.default)(HiTableFooter, _React$Component);
|
73
|
+
|
74
|
+
function HiTableFooter() {
|
75
|
+
(0, _classCallCheck3.default)(this, HiTableFooter);
|
76
|
+
return (0, _possibleConstructorReturn3.default)(this, (HiTableFooter.__proto__ || (0, _getPrototypeOf2.default)(HiTableFooter)).apply(this, arguments));
|
77
|
+
}
|
78
|
+
|
79
|
+
(0, _createClass3.default)(HiTableFooter, [{
|
80
|
+
key: 'render',
|
81
|
+
value: function render() {
|
82
|
+
var _props = this.props,
|
83
|
+
classes = _props.classes,
|
84
|
+
nbColumnsDisplayed = _props.nbColumnsDisplayed,
|
85
|
+
view = _props.view;
|
86
|
+
|
87
|
+
|
88
|
+
return _react2.default.createElement(
|
89
|
+
_Table.TableFooter,
|
90
|
+
{ className: classes.tfoot },
|
91
|
+
_react2.default.createElement(
|
92
|
+
_Table.TableRow,
|
93
|
+
null,
|
94
|
+
_react2.default.createElement(_Table.TableCell, {
|
95
|
+
style: {
|
96
|
+
paddingLeft: cst.DEFAULT_PADDING[view]
|
97
|
+
},
|
98
|
+
key: 'footer-left-cell',
|
99
|
+
className: classes.patchDiv
|
100
|
+
}),
|
101
|
+
_react2.default.createElement(
|
102
|
+
_Table.TableCell,
|
103
|
+
{ colSpan: nbColumnsDisplayed, classes: { root: classes.tfootCell } },
|
104
|
+
this.props.children
|
105
|
+
),
|
106
|
+
_react2.default.createElement(_Table.TableCell, {
|
107
|
+
style: {
|
108
|
+
paddingLeft: cst.DEFAULT_PADDING[view]
|
109
|
+
},
|
110
|
+
key: 'footer-right-cell',
|
111
|
+
className: classes.patchDiv
|
112
|
+
})
|
113
|
+
)
|
114
|
+
);
|
115
|
+
}
|
116
|
+
}]);
|
117
|
+
return HiTableFooter;
|
118
|
+
}(_react2.default.Component);
|
119
|
+
|
120
|
+
HiTableFooter.propTypes = process.env.NODE_ENV !== "production" ? {
|
121
|
+
/**
|
122
|
+
* Nombre de colonnes affichées
|
123
|
+
*/
|
124
|
+
nbColumnsDisplayed: _propTypes2.default.number.isRequired,
|
125
|
+
/**
|
126
|
+
* Taille du tableau (L/M/S),
|
127
|
+
* définit l'espace entre les cellules et leurs tailles par default
|
128
|
+
*/
|
129
|
+
view: _propTypes2.default.oneOf(['l', 'm', 's'])
|
130
|
+
} : {};
|
131
|
+
exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiTableFooter' })(HiTableFooter);
|
@@ -6,6 +6,8 @@ import React from 'react';
|
|
6
6
|
import PropTypes from 'prop-types';
|
7
7
|
import { formatDate, parseDate } from 'react-day-picker/moment';
|
8
8
|
import DayPickerInput from 'react-day-picker/DayPickerInput';
|
9
|
+
import classNames from 'classnames';
|
10
|
+
|
9
11
|
import withStyles from '../styles/withStyles';
|
10
12
|
import { capitalizeFirstLetter } from '../utils/helpers';
|
11
13
|
import Caption from './Caption';
|
@@ -23,11 +25,14 @@ class HiDateRangePicker extends React.Component {
|
|
23
25
|
constructor(props) {
|
24
26
|
super();
|
25
27
|
|
28
|
+
this.handleDayPickerFocus = name => () => {
|
29
|
+
this.setState({ focusedInput: name });
|
30
|
+
};
|
31
|
+
|
26
32
|
this.state = {
|
27
|
-
fromOpenedPanel: 'calendar',
|
28
33
|
fromCurrentMonth: props.from ? props.from : new Date(),
|
29
|
-
|
30
|
-
|
34
|
+
toCurrentMonth: props.to ? props.to : new Date(),
|
35
|
+
focusedInput: ''
|
31
36
|
};
|
32
37
|
|
33
38
|
this.handleReset = this.handleReset.bind(this);
|
@@ -51,6 +56,8 @@ class HiDateRangePicker extends React.Component {
|
|
51
56
|
this.handleYearClick = this.handleYearClick.bind(this);
|
52
57
|
this.handleYearClickFrom = this.handleYearClickFrom.bind(this);
|
53
58
|
this.handleYearClickTo = this.handleYearClickTo.bind(this);
|
59
|
+
this.handleDayPickerFocus = this.handleDayPickerFocus.bind(this);
|
60
|
+
this.handleDayPickerBlur = this.handleDayPickerBlur.bind(this);
|
54
61
|
|
55
62
|
this.openPanel = this.openPanel.bind(this);
|
56
63
|
|
@@ -207,6 +214,10 @@ class HiDateRangePicker extends React.Component {
|
|
207
214
|
}
|
208
215
|
}
|
209
216
|
|
217
|
+
handleDayPickerBlur() {
|
218
|
+
this.setState({ focusedInput: '' });
|
219
|
+
}
|
220
|
+
|
210
221
|
openPanel(name, panel) {
|
211
222
|
this.setState({
|
212
223
|
[`${name}OpenedPanel`]: panel
|
@@ -239,9 +250,10 @@ class HiDateRangePicker extends React.Component {
|
|
239
250
|
return this.renderNavbar('to', propsNavbar);
|
240
251
|
}
|
241
252
|
|
242
|
-
renderOverlay(name, propsOverlay) {
|
253
|
+
renderOverlay(name, propsOverlay, staticPosition) {
|
243
254
|
const rangeOverlayProps = _extends({}, propsOverlay, {
|
244
|
-
side: name
|
255
|
+
side: name,
|
256
|
+
staticPosition
|
245
257
|
});
|
246
258
|
|
247
259
|
switch (this.state[`${name}OpenedPanel`]) {
|
@@ -257,10 +269,10 @@ class HiDateRangePicker extends React.Component {
|
|
257
269
|
}
|
258
270
|
}
|
259
271
|
renderOverlayFrom(propsOverlay) {
|
260
|
-
return this.renderOverlay('from', propsOverlay);
|
272
|
+
return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
|
261
273
|
}
|
262
274
|
renderOverlayTo(propsOverlay) {
|
263
|
-
return this.renderOverlay('to', propsOverlay);
|
275
|
+
return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
|
264
276
|
}
|
265
277
|
|
266
278
|
renderMonthPickerOverlay(name, propsOverlay) {
|
@@ -315,9 +327,10 @@ class HiDateRangePicker extends React.Component {
|
|
315
327
|
onReset,
|
316
328
|
to,
|
317
329
|
translations,
|
318
|
-
id
|
330
|
+
id,
|
331
|
+
staticPosition
|
319
332
|
} = _props,
|
320
|
-
props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
|
333
|
+
props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
|
321
334
|
|
322
335
|
const { fromCurrentMonth, toCurrentMonth } = this.state;
|
323
336
|
|
@@ -429,32 +442,52 @@ class HiDateRangePicker extends React.Component {
|
|
429
442
|
id: `${id}-to`
|
430
443
|
});
|
431
444
|
|
445
|
+
let fromClass = classNames({
|
446
|
+
[classes.absolute]: staticPosition === true && this.state.focusedInput === 'to',
|
447
|
+
[classes.dayPickerMargin]: staticPosition === true && this.state.focusedInput === 'to'
|
448
|
+
});
|
449
|
+
let toClass = classNames(classes.toInput, {
|
450
|
+
[classes.absolute]: staticPosition === true && this.state.focusedInput === 'from'
|
451
|
+
});
|
452
|
+
|
432
453
|
return React.createElement(
|
433
454
|
'div',
|
434
455
|
{ className: classes.root },
|
435
456
|
React.createElement(
|
436
457
|
'div',
|
437
|
-
{
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
458
|
+
{
|
459
|
+
className: classes.fromInput,
|
460
|
+
onFocus: this.handleDayPickerFocus('from'),
|
461
|
+
onBlur: this.handleDayPickerBlur
|
462
|
+
},
|
463
|
+
React.createElement(
|
464
|
+
'div',
|
465
|
+
{ className: fromClass },
|
466
|
+
React.createElement(DayPickerInput, {
|
467
|
+
ref: el => {
|
468
|
+
this.fromInput = el;
|
469
|
+
},
|
470
|
+
value: from,
|
471
|
+
hideOnDayClick: false,
|
472
|
+
overlayComponent: this.renderOverlayFrom,
|
473
|
+
dayPickerProps: fromDayPickerProps,
|
474
|
+
component: HiTextField,
|
475
|
+
inputProps: fromInputProps,
|
476
|
+
format: enableTime ? `${format} HH:mm` : format,
|
477
|
+
formatDate: formatDate,
|
478
|
+
parseDate: parseDate,
|
479
|
+
onDayChange: this.handleDayChangeFrom,
|
480
|
+
placeholder: ''
|
481
|
+
})
|
482
|
+
)
|
454
483
|
),
|
455
484
|
React.createElement(
|
456
485
|
'div',
|
457
|
-
{
|
486
|
+
{
|
487
|
+
className: toClass,
|
488
|
+
onFocus: this.handleDayPickerFocus('to'),
|
489
|
+
onBlur: this.handleDayPickerBlur
|
490
|
+
},
|
458
491
|
React.createElement(DayPickerInput, {
|
459
492
|
ref: el => {
|
460
493
|
this.toInput = el;
|
@@ -480,6 +513,7 @@ HiDateRangePicker.defaultProps = {
|
|
480
513
|
disabledDays: [],
|
481
514
|
disablePastDays: false,
|
482
515
|
disableFutureDays: false,
|
516
|
+
staticPosition: false,
|
483
517
|
enableTime: false,
|
484
518
|
format: 'YYYY-DD-MM',
|
485
519
|
labelFrom: 'Start',
|
@@ -555,6 +589,10 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
555
589
|
* Callback au reset de l'input
|
556
590
|
*/
|
557
591
|
onReset: PropTypes.func,
|
592
|
+
/**
|
593
|
+
* Si true, le calendrier sera dans une div static plutot que dans une popper absolute
|
594
|
+
*/
|
595
|
+
staticPosition: PropTypes.bool,
|
558
596
|
/**
|
559
597
|
* Date de fin sélectionnée
|
560
598
|
*/
|
@@ -127,11 +127,11 @@ class HiDateRangeSelector extends React.Component {
|
|
127
127
|
if (selectedOption) {
|
128
128
|
this.props.onChange('from', selectedOption.from.toDate());
|
129
129
|
this.props.onChange('to', selectedOption.to.toDate());
|
130
|
-
if (this.props.returnSelectValue === true) {
|
131
|
-
this.props.onChange('period', value);
|
132
|
-
}
|
133
130
|
}
|
134
131
|
}
|
132
|
+
if (this.props.returnSelectValue === true) {
|
133
|
+
this.props.onChange('period', value);
|
134
|
+
}
|
135
135
|
};
|
136
136
|
|
137
137
|
this.state = {
|
@@ -177,9 +177,10 @@ class HiDateRangeSelector extends React.Component {
|
|
177
177
|
to,
|
178
178
|
translations,
|
179
179
|
classes,
|
180
|
-
selectProps
|
180
|
+
selectProps,
|
181
|
+
staticPosition
|
181
182
|
} = _props,
|
182
|
-
props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps']);
|
183
|
+
props = _objectWithoutProperties(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
|
183
184
|
|
184
185
|
const { selectedPreset } = this.state;
|
185
186
|
|
@@ -209,7 +210,8 @@ class HiDateRangeSelector extends React.Component {
|
|
209
210
|
translations: translations,
|
210
211
|
value: selectedPreset,
|
211
212
|
containerWidth: this.state.containerWidth,
|
212
|
-
classes: { root: classes.dateSelect }
|
213
|
+
classes: { root: classes.dateSelect },
|
214
|
+
staticPosition: staticPosition
|
213
215
|
}, selectProps))
|
214
216
|
),
|
215
217
|
React.createElement(
|
@@ -224,7 +226,8 @@ class HiDateRangeSelector extends React.Component {
|
|
224
226
|
onChange: onChange,
|
225
227
|
onReset: this.handleReset,
|
226
228
|
disabled: disabled || selectedPreset !== 'custom',
|
227
|
-
translations: translations
|
229
|
+
translations: translations,
|
230
|
+
staticPosition: staticPosition
|
228
231
|
}, props))
|
229
232
|
)
|
230
233
|
);
|
@@ -236,6 +239,7 @@ HiDateRangeSelector.defaultProps = {
|
|
236
239
|
defaultPreset: 'cd',
|
237
240
|
enableTime: false,
|
238
241
|
returnSelectValue: false,
|
242
|
+
staticPosition: false,
|
239
243
|
locale: 'fr-FR',
|
240
244
|
format: 'YYYY-DD-MM',
|
241
245
|
translations: {
|
@@ -337,6 +341,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
337
341
|
* Props passées au HiSelectField
|
338
342
|
*/
|
339
343
|
selectProps: PropTypes.object,
|
344
|
+
/**
|
345
|
+
* Si true, le calendrier sera dans une div static plutot que dans une popper absolute
|
346
|
+
*/
|
347
|
+
staticPosition: PropTypes.bool,
|
340
348
|
/**
|
341
349
|
* Date de fin sélectionnée
|
342
350
|
*/
|
@@ -9,10 +9,15 @@ import withStyles from '../../styles/withStyles';
|
|
9
9
|
|
10
10
|
export const styles = () => ({
|
11
11
|
paper: {
|
12
|
-
position: 'absolute',
|
13
12
|
width: '100%',
|
14
13
|
zIndex: 10
|
15
14
|
},
|
15
|
+
absolute: {
|
16
|
+
position: 'absolute'
|
17
|
+
},
|
18
|
+
relative: {
|
19
|
+
position: 'relative'
|
20
|
+
},
|
16
21
|
left: {
|
17
22
|
width: '200%',
|
18
23
|
left: 0
|
@@ -26,10 +31,12 @@ export const styles = () => ({
|
|
26
31
|
}
|
27
32
|
});
|
28
33
|
|
29
|
-
const Overlay = ({ classes, children, side }) => {
|
34
|
+
const Overlay = ({ classes, children, side, staticPosition }) => {
|
30
35
|
const paperClass = classNames(classes.paper, {
|
31
36
|
[classes.left]: side === 'from',
|
32
|
-
[classes.right]: side === 'to'
|
37
|
+
[classes.right]: side === 'to',
|
38
|
+
[classes.absolute]: staticPosition !== true,
|
39
|
+
[classes.relative]: staticPosition === true
|
33
40
|
});
|
34
41
|
|
35
42
|
return React.createElement(
|
@@ -19,6 +19,13 @@ export default (theme => ({
|
|
19
19
|
width: 'calc(50% - 4px)',
|
20
20
|
marginLeft: 4
|
21
21
|
},
|
22
|
+
absolute: {
|
23
|
+
position: 'absolute'
|
24
|
+
},
|
25
|
+
dayPickerMargin: {
|
26
|
+
top: -337,
|
27
|
+
width: 'calc(100% - 4px)'
|
28
|
+
},
|
22
29
|
// The container element
|
23
30
|
container: {
|
24
31
|
width: '100%',
|
package/es/HiSelect/HiSelect.js
CHANGED
@@ -75,9 +75,10 @@ export default class BodyCellBuilder extends React.PureComponent {
|
|
75
75
|
childrenCount,
|
76
76
|
onOpenDetails,
|
77
77
|
lookedUp,
|
78
|
-
fixedColumnWidth
|
78
|
+
fixedColumnWidth,
|
79
|
+
disableContextMenu
|
79
80
|
} = _props,
|
80
|
-
props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth']);
|
81
|
+
props = _objectWithoutProperties(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu']);
|
81
82
|
|
82
83
|
const layoutProps = {
|
83
84
|
type,
|
@@ -99,7 +100,6 @@ export default class BodyCellBuilder extends React.PureComponent {
|
|
99
100
|
if (typeof data !== 'undefined') {
|
100
101
|
|
101
102
|
let cellElement;
|
102
|
-
let hasContextMenu = true;
|
103
103
|
|
104
104
|
switch (type) {
|
105
105
|
case cst.TYPE_ACCOUNT:
|
@@ -149,7 +149,6 @@ export default class BodyCellBuilder extends React.PureComponent {
|
|
149
149
|
displayTime: props.displayTime,
|
150
150
|
sticky: sticky
|
151
151
|
});
|
152
|
-
hasContextMenu = false;
|
153
152
|
break;
|
154
153
|
|
155
154
|
case cst.TYPE_ICON:
|
@@ -178,7 +177,6 @@ export default class BodyCellBuilder extends React.PureComponent {
|
|
178
177
|
view: view,
|
179
178
|
sticky: sticky
|
180
179
|
});
|
181
|
-
hasContextMenu = false;
|
182
180
|
break;
|
183
181
|
|
184
182
|
case cst.TYPE_RATE:
|
@@ -191,7 +189,6 @@ export default class BodyCellBuilder extends React.PureComponent {
|
|
191
189
|
view: view,
|
192
190
|
sticky: sticky
|
193
191
|
});
|
194
|
-
hasContextMenu = false;
|
195
192
|
break;
|
196
193
|
|
197
194
|
case cst.TYPE_SENTINEL:
|
@@ -236,14 +233,14 @@ export default class BodyCellBuilder extends React.PureComponent {
|
|
236
233
|
break;
|
237
234
|
}
|
238
235
|
|
239
|
-
cellContent =
|
236
|
+
cellContent = disableContextMenu ? cellElement : React.createElement(
|
240
237
|
ContextMenuTrigger,
|
241
238
|
{
|
242
239
|
id: `hitable_context_menu_${this.props.tabId}`,
|
243
240
|
collect: this.collectContextMenuDatas
|
244
241
|
},
|
245
242
|
cellElement
|
246
|
-
)
|
243
|
+
);
|
247
244
|
}
|
248
245
|
|
249
246
|
return React.createElement(
|
@@ -254,7 +251,8 @@ export default class BodyCellBuilder extends React.PureComponent {
|
|
254
251
|
}
|
255
252
|
}
|
256
253
|
BodyCellBuilder.defaultProps = {
|
257
|
-
ellipsis: 'right'
|
254
|
+
ellipsis: 'right',
|
255
|
+
disableContextMenu: true
|
258
256
|
};
|
259
257
|
BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
|
260
258
|
/**
|
@@ -285,6 +283,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
285
283
|
* Densité, défini la hauteur de la ligne
|
286
284
|
*/
|
287
285
|
dense: PropTypes.bool,
|
286
|
+
/**
|
287
|
+
* Active/désactive le menu contextuel au clic droit sur les cellules du tableau
|
288
|
+
*/
|
289
|
+
disableContextMenu: PropTypes.bool.isRequired,
|
288
290
|
/**
|
289
291
|
* Ellipsis
|
290
292
|
*/
|
@@ -38,6 +38,10 @@ export const styles = theme => ({
|
|
38
38
|
},
|
39
39
|
center: {
|
40
40
|
textAlign: 'center'
|
41
|
+
},
|
42
|
+
tooltipContainer: {
|
43
|
+
display: 'flex',
|
44
|
+
alignItems: 'center'
|
41
45
|
}
|
42
46
|
});
|
43
47
|
|
@@ -53,7 +57,7 @@ class CellImage extends React.PureComponent {
|
|
53
57
|
|
54
58
|
const tooltipContent = React.createElement(
|
55
59
|
'div',
|
56
|
-
|
60
|
+
{ className: classes.tooltipContainer },
|
57
61
|
React.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
|
58
62
|
React.createElement(
|
59
63
|
'span',
|
package/es/HiTable/HiTable.js
CHANGED
@@ -5,10 +5,11 @@ import ArrowUp from 'mdi-material-ui/ArrowUp';
|
|
5
5
|
import isRequiredIf from 'react-proptype-conditional-require';
|
6
6
|
import HiButton from '../HiButton';
|
7
7
|
|
8
|
-
import { withStyles
|
8
|
+
import { withStyles } from '../styles';
|
9
9
|
import HiTableHead from './HiTableHead';
|
10
10
|
import HiTableBody from './HiTableBody';
|
11
11
|
import HiTableFooterScroll from './HiTableFooterScroll';
|
12
|
+
import HiTableFooter from './HiTableFooter';
|
12
13
|
import * as cst from './constants';
|
13
14
|
import HiTableContextMenu from './HiTableContextMenu';
|
14
15
|
|
@@ -583,13 +584,22 @@ class HiTable extends React.Component {
|
|
583
584
|
groupBy,
|
584
585
|
lookupColumns,
|
585
586
|
loading,
|
586
|
-
fixedColumnWidth
|
587
|
+
fixedColumnWidth,
|
588
|
+
disableContextMenu,
|
589
|
+
footerContent
|
587
590
|
} = this.props;
|
588
591
|
|
589
592
|
const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
|
590
593
|
|
591
594
|
const headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
|
592
595
|
|
596
|
+
let nbColumnsDisplayed = 0;
|
597
|
+
orderedColumns.forEach(column => {
|
598
|
+
if (column.displayed !== false) {
|
599
|
+
nbColumnsDisplayed += 1;
|
600
|
+
}
|
601
|
+
});
|
602
|
+
|
593
603
|
return React.createElement(
|
594
604
|
'div',
|
595
605
|
{ className: classes.root },
|
@@ -657,7 +667,8 @@ class HiTable extends React.Component {
|
|
657
667
|
groupByIds: groupByIds,
|
658
668
|
lookupColumns: lookupColumns,
|
659
669
|
loading: loading,
|
660
|
-
fixedColumnWidth: fixedColumnWidth
|
670
|
+
fixedColumnWidth: fixedColumnWidth,
|
671
|
+
disableContextMenu: disableContextMenu
|
661
672
|
}),
|
662
673
|
infiniteScroll && React.createElement(HiTableFooterScroll, {
|
663
674
|
tabId: tabId,
|
@@ -666,7 +677,15 @@ class HiTable extends React.Component {
|
|
666
677
|
maxAutoRequest: 3,
|
667
678
|
isScrollToBottom: isScrollToBottom,
|
668
679
|
translations: translations
|
669
|
-
})
|
680
|
+
}),
|
681
|
+
!infiniteScroll && footerContent && React.createElement(
|
682
|
+
HiTableFooter,
|
683
|
+
{
|
684
|
+
nbColumnsDisplayed: nbColumnsDisplayed,
|
685
|
+
view: view
|
686
|
+
},
|
687
|
+
footerContent
|
688
|
+
)
|
670
689
|
),
|
671
690
|
React.createElement(HiTableContextMenu, {
|
672
691
|
tabId: tabId,
|
@@ -724,7 +743,8 @@ HiTable.defaultProps = {
|
|
724
743
|
view: 'l',
|
725
744
|
lookupColumns: [],
|
726
745
|
loading: false,
|
727
|
-
fixedColumnWidth: true
|
746
|
+
fixedColumnWidth: true,
|
747
|
+
disableContextMenu: true
|
728
748
|
};
|
729
749
|
HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
|
730
750
|
/**
|
@@ -751,6 +771,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
751
771
|
* Densité d'affichage (joue sur la hauteur des lignes)
|
752
772
|
*/
|
753
773
|
dense: PropTypes.bool,
|
774
|
+
/**
|
775
|
+
* Active/désactive le menu contextuel au clic droit sur les cellules du tableau
|
776
|
+
*/
|
777
|
+
disableContextMenu: PropTypes.bool.isRequired,
|
754
778
|
/**
|
755
779
|
* Active le filtre sur les colonnes filtrables
|
756
780
|
*/
|
@@ -760,6 +784,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
760
784
|
* Sinon les colonnes s'adaptent à l'espace disponible
|
761
785
|
*/
|
762
786
|
fixedColumnWidth: PropTypes.bool,
|
787
|
+
/**
|
788
|
+
* Ajoute un footer avec le contenu footerContent à l'intérieur
|
789
|
+
*/
|
790
|
+
footerContent: PropTypes.node,
|
763
791
|
/**
|
764
792
|
* Id de la colonne par laquelle sont regroupé les éléments
|
765
793
|
*/
|
@@ -832,6 +860,9 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
832
860
|
/**
|
833
861
|
* Fonction de callback sur le tri d'une colonne
|
834
862
|
* Passe l'id de la colonne et la direction du tri (ou false si tri par défaut)
|
863
|
+
*
|
864
|
+
* @param {string} column id
|
865
|
+
* @param {string} direction
|
835
866
|
*/
|
836
867
|
onSort: PropTypes.func,
|
837
868
|
/**
|
@@ -194,7 +194,8 @@ class HiTableBody extends React.Component {
|
|
194
194
|
sortedColumnId,
|
195
195
|
lookupColumns,
|
196
196
|
loading,
|
197
|
-
fixedColumnWidth
|
197
|
+
fixedColumnWidth,
|
198
|
+
disableContextMenu
|
198
199
|
} = this.props;
|
199
200
|
|
200
201
|
const { openedParentRowId, openedDetailsRowIdList } = this.state;
|
@@ -292,7 +293,8 @@ class HiTableBody extends React.Component {
|
|
292
293
|
sticky,
|
293
294
|
tabId,
|
294
295
|
view,
|
295
|
-
fixedColumnWidth
|
296
|
+
fixedColumnWidth,
|
297
|
+
disableContextMenu
|
296
298
|
});
|
297
299
|
|
298
300
|
if (hasChildren && openedParentRowId === row.rowId) {
|
@@ -322,7 +324,8 @@ class HiTableBody extends React.Component {
|
|
322
324
|
dense,
|
323
325
|
sticky,
|
324
326
|
isDetail: true,
|
325
|
-
fixedColumnWidth
|
327
|
+
fixedColumnWidth,
|
328
|
+
disableContextMenu
|
326
329
|
};
|
327
330
|
|
328
331
|
tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
|
@@ -363,7 +366,8 @@ HiTableBody.defaultProps = {
|
|
363
366
|
height: 450,
|
364
367
|
sticky: true,
|
365
368
|
view: 'l',
|
366
|
-
loading: false
|
369
|
+
loading: false,
|
370
|
+
disableContextMenu: true
|
367
371
|
};
|
368
372
|
HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
|
369
373
|
/**
|
@@ -391,6 +395,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
391
395
|
* Densité d'affichage (joue sur la hauteur des lignes)
|
392
396
|
*/
|
393
397
|
dense: PropTypes.bool,
|
398
|
+
/**
|
399
|
+
* Active/désactive le menu contextuel au clic droit sur les cellules du tableau
|
400
|
+
*/
|
401
|
+
disableContextMenu: PropTypes.bool.isRequired,
|
394
402
|
/**
|
395
403
|
* Fixe la taille des colonnes selon le type de vue
|
396
404
|
* Sinon les colonnes s'adaptent à l'espace disponible
|