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

package/HiTable/HeaderCell.js

@@ -0,0 +1,463 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+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 _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Table = require('material-ui/Table');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _ButtonBase = require('material-ui/ButtonBase');
+
+var _ButtonBase2 = _interopRequireDefault(_ButtonBase);
+
+var _FilterVariant = require('mdi-material-ui/FilterVariant');
+
+var _FilterVariant2 = _interopRequireDefault(_FilterVariant);
+
+var _Menu = require('mdi-material-ui/Menu');
+
+var _Menu2 = _interopRequireDefault(_Menu);
+
+var _ArrowDownward = require('../svg-icons/ArrowDownward');
+
+var _ArrowDownward2 = _interopRequireDefault(_ArrowDownward);
+
+var _HiCheckbox = require('../HiCheckbox');
+
+var _HiCheckbox2 = _interopRequireDefault(_HiCheckbox);
+
+var _styles = require('../styles');
+
+var _ColumnFilter = require('./ColumnFilter');
+
+var _ColumnFilter2 = _interopRequireDefault(_ColumnFilter);
+
+var _constants = require('./constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+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 {
+        checkbox: {
+            float: 'left',
+            margin: '10px 10px 0px 10px'
+        },
+        denseCheckbox: {
+            float: 'left',
+            margin: '8px 8px 0px 7px'
+        },
+        labelContainer: (0, _extends3.default)({
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }, theme.typography.body4, {
+            fontWeight: theme.typography.fontWeightLight,
+            color: theme.palette.neutral.dark
+        }),
+        labelContainerOrdered: {
+            fontWeight: theme.typography.fontWeightRegular
+        },
+        filter: {
+            position: 'relative',
+            top: 2,
+            left: 2,
+            cursor: 'pointer',
+            width: 14,
+            height: 14
+        },
+        sortedBorder: {
+            height: 1,
+            backgroundColor: theme.palette.business.primary.normal
+        },
+        icon: {
+            height: 16,
+            marginRight: 4,
+            marginLeft: 4,
+            transition: theme.transitions.create(['opacity', 'transform'], {
+                duration: theme.transitions.duration.shorter
+            }),
+            userSelect: 'none',
+            width: 16
+        },
+        primary: {
+            color: theme.palette.business.primary.normal
+        },
+        sortdesc: {
+            transform: 'rotate(0deg)'
+        },
+        sortasc: {
+            transform: 'rotate(180deg)'
+        },
+        filterdesc: {
+            transform: 'scale(1,1)'
+        },
+        filterasc: {
+            transform: 'scale(1,-1)'
+        },
+        lookedUp: {
+            background: 'linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)',
+            borderRadius: '45%'
+        }
+    };
+};
+
+/**
+ * Construit une cellule d'entête avec le titre, clickable, triable et filtrable
+ */
+
+var HeaderCell = function (_React$PureComponent) {
+    (0, _inherits3.default)(HeaderCell, _React$PureComponent);
+
+    function HeaderCell(props) {
+        (0, _classCallCheck3.default)(this, HeaderCell);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HeaderCell.__proto__ || (0, _getPrototypeOf2.default)(HeaderCell)).call(this, props));
+
+        _this.onFilterClick = function (event, columnDataset) {
+            _this.openFilterMenu(event, columnDataset);
+        };
+
+        _this.state = {
+            filterOpen: false,
+            anchorEl: null,
+            menuFilters: []
+        };
+
+        _this.onFilterClick = _this.onFilterClick.bind(_this);
+        _this.openFilterMenu = _this.openFilterMenu.bind(_this);
+        _this.closeFilterMenu = _this.closeFilterMenu.bind(_this);
+        _this.handleSort = _this.handleSort.bind(_this);
+        _this.handleFilterChange = _this.handleFilterChange.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HeaderCell, [{
+        key: 'openFilterMenu',
+        value: function openFilterMenu(event, columnDataset) {
+            this.setState({
+                filterOpen: true,
+                anchorEl: event.currentTarget,
+                menuFilters: columnDataset
+            });
+        }
+    }, {
+        key: 'closeFilterMenu',
+        value: function closeFilterMenu() {
+            this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
+        }
+
+        /**
+         * Sort column with direction
+         * @param direction
+         */
+
+    }, {
+        key: 'handleSort',
+        value: function handleSort(direction) {
+            this.props.onSort(this.props.colId, direction);
+        }
+    }, {
+        key: 'handleFilterChange',
+        value: function handleFilterChange(itemIdList) {
+            this.props.onFilterChange(this.props.colId, itemIdList);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                type = _props.type,
+                title = _props.title,
+                selectable = _props.selectable,
+                selected = _props.selected,
+                onSelect = _props.onSelect,
+                sortable = _props.sortable,
+                sorted = _props.sorted,
+                sortDirection = _props.sortDirection,
+                filterable = _props.filterable,
+                filterSource = _props.filterSource,
+                view = _props.view,
+                dense = _props.dense,
+                _props$width = _props.width,
+                width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
+                fixedWidth = _props.fixedWidth,
+                _props$align = _props.align,
+                align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
+                sticky = _props.sticky,
+                padding = _props.padding,
+                lookedUp = _props.lookedUp;
+            var _state = this.state,
+                filterOpen = _state.filterOpen,
+                anchorEl = _state.anchorEl,
+                menuFilters = _state.menuFilters;
+
+
+            var offset = selectable ? dense ? 32 : 40 : padding;
+
+            // Inclue le padding et/ou la checkbox dans la largeur de la cellule
+            var _width = width + offset + padding;
+            // N'affiche pas le tri si il est désactivé.
+            var _sorted = sortable && sorted;
+            // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
+            var _filterable = filterable && typeof filterSource !== 'undefined' && filterSource.length > 0;
+
+            // La bordure n'est pas défini en css car elle s'appliquerait
+            // sur le background et ne supporterait pas le scroll horizontal.
+            var sortedBorderElement = _sorted ? _react2.default.createElement('div', {
+                className: classes.sortedBorder,
+                style: { marginLeft: offset, marginRight: padding }
+            }) : null;
+
+            var sortIconClassName = (0, _classnames2.default)(classes.icon, classes.primary, (0, _defineProperty3.default)({}, classes['sort' + sortDirection], !!sortDirection));
+
+            var filterIconClassName = (0, _classnames2.default)(classes.icon, classes.primary, (0, _defineProperty3.default)({}, classes['filter' + sortDirection], !!sortDirection));
+
+            var _icons = _filterable || sortable ? _filterable ? _sorted ? _react2.default.createElement(_FilterVariant2.default, { className: filterIconClassName }) : _react2.default.createElement(_Menu2.default, { className: classes.icon }) : _sorted && _react2.default.createElement(_ArrowDownward2.default, { className: sortIconClassName }) : '';
+
+            var lookedUpClassName = (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
+
+            return _react2.default.createElement(
+                _Table.TableCell,
+                {
+                    style: {
+                        maxWidth: _width,
+                        minWidth: _width,
+                        width: _width,
+                        padding: 0,
+                        zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
+                        backgroundColor: 'inherit',
+                        textAlign: align
+                    }
+                },
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    !!selectable && _react2.default.createElement(_HiCheckbox2.default, {
+                        key: 'header_checkbox',
+                        classes: { root: dense ? classes.denseCheckbox : classes.checkbox },
+                        size: 18,
+                        onChange: onSelect,
+                        checked: selected === true,
+                        indeterminate: selected === 'mixed'
+                    }),
+                    _react2.default.createElement(
+                        'div',
+                        {
+                            style: {
+                                display: 'flex',
+                                paddingTop: dense ? 11 : 15,
+                                paddingBottom: dense ? 10 : 14,
+                                paddingLeft: selectable ? 0 : padding,
+                                paddingRight: padding
+                            },
+                            className: lookedUpClassName
+                        },
+                        _filterable || sortable ? _react2.default.createElement(
+                            _ButtonBase2.default,
+                            {
+                                disableRipple: true,
+                                style: {
+                                    width: '100%',
+                                    justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
+                                    padding: '1px 0'
+                                },
+                                onClick: function onClick(event) {
+                                    _filterable ? _this2.onFilterClick(event, filterSource) : _this2.handleSort(sortDirection === 'asc' ? 'desc' : 'asc');
+                                }
+                            },
+                            align === 'right' && _icons,
+                            _react2.default.createElement(
+                                'span',
+                                {
+                                    className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
+                                },
+                                title
+                            ),
+                            align !== 'right' && _icons
+                        ) : _react2.default.createElement(
+                            'div',
+                            {
+                                style: {
+                                    display: 'flex',
+                                    width: '100%',
+                                    paddingTop: 3,
+                                    textAlign: align,
+                                    justifyContent: 'initial'
+                                }
+                            },
+                            _react2.default.createElement(
+                                'span',
+                                { className: classes.labelContainer, style: { width: '100%' } },
+                                title
+                            )
+                        )
+                    ),
+                    sortedBorderElement
+                ),
+                !!filterOpen && _react2.default.createElement(_ColumnFilter2.default, {
+                    type: type,
+                    title: title,
+                    filterValueList: menuFilters,
+                    isOpen: filterOpen,
+                    onClose: this.closeFilterMenu,
+                    anchorEl: anchorEl,
+                    sortable: sortable,
+                    onSort: this.handleSort,
+                    onFilterChange: this.handleFilterChange
+                })
+            );
+        }
+    }]);
+    return HeaderCell;
+}(_react2.default.PureComponent);
+
+HeaderCell.defaultProps = {
+    selectable: false,
+    selected: false,
+    sortable: false,
+    sorted: false,
+    sortDirection: 'asc',
+    view: 'l',
+    dense: false,
+    fixedWidth: false,
+    sticky: true,
+    padding: 8
+};
+HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Recherche lookup sur cette colonne
+     */
+    lookedUp: _propTypes2.default.bool,
+    /**
+     * Fonction de callback au click du select
+     */
+    onSelect: _propTypes2.default.func,
+    /**
+     * Ajoute une checkbox
+     */
+    selectable: _propTypes2.default.bool,
+    /**
+     * État de la checkbox
+     */
+    selected: _propTypes2.default.oneOf([true, false, 'mixed']),
+    /**
+     * Titre condensé
+     */
+    smallTitle: _propTypes2.default.string,
+    /**
+     * Titre de la colonne
+     */
+    title: _propTypes2.default.string.isRequired,
+    /**
+     * Type de cellule
+     */
+    type: _propTypes2.default.string.isRequired,
+    /**
+     * Ajoute la fonction de tri au click sur le label & dans le ColumnFilter
+     */
+    sortable: _propTypes2.default.bool,
+    /**
+     * Tri actif / inactif
+     */
+    sorted: _propTypes2.default.bool,
+    /**
+     * Sens du tri
+     */
+    sortDirection: _propTypes2.default.oneOf(['asc', 'desc']),
+    /**
+     * Fonction de callback au tri - passe la direction du tri
+     */
+    onSort: _propTypes2.default.func,
+    /**
+     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
+     */
+    filterable: _propTypes2.default.bool,
+    /**
+     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
+     */
+    filterSource: _propTypes2.default.array,
+    /**
+     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
+     */
+    onFilterChange: _propTypes2.default.func,
+    /**
+     * View (L/M/S)
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    /**
+     * Densité, défini la hauteur de la ligne
+     */
+    dense: _propTypes2.default.bool,
+    /**
+     * Largeur de la cellule (hors padding), est déduit de view par défaut
+     */
+    width: _propTypes2.default.number,
+    /**
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     */
+    fixedWidth: _propTypes2.default.bool,
+    /**
+     * Title alignement, est déduit de type par défaut
+     */
+    align: _propTypes2.default.string,
+    /**
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * Padding de la cellule (px)
+     */
+    padding: _propTypes2.default.number
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHeaderCell' })(HeaderCell);