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

package/HiTable/BodyCells/CellAccountNumber.js

@@ -0,0 +1,220 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+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$PureComponent) {
+    (0, _inherits3.default)(CellAccountNumber, _React$PureComponent);
+
+    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: '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.PureComponent);
+
+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/HiTable/BodyCells/CellAddress.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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);
@@ -37,6 +33,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 var _constants = require('../constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -45,11 +45,16 @@ var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
 
+var _CellLayout = require('./CellLayout');
+
+var _CellLayout2 = _interopRequireDefault(_CellLayout);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // @inheritedComponent CellLayout
+
 var styles = exports.styles = function styles(theme) {
     return {
         rightEllipsisSpan: {
@@ -69,8 +74,8 @@ var styles = exports.styles = function styles(theme) {
  * - tous les champs définis sont affichés dans le tooltip
  */
 
-var CellAddress = function (_React$Component) {
-    (0, _inherits3.default)(CellAddress, _React$Component);
+var CellAddress = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellAddress, _React$PureComponent);
 
     function CellAddress() {
         (0, _classCallCheck3.default)(this, CellAddress);
@@ -78,11 +83,6 @@ var CellAddress = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellAddress, [{
-        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 _props = this.props,
@@ -111,15 +111,53 @@ var CellAddress = function (_React$Component) {
                 label += isoCountry;
             }
 
-            return _react2.default.createElement(
+            var tooltipContent = _react2.default.createElement(
                 'div',
-                { className: classes.rightEllipsisSpan },
-                label
+                null,
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    name
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    streetAddress
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    _react2.default.createElement(
+                        'span',
+                        null,
+                        city + ', '
+                    ),
+                    _react2.default.createElement(
+                        'span',
+                        null,
+                        postalCode
+                    )
+                ),
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    country
+                )
+            );
+
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.rightEllipsisSpan },
+                    label
+                )
             );
         }
     }]);
     return CellAddress;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellAddress.defaultProps = {
     view: 'l'

package/HiTable/BodyCells/CellCountry.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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);
@@ -41,6 +37,10 @@ var _CellImage = require('./CellImage');
 
 var _CellImage2 = _interopRequireDefault(_CellImage);
 
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
@@ -94,8 +94,8 @@ var styles = exports.styles = function styles(theme) {
  *
  */
 
-var CellCountry = function (_React$Component) {
-    (0, _inherits3.default)(CellCountry, _React$Component);
+var CellCountry = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellCountry, _React$PureComponent);
 
     function CellCountry() {
         (0, _classCallCheck3.default)(this, CellCountry);
@@ -103,29 +103,53 @@ var CellCountry = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellCountry, [{
-        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 _props = this.props,
-                label = _props.label,
-                path = _props.path,
+                classes = _props.classes,
                 value = _props.value,
+                isoCode = _props.isoCode,
                 view = _props.view;
 
 
+            var path = '/static/images/countries/' + isoCode.toLowerCase() + '.svg';
+
+            var tooltipContent = _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement('img', { src: path, className: classes.tooltipImg }),
+                _react2.default.createElement(
+                    'span',
+                    { className: classes.tooltipLabel },
+                    value
+                )
+            );
+
             if (view === cst.VIEWS.LARGE) {
-                return _react2.default.createElement(_CellImage2.default, { value: label ? label : value, path: path, view: view });
+                return _react2.default.createElement(_CellImage2.default, { view: cst.VIEWS.LARGE, value: value, path: path });
             } else {
-                return _react2.default.createElement(_CellImage2.default, { value: value, path: path, view: view });
+                var valueElement = value;
+                if (view === cst.VIEWS.SMALL) {
+                    valueElement = isoCode.toUpperCase();
+                }
+                return _react2.default.createElement(
+                    _Tooltip2.default,
+                    { title: tooltipContent, placement: this.props.sticky ? 'right' : 'bottom' },
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.wrapper },
+                        _react2.default.createElement(
+                            'span',
+                            { className: classes.label },
+                            valueElement
+                        )
+                    )
+                );
             }
         }
     }]);
     return CellCountry;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -135,15 +159,11 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label
      */
-    label: _propTypes2.default.string,
-    /**
-     * Flag's image path
-     */
-    path: _propTypes2.default.string,
+    value: _propTypes2.default.string.isRequired,
     /**
-     * Value - code isoa2 (uppercase)
+     * Code ISO
      */
-    value: _propTypes2.default.string,
+    isoCode: _propTypes2.default.string.isRequired,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellDate.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
+var _extends2 = require('babel-runtime/helpers/extends');
 
-var _stringify2 = _interopRequireDefault(_stringify);
+var _extends3 = _interopRequireDefault(_extends2);
 
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
@@ -37,16 +37,14 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _moment = require('moment');
-
-var _moment2 = _interopRequireDefault(_moment);
-
-require('moment/locale/fr');
-
 var _withStyles = require('../../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
 
+var _Tooltip = require('../../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 var _constants = require('../constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -55,14 +53,16 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = {
-    rightEllipsisSpan: {
-        display: 'inline-block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'pre',
-        width: '100%'
-    }
+var styles = exports.styles = function styles(theme) {
+    return {
+        rightEllipsisSpan: {
+            display: 'inline-block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'pre',
+            width: '100%'
+        }
+    };
 };
 
 /**
@@ -73,25 +73,11 @@ var CellDate = function (_React$Component) {
     (0, _inherits3.default)(CellDate, _React$Component);
 
     function CellDate() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
         (0, _classCallCheck3.default)(this, CellDate);
-
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
-
-        return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = CellDate.__proto__ || (0, _getPrototypeOf2.default)(CellDate)).call.apply(_ref, [this].concat(args))), _this), _this.formatLong = 'dddd DD MMMM YYYY HH:mm:ss', _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+        return (0, _possibleConstructorReturn3.default)(this, (CellDate.__proto__ || (0, _getPrototypeOf2.default)(CellDate)).apply(this, arguments));
     }
 
     (0, _createClass3.default)(CellDate, [{
-        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 _props = this.props,
@@ -99,18 +85,44 @@ var CellDate = function (_React$Component) {
                 displayTime = _props.displayTime,
                 value = _props.value,
                 locale = _props.locale,
-                view = _props.view,
-                formatShort = _props.formatShort;
-
-
-            var date = (0, _moment2.default)(value);
-            date.locale(locale);
-
-            var displayedValue = displayTime ? date.format(this.formatLong) : date.format(this.formatLong.replace(' HH:mm:ss', ''));
+                view = _props.view;
+
+
+            var date = new Date(value);
+
+            var options = (0, _extends3.default)({
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: '2-digit'
+            }, displayTime && {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit'
+            });
+            var titleValue = date.toLocaleString(locale, options);
+            var displayedValue = titleValue;
             if (view === cst.VIEWS.SMALL) {
-                displayedValue = displayTime ? date.format(formatShort.replace('YYYY', 'YY') + ' HH:mm:ss') : date.format(formatShort.replace('YYYY', 'YY'));
+                options = (0, _extends3.default)({
+                    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) {
-                displayedValue = displayTime ? date.format(formatShort + ' HH:mm:ss') : date.format(formatShort);
+                options = (0, _extends3.default)({
+                    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) {
@@ -122,9 +134,13 @@ var CellDate = function (_React$Component) {
             }
 
             return _react2.default.createElement(
-                'div',
-                { className: classes.rightEllipsisSpan },
-                displayedValue
+                _Tooltip2.default,
+                { title: titleValue, placement: this.props.sticky ? 'right' : 'bottom' },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.rightEllipsisSpan },
+                    displayedValue
+                )
             );
         }
     }]);
@@ -133,9 +149,8 @@ var CellDate = function (_React$Component) {
 
 CellDate.defaultProps = {
     displayTime: false,
-    locale: 'en',
-    view: 'l',
-    formatShort: 'DD/MM/YYYY'
+    locale: 'en-EN',
+    view: 'l'
 };
 CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -147,21 +162,11 @@ CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     displayTime: _propTypes2.default.bool,
     /**
-     * Format de la date en vue small (ex: DD/MM/YYYY)
-     * @see https://momentjs.com/docs/#/parsing/string-format/
-     */
-    formatShort: _propTypes2.default.string.isRequired,
-    /**
-     * Locale moment
+     * Locale BCP 47
      */
     locale: _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,
-    /**
-     * Date as string
+     * Volume/Amount
      */
     value: _propTypes2.default.string.isRequired,
     /**