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

package/es/HiTable/HiTableBody.js

@@ -1,477 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TableBody, TableRow } from 'material-ui/Table';
-import classNames from 'classnames';
-import { withStyles } from '../styles';
-import BodyRow from './BodyRow';
-import ChildRow from './ChildRow';
-import HiStickyRow from './HiStickyRow';
-import * as cst from './constants';
-
-export const styles = theme => ({
-    tbody: {
-        position: 'relative',
-        width: '100%',
-        overflowX: 'hidden',
-        overflowY: 'auto',
-        zIndex: 11
-    },
-    tbodyFixedWidth: {
-        display: 'block' /* seperates the tbody from the header */
-    },
-    tbodyRows: {
-        backgroundColor: theme.palette.background3
-    },
-    tbodyRowsHover: {
-        '&:hover': {
-            backgroundColor: theme.palette.hover,
-            fontWeight: theme.typography.fontWeightMedium
-        }
-    },
-    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%'
-    },
-    patchDiv: {
-        position: 'absolute',
-        width: 24,
-        height: 50,
-        top: 0,
-        zIndex: 15,
-        backgroundColor: theme.palette.background3
-    }
-});
-
-/**
- * HiTable Body
- * Handle rows creation and update from datasource
- */
-class HiTableBody extends React.Component {
-
-    constructor(props) {
-        super();
-
-        this.buildIndicator = row => {
-            const { columns, dateLocale } = this.props;
-
-            let indicator;
-            const indicatorColumn = columns[row.parentIndicatorColumn];
-            switch (indicatorColumn.type) {
-                case 'date':
-                    const options = {
-                        year: 'numeric',
-                        month: '2-digit',
-                        day: '2-digit',
-                        hour: '2-digit',
-                        minute: '2-digit'
-                    };
-                    const date = new Date(row.datas[row.parentIndicatorColumn].value);
-                    indicator = date.toLocaleString(dateLocale, options);
-                    break;
-                case 'text':
-                default:
-                    indicator = row.datas[row.parentIndicatorColumn].value;
-                    break;
-            }
-
-            return indicator;
-        };
-
-        this.state = {
-            openedParentRowId: null,
-            openedDetailsRowIdList: []
-        };
-
-        this.buildIndicator = this.buildIndicator.bind(this);
-        this.setOpenedParentRowId = this.setOpenedParentRowId.bind(this);
-        this.toggleOpenedDetailsRowId = this.toggleOpenedDetailsRowId.bind(this);
-        this.positionStickyRowNextButton = this.positionStickyRowNextButton.bind(this);
-    }
-
-    componentDidMount() {
-        this.positionStickyRowNextButton();
-    }
-
-    componentDidUpdate(prevProps, prevState, prevContext) {
-        this.positionStickyRowNextButton();
-    }
-
-    /**
-     * Définit l'id de la ligne parente "ouverte" ou null
-     * (remplace la ligne par un sous-tableau)
-     * Il ne peut y avoir qu'une seule ligne parente "ouverte" à la fois
-     *
-     * @param row
-     */
-    setOpenedParentRowId(row) {
-        this.setState(prevState => ({
-            openedParentRowId: prevState.openedParentRowId === null || prevState.openedParentRowId !== row.rowId ? row.rowId : null
-        }));
-        this.props.addNewRowRefs();
-    }
-
-    positionStickyRowNextButton() {
-        // handle stickyRow next buttons position
-        const tableContainer = document.getElementById(this.props.tabId);
-        const stickyRowNextButtons = tableContainer.getElementsByClassName('stickyRowNextButton');
-        if (stickyRowNextButtons.length > 0) {
-            Array.prototype.filter.call(stickyRowNextButtons, (button, index) => {
-                if (index === stickyRowNextButtons.length - 1) {
-                    button.style.display = 'none';
-                    button.parentElement.style.top = '0px';
-                } else {
-                    if (button.style.display === 'none') {
-                        button.style.display = 'inline-block';
-                        if (button.parentElement.parentElement.parentElement.style.position === 'absolute') {
-                            button.parentElement.parentElement.previousSibling.style.height = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 8}px` : `${cst.CELL_HEIGHT - 8}px`;
-                        }
-                        button.parentElement.style.top = '4px';
-                    }
-                    const label = button.previousSibling.previousSibling;
-                    button.style.left = `${tableContainer.offsetWidth - label.offsetWidth - 48 - 160}px`;
-                }
-            });
-        }
-    }
-
-    /**
-     * Définit les id des lignes dont les détails sont affichés ou null
-     * (ajoute une ligne pour chaque détails)
-     *
-     * @param rowId
-     */
-    toggleOpenedDetailsRowId(rowId) {
-        this.setState(prevState => ({
-            openedDetailsRowIdList: prevState.openedDetailsRowIdList.includes(rowId) ? prevState.openedDetailsRowIdList.filter(id => {
-                return id !== rowId;
-            }) : [...prevState.openedDetailsRowIdList, rowId]
-        }));
-        this.props.addNewRowRefs();
-    }
-
-    /**
-     * Build children sub-table indicator
-     * @param row
-     * @returns {*}
-     */
-
-
-    render() {
-        const {
-            classes,
-            tabId,
-            columns,
-            orderedColumns,
-            dataSource,
-            onRowClick,
-            selectable,
-            onSelect,
-            selectedIdList,
-            onScroll,
-            dateUpdate,
-            dense,
-            height,
-            sticky,
-            view,
-            groupBy,
-            translations,
-            dateLocale,
-            numberLocale,
-            groupByIds,
-            sortedColumnId,
-            lookupColumns,
-            loading,
-            fixedColumnWidth
-        } = this.props;
-
-        const { openedParentRowId, openedDetailsRowIdList } = this.state;
-
-        let nbColumnsDisplayed = 0;
-        orderedColumns.forEach(column => {
-            if (column.displayed !== false) {
-                nbColumnsDisplayed += 1;
-            }
-        });
-
-        // build components list
-        const tableRows = [];
-        let stickyRowValue;
-        let stickyRowIndex = 0;
-        dataSource.forEach((row, index) => {
-
-            // Gestion du sticky group by
-            if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
-                let currentGroupByValue = row.datas[groupBy].value;
-                const date = new Date(currentGroupByValue);
-                if (date instanceof Date && isFinite(date)) {
-                    currentGroupByValue = currentGroupByValue.substr(0, 10);
-                }
-                // TODO => condition for other columns type
-                if (columns[groupBy].type === cst.TYPE_DATE) {
-                    if (index === 0 || currentGroupByValue !== stickyRowValue) {
-                        stickyRowValue = currentGroupByValue;
-                        let label = stickyRowValue;
-                        if (date instanceof Date && isFinite(date)) {
-                            label = new Date(label);
-                            const options = {
-                                year: 'numeric',
-                                month: 'long',
-                                weekday: 'long',
-                                day: 'numeric'
-                            };
-                            label = label.toLocaleString(dateLocale, options);
-                            label = label.charAt(0).toUpperCase() + label.substr(1);
-                        }
-
-                        tableRows.push(React.createElement(HiStickyRow, {
-                            key: `sticky_row_${row.rowId}`,
-                            dense: dense,
-                            value: stickyRowValue,
-                            label: label,
-                            length: groupByIds[currentGroupByValue].length,
-                            colSpan: nbColumnsDisplayed,
-                            index: stickyRowIndex,
-                            translations: translations.stickyRow,
-                            view: view,
-                            onClickNext: this.props.onClickNext
-                        }));
-
-                        tableRows.push(React.createElement(TableRow, {
-                            key: `ghost_sticky_row_${row.rowId}`,
-                            className: 'fakeStickyGroupBy',
-                            style: {
-                                height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
-                                display: 'none'
-                            }
-                        }));
-                        stickyRowIndex++;
-                    }
-                }
-            }
-
-            // has children
-            const hasChildren = row.hasOwnProperty('children') && row.children.length > 0;
-
-            // has detail rows
-            const hasDetailRows = row.hasOwnProperty('detailRows') && row.detailRows.length > 0;
-
-            const BodyRowProps = _extends({
-                columns,
-                dateLocale,
-                numberLocale,
-                dense,
-                live: row.ts >= dateUpdate,
-                lookupColumns,
-                onClick: onRowClick
-            }, hasChildren && {
-                openedAsParent: openedParentRowId === row.rowId,
-                onClick: this.setOpenedParentRowId // if row has children, onClick display the children
-            }, hasDetailRows && {
-                onOpenRowDetails: this.toggleOpenedDetailsRowId
-            }, {
-                orderedColumns
-            }, selectable && {
-                selectable,
-                selected: selectedIdList.includes(row.rowId),
-                onSelect
-            }, {
-                row,
-                sticky,
-                tabId,
-                view,
-                fixedColumnWidth
-            });
-
-            if (hasChildren && openedParentRowId === row.rowId) {
-                tableRows.push(React.createElement(ChildRow, _extends({
-                    key: `children-${row.rowId}`,
-                    parentRowId: row.rowId,
-                    parentRowDatas: row.datas,
-                    parentIndicatorColumn: row.parentIndicatorColumn,
-                    parentLabel: row.parentLabel,
-                    parentLabelIcon: row.parentLabelIcon,
-                    parentDetailRows: row.detailRows,
-                    children: row.children,
-                    onClose: this.setOpenedParentRowId
-                }, BodyRowProps)));
-            } else {
-                tableRows.push(React.createElement(BodyRow, _extends({ key: row.rowId }, BodyRowProps)));
-            }
-
-            // add opened detail rows
-            if (hasDetailRows && openedDetailsRowIdList.includes(row.rowId)) {
-                row.detailRows.forEach(detailRow => {
-                    const detailRowProps = {
-                        row: detailRow,
-                        columns,
-                        orderedColumns,
-                        view,
-                        dense,
-                        sticky,
-                        isDetail: true,
-                        fixedColumnWidth
-                    };
-
-                    tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
-                });
-            }
-        });
-
-        const tBodyClasses = classNames(classes.tbody, {
-            [classes.tbodyFixedWidth]: fixedColumnWidth
-        });
-
-        return React.createElement(
-            TableBody,
-            {
-                id: `${tabId}-body`,
-                className: tBodyClasses,
-                style: _extends({
-                    height
-                }, loading && {
-                    opacity: 0.6
-                }),
-                onScroll: onScroll
-            },
-            tableRows.map(tableRow => {
-                return tableRow;
-            })
-        );
-    }
-}
-
-HiTableBody.defaultProps = {
-    selectable: false,
-    selectedIdList: [],
-    dateUpdate: null,
-    dateLocale: 'en-EN',
-    numberLocale: 'en-EN',
-    dense: false,
-    height: 450,
-    sticky: true,
-    view: 'l',
-    loading: false
-};
-HiTableBody.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,
-    /**
-     * Tableau des données
-     */
-    dataSource: PropTypes.array.isRequired,
-    /**
-     * Locale utilisée pour le format des dates
-     */
-    dateLocale: PropTypes.string,
-    /**
-     * Timestamp de la dernière mise à jour du tableau
-     * permet d'animer les nouvelles lignes
-     */
-    dateUpdate: PropTypes.number,
-    /**
-     * Densité d'affichage (joue sur la hauteur des lignes)
-     */
-    dense: PropTypes.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: PropTypes.bool,
-    /**
-     * Hauteur du tableau (px)
-     */
-    height: PropTypes.number,
-    /**
-     * État du tableau en cours de chargement des données
-     */
-    loading: PropTypes.bool,
-    /**
-     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
-     */
-    lookupColumns: PropTypes.array,
-    /**
-     *  Locale utilisée pour le format des nombres
-     */
-    numberLocale: PropTypes.string,
-    /**
-     * Fonction de callback au click sur une ligne
-     * Passe l'id de la ligne (rowId)
-     */
-    onRowClick: PropTypes.func,
-    /**
-     * Fonction de callback au scroll sur le body du tableau
-     */
-    onScroll: PropTypes.func,
-    /**
-     * Fonction de callback sur la sélection d'une ligne
-     * (ou sélection/déselection de tous dans le header)
-     * Passe l'id de la ligne sélectionnée (rowId)
-     */
-    onSelect: PropTypes.func,
-    /**
-     * 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,
-    /**
-     * Fixe la première colonne
-     */
-    sticky: PropTypes.bool,
-    /**
-     * Identifiant unique à spécifier si on utilise plusieurs composants HiTable
-     */
-    tabId: PropTypes.string.isRequired,
-    /**
-     * Taille du tableau (L/M/S),
-     * définit l'espace entre les cellules et leurs tailles par default
-     */
-    view: PropTypes.oneOf(['l', 'm', 's']),
-    /**
-     * Id de la colonne par laquelle sont regroupé les éléments
-     */
-    groupBy: PropTypes.string,
-    /**
-     * Tableau associatif (parentGroupBy => id contenus)
-     */
-    groupByIds: PropTypes.object,
-    /**
-     * Id de la colonne trié
-     */
-    sortedColumnId: PropTypes.string,
-    /**
-     * Traduction des chaînes affichées
-     */
-    translations: PropTypes.object,
-    /**
-     * Callback lors d'un clic sur le bouton 'Next' d'une stickRow
-     * @param {int} index du stickyRow
-     */
-    onClickNext: PropTypes.func
-} : {};
-export default withStyles(styles, { withTheme: true, name: 'HmuiHiTableBody' })(HiTableBody);

package/es/HiTable/HiTableContextMenu.js

@@ -1,150 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ContextMenu, MenuItem } from 'react-contextmenu';
-
-import withStyles from '../styles/withStyles';
-import HiIconBuilder from '../utils/HiIconBuilder';
-
-export const styles = theme => ({
-    contextMenu: {
-        zIndex: 9999,
-        backgroundColor: theme.palette.background3,
-        boxShadow: '0px 2px 2px rgba(100, 100, 100, 0.5)'
-    },
-    contextMenuItem: _extends({}, theme.typography.body1, {
-        height: 40,
-        width: 300,
-        cursor: 'pointer',
-        padding: '10px 10px 10px 28px',
-        color: theme.palette.neutral.dark,
-        '&:hover': {
-            backgroundColor: theme.palette.hover,
-            fontWeight: theme.typography.fontWeightMedium
-        }
-    }),
-    title: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        marginLeft: 16,
-        width: 226
-    }
-});
-
-class HiTableContextMenu extends React.Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            value: ''
-        };
-
-        this.handleContextMenuOpen = this.handleContextMenuOpen.bind(this);
-        this.handleClickCopy = this.handleClickCopy.bind(this);
-        this.handleClickLookup = this.handleClickLookup.bind(this);
-        this.handleClickExclude = this.handleClickExclude.bind(this);
-        this.handleClickOpenNewTab = this.handleClickOpenNewTab.bind(this);
-    }
-
-    handleContextMenuOpen(event) {
-        this.setState({ value: event.detail.data.label });
-    }
-
-    handleClickCopy(event, data) {
-        // copy data to clipboard
-        let tmp = document.createElement('input');
-        tmp.id = 'tmp-copy';
-        document.getElementById(this.props.tabId).appendChild(tmp);
-        let existsTmp = document.getElementById('tmp-copy');
-        existsTmp.value = data.label;
-        existsTmp.select();
-        document.execCommand('copy');
-        existsTmp.remove();
-    }
-
-    handleClickLookup(event, data) {
-        this.props.onSearch(data.column, data.value, 'lookup');
-    }
-
-    handleClickExclude(event, data) {
-        this.props.onSearch(data.column, data.value, 'exclude');
-    }
-
-    handleClickOpenNewTab(event, data, element) {
-        this.props.onRedirect(data.id);
-    }
-
-    render() {
-        const { classes, tabId, translations } = this.props;
-
-        const contextMenuItems = [{ id: 'copy', icon: 'contentDuplicate', title: translations.copy, action: this.handleClickCopy }, { id: 'lookup', icon: 'crosshairsGps', title: translations.lookUp, action: this.handleClickLookup }, { id: 'exclude', icon: 'closeCircleOutline', title: translations.exclude, action: this.handleClickExclude }, { id: 'open', icon: 'openInNew', title: translations.openInNewTab, action: this.handleClickOpenNewTab }];
-
-        return React.createElement(
-            ContextMenu,
-            {
-                id: `hitable_context_menu_${tabId}`,
-                className: classes.contextMenu,
-                onShow: this.handleContextMenuOpen
-            },
-            contextMenuItems.map(menuItem => {
-                return React.createElement(
-                    MenuItem,
-                    {
-                        attributes: { className: classes.contextMenuItem },
-                        key: `hitable_context_menu_${tabId}_${menuItem.id}`,
-                        onClick: menuItem.action },
-                    React.createElement(HiIconBuilder, { icon: menuItem.icon }),
-                    React.createElement(
-                        'span',
-                        { className: classes.title },
-                        menuItem.title.replace('%s', this.state.value)
-                    )
-                );
-            })
-        );
-    }
-}
-
-HiTableContextMenu.defaultProps = {
-    translations: {
-        copy: 'Copy',
-        exclude: 'Exclude "%s"',
-        lookUp: 'Look up "%s"',
-        openInNewTab: 'Open the transaction in a new tab'
-    }
-};
-HiTableContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Surcharge le style du composant
-     */
-    classes: PropTypes.object,
-    /**
-     * Fonction de callback appelée au clic sur l'item redirection
-     * du menu contextuel ouvert au clic droit
-     *
-     * @param {int} id
-     */
-    onRedirect: PropTypes.func,
-    /**
-     * Fonction de callback appelée au clic sur les items de menu de recherche
-     * du menu contextuel ouvert au clic droit
-     *
-     * @param {string} searched field
-     * @param {string} searched value
-     * @param {string} search type (lookup, exclude)
-     */
-    onSearch: PropTypes.func,
-    /**
-     * Identifiant unique de la table
-     * (identifie le menu)
-     */
-    tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /**
-     * Traduction des chaînes affichées
-     */
-    translations: PropTypes.object
-} : {};
-export default withStyles(styles, { name: 'HmuiHiTableContextMenu' })(HiTableContextMenu);