@hipay/hipay-material-ui 3.2.3 → 3.4.0

package/HiAlertModal/HiAlertModal.js

@@ -1,29 +1,23 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+exports.default = void 0;
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 
@@ -44,7 +38,7 @@ var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 var _helpers = require("../utils/helpers");
 
 // @inheritedComponent Dialog
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     classContent: {
       fontSize: 14,
@@ -85,147 +79,137 @@ var styles = function styles(theme) {
       transform: 'translate(-50%, -50%)',
       color: theme.palette.background2,
       flex: '1'
+    },
+    backgroundIcon: function backgroundIcon(props) {
+      return {
+        fontSize: "".concat(props.iconSize, "px !important")
+      };
     }
   };
-};
+});
 /**
  * Pop up d'alert
  */
 
+var HiAlertModal = function HiAlertModal(props) {
+  var backgroundIcon = props.backgroundIcon,
+      iconSize = props.iconSize,
+      content = props.content,
+      labelCancelButton = props.labelCancelButton,
+      labelSubmitButton = props.labelSubmitButton,
+      onCancelClick = props.onCancelClick,
+      onSubmitClick = props.onSubmitClick,
+      open = props.open,
+      cancelColor = props.cancelColor,
+      submitColor = props.submitColor,
+      title = props.title,
+      theme = props.theme,
+      onClose = props.onClose,
+      submitActionsRef = props.submitActionsRef,
+      cancelActionsRef = props.cancelActionsRef,
+      others = (0, _objectWithoutProperties2.default)(props, ["backgroundIcon", "iconSize", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title", "theme", "onClose", "submitActionsRef", "cancelActionsRef"]);
+  var classes = useStyles(props);
+  var submitButtonRef = (0, _react.useRef)(null);
+  var cancelButtonRef = (0, _react.useRef)(null);
+  var thisCancelActionsRef = (0, _objectSpread2.default)({}, cancelActionsRef);
+  var thisSubmitActionsRef = (0, _objectSpread2.default)({}, submitActionsRef); // Appelé si clic en dehors de la pop up
+
+  var handleOnClose = function handleOnClose() {
+    if (onClose) {
+      onClose();
+    }
+  };
 
-exports.styles = styles;
-
-var HiAlertModal =
-/*#__PURE__*/
-function (_React$PureComponent) {
-  (0, _inherits2.default)(HiAlertModal, _React$PureComponent);
+  var handleOnEntered = function handleOnEntered() {
+    if (labelSubmitButton) {
+      submitButtonRef.current.focus();
+      thisSubmitActionsRef.focusVisible();
+    } else if (props.labelCancelButton) {
+      cancelButtonRef.current.focus();
+      thisCancelActionsRef.focusVisible();
+    }
+  }; // Render
 
-  function HiAlertModal(props) {
-    var _this;
 
-    (0, _classCallCheck2.default)(this, HiAlertModal);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiAlertModal).call(this, props));
+  var dialogContent = content;
 
-    _this.handleOnClose = function () {
-      if (_this.props.onClose) {
-        _this.props.onClose();
+  if (typeof content === 'string') {
+    dialogContent = _react.default.createElement("span", {
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML: {
+        __html: (0, _helpers.escapeHTML)(content)
       }
-    };
+    });
+  }
 
-    _this.submitButtonRef = _react.default.createRef();
-    _this.cancelButtonRef = _react.default.createRef();
-    _this.handleOnClose = _this.handleOnClose.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleOnEntered = _this.handleOnEntered.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  } // Appelé si clic en dehors de la pop up
-
-
-  (0, _createClass2.default)(HiAlertModal, [{
-    key: "handleOnEntered",
-    value: function handleOnEntered() {
-      if (this.props.labelSubmitButton) {
-        this.submitButtonRef.current.focus();
-        this.submitActionsRef.focusVisible();
-      } else if (this.props.labelCancelButton) {
-        this.cancelButtonRef.current.focus();
-        this.cancelActionsRef.focusVisible();
-      }
-    } // Render
-
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          backgroundIcon = _this$props.backgroundIcon,
-          iconSize = _this$props.iconSize,
-          classes = _this$props.classes,
-          content = _this$props.content,
-          labelCancelButton = _this$props.labelCancelButton,
-          labelSubmitButton = _this$props.labelSubmitButton,
-          onCancelClick = _this$props.onCancelClick,
-          onSubmitClick = _this$props.onSubmitClick,
-          open = _this$props.open,
-          cancelColor = _this$props.cancelColor,
-          submitColor = _this$props.submitColor,
-          title = _this$props.title,
-          theme = _this$props.theme,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["backgroundIcon", "iconSize", "classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title", "theme"]);
-      var dialogContent = content;
-
-      if (typeof content === 'string') {
-        dialogContent = _react.default.createElement("span", {
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML: {
-            __html: (0, _helpers.escapeHTML)(content)
-          }
-        });
-      }
+  var bgIcon;
+
+  if (backgroundIcon) {
+    var iconProps = {
+      color: "inherit",
+      className: classes.backgroundIcon
+    };
 
-      return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
-        open: open,
-        onClose: this.handleOnClose,
-        onEntered: this.handleOnEntered,
-        classes: {
-          root: classes.classDialogRoot,
-          paper: classes.classDialogPaper
-        }
-      }, props), backgroundIcon && _react.default.createElement("div", {
-        className: classes.classBackgroundIcon
-      }, _react.default.createElement(_HiIcon.default, {
-        color: "inherit",
-        icon: backgroundIcon,
-        size: iconSize
-      })), title && _react.default.createElement(_DialogTitle.default, {
-        disableTypography: true,
-        classes: {
-          root: classes.classTitle
-        }
-      }, title), _react.default.createElement(_DialogContent.default, null, _react.default.createElement(_DialogContentText.default, {
-        classes: {
-          root: classes.classContent
-        }
-      }, dialogContent)), _react.default.createElement(_DialogActions.default, {
-        classes: {
-          root: classes.classAction
-        }
-      }, labelCancelButton && _react.default.createElement(_HiButton.default, {
-        classes: {
-          root: classes.classCancelButton
-        },
-        onClick: onCancelClick,
-        color: cancelColor,
-        innerRef: this.cancelButtonRef,
-        action: function action(actions) {
-          _this2.cancelActionsRef = actions;
-        }
-      }, labelCancelButton), labelSubmitButton && _react.default.createElement(_HiButton.default, {
-        classes: {
-          root: classes.classSubmitButton
-        },
-        onClick: onSubmitClick,
-        color: submitColor,
-        innerRef: this.submitButtonRef,
-        action: function action(actions) {
-          _this2.submitActionsRef = actions;
-        }
-      }, labelSubmitButton)));
+    if (typeof backgroundIcon === 'string') {
+      bgIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: backgroundIcon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(backgroundIcon) === 'object') {
+      bgIcon = (0, _objectSpread2.default)({}, backgroundIcon);
+      bgIcon.props = (0, _objectSpread2.default)({}, iconProps);
+    }
+  }
+
+  return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
+    open: open,
+    onClose: handleOnClose,
+    onEntered: handleOnEntered,
+    classes: {
+      root: classes.classDialogRoot,
+      paper: classes.classDialogPaper
+    }
+  }, others), bgIcon && _react.default.createElement("div", {
+    className: classes.classBackgroundIcon
+  }, bgIcon), title && _react.default.createElement(_DialogTitle.default, {
+    disableTypography: true,
+    classes: {
+      root: classes.classTitle
+    }
+  }, title), _react.default.createElement(_DialogContent.default, null, _react.default.createElement(_DialogContentText.default, {
+    classes: {
+      root: classes.classContent
     }
-  }]);
-  return HiAlertModal;
-}(_react.default.PureComponent);
+  }, dialogContent)), _react.default.createElement(_DialogActions.default, {
+    classes: {
+      root: classes.classAction
+    }
+  }, labelCancelButton && _react.default.createElement(_HiButton.default, {
+    classes: {
+      root: classes.classCancelButton
+    },
+    onClick: onCancelClick,
+    color: cancelColor,
+    innerRef: cancelButtonRef,
+    action: function action(actions) {
+      thisCancelActionsRef = actions;
+    }
+  }, labelCancelButton), labelSubmitButton && _react.default.createElement(_HiButton.default, {
+    classes: {
+      root: classes.classSubmitButton
+    },
+    onClick: onSubmitClick,
+    color: submitColor,
+    innerRef: submitButtonRef,
+    action: function action(actions) {
+      thisSubmitActionsRef = actions;
+    }
+  }, labelSubmitButton)));
+};
 
 HiAlertModal.defaultProps = {
   content: '',
   cancelColor: 'neutral',
   submitColor: 'primary'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiAlertModal',
-  withTheme: true
-})(HiAlertModal);
-
+var _default = HiAlertModal;
 exports.default = _default;

package/HiCell/CellNumeric.js

@@ -23,10 +23,15 @@ var _styles = require("@material-ui/core/styles");
 
 var _helpers = require("../utils/helpers");
 
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
 var styles = function styles() {
   return {
     wrapper: {
       textAlign: 'right'
+    },
+    button: {
+      padding: '1px 5px'
     }
   };
 };
@@ -56,7 +61,10 @@ function (_React$PureComponent) {
           locale = _this$props.locale,
           currency = _this$props.currency,
           view = _this$props.view,
-          precision = _this$props.precision;
+          precision = _this$props.precision,
+          isButton = _this$props.isButton,
+          onClick = _this$props.onClick,
+          rowId = _this$props.rowId;
       var displayedValue = '';
       var title = '';
 
@@ -68,10 +76,21 @@ function (_React$PureComponent) {
         title = (0, _helpers.formatNumber)(value, 'l', locale, precision);
       }
 
+      var content = displayedValue;
+
+      if (isButton) {
+        content = _react.default.createElement(_HiButton.default, {
+          onClick: onClick(rowId),
+          size: "small",
+          className: classes.button,
+          variant: "text"
+        }, displayedValue);
+      }
+
       return _react.default.createElement("div", {
         className: classes.wrapper,
         title: title
-      }, displayedValue);
+      }, content);
     }
   }]);
   return CellNumeric;

package/HiCell/CellRate.js

@@ -23,7 +23,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _mdiMaterialUi = require("mdi-material-ui");
+var _ArrowBottomRight = _interopRequireDefault(require("mdi-material-ui/ArrowBottomRight"));
+
+var _ArrowTopRight = _interopRequireDefault(require("mdi-material-ui/ArrowTopRight"));
+
+var _Equal = _interopRequireDefault(require("mdi-material-ui/Equal"));
 
 var _helpers = require("../utils/helpers");
 
@@ -102,19 +106,19 @@ function (_React$PureComponent) {
 
       switch (trendchip) {
         case 'equal':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.Equal, {
+          trendIcon = _react.default.createElement(_Equal.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, classes.neutral)
           });
           break;
 
         case 'up':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowTopRight, {
+          trendIcon = _react.default.createElement(_ArrowTopRight.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, isPositive), (0, _defineProperty2.default)(_classNames, classes.negative, !isPositive), _classNames))
           });
           break;
 
         case 'down':
-          trendIcon = _react.default.createElement(_mdiMaterialUi.ArrowBottomRight, {
+          trendIcon = _react.default.createElement(_ArrowBottomRight.default, {
             className: (0, _classnames.default)(classes.trendChipIcon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.positive, !isPositive), (0, _defineProperty2.default)(_classNames2, classes.negative, isPositive), _classNames2))
           });
           break;

package/HiCell/CellText.js

@@ -141,7 +141,8 @@ function (_React$Component) {
           classes = _this$props.classes,
           label = _this$props.label,
           ellipsis = _this$props.ellipsis,
-          color = _this$props.color;
+          color = _this$props.color,
+          title = _this$props.title;
       var start;
       var end;
       var valueElement = '';
@@ -162,7 +163,8 @@ function (_React$Component) {
           valueElement = _react.default.createElement("div", {
             ref: function ref(div) {
               _this2.cellText = div;
-            }
+            },
+            title: title
           }, _react.default.createElement("span", {
             className: classes.rightEllipsisSpan
           }, "".concat(start, " ")), _react.default.createElement("span", {
@@ -177,7 +179,8 @@ function (_React$Component) {
           valueElement = _react.default.createElement("div", {
             ref: function ref(div) {
               _this2.cellText = div;
-            }
+            },
+            title: title
           }, _react.default.createElement("span", {
             className: classes.noEllipsisSpan
           }, start), _react.default.createElement("span", {
@@ -194,7 +197,8 @@ function (_React$Component) {
             className: classes.leftEllipsisSpan,
             style: {
               width: '100%'
-            }
+            },
+            title: title
           }, valueString);
           break;
 
@@ -208,7 +212,8 @@ function (_React$Component) {
             className: classes.rightEllipsisSpan,
             style: {
               width: '100%'
-            }
+            },
+            title: title
           }, valueString);
           break;
       }

package/HiCell/CellTextStyled.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
@@ -45,9 +47,11 @@ var styleButton = {
  * @param label
  * @param color
  * @param isButton
+ * @param onClick
  * @param value
  * @param active
  * @param title
+ * @param align
  * @returns {*}
  * @constructor
  */
@@ -62,7 +66,9 @@ var CellTextStyled = function CellTextStyled(_ref) {
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title;
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'left' : _ref$align;
   var valueString = label ? label.toString() : value.toString();
 
   if (isButton) {
@@ -75,6 +81,16 @@ var CellTextStyled = function CellTextStyled(_ref) {
     }, valueString);
   }
 
+  if (align === 'right') {
+    styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
+      textAlign: 'right'
+    });
+  } else {
+    styleRoot = (0, _objectSpread2.default)({}, styleRoot, {
+      textAlign: 'left'
+    });
+  }
+
   return _react.default.createElement("div", {
     style: styleRoot,
     title: title || valueString
@@ -82,7 +98,8 @@ var CellTextStyled = function CellTextStyled(_ref) {
     style: styleColorLabel,
     label: valueString,
     color: color,
-    active: active
+    active: active,
+    fontSize: 13
   }) : _react.default.createElement("div", {
     style: styleLabel
   }, valueString));

package/HiCheckbox/HiCheckbox.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
@@ -43,7 +45,8 @@ var styles = function styles(theme) {
     root: {
       marginRight: 4,
       marginLeft: 4,
-      padding: 0
+      padding: 0,
+      fontSize: 20
     },
     checked: {},
     checkedPrimary: {
@@ -125,6 +128,23 @@ function (_React$PureComponent) {
         height: size
       }, style);
       var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
+      var checkboxIcon;
+
+      if (icon) {
+        var iconProps = {
+          className: classes.root
+        };
+
+        if (typeof icon === 'string') {
+          checkboxIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+            icon: icon
+          }, iconProps));
+        } else if ((0, _typeof2.default)(icon) === 'object') {
+          checkboxIcon = (0, _objectSpread2.default)({}, icon);
+          checkboxIcon.props = (0, _objectSpread2.default)({}, checkboxIcon.props, {}, iconProps);
+        }
+      }
+
       return _react.default.createElement(_Checkbox.default, (0, _extends2.default)({
         classes: {
           root: classes.root,
@@ -133,13 +153,8 @@ function (_React$PureComponent) {
         },
         style: iconStyles,
         color: hcolor,
-        onChange: this.handleChange
-      }, icon && {
-        icon: _react.default.createElement(_HiIcon.default, {
-          className: classes.root,
-          icon: icon,
-          size: 20
-        })
+        onChange: this.handleChange,
+        icon: checkboxIcon
       }, checkedIcon && {
         checkedIcon: _react.default.createElement(_HiIcon.default, {
           className: classes.root,