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

package/es/HiSwitch/HiSwitch.js

@@ -0,0 +1,138 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import SwitchBase from 'material-ui/internal/SwitchBase';
+
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import Check from 'mdi-material-ui/Check';
+
+export const styles = theme => ({
+    root: {
+        display: 'inline-flex',
+        width: 62,
+        position: 'relative',
+        flexShrink: 0
+    },
+    bar: {
+        borderRadius: 7,
+        display: 'block',
+        position: 'absolute',
+        width: 34,
+        height: 14,
+        top: '50%',
+        marginTop: -7,
+        left: '50%',
+        marginLeft: -17,
+        transition: theme.transitions.create(['opacity', 'background-color'], {
+            duration: theme.transitions.duration.shortest
+        }),
+        backgroundColor: theme.palette.type === 'light' ? theme.palette.neutral.normal : '#fff',
+        opacity: theme.palette.type === 'light' ? 0.38 : 0.3
+    },
+    icon: {
+        boxShadow: theme.shadows[1],
+        width: 20,
+        height: 20,
+        borderRadius: '50%',
+        backgroundColor: theme.palette.background2,
+        color: theme.palette.background2,
+        padding: 2
+    },
+    iconChecked: {
+        backgroundColor: theme.palette.business.primary.normal,
+        color: 'white'
+    },
+    iconDisabled: {
+        backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+        color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
+        '&:not($iconChecked)': {
+            color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
+        }
+    },
+    // For SwitchBase
+    default: {
+        zIndex: 1,
+        color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
+        transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shortest
+        }),
+        height: 40,
+        width: 40
+    },
+    checked: {
+        transform: 'translateX(18px)',
+        '& + $bar': {
+            backgroundColor: theme.palette.business.primary.normal,
+            opacity: 0.5
+        }
+    },
+    disabled: {
+        color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+        '& + $bar': {
+            backgroundColor: theme.palette.type === 'light' ? '#000' : '#fff',
+            opacity: theme.palette.type === 'light' ? 0.12 : 0.1
+        }
+    }
+});
+
+class HiSwitch extends React.Component {
+
+    render() {
+        const _props = this.props,
+              { classes, className, checked, disabled } = _props,
+              other = _objectWithoutProperties(_props, ['classes', 'className', 'checked', 'disabled']);
+
+        let iconClass = classNames(classes.icon, {
+            [classes.iconChecked]: checked,
+            [classes.iconDisabled]: disabled
+        });
+
+        const icon = React.createElement(Check, { className: iconClass });
+
+        return React.createElement(
+            'div',
+            { className: classNames(classes.root, className) },
+            React.createElement(SwitchBase, _extends({
+                icon: icon,
+                classes: {
+                    default: classes.default,
+                    checked: classes.checked,
+                    disabled: classes.disabled
+                },
+                checkedIcon: icon,
+                checked: checked,
+                disabled: disabled
+            }, other)),
+            React.createElement('div', { className: classes.bar })
+        );
+    }
+}
+
+HiSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * If `true`, the component is checked.
+     */
+    checked: PropTypes.bool,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * If `true`, the switch will be disabled.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Callback fired when the state is changed.
+     *
+     * @param {object} event The event source of the callback
+     * @param {boolean} checked The `checked` value of the switch
+     */
+    onChange: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiHiSwitch' })(HiSwitch);

package/es/HiSwitch/HiSwitchState.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { grey } from 'material-ui/colors';
+
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import Button from 'material-ui/Button';
+
+export const styles = theme => ({
+    root: {
+        display: 'inline-flex',
+        maxHeight: 40,
+        marginRight: 12,
+        padding: 4,
+        backgroundColor: theme.palette.background1,
+        borderRadius: '2px 2px 0 0',
+        width: '100%',
+        maxWidth: 200,
+        minWidth: 120,
+        borderBottom: `solid 1px ${grey[300]}`
+    },
+    button: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        backgroundColor: theme.palette.background2,
+        color: theme.palette.text.disabled,
+        textTransform: 'inherit',
+        width: '50%',
+        fontSize: 15,
+        fontWeight: 400
+    },
+    buttonLeft: {
+        borderBottomRightRadius: 0,
+        borderTopRightRadius: 0
+    },
+    buttonRight: {
+        borderBottomLeftRadius: 0,
+        borderTopLeftRadius: 0
+    },
+    checked: {
+        boxShadow: theme.shadows[2],
+        '&:not($disabled)': {
+            backgroundColor: theme.palette.business.primary.normal,
+            color: '#FFF'
+        }
+    },
+    disabled: {
+        '&$checked': {
+            backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
+            color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400]
+        },
+        boxShadow: 'none'
+    }
+});
+
+/**
+ * Ce composant affiche un switch entre 2 valeurs associées à deux labels.
+ * par défaut ON/OFF associé à true/false.
+ */
+class HiSwitchState extends React.Component {
+
+    render() {
+        const {
+            classes,
+            className,
+            checked,
+            leftLabel,
+            rightLabel,
+            leftValue,
+            rightValue,
+            disabled,
+            onChange,
+            name
+        } = this.props;
+
+        let buttonLeftClass = classNames(classes.button, classes.buttonLeft, {
+            [classes.checked]: checked === leftValue,
+            [classes.disabled]: disabled
+        });
+
+        let buttonRightClass = classNames(classes.button, classes.buttonRight, {
+            [classes.checked]: checked === rightValue,
+            [classes.disabled]: disabled
+        });
+
+        return React.createElement(
+            'div',
+            { className: classNames(classes.root, className) },
+            React.createElement(
+                Button,
+                {
+                    size: 'small',
+                    className: buttonLeftClass,
+                    value: leftValue,
+                    onClick: event => onChange(event, leftValue),
+                    disabled: disabled
+                },
+                leftLabel
+            ),
+            React.createElement(
+                Button,
+                {
+                    size: 'small',
+                    className: buttonRightClass,
+                    value: rightValue,
+                    onClick: event => onChange(event, rightValue),
+                    disabled: disabled
+                },
+                rightLabel
+            )
+        );
+    }
+}
+
+HiSwitchState.defaultProps = {
+    checked: 'on',
+    leftLabel: 'Off',
+    rightLabel: 'On',
+    leftValue: 'off',
+    rightValue: 'on',
+    disabled: false
+};
+HiSwitchState.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Value checked.
+     */
+    checked: PropTypes.string,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    /**
+     * If `true`, the switch will be disabled.
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Label du premier bouton (dans l'ordre de lecture)
+     */
+    leftLabel: PropTypes.string,
+    /**
+     * value du premier bouton (dans l'ordre de lecture)
+     */
+    leftValue: PropTypes.string,
+    /**
+     * Nom du champs
+     */
+    name: PropTypes.string,
+    /**
+     * Callback fired when the state is changed.
+     *
+     * @param {string} nom du champs
+     * @param {boolean} checked The `checked` value of the switch
+     */
+    onChange: PropTypes.func,
+    /**
+     * Label du deuxieme bouton (dans l'ordre de lecture)
+     */
+    rightLabel: PropTypes.string,
+    /**
+     * value du deuxieme bouton (dans l'ordre de lecture)
+     */
+    rightValue: PropTypes.string
+} : {};
+export default withStyles(styles, { name: 'HmuiHiSwitchState' })(HiSwitchState);

package/es/HiSwitch/index.js

@@ -0,0 +1,2 @@
+export { default } from './HiSwitch';
+export { default as HiSwitchState } from './HiSwitchState';

package/es/HiTable/BodyCellBuilder.js

@@ -0,0 +1,345 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ContextMenuTrigger } from 'react-contextmenu';
+
+import * as cst from './constants';
+import { CellLayout, CellAccount, CellAccountNumber, CellAddress, CellDate, CellIcon, CellImage, CellNumeric, CellRate, CellSentinel, CellStatus, CellText, CellThirdPartySecurity, CellCountry } from './BodyCells';
+import { formatRate } from '../utils/hiHelpers';
+
+/**
+ * Construit la cellule correspondante au type demandé
+ */
+export default class BodyCellBuilder extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.collectContextMenuDatas = this.collectContextMenuDatas.bind(this);
+    }
+
+    collectContextMenuDatas(props) {
+        let label = '';
+        let value = null;
+        switch (this.props.type) {
+            case cst.TYPE_ADDRESS:
+                label = `${this.props.datas.name} ${this.props.datas.streetAddress} ${this.props.datas.city} ${this.props.datas.postalCode} ${this.props.datas.isoCountry}`;
+                break;
+            case cst.TYPE_SENTINEL:
+                label = `${this.props.datas.score}|${this.props.datas.fraudResult}`;
+                if (this.props.smartDecision && typeof this.props.datas.automaticFraudReviewResult !== 'undefined') {
+                    label += `|${this.props.datas.automaticFraudReviewResult}`;
+                }
+                break;
+            case cst.TYPE_ACCOUNT:
+            case cst.TYPE_ACCOUNT_NUMBER:
+            case cst.TYPE_ICON:
+            case cst.TYPE_IMAGE:
+            case cst.TYPE_NUMERIC:
+            case cst.TYPE_TEXT:
+            default:
+                label = this.props.datas.value;
+                break;
+            case cst.TYPE_DATE:
+                const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
+                const date = new Date(this.props.datas.value);
+                label = date.toLocaleString(this.props.dateLocale, options);
+                value = this.props.datas.value;
+                break;
+            case cst.TYPE_RATE:
+                label = formatRate(this.props.datas.value, this.props.view, this.props.numberLocale);
+                value = this.props.datas.value;
+                break;
+            case cst.TYPE_THIRD_PARTY_SECURITY:
+            case cst.TYPE_STATUS:
+                label = this.props.datas.value;
+                value = this.props.datas.code;
+                break;
+            case cst.TYPE_COUNTRY:
+                label = this.props.datas.value;
+                value = this.props.datas.isoCode;
+                break;
+        }
+        if (value === null) {
+            value = label;
+        }
+        return {
+            id: this.props.checkboxValue,
+            column: this.props.colId,
+            label,
+            value
+        };
+    }
+
+    render() {
+        const _props = this.props,
+              {
+            ukey,
+            type,
+            datas,
+            view,
+            width,
+            fixedWidth,
+            padding,
+            align,
+            dense,
+            ellipsis,
+            onSelect,
+            selectable,
+            selected,
+            sticky,
+            dateLocale,
+            numberLocale,
+            childrenCount,
+            onOpenDetails,
+            lookedUp
+        } = _props,
+              props = _objectWithoutProperties(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
+
+        const layoutProps = {
+            type,
+            view,
+            width,
+            fixedWidth,
+            align,
+            dense,
+            onSelect,
+            padding,
+            selectable,
+            selected,
+            sticky,
+            childrenCount,
+            lookedUp
+        };
+
+        let cellElement;
+
+        if (typeof datas !== 'undefined') {
+            switch (type) {
+                case cst.TYPE_ACCOUNT:
+                    cellElement = React.createElement(CellAccount, { value: datas.value, color: datas.color, sticky: sticky });
+                    break;
+
+                case cst.TYPE_ACCOUNT_NUMBER:
+                    cellElement = React.createElement(CellAccountNumber, {
+                        value: datas.value,
+                        country: datas.country,
+                        expirationDate: datas.expirationDate,
+                        expirationDateLabel: datas.expirationDateLabel,
+                        statusColor: datas.statusColor,
+                        issuer: datas.issuer,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_ADDRESS:
+                    cellElement = React.createElement(CellAddress, {
+                        name: datas.name,
+                        streetAddress: datas.streetAddress,
+                        city: datas.city,
+                        postalCode: datas.postalCode,
+                        country: datas.country,
+                        isoCountry: datas.isoCountry,
+                        view: view,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_COUNTRY:
+                    cellElement = React.createElement(CellCountry, {
+                        value: datas.value,
+                        isoCode: datas.isoCode,
+                        view: view,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_DATE:
+                    cellElement = React.createElement(CellDate, {
+                        value: datas.value,
+                        locale: dateLocale,
+                        view: view,
+                        displayTime: props.displayTime,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_ICON:
+                    if (view === cst.VIEWS.SMALL) layoutProps.fixedWidth = true;
+                    cellElement = React.createElement(CellIcon, {
+                        value: datas.value,
+                        icon: datas.icon,
+                        view: view,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_IMAGE:
+                    cellElement = React.createElement(CellImage, {
+                        value: datas.value,
+                        path: datas.path,
+                        view: view,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_NUMERIC:
+                    cellElement = React.createElement(CellNumeric, {
+                        value: datas.value,
+                        currency: datas.currency,
+                        locale: numberLocale,
+                        view: view,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_RATE:
+                    cellElement = React.createElement(CellRate, {
+                        value: datas.value,
+                        isPositive: datas.isPositive,
+                        trendchip: datas.trendchip,
+                        indicator: datas.indicator,
+                        locale: numberLocale,
+                        view: view,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_SENTINEL:
+                    cellElement = React.createElement(CellSentinel, {
+                        score: datas.score,
+                        fraudResult: datas.fraudResult,
+                        automaticFraudReviewResult: datas.automaticFraudReviewResult,
+                        pendingManualAction: datas.pendingManualAction,
+                        smartDecision: props.smartDecision,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_STATUS:
+                    cellElement = React.createElement(CellStatus, {
+                        code: datas.code,
+                        nbOperations: datas.count_operations,
+                        value: datas.value,
+                        onOpenDetails: onOpenDetails,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_THIRD_PARTY_SECURITY:
+                    layoutProps.align = 'center';
+                    layoutProps.fixedWidth = true;
+                    cellElement = React.createElement(CellThirdPartySecurity, {
+                        value: datas.value,
+                        code: datas.code,
+                        sticky: sticky
+                    });
+                    break;
+
+                case cst.TYPE_TEXT:
+                default:
+                    cellElement = React.createElement(CellText, {
+                        ukey: ukey,
+                        value: datas.value,
+                        ellipsis: ellipsis,
+                        view: view,
+                        sticky: sticky
+                    });
+                    break;
+            }
+        }
+
+        const cellContent = cellElement ? React.createElement(
+            ContextMenuTrigger,
+            {
+                id: `hitable_context_menu_${this.props.tabId}`,
+                collect: this.collectContextMenuDatas
+            },
+            cellElement
+        ) : cellElement;
+
+        return React.createElement(
+            CellLayout,
+            layoutProps,
+            cellContent
+        );
+    }
+}
+BodyCellBuilder.defaultProps = {
+    ellipsis: 'right'
+};
+BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Title alignement, est déduit de type par défaut
+     */
+    align: PropTypes.string,
+    /**
+     * Nombre d'enfants
+     */
+    childrenCount: PropTypes.number,
+    /**
+     * Identifiant de la colonne
+     */
+    colId: PropTypes.string,
+    /**
+     * Données relatives au type de la cellule
+     */
+    datas: PropTypes.object,
+    /**
+     * Locale a utilisée pour l'affichage des dates
+     */
+    dateLocale: PropTypes.string,
+    /**
+     * Densité, défini la hauteur de la ligne
+     */
+    dense: PropTypes.bool,
+    /**
+     * Ellipsis
+     */
+    ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
+    /**
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     */
+    fixedWidth: PropTypes.bool,
+    /**
+     * Recherche lookup sur cette colonne
+     */
+    lookedUp: PropTypes.bool,
+    /**
+     * Locale a utilisée pour l'affichage des dates
+     */
+    numberLocale: PropTypes.string,
+    /**
+     * Fonction de callback au click du select
+     */
+    onSelect: PropTypes.func,
+    /**
+     * Padding de la cellule (px)
+     */
+    padding: PropTypes.number,
+    /**
+     * Ajoute une checkbox
+     */
+    selectable: PropTypes.bool,
+    /**
+     * État de la checkbox
+     */
+    selected: PropTypes.bool,
+    /**
+     * True si la colonne est la première colonne et
+     * doit avoir un comportement "sticky" lors du scroll horizontal
+     */
+    sticky: PropTypes.bool,
+    /**
+     * Type de la cellule (voir la listes des constantes)
+     */
+    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
+} : {};

package/es/HiTable/BodyCells/CellAccount.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tooltip from '../../Tooltip';
+import HiColoredLabel from '../../HiColoredLabel';
+import withStyles from '../../styles/withStyles';
+
+export const styles = theme => ({});
+
+/**
+ * Cette cellule permet d'afficher le nom d'un compte sous la forme d'un label coloré.
+ */
+class CellAccount extends React.PureComponent {
+
+    render() {
+        const { value, color } = this.props;
+
+        return React.createElement(
+            Tooltip,
+            { title: value, placement: 'bottom' },
+            React.createElement(HiColoredLabel, { label: value, color: color })
+        );
+    }
+}
+
+CellAccount.defaultProps = {};
+CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Couleur du compte
+     */
+    color: PropTypes.string.isRequired,
+    /**
+     * Nom du compte
+     */
+    value: PropTypes.string.isRequired
+} : {};
+export default withStyles(styles, { name: 'HmuiCellAccount' })(CellAccount);