@hipay/hipay-material-ui 3.2.3 → 3.4.0

package/HiStepper/DefaultIndicator.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
+
+var _styles = require("@material-ui/core/styles");
+
+/**
+ * Custom style for SvgIcon
+ */
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      width: 20,
+      height: 20
+    }
+  };
+});
+
+var _ref = _react.default.createElement("circle", {
+  cx: "10",
+  cy: "10",
+  r: "2",
+  fill: "white"
+});
+
+var DefaultIndicator = function DefaultIndicator() {
+  var classes = useStyles();
+  return _react.default.createElement(_SvgIcon.default, {
+    className: classes.root,
+    viewBox: "0 0 20 20"
+  }, _ref);
+};
+
+var _default = DefaultIndicator;
+exports.default = _default;

package/HiStepper/HiStep.js

@@ -33,6 +33,8 @@ var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 
 var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
 
+var _DefaultIndicator = _interopRequireDefault(require("./DefaultIndicator"));
+
 /**
  * HiStepIcon used internally by HiStep
  */
@@ -48,10 +50,9 @@ var HiStepIcon = function HiStepIcon(_ref) {
       borderRadius: "50%",
       width: 20,
       height: 20,
-      padding: 2,
       lineHeight: "20px",
       fontWeight: 600,
-      fontSize: 14
+      fontSize: 13
     };
   }, [color]); // get component from status
 
@@ -99,7 +100,7 @@ var useStepButtonStyle = (0, _styles.makeStyles)(function (theme) {
 var useStepContentStyle = (0, _styles.makeStyles)(function (theme) {
   return {
     root: {
-      marginLeft: 11,
+      marginLeft: 9,
       marginTop: 0,
       textAlign: "left",
       borderLeft: "2px solid ".concat(theme.palette.neutral.light)
@@ -117,7 +118,8 @@ var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
   return {
     label: (0, _objectSpread2.default)({}, theme.typography.button, {
       fontWeight: '600 !important',
-      color: "inherit !important"
+      color: "inherit !important",
+      fontSize: '13px'
     }),
     active: {},
     completed: {}
@@ -127,8 +129,7 @@ var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
 var HiStep = _react.default.forwardRef(function (props, ref) {
   var content = props.content,
       disabled = props.disabled,
-      _props$indicator = props.indicator,
-      indicator = _props$indicator === void 0 ? props.index + 1 : _props$indicator,
+      indicator = props.indicator,
       label = props.label,
       onClick = props.onClick,
       status = props.status,
@@ -189,6 +190,11 @@ var HiStep = _react.default.forwardRef(function (props, ref) {
   }, content));
 });
 
-HiStep.defaultProps = {};
+HiStep.defaultProps = {
+  /**
+   * Default indicator
+   */
+  indicator: _react.default.createElement(_DefaultIndicator.default, null)
+};
 var _default = HiStep;
 exports.default = _default;

package/HiStepper/HiStepper.js

@@ -26,7 +26,7 @@ var HiStepConnector = (0, _styles.withStyles)(function (theme) {
       backgroundColor: theme.palette.neutral.light,
       borderRadius: 2,
       width: 2,
-      marginLeft: -1,
+      marginLeft: -3,
       marginTop: -1
     }
   };

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)
   };
 };