@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

package/HiSelectableList/HiSelectableListItem.js

@@ -58,15 +58,20 @@ var styles = function styles(theme) {
     listItem: {
       backgroundColor: theme.palette.background3,
       color: theme.palette.neutral.dark,
-      padding: '5px 0',
+      padding: '5px 12px 5px 0px',
       fontWeight: theme.typography.fontWeightRegular,
       maxHeight: 56,
       display: 'inline-flex',
       alignItems: 'center',
       cursor: 'pointer',
+      '&$listItemInlineWithInfoWithoutSecondary': {
+        justifyContent: 'space-between'
+      },
+      '&$listItemWithoutSecondaryInline': {
+        display: 'block'
+      },
       '&$inline': {
         maxHeight: 40,
-        alignItems: 'flex-start',
         '& $secondaryLabel': {
           display: 'inline-block'
         }
@@ -76,6 +81,8 @@ var styles = function styles(theme) {
         outline: 'none'
       }
     },
+    listItemWithoutSecondaryInline: {},
+    listItemInlineWithInfoWithoutSecondary: {},
     listItemHover: {
       '&:hover:not($disabled):not($pinned)': {
         backgroundColor: theme.palette.action.hover,
@@ -118,10 +125,15 @@ var styles = function styles(theme) {
       width: '100%',
       minWidth: '50%',
       padding: '5px 0',
+      '&$listItemContentSelected': {
+        marginBottom: -3,
+        marginLeft: -4
+      },
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
       }
     }),
+    listItemContentSelected: {},
     label: {
       display: 'inline-block',
       margin: '1px 0',
@@ -145,15 +157,9 @@ var styles = function styles(theme) {
       fontSize: 12,
       textOverflow: 'ellipsis',
       textAlign: 'right',
-      margin: '4px 12px 4px 8px',
+      padding: '4px 0px 4px 8px',
       alignSelf: 'center'
     }),
-    checkbox: {
-      marginTop: 3
-    },
-    checkboxWithSecondaryInline: {
-      marginTop: '-8px'
-    },
     img: {
       width: 24,
       height: 'auto',
@@ -163,7 +169,34 @@ var styles = function styles(theme) {
     icon: {
       margin: '0 4px',
       verticalAlign: 'middle'
-    }
+    },
+    labelContent: {
+      display: 'flex',
+      alignItems: 'center',
+      maxWidth: '70%',
+      '&$labelWithoutSecondaryInline': {
+        maxWidth: '100%'
+      }
+    },
+    labelWithoutSecondaryInline: {},
+    infosContent: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      justifyContent: 'space-between',
+      '&$infosInlineWithoutSecondary': {
+        width: 'auto'
+      },
+      '&$infosWithoutSecondaryInline': {
+        paddingLeft: 28
+      },
+      '&$infosWithSecondaryInline': {
+        marginTop: -8
+      }
+    },
+    infosInlineWithoutSecondary: {},
+    infosWithSecondaryInline: {},
+    infosWithoutSecondaryInline: {}
   };
 };
 /**
@@ -251,7 +284,7 @@ function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _classNames, _classNames2;
+      var _classNames, _classNames3, _classNames4;
 
       var _this$props2 = this.props,
           centered = _this$props2.centered,
@@ -276,7 +309,8 @@ function (_React$PureComponent) {
           secondaryInline = _this$props2.secondaryInline,
           secondaryLabel = _this$props2.secondaryLabel,
           thin = _this$props2.thin,
-          type = _this$props2.type; // Return simple loader list item
+          type = _this$props2.type,
+          color = _this$props2.color; // Return simple loader list item
 
       if (type === 'loader') {
         return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
@@ -302,7 +336,7 @@ function (_React$PureComponent) {
         classes: {
           root: classes.root
         },
-        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), _classNames)),
+        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
         disabled: disabled
       }, disabled || {
         onClick: onSelect,
@@ -313,20 +347,22 @@ function (_React$PureComponent) {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
         }
-      }), !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
+      }), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
+      }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
         tabIndex: onKeyDown ? '-1' : 0,
-        checked: selected,
-        checkedIcon: checkedIcon,
         classes: {
           root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
         },
-        color: disabled ? "inherit" : "primary",
+        checked: selected,
+        checkedIcon: checkedIcon,
+        color: disabled ? 'inherit' : 'primary',
         disabled: disabled,
         icon: displayedIcon,
         indeterminate: indeterminate,
         indeterminateIcon: indeterminateIcon
       }), _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.listItemContent, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.centered, centered), (0, _defineProperty2.default)(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
+        className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
         "data-id": id
       }, type === 'icon' && icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
         icon: icon,
@@ -342,11 +378,13 @@ function (_React$PureComponent) {
           }
         },
         className: classes.img
-      }), this.buildItemLabel(), !!secondaryLabel && _react.default.createElement("div", {
+      }), this.buildItemLabel())), _react.default.createElement("div", {
+        className: (0, _classnames.default)(classes.infosContent, (_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, classes.infosWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosWithSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames4, classes.infosInlineWithoutSecondary, secondaryInline && !secondaryLabel), _classNames4))
+      }, !!secondaryLabel && _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.secondaryLabel, (0, _defineProperty2.default)({}, classes.inline, secondaryInline))
-      }, secondaryLabel)), !!info && _react.default.createElement("span", {
-        className: classes.info
-      }, info));
+      }, secondaryLabel), !!info && _react.default.createElement("span", {
+        className: (0, _classnames.default)(classes.info)
+      }, info)));
     }
   }]);
   return HiSelectableListItem;
@@ -456,12 +494,12 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Fonction de callback à la sélection de l'élément
    */
-  onSelect: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
 
   /**
    * Fonction de callback à la sélection de l'élément
    */
-  onKeyDown: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
 
   /**
    * Padding par défaut des éléments

package/HiTable/HiCellBuilder.js

@@ -15,7 +15,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
@@ -25,25 +25,25 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
 
-var _CellAddress = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellAddress"));
+var _CellAddress = _interopRequireDefault(require("../HiCell/CellAddress"));
 
-var _CellDate = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellDate"));
+var _CellDate = _interopRequireDefault(require("../HiCell/CellDate"));
 
-var _CellIcon = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellIcon"));
+var _CellIcon = _interopRequireDefault(require("../HiCell/CellIcon"));
 
-var _CellImage = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellImage"));
+var _CellImage = _interopRequireDefault(require("../HiCell/CellImage"));
 
-var _CellNumeric = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellNumeric"));
+var _CellNumeric = _interopRequireDefault(require("../HiCell/CellNumeric"));
 
-var _CellSentinel = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellSentinel"));
+var _CellSentinel = _interopRequireDefault(require("../HiCell/CellSentinel"));
 
-var _CellSentinelScore = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellSentinelScore"));
+var _CellSentinelScore = _interopRequireDefault(require("../HiCell/CellSentinelScore"));
 
-var _CellText = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellText"));
+var _CellTextStyled = _interopRequireDefault(require("../HiCell/CellTextStyled"));
 
-var _CellRate = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellRate"));
+var _CellRate = _interopRequireDefault(require("../HiCell/CellRate"));
 
-var _CellPinToAction = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellPinToAction"));
+var _CellPinToAction = _interopRequireDefault(require("../HiCell/CellPinToAction"));
 
 var cst = _interopRequireWildcard(require("./constants"));
 
@@ -54,13 +54,19 @@ function (_React$PureComponent) {
   (0, _inherits2.default)(HiCellBuilder, _React$PureComponent);
 
   function HiCellBuilder() {
+    var _getPrototypeOf2;
+
+    var _this;
+
     (0, _classCallCheck2.default)(this, HiCellBuilder);
-    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiCellBuilder).apply(this, arguments));
-  }
 
-  (0, _createClass2.default)(HiCellBuilder, [{
-    key: "createCell",
-    value: function createCell(cell, rowdata, locale) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiCellBuilder)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _this.createCell = function (cell, rowdata, locale) {
       if (rowdata.datas[cell.colId]) {
         var datacell = rowdata.datas[cell.colId];
 
@@ -103,8 +109,10 @@ function (_React$PureComponent) {
                 label: datacell.label,
                 shortLabel: datacell.id,
                 path: datacell.img,
-                size: datacell.size,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                size: datacell.size || cell.size,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                fallbackImage: datacell.fallbackImage,
+                title: cell.title ? cell.title(datacell, cell) : datacell.title
               });
 
             case cst.TYPE_RATE:
@@ -168,36 +176,38 @@ function (_React$PureComponent) {
             case cst.TYPE_SENTINEL_SCORE:
               return _react.default.createElement(_CellSentinelScore.default, {
                 value: datacell.value,
-                result: datacell.result
+                result: datacell.result,
+                active: datacell.active
               });
 
             case cst.TYPE_PIN_TO_ACTION:
               return _react.default.createElement(_CellPinToAction.default, {
-                number: datacell.number,
+                number: datacell.number // eslint-disable-next-line react/jsx-handler-names
+                ,
                 onClick: datacell.onClick
               });
 
             case cst.TYPE_ACCOUNT_NUMBER:
-              return _react.default.createElement(_CellText.default, {
-                label: datacell.value,
-                color: datacell.color,
-                ellipsis: datacell.ellipse
-              });
-
+            case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
             default:
-              return _react.default.createElement(_CellText.default, {
-                label: datacell.value,
+              return _react.default.createElement(_CellTextStyled.default, {
+                active: datacell.active,
                 color: datacell.color,
-                ellipsis: datacell.ellipse,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                label: datacell.label,
+                title: cell.title ? cell.title(datacell, cell) : datacell.title,
+                value: datacell.value
               });
           }
         }
       }
 
       return null;
-    }
-  }, {
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiCellBuilder, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,

package/HiTable/HiTableHeader.js

@@ -31,19 +31,18 @@ var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
 
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
 
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
 var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
 
 var cst = _interopRequireWildcard(require("./constants"));
 
 // @inheritedComponent TableHeader
-var styles = function styles(theme) {
-  return {
-    icon: {
-      color: '#00ADE9'
-    }
-  };
+var styles = {
+  icon: {
+    color: '#00ADE9'
+  },
+  headerRoot: {
+    cursor: 'inherit'
+  }
 };
 
 var HiTableHeader =
@@ -76,6 +75,8 @@ function (_React$PureComponent) {
   (0, _createClass2.default)(HiTableHeader, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           classes = _this$props.classes,
           columns = _this$props.columns,
@@ -89,28 +90,34 @@ function (_React$PureComponent) {
           whiteSpace: 'nowrap'
         }
       }, Object.keys(columns).map(function (key) {
-        var column = columns[key];
+        var _columns$key = columns[key],
+            colId = _columns$key.colId,
+            type = _columns$key.type,
+            label = _columns$key.label,
+            smallLabel = _columns$key.smallLabel,
+            view = _columns$key.view,
+            headerTooltip = _columns$key.headerTooltip;
+        var finalLabel = view === 's' ? smallLabel : label;
         return _react.default.createElement(_TableCell.default, {
-          key: column.colId,
-          sortDirection: orderBy === column.colId ? order : false,
+          key: colId,
+          sortDirection: orderBy === colId ? order : false,
           style: {
             border: 'none',
-            borderBottom: orderBy === column.colId ? 'solid 1px #00ADE9' : 'none',
+            borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
             paddingRight: '13px',
             paddingLeft: '13px'
           },
-          numeric: !!cst.ALIGN_RIGHT_TYPES.includes(column.type)
-        }, sortable ? _react.default.createElement(_Tooltip.default, {
-          title: "Sort",
-          enterDelay: 300
-        }, _react.default.createElement(_TableSortLabel.default, {
-          active: orderBy === column.colId,
+          numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
+          title: headerTooltip
+        }, sortable ? _react.default.createElement(_TableSortLabel.default, {
+          active: orderBy === colId,
           direction: order,
-          onClick: this.createSortHandler(column.colId),
+          onClick: _this2.createSortHandler(colId),
           classes: {
             icon: classes.icon
-          }
-        }, column.label)) : column.label);
+          },
+          title: headerTooltip || label
+        }, finalLabel) : finalLabel);
       }, this)));
     }
   }]);

package/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SENTINEL_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SENTINEL_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -39,6 +39,8 @@ var TYPE_ACCOUNT = 'account';
 exports.TYPE_ACCOUNT = TYPE_ACCOUNT;
 var TYPE_ACCOUNT_NUMBER = 'account_number';
 exports.TYPE_ACCOUNT_NUMBER = TYPE_ACCOUNT_NUMBER;
+var TYPE_CUSTOMER_ACCOUNT_NUMBER = 'customer_account_number';
+exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = TYPE_CUSTOMER_ACCOUNT_NUMBER;
 var TYPE_ADDRESS = 'address';
 exports.TYPE_ADDRESS = TYPE_ADDRESS;
 var TYPE_CHECKBOX = 'checkbox';