@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/HiTable/HiTableBody.js

@@ -1,557 +0,0 @@
-'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,
-                loading = _props.loading;
-            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: (0, _extends3.default)({
-                        height: height
-                    }, loading && {
-                        opacity: 0.6
-                    }),
-                    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',
-    loading: false
-};
-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,
-    /**
-     * É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
-     */
-    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);