@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/HiTable/HiTableHead.js

@@ -1,506 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.SORTED_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-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 _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-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',
-            width: '100%',
-            overflow: 'visible',
-            zIndex: 12
-        },
-        theadFixedWidth: {
-            display: 'block' /*seperates the header from the body allowing it to be positioned*/
-        },
-        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,
-                fixedColumnWidth = _props.fixedColumnWidth;
-            var _state = this.state,
-                hovered = _state.hovered,
-                openedOrderColumns = _state.openedOrderColumns,
-                orderColumnsAnchorEl = _state.orderColumnsAnchorEl;
-
-
-            var headerProps = (0, _extends3.default)({
-                className: (0, _classnames2.default)(classes.thead, (0, _defineProperty3.default)({}, classes.theadFixedWidth, fixedColumnWidth))
-            }, 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),
-                                fixedColumnWidth: fixedColumnWidth
-                            });
-                        }
-                    }),
-                    _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,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: _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);