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

package/HiTable/BodyCellBuilder.js

@@ -4,18 +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);
 
-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);
@@ -46,10 +38,6 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _reactContextmenu = require('react-contextmenu');
 
-var _moment = require('moment');
-
-var _moment2 = _interopRequireDefault(_moment);
-
 var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -65,8 +53,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /**
  * Construit la cellule correspondante au type demandé
  */
-var BodyCellBuilder = function (_React$Component) {
-    (0, _inherits3.default)(BodyCellBuilder, _React$Component);
+var BodyCellBuilder = function (_React$PureComponent) {
+    (0, _inherits3.default)(BodyCellBuilder, _React$PureComponent);
 
     function BodyCellBuilder(props) {
         (0, _classCallCheck3.default)(this, BodyCellBuilder);
@@ -78,46 +66,56 @@ var BodyCellBuilder = function (_React$Component) {
     }
 
     (0, _createClass3.default)(BodyCellBuilder, [{
-        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);
-        }
-
-        /**
-         * 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)
-         */
-
-    }, {
         key: 'collectContextMenuDatas',
-        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;
-
+        value: function collectContextMenuDatas(props) {
+            var label = '';
+            var 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:
                     var options = { year: 'numeric', month: '2-digit', day: '2-digit' };
-                    var date = new Date(value);
-                    contextLabel = date.toLocaleString(this.props.dateLocale, options);
+                    var date = new Date(this.props.datas.value);
+                    label = date.toLocaleString(this.props.dateLocale, options);
+                    value = this.props.datas.value;
                     break;
-
                 case cst.TYPE_RATE:
-                    contextLabel = (0, _hiHelpers.formatRate)(value, this.props.view, this.props.numberLocale);
+                    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;
                     break;
             }
-
+            if (value === null) {
+                value = label;
+            }
             return {
                 id: this.props.checkboxValue,
                 column: this.props.colId,
-                label: contextLabel,
+                label: label,
                 value: value
             };
         }
@@ -127,14 +125,14 @@ var BodyCellBuilder = function (_React$Component) {
             var _props = this.props,
                 ukey = _props.ukey,
                 type = _props.type,
-                data = _props.data,
+                datas = _props.datas,
                 view = _props.view,
                 width = _props.width,
+                fixedWidth = _props.fixedWidth,
                 padding = _props.padding,
                 align = _props.align,
                 dense = _props.dense,
                 ellipsis = _props.ellipsis,
-                formatShort = _props.formatShort,
                 onSelect = _props.onSelect,
                 selectable = _props.selectable,
                 selected = _props.selected,
@@ -144,18 +142,14 @@ var BodyCellBuilder = function (_React$Component) {
                 childrenCount = _props.childrenCount,
                 onOpenDetails = _props.onOpenDetails,
                 lookedUp = _props.lookedUp,
-                fixedColumnWidth = _props.fixedColumnWidth,
-                disableContextMenu = _props.disableContextMenu,
-                detailInfos = _props.detailInfos,
-                size = _props.size,
-                tabId = _props.tabId,
-                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'data', 'view', 'width', 'padding', 'align', 'dense', 'ellipsis', 'formatShort', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp', 'fixedColumnWidth', 'disableContextMenu', 'detailInfos', 'size', 'tabId']);
+                props = (0, _objectWithoutProperties3.default)(_props, ['ukey', 'type', 'datas', 'view', 'width', 'fixedWidth', 'padding', 'align', 'dense', 'ellipsis', 'onSelect', 'selectable', 'selected', 'sticky', 'dateLocale', 'numberLocale', 'childrenCount', 'onOpenDetails', 'lookedUp']);
 
 
             var layoutProps = {
                 type: type,
                 view: view,
                 width: width,
+                fixedWidth: fixedWidth,
                 align: align,
                 dense: dense,
                 onSelect: onSelect,
@@ -164,88 +158,84 @@ var BodyCellBuilder = function (_React$Component) {
                 selected: selected,
                 sticky: sticky,
                 childrenCount: childrenCount,
-                lookedUp: lookedUp,
-                fixedColumnWidth: fixedColumnWidth,
-                detailInfos: detailInfos,
-                onOpenDetails: onOpenDetails
+                lookedUp: lookedUp
             };
 
-            var cellContent = void 0;
-            if (typeof data !== 'undefined') {
-
-                var cellElement = void 0;
+            var cellElement = void 0;
 
+            if (typeof datas !== 'undefined') {
                 switch (type) {
                     case cst.TYPE_ACCOUNT:
-                        layoutProps.title = data.value;
-                        cellElement = _react2.default.createElement(_BodyCells.CellAccount, { value: data.value, color: data.color, sticky: sticky });
+                        cellElement = _react2.default.createElement(_BodyCells.CellAccount, { value: datas.value, color: datas.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,
+                            sticky: sticky
+                        });
                         break;
 
                     case cst.TYPE_ADDRESS:
-                        layoutProps.title = data.name + ', ' + data.value + ', ' + data.city;
                         cellElement = _react2.default.createElement(_BodyCells.CellAddress, {
-                            name: data.name,
-                            streetAddress: data.value,
-                            city: data.city,
-                            postalCode: data.postalCode,
-                            country: data.country,
-                            isoCountry: data.isoCountry,
+                            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:
-                        layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellCountry, {
-                            label: data.label ? data.label : data.value,
-                            path: data.img,
-                            value: data.value,
+                            value: datas.value,
+                            isoCode: datas.isoCode,
                             view: view,
                             sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_DATE:
-                        if (!props.displayTime) layoutProps.title = (0, _moment2.default)(data.value).format('dddd DD MMMM YYYY HH:mm:ss');
                         cellElement = _react2.default.createElement(_BodyCells.CellDate, {
-                            value: data.value,
+                            value: datas.value,
                             locale: dateLocale,
                             view: view,
                             displayTime: props.displayTime,
-                            sticky: sticky,
-                            formatShort: formatShort
+                            sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_ICON:
-                        if (view === cst.VIEWS.SMALL) layoutProps.title = data.label ? data.label : data.value;
+                        if (view === cst.VIEWS.SMALL) layoutProps.fixedWidth = true;
                         cellElement = _react2.default.createElement(_BodyCells.CellIcon, {
-                            value: data.label ? data.label : data.value,
-                            icon: data.icon,
-                            color: data.color,
+                            value: datas.value,
+                            icon: datas.icon,
                             view: view,
                             sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_IMAGE:
-                        if (view === cst.VIEWS.SMALL) layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellImage, {
-                            value: data.label ? data.label : data.value,
-                            path: data.img,
-                            size: size,
+                            value: datas.value,
+                            path: datas.path,
                             view: view,
                             sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_NUMERIC:
-                        if (view !== cst.VIEWS.LARGE) layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellNumeric, {
-                            value: data.value,
-                            currency: data.currency,
-                            precision: data.precision,
+                            value: datas.value,
+                            currency: datas.currency,
                             locale: numberLocale,
                             view: view,
                             sticky: sticky
@@ -254,10 +244,10 @@ var BodyCellBuilder = function (_React$Component) {
 
                     case cst.TYPE_RATE:
                         cellElement = _react2.default.createElement(_BodyCells.CellRate, {
-                            value: data.value,
-                            isPositive: data.isPositive,
-                            trendchip: data.trendchip,
-                            indicator: data.indicator,
+                            value: datas.value,
+                            isPositive: datas.isPositive,
+                            trendchip: datas.trendchip,
+                            indicator: datas.indicator,
                             locale: numberLocale,
                             view: view,
                             sticky: sticky
@@ -266,64 +256,57 @@ var BodyCellBuilder = function (_React$Component) {
 
                     case cst.TYPE_SENTINEL:
                         cellElement = _react2.default.createElement(_BodyCells.CellSentinel, {
-                            score: data.score,
-                            fraudResult: data.value,
-                            automaticFraudReviewResult: data.automaticFraudReviewResult,
-                            pendingManualAction: data.pendingManualAction,
+                            score: datas.score,
+                            fraudResult: datas.fraudResult,
+                            automaticFraudReviewResult: datas.automaticFraudReviewResult,
+                            pendingManualAction: datas.pendingManualAction,
                             smartDecision: props.smartDecision,
                             sticky: sticky
                         });
                         break;
 
                     case cst.TYPE_STATUS:
-                        layoutProps.title = data.label ? data.label : data.value;
-                        cellElement = _react2.default.createElement(_BodyCells.CellStatus, (0, _extends3.default)({
-                            code: data.value,
-                            value: data.label ? data.label : data.value,
+                        cellElement = _react2.default.createElement(_BodyCells.CellStatus, {
+                            code: datas.code,
+                            nbOperations: datas.count_operations,
+                            value: datas.value,
+                            onOpenDetails: onOpenDetails,
                             sticky: sticky
-                        }, detailInfos && {
-                            nbOperations: detailInfos.total,
-                            onOpenDetails: onOpenDetails
-                        }));
-                        delete layoutProps.detailInfos;
-                        delete layoutProps.onOpenDetails;
+                        });
                         break;
 
                     case cst.TYPE_THIRD_PARTY_SECURITY:
-                        layoutProps.title = data.label ? data.label : data.value;
                         layoutProps.align = 'center';
+                        layoutProps.fixedWidth = true;
                         cellElement = _react2.default.createElement(_BodyCells.CellThirdPartySecurity, {
-                            value: data.value,
-                            label: data.label ? data.label : data.value,
+                            value: datas.value,
+                            code: datas.code,
                             sticky: sticky
                         });
                         break;
 
-                    case cst.TYPE_ACCOUNT_NUMBER:
                     case cst.TYPE_TEXT:
                     default:
-                        layoutProps.title = data.label ? data.label : data.value;
                         cellElement = _react2.default.createElement(_BodyCells.CellText, {
                             ukey: ukey,
-                            value: data.label ? data.label : data.value,
+                            value: datas.value,
                             ellipsis: ellipsis,
                             view: view,
-                            sticky: sticky,
-                            color: data.color
+                            sticky: sticky
                         });
                         break;
                 }
-
-                cellContent = disableContextMenu ? cellElement : _react2.default.createElement(
-                    _reactContextmenu.ContextMenuTrigger,
-                    {
-                        id: 'hitable_context_menu_' + tabId,
-                        collect: this.collectContextMenuDatas
-                    },
-                    cellElement
-                );
             }
 
+            var cellContent = cellElement ? _react2.default.createElement(
+                _reactContextmenu.ContextMenuTrigger,
+                {
+                    id: 'hitable_context_menu_' + this.props.tabId,
+                    collect: this.collectContextMenuDatas
+                },
+                cellElement
+            ) : cellElement;
+
             return _react2.default.createElement(
                 _BodyCells.CellLayout,
                 layoutProps,
@@ -332,12 +315,10 @@ var BodyCellBuilder = function (_React$Component) {
         }
     }]);
     return BodyCellBuilder;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 BodyCellBuilder.defaultProps = {
-    ellipsis: 'right',
-    disableContextMenu: true,
-    detailInfos: null
+    ellipsis: 'right'
 };
 exports.default = BodyCellBuilder;
 BodyCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -353,14 +334,10 @@ 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
      */
-    data: _propTypes2.default.object,
+    datas: _propTypes2.default.object,
     /**
      * Locale a utilisée pour l'affichage des dates
      */
@@ -369,23 +346,14 @@ 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']),
     /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
+     * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedColumnWidth: _propTypes2.default.bool,
+    fixedWidth: _propTypes2.default.bool,
     /**
      * Recherche lookup sur cette colonne
      */
@@ -426,5 +394,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.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+    width: _propTypes2.default.number
 } : {};

package/HiTable/BodyCells/CellAccount.js

@@ -3,10 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
+exports.styles = undefined;
 
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
@@ -44,13 +41,23 @@ var _HiColoredLabel = require('../../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
 
+var _withStyles = require('../../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var styles = exports.styles = function styles(theme) {
+    return {};
+};
+
 /**
  * Cette cellule permet d'afficher le nom d'un compte sous la forme d'un label coloré.
  */
-var CellAccount = function (_React$Component) {
-    (0, _inherits3.default)(CellAccount, _React$Component);
+
+
+var CellAccount = function (_React$PureComponent) {
+    (0, _inherits3.default)(CellAccount, _React$PureComponent);
 
     function CellAccount() {
         (0, _classCallCheck3.default)(this, CellAccount);
@@ -58,11 +65,6 @@ var CellAccount = function (_React$Component) {
     }
 
     (0, _createClass3.default)(CellAccount, [{
-        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,
@@ -70,11 +72,15 @@ var CellAccount = function (_React$Component) {
                 color = _props.color;
 
 
-            return _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color });
+            return _react2.default.createElement(
+                _Tooltip2.default,
+                { title: value, placement: 'bottom' },
+                _react2.default.createElement(_HiColoredLabel2.default, { label: value, color: color })
+            );
         }
     }]);
     return CellAccount;
-}(_react2.default.Component);
+}(_react2.default.PureComponent);
 
 CellAccount.defaultProps = {};
 CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -85,10 +91,10 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Couleur du compte
      */
-    color: _propTypes2.default.string,
+    color: _propTypes2.default.string.isRequired,
     /**
      * Nom du compte
      */
     value: _propTypes2.default.string.isRequired
 } : {};
-exports.default = CellAccount;
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCellAccount' })(CellAccount);