@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/HiTable/BodyCellBuilder.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
@@ -65,57 +69,42 @@ var BodyCellBuilder = function (_React$PureComponent) {
         return _this;
     }
 
+    /**
+     * CollecContextMenuDatas
+     *
+     * définit les données utilisées par le context menu (lookup, exclude, copy, redirect)
+     * - value : valeur sur laquelle on filtre
+     * - label : label de la value (traduite)
+     */
+
+
     (0, _createClass3.default)(BodyCellBuilder, [{
         key: 'collectContextMenuDatas',
-        value: function collectContextMenuDatas(props) {
-            var label = '';
-            var value = null;
+        value: function collectContextMenuDatas() {
+            var _props$data = this.props.data,
+                value = _props$data.value,
+                data = (0, _objectWithoutProperties3.default)(_props$data, ['value']);
+
+
+            var contextLabel = data.label ? data.label : value;
+
             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:
                     var options = { year: 'numeric', month: '2-digit', day: '2-digit' };
-                    var date = new Date(this.props.datas.value);
-                    label = date.toLocaleString(this.props.dateLocale, options);
-                    value = this.props.datas.value;
+                    var date = new Date(value);
+                    contextLabel = date.toLocaleString(this.props.dateLocale, options);
                     break;
+
                 case cst.TYPE_RATE:
-                    label = (0, _hiHelpers.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;
+                    contextLabel = (0, _hiHelpers.formatRate)(value, this.props.view, this.props.numberLocale);
                     break;
             }
-            if (value === null) {
-                value = label;
-            }
+
             return {
                 id: this.props.checkboxValue,
                 column: this.props.colId,
-                label: label,
+                label: contextLabel,
                 value: value
             };
         }
@@ -125,10 +114,9 @@ var BodyCellBuilder = function (_React$PureComponent) {
             var _props = this.props,
                 ukey = _props.ukey,
                 type = _props.type,
-                datas = _props.datas,
+                data = _props.data,
                 view = _props.view,
                 width = _props.width,
-                fixedWidth = _props.fixedWidth,
                 padding = _props.padding,
                 align = _props.align,
                 dense = _props.dense,
@@ -142,14 +130,16 @@ var BodyCellBuilder = function (_React$PureComponent) {
                 childrenCount = _props.childrenCount,
                 onOpenDetails = _props.onOpenDetails,
                 lookedUp = _props.lookedUp,
-                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
+                fixedColumnWidth = _props.fixedColumnWidth,
+                disableContextMenu = _props.disableContextMenu,
+                detailInfos = _props.detailInfos,
+                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos']);
 
 
             var layoutProps = {
                 type: type,
                 view: view,
                 width: width,
-                fixedWidth: fixedWidth,
                 align: align,
                 dense: dense,
                 onSelect: onSelect,
@@ -158,37 +148,42 @@ var BodyCellBuilder = function (_React$PureComponent) {
                 selected: selected,
                 sticky: sticky,
                 childrenCount: childrenCount,
-                lookedUp: lookedUp
+                lookedUp: lookedUp,
+                fixedColumnWidth: fixedColumnWidth,
+                detailInfos: detailInfos,
+                onOpenDetails: onOpenDetails
             };
 
-            var cellElement = void 0;
+            var cellContent = void 0;
+            if (typeof data !== 'undefined') {
+
+                var cellElement = void 0;
 
-            if (typeof datas !== 'undefined') {
                 switch (type) {
                     case cst.TYPE_ACCOUNT:
-                        cellElement = _react2.default.createElement(_BodyCells.CellAccount, { value: datas.value, color: datas.color, sticky: sticky });
+                        cellElement = _react2.default.createElement(_BodyCells.CellAccount, { value: data.value, color: data.color, sticky: sticky });
                         break;
 
                     case cst.TYPE_ACCOUNT_NUMBER:
                         cellElement = _react2.default.createElement(_BodyCells.CellAccountNumber, {
-                            value: datas.value,
-                            country: datas.country,
-                            expirationDate: datas.expirationDate,
-                            expirationDateLabel: datas.expirationDateLabel,
-                            statusColor: datas.statusColor,
-                            issuer: datas.issuer,
+                            value: data.value,
+                            country: data.country,
+                            expirationDate: data.expirationDate,
+                            expirationDateLabel: data.expirationDateLabel,
+                            statusColor: data.statusColor,
+                            issuer: data.issuer,
                             sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_ADDRESS:
                         cellElement = _react2.default.createElement(_BodyCells.CellAddress, {
-                            name: datas.name,
-                            streetAddress: datas.streetAddress,
-                            city: datas.city,
-                            postalCode: datas.postalCode,
-                            country: datas.country,
-                            isoCountry: datas.isoCountry,
+                            name: data.name,
+                            streetAddress: data.value,
+                            city: data.city,
+                            postalCode: data.postalCode,
+                            country: data.country,
+                            isoCountry: data.isoCountry,
                             view: view,
                             sticky: sticky
                         });
@@ -196,8 +191,9 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_COUNTRY:
                         cellElement = _react2.default.createElement(_BodyCells.CellCountry, {
-                            value: datas.value,
-                            isoCode: datas.isoCode,
+                            label: data.label ? data.label : data.value,
+                            path: data.img,
+                            value: data.value,
                             view: view,
                             sticky: sticky
                         });
@@ -205,7 +201,7 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_DATE:
                         cellElement = _react2.default.createElement(_BodyCells.CellDate, {
-                            value: datas.value,
+                            value: data.value,
                             locale: dateLocale,
                             view: view,
                             displayTime: props.displayTime,
@@ -214,10 +210,10 @@ var BodyCellBuilder = function (_React$PureComponent) {
                         break;
 
                     case cst.TYPE_ICON:
-                        if (view === cst.VIEWS.SMALL) layoutProps.fixedWidth = true;
                         cellElement = _react2.default.createElement(_BodyCells.CellIcon, {
-                            value: datas.value,
-                            icon: datas.icon,
+                            value: data.label ? data.label : data.value,
+                            icon: data.icon,
+                            color: data.color,
                             view: view,
                             sticky: sticky
                         });
@@ -225,8 +221,9 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_IMAGE:
                         cellElement = _react2.default.createElement(_BodyCells.CellImage, {
-                            value: datas.value,
-                            path: datas.path,
+                            value: data.label ? data.label : data.value,
+                            path: data.img,
+                            size: this.props.size,
                             view: view,
                             sticky: sticky
                         });
@@ -234,8 +231,9 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_NUMERIC:
                         cellElement = _react2.default.createElement(_BodyCells.CellNumeric, {
-                            value: datas.value,
-                            currency: datas.currency,
+                            value: data.value,
+                            currency: data.currency,
+                            precision: data.precision,
                             locale: numberLocale,
                             view: view,
                             sticky: sticky
@@ -244,10 +242,10 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_RATE:
                         cellElement = _react2.default.createElement(_BodyCells.CellRate, {
-                            value: datas.value,
-                            isPositive: datas.isPositive,
-                            trendchip: datas.trendchip,
-                            indicator: datas.indicator,
+                            value: data.value,
+                            isPositive: data.isPositive,
+                            trendchip: data.trendchip,
+                            indicator: data.indicator,
                             locale: numberLocale,
                             view: view,
                             sticky: sticky
@@ -256,31 +254,33 @@ var BodyCellBuilder = function (_React$PureComponent) {
 
                     case cst.TYPE_SENTINEL:
                         cellElement = _react2.default.createElement(_BodyCells.CellSentinel, {
-                            score: datas.score,
-                            fraudResult: datas.fraudResult,
-                            automaticFraudReviewResult: datas.automaticFraudReviewResult,
-                            pendingManualAction: datas.pendingManualAction,
+                            score: data.score,
+                            fraudResult: data.value,
+                            automaticFraudReviewResult: data.automaticFraudReviewResult,
+                            pendingManualAction: data.pendingManualAction,
                             smartDecision: props.smartDecision,
                             sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_STATUS:
-                        cellElement = _react2.default.createElement(_BodyCells.CellStatus, {
-                            code: datas.code,
-                            nbOperations: datas.count_operations,
-                            value: datas.value,
-                            onOpenDetails: onOpenDetails,
+                        cellElement = _react2.default.createElement(_BodyCells.CellStatus, (0, _extends3.default)({
+                            code: data.value,
+                            value: data.label ? data.label : data.value,
                             sticky: sticky
-                        });
+                        }, detailInfos && {
+                            nbOperations: detailInfos.total,
+                            onOpenDetails: onOpenDetails
+                        }));
+                        delete layoutProps.detailInfos;
+                        delete layoutProps.onOpenDetails;
                         break;
 
                     case cst.TYPE_THIRD_PARTY_SECURITY:
                         layoutProps.align = 'center';
-                        layoutProps.fixedWidth = true;
                         cellElement = _react2.default.createElement(_BodyCells.CellThirdPartySecurity, {
-                            value: datas.value,
-                            code: datas.code,
+                            value: data.value,
+                            label: data.label ? data.label : data.value,
                             sticky: sticky
                         });
                         break;
@@ -289,23 +289,23 @@ var BodyCellBuilder = function (_React$PureComponent) {
                     default:
                         cellElement = _react2.default.createElement(_BodyCells.CellText, {
                             ukey: ukey,
-                            value: datas.value,
+                            value: data.value,
                             ellipsis: ellipsis,
                             view: view,
                             sticky: sticky
                         });
                         break;
                 }
-            }
 
-            var cellContent = cellElement ? _react2.default.createElement(
-                _reactContextmenu.ContextMenuTrigger,
-                {
-                    id: 'hitable_context_menu_' + this.props.tabId,
-                    collect: this.collectContextMenuDatas
-                },
-                cellElement
-            ) : cellElement;
+                cellContent = disableContextMenu ? cellElement : _react2.default.createElement(
+                    _reactContextmenu.ContextMenuTrigger,
+                    {
+                        id: 'hitable_context_menu_' + this.props.tabId,
+                        collect: this.collectContextMenuDatas
+                    },
+                    cellElement
+                );
+            }
 
             return _react2.default.createElement(
                 _BodyCells.CellLayout,
@@ -318,7 +318,9 @@ var BodyCellBuilder = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right'
+    ellipsis: 'right',
+    disableContextMenu: true,
+    detailInfos: null
 };
 exports.default = BodyCellBuilder;
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -334,10 +336,14 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Identifiant de la colonne
      */
     colId: _propTypes2.default.string,
+    /**
+     * Données de références
+     */
+    columnDatas: _propTypes2.default.array,
     /**
      * Données relatives au type de la cellule
      */
-    datas: _propTypes2.default.object,
+    data: _propTypes2.default.object,
     /**
      * Locale a utilisée pour l'affichage des dates
      */
@@ -346,14 +352,23 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité, défini la hauteur de la ligne
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Ajoute un Chip affichant le nombre de ligne de détails de la ligne et permettant de les affichés via onOpenDetails
+     */
+    detailInfos: _propTypes2.default.object,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Ellipsis
      */
     ellipsis: _propTypes2.default.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
     /**
-     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
      */
-    fixedWidth: _propTypes2.default.bool,
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Recherche lookup sur cette colonne
      */
@@ -394,5 +409,5 @@ BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: _propTypes2.default.number
+    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
 } : {};

package/HiTable/BodyCells/CellCountry.js

@@ -106,45 +106,16 @@ var CellCountry = function (_React$PureComponent) {
         key: 'render',
         value: function render() {
             var _props = this.props,
-                classes = _props.classes,
+                label = _props.label,
+                path = _props.path,
                 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, { view: cst.VIEWS.LARGE, value: value, path: path });
+                return _react2.default.createElement(_CellImage2.default, { value: label ? label : value, path: path, view: view });
             } else {
-                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 _react2.default.createElement(_CellImage2.default, { value: value, path: path, view: view });
             }
         }
     }]);
@@ -159,11 +130,15 @@ CellCountry.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label
      */
-    value: _propTypes2.default.string.isRequired,
+    label: _propTypes2.default.string,
+    /**
+     * Flag's image path
+     */
+    path: _propTypes2.default.string,
     /**
-     * Code ISO
+     * Value - code isoa2 (uppercase)
      */
-    isoCode: _propTypes2.default.string.isRequired,
+    value: _propTypes2.default.string,
     /**
      * View (L/M/S)
      */

package/HiTable/BodyCells/CellIcon.js

@@ -53,20 +53,21 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        icon: {
-            float: 'left'
-        },
-        label: {
-            margin: 5
-        },
-        wrapper: {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        }
-    };
+var styles = exports.styles = {
+    icon: {
+        float: 'left'
+    },
+    label: {
+        margin: 5
+    },
+    wrapper: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    nowrap: {
+        whiteSpace: 'nowrap'
+    }
 };
 
 /**
@@ -89,14 +90,15 @@ var CellIcon = function (_React$PureComponent) {
                 classes = _props.classes,
                 icon = _props.icon,
                 value = _props.value,
-                view = _props.view;
+                view = _props.view,
+                color = _props.color;
 
 
-            var iconElement = _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 18 });
+            var iconElement = icon !== '' ? _react2.default.createElement(_HiIconBuilder2.default, { color: color, className: classes.icon, icon: icon, size: 18 }) : '';
 
             var tooltipContent = _react2.default.createElement(
                 'div',
-                null,
+                { className: classes.nowrap },
                 iconElement,
                 _react2.default.createElement(
                     'span',
@@ -125,7 +127,9 @@ var CellIcon = function (_React$PureComponent) {
 }(_react2.default.PureComponent);
 
 CellIcon.defaultProps = {
-    view: 'l'
+    icon: '',
+    view: 'l',
+    color: '#000'
 };
 CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -133,9 +137,14 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     classes: _propTypes2.default.object,
     /**
-     * Icône name [from material-design-icons](https://materialdesignicons.com/)
+     * Couleur de l'icône
+     */
+    color: _propTypes2.default.string.isRequired,
+    /**
+     * Icon name [from material-design-icons](https://materialdesignicons.com/)
+     * used by HiIconBuilder
      */
-    icon: _propTypes2.default.string.isRequired,
+    icon: _propTypes2.default.string,
     /**
      * Label
      */