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

package/es/HiTable/ColumnFilter.js

@@ -0,0 +1,394 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import Popover from 'material-ui/Popover';
+import MenuItem from 'material-ui/Menu/MenuItem';
+import PropTypes from 'prop-types';
+import { Close, ArrowRight as ArrowRightIcon, FilterVariant as FilterVariantIcon, Menu as MenuIcon } from 'mdi-material-ui';
+import HiButton from '../HiButton';
+import HiSelectableList from '../HiSelectableList';
+import { HiSearchField } from '../HiForm';
+import HiPins from '../HiPins';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+    menu: {
+        width: 300,
+        paddingTop: 16
+    },
+    menuTitle: _extends({}, 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: _extends({}, 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)
+ */
+class ColumnFilter extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.sortNone = () => {
+            this.handleSort(false);
+        };
+
+        this.sortAsc = () => {
+            this.handleSort('asc');
+        };
+
+        this.sortDesc = () => {
+            this.handleSort('desc');
+        };
+
+        this.state = {
+            // by default all filters are selected
+            selectedIdList: props.selectedIdList || props.filterValueList.map(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);
+    }
+
+    /**
+     * Ajoute / Supprime l'id de l'item du selectedIdList
+     * @param event
+     * @param item
+     */
+    toggleSelectItem(event, item) {
+        if (this.state.selectedIdList.includes(item.id)) {
+            this.setState(prevState => ({
+                selectedIdList: prevState.selectedIdList.filter(itemId => {
+                    return itemId !== item.id;
+                })
+            }));
+        } else {
+            this.setState(prevState => ({
+                selectedIdList: [...prevState.selectedIdList, item.id]
+            }));
+        }
+    }
+
+    /**
+     * Sélectionne tous les items filtrés
+     */
+    selectAllFilters() {
+        this.setState({ selectedIdList: this.state.suggestions.map(item => item.id) });
+    }
+
+    /**
+     * Désélectionne tous les items filtrés
+     */
+    deselectAllFilters() {
+        const selectedIdList = this.state.selectedIdList;
+        this.state.suggestions.map(item => {
+            if (this.state.selectedIdList.includes(item.id)) {
+                selectedIdList.splice(this.state.selectedIdList.indexOf(item.id), 1);
+            }
+        });
+        this.setState({ selectedIdList });
+    }
+
+    handleSort(direction) {
+        this.props.onSort(direction);
+        this.props.onClose();
+    }
+
+    render() {
+        const {
+            classes,
+            translations,
+            anchorEl,
+            type,
+            title,
+            filterValueList,
+            isOpen,
+            onClose,
+            sortable,
+            onFilterChange
+        } = this.props;
+        const { selectedIdList, suggestions } = this.state;
+
+        return React.createElement(
+            Popover,
+            {
+                id: 'column-filter-menu',
+                anchorEl: anchorEl,
+                open: isOpen,
+                classes: { paper: classes.menu },
+                onClose: onClose
+            },
+            React.createElement(
+                'div',
+                { className: classes.menuTitle },
+                React.createElement(
+                    'span',
+                    null,
+                    title
+                ),
+                React.createElement(Close, { classes: { root: classes.closeMenu }, onClick: onClose })
+            ),
+            !!sortable && React.createElement(
+                'div',
+                { className: classes.menuItemSortable },
+                React.createElement(
+                    MenuItem,
+                    {
+                        key: 'sort-none',
+                        classes: { root: classes.menuItemBorderBottom },
+                        onClick: this.sortNone
+                    },
+                    React.createElement(MenuIcon, { classes: { root: classes.menuItemIcon } }),
+                    React.createElement(
+                        'span',
+                        null,
+                        translations.default_sort
+                    )
+                ),
+                React.createElement(
+                    MenuItem,
+                    { key: 'sort-asc', onClick: this.sortAsc },
+                    React.createElement(FilterVariantIcon, {
+                        className: classes.asc,
+                        classes: { root: classes.menuItemIcon }
+                    }),
+                    React.createElement(
+                        'span',
+                        null,
+                        translations.sort_from,
+                        ' A',
+                        ' ',
+                        React.createElement(ArrowRightIcon, { className: classes.arrowRight }),
+                        ' Z'
+                    )
+                ),
+                React.createElement(
+                    MenuItem,
+                    {
+                        key: 'sort-desc',
+                        onClick: this.sortDesc,
+                        classes: { root: classes.menuItemBorderBottom }
+                    },
+                    React.createElement(FilterVariantIcon, { classes: { root: classes.menuItemIcon } }),
+                    React.createElement(
+                        'span',
+                        null,
+                        translations.sort_from,
+                        ' Z',
+                        ' ',
+                        React.createElement(ArrowRightIcon, { className: classes.arrowRight }),
+                        ' A'
+                    )
+                )
+            ),
+            React.createElement(
+                'div',
+                { className: classes.menuItemFilter },
+                translations.filter,
+                React.createElement(
+                    HiPins,
+                    {
+                        color: selectedIdList.length > 0 ? this.props.theme.palette.business.primary.normal : this.props.theme.palette.chipBackground
+                    },
+                    selectedIdList.length
+                )
+            ),
+            React.createElement(
+                'div',
+                { className: classes.buttonGroup },
+                React.createElement(
+                    HiButton,
+                    {
+                        className: classes.button,
+                        classes: { disabled: classes.buttonDisabled },
+                        disabled: selectedIdList.length === filterValueList.length,
+                        onClick: this.selectAllFilters
+                    },
+                    translations.select_all
+                ),
+                React.createElement(
+                    HiButton,
+                    {
+                        className: classes.button,
+                        classes: { disabled: classes.buttonDisabled },
+                        disabled: selectedIdList.length === 0,
+                        onClick: this.deselectAllFilters
+                    },
+                    translations.deselect_all
+                )
+            ),
+            React.createElement(HiSearchField, {
+                itemList: filterValueList,
+                filterPropertyList: ['label'],
+                callbackFilteredList: filteredList => this.setState({ suggestions: filteredList }),
+                placeholder: translations.search
+            }),
+            React.createElement(HiSelectableList, {
+                type: type,
+                itemList: suggestions,
+                selectedIdList: selectedIdList,
+                onSelect: this.toggleSelectItem,
+                leftPadding: 28
+            }),
+            React.createElement(
+                'div',
+                { className: classes.buttonGroupSubmit },
+                React.createElement(
+                    HiButton,
+                    {
+                        variant: 'raised',
+                        color: 'primary',
+                        classes: { root: classes.submitButton },
+                        onClick: () => {
+                            onFilterChange(selectedIdList);onClose();
+                        }
+                    },
+                    translations.apply
+                ),
+                React.createElement(
+                    HiButton,
+                    {
+                        classes: { root: classes.submitButton },
+                        onClick: onClose,
+                        color: 'primary'
+                    },
+                    translations.cancel
+                )
+            )
+        );
+    }
+}
+
+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: PropTypes.object,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: PropTypes.object,
+    /**
+     * Type des données de la colonne
+     */
+    type: PropTypes.string,
+    /**
+     * Titre de la colonne
+     */
+    title: PropTypes.string,
+    /**
+     * Affiche / Cache l'élément
+     */
+    isOpen: PropTypes.bool.isRequired,
+    /**
+     * Fonction de callback pour la fermeture du menu
+     */
+    onClose: PropTypes.func.isRequired,
+    /**
+     * Élément de référence sur lequelle positionner le menu
+     */
+    anchorEl: PropTypes.object.isRequired,
+    /**
+     * Ajoute les options de tri dans le menu
+     */
+    sortable: PropTypes.bool,
+    /**
+     * Fonction de callback au tri - passe la direction du tri
+     */
+    onSort: PropTypes.func,
+    /**
+     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
+     */
+    filterValueList: PropTypes.array.isRequired,
+    /**
+     * Liste des id des valeurs sélectionnées
+     */
+    selectedIdList: PropTypes.array,
+    /**
+     * Fonction de callback au changement du filtre - passe la liste des valeurs incluses
+     */
+    onFilterChange: PropTypes.func
+} : {};
+export default withStyles(styles, { withTheme: true, name: 'HmuiColumnFilter' })(ColumnFilter);