@hipay/hipay-material-ui 2.0.0-beta.46 → 2.0.0-beta.48

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/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/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
@@ -312,8 +313,7 @@ function (_React$Component) {
         classes: {
           root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
         },
-        color: "primary" // TODO ?
-        ,
+        color: disabled ? "inherit" : "primary",
         disabled: disabled,
         icon: displayedIcon,
         indeterminate: indeterminate,
@@ -421,6 +421,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 +489,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;

package/HiTable/HiTable.js

@@ -0,0 +1,155 @@
+"use strict";
+
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
+
+var _HiTableHeader = _interopRequireDefault(require("./HiTableHeader"));
+
+var _HiTableBody = _interopRequireDefault(require("./HiTableBody"));
+
+// @inheritedComponent Table
+var styles = function styles(theme) {
+  return {
+    root: {
+      backgroundColor: theme.palette.background3
+    }
+  };
+};
+
+var HiTable =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiTable, _React$PureComponent);
+
+  function HiTable(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiTable);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTable).call(this, props));
+
+    _this.handleRequestSort = function (event, property) {
+      if (_this.props.onSort) {
+        _this.props.onSort(property);
+      }
+    };
+
+    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiTable, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          data = _this$props.data,
+          columns = _this$props.columns,
+          locale = _this$props.locale,
+          sortable = _this$props.sortable,
+          onRowClick = _this$props.onRowClick,
+          dense = _this$props.dense,
+          order = _this$props.order,
+          orderBy = _this$props.orderBy;
+      return _react.default.createElement(_Table.default, {
+        className: classes.root
+      }, _react.default.createElement(_HiTableHeader.default, {
+        columns: columns,
+        order: order,
+        orderBy: orderBy,
+        onRequestSort: this.handleRequestSort,
+        sortable: sortable,
+        dense: dense
+      }), _react.default.createElement(_HiTableBody.default, {
+        data: data,
+        columns: columns,
+        onClick: onRowClick,
+        dense: dense,
+        locale: locale
+      }));
+    }
+  }]);
+  return HiTable;
+}(_react.default.PureComponent);
+
+HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * En-tête des données et leurs paramètres
+   */
+  columns: _propTypes.default.object.isRequired,
+
+  /**
+   * Données du tableau
+   */
+  data: _propTypes.default.array.isRequired,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  dense: _propTypes.default.bool,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Fonction se déclanchant au clic sur une ligne
+   */
+  onRowClick: _propTypes.default.func,
+
+  /**
+   * Fonction de trie des données
+   */
+  onSort: _propTypes.default.func,
+
+  /**
+   * Sens du tri
+   */
+  order: _propTypes.default.oneOf(['asc', 'desc']),
+
+  /**
+   * Id de la colonne trié
+   */
+  orderBy: _propTypes.default.string,
+
+  /**
+   * Le tableau est-il triable ?
+   */
+  sortable: _propTypes.default.bool
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiTable'
+})(HiTable);
+
+exports.default = _default;