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

package/es/HiTable/BodyCells/CellLayout.js

@@ -0,0 +1,198 @@
+
+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%'
+    }
+});
+
+/**
+ * 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], fixedWidth, sticky,
+            selectable, selected, onSelect, childrenCount, theme, padding,
+            lookedUp
+        } = this.props;
+
+        let offset = selectable ? dense ? 32 : 40 : 0;
+
+        // Inclus le padding et/ou la checkbox dans la largeur de la cellule
+        let _width = width + offset + (selectable ? padding : 2 * padding);
+
+        const lookedUpClassName = classNames(classes.flexContent, { [classes.lookedUp]: lookedUp });
+
+        return React.createElement(
+            TableCell,
+            {
+                className: classes.root,
+                style: {
+                    maxWidth: _width,
+                    minWidth: _width,
+                    width: _width,
+                    // la cellule sticky doit être au dessus des autres cellules du body
+                    zIndex: sticky ? 12 : 11,
+                    textAlign: align,
+                    position: sticky ? 'relative' : 'inherit',
+                    border: 'none',
+                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+                }
+            },
+            !!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 },
+                        childrenCount
+                    )
+                )
+            )
+        );
+    }
+}
+
+CellLayout.defaultProps = {
+    view: 'l',
+    selectable: false,
+    selected: false,
+    dense: false,
+    fixedWidth: false,
+    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,
+    /**
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     */
+    fixedWidth: 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

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

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

@@ -0,0 +1,153 @@
+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();
+
+        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
+        } = 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',
+                null,
+                React.createElement(HiColoredLabel, {
+                    label: scoreLabel,
+                    color: this.getColorFromFraudResult(fraudResult.toLowerCase()),
+                    classes: { root: classes.label },
+                    active: pendingManualAction
+                }),
+                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.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,
+    /**
+     * 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

@@ -0,0 +1,73 @@
+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)'
+    }
+});
+
+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 },
+                        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);