@hipay/hipay-material-ui 2.0.0-beta.45 → 2.0.0-beta.47

package/HiCell/CellIcon.js

@@ -65,16 +65,19 @@ function (_React$PureComponent) {
           color = _this$props.color,
           icon = _this$props.icon,
           label = _this$props.label,
-          view = _this$props.view;
+          view = _this$props.view,
+          size = _this$props.size;
       return _react.default.createElement("div", {
         className: classes.wrapper,
         title: label
       }, icon && _react.default.createElement(_HiIcon.default, {
-        color: color,
+        color: "inherit",
+        style: {
+          color: color,
+          fontSize: size ? size : 24
+        },
         className: classes.icon,
-        icon: icon,
-        width: 40,
-        height: 24
+        icon: icon
       }), view !== 's' && label && _react.default.createElement("span", {
         className: classes.label
       }, label));
@@ -112,7 +115,12 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * View (L/M/S)
    */
-  view: _propTypes.default.oneOf(['l', 'm', 's'])
+  view: _propTypes.default.oneOf(['l', 'm', 's']),
+
+  /**
+   * Icon size
+   */
+  size: _propTypes.default.number
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiCell/CellNumeric.js

@@ -68,7 +68,7 @@ function (_React$PureComponent) {
         title = (0, _helpers.formatCurrencyAmount)(value, 'l', locale, currency);
       } else {
         displayedValue = (0, _helpers.formatNumber)(value, view, locale, precision);
-        title = (0, _helpers.formatNumber)(value, 'l', locale);
+        title = (0, _helpers.formatNumber)(value, 'l', locale, precision);
       }
 
       return _react.default.createElement("div", {
@@ -81,7 +81,8 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 CellNumeric.defaultProps = {
-  view: 'm'
+  view: 'm',
+  locale: 'en'
 };
 CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
   /**

package/HiCell/CellRate.js

@@ -138,7 +138,8 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 CellRate.defaultProps = {
-  isPositive: true
+  isPositive: true,
+  locale: 'en'
 };
 CellRate.propTypes = process.env.NODE_ENV !== "production" ? {
   /**

package/HiCell/CellSentinel.js

@@ -104,7 +104,8 @@ function (_React$PureComponent) {
       var scoreLabel = score > 0 ? "+".concat(score) : "".concat(score);
       return _react.default.createElement("div", {
         style: {
-          textAlign: 'right'
+          textAlign: 'right',
+          minWidth: '100px'
         }
       }, _react.default.createElement(_HiColoredLabel.default, {
         label: scoreLabel,

package/HiCheckbox/HiCheckbox.js

@@ -124,7 +124,7 @@ function (_React$Component) {
         width: size,
         height: size
       }, style);
-      var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+      var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
       return _react.default.createElement(_Checkbox.default, (0, _extends2.default)({
         classes: {
           root: classes.root,

package/HiChip/HiChip.js

@@ -133,9 +133,15 @@ function HiChip(props) {
     id: id,
     className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty2.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty2.default)(_classNames, classes.deletable, onDelete), (0, _defineProperty2.default)(_classNames, classes.leftIcon, icon), _classNames)),
     title: title
-  }, prefix && _react.default.createElement("span", {
+  }, icon && _react.default.createElement(_HiIcon.default, {
+    className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
+    icon: icon,
+    size: iconSize,
+    onClick: onIconClick,
+    title: titleIcon
+  }), prefix && _react.default.createElement("span", {
     className: classes.prefix
-  }, prefix, " : "), img && _react.default.createElement("img", {
+  }, prefix), img && _react.default.createElement("img", {
     className: classes.badge,
     src: img,
     alt: img,
@@ -147,12 +153,6 @@ function HiChip(props) {
       }
     },
     title: titleImg
-  }), icon && _react.default.createElement(_HiIcon.default, {
-    className: (0, _classnames.default)(classes.icon, (0, _defineProperty2.default)({}, classes.iconClickable, onIconClick)),
-    icon: icon,
-    size: iconSize,
-    onClick: onIconClick,
-    title: titleIcon
   }), onPrevious && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.navigate),
     icon: "arrow_left",

package/HiForm/HiFormControl.js

@@ -43,6 +43,8 @@ var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _HiFormLabel = _interopRequireDefault(require("./HiFormLabel"));
 
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
 var _helpers = require("../utils/helpers");
 
 var _index = _interopRequireDefault(require("keycode/index"));
@@ -56,15 +58,24 @@ var styles = function styles(theme) {
       textAlign: 'right',
       marginTop: 2
     },
-    errorIcon: {
-      width: 19,
-      height: 19,
-      color: theme.palette.negative.main,
+    iconButton: {
       position: 'absolute',
-      right: 8,
+      right: 5,
       cursor: 'pointer',
-      top: '-2px'
+      top: '-5px',
+      '&$iconButtonError': {
+        color: theme.palette.negative.main
+      },
+      '&$iconButtonInfo': {
+        color: theme.palette.neutral.main
+      },
+      '&$iconButtonInfoActive': {
+        color: theme.palette.primary.main
+      }
     },
+    iconButtonError: {},
+    iconButtonInfo: {},
+    iconButtonInfoActive: {},
     errorDiv: (0, _extends2.default)({}, theme.typography.b3, {
       backgroundColor: theme.palette.negative.main,
       color: '#FFFFFF',
@@ -72,7 +83,7 @@ var styles = function styles(theme) {
       verticalAlign: 'middle',
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 5,
+      marginBottom: 8,
       fontWeight: theme.typography.fontWeightRegular
     }),
     arrowDown: {
@@ -83,23 +94,11 @@ var styles = function styles(theme) {
       borderTop: '4px solid #000',
       position: 'absolute',
       bottom: -4,
-      right: 14
+      right: 13
     },
     errorDivArrowDown: {
       borderTopColor: theme.palette.negative.main
     },
-    helperIcon: {
-      width: 19,
-      height: 19,
-      color: theme.palette.neutral.main,
-      position: 'absolute',
-      right: 8,
-      cursor: 'pointer',
-      top: '-2px'
-    },
-    helperIconActive: {
-      color: theme.palette.primary.main
-    },
     helperDiv: (0, _extends2.default)({}, theme.typography.b2, {
       width: '100%',
       backgroundColor: '#ffffff',
@@ -107,13 +106,16 @@ var styles = function styles(theme) {
       padding: '16px 8px',
       borderRadius: 2,
       position: 'relative',
-      marginBottom: 5,
+      marginBottom: 8,
       fontWeight: theme.typography.fontWeightRegular,
       boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
       lineHeight: 1.5
     }),
     helperDivArrowDown: {
       borderTopColor: '#ffffff'
+    },
+    icon: {
+      position: 'absolute'
     }
   };
 };
@@ -245,17 +247,19 @@ function (_React$PureComponent) {
         required: required,
         disabled: disabled,
         focused: !disabled && (focused || hovered)
-      }, InputLabelProps), error && _react.default.createElement(_Warning.default, {
-        className: classes.errorIcon,
+      }, InputLabelProps), error && _react.default.createElement(_HiIconButton.default, {
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError),
         onClick: this.handleHelperClick,
-        tabIndex: 0,
         onKeyDown: this.handleKeyDown
-      }), helperIcon && helperText && !error && _react.default.createElement(_Info.default, {
-        className: (0, _classnames.default)(classes.helperIcon, (0, _defineProperty2.default)({}, classes.helperIconActive, helperOpen)),
+      }, _react.default.createElement(_Warning.default, {
+        className: (0, _classnames.default)(classes.icon)
+      })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
+        className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (0, _defineProperty2.default)({}, classes.iconButtonInfoActive, helperOpen)),
         onClick: this.handleHelperClick,
-        tabIndex: 0,
         onKeyDown: this.handleKeyDown
-      })), _react.default.createElement("div", {
+      }, _react.default.createElement(_Info.default, {
+        className: (0, _classnames.default)(classes.icon)
+      }))), _react.default.createElement("div", {
         onMouseEnter: this.handleHover(true),
         onMouseLeave: this.handleHover(false),
         onFocus: this.handleFocus(true),

package/HiForm/HiInput.js

@@ -402,6 +402,8 @@ function (_React$PureComponent) {
           focused: nextProps.focused
         };
       }
+
+      return null;
     }
   }]);
   return HiInput;

package/HiSelect/HiSelect.js

@@ -72,9 +72,11 @@ var styles = function styles(theme) {
       position: 'relative'
     },
     popper: {
-      width: '100% !important',
       zIndex: 1200
     },
+    popperWidth: {
+      width: '100% !important'
+    },
     paper: {
       borderRadius: '0px 2px',
       maxHeight: 440,
@@ -667,7 +669,7 @@ function (_React$PureComponent) {
         }
       }
 
-      var popperClass = (0, _classnames.default)(classes.popper, (0, _defineProperty2.default)({}, classes.popperClose, !open));
+      var popperClass = (0, _classnames.default)(classes.popper, (0, _defineProperty2.default)({}, classes.popperWidth, !this.props.containerWidth));
       var allSelected = false;
 
       if (selectedIdList.length === this.state.nbOptions) {
@@ -680,6 +682,10 @@ function (_React$PureComponent) {
         popperStyle = {
           width: this.props.containerWidth
         };
+
+        if (!staticPosition) {
+          popperStyle.position = 'absolute';
+        }
       }
 
       if (infiniteScroll && loadingMoreResults) {

package/HiSelectNew/HiSelect.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -53,6 +55,8 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var styles = function styles(theme) {
   return {
     root: {
@@ -62,9 +66,15 @@ var styles = function styles(theme) {
       position: 'relative'
     },
     popper: {
-      width: '100% !important',
       zIndex: 1200
     },
+    popperWidth: {
+      width: '100% !important'
+    },
+    popperRightAlign: {
+      right: 0,
+      left: 'unset!important'
+    },
     paper: {
       borderRadius: '0px 2px',
       maxHeight: 480,
@@ -431,7 +441,8 @@ function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _classNames,
+          _this2 = this;
 
       var _this$props4 = this.props,
           classes = _this$props4.classes,
@@ -478,6 +489,20 @@ function (_React$PureComponent) {
           _buildSelectProps$inp = _buildSelectProps.inputValue,
           inputValue = _buildSelectProps$inp === void 0 ? this.buildInputValue(options, selectedItemIdList, loading) : _buildSelectProps$inp;
 
+      var popperStyle = {};
+
+      if (this.props.containerWidth > 0) {
+        popperStyle = {
+          width: this.props.containerWidth
+        };
+
+        if (!staticPosition) {
+          popperStyle.position = 'absolute';
+        }
+      }
+
+      var popperClass = (0, _classnames.default)(classes.popper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.popperWidth, !this.props.containerWidth), (0, _defineProperty2.default)(_classNames, classes.popperRightAlign, this.props.containerWidth), _classNames));
+
       var content = _react.default.createElement(_ClickAwayListener.default, {
         onClickAway: this.handleClickAway
       }, _react.default.createElement(_Grow.default, {
@@ -543,13 +568,15 @@ function (_React$PureComponent) {
           _this2.inputEl = el;
         }
       })), open && staticPosition ? _react.default.createElement("div", {
-        className: classes.popper
+        style: popperStyle,
+        className: popperClass
       }, content) : _react.default.createElement(_Popper.default, {
         anchorEl: this.inputEl,
         placement: "bottom-start",
         open: open,
-        className: classes.popper,
-        disablePortal: true
+        className: popperClass,
+        disablePortal: true,
+        style: popperStyle
       }, content));
     }
   }], [{
@@ -595,6 +622,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: _propTypes.default.object,
 
+  /**
+   * Popper width
+   */
+  containerWidth: _propTypes.default.number,
+
   /**
    * Inactif
    */

package/HiSelectableList/HiSelectableListItem.js

@@ -111,6 +111,7 @@ var styles = function styles(theme) {
     }, theme.typography.b1, {
       fontWeight: 'inherit',
       width: '100%',
+      minWidth: '50%',
       padding: '5px 0',
       '& strong': {
         fontWeight: theme.typography.fontWeightMedium
@@ -137,11 +138,11 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
       fontSize: 12,
-      whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       textAlign: 'right',
       margin: '4px 12px 4px 8px',
-      alignSelf: 'center'
+      alignSelf: 'center',
+      width: '100%'
     }),
     checkbox: {
       marginTop: 3
@@ -421,6 +422,11 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   indeterminate: _propTypes.default.bool,
 
+  /**
+   * icon à afficher quand le composant a la prop indeterminate.
+   */
+  indeterminateIcon: _propTypes.default.string,
+
   /**
    * Text d'information affiché à droite de l'élément
    */
@@ -484,7 +490,7 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
 
 var _default = (0, _withStyles.default)(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectableList'
+  name: 'HmuiHiSelectableListItem'
 })(HiSelectableListItem);
 
 exports.default = _default;

package/HiTable/HiCellBuilder.js

@@ -0,0 +1,229 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+
+var _CellAddress = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellAddress"));
+
+var _CellDate = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellDate"));
+
+var _CellIcon = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellIcon"));
+
+var _CellImage = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellImage"));
+
+var _CellNumeric = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellNumeric"));
+
+var _CellSentinel = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellSentinel"));
+
+var _CellText = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellText"));
+
+var _CellRate = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellRate"));
+
+var _CellPinToAction = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellPinToAction"));
+
+var cst = _interopRequireWildcard(require("./constants"));
+
+// @inheritedComponent CellBuilder
+var HiCellBuilder =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiCellBuilder, _React$PureComponent);
+
+  function HiCellBuilder() {
+    (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) {
+      if (rowdata.datas[cell.colId]) {
+        var datacell = rowdata.datas[cell.colId];
+
+        if (cell.data !== undefined) {
+          var refproperties = cell.data.find(function (el) {
+            return el.id === datacell.value;
+          });
+
+          if (refproperties) {
+            Object.keys(refproperties).forEach(function (key) {
+              datacell[key] = refproperties[key];
+            });
+          } else {
+            datacell = undefined;
+          }
+        }
+
+        if (datacell) {
+          switch (cell.type) {
+            case cst.TYPE_NUMERIC:
+              return _react.default.createElement(_CellNumeric.default, {
+                value: datacell.value,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                precision: cell.precision,
+                currency: datacell.currency,
+                locale: datacell.locale || cell.locale || locale
+              });
+
+            case cst.TYPE_COUNTRY:
+              return _react.default.createElement(_CellImage.default, {
+                label: datacell.label,
+                shortLabel: datacell.id,
+                path: datacell.img,
+                size: datacell.size,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_IMAGE:
+              return _react.default.createElement(_CellImage.default, {
+                label: datacell.label,
+                shortLabel: datacell.id,
+                path: datacell.img,
+                size: datacell.size,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_RATE:
+              return _react.default.createElement(_CellRate.default, {
+                indicator: datacell.indicator,
+                isPositive: datacell.isPositive,
+                locale: datacell.locale || cell.locale || locale,
+                value: datacell.value,
+                trendchip: datacell.trendchip,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_ADDRESS:
+              return _react.default.createElement(_CellAddress.default, {
+                city: datacell.city,
+                country: datacell.country,
+                isoCountry: datacell.isoCountry,
+                name: datacell.name,
+                postalCode: datacell.postalCode,
+                streetAddress: datacell.streetAddress,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_DATE:
+              return _react.default.createElement(_CellDate.default, {
+                date: datacell.date,
+                displayTime: datacell.displayTime,
+                formatShort: datacell.formatShort,
+                locale: datacell.locale || cell.precision || locale,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_ICON:
+              return _react.default.createElement(_CellIcon.default, {
+                color: datacell.color,
+                icon: datacell.icon,
+                label: datacell.label,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                size: cell.size
+              });
+
+            case cst.TYPE_THIRD_PARTY_SECURITY:
+              return _react.default.createElement(_CellIcon.default, {
+                color: datacell.color,
+                icon: datacell.icon,
+                label: datacell.label,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                size: cell.size
+              });
+
+            case cst.TYPE_SENTINEL:
+              return _react.default.createElement(_CellSentinel.default, {
+                automaticFraudReviewResult: datacell.automaticFraudReviewResult,
+                fraudResult: datacell.value,
+                hideFraudResult: datacell.hideFraudResult,
+                pendingManualAction: datacell.pendingManualAction,
+                score: datacell.score,
+                smartDecision: datacell.smartDecision,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+
+            case cst.TYPE_PIN_TO_ACTION:
+              return _react.default.createElement(_CellPinToAction.default, {
+                number: datacell.number,
+                onClick: datacell.onClick
+              });
+
+            case cst.TYPE_ACCOUNT_NUMBER:
+              return _react.default.createElement(_CellText.default, {
+                label: datacell.value,
+                color: datacell.color,
+                ellipsis: datacell.ellipse
+              });
+
+            default:
+              return _react.default.createElement(_CellText.default, {
+                label: datacell.value,
+                color: datacell.color,
+                ellipsis: datacell.ellipse,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              });
+          }
+        }
+      }
+
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          column = _this$props.column,
+          data = _this$props.data,
+          locale = _this$props.locale;
+      return _react.default.createElement(_TableCell.default, {
+        style: {
+          border: 'none',
+          paddingRight: '13px',
+          paddingLeft: '13px'
+        }
+      }, this.createCell(column, data, locale));
+    }
+  }]);
+  return HiCellBuilder;
+}(_react.default.PureComponent);
+
+HiCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Propriétés de la colonne
+   */
+  column: _propTypes.default.object.isRequired,
+
+  /**
+   * Données de la cellule
+   */
+  data: _propTypes.default.object.isRequired,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: _propTypes.default.string
+} : {};
+var _default = HiCellBuilder;
+exports.default = _default;