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

package/es/HiTable/BodyCells/CellText.js

@@ -1,189 +0,0 @@
-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',
-        width: '100%'
-    },
-    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

@@ -1,89 +0,0 @@
-// @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

@@ -1,16 +0,0 @@
-//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

@@ -1,320 +0,0 @@
-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: [],
-    fixedColumnWidth: true
-};
-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,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: 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);