@hipay/hipay-material-ui 1.0.0-beta.1

package/HiTable/HiTableBody.js

@@ -0,0 +1,547 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Table = require('material-ui/Table');
+
+var _styles = require('../styles');
+
+var _BodyRow = require('./BodyRow');
+
+var _BodyRow2 = _interopRequireDefault(_BodyRow);
+
+var _ChildRow = require('./ChildRow');
+
+var _ChildRow2 = _interopRequireDefault(_ChildRow);
+
+var _HiStickyRow = require('./HiStickyRow');
+
+var _HiStickyRow2 = _interopRequireDefault(_HiStickyRow);
+
+var _constants = require('./constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+var _HiTableHead = require('./HiTableHead');
+
+var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
+
+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; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        tbody: {
+            position: 'relative',
+            display: 'block' /* seperates the tbody from the header */
+            , width: '100%',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            zIndex: 11
+        },
+        tbodyRows: {
+            backgroundColor: theme.palette.background3
+        },
+        tbodyRowsHover: {
+            '&:hover': {
+                backgroundColor: theme.palette.hover,
+                fontWeight: theme.typography.fontWeightMedium
+            }
+        },
+        rightShadow: {
+            borderWidth: '4px 4px 4px 0',
+            borderStyle: 'solid',
+            webkitBorderImage: '-webkit-linear-gradient(right, rgba(42, 42, 42, 0.1), rgba(0, 0, 0, 0)) 1 100%',
+            mozBorderImage: '-moz-linear-gradient(right, rgba(42, 42, 42, 0.1), rgba(0, 0, 0, 0)) 1 100%',
+            oBorderImage: '-o-linear-gradient(right, rgba(42, 42, 42, 0.1), rgba(0, 0, 0, 0)) 1 100%',
+            borderImage: 'linear-gradient(to right, rgba(42, 42, 42, 0.1), rgba(0, 0, 0, 0)) 1 100%'
+        },
+        bottomShadow: {
+            borderWidth: '0 0 4px 0',
+            borderStyle: 'solid',
+            webkitBorderImage: '-webkit-linear-gradient(top, rgba(0,0,0, 0.08) 0%, rgba(0,0,0, 0) 100%)',
+            mozBorderImage: '-moz-linear-gradient(top, rgba(0,0,0, 0.08), rgba(0,0,0, 0) 1 100%)',
+            oBorderImage: '-o-linear-gradient(top, rgba(0,0,0, 0.08), rgba(0, 0, 0, 0)) 1 100%',
+            borderImage: 'linear-gradient(to top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 1 100%'
+        },
+        patchDiv: {
+            position: 'absolute',
+            width: 24,
+            height: 50,
+            top: 0,
+            zIndex: 15,
+            backgroundColor: theme.palette.background3
+        }
+    };
+};
+
+/**
+ * HiTable Body
+ * Handle rows creation and update from datasource
+ */
+
+var HiTableBody = function (_React$Component) {
+    (0, _inherits3.default)(HiTableBody, _React$Component);
+
+    function HiTableBody(props) {
+        (0, _classCallCheck3.default)(this, HiTableBody);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this));
+
+        _this.buildIndicator = function (row) {
+            var _this$props = _this.props,
+                columns = _this$props.columns,
+                dateLocale = _this$props.dateLocale;
+
+
+            var indicator = void 0;
+            var indicatorColumn = columns[row.parentIndicatorColumn];
+            switch (indicatorColumn.type) {
+                case 'date':
+                    var options = {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit'
+                    };
+                    var date = new Date(row.datas[row.parentIndicatorColumn].value);
+                    indicator = date.toLocaleString(dateLocale, options);
+                    break;
+                case 'text':
+                default:
+                    indicator = row.datas[row.parentIndicatorColumn].value;
+                    break;
+            }
+
+            return indicator;
+        };
+
+        _this.state = {
+            openedParentRowId: null,
+            openedDetailsRowIdList: []
+        };
+
+        _this.buildIndicator = _this.buildIndicator.bind(_this);
+        _this.setOpenedParentRowId = _this.setOpenedParentRowId.bind(_this);
+        _this.toggleOpenedDetailsRowId = _this.toggleOpenedDetailsRowId.bind(_this);
+        _this.positionStickyRowNextButton = _this.positionStickyRowNextButton.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiTableBody, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.positionStickyRowNextButton();
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState, prevContext) {
+            this.positionStickyRowNextButton();
+        }
+
+        /**
+         * Définit l'id de la ligne parente "ouverte" ou null
+         * (remplace la ligne par un sous-tableau)
+         * Il ne peut y avoir qu'une seule ligne parente "ouverte" à la fois
+         *
+         * @param row
+         */
+
+    }, {
+        key: 'setOpenedParentRowId',
+        value: function setOpenedParentRowId(row) {
+            this.setState(function (prevState) {
+                return {
+                    openedParentRowId: prevState.openedParentRowId === null || prevState.openedParentRowId !== row.rowId ? row.rowId : null
+                };
+            });
+            this.props.addNewRowRefs();
+        }
+    }, {
+        key: 'positionStickyRowNextButton',
+        value: function positionStickyRowNextButton() {
+            var _this2 = this;
+
+            // handle stickyRow next buttons position
+            var tableContainer = document.getElementById(this.props.tabId);
+            var stickyRowNextButtons = tableContainer.getElementsByClassName('stickyRowNextButton');
+            if (stickyRowNextButtons.length > 0) {
+                Array.prototype.filter.call(stickyRowNextButtons, function (button, index) {
+                    if (index === stickyRowNextButtons.length - 1) {
+                        button.style.display = 'none';
+                        button.parentElement.style.top = '0px';
+                    } else {
+                        if (button.style.display === 'none') {
+                            button.style.display = 'inline-block';
+                            if (button.parentElement.parentElement.parentElement.style.position === 'absolute') {
+                                button.parentElement.parentElement.previousSibling.style.height = _this2.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                            }
+                            button.parentElement.style.top = '4px';
+                        }
+                        var label = button.previousSibling.previousSibling;
+                        button.style.left = tableContainer.offsetWidth - label.offsetWidth - 48 - 160 + 'px';
+                    }
+                });
+            }
+        }
+
+        /**
+         * Définit les id des lignes dont les détails sont affichés ou null
+         * (ajoute une ligne pour chaque détails)
+         *
+         * @param rowId
+         */
+
+    }, {
+        key: 'toggleOpenedDetailsRowId',
+        value: function toggleOpenedDetailsRowId(rowId) {
+            this.setState(function (prevState) {
+                return {
+                    openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(function (id) {
+                        return id !== rowId;
+                    }) : [].concat((0, _toConsumableArray3.default)(prevState.openedDetailsRowIdList), [rowId])
+                };
+            });
+            this.props.addNewRowRefs();
+        }
+
+        /**
+         * Build children sub-table indicator
+         * @param row
+         * @returns {*}
+         */
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this3 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                tabId = _props.tabId,
+                columns = _props.columns,
+                orderedColumns = _props.orderedColumns,
+                dataSource = _props.dataSource,
+                onRowClick = _props.onRowClick,
+                selectable = _props.selectable,
+                onSelect = _props.onSelect,
+                selectedIdList = _props.selectedIdList,
+                onScroll = _props.onScroll,
+                dateUpdate = _props.dateUpdate,
+                dense = _props.dense,
+                height = _props.height,
+                sticky = _props.sticky,
+                view = _props.view,
+                groupBy = _props.groupBy,
+                translations = _props.translations,
+                dateLocale = _props.dateLocale,
+                numberLocale = _props.numberLocale,
+                groupByIds = _props.groupByIds,
+                sortedColumnId = _props.sortedColumnId,
+                lookupColumns = _props.lookupColumns;
+            var _state = this.state,
+                openedParentRowId = _state.openedParentRowId,
+                openedDetailsRowIdList = _state.openedDetailsRowIdList;
+
+
+            var nbColumnsDisplayed = 0;
+            orderedColumns.forEach(function (column) {
+                if (column.displayed !== false) {
+                    nbColumnsDisplayed += 1;
+                }
+            });
+
+            // build components list
+            var tableRows = [];
+            var stickyRowValue = void 0;
+            var stickyRowIndex = 0;
+            dataSource.forEach(function (row, index) {
+
+                // 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) {
+                        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,
+                                index: stickyRowIndex,
+                                translations: translations.stickyRow,
+                                view: view,
+                                onClickNext: _this3.props.onClickNext
+                            }));
+
+                            tableRows.push(_react2.default.createElement(_Table.TableRow, {
+                                key: 'ghost_sticky_row_' + row.rowId,
+                                className: 'fakeStickyGroupBy',
+                                style: {
+                                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                                    display: 'none'
+                                }
+                            }));
+                            stickyRowIndex++;
+                        }
+                    }
+                }
+
+                // 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,
+                    numberLocale: numberLocale,
+                    dense: dense,
+                    live: row.ts >= dateUpdate,
+                    lookupColumns: lookupColumns,
+                    onClick: onRowClick
+                }, hasChildren && {
+                    openedAsParent: openedParentRowId === row.rowId,
+                    onClick: _this3.setOpenedParentRowId // if row has children, onClick display the children
+                }, hasDetailRows && {
+                    onOpenRowDetails: _this3.toggleOpenedDetailsRowId
+                }, {
+                    orderedColumns: orderedColumns
+                }, selectable && {
+                    selectable: selectable,
+                    selected: selectedIdList.includes(row.rowId),
+                    onSelect: onSelect
+                }, {
+                    row: row,
+                    sticky: sticky,
+                    tabId: tabId,
+                    view: view
+                });
+
+                if (hasChildren && openedParentRowId === row.rowId) {
+                    tableRows.push(_react2.default.createElement(_ChildRow2.default, (0, _extends3.default)({
+                        key: 'children-' + row.rowId,
+                        parentRowId: row.rowId,
+                        parentRowDatas: row.datas,
+                        parentIndicatorColumn: row.parentIndicatorColumn,
+                        parentLabel: row.parentLabel,
+                        parentLabelIcon: row.parentLabelIcon,
+                        parentDetailRows: row.detailRows,
+                        children: row.children,
+                        onClose: _this3.setOpenedParentRowId
+                    }, BodyRowProps)));
+                } else {
+                    tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId }, BodyRowProps)));
+                }
+
+                // add opened detail rows
+                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)));
+                    });
+                }
+            });
+
+            return _react2.default.createElement(
+                _Table.TableBody,
+                {
+                    id: tabId + '-body',
+                    className: classes.tbody,
+                    style: { height: height },
+                    onScroll: onScroll
+                },
+                tableRows.map(function (tableRow) {
+                    return tableRow;
+                })
+            );
+        }
+    }]);
+    return HiTableBody;
+}(_react2.default.Component);
+
+HiTableBody.defaultProps = {
+    selectable: false,
+    selectedIdList: [],
+    dateUpdate: null,
+    dateLocale: 'en-EN',
+    numberLocale: 'en-EN',
+    dense: false,
+    height: 450,
+    sticky: true,
+    view: 'l'
+};
+HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Colonnes du tableau (label, largeur, données, ... )
+     */
+    columns: _propTypes2.default.object.isRequired,
+    /**
+     * Tableau des données
+     */
+    dataSource: _propTypes2.default.array.isRequired,
+    /**
+     * Locale utilisée pour le format des dates
+     */
+    dateLocale: _propTypes2.default.string,
+    /**
+     * Timestamp de la dernière mise à jour du tableau
+     * permet d'animer les nouvelles lignes
+     */
+    dateUpdate: _propTypes2.default.number,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: _propTypes2.default.bool,
+    /**
+     * Hauteur du tableau (px)
+     */
+    height: _propTypes2.default.number,
+    /**
+     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
+     */
+    lookupColumns: _propTypes2.default.array,
+    /**
+     *  Locale utilisée pour le format des nombres
+     */
+    numberLocale: _propTypes2.default.string,
+    /**
+     * Fonction de callback au click sur une ligne
+     * Passe l'id de la ligne (rowId)
+     */
+    onRowClick: _propTypes2.default.func,
+    /**
+     * Fonction de callback au scroll sur le body du tableau
+     */
+    onScroll: _propTypes2.default.func,
+    /**
+     * Fonction de callback sur la sélection d'une ligne
+     * (ou sélection/déselection de tous dans le header)
+     * Passe l'id de la ligne sélectionnée (rowId)
+     */
+    onSelect: _propTypes2.default.func,
+    /**
+     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
+     */
+    orderedColumns: _propTypes2.default.array.isRequired,
+    /**
+     * [v2 - à venir] Les lignes sont sélectionnables (affichage d'une checkbox)
+     */
+    selectable: _propTypes2.default.bool,
+    /**
+     * Liste des id des lignes sélectionnées
+     */
+    selectedIdList: _propTypes2.default.array,
+    /**
+     * Fixe la première colonne
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * Identifiant unique à spécifier si on utilise plusieurs composants HiTable
+     */
+    tabId: _propTypes2.default.string.isRequired,
+    /**
+     * Taille du tableau (L/M/S),
+     * définit l'espace entre les cellules et leurs tailles par default
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: _propTypes2.default.string,
+    /**
+     * Tableau associatif (parentGroupBy => id contenus)
+     */
+    groupByIds: _propTypes2.default.object,
+    /**
+     * Id de la colonne trié
+     */
+    sortedColumnId: _propTypes2.default.string,
+    /**
+     * Traduction des chaînes affichées
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Callback lors d'un clic sur le bouton 'Next' d'une stickRow
+     * @param {int} index du stickyRow
+     */
+    onClickNext: _propTypes2.default.func
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTableBody' })(HiTableBody);