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

package/HiTable/ColumnFilter.js

@@ -0,0 +1,490 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+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 _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Popover = require('material-ui/Popover');
+
+var _Popover2 = _interopRequireDefault(_Popover);
+
+var _MenuItem = require('material-ui/Menu/MenuItem');
+
+var _MenuItem2 = _interopRequireDefault(_MenuItem);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _mdiMaterialUi = require('mdi-material-ui');
+
+var _HiButton = require('../HiButton');
+
+var _HiButton2 = _interopRequireDefault(_HiButton);
+
+var _HiSelectableList = require('../HiSelectableList');
+
+var _HiSelectableList2 = _interopRequireDefault(_HiSelectableList);
+
+var _HiForm = require('../HiForm');
+
+var _HiPins = require('../HiPins');
+
+var _HiPins2 = _interopRequireDefault(_HiPins);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        menu: {
+            width: 300,
+            paddingTop: 16
+        },
+        menuTitle: (0, _extends3.default)({}, theme.typography.h2, {
+            fontWeight: theme.typography.fontWeightLight,
+            marginLeft: 12,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            marginBottom: 16
+        }),
+        menuItemIcon: {
+            width: 20,
+            height: 20,
+            padding: 10,
+            color: theme.palette.neutral.normal
+        },
+        menuItemSortable: {
+            paddingLeft: 8
+        },
+        menuItemFilter: (0, _extends3.default)({}, theme.typography.body1, {
+            color: theme.palette.neutral.dark,
+            fontWeight: theme.typography.fontWeightMedium,
+            height: 40,
+            lineHeight: '40px',
+            paddingLeft: 28,
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center'
+        }),
+        closeMenu: {
+            width: '24px',
+            height: '24px',
+            color: theme.palette.neutral.normal,
+            cursor: 'pointer',
+            float: 'right',
+            marginRight: 10,
+            marginTop: -5
+        },
+        arrowRight: {
+            position: 'relative',
+            top: 2,
+            width: '15px',
+            height: '15px'
+        },
+        menuItemBorderBottom: {
+            borderBottom: '1px solid ' + theme.palette.line.stepper
+        },
+        buttonGroup: {
+            padding: 0
+        },
+        buttonGroupSubmit: {
+            textAlign: 'center',
+            margin: '20px auto'
+        },
+        submitButton: {
+            height: 40,
+            fontSize: 14
+        },
+        button: {
+            height: 40,
+            fontSize: 14,
+            width: '50%'
+        },
+        buttonDisabled: {
+            color: theme.palette.action.disabled
+        },
+        asc: {
+            transform: 'scale(1,-1)'
+        }
+    };
+};
+
+/**
+ * Construit le menu de filtre d'une colonne avec les options de tri et un multi-select des valeurs possible
+ * (uniquement pour les colonnes ayant une liste fermé de valeurs possibles)
+ */
+
+var ColumnFilter = function (_React$Component) {
+    (0, _inherits3.default)(ColumnFilter, _React$Component);
+
+    function ColumnFilter(props) {
+        (0, _classCallCheck3.default)(this, ColumnFilter);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (ColumnFilter.__proto__ || (0, _getPrototypeOf2.default)(ColumnFilter)).call(this));
+
+        _this.sortNone = function () {
+            _this.handleSort(false);
+        };
+
+        _this.sortAsc = function () {
+            _this.handleSort('asc');
+        };
+
+        _this.sortDesc = function () {
+            _this.handleSort('desc');
+        };
+
+        _this.state = {
+            // by default all filters are selected
+            selectedIdList: props.selectedIdList || props.filterValueList.map(function (item) {
+                return item.id;
+            }),
+            suggestions: props.filterValueList
+        };
+
+        _this.handleSort = _this.handleSort.bind(_this);
+        _this.toggleSelectItem = _this.toggleSelectItem.bind(_this);
+        _this.selectAllFilters = _this.selectAllFilters.bind(_this);
+        _this.deselectAllFilters = _this.deselectAllFilters.bind(_this);
+        return _this;
+    }
+
+    /**
+     * Ajoute / Supprime l'id de l'item du selectedIdList
+     * @param event
+     * @param item
+     */
+
+
+    (0, _createClass3.default)(ColumnFilter, [{
+        key: 'toggleSelectItem',
+        value: function toggleSelectItem(event, item) {
+            if (this.state.selectedIdList.includes(item.id)) {
+                this.setState(function (prevState) {
+                    return {
+                        selectedIdList: prevState.selectedIdList.filter(function (itemId) {
+                            return itemId !== item.id;
+                        })
+                    };
+                });
+            } else {
+                this.setState(function (prevState) {
+                    return {
+                        selectedIdList: [].concat((0, _toConsumableArray3.default)(prevState.selectedIdList), [item.id])
+                    };
+                });
+            }
+        }
+
+        /**
+         * Sélectionne tous les items filtrés
+         */
+
+    }, {
+        key: 'selectAllFilters',
+        value: function selectAllFilters() {
+            this.setState({ selectedIdList: this.state.suggestions.map(function (item) {
+                    return item.id;
+                }) });
+        }
+
+        /**
+         * Désélectionne tous les items filtrés
+         */
+
+    }, {
+        key: 'deselectAllFilters',
+        value: function deselectAllFilters() {
+            var _this2 = this;
+
+            var selectedIdList = this.state.selectedIdList;
+            this.state.suggestions.map(function (item) {
+                if (_this2.state.selectedIdList.includes(item.id)) {
+                    selectedIdList.splice(_this2.state.selectedIdList.indexOf(item.id), 1);
+                }
+            });
+            this.setState({ selectedIdList: selectedIdList });
+        }
+    }, {
+        key: 'handleSort',
+        value: function handleSort(direction) {
+            this.props.onSort(direction);
+            this.props.onClose();
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this3 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                translations = _props.translations,
+                anchorEl = _props.anchorEl,
+                type = _props.type,
+                title = _props.title,
+                filterValueList = _props.filterValueList,
+                isOpen = _props.isOpen,
+                onClose = _props.onClose,
+                sortable = _props.sortable,
+                onFilterChange = _props.onFilterChange;
+            var _state = this.state,
+                selectedIdList = _state.selectedIdList,
+                suggestions = _state.suggestions;
+
+
+            return _react2.default.createElement(
+                _Popover2.default,
+                {
+                    id: 'column-filter-menu',
+                    anchorEl: anchorEl,
+                    open: isOpen,
+                    classes: { paper: classes.menu },
+                    onClose: onClose
+                },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.menuTitle },
+                    _react2.default.createElement(
+                        'span',
+                        null,
+                        title
+                    ),
+                    _react2.default.createElement(_mdiMaterialUi.Close, { classes: { root: classes.closeMenu }, onClick: onClose })
+                ),
+                !!sortable && _react2.default.createElement(
+                    'div',
+                    { className: classes.menuItemSortable },
+                    _react2.default.createElement(
+                        _MenuItem2.default,
+                        {
+                            key: 'sort-none',
+                            classes: { root: classes.menuItemBorderBottom },
+                            onClick: this.sortNone
+                        },
+                        _react2.default.createElement(_mdiMaterialUi.Menu, { classes: { root: classes.menuItemIcon } }),
+                        _react2.default.createElement(
+                            'span',
+                            null,
+                            translations.default_sort
+                        )
+                    ),
+                    _react2.default.createElement(
+                        _MenuItem2.default,
+                        { key: 'sort-asc', onClick: this.sortAsc },
+                        _react2.default.createElement(_mdiMaterialUi.FilterVariant, {
+                            className: classes.asc,
+                            classes: { root: classes.menuItemIcon }
+                        }),
+                        _react2.default.createElement(
+                            'span',
+                            null,
+                            translations.sort_from,
+                            ' A',
+                            ' ',
+                            _react2.default.createElement(_mdiMaterialUi.ArrowRight, { className: classes.arrowRight }),
+                            ' Z'
+                        )
+                    ),
+                    _react2.default.createElement(
+                        _MenuItem2.default,
+                        {
+                            key: 'sort-desc',
+                            onClick: this.sortDesc,
+                            classes: { root: classes.menuItemBorderBottom }
+                        },
+                        _react2.default.createElement(_mdiMaterialUi.FilterVariant, { classes: { root: classes.menuItemIcon } }),
+                        _react2.default.createElement(
+                            'span',
+                            null,
+                            translations.sort_from,
+                            ' Z',
+                            ' ',
+                            _react2.default.createElement(_mdiMaterialUi.ArrowRight, { className: classes.arrowRight }),
+                            ' A'
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.menuItemFilter },
+                    translations.filter,
+                    _react2.default.createElement(
+                        _HiPins2.default,
+                        {
+                            color: selectedIdList.length > 0 ? this.props.theme.palette.business.primary.normal : this.props.theme.palette.chipBackground
+                        },
+                        selectedIdList.length
+                    )
+                ),
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.buttonGroup },
+                    _react2.default.createElement(
+                        _HiButton2.default,
+                        {
+                            className: classes.button,
+                            classes: { disabled: classes.buttonDisabled },
+                            disabled: selectedIdList.length === filterValueList.length,
+                            onClick: this.selectAllFilters
+                        },
+                        translations.select_all
+                    ),
+                    _react2.default.createElement(
+                        _HiButton2.default,
+                        {
+                            className: classes.button,
+                            classes: { disabled: classes.buttonDisabled },
+                            disabled: selectedIdList.length === 0,
+                            onClick: this.deselectAllFilters
+                        },
+                        translations.deselect_all
+                    )
+                ),
+                _react2.default.createElement(_HiForm.HiSearchField, {
+                    itemList: filterValueList,
+                    filterPropertyList: ['label'],
+                    callbackFilteredList: function callbackFilteredList(filteredList) {
+                        return _this3.setState({ suggestions: filteredList });
+                    },
+                    placeholder: translations.search
+                }),
+                _react2.default.createElement(_HiSelectableList2.default, {
+                    type: type,
+                    itemList: suggestions,
+                    selectedIdList: selectedIdList,
+                    onSelect: this.toggleSelectItem,
+                    leftPadding: 28
+                }),
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.buttonGroupSubmit },
+                    _react2.default.createElement(
+                        _HiButton2.default,
+                        {
+                            variant: 'raised',
+                            color: 'primary',
+                            classes: { root: classes.submitButton },
+                            onClick: function onClick() {
+                                onFilterChange(selectedIdList);onClose();
+                            }
+                        },
+                        translations.apply
+                    ),
+                    _react2.default.createElement(
+                        _HiButton2.default,
+                        {
+                            classes: { root: classes.submitButton },
+                            onClick: onClose,
+                            color: 'primary'
+                        },
+                        translations.cancel
+                    )
+                )
+            );
+        }
+    }]);
+    return ColumnFilter;
+}(_react2.default.Component);
+
+ColumnFilter.defaultProps = {
+    translations: {
+        default_sort: 'Default sort',
+        sort_from: 'Sort from',
+        filter: 'Filter',
+        select_all: 'Select all',
+        deselect_all: 'Deselect all',
+        search: 'Search',
+        apply: 'Apply',
+        cancel: 'Cancel'
+    },
+    sortable: false
+};
+ColumnFilter.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Type des données de la colonne
+     */
+    type: _propTypes2.default.string,
+    /**
+     * Titre de la colonne
+     */
+    title: _propTypes2.default.string,
+    /**
+     * Affiche / Cache l'élément
+     */
+    isOpen: _propTypes2.default.bool.isRequired,
+    /**
+     * Fonction de callback pour la fermeture du menu
+     */
+    onClose: _propTypes2.default.func.isRequired,
+    /**
+     * Élément de référence sur lequelle positionner le menu
+     */
+    anchorEl: _propTypes2.default.object.isRequired,
+    /**
+     * Ajoute les options de tri dans le menu
+     */
+    sortable: _propTypes2.default.bool,
+    /**
+     * Fonction de callback au tri - passe la direction du tri
+     */
+    onSort: _propTypes2.default.func,
+    /**
+     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
+     */
+    filterValueList: _propTypes2.default.array.isRequired,
+    /**
+     * Liste des id des valeurs sélectionnées
+     */
+    selectedIdList: _propTypes2.default.array,
+    /**
+     * Fonction de callback au changement du filtre - passe la liste des valeurs incluses
+     */
+    onFilterChange: _propTypes2.default.func
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { withTheme: true, name: 'HmuiColumnFilter' })(ColumnFilter);