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

package/es/HiTable/HeaderCell.js

@@ -0,0 +1,376 @@
+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

@@ -0,0 +1,217 @@
+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);