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

package/es/HiTable/HiTableFooterScroll.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { TableCell, TableFooter, TableRow } from 'material-ui/Table';
+import HiButton from '../HiButton';
+
+import { withStyles } from '../styles';
+import HiLoader from '../HiLoader';
+
+export const styles = theme => ({
+    tfoot: {
+        zIndex: 13,
+        borderTop: '1px solid',
+        borderTopColor: theme.palette.line.stepper
+    },
+    centeredDiv: {
+        width: '50%',
+        textAlign: 'center',
+        margin: '0 auto',
+        height: 46
+    },
+    loadMoreButton: {
+        width: '100%',
+        maxWidth: 500,
+        height: 36
+    },
+    infiniteScrollSpan: {
+        position: 'absolute',
+        paddingTop: 16
+    }
+});
+
+/**
+ * HiTable Footer with infinite scroll
+ * Handle request to next datas and loading display
+ */
+
+var _ref = React.createElement(HiLoader, { loading: true });
+
+class HiTableFooterScroll extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            requestCount: 0
+        };
+    }
+
+    /** Lifecycle methods */
+
+    componentWillReceiveProps(nextProps, nextContext) {
+        // Auto request
+        if (nextProps.hasNextDatas && nextProps.isScrollToBottom === true && this.props.isScrollToBottom === false && this.state.requestCount < nextProps.maxAutoRequest) {
+            this.handleRequestNextDatas(false);
+        }
+    }
+
+    /** END Lifecycle methods */
+
+    handleRequestNextDatas(isForced) {
+        this.props.requestNextDatas(isForced);
+        this.setState(prevState => ({
+            requestCount: prevState.requestCount + 1
+        }));
+    }
+
+    render() {
+        const {
+            classes,
+            hasNextDatas,
+            maxAutoRequest,
+            isScrollToBottom,
+            translations
+        } = this.props;
+
+        const { requestCount } = this.state;
+
+        // Display loader until max auto request then display button
+        const nextDatasElement = requestCount < maxAutoRequest ? React.createElement(
+            'span',
+            { className: classes.infiniteScrollSpan },
+            _ref
+        ) : React.createElement(
+            HiButton,
+            {
+                raised: true,
+                color: 'primary',
+                className: classes.loadMoreButton,
+                onClick: () => this.handleRequestNextDatas(true)
+            },
+            translations.load_more
+        );
+
+        return React.createElement(
+            TableFooter,
+            { className: classes.tfoot },
+            React.createElement(
+                TableRow,
+                null,
+                React.createElement(
+                    TableCell,
+                    { colSpan: 1000 },
+                    React.createElement(
+                        'div',
+                        { className: classes.centeredDiv },
+                        hasNextDatas && isScrollToBottom && nextDatasElement
+                    )
+                )
+            )
+        );
+    }
+}
+
+HiTableFooterScroll.defaultProps = {
+    isScrollToBottom: false,
+    hasNextDatas: false,
+    translations: {
+        load_more: 'Load more'
+    }
+};
+HiTableFooterScroll.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Identifiant unique à spécifier si on utilise plusieurs composants HiTable
+     */
+    isScrollToBottom: PropTypes.bool,
+    /**
+     * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
+     */
+    hasNextDatas: PropTypes.bool,
+    /**
+     * Fonction de callback requérant l'affichage des données suivantes
+     */
+    requestNextDatas: PropTypes.func,
+    /**
+     * Traduction des chaînes affichées
+     */
+    translations: PropTypes.object
+} : {};
+export default withStyles(styles, { name: 'HmuiHiTableFooterScroll' })(HiTableFooterScroll);

package/es/HiTable/HiTableHead.js

@@ -0,0 +1,403 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
+import isRequiredIf from 'react-proptype-conditional-require';
+
+import { TableHead, TableRow, TableCell } from 'material-ui/Table';
+import PlusCircleIcon from 'mdi-material-ui/PlusCircle';
+import IconButton from 'material-ui/IconButton';
+import { fade } from 'material-ui/styles/colorManipulator';
+
+import { withStyles, withTheme } from '../styles';
+import HeaderCell from './HeaderCell';
+import * as cst from './constants';
+import OrderColumns from './OrderColumns';
+import { MANDATORY_COLUMN_ERROR_MESSAGE } from './HiTable';
+
+export const styles = theme => ({
+    thead: {
+        position: 'relative',
+        display: 'block' /*seperates the header from the body allowing it to be positioned*/
+        , width: '100%',
+        overflow: 'visible',
+        zIndex: 12
+    },
+    theadRow: {
+        backgroundColor: theme.palette.background3,
+        zIndex: 12
+    },
+    rightShadow: {
+        borderWidth: '4px 4px 4px 0',
+        borderStyle: 'solid',
+        webkitBorderImage: '-webkit-linear-gradient(right, rgba(42, 42, 42, 0.1), rgba(0, 0, 0, 0)) 1 100%',
+        mozBorderImage: '-moz-linear-gradient(right, rgba(42, 42, 42, 0.1), rgba(0, 0, 0, 0)) 1 100%',
+        oBorderImage: '-o-linear-gradient(right, rgba(42, 42, 42, 0.1), rgba(0, 0, 0, 0)) 1 100%',
+        borderImage: 'linear-gradient(to right, rgba(42, 42, 42, 0.1), rgba(0, 0, 0, 0)) 1 100%'
+    },
+    bottomShadow: {
+        borderWidth: '0 0 4px 0',
+        borderStyle: 'solid',
+        webkitBorderImage: '-webkit-linear-gradient(top, rgba(0,0,0, 0.08) 0%, rgba(0,0,0, 0) 100%)',
+        mozBorderImage: '-moz-linear-gradient(top, rgba(0,0,0, 0.08), rgba(0,0,0, 0) 1 100%)',
+        oBorderImage: '-o-linear-gradient(top, rgba(0,0,0, 0.08), rgba(0, 0, 0, 0)) 1 100%',
+        borderImage: 'linear-gradient(to top, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 1 100%'
+    },
+    orderColumnsIcon: {
+        cursor: 'pointer',
+        color: theme.palette.neutral.normal,
+        backgroundColor: theme.palette.background3,
+        '&:hover': {
+            color: theme.palette.business.primary.normal
+        }
+    },
+    liveDataRow: {
+        backgroundColor: fade(theme.palette.business.primary.normal, 0.08),
+        width: '100%'
+    },
+    liveDataContent: {
+        cursor: 'pointer',
+        fontSize: 13,
+        fontFamily: 'Roboto',
+        fontWeight: 400,
+        position: 'relative',
+        color: theme.palette.business.primary.normal
+    },
+    patchDiv: {
+        position: 'relative',
+        border: 'none',
+        width: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        height: '100%',
+        zIndex: 14,
+        backgroundColor: 'inherit'
+    }
+});
+
+export const SORTED_COLUMN_ERROR_MESSAGE = 'Vous devez saisir la propriété "sortedColumnId" pour les tableaux "sortable"';
+
+/**
+ * HiTable Head
+ * Handle header row creation and update from orderedColumns & columns
+ */
+class HiTableHead extends React.Component {
+
+    constructor(props) {
+        super();
+
+        this.orderColumnsButton = null;
+        this.state = {
+            hovered: false,
+            openedOrderColumns: false,
+            orderColumnsAnchorEl: null
+        };
+
+        this.handleEvent = this.handleEvent.bind(this);
+        this.handleOpenOrderColumns = this.handleOpenOrderColumns.bind(this);
+        this.handleCloseOrderColumns = this.handleCloseOrderColumns.bind(this);
+    }
+
+    handleEvent({ type }) {
+        switch (type) {
+            case 'mouseenter':
+                return this.setState({ hovered: true });
+            case 'mouseleave':
+                return this.setState({ hovered: false });
+            default:
+                return console.warn(`No case for event type "${type}"`);
+        }
+    }
+
+    handleOpenOrderColumns() {
+        this.setState({
+            openedOrderColumns: true,
+            orderColumnsAnchorEl: findDOMNode(this.orderColumnsButton)
+        });
+    }
+
+    handleCloseOrderColumns() {
+        this.setState({
+            hovered: false,
+            openedOrderColumns: false
+        });
+    }
+
+    render() {
+        const {
+            classes,
+            columns,
+            orderedColumns,
+            dataSource,
+            filterable,
+            onFilterChange,
+            orderable,
+            onColumnsOrderUpdate,
+            mandatoryColumnId,
+            selectable,
+            onSelect,
+            selectedIdList,
+            sortable,
+            onSort,
+            sortedColumnId,
+            sortDirection,
+            countLiveDatas,
+            onRequestLiveDatas,
+            dense,
+            sticky,
+            translations,
+            view,
+            lookupColumns
+        } = this.props;
+
+        const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
+
+        let headerProps = _extends({
+            className: classes.thead
+        }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
+
+        let unfixedColumnIsSet = false,
+            firstIndexDisplay;
+
+        orderedColumns.some(colRef => {
+            if (!colRef.hasOwnProperty('displayed') || colRef.displayed) {
+                firstIndexDisplay = colRef.colId;
+                return true;
+            }
+        });
+
+        return React.createElement(
+            TableHead,
+            headerProps,
+            React.createElement(
+                TableRow,
+                {
+                    className: classes.theadRow,
+                    style: {
+                        height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT
+                    }
+                },
+                React.createElement(TableCell, {
+                    key: 'header-left-cell',
+                    className: classes.patchDiv,
+                    style: { paddingLeft: cst.DEFAULT_PADDING[view] }
+                }),
+                orderedColumns.map(colRef => {
+                    if (!colRef.hasOwnProperty('displayed') || colRef.displayed) {
+                        let column = columns[colRef.colId];
+
+                        // the first non fixed column is the only one not fixed
+                        let fixed = true;
+                        if (!unfixedColumnIsSet && column.fixedWidth !== true) {
+                            fixed = false;
+                            unfixedColumnIsSet = true;
+                        }
+
+                        let firstColumn = colRef.colId === firstIndexDisplay;
+
+                        let effectiveView = colRef.hasOwnProperty('view') ? colRef.view : view;
+
+                        return React.createElement(HeaderCell, {
+                            key: 'header-' + column.colId,
+                            colId: column.colId,
+                            type: column['type'],
+                            title: column['label'],
+                            smallTitle: column['reducedLabel'],
+                            selectable: firstColumn && selectable,
+                            selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
+                            onSelect: onSelect,
+                            sortable: sortable,
+                            sorted: sortedColumnId === column.colId,
+                            sortDirection: sortDirection,
+                            onSort: onSort,
+                            filterable: filterable,
+                            filterSource: column['data'],
+                            onFilterChange: onFilterChange,
+                            view: effectiveView,
+                            padding: cst.DEFAULT_PADDING[view],
+                            dense: dense,
+                            width: column['width'],
+                            fixedWidth: fixed,
+                            align: column['align'],
+                            sticky: firstColumn && sticky,
+                            lookedUp: lookupColumns.includes(column.colId)
+                        });
+                    }
+                }),
+                React.createElement(
+                    TableCell,
+                    {
+                        key: 'header-right-cell',
+                        className: classes.patchDiv,
+                        style: { paddingLeft: cst.DEFAULT_PADDING[view] }
+                    },
+                    orderable && hovered && React.createElement(
+                        IconButton,
+                        {
+                            style: {
+                                position: 'absolute',
+                                right: 0,
+                                top: dense ? -4 : 0
+                            },
+                            ref: node => {
+                                this.orderColumnsButton = node;
+                            },
+                            onClick: this.handleOpenOrderColumns
+                        },
+                        React.createElement(PlusCircleIcon, { className: classes.orderColumnsIcon })
+                    ),
+                    orderable && React.createElement(OrderColumns, {
+                        isOpen: openedOrderColumns,
+                        onClose: this.handleCloseOrderColumns,
+                        anchorEl: orderColumnsAnchorEl,
+                        updateOrderedColumns: onColumnsOrderUpdate,
+                        columns: columns,
+                        orderedColumns: orderedColumns,
+                        mandatoryColumnId: mandatoryColumnId,
+                        translations: translations
+                    })
+                )
+            ),
+            countLiveDatas > 0 && React.createElement(
+                TableRow,
+                {
+                    id: 'nb-new-rows',
+                    className: classes.liveDataRow,
+                    style: {
+                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+                    }
+                },
+                React.createElement(
+                    TableCell,
+                    {
+                        style: { border: 'none', cursor: 'pointer' },
+                        colSpan: 1000,
+                        onClick: onRequestLiveDatas
+                    },
+                    React.createElement(
+                        'span',
+                        { className: classes.liveDataContent },
+                        translations.get_the_n_new_items.replace('%s', countLiveDatas)
+                    )
+                )
+            )
+        );
+    }
+}
+
+HiTableHead.defaultProps = {
+    selectable: false,
+    selectedIdList: [],
+    sortable: true,
+    sortDirection: 'asc',
+    filterable: false,
+    orderable: false,
+    countLiveDatas: 0,
+    dense: false,
+    sticky: true,
+    translations: {
+        get_the_n_new_items: 'Get the %s new items',
+        choose_and_organize_columns: 'Choose & organize columns',
+        search: 'Search',
+        time: 'Time'
+    },
+    view: 'l'
+};
+HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Colonnes du tableau (label, largeur, données, ... )
+     */
+    columns: PropTypes.object.isRequired,
+    /**
+     * Nombre de nouvelles données disponibles (live)
+     */
+    countLiveDatas: PropTypes.number,
+    /**
+     * Tableau des données
+     */
+    dataSource: PropTypes.array.isRequired,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: PropTypes.bool,
+    /**
+     * Active le filtre sur les colonnes filtrables
+     */
+    filterable: PropTypes.bool,
+    /**
+     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
+     */
+    lookupColumns: PropTypes.array,
+    /**
+     * Pour les tableaux "orderable" uniquement :
+     * Id de la colonne obligatoire,
+     * elle sera toujours affichée dans le tableau et ne pourra pas être cachée.
+     */
+    mandatoryColumnId: isRequiredIf(PropTypes.string, props => props.hasOwnProperty('orderable') && props.orderable === true, MANDATORY_COLUMN_ERROR_MESSAGE),
+    /**
+     * Fonction de callback sur l'ordre des colonnes
+     */
+    onColumnsOrderUpdate: PropTypes.func,
+    /**
+     * Fonction de callback sur le filtre d'une colonne
+     * Passe l'id de la colonne et la liste des id des éléments inclus
+     */
+    onFilterChange: PropTypes.func,
+    /**
+     * Fonction de callback requérant l'affichage des nouvelles données (live)
+     */
+    onRequestLiveDatas: PropTypes.func,
+    /**
+     * Fonction de callback sur le tri d'une colonne
+     * Passe l'id de la colonne et la direction du tri (ou false si tri par défaut)
+     */
+    onSort: PropTypes.func,
+    /**
+     * L'utilisateur peut changer l'ordre des colonnes, les afficher ou non,
+     * et changer la vue de chaque colonne (small, medium, large).
+     */
+    orderable: PropTypes.bool,
+    /**
+     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
+     */
+    orderedColumns: PropTypes.array.isRequired,
+    /**
+     * [v2 - à venir] Les lignes sont sélectionnables (affichage d'une checkbox)
+     */
+    selectable: PropTypes.bool,
+    /**
+     * Liste des id des lignes sélectionnées
+     */
+    selectedIdList: PropTypes.array,
+    /**
+     * Active le tri sur les colonnes
+     */
+    sortable: PropTypes.bool,
+    /**
+     * Sens du tri
+     */
+    sortDirection: PropTypes.oneOf(['asc', 'desc']),
+    /**
+     * Id de la colonne trié
+     */
+    sortedColumnId: isRequiredIf(PropTypes.string, props => props.hasOwnProperty('sortable') && props.sortable === true, SORTED_COLUMN_ERROR_MESSAGE),
+    /**
+     * Fixe la première colonne
+     */
+    sticky: PropTypes.bool,
+    /**
+     * Traduction des chaînes affichées
+     */
+    translations: PropTypes.object,
+    /**
+     * 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, { withTheme: true, name: 'HmuiHiTableHead' })(HiTableHead);