@hipay/hipay-material-ui 1.0.0-beta.12 → 1.0.0-beta.14

package/HiDatePicker/HiDateRangePicker.js

@@ -50,6 +50,10 @@ var _DayPickerInput = require('react-day-picker/DayPickerInput');
 
 var _DayPickerInput2 = _interopRequireDefault(_DayPickerInput);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _withStyles = require('../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -92,6 +96,8 @@ var _stylesheet2 = _interopRequireDefault(_stylesheet);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+//  weak
+
 var HiDateRangePicker = function (_React$Component) {
     (0, _inherits3.default)(HiDateRangePicker, _React$Component);
 
@@ -100,11 +106,16 @@ var HiDateRangePicker = function (_React$Component) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiDateRangePicker.__proto__ || (0, _getPrototypeOf2.default)(HiDateRangePicker)).call(this));
 
+        _this.handleDayPickerFocus = function (name) {
+            return function () {
+                _this.setState({ focusedInput: name });
+            };
+        };
+
         _this.state = {
-            fromOpenedPanel: 'calendar',
             fromCurrentMonth: props.from ? props.from : new Date(),
-            toOpenedPanel: 'calendar',
-            toCurrentMonth: props.to ? props.to : new Date()
+            toCurrentMonth: props.to ? props.to : new Date(),
+            focusedInput: ''
         };
 
         _this.handleReset = _this.handleReset.bind(_this);
@@ -128,6 +139,8 @@ var HiDateRangePicker = function (_React$Component) {
         _this.handleYearClick = _this.handleYearClick.bind(_this);
         _this.handleYearClickFrom = _this.handleYearClickFrom.bind(_this);
         _this.handleYearClickTo = _this.handleYearClickTo.bind(_this);
+        _this.handleDayPickerFocus = _this.handleDayPickerFocus.bind(_this);
+        _this.handleDayPickerBlur = _this.handleDayPickerBlur.bind(_this);
 
         _this.openPanel = _this.openPanel.bind(_this);
 
@@ -324,6 +337,11 @@ var HiDateRangePicker = function (_React$Component) {
                 document.activeElement.blur();
             }
         }
+    }, {
+        key: 'handleDayPickerBlur',
+        value: function handleDayPickerBlur() {
+            this.setState({ focusedInput: '' });
+        }
     }, {
         key: 'openPanel',
         value: function openPanel(name, panel) {
@@ -367,9 +385,10 @@ var HiDateRangePicker = function (_React$Component) {
         }
     }, {
         key: 'renderOverlay',
-        value: function renderOverlay(name, propsOverlay) {
+        value: function renderOverlay(name, propsOverlay, staticPosition) {
             var rangeOverlayProps = (0, _extends3.default)({}, propsOverlay, {
-                side: name
+                side: name,
+                staticPosition: staticPosition
             });
 
             switch (this.state[name + 'OpenedPanel']) {
@@ -387,12 +406,12 @@ var HiDateRangePicker = function (_React$Component) {
     }, {
         key: 'renderOverlayFrom',
         value: function renderOverlayFrom(propsOverlay) {
-            return this.renderOverlay('from', propsOverlay);
+            return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
         }
     }, {
         key: 'renderOverlayTo',
         value: function renderOverlayTo(propsOverlay) {
-            return this.renderOverlay('to', propsOverlay);
+            return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
         }
     }, {
         key: 'renderMonthPickerOverlay',
@@ -439,7 +458,8 @@ var HiDateRangePicker = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this6 = this;
+            var _this6 = this,
+                _classNames;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -457,7 +477,8 @@ var HiDateRangePicker = function (_React$Component) {
                 to = _props.to,
                 translations = _props.translations,
                 id = _props.id,
-                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id']);
+                staticPosition = _props.staticPosition,
+                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'labelFrom', 'labelTo', 'locale', 'format', 'from', 'minimumDate', 'onReset', 'to', 'translations', 'id', 'staticPosition']);
             var _state = this.state,
                 fromCurrentMonth = _state.fromCurrentMonth,
                 toCurrentMonth = _state.toCurrentMonth;
@@ -575,32 +596,47 @@ var HiDateRangePicker = function (_React$Component) {
                 id: id + '-to'
             });
 
+            var fromClass = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'to'), (0, _defineProperty3.default)(_classNames, classes.dayPickerMargin, staticPosition === true && this.state.focusedInput === 'to'), _classNames));
+            var toClass = (0, _classnames2.default)(classes.toInput, (0, _defineProperty3.default)({}, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'));
+
             return _react2.default.createElement(
                 'div',
                 { className: classes.root },
                 _react2.default.createElement(
                     'div',
-                    { className: classes.fromInput },
-                    _react2.default.createElement(_DayPickerInput2.default, {
-                        ref: function ref(el) {
-                            _this6.fromInput = el;
-                        },
-                        value: from,
-                        hideOnDayClick: false,
-                        overlayComponent: this.renderOverlayFrom,
-                        dayPickerProps: fromDayPickerProps,
-                        component: _HiForm.HiTextField,
-                        inputProps: fromInputProps,
-                        format: enableTime ? format + ' HH:mm' : format,
-                        formatDate: _moment.formatDate,
-                        parseDate: _moment.parseDate,
-                        onDayChange: this.handleDayChangeFrom,
-                        placeholder: ''
-                    })
+                    {
+                        className: classes.fromInput,
+                        onFocus: this.handleDayPickerFocus('from'),
+                        onBlur: this.handleDayPickerBlur
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        { className: fromClass },
+                        _react2.default.createElement(_DayPickerInput2.default, {
+                            ref: function ref(el) {
+                                _this6.fromInput = el;
+                            },
+                            value: from,
+                            hideOnDayClick: false,
+                            overlayComponent: this.renderOverlayFrom,
+                            dayPickerProps: fromDayPickerProps,
+                            component: _HiForm.HiTextField,
+                            inputProps: fromInputProps,
+                            format: enableTime ? format + ' HH:mm' : format,
+                            formatDate: _moment.formatDate,
+                            parseDate: _moment.parseDate,
+                            onDayChange: this.handleDayChangeFrom,
+                            placeholder: ''
+                        })
+                    )
                 ),
                 _react2.default.createElement(
                     'div',
-                    { className: classes.toInput },
+                    {
+                        className: toClass,
+                        onFocus: this.handleDayPickerFocus('to'),
+                        onBlur: this.handleDayPickerBlur
+                    },
                     _react2.default.createElement(_DayPickerInput2.default, {
                         ref: function ref(el) {
                             _this6.toInput = el;
@@ -622,12 +658,13 @@ var HiDateRangePicker = function (_React$Component) {
         }
     }]);
     return HiDateRangePicker;
-}(_react2.default.Component); //  weak
+}(_react2.default.Component);
 
 HiDateRangePicker.defaultProps = {
     disabledDays: [],
     disablePastDays: false,
     disableFutureDays: false,
+    staticPosition: false,
     enableTime: false,
     format: 'YYYY-DD-MM',
     labelFrom: 'Start',
@@ -703,6 +740,10 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
      * Callback au reset de l'input
      */
     onReset: _propTypes2.default.func,
+    /**
+     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+     */
+    staticPosition: _propTypes2.default.bool,
     /**
      * Date de fin sélectionnée
      */

package/HiDatePicker/HiDateRangeSelector.js

@@ -191,11 +191,11 @@ var HiDateRangeSelector = function (_React$Component) {
                     if (selectedOption) {
                         _this.props.onChange('from', selectedOption.from.toDate());
                         _this.props.onChange('to', selectedOption.to.toDate());
-                        if (_this.props.returnSelectValue === true) {
-                            _this.props.onChange('period', value);
-                        }
                     }
                 }
+                if (_this.props.returnSelectValue === true) {
+                    _this.props.onChange('period', value);
+                }
             };
         };
 
@@ -252,7 +252,8 @@ var HiDateRangeSelector = function (_React$Component) {
                 translations = _props.translations,
                 classes = _props.classes,
                 selectProps = _props.selectProps,
-                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps']);
+                staticPosition = _props.staticPosition,
+                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes', 'selectProps', 'staticPosition']);
             var selectedPreset = this.state.selectedPreset;
 
 
@@ -284,7 +285,8 @@ var HiDateRangeSelector = function (_React$Component) {
                         translations: translations,
                         value: selectedPreset,
                         containerWidth: this.state.containerWidth,
-                        classes: { root: classes.dateSelect }
+                        classes: { root: classes.dateSelect },
+                        staticPosition: staticPosition
                     }, selectProps))
                 ),
                 _react2.default.createElement(
@@ -299,7 +301,8 @@ var HiDateRangeSelector = function (_React$Component) {
                         onChange: onChange,
                         onReset: this.handleReset,
                         disabled: disabled || selectedPreset !== 'custom',
-                        translations: translations
+                        translations: translations,
+                        staticPosition: staticPosition
                     }, props))
                 )
             );
@@ -313,6 +316,7 @@ HiDateRangeSelector.defaultProps = {
     defaultPreset: 'cd',
     enableTime: false,
     returnSelectValue: false,
+    staticPosition: false,
     locale: 'fr-FR',
     format: 'YYYY-DD-MM',
     translations: {
@@ -414,6 +418,10 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
      * Props passées au HiSelectField
      */
     selectProps: _propTypes2.default.object,
+    /**
+     * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+     */
+    staticPosition: _propTypes2.default.bool,
     /**
      * Date de fin sélectionnée
      */

package/HiDatePicker/Overlays/Overlay.js

@@ -34,10 +34,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var styles = exports.styles = function styles() {
     return {
         paper: {
-            position: 'absolute',
             width: '100%',
             zIndex: 10
         },
+        absolute: {
+            position: 'absolute'
+        },
+        relative: {
+            position: 'relative'
+        },
         left: {
             width: '200%',
             left: 0
@@ -57,9 +62,10 @@ var Overlay = function Overlay(_ref) {
 
     var classes = _ref.classes,
         children = _ref.children,
-        side = _ref.side;
+        side = _ref.side,
+        staticPosition = _ref.staticPosition;
 
-    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
+    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty3.default)(_classNames, classes.relative, staticPosition === true), _classNames));
 
     return _react2.default.createElement(
         _Paper2.default,

package/HiDatePicker/stylesheet.js

@@ -31,6 +31,13 @@ exports.default = function (theme) {
             width: 'calc(50% - 4px)',
             marginLeft: 4
         },
+        absolute: {
+            position: 'absolute'
+        },
+        dayPickerMargin: {
+            top: -337,
+            width: 'calc(100% - 4px)'
+        },
         // The container element
         container: {
             width: '100%',

package/HiSelect/HiSelect.js

@@ -485,7 +485,7 @@ HiSelect.defaultProps = {
 var _initialiseProps = function _initialiseProps() {
     var _this3 = this;
 
-    this.handleClick = function (event) {
+    this.handleClick = function () {
         if (_this3.state.open) {
             _this3.handleClose();
         } else {

package/HiTable/BodyCellBuilder.js

@@ -127,7 +127,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
                 onOpenDetails = _props.onOpenDetails,
                 lookedUp = _props.lookedUp,
                 fixedColumnWidth = _props.fixedColumnWidth,
-                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth']);
+                disableContextMenu = _props.disableContextMenu,
+                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu']);
 
 
             var layoutProps = {
@@ -150,7 +151,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
             if (typeof data !== 'undefined') {
 
                 var cellElement = void 0;
-                var hasContextMenu = true;
 
                 switch (type) {
                     case cst.TYPE_ACCOUNT:
@@ -200,7 +200,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
                             displayTime: props.displayTime,
                             sticky: sticky
                         });
-                        hasContextMenu = false;
                         break;
 
                     case cst.TYPE_ICON:
@@ -229,7 +228,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
                             view: view,
                             sticky: sticky
                         });
-                        hasContextMenu = false;
                         break;
 
                     case cst.TYPE_RATE:
@@ -242,7 +240,6 @@ var BodyCellBuilder = function (_React$PureComponent) {
                             view: view,
                             sticky: sticky
                         });
-                        hasContextMenu = false;
                         break;
 
                     case cst.TYPE_SENTINEL:
@@ -287,14 +284,14 @@ var BodyCellBuilder = function (_React$PureComponent) {
                         break;
                 }
 
-                cellContent = hasContextMenu ? _react2.default.createElement(
+                cellContent = disableContextMenu ? cellElement : _react2.default.createElement(
                     _reactContextmenu.ContextMenuTrigger,
                     {
                         id: 'hitable_context_menu_' + this.props.tabId,
                         collect: this.collectContextMenuDatas
                     },
                     cellElement
-                ) : cellElement;
+                );
             }
 
             return _react2.default.createElement(
@@ -308,7 +305,8 @@ var BodyCellBuilder = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right'
+    ellipsis: 'right',
+    disableContextMenu: true
 };
 exports.default = BodyCellBuilder;
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -340,6 +338,10 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Ellipsis
      */

package/HiTable/BodyCells/CellImage.js

@@ -83,6 +83,10 @@ var styles = exports.styles = function styles(theme) {
         },
         center: {
             textAlign: 'center'
+        },
+        tooltipContainer: {
+            display: 'flex',
+            alignItems: 'center'
         }
     };
 };
@@ -113,7 +117,7 @@ var CellImage = function (_React$PureComponent) {
 
             var tooltipContent = _react2.default.createElement(
                 'div',
-                null,
+                { className: classes.tooltipContainer },
                 _react2.default.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
                 _react2.default.createElement(
                     'span',

package/HiTable/HiTable.js

@@ -67,6 +67,10 @@ var _HiTableFooterScroll = require('./HiTableFooterScroll');
 
 var _HiTableFooterScroll2 = _interopRequireDefault(_HiTableFooterScroll);
 
+var _HiTableFooter = require('./HiTableFooter');
+
+var _HiTableFooter2 = _interopRequireDefault(_HiTableFooter);
+
 var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -707,7 +711,9 @@ var HiTable = function (_React$Component) {
                 groupBy = _props.groupBy,
                 lookupColumns = _props.lookupColumns,
                 loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth;
+                fixedColumnWidth = _props.fixedColumnWidth,
+                disableContextMenu = _props.disableContextMenu,
+                footerContent = _props.footerContent;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
                 isScrollToBottom = _state.isScrollToBottom,
@@ -716,6 +722,13 @@ var HiTable = function (_React$Component) {
 
             var headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
 
+            var nbColumnsDisplayed = 0;
+            orderedColumns.forEach(function (column) {
+                if (column.displayed !== false) {
+                    nbColumnsDisplayed += 1;
+                }
+            });
+
             return _react2.default.createElement(
                 'div',
                 { className: classes.root },
@@ -785,7 +798,8 @@ var HiTable = function (_React$Component) {
                             groupByIds: groupByIds,
                             lookupColumns: lookupColumns,
                             loading: loading,
-                            fixedColumnWidth: fixedColumnWidth
+                            fixedColumnWidth: fixedColumnWidth,
+                            disableContextMenu: disableContextMenu
                         }),
                         infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
@@ -794,7 +808,15 @@ var HiTable = function (_React$Component) {
                             maxAutoRequest: 3,
                             isScrollToBottom: isScrollToBottom,
                             translations: translations
-                        })
+                        }),
+                        !infiniteScroll && footerContent && _react2.default.createElement(
+                            _HiTableFooter2.default,
+                            {
+                                nbColumnsDisplayed: nbColumnsDisplayed,
+                                view: view
+                            },
+                            footerContent
+                        )
                     ),
                     _react2.default.createElement(_HiTableContextMenu2.default, {
                         tabId: tabId,
@@ -856,7 +878,8 @@ HiTable.defaultProps = {
     view: 'l',
     lookupColumns: [],
     loading: false,
-    fixedColumnWidth: true
+    fixedColumnWidth: true,
+    disableContextMenu: true
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -883,6 +906,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Active le filtre sur les colonnes filtrables
      */
@@ -892,6 +919,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Sinon les colonnes s'adaptent à l'espace disponible
      */
     fixedColumnWidth: _propTypes2.default.bool,
+    /**
+     * Ajoute un footer avec le contenu footerContent à l'intérieur
+     */
+    footerContent: _propTypes2.default.node,
     /**
      * Id de la colonne par laquelle sont regroupé les éléments
      */
@@ -966,6 +997,9 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback sur le tri d'une colonne
      * Passe l'id de la colonne et la direction du tri (ou false si tri par défaut)
+     *
+     * @param {string} column id
+     * @param {string} direction
      */
     onSort: _propTypes2.default.func,
     /**

package/HiTable/HiTableBody.js

@@ -287,7 +287,8 @@ var HiTableBody = function (_React$Component) {
                 sortedColumnId = _props.sortedColumnId,
                 lookupColumns = _props.lookupColumns,
                 loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth;
+                fixedColumnWidth = _props.fixedColumnWidth,
+                disableContextMenu = _props.disableContextMenu;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
                 openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -386,7 +387,8 @@ var HiTableBody = function (_React$Component) {
                     sticky: sticky,
                     tabId: tabId,
                     view: view,
-                    fixedColumnWidth: fixedColumnWidth
+                    fixedColumnWidth: fixedColumnWidth,
+                    disableContextMenu: disableContextMenu
                 });
 
                 if (hasChildren && openedParentRowId === row.rowId) {
@@ -416,7 +418,8 @@ var HiTableBody = function (_React$Component) {
                             dense: dense,
                             sticky: sticky,
                             isDetail: true,
-                            fixedColumnWidth: fixedColumnWidth
+                            fixedColumnWidth: fixedColumnWidth,
+                            disableContextMenu: disableContextMenu
                         };
 
                         tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
@@ -457,7 +460,8 @@ HiTableBody.defaultProps = {
     height: 450,
     sticky: true,
     view: 'l',
-    loading: false
+    loading: false,
+    disableContextMenu: true
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -485,6 +489,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Fixe la taille des colonnes selon le type de vue
      * Sinon les colonnes s'adaptent à l'espace disponible