@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/es/HiTable/HeaderCell.js

@@ -1,376 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TableCell } from 'material-ui/Table';
-import classNames from 'classnames';
-import ButtonBase from 'material-ui/ButtonBase';
-import FilterVariantIcon from 'mdi-material-ui/FilterVariant';
-import MenuIcon from 'mdi-material-ui/Menu';
-import ArrowDownwardIcon from '../svg-icons/ArrowDownward';
-
-import HiCheckbox from '../HiCheckbox';
-import { withStyles, withTheme } from '../styles';
-import ColumnFilter from './ColumnFilter';
-import * as cst from './constants';
-
-export const styles = theme => ({
-    checkbox: {
-        float: 'left',
-        margin: '10px 10px 0px 10px'
-    },
-    denseCheckbox: {
-        float: 'left',
-        margin: '8px 8px 0px 7px'
-    },
-    labelContainer: _extends({
-        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
- */
-class HeaderCell extends React.PureComponent {
-
-    constructor(props) {
-        super(props);
-
-        this.onFilterClick = (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);
-    }
-
-    openFilterMenu(event, columnDataset) {
-        this.setState({
-            filterOpen: true,
-            anchorEl: event.currentTarget,
-            menuFilters: columnDataset
-        });
-    }
-
-    closeFilterMenu() {
-        this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
-    }
-
-    /**
-     * Sort column with direction
-     * @param direction
-     */
-    handleSort(direction) {
-        this.props.onSort(this.props.colId, direction);
-    }
-
-    handleFilterChange(itemIdList) {
-        this.props.onFilterChange(this.props.colId, itemIdList);
-    }
-
-    render() {
-        const {
-            classes,
-            type,
-            title,
-            selectable,
-            selected,
-            onSelect,
-            sortable,
-            sorted,
-            sortDirection,
-            filterable,
-            filterSource,
-            view,
-            dense,
-            width = cst.DEFAULT_WIDTHS[type][view],
-            fixedWidth,
-            align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
-            sticky,
-            padding,
-            lookedUp
-        } = this.props;
-
-        const { filterOpen, anchorEl, menuFilters } = this.state;
-
-        let offset = selectable ? dense ? 32 : 40 : padding;
-
-        // Inclue le padding et/ou la checkbox dans la largeur de la cellule
-        let _width = width + offset + padding;
-        // N'affiche pas le tri si il est désactivé.
-        let _sorted = sortable && sorted;
-        // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
-        let _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.
-        let sortedBorderElement = _sorted ? React.createElement('div', {
-            className: classes.sortedBorder,
-            style: { marginLeft: offset, marginRight: padding }
-        }) : null;
-
-        const sortIconClassName = classNames(classes.icon, classes.primary, {
-            [classes['sort' + sortDirection]]: !!sortDirection
-        });
-
-        const filterIconClassName = classNames(classes.icon, classes.primary, {
-            [classes['filter' + sortDirection]]: !!sortDirection
-        });
-
-        let _icons = _filterable || sortable ? _filterable ? _sorted ? React.createElement(FilterVariantIcon, { className: filterIconClassName }) : React.createElement(MenuIcon, { className: classes.icon }) : _sorted && React.createElement(ArrowDownwardIcon, { className: sortIconClassName }) : '';
-
-        const lookedUpClassName = classNames({ [classes.lookedUp]: lookedUp });
-
-        return React.createElement(
-            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
-                }
-            },
-            React.createElement(
-                'div',
-                null,
-                !!selectable && React.createElement(HiCheckbox, {
-                    key: 'header_checkbox',
-                    classes: { root: dense ? classes.denseCheckbox : classes.checkbox },
-                    size: 18,
-                    onChange: onSelect,
-                    checked: selected === true,
-                    indeterminate: selected === 'mixed'
-                }),
-                React.createElement(
-                    'div',
-                    {
-                        style: {
-                            display: 'flex',
-                            paddingTop: dense ? 11 : 15,
-                            paddingBottom: dense ? 10 : 14,
-                            paddingLeft: selectable ? 0 : padding,
-                            paddingRight: padding
-                        },
-                        className: lookedUpClassName
-                    },
-                    _filterable || sortable ? React.createElement(
-                        ButtonBase,
-                        {
-                            disableRipple: true,
-                            style: {
-                                width: '100%',
-                                justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
-                                padding: '1px 0'
-                            },
-                            onClick: event => {
-                                _filterable ? this.onFilterClick(event, filterSource) : this.handleSort(sortDirection === 'asc' ? 'desc' : 'asc');
-                            }
-                        },
-                        align === 'right' && _icons,
-                        React.createElement(
-                            'span',
-                            {
-                                className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
-                            },
-                            title
-                        ),
-                        align !== 'right' && _icons
-                    ) : React.createElement(
-                        'div',
-                        {
-                            style: {
-                                display: 'flex',
-                                width: '100%',
-                                paddingTop: 3,
-                                textAlign: align,
-                                justifyContent: 'initial'
-                            }
-                        },
-                        React.createElement(
-                            'span',
-                            { className: classes.labelContainer, style: { width: '100%' } },
-                            title
-                        )
-                    )
-                ),
-                sortedBorderElement
-            ),
-            !!filterOpen && React.createElement(ColumnFilter, {
-                type: type,
-                title: title,
-                filterValueList: menuFilters,
-                isOpen: filterOpen,
-                onClose: this.closeFilterMenu,
-                anchorEl: anchorEl,
-                sortable: sortable,
-                onSort: this.handleSort,
-                onFilterChange: this.handleFilterChange
-            })
-        );
-    }
-}
-
-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: PropTypes.object,
-    /**
-     * Recherche lookup sur cette colonne
-     */
-    lookedUp: PropTypes.bool,
-    /**
-     * Fonction de callback au click du select
-     */
-    onSelect: PropTypes.func,
-    /**
-     * Ajoute une checkbox
-     */
-    selectable: PropTypes.bool,
-    /**
-     * État de la checkbox
-     */
-    selected: PropTypes.oneOf([true, false, 'mixed']),
-    /**
-     * Titre condensé
-     */
-    smallTitle: PropTypes.string,
-    /**
-     * Titre de la colonne
-     */
-    title: PropTypes.string.isRequired,
-    /**
-     * Type de cellule
-     */
-    type: PropTypes.string.isRequired,
-    /**
-     * Ajoute la fonction de tri au click sur le label & dans le ColumnFilter
-     */
-    sortable: PropTypes.bool,
-    /**
-     * Tri actif / inactif
-     */
-    sorted: PropTypes.bool,
-    /**
-     * Sens du tri
-     */
-    sortDirection: PropTypes.oneOf(['asc', 'desc']),
-    /**
-     * Fonction de callback au tri - passe la direction du tri
-     */
-    onSort: PropTypes.func,
-    /**
-     * Ajoute le composant ColumnFilter, par défaut à True si filterSource est définie.
-     */
-    filterable: PropTypes.bool,
-    /**
-     * Liste fermé des valeurs disponibles sur lesquelles filtrer (inclure/exclure)
-     */
-    filterSource: PropTypes.array,
-    /**
-     * Fonction de callback au changement du filtre - passe la liste des id des valeurs incluses
-     */
-    onFilterChange: PropTypes.func,
-    /**
-     * View (L/M/S)
-     */
-    view: PropTypes.oneOf(['l', 'm', 's']),
-    /**
-     * Densité, défini la hauteur de la ligne
-     */
-    dense: PropTypes.bool,
-    /**
-     * Largeur de la cellule (hors padding), est déduit de view par défaut
-     */
-    width: PropTypes.number,
-    /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
-     */
-    fixedWidth: PropTypes.bool,
-    /**
-     * Title alignement, est déduit de type par défaut
-     */
-    align: PropTypes.string,
-    /**
-     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
-     */
-    sticky: PropTypes.bool,
-    /**
-     * Padding de la cellule (px)
-     */
-    padding: PropTypes.number
-} : {};
-export default withStyles(styles, { withTheme: true, name: 'HmuiHeaderCell' })(HeaderCell);

package/es/HiTable/HiStickyRow.js

@@ -1,217 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TableRow, TableCell } from 'material-ui/Table';
-import isRequiredIf from 'react-proptype-conditional-require';
-import Button from 'material-ui/Button';
-import classNames from 'classnames';
-import HiChip from '../HiChip';
-
-import { withStyles } from '../styles';
-import * as cst from './constants';
-
-export const styles = theme => ({
-    root: {
-        width: '100%',
-        zIndex: 15,
-        backgroundColor: theme.palette.background1
-    },
-    rightPaddingDiv: {
-        position: 'absolute',
-        width: '24px',
-        top: 0,
-        right: 24,
-        backgroundColor: theme.palette.background3,
-        zIndex: 11,
-        display: 'none'
-    },
-    label: {
-        position: 'relative',
-        left: 15,
-        paddingRight: 20,
-        top: -3,
-        color: theme.palette.neutral.dark,
-        marginRight: 8
-    },
-    controlLabelRoot: {
-        marginLeft: 0,
-        marginRight: 8
-    },
-    controlLabelLabel: {
-        fontSize: 13
-    },
-    badgeRoot: {
-        position: 'relative',
-        top: -4
-    },
-    button: {
-        top: -3,
-        color: theme.palette.neutral.normal,
-        maxHeight: cst.CELL_HEIGHT - 8,
-        minHeight: cst.CELL_HEIGHT - 8,
-        position: 'relative',
-        lineHeight: '10px',
-        direction: 'rtl'
-    },
-    denseButton: {
-        height: cst.CELL_HEIGHT_DENSE - 2,
-        minHeight: cst.CELL_HEIGHT_DENSE - 2
-    },
-    patchDiv: {
-        position: 'relative',
-        border: 'none',
-        width: 0,
-        paddingRight: 0,
-        paddingTop: 0,
-        paddingBottom: 0,
-        zIndex: 12,
-        backgroundColor: 'inherit',
-        boxShadow: 'inset 0 6px 7px -7px rgba(0, 0, 0, 0.16)'
-    }
-});
-
-export const ONCHANGE_ERROR_MESSAGE = 'Vous devez saisir la propriété "onChange" pour les lignes "selectable"';
-
-class HiStickyRow extends React.PureComponent {
-
-    render() {
-        const { classes, dense, colSpan, label, length, index, translations, view } = this.props;
-        const buttonClasses = classNames(classes.button, { [classes.denseButton]: dense });
-
-        return React.createElement(
-            TableRow,
-            {
-                className: `${classes.root} stickyGroupBy`,
-                style: {
-                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
-                    border: 'none',
-                    boxShadow: 'inset 0 6px 7px -7px rgba(0, 0, 0, 0.16)'
-                }
-            },
-            React.createElement(TableCell, {
-                style: {
-                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
-                    paddingLeft: cst.DEFAULT_PADDING[view]
-                },
-                className: classes.patchDiv
-            }),
-            React.createElement(
-                TableCell,
-                {
-                    colSpan: colSpan,
-                    style: {
-                        height: '100%',
-                        border: 'none',
-                        padding: 0
-                    },
-                    className: 'noShadow'
-                },
-                React.createElement(
-                    'div',
-                    {
-                        id: 'stickyRowContent',
-                        className: 'stickyRowContent',
-                        style: {
-                            position: 'relative',
-                            top: dense ? 3 : 2
-                        }
-                    },
-                    React.createElement(
-                        'span',
-                        { id: 'sticky-label', className: classes.label },
-                        label
-                    ),
-                    React.createElement(
-                        'span',
-                        { id: 'sticky-badge', style: { position: 'relative' } },
-                        React.createElement(HiChip, { label: length, classes: { root: classes.badgeRoot } })
-                    ),
-                    React.createElement(
-                        Button,
-                        {
-                            classes: { root: buttonClasses },
-                            className: 'stickyRowNextButton',
-                            onClick: () => this.props.onClickNext(index)
-                        },
-                        translations.button.next
-                    )
-                )
-            ),
-            React.createElement(TableCell, {
-                style: {
-                    height: '100%',
-                    paddingLeft: cst.DEFAULT_PADDING[view]
-                },
-                className: classes.patchDiv
-            })
-        );
-    }
-}
-
-HiStickyRow.defaultProps = {
-    dense: false,
-    selectable: false,
-    checked: false,
-    translations: {
-        button: {
-            next: 'next'
-        }
-    }
-};
-HiStickyRow.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Si la ligne est selectable => checkbox cochée ou non
-     */
-    checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Nombre de colonnes affichées dans le tableau
-     */
-    colSpan: PropTypes.number.isRequired,
-    /**
-     * Densité d'affichage (joue sur la hauteur des lignes)
-     */
-    dense: PropTypes.bool,
-    /**
-     * Index du sticky row par rapport aux autres
-     */
-    index: PropTypes.number.isRequired,
-    /**
-     * Label à afficher
-     */
-    label: PropTypes.string.isRequired,
-    /**
-     * Nombre d'item pour ce groupBy
-     */
-    length: PropTypes.number,
-    /**
-     * Fonction de callback à appeler si la ligne est selectable
-     */
-    onChange: isRequiredIf(PropTypes.func, props => props.hasOwnProperty('selectable') && props.selectable === true, ONCHANGE_ERROR_MESSAGE),
-    /**
-     * Fonction de callback pour aller au prochain sticky row item
-     *
-     * @param {int} index of sticky row
-     */
-    onClickNext: PropTypes.func.isRequired,
-    /**
-     * Les lignes sont sélectionnables (affichage d'une checkbox)
-     */
-    selectable: PropTypes.bool,
-    /**
-     * Objet contenant les éléments textuels du composant
-     */
-    translations: PropTypes.object.isRequired,
-    /**
-     * Valeur de la ligne
-     */
-    value: PropTypes.string,
-    /**
-     * Taille du tableau (L/M/S),
-     * définit l'espace entre les cellules et leurs tailles par default
-     */
-    view: PropTypes.oneOf(['l', 'm', 's'])
-} : {};
-export default withStyles(styles, { name: 'HmuiHiStickyRow' })(HiStickyRow);