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

package/es/HiTable/HiTableFooterScroll.js

@@ -1,144 +0,0 @@
-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,
-            {
-                variant: 'raised',
-                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

@@ -1,415 +0,0 @@
-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 classNames from 'classnames';
-
-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',
-        width: '100%',
-        overflow: 'visible',
-        zIndex: 12
-    },
-    theadFixedWidth: {
-        display: 'block' /*seperates the header from the body allowing it to be positioned*/
-    },
-    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,
-            fixedColumnWidth
-        } = this.props;
-
-        const { hovered, openedOrderColumns, orderColumnsAnchorEl } = this.state;
-
-        let headerProps = _extends({
-            className: classNames(classes.thead, {
-                [classes.theadFixedWidth]: fixedColumnWidth
-            })
-        }, 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),
-                            fixedColumnWidth: fixedColumnWidth
-                        });
-                    }
-                }),
-                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,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: 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);