@hipay/hipay-material-ui 3.3.0 → 3.4.0

package/HiTable/HiCellBuilder.js

@@ -65,141 +65,147 @@ function (_React$PureComponent) {
     _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];
+      if (typeof rowdata[cell.colId] !== 'undefined' || typeof rowdata.datas[cell.colId] !== 'undefined') {
+        var datacell = typeof rowdata[cell.colId] !== 'undefined' ? rowdata[cell.colId] : 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];
+        if (datacell !== null) {
+          if (cell.data !== undefined) {
+            var refproperties = cell.data.find(function (el) {
+              return el.id === datacell.value;
             });
-          } else {
-            datacell = undefined;
-          }
-        }
-
-        if (datacell) {
-          switch (cell.type) {
-            case cst.TYPE_NUMERIC:
-            case cst.TYPE_AMOUNT:
-              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 || 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:
-              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, {
-                align: cell.align,
-                color: datacell.color,
-                icon: datacell.icon,
-                label: datacell.label,
-                onClick: datacell.handleClick,
-                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, {
-                color: datacell.color,
-                label: datacell.label,
-                letter: datacell.label2,
-                active: datacell.active,
-                reviewer: datacell.reviewer,
-                outlined: datacell.outlined
-              });
-
-            case cst.TYPE_SCORE:
-              return _react.default.createElement(_CellSentinelScore.default, {
-                value: datacell.value,
-                result: datacell.result,
-                active: datacell.active
-              });
-
-            case cst.TYPE_PIN_TO_ACTION:
-              return _react.default.createElement(_CellPinToAction.default, {
-                number: datacell.number // eslint-disable-next-line react/jsx-handler-names
-                ,
-                onClick: datacell.onClick
+            if (refproperties) {
+              Object.keys(refproperties).forEach(function (key) {
+                datacell[key] = refproperties[key];
               });
+            } else {
+              datacell = undefined;
+            }
+          }
 
-            case cst.TYPE_ACCOUNT_NUMBER:
-            case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
-            default:
-              return _react.default.createElement(_CellTextStyled.default, {
-                active: datacell.active,
-                color: datacell.color,
-                label: datacell.label,
-                isButton: datacell.isButton,
-                onClick: datacell.handleClick,
-                title: cell.title ? cell.title(datacell, cell) : datacell.title,
-                value: datacell.value
-              });
+          if (datacell) {
+            switch (cell.type) {
+              case cst.TYPE_NUMERIC:
+              case cst.TYPE_AMOUNT:
+                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,
+                  isButton: datacell.isButton,
+                  onClick: datacell.handleClick,
+                  rowId: rowdata.rowId
+                });
+
+              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 || 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:
+                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, {
+                  align: cell.align,
+                  color: datacell.color,
+                  icon: datacell.icon,
+                  label: datacell.label,
+                  onClick: datacell.handleClick,
+                  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, {
+                  color: datacell.color,
+                  label: datacell.label,
+                  letter: datacell.label2,
+                  active: datacell.active,
+                  reviewer: datacell.reviewer,
+                  outlined: datacell.outlined
+                });
+
+              case cst.TYPE_SCORE:
+                return _react.default.createElement(_CellSentinelScore.default, {
+                  value: datacell.value,
+                  result: datacell.result,
+                  active: datacell.active
+                });
+
+              case cst.TYPE_PIN_TO_ACTION:
+                return _react.default.createElement(_CellPinToAction.default, {
+                  number: datacell.number // eslint-disable-next-line react/jsx-handler-names
+                  ,
+                  onClick: datacell.onClick
+                });
+
+              case cst.TYPE_ACCOUNT_NUMBER:
+              case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
+              default:
+                return _react.default.createElement(_CellTextStyled.default, {
+                  active: datacell.active,
+                  color: datacell.color,
+                  label: datacell.label,
+                  isButton: datacell.isButton,
+                  onClick: datacell.handleClick,
+                  title: cell.title ? cell.title(datacell, cell) : datacell.title,
+                  value: datacell.value,
+                  align: cell.align
+                });
+            }
           }
         }
       }

package/HiTable/HiTableBody.js

@@ -43,11 +43,11 @@ function (_React$PureComponent) {
           dense = _this$props.dense,
           locale = _this$props.locale,
           onClick = _this$props.onClick;
-      return _react.default.createElement(_TableBody.default, null, data.map(function (n) {
+      return _react.default.createElement(_TableBody.default, null, data.map(function (n, index) {
         return _react.default.createElement(_HiTableRow.default, {
           columns: columns,
           rowdata: n,
-          key: n.rowId,
+          key: n.rowId || index,
           onClick: onClick,
           dense: dense,
           locale: locale

package/HiTable/HiTableHeader.js

@@ -19,6 +19,8 @@ var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styles = require("@material-ui/core/styles");
@@ -40,14 +42,16 @@ var styles = function styles(theme) {
       cursor: 'inherit',
       borderBottom: "solid 1px ".concat(theme.palette.divider)
     },
-    cell: {
+    cell: (0, _objectSpread2.default)({
       border: 'none',
       paddingRight: '13px',
       paddingLeft: '13px',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap'
-    },
+      whiteSpace: 'nowrap',
+      fontWeight: theme.typography.fontWeightLight,
+      color: '#000000'
+    }, theme.typography.b4),
     icon: {
       color: '#00ADE9'
     }

package/HiTable/HiTableRow.js

@@ -23,6 +23,8 @@ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
@@ -51,14 +53,14 @@ var styles = function styles(theme) {
     clickableRow: {
       cursor: 'pointer'
     },
-    cell: {
+    cell: (0, _objectSpread2.default)({
       border: 'none',
       padding: '0px 13px',
       minHeight: '32px',
       maxHeight: '40px',
       fontWeight: theme.typography.fontWeightRegular,
       lineHeight: 'unset'
-    }
+    }, theme.typography.b3)
   };
 };
 

package/es/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/es/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/es/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/es/HiChip/HiChip.js

@@ -173,6 +173,27 @@ var HiChip = function HiChip(props) {
     }
   }
 
+  var chipLabelIcon;
+
+  if (labelIcon) {
+    var _iconProps = {
+      className: classes.icon,
+      id: "".concat(id, "-labelIcon"),
+      size: iconSize,
+      title: titleIcon,
+      tabIndex: -1
+    };
+
+    if (typeof labelIcon === 'string') {
+      chipLabelIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: labelIcon
+      }, _iconProps));
+    } else if ((0, _typeof2.default)(labelIcon) === 'object') {
+      chipLabelIcon = (0, _objectSpread2.default)({}, labelIcon);
+      chipLabelIcon.props = (0, _objectSpread2.default)({}, _iconProps);
+    }
+  }
+
   return _react.default.createElement("div", {
     id: id,
     role: 'button',
@@ -198,14 +219,7 @@ var HiChip = function HiChip(props) {
       }
     },
     title: titleImg
-  }), labelIcon && _react.default.createElement(_HiIcon.default, {
-    className: (0, _classnames.default)(classes.icon),
-    id: "".concat(id, "-labelIcon"),
-    icon: labelIcon,
-    size: iconSize,
-    title: titleIcon,
-    tabIndex: -1
-  }), onPrevious && _react.default.createElement(_HiIcon.default, {
+  }), labelIcon && chipLabelIcon, onPrevious && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.navigate),
     id: "".concat(id, "-previous"),
     icon: "arrow_left",

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -49,7 +49,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       borderBottom: '1px solid #E3E6E7',
       height: 48,
       minHeight: 48,
-      padding: '0 0 0 8px',
+      padding: 0,
       '&$expanded': {
         minHeight: 48
       }

package/es/HiIconButton/HiIconButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.useStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -24,81 +24,56 @@ var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
 // @inheritedComponent IconButton
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     label: {},
-    positive: {
-      color: theme.palette.positive.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    negative: {
-      color: theme.palette.negative.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    middle: {
-      color: theme.palette.middle.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
+    rootCustomColor: function rootCustomColor(props) {
+      var color;
+
+      if (theme.palette[props.color]) {
+        color = theme.palette[props.color].main;
+      } else if (props.color.charAt(0) === "#") {
+        color = props.color;
       }
-    },
-    neutral: {
-      color: theme.palette.neutral.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
+
+      if (!color) return {};
+      return {
+        color: color,
+        '&:hover': {
+          backgroundColor: (0, _colorManipulator.fade)(color, theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
         }
-      }
+      };
     }
   };
-};
-
-exports.styles = styles;
+});
+exports.useStyles = useStyles;
 
 function HiIconButton(props) {
-  var _classNames;
-
   var children = props.children,
-      classes = props.classes,
       className = props.className,
       color = props.color,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color"]);
-  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
-  var buttonClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.negative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.middle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.neutral, color === 'neutral'), _classNames));
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "color"]);
+  var classes = useStyles(props);
+  var isHexColor = color.charAt(0) === "#";
+  var isExtendedColor = ['positive', 'negative', 'middle', 'neutral'].includes(color);
+  var isCustomColor = isHexColor || isExtendedColor;
+  var rootClassNames = (0, _classnames.default)((0, _defineProperty2.default)({}, classes.rootCustomColor, isCustomColor));
   return _react.default.createElement(_IconButton.default, (0, _extends2.default)({
     className: className,
     classes: {
-      root: buttonClassNames,
+      root: rootClassNames,
       label: classes.label
     },
-    color: hcolor
+    color: isCustomColor ? 'inherit' : color
   }, other), children);
 }
 
 HiIconButton.defaultProps = {
   color: 'default'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiIconButton'
-})(HiIconButton);
-
+var _default = HiIconButton;
 exports.default = _default;