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

package/es/HiTable/BodyCells/CellLayout.js

@@ -1,204 +0,0 @@
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import TableCell from 'material-ui/Table/TableCell';
-import classNames from 'classnames';
-
-import HiCheckbox from '../../HiCheckbox';
-import { withStyles } from '../../styles';
-import * as cst from '../constants';
-import HiPins from '../../HiPins';
-
-export const styles = theme => ({
-    root: {
-        padding: 0,
-        backgroundColor: 'inherit',
-        border: 'none'
-    },
-    flexContent: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        position: 'relative'
-    },
-    checkbox: {
-        float: 'left',
-        position: 'relative'
-    },
-    lookedUp: {
-        background: `linear-gradient(0deg, transparent 25%, #FFFF8D 10%, #FFFF8D 75%, transparent 30%)`,
-        borderRadius: '45%'
-    },
-    pins: {
-        position: 'relative',
-        top: 3
-    }
-});
-
-/**
- * Construit une cellule du body d'AdvancedTable
- * Définit la largeur et le padding effectif
- * Intègre la checkbox de sélection si besoin
- * Gère le comportement sticky
- */
-class CellLayout extends React.Component {
-
-    /**
-     * * Should not update if selected has changed but cell isn't selectable anyway
-     * @param nextProps
-     * @param nextState
-     * @param nextContext
-     * @returns {boolean}
-     */
-    shouldComponentUpdate(nextProps, nextState, nextContext) {
-        if (nextProps.selected === !this.props.selected && !this.props.selectable && !nextProps.selectable) {
-            return false;
-        }
-        return true;
-    }
-
-    render() {
-        const {
-            classes, type, children,
-            align = cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left',
-            view, dense, width = cst.DEFAULT_WIDTHS[type][view], fixedColumnWidth, sticky,
-            selectable, selected, onSelect, childrenCount, theme, padding,
-            lookedUp
-        } = this.props;
-
-        const offset = selectable ? dense ? 32 : 40 : 0;
-
-        // Inclus le padding et/ou la checkbox dans la largeur de la cellule
-        const _width = width + offset + (selectable ? padding : 2 * padding);
-
-        const lookedUpClassName = classNames(classes.flexContent, { [classes.lookedUp]: lookedUp });
-
-        const cellStyle = {
-            zIndex: sticky ? 12 : 11,
-            textAlign: align,
-            position: sticky ? 'relative' : 'inherit',
-            border: 'none',
-            height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-        };
-
-        if (fixedColumnWidth) {
-            cellStyle.maxWidth = _width;
-            cellStyle.minWidth = _width;
-            cellStyle.width = _width;
-        }
-
-        return React.createElement(
-            TableCell,
-            { className: classes.root, style: cellStyle },
-            !!selectable && React.createElement(HiCheckbox, {
-                classes: { root: classes.checkbox },
-                style: { margin: dense ? 6 : 10 },
-                size: 18,
-                onChange: onSelect,
-                checked: selected
-            }),
-            React.createElement(
-                'div',
-                {
-                    className: lookedUpClassName,
-                    style: {
-                        width: `calc(100% - ${offset}px)`,
-                        paddingLeft: selectable ? 0 : padding,
-                        paddingRight: padding,
-                        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
-                    }
-                },
-                children,
-                childrenCount && React.createElement(
-                    'div',
-                    {
-                        style: {
-                            position: 'absolute',
-                            top: dense ? 2 : 6,
-                            right: 0
-                        }
-                    },
-                    React.createElement(
-                        HiPins,
-                        { color: theme.palette.business.primary.normal, className: classes.pins },
-                        childrenCount
-                    )
-                )
-            )
-        );
-    }
-}
-
-CellLayout.defaultProps = {
-    view: 'l',
-    selectable: false,
-    selected: false,
-    dense: false,
-    fixedColumnWidth: true,
-    sticky: false,
-    padding: 8
-};
-CellLayout.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Contenu de la cellule
-     */
-    children: PropTypes.element,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Densité, défini la hauteur de la ligne
-     */
-    dense: PropTypes.bool,
-    /**
-     * Recherche lookup sur cette colonne
-     */
-    lookedUp: PropTypes.bool,
-    /**
-     * Type de cellule
-     */
-    type: PropTypes.string.isRequired,
-    /**
-     * View (L/M/S)
-     */
-    view: PropTypes.oneOf(['l', 'm', 's']),
-    /**
-     * Largeur de la cellule (hors padding), est déduit de view par défaut
-     */
-    width: PropTypes.number,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: PropTypes.bool,
-    /**
-     * Title alignement, est déduit de type par défaut
-     */
-    align: PropTypes.string,
-    /**
-     * Padding de la cellule (px)
-     */
-    padding: PropTypes.number,
-    /**
-     * True si la colonne est la première colonne et doit avoir un comportement "sticky" lors du scroll horizontal
-     */
-    sticky: PropTypes.bool,
-    /**
-     * Ajoute une checkbox
-     */
-    selectable: PropTypes.bool,
-    /**
-     * État de la checkbox
-     */
-    selected: PropTypes.oneOf([true, false, 'mixed']),
-    /**
-     * Fonction de callback au click du select
-     */
-    onSelect: PropTypes.func,
-    /**
-     * Nombre d'enfants
-     */
-    childrenCount: PropTypes.number
-} : {};
-export default withStyles(styles, { withTheme: true, name: 'HmuiCellLayout' })(CellLayout);

package/es/HiTable/BodyCells/CellNumeric.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import withStyles from '../../styles/withStyles';
-import { formatNumber, formatCurrencyAmount } from '../../utils/hiHelpers';
-import Tooltip from '../../Tooltip';
-import * as cst from '../constants';
-
-export const styles = theme => ({
-    spanNumeric: {
-        direction: 'rtl'
-    }
-});
-
-/**
- * Cette cellule permet d'afficher un volume ou un montant avec devise
- */
-class CellNumeric extends React.PureComponent {
-
-    render() {
-        const { classes, value, locale, currency, view } = this.props;
-
-        let displayedValue = '';
-        let titleValue = '';
-
-        if (currency) {
-            displayedValue = formatCurrencyAmount(value, view, locale, currency);
-            if (view === cst.VIEWS.LARGE) {
-                titleValue = displayedValue;
-            } else {
-                titleValue = formatCurrencyAmount(value, cst.VIEWS.LARGE, locale, currency);
-            }
-        } else {
-            displayedValue = formatNumber(value, view, locale);
-        }
-
-        return React.createElement(
-            Tooltip,
-            { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
-                'span',
-                { className: classes.spanNumeric },
-                displayedValue
-            )
-        );
-    }
-}
-
-CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Volume/Amount
-     */
-    value: PropTypes.number.isRequired,
-    /**
-     * Locale BCP 47
-     */
-    locale: PropTypes.string,
-    /**
-     * Code de la devise (ISO 4217)
-     */
-    currency: PropTypes.string,
-    /**
-     * View (L/M/S)
-     */
-    view: PropTypes.oneOf(['l', 'm', 's'])
-} : {};
-export default withStyles(styles, { name: 'HmuiCellNumeric' })(CellNumeric);

package/es/HiTable/BodyCells/CellRate.js

@@ -1,131 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { ArrowBottomRight, ArrowTopRight, Equal } from 'mdi-material-ui';
-import { formatRate } from '../../utils/hiHelpers';
-import withStyles from '../../styles/withStyles';
-import * as cst from '../constants';
-
-export const styles = theme => ({
-    flexContent: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        overflow: 'hidden',
-        position: 'relative'
-    },
-    trendChipIcon: {
-        width: 14,
-        height: 14,
-        position: 'relative',
-        top: 2
-    },
-    positive: {
-        color: theme.palette.positive.normal
-    },
-    negative: {
-        color: theme.palette.negative.normal
-    },
-    middle: {
-        color: theme.palette.middle.normal
-    },
-    spanIndicator: {
-        fontSize: 11,
-        float: 'right',
-        color: '#737373',
-        position: 'relative',
-        right: 3
-    },
-    rateDiv: {
-        position: 'relative'
-    }
-});
-
-/**
- * Cette cellule permet d'afficher un pourcentage
- * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
- */
-class CellRate extends React.PureComponent {
-
-    render() {
-
-        const { classes, value, trendchip, isPositive, indicator, locale, view } = this.props;
-
-        let trendIcon,
-            displayedRate = formatRate(value, view, locale);
-
-        switch (trendchip) {
-            case cst.NO_EVOLUTION:
-                trendIcon = React.createElement(Equal, { className: classes.trendChipIcon + ' ' + classes.middle });
-                break;
-            case cst.EVOLUTION_UP:
-                trendIcon = React.createElement(ArrowTopRight, {
-                    className: classNames(classes.trendChipIcon, {
-                        [classes.positive]: isPositive,
-                        [classes.negative]: !isPositive
-                    })
-                });
-                break;
-            case cst.EVOLUTION_DOWN:
-                trendIcon = React.createElement(ArrowBottomRight, {
-                    className: classNames(classes.trendChipIcon, {
-                        [classes.positive]: !isPositive,
-                        [classes.negative]: isPositive
-                    })
-                });
-                break;
-        }
-
-        return React.createElement(
-            'div',
-            { className: classes.flexContent },
-            React.createElement(
-                'div',
-                { className: typeof indicator === 'undefined' && classes.rateDiv || '' },
-                displayedRate,
-                trendIcon
-            ),
-            typeof indicator !== 'undefined' && React.createElement(
-                'span',
-                { className: classes.spanIndicator },
-                indicator
-            )
-        );
-    }
-
-}
-
-CellRate.defaultProps = {
-    isPositive: true
-};
-CellRate.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Rate
-     */
-    value: PropTypes.number.isRequired,
-    /**
-     * Évolution par rapport à la période précédente, détermine l'icône associée
-     */
-    trendchip: PropTypes.oneOf(['up', 'down', 'equal']).isRequired,
-    /**
-     * True si une augmentation est considérée comme positive, détermine la couleur de l'icône
-     */
-    isPositive: PropTypes.bool,
-    /**
-     * Spécifie le type de donnée évalué (ex: 'volume', 'amount', ...)
-     */
-    indicator: PropTypes.string,
-    /**
-     * Locale BCP 47
-     */
-    locale: PropTypes.string,
-    /**
-     * View (L/M/S)
-     */
-    view: PropTypes.oneOf(['l', 'm', 's'])
-} : {};
-export default withStyles(styles, { name: 'HmuiCellRate' })(CellRate);

package/es/HiTable/BodyCells/CellSentinel.js

@@ -1,161 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Tooltip from '../../Tooltip';
-import HiColoredLabel from '../../HiColoredLabel';
-import { withStyles } from '../../styles';
-import * as cst from '../constants';
-
-export const styles = theme => ({
-    smartDecision: {
-        display: 'inline-block',
-        minWidth: 18
-    },
-    label: {
-        marginLeft: 2
-    }
-});
-
-/**
- * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
- */
-class CellSentinel extends React.PureComponent {
-
-    constructor(props) {
-        super(props);
-
-        this.getColorFromFraudResult = this.getColorFromFraudResult.bind(this);
-    }
-
-    /**
-     * Get Theme color from fraudResult
-     * @param fraudResult
-     * @returns {*}
-     */
-    getColorFromFraudResult(fraudResult) {
-        let color;
-        switch (fraudResult.toUpperCase()) {
-            case cst.FRAUD_RESULT_ACCEPTED:
-                color = this.props.theme.palette.positive.normal;
-                break;
-            case cst.FRAUD_RESULT_BLOCKED:
-                color = this.props.theme.palette.negative.normal;
-                break;
-            case cst.FRAUD_RESULT_CHALLENGED:
-                color = this.props.theme.palette.middle.normal;
-                break;
-            case cst.FRAUD_RESULT_PENDING:
-                color = this.props.theme.palette.business.primary.normal;
-                break;
-            case cst.FRAUD_RESULT_FORCE_AUTHENTICATE:
-                color = this.props.theme.palette.neutral.normal;
-                break;
-            case cst.FRAUD_RESULT_ASK_AUTHENTICATE:
-                color = this.props.theme.palette.neutral.normal;
-                break;
-            default:
-                color = this.props.theme.palette.neutral.normal;
-                break;
-        }
-        return color;
-    }
-
-    render() {
-        const {
-            classes,
-            score,
-            fraudResult,
-            automaticFraudReviewResult,
-            pendingManualAction,
-            smartDecision,
-            hideFraudResult
-        } = this.props;
-
-        const scoreLabel = score > 0 ? `+${score}` : `${score}`;
-
-        const tooltipContent = React.createElement(
-            'div',
-            null,
-            React.createElement(
-                'div',
-                null,
-                scoreLabel
-            ),
-            React.createElement(
-                'div',
-                null,
-                fraudResult
-            ),
-            !!smartDecision && automaticFraudReviewResult && React.createElement(
-                'div',
-                null,
-                'SD: ',
-                automaticFraudReviewResult
-            )
-        );
-
-        return React.createElement(
-            Tooltip,
-            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
-                'div',
-                { style: { textAlign: 'right' } },
-                React.createElement(HiColoredLabel, {
-                    label: scoreLabel,
-                    color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
-                    classes: { root: classes.label },
-                    active: pendingManualAction
-                }),
-                !hideFraudResult && React.createElement(HiColoredLabel, {
-                    label: fraudResult.toUpperCase().substr(0, 1),
-                    color: this.getColorFromFraudResult(fraudResult),
-                    classes: { root: classes.label },
-                    active: pendingManualAction
-                }),
-                !!smartDecision && React.createElement(
-                    'div',
-                    { className: classes.smartDecision },
-                    automaticFraudReviewResult && React.createElement(HiColoredLabel, {
-                        label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
-                        color: this.getColorFromFraudResult(automaticFraudReviewResult),
-                        active: pendingManualAction
-                    })
-                )
-            )
-        );
-    }
-}
-
-CellSentinel.defaultProps = {
-    hideFraudResult: false
-};
-CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
-     */
-    automaticFraudReviewResult: PropTypes.string,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Résultat de la fraude
-     */
-    fraudResult: PropTypes.string.isRequired,
-    /**
-     * Si true le fraudResult ne sera pas affiché
-     */
-    hideFraudResult: PropTypes.bool.isRequired,
-    /**
-     * Signal qu'il attend une réponse manuelle
-     */
-    pendingManualAction: PropTypes.bool,
-    /**
-     * Score de la fraude
-     */
-    score: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    /**
-     * Active le SmartDecision (ajoute l'indicateur ou blanc)
-     */
-    smartDecision: PropTypes.bool
-} : {};
-export default withStyles(styles, { withTheme: true, name: 'HmuiCellSentinel' })(CellSentinel);

package/es/HiTable/BodyCells/CellStatus.js

@@ -1,77 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import HiColoredLabel from '../../HiColoredLabel';
-import HiPins from '../../HiPins';
-import { withStyles } from '../../styles';
-import Tooltip from '../../Tooltip';
-
-export const styles = theme => ({
-    labelDiv: {
-        display: 'inline-flex',
-        alignItems: 'baseline',
-        maxWidth: 'calc(100% - 36px)'
-    },
-    pins: {
-        position: 'relative',
-        bottom: 1
-    }
-});
-
-class CellStatus extends React.PureComponent {
-
-    render() {
-        const { classes, theme, nbOperations, value, code, onOpenDetails } = this.props;
-
-        const color = typeof theme.palette.status[code] !== 'undefined' ? theme.palette.status[code] : theme.palette.neutral.normal;
-
-        return React.createElement(
-            Tooltip,
-            { title: value, placement: this.props.sticky ? 'right' : 'bottom' },
-            React.createElement(
-                'div',
-                null,
-                nbOperations > 0 ? React.createElement(
-                    'div',
-                    { className: classes.labelDiv },
-                    React.createElement(HiColoredLabel, { label: value, color: color }),
-                    React.createElement(
-                        HiPins,
-                        { color: color, onClick: onOpenDetails, className: classes.pins },
-                        nbOperations
-                    )
-                ) : React.createElement(HiColoredLabel, { label: value, color: color })
-            )
-        );
-    }
-}
-CellStatus.defaultProps = {
-    nbOperations: 0
-};
-CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * [OPTIONAL] Useful to modify the theme used by components.
-     */
-    theme: PropTypes.object,
-    /**
-     * Nombre d'opérations financières
-     */
-    nbOperations: PropTypes.number.isRequired,
-    /**
-     * Statut courant de la transaction
-     */
-    value: PropTypes.string.isRequired,
-    /**
-     * Code du statut courant de la transaction (détermine la couleur du label)
-     */
-    code: PropTypes.number.isRequired,
-    /**
-     * Fonction de callback appelée pour ouvrir les lignes de détails
-     */
-    onOpenDetails: PropTypes.func
-} : {};
-export default withStyles(styles, { withTheme: true, name: 'HmuiCellStatus' })(CellStatus);