@hipay/hipay-material-ui 2.0.0-beta.53 → 2.0.0-beta.55

package/HiCell/CellImage.js

@@ -41,6 +41,18 @@ var styles = function styles() {
     }
   };
 };
+
+exports.styles = styles;
+
+var handleError = function handleError(fallbackImage) {
+  return function (e) {
+    if (fallbackImage) {
+      e.target.src = "".concat(fallbackImage);
+    } else {
+      e.target.style.display = 'none';
+    }
+  };
+};
 /**
  * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
  * En vue large, aucun tooltip n'est affiché
@@ -48,8 +60,6 @@ var styles = function styles() {
  */
 
 
-exports.styles = styles;
-
 var CellImage =
 /*#__PURE__*/
 function (_React$PureComponent) {
@@ -69,7 +79,8 @@ function (_React$PureComponent) {
           label = _this$props.label,
           shortLabel = _this$props.shortLabel,
           view = _this$props.view,
-          size = _this$props.size;
+          size = _this$props.size,
+          fallbackImage = _this$props.fallbackImage;
       if (!path || path === '') return '';
       return _react.default.createElement("div", {
         className: classes.wrapper,
@@ -78,7 +89,8 @@ function (_React$PureComponent) {
         src: path,
         alt: label,
         className: classes.img,
-        width: size
+        width: size,
+        onError: handleError(fallbackImage)
       }), shortLabel && view === 'm' && _react.default.createElement("span", {
         className: classes.label
       }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && _react.default.createElement("span", {

package/HiCell/CellNumeric.js

@@ -28,8 +28,7 @@ var _helpers = require("../utils/helpers");
 var styles = function styles() {
   return {
     wrapper: {
-      textAlign: 'right',
-      direction: 'rtl'
+      textAlign: 'right'
     }
   };
 };

package/HiCell/CellSentinel.js

@@ -26,59 +26,17 @@ var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var styles = {
-  smartDecision: {
-    marginLeft: 2,
-    display: 'inline-block',
-    minWidth: 18
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
   },
-  label: {
-    marginLeft: 2
-  },
-  nowrap: {
-    whiteSpace: 'nowrap'
-  }
+  label: {}
 };
-/**
- * Get Theme color from fraudResult
- * @param fraudResult
- * @returns {*}
- */
-
-exports.styles = styles;
-
-function getColorFromFraudResult(fraudResult) {
-  var color;
-
-  switch (fraudResult.toUpperCase()) {
-    case 'ACCEPTED':
-      color = 'positive';
-      break;
-
-    case 'BLOCKED':
-      color = 'negative';
-      break;
-
-    case 'CHALLENGED':
-      color = 'middle';
-      break;
-
-    case 'PENDING':
-      color = 'primary';
-      break;
-
-    case 'FORCE_AUTHENTICATE':
-    case 'ASK_AUTHENTICATE':
-    default:
-      color = 'neutral';
-      break;
-  }
-
-  return color;
-}
 /**
  * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
  */
 
+exports.styles = styles;
 
 var CellSentinel =
 /*#__PURE__*/
@@ -94,83 +52,49 @@ function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          active = _this$props.active,
           classes = _this$props.classes,
-          score = _this$props.score,
-          fraudResult = _this$props.fraudResult,
-          automaticFraudReviewResult = _this$props.automaticFraudReviewResult,
-          pendingManualAction = _this$props.pendingManualAction,
-          smartDecision = _this$props.smartDecision,
-          hideFraudResult = _this$props.hideFraudResult;
-      var scoreLabel = score > 0 ? "+".concat(score) : "".concat(score);
+          color = _this$props.color,
+          label = _this$props.label,
+          letter = _this$props.letter,
+          outlined = _this$props.outlined,
+          reviewer = _this$props.reviewer,
+          value = _this$props.value;
+
+      var _label = label ? label : value;
+
+      var _letter = letter ? letter : _label[0];
+
       return _react.default.createElement("div", {
-        style: {
-          textAlign: 'right',
-          minWidth: '100px'
-        }
+        className: classes.flexContent,
+        title: reviewer ? "".concat(_label, "\n").concat(reviewer) : _label
       }, _react.default.createElement(_HiColoredLabel.default, {
-        label: scoreLabel,
-        color: getColorFromFraudResult(fraudResult),
+        active: active,
         classes: {
           root: classes.label
         },
-        active: pendingManualAction
-      }), !hideFraudResult && _react.default.createElement(_HiColoredLabel.default, {
-        label: fraudResult.toUpperCase().substr(0, 1),
-        color: getColorFromFraudResult(fraudResult),
-        classes: {
-          root: classes.label
-        },
-        active: pendingManualAction
-      }), !!smartDecision && _react.default.createElement("div", {
-        className: classes.smartDecision
-      }, automaticFraudReviewResult && _react.default.createElement(_HiColoredLabel.default, {
-        label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
-        color: getColorFromFraudResult(automaticFraudReviewResult),
-        active: pendingManualAction
-      })));
+        color: color,
+        label: _letter,
+        outlined: outlined
+      }));
     }
   }]);
   return CellSentinel;
 }(_react.default.PureComponent);
 
 CellSentinel.defaultProps = {
-  hideFraudResult: false
+  active: false,
+  outlined: false
 };
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
-   */
-  automaticFraudReviewResult: _propTypes.default.string,
-
-  /**
-   * Useful to extend the style applied to components.
-   */
   classes: _propTypes.default.object,
-
-  /**
-   * Résultat de la fraude
-   */
-  fraudResult: _propTypes.default.string.isRequired,
-
-  /**
-   * Si true le fraudResult ne sera pas affiché
-   */
-  hideFraudResult: _propTypes.default.bool,
-
-  /**
-   * Signal qu'il attend une réponse manuelle
-   */
-  pendingManualAction: _propTypes.default.bool,
-
-  /**
-   * Score de la fraude
-   */
-  score: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-
-  /**
-   * Active le SmartDecision (ajoute l'indicateur ou blanc)
-   */
-  smartDecision: _propTypes.default.bool
+  value: _propTypes.default.string,
+  color: _propTypes.default.string,
+  label: _propTypes.default.string,
+  letter: _propTypes.default.string,
+  active: _propTypes.default.bool,
+  reviewer: _propTypes.default.string,
+  outlined: _propTypes.default.bool
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiCell/CellSentinelScore.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.sentinelColorById = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var styles = {
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  label: {}
+};
+exports.styles = styles;
+var sentinelColorById = {
+  NOT_LAUNCHED: '#737373',
+  ACCEPTED: '#00AF01',
+  AUTHENTICATE: '#484A4B',
+  FORCE_AUTHENTICATE: '#20272B',
+  PENDING: '#3987AD',
+  CHALLENGED: '#FF8F01',
+  BLOCKED: '#D50000',
+  ALLOWED: '#00AF01',
+  DENIED: '#D50000'
+};
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+exports.sentinelColorById = sentinelColorById;
+
+var CellSentinelScore =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellSentinelScore, _React$PureComponent);
+
+  function CellSentinelScore() {
+    (0, _classCallCheck2.default)(this, CellSentinelScore);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellSentinelScore).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellSentinelScore, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          classes = _this$props.classes,
+          result = _this$props.result,
+          value = _this$props.value;
+      return _react.default.createElement("div", {
+        className: classes.flexContent
+      }, _react.default.createElement(_HiColoredLabel.default, {
+        active: active,
+        classes: {
+          root: classes.label
+        },
+        color: sentinelColorById[result],
+        label: value > 0 ? "+".concat(value) : "".concat(value)
+      }));
+    }
+  }]);
+  return CellSentinelScore;
+}(_react.default.PureComponent);
+
+CellSentinelScore.defaultProps = {
+  active: false
+};
+CellSentinelScore.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: _propTypes.default.bool,
+  classes: _propTypes.default.object,
+  result: _propTypes.default.string,
+  value: _propTypes.default.number
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellSentinelScore'
+})(CellSentinelScore);
+
+exports.default = _default;

package/HiCell/CellTextStyled.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var styleRoot = {
+  width: '100%',
+  height: 19,
+  margin: 'auto 0',
+  display: 'flex',
+  lineHeight: '15px'
+};
+var styleColorLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre'
+};
+var styleLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre',
+  width: '100%'
+};
+/**
+ * CellText functional component
+ * (don't includes complex ellipsis: middle, after-first-word...)
+ *
+ * @param label
+ * @param color
+ * @param value
+ * @param active
+ * @param title
+ * @returns {*}
+ * @constructor
+ */
+
+var CellTextStyled = function CellTextStyled(_ref) {
+  var label = _ref.label,
+      color = _ref.color,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title;
+  var valueString = label ? label.toString() : value.toString();
+  return _react.default.createElement("div", {
+    style: styleRoot,
+    title: title ? title : valueString
+  }, color ? _react.default.createElement(_HiColoredLabel.default, {
+    style: styleColorLabel,
+    label: valueString,
+    color: color,
+    active: active
+  }) : _react.default.createElement("div", {
+    style: styleLabel
+  }, valueString));
+};
+
+var _default = CellTextStyled;
+exports.default = _default;

package/HiCell/index.js

@@ -53,6 +53,12 @@ Object.defineProperty(exports, "CellText", {
     return _CellText.default;
   }
 });
+Object.defineProperty(exports, "CellTextStyled", {
+  enumerable: true,
+  get: function get() {
+    return _CellTextStyled.default;
+  }
+});
 
 var _CellAddress = _interopRequireDefault(require("./CellAddress"));
 
@@ -68,4 +74,6 @@ var _CellRate = _interopRequireDefault(require("./CellRate"));
 
 var _CellSentinel = _interopRequireDefault(require("./CellSentinel"));
 
-var _CellText = _interopRequireDefault(require("./CellText"));
+var _CellText = _interopRequireDefault(require("./CellText"));
+
+var _CellTextStyled = _interopRequireDefault(require("./CellTextStyled"));

package/HiChip/HiChip.js

@@ -71,7 +71,7 @@ var styles = function styles(theme) {
       position: 'relative',
       cursor: 'pointer',
       '&:hover, &:focus': {
-        color: theme.palette.primary.main
+        color: theme.palette.neutral.dark
       }
     },
     label: {
@@ -82,6 +82,7 @@ var styles = function styles(theme) {
       textOverflow: 'ellipsis'
     },
     prefix: {
+      whiteSpace: 'nowrap',
       color: theme.palette.neutral.dark,
       paddingRight: 4
     },

package/HiColoredLabel/HiColoredLabel.js

@@ -115,6 +115,9 @@ var styles = function styles(theme) {
     activeColorNeutral: {
       color: theme.palette.neutral.contrastText,
       backgroundColor: theme.palette.neutral.main
+    },
+    outlined: {
+      border: '1px solid'
     }
   };
 };
@@ -135,14 +138,15 @@ function HiColoredLabel(props) {
       label = props.label,
       color = props.color,
       active = props.active,
+      outlined = props.outlined,
       fontWeight = props.fontWeight,
       style = props.style,
       theme = props.theme,
-      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
+      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
   var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   var isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
   return _react.default.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), _classNames), className),
+    className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes.outlined, outlined), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), _classNames), className),
     style: (0, _extends2.default)({}, style, isHexColor && {
       backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
@@ -182,11 +186,17 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Label à afficher
    */
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node]).isRequired
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node]).isRequired,
+
+  /**
+   * Ajoute une bordure
+   */
+  outlined: _propTypes.default.bool
 } : {};
 HiColoredLabel.defaultProps = {
   active: false,
-  color: 'primary'
+  color: 'primary',
+  outlined: false
 };
 
 var _default = (0, _withStyles.default)(styles, {

package/HiDatePicker/HiDatePicker.js

@@ -270,7 +270,7 @@ function (_React$Component) {
         todayButton: translations.today,
         onTodayButtonClick: this.handleCurrentMonthChange,
         weekdayElement: _Weekday.default,
-        NavBarElement: function NavBarElement(props2) {
+        navbarElement: function navbarElement(props2) {
           return _react.default.createElement(_NavBar.default, (0, _extends2.default)({
             showClockButton: enableTime,
             onClockClick: _this2.handleClockClick