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

package/HiTable/HiTableHead.js

@@ -0,0 +1,489 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.SORTED_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _reactDom = require('react-dom');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
+
+var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
+
+var _Table = require('material-ui/Table');
+
+var _PlusCircle = require('mdi-material-ui/PlusCircle');
+
+var _PlusCircle2 = _interopRequireDefault(_PlusCircle);
+
+var _IconButton = require('material-ui/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _colorManipulator = require('material-ui/styles/colorManipulator');
+
+var _styles = require('../styles');
+
+var _HeaderCell = require('./HeaderCell');
+
+var _HeaderCell2 = _interopRequireDefault(_HeaderCell);
+
+var _constants = require('./constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+var _OrderColumns = require('./OrderColumns');
+
+var _OrderColumns2 = _interopRequireDefault(_OrderColumns);
+
+var _HiTable = require('./HiTable');
+
+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 {
+        thead: {
+            position: 'relative',
+            display: 'block' /*seperates the header from the body allowing it to be positioned*/
+            , width: '100%',
+            overflow: 'visible',
+            zIndex: 12
+        },
+        theadRow: {
+            backgroundColor: theme.palette.background3,
+            zIndex: 12
+        },
+        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%'
+        },
+        orderColumnsIcon: {
+            cursor: 'pointer',
+            color: theme.palette.neutral.normal,
+            backgroundColor: theme.palette.background3,
+            '&:hover': {
+                color: theme.palette.business.primary.normal
+            }
+        },
+        liveDataRow: {
+            backgroundColor: (0, _colorManipulator.fade)(theme.palette.business.primary.normal, 0.08),
+            width: '100%'
+        },
+        liveDataContent: {
+            cursor: 'pointer',
+            fontSize: 13,
+            fontFamily: 'Roboto',
+            fontWeight: 400,
+            position: 'relative',
+            color: theme.palette.business.primary.normal
+        },
+        patchDiv: {
+            position: 'relative',
+            border: 'none',
+            width: 0,
+            paddingRight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            height: '100%',
+            zIndex: 14,
+            backgroundColor: 'inherit'
+        }
+    };
+};
+
+var SORTED_COLUMN_ERROR_MESSAGE = exports.SORTED_COLUMN_ERROR_MESSAGE = 'Vous devez saisir la propriété "sortedColumnId" pour les tableaux "sortable"';
+
+/**
+ * HiTable Head
+ * Handle header row creation and update from orderedColumns & columns
+ */
+
+var HiTableHead = function (_React$Component) {
+    (0, _inherits3.default)(HiTableHead, _React$Component);
+
+    function HiTableHead(props) {
+        (0, _classCallCheck3.default)(this, HiTableHead);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableHead.__proto__ || (0, _getPrototypeOf2.default)(HiTableHead)).call(this));
+
+        _this.orderColumnsButton = null;
+
+
+        _this.state = {
+            hovered: false,
+            openedOrderColumns: false,
+            orderColumnsAnchorEl: null
+        };
+
+        _this.handleEvent = _this.handleEvent.bind(_this);
+        _this.handleOpenOrderColumns = _this.handleOpenOrderColumns.bind(_this);
+        _this.handleCloseOrderColumns = _this.handleCloseOrderColumns.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiTableHead, [{
+        key: 'handleEvent',
+        value: function handleEvent(_ref) {
+            var type = _ref.type;
+
+            switch (type) {
+                case 'mouseenter':
+                    return this.setState({ hovered: true });
+                case 'mouseleave':
+                    return this.setState({ hovered: false });
+                default:
+                    return console.warn('No case for event type "' + type + '"');
+            }
+        }
+    }, {
+        key: 'handleOpenOrderColumns',
+        value: function handleOpenOrderColumns() {
+            this.setState({
+                openedOrderColumns: true,
+                orderColumnsAnchorEl: (0, _reactDom.findDOMNode)(this.orderColumnsButton)
+            });
+        }
+    }, {
+        key: 'handleCloseOrderColumns',
+        value: function handleCloseOrderColumns() {
+            this.setState({
+                hovered: false,
+                openedOrderColumns: false
+            });
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                columns = _props.columns,
+                orderedColumns = _props.orderedColumns,
+                dataSource = _props.dataSource,
+                filterable = _props.filterable,
+                onFilterChange = _props.onFilterChange,
+                orderable = _props.orderable,
+                onColumnsOrderUpdate = _props.onColumnsOrderUpdate,
+                mandatoryColumnId = _props.mandatoryColumnId,
+                selectable = _props.selectable,
+                onSelect = _props.onSelect,
+                selectedIdList = _props.selectedIdList,
+                sortable = _props.sortable,
+                onSort = _props.onSort,
+                sortedColumnId = _props.sortedColumnId,
+                sortDirection = _props.sortDirection,
+                countLiveDatas = _props.countLiveDatas,
+                onRequestLiveDatas = _props.onRequestLiveDatas,
+                dense = _props.dense,
+                sticky = _props.sticky,
+                translations = _props.translations,
+                view = _props.view,
+                lookupColumns = _props.lookupColumns;
+            var _state = this.state,
+                hovered = _state.hovered,
+                openedOrderColumns = _state.openedOrderColumns,
+                orderColumnsAnchorEl = _state.orderColumnsAnchorEl;
+
+
+            var headerProps = (0, _extends3.default)({
+                className: classes.thead
+            }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
+
+            var unfixedColumnIsSet = false,
+                firstIndexDisplay = void 0;
+
+            orderedColumns.some(function (colRef) {
+                if (!colRef.hasOwnProperty('displayed') || colRef.displayed) {
+                    firstIndexDisplay = colRef.colId;
+                    return true;
+                }
+            });
+
+            return _react2.default.createElement(
+                _Table.TableHead,
+                headerProps,
+                _react2.default.createElement(
+                    _Table.TableRow,
+                    {
+                        className: classes.theadRow,
+                        style: {
+                            height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT
+                        }
+                    },
+                    _react2.default.createElement(_Table.TableCell, {
+                        key: 'header-left-cell',
+                        className: classes.patchDiv,
+                        style: { paddingLeft: cst.DEFAULT_PADDING[view] }
+                    }),
+                    orderedColumns.map(function (colRef) {
+                        if (!colRef.hasOwnProperty('displayed') || colRef.displayed) {
+                            var column = columns[colRef.colId];
+
+                            // the first non fixed column is the only one not fixed
+                            var fixed = true;
+                            if (!unfixedColumnIsSet && column.fixedWidth !== true) {
+                                fixed = false;
+                                unfixedColumnIsSet = true;
+                            }
+
+                            var firstColumn = colRef.colId === firstIndexDisplay;
+
+                            var effectiveView = colRef.hasOwnProperty('view') ? colRef.view : view;
+
+                            return _react2.default.createElement(_HeaderCell2.default, {
+                                key: 'header-' + column.colId,
+                                colId: column.colId,
+                                type: column['type'],
+                                title: column['label'],
+                                smallTitle: column['reducedLabel'],
+                                selectable: firstColumn && selectable,
+                                selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
+                                onSelect: onSelect,
+                                sortable: sortable,
+                                sorted: sortedColumnId === column.colId,
+                                sortDirection: sortDirection,
+                                onSort: onSort,
+                                filterable: filterable,
+                                filterSource: column['data'],
+                                onFilterChange: onFilterChange,
+                                view: effectiveView,
+                                padding: cst.DEFAULT_PADDING[view],
+                                dense: dense,
+                                width: column['width'],
+                                fixedWidth: fixed,
+                                align: column['align'],
+                                sticky: firstColumn && sticky,
+                                lookedUp: lookupColumns.includes(column.colId)
+                            });
+                        }
+                    }),
+                    _react2.default.createElement(
+                        _Table.TableCell,
+                        {
+                            key: 'header-right-cell',
+                            className: classes.patchDiv,
+                            style: { paddingLeft: cst.DEFAULT_PADDING[view] }
+                        },
+                        orderable && hovered && _react2.default.createElement(
+                            _IconButton2.default,
+                            {
+                                style: {
+                                    position: 'absolute',
+                                    right: 0,
+                                    top: dense ? -4 : 0
+                                },
+                                ref: function ref(node) {
+                                    _this2.orderColumnsButton = node;
+                                },
+                                onClick: this.handleOpenOrderColumns
+                            },
+                            _react2.default.createElement(_PlusCircle2.default, { className: classes.orderColumnsIcon })
+                        ),
+                        orderable && _react2.default.createElement(_OrderColumns2.default, {
+                            isOpen: openedOrderColumns,
+                            onClose: this.handleCloseOrderColumns,
+                            anchorEl: orderColumnsAnchorEl,
+                            updateOrderedColumns: onColumnsOrderUpdate,
+                            columns: columns,
+                            orderedColumns: orderedColumns,
+                            mandatoryColumnId: mandatoryColumnId,
+                            translations: translations
+                        })
+                    )
+                ),
+                countLiveDatas > 0 && _react2.default.createElement(
+                    _Table.TableRow,
+                    {
+                        id: 'nb-new-rows',
+                        className: classes.liveDataRow,
+                        style: {
+                            height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+                        }
+                    },
+                    _react2.default.createElement(
+                        _Table.TableCell,
+                        {
+                            style: { border: 'none', cursor: 'pointer' },
+                            colSpan: 1000,
+                            onClick: onRequestLiveDatas
+                        },
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.liveDataContent },
+                            translations.get_the_n_new_items.replace('%s', countLiveDatas)
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return HiTableHead;
+}(_react2.default.Component);
+
+HiTableHead.defaultProps = {
+    selectable: false,
+    selectedIdList: [],
+    sortable: true,
+    sortDirection: 'asc',
+    filterable: false,
+    orderable: false,
+    countLiveDatas: 0,
+    dense: false,
+    sticky: true,
+    translations: {
+        get_the_n_new_items: 'Get the %s new items',
+        choose_and_organize_columns: 'Choose & organize columns',
+        search: 'Search',
+        time: 'Time'
+    },
+    view: 'l'
+};
+HiTableHead.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,
+    /**
+     * Nombre de nouvelles données disponibles (live)
+     */
+    countLiveDatas: _propTypes2.default.number,
+    /**
+     * Tableau des données
+     */
+    dataSource: _propTypes2.default.array.isRequired,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: _propTypes2.default.bool,
+    /**
+     * Active le filtre sur les colonnes filtrables
+     */
+    filterable: _propTypes2.default.bool,
+    /**
+     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
+     */
+    lookupColumns: _propTypes2.default.array,
+    /**
+     * Pour les tableaux "orderable" uniquement :
+     * Id de la colonne obligatoire,
+     * elle sera toujours affichée dans le tableau et ne pourra pas être cachée.
+     */
+    mandatoryColumnId: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
+        return props.hasOwnProperty('orderable') && props.orderable === true;
+    }, _HiTable.MANDATORY_COLUMN_ERROR_MESSAGE),
+    /**
+     * Fonction de callback sur l'ordre des colonnes
+     */
+    onColumnsOrderUpdate: _propTypes2.default.func,
+    /**
+     * Fonction de callback sur le filtre d'une colonne
+     * Passe l'id de la colonne et la liste des id des éléments inclus
+     */
+    onFilterChange: _propTypes2.default.func,
+    /**
+     * Fonction de callback requérant l'affichage des nouvelles données (live)
+     */
+    onRequestLiveDatas: _propTypes2.default.func,
+    /**
+     * 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)
+     */
+    onSort: _propTypes2.default.func,
+    /**
+     * L'utilisateur peut changer l'ordre des colonnes, les afficher ou non,
+     * et changer la vue de chaque colonne (small, medium, large).
+     */
+    orderable: _propTypes2.default.bool,
+    /**
+     * 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,
+    /**
+     * Active le tri sur les colonnes
+     */
+    sortable: _propTypes2.default.bool,
+    /**
+     * Sens du tri
+     */
+    sortDirection: _propTypes2.default.oneOf(['asc', 'desc']),
+    /**
+     * Id de la colonne trié
+     */
+    sortedColumnId: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
+        return props.hasOwnProperty('sortable') && props.sortable === true;
+    }, SORTED_COLUMN_ERROR_MESSAGE),
+    /**
+     * Fixe la première colonne
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * Traduction des chaînes affichées
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * 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'])
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTableHead' })(HiTableHead);