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

package/es/HiTable/BodyCells/CellAccountNumber.js

@@ -0,0 +1,166 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Circle } from 'mdi-material-ui';
+import Tooltip from '../../Tooltip';
+import { withStyles, withTheme } from '../../styles';
+
+export const styles = theme => ({
+    tooltipWrapper: {
+        textAlign: 'center'
+    },
+    coloredIndicator: {
+        backgroundColor: '#ffffff',
+        borderRadius: '50%',
+        float: 'left',
+        width: 12,
+        height: 'auto',
+        position: 'relative',
+        top: 5,
+        right: 3
+    },
+    leftEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        direction: 'rtl',
+        width: '49%'
+    },
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre'
+    },
+    noEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        whiteSpace: 'pre',
+        maxWidth: '50%'
+    }
+});
+
+/**
+ * Cette cellule permet d'afficher un numéro de compte
+ * Le tooltip affiche les informations complémentaires (country, expiration date..)
+ */
+class CellAccountNumber extends React.PureComponent {
+
+    render() {
+        const {
+            classes,
+            value,
+            country,
+            expirationDate,
+            expirationDateLabel,
+            statusColor,
+            issuer
+        } = this.props;
+
+        let dateDisplayed = new Date(expirationDate);
+
+        if (isNaN(dateDisplayed.getMonth()) || isNaN(dateDisplayed.getFullYear())) {
+            dateDisplayed = '';
+        } else {
+            dateDisplayed = `${dateDisplayed.getMonth() + 1 < 10 ? `${dateDisplayed.getMonth()}${1}` : dateDisplayed.getMonth() + 1}/${dateDisplayed.getFullYear()}`;
+        }
+
+        const tooltipContent = React.createElement(
+            'div',
+            { className: classes.tooltipWrapper },
+            React.createElement(
+                'div',
+                null,
+                issuer
+            ),
+            React.createElement(
+                'div',
+                null,
+                value || 'N/A'
+            ),
+            expirationDate && React.createElement(
+                'div',
+                null,
+                statusColor ? React.createElement(Circle, {
+                    style: { color: statusColor },
+                    className: classes.coloredIndicator
+                }) : '',
+                expirationDateLabel && `${expirationDateLabel} : `,
+                dateDisplayed
+            ),
+            React.createElement(
+                'div',
+                null,
+                country
+            )
+        );
+
+        const start = value ? value.substr(0, Math.round(value.length / 2)) : '';
+        // reverse string for rtl display
+        const end = value ? value.substr(Math.round(value.length / 2)).split('').reverse().join('') : '';
+
+        return React.createElement(
+            Tooltip,
+            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'div',
+                { className: classes.rightEllipsisSpan, style: { width: '100%' } },
+                React.createElement(
+                    'div',
+                    {
+                        ref: div => {
+                            this.cellText = div;
+                        }
+                    },
+                    React.createElement(
+                        'span',
+                        { className: classes.noEllipsisSpan },
+                        start
+                    ),
+                    React.createElement(
+                        'span',
+                        { className: classes.leftEllipsisSpan },
+                        end
+                    )
+                )
+            )
+        );
+    }
+}
+
+CellAccountNumber.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Pays du compte
+     */
+    country: PropTypes.string,
+    /**
+     * Date d'expiration
+     */
+    expirationDate: PropTypes.string,
+    /**
+     * Label de la date d'expiration
+     */
+    expirationDateLabel: PropTypes.string,
+    /**
+     * Banque issuer
+     */
+    issuer: PropTypes.string,
+    /**
+     * Couleur représentant le statut du compte (utilisé pour caractériser la date d'expiration)
+     */
+    statusColor: PropTypes.string,
+    /**
+     * True si la colonne est la première colonne et doit avoir un comportement "sticky"
+     * lors du scroll horizontal
+     */
+    sticky: PropTypes.bool,
+    /**
+     * Numéro du compte
+     */
+    value: PropTypes.string
+} : {};
+export default withStyles(styles, { withTheme: true, name: 'HmuiCellAccountNumber' })(CellAccountNumber);

package/es/HiTable/BodyCells/CellAddress.js

@@ -0,0 +1,129 @@
+// @inheritedComponent CellLayout
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tooltip from '../../Tooltip';
+import * as cst from '../constants';
+import withStyles from '../../styles/withStyles';
+import CellLayout from './CellLayout';
+
+export const styles = theme => ({
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        width: '100%'
+    }
+});
+
+/**
+ * Cette cellule permet d'afficher une adresse ou le nom d'un lieu
+ * - si le nom du lieu est défini, on affiche le lieu et la ville
+ * - sinon on affiche la ville et le pays
+ * - tous les champs définis sont affichés dans le tooltip
+ */
+class CellAddress extends React.PureComponent {
+
+    render() {
+        const { classes, streetAddress, name, city, postalCode, view, country, isoCountry } = this.props;
+
+        let label = '';
+        if (typeof name !== 'undefined') {
+            label = name + ', ';
+        }
+        if (typeof city !== 'undefined') {
+            label += city;
+        }
+        if (typeof name === 'undefined' && typeof country !== 'undefined' && view === cst.VIEWS.LARGE) {
+            if (label !== '') label += ', ';
+            label += country;
+        } else if (typeof name === 'undefined' && typeof isoCountry !== 'undefined' && view !== cst.VIEWS.LARGE) {
+            if (label !== '') label += ', ';
+            label += isoCountry;
+        }
+
+        let tooltipContent = React.createElement(
+            'div',
+            null,
+            React.createElement(
+                'div',
+                null,
+                name
+            ),
+            React.createElement(
+                'div',
+                null,
+                streetAddress
+            ),
+            React.createElement(
+                'div',
+                null,
+                React.createElement(
+                    'span',
+                    null,
+                    city + ', '
+                ),
+                React.createElement(
+                    'span',
+                    null,
+                    postalCode
+                )
+            ),
+            React.createElement(
+                'div',
+                null,
+                country
+            )
+        );
+
+        return React.createElement(
+            Tooltip,
+            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'div',
+                { className: classes.rightEllipsisSpan },
+                label
+            )
+        );
+    }
+}
+
+CellAddress.defaultProps = {
+    view: 'l'
+};
+CellAddress.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Numéro et nom de la rue
+     */
+    streetAddress: PropTypes.string,
+    /**
+     * Nom du lieu
+     */
+    name: PropTypes.string,
+    /**
+     * Ville
+     */
+    city: PropTypes.string,
+    /**
+     * Code postal
+     */
+    postalCode: PropTypes.string,
+    /**
+     * Pays
+     */
+    country: PropTypes.string,
+    /**
+     * Code ISO du pays
+     */
+    isoCountry: PropTypes.string,
+    /**
+     * View (L/M/S)
+     */
+    view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, { name: 'HmuiCellAddress' })(CellAddress);

package/es/HiTable/BodyCells/CellCountry.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import CellImage from './CellImage';
+import Tooltip from '../../Tooltip';
+import withStyles from '../../styles/withStyles';
+import * as cst from '../constants';
+
+export const styles = theme => ({
+    img: {
+        width: 24,
+        height: 'auto',
+        float: 'left'
+    },
+    label: {
+        marginLeft: 5
+    },
+    tooltipImg: {
+        width: 24,
+        height: 'auto',
+        float: 'left',
+        marginTop: 2
+    },
+    tooltipLabel: {
+        marginLeft: 5,
+        position: 'relative',
+        bottom: 2,
+        verticalAlign: 'middle'
+    },
+    wrapper: {
+        whiteSpace: 'nowrap',
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+    }
+});
+
+/**
+ * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel) pour un pays
+ *
+ * en vue large : Affiche l'image et la valeur longue (value), pas de tooltip
+ *
+ * en vue medium : Affiche la valeur longue uniquement (value), tooltip = Image + Value
+ *
+ * en vue small : Affiche la valeur courte (id),  tooltip = Image + Value
+ *
+ */
+class CellCountry extends React.PureComponent {
+
+    render() {
+        const { classes, value, isoCode, view } = this.props;
+
+        let path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
+
+        let tooltipContent = React.createElement(
+            'div',
+            null,
+            React.createElement('img', { src: path, className: classes.tooltipImg }),
+            React.createElement(
+                'span',
+                { className: classes.tooltipLabel },
+                value
+            )
+        );
+
+        if (view === cst.VIEWS.LARGE) {
+            return React.createElement(CellImage, { view: cst.VIEWS.LARGE, value: value, path: path });
+        } else {
+            let valueElement = value;
+            if (view === cst.VIEWS.SMALL) {
+                valueElement = isoCode.toUpperCase();
+            }
+            return React.createElement(
+                Tooltip,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                React.createElement(
+                    'div',
+                    { className: classes.wrapper },
+                    React.createElement(
+                        'span',
+                        { className: classes.label },
+                        valueElement
+                    )
+                )
+            );
+        }
+    }
+}
+
+CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Label
+     */
+    value: PropTypes.string.isRequired,
+    /**
+     * Code ISO
+     */
+    isoCode: PropTypes.string.isRequired,
+    /**
+     * View (L/M/S)
+     */
+    view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, { name: 'HmuiCellCountry' })(CellCountry);

package/es/HiTable/BodyCells/CellDate.js

@@ -0,0 +1,111 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import withStyles from '../../styles/withStyles';
+import Tooltip from '../../Tooltip';
+import * as cst from '../constants';
+
+export const styles = theme => ({
+    rightEllipsisSpan: {
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'pre',
+        width: '100%'
+    }
+});
+
+/**
+ * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
+ */
+class CellDate extends React.Component {
+
+    render() {
+        const { classes, displayTime, value, locale, view } = this.props;
+
+        const date = new Date(value);
+
+        let options = _extends({
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: '2-digit'
+        }, displayTime && {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+        const titleValue = date.toLocaleString(locale, options);
+        let displayedValue = titleValue;
+        if (view === cst.VIEWS.SMALL) {
+            options = _extends({
+                year: '2-digit',
+                month: '2-digit',
+                day: '2-digit'
+            }, displayTime && {
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            displayedValue = date.toLocaleString(locale, options);
+        } else if (view === cst.VIEWS.MEDIUM) {
+            options = _extends({
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit'
+            }, displayTime && {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            displayedValue = date.toLocaleString(locale, options);
+        }
+
+        if (view === cst.VIEWS.LARGE) {
+            return React.createElement(
+                'div',
+                { className: classes.rightEllipsisSpan },
+                displayedValue
+            );
+        }
+
+        return React.createElement(
+            Tooltip,
+            { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'div',
+                { className: classes.rightEllipsisSpan },
+                displayedValue
+            )
+        );
+    }
+}
+
+CellDate.defaultProps = {
+    displayTime: false,
+    locale: 'en-EN',
+    view: 'l'
+};
+CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Affiche l'heure
+     */
+    displayTime: PropTypes.bool,
+    /**
+     * Locale BCP 47
+     */
+    locale: PropTypes.string,
+    /**
+     * Volume/Amount
+     */
+    value: PropTypes.string.isRequired,
+    /**
+     * View (L/M/S)
+     */
+    view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, { name: 'HmuiCellDate' })(CellDate);

package/es/HiTable/BodyCells/CellIcon.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Tooltip from '../../Tooltip';
+import withStyles from '../../styles/withStyles';
+import * as cst from '../constants';
+import HiIconBuilder from '../../utils/HiIconBuilder';
+
+export const styles = theme => ({
+    icon: {
+        float: 'left'
+    },
+    label: {
+        margin: 5
+    },
+    wrapper: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    }
+});
+
+/**
+ * Cette cellule permet d'afficher une icône et un label (optionnel).
+ * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
+ */
+class CellIcon extends React.PureComponent {
+
+    render() {
+        const { classes, icon, value, view } = this.props;
+
+        const iconElement = React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 18 });
+
+        const tooltipContent = React.createElement(
+            'div',
+            null,
+            iconElement,
+            React.createElement(
+                'span',
+                null,
+                value
+            )
+        );
+
+        return React.createElement(
+            Tooltip,
+            { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+            React.createElement(
+                'div',
+                { className: classes.wrapper },
+                iconElement,
+                view !== cst.VIEWS.SMALL && typeof value !== 'undefined' && React.createElement(
+                    'span',
+                    { className: classes.label },
+                    value
+                )
+            )
+        );
+    }
+}
+
+CellIcon.defaultProps = {
+    view: 'l'
+};
+CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     */
+    icon: PropTypes.string.isRequired,
+    /**
+     * Label
+     */
+    value: PropTypes.string,
+    /**
+     * View (L/M/S)
+     */
+    view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, { name: 'HmuiCellIcon' })(CellIcon);

package/es/HiTable/BodyCells/CellImage.js

@@ -0,0 +1,115 @@
+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 => ({
+    img: {
+        width: 24,
+        height: 'auto',
+        float: 'left'
+    },
+    smallImg: {
+        width: 24,
+        height: 'auto'
+    },
+    label: {
+        marginLeft: 5
+    },
+    tooltipImg: {
+        width: 24,
+        height: 'auto',
+        float: 'left',
+        marginTop: 2
+    },
+    tooltipLabel: {
+        marginLeft: 5,
+        position: 'relative',
+        bottom: 2,
+        verticalAlign: 'middle'
+
+    },
+    wrapper: {
+        whiteSpace: 'nowrap',
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+    },
+    center: {
+        textAlign: 'center'
+    }
+});
+
+/**
+ * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
+ * En vue large, aucun tooltip n'est affiché
+ * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
+ */
+class CellImage extends React.PureComponent {
+
+    render() {
+        const { classes, path, value, view } = this.props;
+
+        const tooltipContent = React.createElement(
+            'div',
+            null,
+            React.createElement('img', { src: path, alt: value, className: classes.tooltipImg }),
+            React.createElement(
+                'span',
+                { className: classes.tooltipLabel },
+                value
+            )
+        );
+
+        let innerCellElement = null;
+        if (view === cst.VIEWS.SMALL) {
+            innerCellElement = React.createElement(
+                'div',
+                { className: classes.center },
+                React.createElement('img', { src: path, alt: value, className: classes.smallImg })
+            );
+        } else {
+            innerCellElement = React.createElement(
+                'div',
+                { className: classes.wrapper },
+                React.createElement('img', { src: path, alt: value, className: classes.img }),
+                !!value && React.createElement(
+                    'span',
+                    { className: classes.label },
+                    value
+                )
+            );
+        }
+
+        if (view === cst.VIEWS.LARGE) {
+            return innerCellElement;
+        } else {
+            return React.createElement(
+                Tooltip,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                innerCellElement
+            );
+        }
+    }
+}
+
+CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Image path
+     */
+    path: PropTypes.string.isRequired,
+    /**
+     * Label
+     */
+    value: PropTypes.string,
+    /**
+     * View (L/M/S)
+     */
+    view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, { name: 'HmuiCellImage' })(CellImage);