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

package/es/HiTable/ColumnFilter.js

@@ -1,398 +0,0 @@
-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 },
-                React.createElement(
-                    'span',
-                    { style: { marginRight: 4 } },
-                    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);