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

package/es/HiTable/BodyCells/CellText.js

@@ -0,0 +1,188 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Tooltip from '../../Tooltip';
+import withStyles from '../../styles/withStyles';
+import * as cst from '../constants';
+
+export const styles = theme => ({
+    leftEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        direction: 'rtl'
+    },
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre'
+    },
+    noEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        whiteSpace: 'pre'
+    }
+});
+
+class CellText extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.cellText = null;
+        this.buildEllipsis = this.buildEllipsis.bind(this);
+    }
+
+    /**
+     * TODO - Ellipsis (middle, after-first-word)
+     */
+    componentDidMount() {
+        this.buildEllipsis();
+    }
+
+    componentDidUpdate() {
+        this.buildEllipsis();
+    }
+
+    buildEllipsis() {
+        /**
+         * Calcul l'espace disponible dans la cellule en plus du premier mot
+         * si il reste de l'espace, définit la largeur du span pour le reste du texte
+         */
+        if (this.props.ellipsis === cst.ELLIPSIS_AFTER_FIRST_WORD) {
+            if (this.cellText !== null) {
+                const [startSpan, endSpan] = this.cellText.getElementsByTagName('span');
+                if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
+                    const availableEndSpace = this.cellText.offsetWidth - startSpan.offsetWidth - 2;
+                    if (availableEndSpace > 0) {
+                        endSpan.style.width = `${availableEndSpace}px`;
+                    } else {
+                        startSpan.style.width = '100%';
+                    }
+                }
+            }
+        }
+
+        /**
+         * Calcul l'espace pris par les 2 spans (les 2 moitiés du texte),
+         * si ils dépassent la largeur de la cellule, diminue d'autant et proportionnellement chaque span
+         * ajoute l'ellipse à gauche de la deuxième moitié du texte.
+         */
+        if (this.props.ellipsis === cst.ELLIPSIS_MIDDLE) {
+            if (this.cellText !== null) {
+                const [startSpan, endSpan] = this.cellText.getElementsByTagName('span');
+                if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
+                    const availableEndSpace = this.cellText.offsetWidth - startSpan.offsetWidth - endSpan.offsetWidth;
+                    if (availableEndSpace < 0) {
+                        startSpan.style.width = '50%';
+                        endSpan.style.width = '49%';
+                    } else {
+                        startSpan.style.width = 'initial';
+                        endSpan.style.width = 'initial';
+                    }
+                }
+            }
+        }
+    }
+
+    render() {
+        const { classes, value, ellipsis } = this.props;
+
+        let start,
+            end,
+            valueElement = '';
+
+        let valueString = value.toString();
+
+        switch (ellipsis) {
+            case cst.ELLIPSIS_AFTER_FIRST_WORD:
+                // Split value in 2 strings around first whitespace
+                start = valueString.substr(0, valueString.indexOf(' '));
+                end = valueString.substr(valueString.indexOf(' ') + 1);
+                if (start === '') {
+                    start = end;
+                    end = '';
+                }
+                valueElement = React.createElement(
+                    'div',
+                    { ref: div => {
+                            this.cellText = div;
+                        } },
+                    React.createElement(
+                        'span',
+                        { className: classes.rightEllipsisSpan },
+                        start + ' '
+                    ),
+                    React.createElement(
+                        'span',
+                        { className: classes.leftEllipsisSpan },
+                        end
+                    )
+                );
+                break;
+
+            case cst.ELLIPSIS_MIDDLE:
+                // Split value in 2 strings
+                start = valueString.substr(0, Math.round(valueString.length / 2));
+                end = valueString.substr(Math.round(valueString.length / 2));
+                valueElement = React.createElement(
+                    'div',
+                    { ref: div => {
+                            this.cellText = div;
+                        } },
+                    React.createElement(
+                        'span',
+                        { className: classes.noEllipsisSpan },
+                        start
+                    ),
+                    React.createElement(
+                        'span',
+                        { className: classes.leftEllipsisSpan },
+                        end
+                    )
+                );
+                break;
+
+            case cst.ELLIPSIS_LEFT:
+                valueElement = React.createElement(
+                    'div',
+                    { className: classes.leftEllipsisSpan, style: { width: '100%' } },
+                    valueString
+                );
+                break;
+
+            case cst.ELLIPSIS_RIGHT:
+            default:
+                valueElement = React.createElement(
+                    'div',
+                    { className: classes.rightEllipsisSpan, style: { width: '100%' } },
+                    valueString
+                );
+                break;
+        }
+
+        return React.createElement(
+            Tooltip,
+            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+            valueElement
+        );
+    }
+}
+
+CellText.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Valeur à afficher
+     */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    /**
+     * Ellipsis
+     */
+    ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word'])
+} : {};
+export default withStyles(styles, { name: 'HmuiCellText' })(CellText);

package/es/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -0,0 +1,89 @@
+// @inheritedComponent CellLayout
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Tooltip from '../../Tooltip';
+import { withStyles, withTheme } from '../../styles';
+import { Lock, LockOpen, LockOpenOutline } from 'mdi-material-ui';
+
+export const styles = theme => ({
+    icon: {
+        width: 18,
+        height: 18
+    }
+});
+
+/**
+ * Cette cellule permet d'afficher une icône représentant le statut du 3DS.
+ */
+class CellThirdPartySecurity extends React.PureComponent {
+
+    render() {
+        const { classes, theme, code, value } = this.props;
+
+        const ECI_5 = 0; // authenticated
+        const ECI_6 = 1; // cardholder not enrolled
+        const ECI_7 = 2; //
+        const AUTH_0 = 3; //
+        const AUTH_1 = 4; // ask for 3DS
+        const AUTH_2 = 5; // force 3DS
+
+        let icon = null;
+        switch (code) {
+            case ECI_5:
+                icon = React.createElement(Lock, { className: classes.icon, style: { color: theme.palette.positive.normal } });
+                break;
+            case ECI_6:
+                icon = React.createElement(LockOpen, { className: classes.icon, style: { color: theme.palette.middle.normal } });
+                break;
+            case AUTH_1:
+                icon = React.createElement(LockOpenOutline, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                break;
+            case AUTH_2:
+                icon = React.createElement(LockOpen, { className: classes.icon, style: { color: theme.palette.neutral.light } });
+                break;
+            case ECI_7:
+            case AUTH_0:
+                icon = null;
+                break;
+        }
+
+        return React.createElement(
+            Tooltip,
+            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'div',
+                null,
+                icon
+            )
+        );
+    }
+}
+
+CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Useful to extend the theme applied to components.
+     * Used theme props positive.normal, middle.normal, neutral.light
+     */
+    theme: PropTypes.object,
+    /**
+     * Statut du 3DS
+     * ECI_5 = 0; // authenticated
+     * ECI_6 = 1; // cardholder not enrolled
+     * ECI_7 = 2; //
+     * AUTH_0 = 3; //
+     * AUTH_1 = 4; // ask for 3DS
+     * AUTH_2 = 5; // force 3DS
+     */
+    code: PropTypes.number,
+    /**
+     * Label
+     */
+    value: PropTypes.string
+} : {};
+export default withStyles(styles, { withTheme: true, name: 'HmuiCellThirdPartySecurity' })(CellThirdPartySecurity);

package/es/HiTable/BodyCells/index.js

@@ -0,0 +1,16 @@
+//flow
+
+export { default as CellThirdPartySecurity } from './CellThirdPartySecurity';
+export { default as CellAccount } from './CellAccount';
+export { default as CellAccountNumber } from './CellAccountNumber';
+export { default as CellAddress } from './CellAddress';
+export { default as CellDate } from './CellDate';
+export { default as CellIcon } from './CellIcon';
+export { default as CellImage } from './CellImage';
+export { default as CellLayout } from './CellLayout';
+export { default as CellNumeric } from './CellNumeric';
+export { default as CellRate } from './CellRate';
+export { default as CellStatus } from './CellStatus';
+export { default as CellSentinel } from './CellSentinel';
+export { default as CellText } from './CellText';
+export { default as CellCountry } from './CellCountry';

package/es/HiTable/BodyRow.js

@@ -0,0 +1,314 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+
+// @inheritedComponent BodyCellBuilder
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { TableRow, TableCell } from 'material-ui/Table';
+import { fade } from 'material-ui/styles/colorManipulator';
+import BodyCellBuilder from './BodyCellBuilder';
+import { withStyles, withTheme } from '../styles';
+import * as cst from './constants';
+
+export const styles = theme => ({
+    rootSelected: {
+        backgroundColor: theme.palette.background3
+    },
+    hover: {
+        '&:hover': {
+            backgroundColor: theme.palette.hover,
+            fontWeight: theme.typography.fontWeightMedium
+        }
+    },
+    rootSticky: {
+        position: 'relative',
+        border: 'none',
+        backgroundColor: 'inherit',
+        zIndex: 12,
+        paddingTop: 0,
+        paddingBottom: 0
+    },
+    patchDiv: {
+        position: 'relative',
+        border: 'none',
+        width: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        height: '100%',
+        zIndex: 12,
+        backgroundColor: 'inherit'
+    },
+    patchDivInnerRow: {
+        backgroundColor: '#ECEFF0'
+    }
+});
+
+class BodyRow extends React.PureComponent {
+
+    constructor(props) {
+        super();
+
+        this.state = {
+            live: props.live,
+            style: {
+                backgroundColor: props.live ? fade(props.theme.palette.business.primary.normal, 0.08) : props.theme.palette.background3,
+                transition: props.live ? 'background-color 2s' : 'none'
+            }
+        };
+
+        this.handleClick = this.handleClick.bind(this);
+        this.handleOpenRowDetails = this.handleOpenRowDetails.bind(this);
+        this.handleSelect = this.handleSelect.bind(this);
+    }
+
+    componentDidMount() {
+        // Live data animation
+        if (this.state.live) {
+            this.setState({
+                live: false,
+                style: {
+                    backgroundColor: this.props.theme.palette.background3,
+                    transition: 'background-color 2s'
+                }
+            });
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState, prevContext) {
+        // After animation, reset transition to none to handle background change on row hover
+        if (prevState.live === true && this.state.live === false) {
+            setTimeout(() => {
+                this.setState({
+                    style: {
+                        backgroundColor: this.props.theme.palette.background3,
+                        transition: 'none'
+                    }
+                });
+            }, 2500);
+        }
+    }
+
+    handleClick(event) {
+        // Prevent click propagation if it's a click on input (checkboxes...)
+        if (this.props.onClick && event.target.tagName !== 'INPUT') {
+            this.props.onClick(this.props.row);
+        }
+    }
+
+    handleOpenRowDetails() {
+        this.props.onOpenRowDetails(this.props.row.rowId);
+    }
+
+    handleSelect() {
+        this.props.onSelect(this.props.row);
+    }
+
+    render() {
+        const _props = this.props,
+              {
+            classes,
+            theme,
+            row,
+            columns,
+            orderedColumns,
+            selectable,
+            selected,
+            onClick,
+            view,
+            dense,
+            dateLocale,
+            numberLocale,
+            sticky,
+            innerRow,
+            isDetail
+        } = _props,
+              other = _objectWithoutProperties(_props, ['classes', 'theme', 'row', 'columns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
+
+        const { style } = this.state;
+
+        let firstCol = true;
+        let unfixedCol = true;
+
+        const rowStyle = _extends({}, style, {
+            cursor: typeof onClick === 'undefined' ? 'auto' : 'pointer',
+            height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+        }, isDetail && { backgroundColor: theme.palette.background1 });
+
+        const patchDivClass = classNames(classes.patchDiv, {
+            [classes.patchDivInnerRow]: innerRow
+        });
+
+        // If there is no datas don't display the row
+        if (!row.hasOwnProperty('datas')) return false;
+
+        return React.createElement(
+            TableRow,
+            {
+                classes: { selected: classes.rootSelected, hover: classes.hover },
+                onClick: this.handleClick,
+                hover: true,
+                style: rowStyle,
+                selected: selected
+            },
+            React.createElement(TableCell, {
+                style: {
+                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                    paddingLeft: cst.DEFAULT_PADDING[view]
+                },
+                key: `${row.rowId}-left-cell`,
+                className: patchDivClass
+            }),
+            orderedColumns.map(colRef => {
+                const { colId: colRefId, displayed, view: colView } = colRef,
+                      colRefProps = _objectWithoutProperties(colRef, ['colId', 'displayed', 'view']);
+                if (displayed !== false) {
+                    // the first column is sticky (except checkbox)
+                    const first = firstCol;
+                    firstCol = false;
+                    const _columns$colRef$colId = columns[colRef.colId],
+                          {
+                        colId,
+                        align,
+                        datas,
+                        ellipsis,
+                        fixedWidth,
+                        type,
+                        width
+                    } = _columns$colRef$colId,
+                          columnProps = _objectWithoutProperties(_columns$colRef$colId, ['colId', 'align', 'datas', 'ellipsis', 'fixedWidth', 'type', 'width']);
+                    const data = row.datas[colRef.colId];
+
+                    const effectiveView = colView || view;
+                    // add clickable badge in cell to open children
+                    const isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
+
+                    // the first non fixed column is the only one not fixed
+                    const unfixed = unfixedCol && fixedWidth !== true;
+                    unfixedCol = unfixedCol && fixedWidth !== true ? false : unfixedCol;
+
+                    let lookedUp = false;
+                    if (this.props.lookupColumns && this.props.lookupColumns.includes(colId)) {
+                        lookedUp = true;
+                    }
+
+                    return React.createElement(BodyCellBuilder, _extends({}, other, {
+                        key: `${row.rowId}-${colId}-cell`,
+                        ukey: `${row.rowId}-${colId}-cell`,
+                        checkboxValue: row.rowId,
+                        type: type,
+                        datas: data,
+                        ellipsis: ellipsis,
+                        align: align,
+                        view: effectiveView,
+                        padding: cst.DEFAULT_PADDING[view],
+                        width: width,
+                        fixedWidth: !unfixed,
+                        sticky: sticky && first,
+                        selectable: selectable && first,
+                        dateLocale: dateLocale,
+                        numberLocale: numberLocale,
+                        dense: dense,
+                        selected: selected,
+                        onSelect: this.handleSelect,
+                        onOpenDetails: this.handleOpenRowDetails,
+                        childrenCount: isParentAnchor ? row.children.length : null,
+                        colId: colId,
+                        lookedUp: lookedUp
+                    }, columnProps, colRefProps));
+                }
+                return null;
+            }),
+            React.createElement(TableCell, {
+                style: {
+                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                    paddingLeft: cst.DEFAULT_PADDING[view]
+                },
+                key: `${row.rowId}-right-cell`,
+                className: patchDivClass
+            })
+        );
+    }
+}
+
+BodyRow.defaultProps = {
+    selectable: false,
+    selected: false,
+    openedAsParent: false,
+    view: 'l',
+    dense: false,
+    sticky: false,
+    live: false,
+    innerRow: false,
+    lookupColumns: []
+};
+BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Colonnes du tableau (label, largeur, données, ... )
+     */
+    columns: PropTypes.object.isRequired,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: PropTypes.bool,
+    /**
+     * Applique le style d'une ligne intégrée a un sous-tableau
+     */
+    innerRow: PropTypes.bool,
+    /**
+     * Applique le style d'une ligne de détail
+     */
+    isDetail: PropTypes.bool,
+    /**
+     * Si c'est une nouvelle ligne (live) on lui applique une transition sur le background
+     */
+    live: PropTypes.bool,
+    /**
+     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
+     */
+    lookupColumns: PropTypes.array,
+    /**
+     * Fonction de callback appelée au click sur la ligne
+     */
+    onClick: PropTypes.func,
+    /**
+     * Fonction de callback appelée pour ouvrir les lignes de détails
+     * Passe l'id de la ligne (rowId)
+     */
+    onOpenRowDetails: PropTypes.func,
+    /**
+     * Uniquement si selectable, fonction de callback appelée au onChange sur la checkbox
+     */
+    onSelect: PropTypes.func,
+    /**
+     * Uniquement si row a des children, affiche la ligne "ouverte" (avec sous-tableau)
+     */
+    openedAsParent: PropTypes.bool,
+    /**
+     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
+     */
+    orderedColumns: PropTypes.array.isRequired,
+    /**
+     * Objet des valeurs a afficher
+     */
+    row: PropTypes.object.isRequired,
+    /**
+     * Définit si la ligne est sélectionnable
+     */
+    selectable: PropTypes.bool,
+    /**
+     * Uniquement si selectable, définit si la ligne est sélectionnée
+     */
+    selected: PropTypes.bool,
+    /**
+     * Définit si la 1e colonne reste visible à gauche
+     */
+    sticky: PropTypes.bool,
+    /**
+     * 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: 'HmuiBodyRow' })(BodyRow);