@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.3

package/HiTable/HiTableBody.js

@@ -5,18 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _values = require('babel-runtime/core-js/object/values');
-
-var _values2 = _interopRequireDefault(_values);
-
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -55,16 +43,6 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _Table = require('material-ui/Table');
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _moment = require('moment');
-
-var _moment2 = _interopRequireDefault(_moment);
-
-require('moment/locale/fr');
-
 var _styles = require('../styles');
 
 var _BodyRow = require('./BodyRow');
@@ -83,9 +61,11 @@ var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
 
-var _lodash = require('lodash');
+var _HiTableHead = require('./HiTableHead');
+
+var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
 
-var _ = _interopRequireWildcard(_lodash);
+var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
 
 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; } }
 
@@ -95,14 +75,12 @@ var styles = exports.styles = function styles(theme) {
     return {
         tbody: {
             position: 'relative',
-            width: '100%',
+            display: 'block' /* seperates the tbody from the header */
+            , width: '100%',
             overflowX: 'hidden',
             overflowY: 'auto',
             zIndex: 11
         },
-        tbodyFixedWidth: {
-            display: 'block' /* seperates the tbody from the header */
-        },
         tbodyRows: {
             backgroundColor: theme.palette.background3
         },
@@ -150,7 +128,7 @@ var HiTableBody = function (_React$Component) {
     function HiTableBody(props) {
         (0, _classCallCheck3.default)(this, HiTableBody);
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this, props));
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this));
 
         _this.buildIndicator = function (row) {
             var _this$props = _this.props,
@@ -183,52 +161,17 @@ var HiTableBody = function (_React$Component) {
 
         _this.state = {
             openedParentRowId: null,
-            openedDetailsRowIdList: [],
-            dataSource: props.dataSource,
-            groupByIds: {}
+            openedDetailsRowIdList: []
         };
 
-        if (props.groupBy && props.dataSource) {
-            var groupByIds = {};
-            props.dataSource.map(function (row) {
-                var value = row.datas[props.groupBy].value;
-                if (!groupByIds.hasOwnProperty(value)) {
-                    groupByIds[value] = [];
-                }
-                groupByIds[value].push(row.datas);
-            });
-            _this.state.groupByIds = groupByIds;
-        }
-
         _this.buildIndicator = _this.buildIndicator.bind(_this);
         _this.setOpenedParentRowId = _this.setOpenedParentRowId.bind(_this);
         _this.toggleOpenedDetailsRowId = _this.toggleOpenedDetailsRowId.bind(_this);
         _this.positionStickyRowNextButton = _this.positionStickyRowNextButton.bind(_this);
-
-        //Monkeypatch TableRow
-        /*var that = this;
-        TableRow.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState){
-          return (this.state.hovered !== nextState.hovered || this.props.selected !== nextProps.selected) && true;
-        }*/
         return _this;
     }
 
     (0, _createClass3.default)(HiTableBody, [{
-        key: 'deepCompare',
-        value: function deepCompare(object, base) {
-            var that = this;
-            return _.transform(object, function (result, value, key) {
-                if (!_.isEqual(value, base[key])) {
-                    result[key] = _.isObject(value) && _.isObject(base[key]) ? that.deepCompare(value, base[key]) : value;
-                }
-            }).length > 0;
-        }
-
-        /*shouldComponentUpdate(nextProps, nextState){
-          this.deepCompare(this.props,nextProps) || this.deepCompare(this.state,nextState);
-        }*/
-
-    }, {
         key: 'componentDidMount',
         value: function componentDidMount() {
             this.positionStickyRowNextButton();
@@ -238,9 +181,6 @@ var HiTableBody = function (_React$Component) {
         value: function componentDidUpdate(prevProps, prevState, prevContext) {
             this.positionStickyRowNextButton();
         }
-    }, {
-        key: 'setOpenedParentRowId',
-
 
         /**
          * Définit l'id de la ligne parente "ouverte" ou null
@@ -249,6 +189,9 @@ var HiTableBody = function (_React$Component) {
          *
          * @param row
          */
+
+    }, {
+        key: 'setOpenedParentRowId',
         value: function setOpenedParentRowId(row) {
             this.setState(function (prevState) {
                 return {
@@ -278,7 +221,7 @@ var HiTableBody = function (_React$Component) {
                             }
                             button.parentElement.style.top = '4px';
                         }
-                        var label = button.previousSibling;
+                        var label = button.previousSibling.previousSibling;
                         button.style.left = tableContainer.offsetWidth - label.offsetWidth - 48 - 160 + 'px';
                     }
                 });
@@ -288,22 +231,18 @@ var HiTableBody = function (_React$Component) {
         /**
          * Définit les id des lignes dont les détails sont affichés ou null
          * (ajoute une ligne pour chaque détails)
-         * vérifie aussi le type du détail
          *
          * @param rowId
-         * @param type
          */
 
     }, {
         key: 'toggleOpenedDetailsRowId',
-        value: function toggleOpenedDetailsRowId(rowId, type) {
+        value: function toggleOpenedDetailsRowId(rowId) {
             this.setState(function (prevState) {
                 return {
-                    openedDetailsRowIdList: prevState.openedDetailsRowIdList.find(function (item) {
-                        return item.id === rowId && item.type === type;
-                    }) ? prevState.openedDetailsRowIdList.filter(function (item) {
-                        return item.id !== rowId || item.type !== type;
-                    }) : [].concat((0, _toConsumableArray3.default)(prevState.openedDetailsRowIdList), [{ id: rowId, type: type }])
+                    openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(function (id) {
+                        return id !== rowId;
+                    }) : [].concat((0, _toConsumableArray3.default)(prevState.openedDetailsRowIdList), [rowId])
                 };
             });
             this.props.addNewRowRefs();
@@ -325,6 +264,7 @@ var HiTableBody = function (_React$Component) {
                 tabId = _props.tabId,
                 columns = _props.columns,
                 orderedColumns = _props.orderedColumns,
+                dataSource = _props.dataSource,
                 onRowClick = _props.onRowClick,
                 selectable = _props.selectable,
                 onSelect = _props.onSelect,
@@ -339,17 +279,12 @@ var HiTableBody = function (_React$Component) {
                 translations = _props.translations,
                 dateLocale = _props.dateLocale,
                 numberLocale = _props.numberLocale,
+                groupByIds = _props.groupByIds,
                 sortedColumnId = _props.sortedColumnId,
-                lookupColumns = _props.lookupColumns,
-                loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth,
-                disableContextMenu = _props.disableContextMenu,
-                detailRowsOptions = _props.detailRowsOptions;
+                lookupColumns = _props.lookupColumns;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
-                openedDetailsRowIdList = _state.openedDetailsRowIdList,
-                groupByIds = _state.groupByIds,
-                dataSource = _state.dataSource;
+                openedDetailsRowIdList = _state.openedDetailsRowIdList;
 
 
             var nbColumnsDisplayed = 0;
@@ -368,21 +303,31 @@ var HiTableBody = function (_React$Component) {
                 // Gestion du sticky group by
                 if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
                     var currentGroupByValue = row.datas[groupBy].value;
-
+                    var date = new Date(currentGroupByValue);
+                    if (date instanceof Date && isFinite(date)) {
+                        currentGroupByValue = currentGroupByValue.substr(0, 10);
+                    }
                     // TODO => condition for other columns type
                     if (columns[groupBy].type === cst.TYPE_DATE) {
-
-                        _moment2.default.locale(dateLocale);
-                        var date = (0, _moment2.default)(currentGroupByValue);
-                        var label = date.format('dddd D MMMM YYYY');
-
-                        if (index === 0 || label !== stickyRowValue) {
-
-                            stickyRowValue = label;
+                        if (index === 0 || currentGroupByValue !== stickyRowValue) {
+                            stickyRowValue = currentGroupByValue;
+                            var label = stickyRowValue;
+                            if (date instanceof Date && isFinite(date)) {
+                                label = new Date(label);
+                                var options = {
+                                    year: 'numeric',
+                                    month: 'long',
+                                    weekday: 'long',
+                                    day: 'numeric'
+                                };
+                                label = label.toLocaleString(dateLocale, options);
+                                label = label.charAt(0).toUpperCase() + label.substr(1);
+                            }
 
                             tableRows.push(_react2.default.createElement(_HiStickyRow2.default, {
                                 key: 'sticky_row_' + row.rowId,
                                 dense: dense,
+                                value: stickyRowValue,
                                 label: label,
                                 length: groupByIds[currentGroupByValue].length,
                                 colSpan: nbColumnsDisplayed,
@@ -408,6 +353,9 @@ var HiTableBody = function (_React$Component) {
                 // has children
                 var hasChildren = row.hasOwnProperty('children') && row.children.length > 0;
 
+                // has detail rows
+                var hasDetailRows = row.hasOwnProperty('detailRows') && row.detailRows.length > 0;
+
                 var BodyRowProps = (0, _extends3.default)({
                     columns: columns,
                     dateLocale: dateLocale,
@@ -419,9 +367,9 @@ var HiTableBody = function (_React$Component) {
                 }, hasChildren && {
                     openedAsParent: openedParentRowId === row.rowId,
                     onClick: _this3.setOpenedParentRowId // if row has children, onClick display the children
+                }, hasDetailRows && {
+                    onOpenRowDetails: _this3.toggleOpenedDetailsRowId
                 }, {
-                    onOpenRowDetails: _this3.toggleOpenedDetailsRowId,
-                    detailRowsOptions: detailRowsOptions,
                     orderedColumns: orderedColumns
                 }, selectable && {
                     selectable: selectable,
@@ -431,9 +379,7 @@ var HiTableBody = function (_React$Component) {
                     row: row,
                     sticky: sticky,
                     tabId: tabId,
-                    view: view,
-                    fixedColumnWidth: fixedColumnWidth,
-                    disableContextMenu: disableContextMenu
+                    view: view
                 });
 
                 if (hasChildren && openedParentRowId === row.rowId) {
@@ -444,6 +390,7 @@ var HiTableBody = function (_React$Component) {
                         parentIndicatorColumn: row.parentIndicatorColumn,
                         parentLabel: row.parentLabel,
                         parentLabelIcon: row.parentLabelIcon,
+                        parentDetailRows: row.detailRows,
                         children: row.children,
                         onClose: _this3.setOpenedParentRowId
                     }, BodyRowProps)));
@@ -452,45 +399,29 @@ var HiTableBody = function (_React$Component) {
                 }
 
                 // add opened detail rows
-                if (row.details && row.details.length > 0) {
-                    row.details.forEach(function (detail) {
-                        if (detail.rows.length > 0 && openedDetailsRowIdList.find(function (item) {
-                            return item.id === row.rowId && item.type === detail.type;
-                        })) {
-                            detail.rows.forEach(function (detailRow) {
-                                var detailRowProps = {
-                                    row: detailRow,
-                                    columns: columns,
-                                    orderedColumns: orderedColumns,
-                                    view: view,
-                                    dense: dense,
-                                    sticky: sticky,
-                                    isDetail: true,
-                                    fixedColumnWidth: fixedColumnWidth,
-                                    disableContextMenu: disableContextMenu,
-                                    dateLocale: dateLocale,
-                                    numberLocale: numberLocale
-                                };
-
-                                tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
-                            });
-                        }
+                if (hasDetailRows && openedDetailsRowIdList.includes(row.rowId)) {
+                    row.detailRows.forEach(function (detailRow) {
+                        var detailRowProps = {
+                            row: detailRow,
+                            columns: columns,
+                            orderedColumns: orderedColumns,
+                            view: view,
+                            dense: dense,
+                            sticky: sticky,
+                            isDetail: true
+                        };
+
+                        tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
                     });
                 }
             });
 
-            var tBodyClasses = (0, _classnames2.default)(classes.tbody, (0, _defineProperty3.default)({}, classes.tbodyFixedWidth, fixedColumnWidth));
-
             return _react2.default.createElement(
                 _Table.TableBody,
                 {
                     id: tabId + '-body',
-                    className: tBodyClasses,
-                    style: (0, _extends3.default)({
-                        height: height
-                    }, loading && {
-                        opacity: 0.6
-                    }),
+                    className: classes.tbody,
+                    style: { height: height },
                     onScroll: onScroll
                 },
                 tableRows.map(function (tableRow) {
@@ -498,31 +429,6 @@ var HiTableBody = function (_React$Component) {
                 })
             );
         }
-    }], [{
-        key: 'getDerivedStateFromProps',
-        value: function getDerivedStateFromProps(props, state) {
-            var nextState = {};
-            if (props.groupBy && props.dataSource && props.dataSource.length > 0) {
-                if ((0, _stringify2.default)(props.dataSource) !== (0, _stringify2.default)(state.dataSource)) {
-                    var groupByIds = {};
-                    props.dataSource.map(function (row) {
-                        var value = row.datas[props.groupBy].value;
-                        if (!groupByIds.hasOwnProperty(value)) {
-                            groupByIds[value] = [];
-                        }
-                        groupByIds[value].push(row.datas);
-                    });
-                    nextState.groupByIds = groupByIds;
-                }
-            }
-            if ((0, _stringify2.default)(props.dataSource) !== (0, _stringify2.default)(state.dataSource)) {
-                nextState.dataSource = props.dataSource;
-            }
-            if ((0, _values2.default)(nextState).length > 0) {
-                return nextState;
-            }
-            return null;
-        }
     }]);
     return HiTableBody;
 }(_react2.default.Component);
@@ -536,11 +442,7 @@ HiTableBody.defaultProps = {
     dense: false,
     height: 450,
     sticky: true,
-    view: 'l',
-    loading: false,
-    disableContextMenu: true,
-    detailRowsOptions: {},
-    noResultsContent: null
+    view: 'l'
 };
 HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -568,27 +470,10 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
-    /**
-     * Options utilisées pour décrire le comportement de lignes de détails
-     */
-    detailRowsOptions: _propTypes2.default.object,
-    /**
-     * 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
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Hauteur du tableau (px)
      */
     height: _propTypes2.default.number,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/HiTable/HiTableContextMenu.js

@@ -54,14 +54,13 @@ var styles = exports.styles = function styles(theme) {
         contextMenu: {
             zIndex: 9999,
             backgroundColor: theme.palette.background3,
-            boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)',
-            textAlign: 'left'
+            boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)'
         },
         contextMenuItem: (0, _extends3.default)({}, theme.typography.body1, {
             height: 40,
             width: 300,
             cursor: 'pointer',
-            padding: 10,
+            padding: '10px 10px 10px 28px',
             color: theme.palette.neutral.dark,
             '&:hover': {
                 backgroundColor: theme.palette.hover,
@@ -88,10 +87,7 @@ var HiTableContextMenu = function (_React$Component) {
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableContextMenu.__proto__ || (0, _getPrototypeOf2.default)(HiTableContextMenu)).call(this, props));
 
         _this.state = {
-            value: '',
-            label: '',
-            lookup: true,
-            exclude: true
+            value: ''
         };
 
         _this.handleContextMenuOpen = _this.handleContextMenuOpen.bind(_this);
@@ -105,14 +101,7 @@ var HiTableContextMenu = function (_React$Component) {
     (0, _createClass3.default)(HiTableContextMenu, [{
         key: 'handleContextMenuOpen',
         value: function handleContextMenuOpen(event) {
-            var columns = this.props.columns;
-
-            this.setState({
-                value: event.detail.data.value,
-                label: event.detail.data.label,
-                lookup: columns[event.detail.data.column].lookup !== false,
-                exclude: columns[event.detail.data.column].exclude !== false
-            });
+            this.setState({ value: event.detail.data.label });
         }
     }, {
         key: 'handleClickCopy',
@@ -151,12 +140,9 @@ var HiTableContextMenu = function (_React$Component) {
                 classes = _props.classes,
                 tabId = _props.tabId,
                 translations = _props.translations;
-            var _state = this.state,
-                lookup = _state.lookup,
-                exclude = _state.exclude;
 
 
-            var contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', displayed: lookup, icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', displayed: exclude, icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
+            var contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
 
             return _react2.default.createElement(
                 _reactContextmenu.ContextMenu,
@@ -166,21 +152,19 @@ var HiTableContextMenu = function (_React$Component) {
                     onShow: this.handleContextMenuOpen
                 },
                 contextMenuItems.map(function (menuItem) {
-                    if (menuItem.displayed !== false) {
-                        return _react2.default.createElement(
-                            _reactContextmenu.MenuItem,
-                            {
-                                attributes: { className: classes.contextMenuItem },
-                                key: 'hitable_context_menu_' + tabId + '_' + menuItem.id,
-                                onClick: menuItem.action },
-                            _react2.default.createElement(_HiIconBuilder2.default, { icon: menuItem.icon }),
-                            _react2.default.createElement(
-                                'span',
-                                { className: classes.title },
-                                menuItem.title.replace('%s', _this2.state.label)
-                            )
-                        );
-                    }
+                    return _react2.default.createElement(
+                        _reactContextmenu.MenuItem,
+                        {
+                            attributes: { className: classes.contextMenuItem },
+                            key: 'hitable_context_menu_' + tabId + '_' + menuItem.id,
+                            onClick: menuItem.action },
+                        _react2.default.createElement(_HiIconBuilder2.default, { icon: menuItem.icon }),
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.title },
+                            menuItem.title.replace('%s', _this2.state.value)
+                        )
+                    );
                 })
             );
         }
@@ -193,7 +177,7 @@ HiTableContextMenu.defaultProps = {
         copy: 'Copy',
         exclude: 'Exclude "%s"',
         lookUp: 'Look up "%s"',
-        openInNewTab: 'Open in new tab'
+        openInNewTab: 'Open the transaction in a new tab'
     }
 };
 HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -201,10 +185,6 @@ HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge le style du composant
      */
     classes: _propTypes2.default.object,
-    /**
-     * Liste des objets colonnes utilisé pour savoir quels items du context menu sont affichés
-     */
-    columns: _propTypes2.default.object.isRequired,
     /**
      * Fonction de callback appelée au clic sur l'item redirection
      * du menu contextuel ouvert au clic droit

package/HiTable/HiTableFooterScroll.js

@@ -138,7 +138,7 @@ var HiTableFooterScroll = function (_React$Component) {
             ) : _react2.default.createElement(
                 _HiButton2.default,
                 {
-                    variant: 'raised',
+                    raised: true,
                     color: 'primary',
                     className: classes.loadMoreButton,
                     onClick: function onClick() {