@hipay/hipay-material-ui 1.0.0-beta.26 → 1.0.0-beta.28

package/utils/HiIconBuilder.js

@@ -94,12 +94,14 @@ var HiIconBuilder = function (_PureComponent) {
             var _props = this.props,
                 icon = _props.icon,
                 size = _props.size,
+                width = _props.width,
+                height = _props.height,
                 className = _props.className,
                 style = _props.style,
                 onClick = _props.onClick,
                 color = _props.color,
                 backgroundColor = _props.backgroundColor,
-                others = (0, _objectWithoutProperties3.default)(_props, ['icon', 'size', 'className', 'style', 'onClick', 'color', 'backgroundColor']);
+                others = (0, _objectWithoutProperties3.default)(_props, ['icon', 'size', 'width', 'height', 'className', 'style', 'onClick', 'color', 'backgroundColor']);
 
 
             var props = {};
@@ -132,8 +134,8 @@ var HiIconBuilder = function (_PureComponent) {
             return _react2.default.createElement(IconName, (0, _extends3.default)({
                 className: className,
                 style: (0, _extends3.default)({
-                    height: size,
-                    width: size
+                    height: height ? height : size,
+                    width: width ? width : size
                 }, color && { color: color, fill: color }, backgroundColor && { backgroundColor: backgroundColor, padding: 2, borderRadius: size }, style),
                 onClick: onClick
             }, props, others));
@@ -170,6 +172,14 @@ HiIconBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Taile de la police
      */
     size: _propTypes2.default.number,
+    /**
+     * Largeur de l'icone (px)
+     */
+    width: _propTypes2.default.number,
+    /**
+     * Hauteur de l'icone (px)
+     */
+    height: _propTypes2.default.number,
     /**
      * Style surchargé
      */

package/utils/hiHelpers.js

@@ -185,7 +185,7 @@ function getNextItemSelectable(node, direction) {
         if (node.nextSibling === null) {
             return null;
         } else if (node.nextSibling.tabIndex === -1) {
-            return this.getNextItemSelectable(node.nextSibling, direction);
+            return getNextItemSelectable(node.nextSibling, direction);
         }
         return node.nextSibling;
     } else if (node.previousSibling === null) {

package/HiTable/BodyCells/CellAccountNumber.js

@@ -1,229 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.styles = undefined;
-
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _mdiMaterialUi = require('mdi-material-ui');
-
-var _Tooltip = require('../../Tooltip');
-
-var _Tooltip2 = _interopRequireDefault(_Tooltip);
-
-var _styles = require('../../styles');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var styles = exports.styles = function styles(theme) {
-    return {
-        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..)
- */
-
-var CellAccountNumber = function (_React$Component) {
-    (0, _inherits3.default)(CellAccountNumber, _React$Component);
-
-    function CellAccountNumber() {
-        (0, _classCallCheck3.default)(this, CellAccountNumber);
-        return (0, _possibleConstructorReturn3.default)(this, (CellAccountNumber.__proto__ || (0, _getPrototypeOf2.default)(CellAccountNumber)).apply(this, arguments));
-    }
-
-    (0, _createClass3.default)(CellAccountNumber, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this2 = this;
-
-            var _props = this.props,
-                classes = _props.classes,
-                value = _props.value,
-                country = _props.country,
-                expirationDate = _props.expirationDate,
-                expirationDateLabel = _props.expirationDateLabel,
-                statusColor = _props.statusColor,
-                issuer = _props.issuer;
-
-
-            var 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();
-            }
-
-            var tooltipContent = _react2.default.createElement(
-                'div',
-                { className: classes.tooltipWrapper },
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    issuer
-                ),
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    value || 'N/A'
-                ),
-                expirationDate && _react2.default.createElement(
-                    'div',
-                    null,
-                    statusColor ? _react2.default.createElement(_mdiMaterialUi.Circle, {
-                        style: { color: statusColor },
-                        className: classes.coloredIndicator
-                    }) : '',
-                    expirationDateLabel && expirationDateLabel + ' : ',
-                    dateDisplayed
-                ),
-                _react2.default.createElement(
-                    'div',
-                    null,
-                    country
-                )
-            );
-
-            var start = value ? value.substr(0, Math.round(value.length / 2)) : '';
-            // reverse string for rtl display
-            var end = value ? value.substr(Math.round(value.length / 2)).split('').reverse().join('') : '';
-
-            return _react2.default.createElement(
-                _Tooltip2.default,
-                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
-                _react2.default.createElement(
-                    'div',
-                    { className: classes.rightEllipsisSpan, style: { width: '100%' } },
-                    _react2.default.createElement(
-                        'div',
-                        {
-                            ref: function ref(div) {
-                                _this2.cellText = div;
-                            }
-                        },
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.noEllipsisSpan },
-                            start
-                        ),
-                        _react2.default.createElement(
-                            'span',
-                            { className: classes.leftEllipsisSpan },
-                            end
-                        )
-                    )
-                )
-            );
-        }
-    }]);
-    return CellAccountNumber;
-}(_react2.default.Component);
-
-CellAccountNumber.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * Pays du compte
-     */
-    country: _propTypes2.default.string,
-    /**
-     * Date d'expiration
-     */
-    expirationDate: _propTypes2.default.string,
-    /**
-     * Label de la date d'expiration
-     */
-    expirationDateLabel: _propTypes2.default.string,
-    /**
-     * Banque issuer
-     */
-    issuer: _propTypes2.default.string,
-    /**
-     * Couleur représentant le statut du compte (utilisé pour caractériser la date d'expiration)
-     */
-    statusColor: _propTypes2.default.string,
-    /**
-     * True si la colonne est la première colonne et doit avoir un comportement "sticky"
-     * lors du scroll horizontal
-     */
-    sticky: _propTypes2.default.bool,
-    /**
-     * Numéro du compte
-     */
-    value: _propTypes2.default.string
-} : {};
-exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiCellAccountNumber' })(CellAccountNumber);

package/es/HiTable/BodyCells/CellAccountNumber.js

@@ -1,171 +0,0 @@
-import _JSON$stringify from 'babel-runtime/core-js/json/stringify';
-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.Component {
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return _JSON$stringify(this.props) !== _JSON$stringify(nextProps) || _JSON$stringify(this.state) !== _JSON$stringify(nextState);
-    }
-
-    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);