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

package/es/HiTable/HiTableBody.js

@@ -0,0 +1,454 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TableBody, TableRow } from 'material-ui/Table';
+import { withStyles, withTheme } from '../styles';
+import BodyRow from './BodyRow';
+import ChildRow from './ChildRow';
+import HiStickyRow from './HiStickyRow';
+import * as cst from './constants';
+import { SORTED_COLUMN_ERROR_MESSAGE } from './HiTableHead';
+import isRequiredIf from 'react-proptype-conditional-require';
+
+export const styles = theme => ({
+    tbody: {
+        position: 'relative',
+        display: 'block' /* seperates the tbody from the header */
+        , width: '100%',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        zIndex: 11
+    },
+    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
+        } = 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
+            });
+
+            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
+                    };
+
+                    tableRows.push(React.createElement(BodyRow, _extends({ key: `${row.rowId}-${detailRow.rowId}` }, detailRowProps)));
+                });
+            }
+        });
+
+        return React.createElement(
+            TableBody,
+            {
+                id: `${tabId}-body`,
+                className: classes.tbody,
+                style: { height },
+                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'
+};
+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,
+    /**
+     * Hauteur du tableau (px)
+     */
+    height: PropTypes.number,
+    /**
+     * 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

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