@hipay/hipay-material-ui 3.2.2 → 3.3.0

package/HiIcon/HiIcon.js

@@ -27,8 +27,6 @@ var _helpers = require("../utils/helpers");
 
 var hiSvgIcons = _interopRequireWildcard(require("../hi-svg-icons"));
 
-var mdi = _interopRequireWildcard(require("mdi-material-ui"));
-
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     /* Styles applied to the root element. */
@@ -56,15 +54,12 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
       color = props.color,
       other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "icon", "size", "color"]);
   var classes = useStyles(props);
-  var theme = (0, _styles.useTheme)();
   var iconName = icon !== null ? icon : children;
   var iconType = (0, _react.useMemo)(function () {
     if (iconName && iconName.indexOf('fa-') === 0) {
       return "line_awesome";
     } else if (iconName && iconName.indexOf('hi_') === 0) {
       return "hipay";
-    } else if (iconName && iconName.indexOf('mdi_') === 0) {
-      return "mdi";
     } else {
       return "mui";
     }
@@ -89,19 +84,9 @@ var HiIcon = _react.default.forwardRef(function (props, ref) {
         size: size
       }, other));
 
-    case "mdi":
-      var MdiIconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
-      return _react.default.createElement(MdiIconName, (0, _extends2.default)({
-        ref: ref,
-        className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),
-        color: "inherit",
-        style: {
-          fontSize: size
-        }
-      }, other));
-
     case "mui":
     default:
+      // console.log({ ...props });
       return _react.default.createElement(_Icon.default, (0, _extends2.default)({
         ref: ref,
         className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, classes.root, color !== "inherit")),

package/HiListItemLink/HiListItemLink.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+
+var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
+
+var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
+
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+
+var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+
+var _RemoveCircle = _interopRequireDefault(require("@material-ui/icons/RemoveCircle"));
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: function root(props) {
+      return {
+        color: props.disabled ? theme.palette.neutral.light : "initial",
+        display: "flex",
+        height: 48,
+        padding: 12,
+        "&:hover": {
+          backgroundColor: props.disabled ? "none" : "#E6F9FD",
+          cursor: props.disabled ? "cursor" : "pointer"
+        },
+        "&:not(:last-child)": {
+          borderBottom: "1px solid #E0E0E0"
+        },
+        // margin between children (unless last span for ripple effect)
+        "& > :not(span)": {
+          marginLeft: 12
+        },
+        "& > div": {
+          display: "block",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          alignSelf: "center",
+          minWidth: "5%"
+        }
+      };
+    },
+    primary: function primary(props) {
+      return {
+        fontSize: "14px",
+        textTransform: "uppercase",
+        flex: props.secondary ? "initial" : 1 // expand primary text unless there is secondary
+
+      };
+    },
+    secondary: {
+      alignSelf: "center",
+      color: theme.palette.neutral.light,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: 11,
+      flex: 1
+    },
+    info: {
+      color: theme.palette.neutral.light,
+      fontFamily: theme.typography.fontFamily
+    }
+  };
+});
+
+var StatusIcon = function StatusIcon(_ref) {
+  var disabled = _ref.disabled,
+      status = _ref.status;
+  var theme = (0, _styles.useTheme)();
+  var Icon, color;
+
+  switch (status) {
+    case "done":
+      Icon = _CheckCircle.default;
+      color = theme.palette.positive.main;
+      break;
+
+    case "error":
+      Icon = _Cancel.default;
+      color = theme.palette.negative.main;
+      break;
+
+    case "warning":
+      Icon = _Error.default;
+      color = theme.palette.middle.main;
+      break;
+
+    case "in_progress":
+      Icon = _RemoveCircle.default;
+      color = theme.palette.primary.main;
+      break;
+
+    default:
+      return null;
+  }
+
+  if (disabled) {
+    color = theme.palette.neutral.light;
+  }
+
+  return _react.default.createElement(Icon, {
+    htmlColor: color
+  });
+};
+
+var _ref2 = _react.default.createElement(_ArrowRight.default, null);
+
+var HiListItemLink = _react.default.forwardRef(function (props, ref) {
+  var disabled = props.disabled,
+      info = props.info,
+      primary = props.primary,
+      secondary = props.secondary,
+      status = props.status,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "info", "primary", "secondary", "status"]);
+  var classes = useStyles(props);
+  return _react.default.createElement(_ListItem.default, (0, _extends2.default)({
+    ref: ref,
+    className: classes.root,
+    button: true,
+    disableGutters: true,
+    disabled: disabled
+  }, others), _react.default.createElement("div", {
+    className: classes.primary
+  }, primary), secondary && _react.default.createElement("div", {
+    className: classes.secondary
+  }, secondary), info && _react.default.createElement("div", {
+    className: classes.info
+  }, info), status && _react.default.createElement(StatusIcon, {
+    disabled: disabled,
+    status: status
+  }), _ref2);
+});
+
+HiListItemLink.defaultProps = {};
+var _default = HiListItemLink;
+exports.default = _default;

package/HiListItemLink/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiListItemLink.default;
+  }
+});
+
+var _HiListItemLink = _interopRequireDefault(require("./HiListItemLink"));

package/HiSelectableList/HiSelectableListItem.js

@@ -11,6 +11,10 @@ exports.default = exports.useStyles = exports.useItemLabelStyles = void 0;
 
 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 _react = _interopRequireWildcard(require("react"));
@@ -206,10 +210,14 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: '1px 4px 3px 4px',
       verticalAlign: 'middle'
     },
-    icon: {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1),
-      verticalAlign: 'middle'
+    icon: function icon(props) {
+      return {
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        verticalAlign: 'middle',
+        color: props.selected && props.color ? props.color : 'inherit',
+        fontSize: 20
+      };
     },
     labelContent: {
       display: '-webkit-flex',
@@ -273,7 +281,7 @@ function HiSelectableListItem(props) {
       item = props.item;
   var classes = useStyles(props);
   var ref = (0, _react.useRef)(null);
-  var isHovering = (0, _reactUse.useHoverDirty)(ref);
+  var isHovering = !!hoverIcon ? (0, _reactUse.useHoverDirty)(ref) : false;
   var onKeyDown = (0, _react.useCallback)(function (_ref) {
     var code = _ref.code;
 
@@ -302,6 +310,24 @@ function HiSelectableListItem(props) {
   }
 
   var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+  var itemIcon;
+
+  if (displayedIcon) {
+    var iconProps = {
+      className: classes.icon,
+      color: selected && color ? color : 'inherit'
+    };
+
+    if (typeof displayedIcon === 'string') {
+      itemIcon = _react.default.createElement(_HiIcon.default, (0, _extends2.default)({
+        icon: displayedIcon
+      }, iconProps));
+    } else if ((0, _typeof2.default)(icon) === 'object') {
+      itemIcon = (0, _objectSpread2.default)({}, displayedIcon);
+      itemIcon.props = (0, _objectSpread2.default)({}, itemIcon.props, {}, iconProps);
+    }
+  }
+
   return _react.default.createElement(ListItemComponentName, {
     ref: ref,
     id: id,
@@ -327,7 +353,7 @@ function HiSelectableListItem(props) {
     checkedIcon: checkedIcon // color={disabled ? 'inherit' : 'primary'}
     ,
     disabled: disabled,
-    icon: displayedIcon,
+    icon: itemIcon,
     indeterminate: indeterminate,
     indeterminateIcon: indeterminateIcon
   }), type === 'image' && img && _react.default.createElement("img", {
@@ -344,11 +370,7 @@ function HiSelectableListItem(props) {
   }), _react.default.createElement("div", {
     className: (0, _classnames.default)(classes.listItemContent, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.centered, centered), (0, _defineProperty2.default)(_classNames3, classes.highlight, type === 'highlight'), (0, _defineProperty2.default)(_classNames3, classes.primaryHighlight, type === 'primary-highlight'), (0, _defineProperty2.default)(_classNames3, classes.listItemContentSelected, selected && color), _classNames3)),
     "data-id": id
-  }, icon && hideCheckbox && _react.default.createElement(_HiIcon.default, {
-    icon: icon,
-    className: classes.icon,
-    color: selected && color ? color : 'inherit'
-  }), _react.default.createElement(ItemLabel, {
+  }, itemIcon && hideCheckbox && itemIcon, _react.default.createElement(ItemLabel, {
     color: color,
     label: label,
     labelHighlight: labelHighlight,

package/HiStepper/DefaultIndicator.js

@@ -0,0 +1,26 @@
+"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 _ref = _react.default.createElement(_SvgIcon.default, null, _react.default.createElement("circle", {
+  cx: "10",
+  cy: "10",
+  r: "3",
+  fill: "white"
+}));
+
+var DefaultIndicator = function DefaultIndicator() {
+  return _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
  */
@@ -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/HiTable/HiCellBuilder.js

@@ -85,6 +85,7 @@ function (_React$PureComponent) {
         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],

package/HiTable/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
+exports.ALIGN_RIGHT_TYPES = exports.DEFAULT_PADDING = exports.DEFAULT_VIEWS = exports.DEFAULT_WIDTHS = exports.FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_FORCE_AUTHENTICATE = exports.FRAUD_RESULT_PENDING = exports.FRAUD_RESULT_CHALLENGED = exports.FRAUD_RESULT_BLOCKED = exports.FRAUD_RESULT_ACCEPTED = exports.ELLIPSIS_RIGHT = exports.ELLIPSIS_NAME = exports.ELLIPSIS_MIDDLE = exports.ELLIPSIS_LEFT = exports.ELLIPSIS_AFTER_FIRST_WORD = exports.NO_EVOLUTION = exports.EVOLUTION_DOWN = exports.EVOLUTION_UP = exports.VIEWS = exports.TYPE_PIN_TO_ACTION = exports.TYPE_THIRD_PARTY_SECURITY = exports.TYPE_TEXT = exports.TYPE_COUNTRY = exports.TYPE_STATUS = exports.TYPE_SCORE = exports.TYPE_SENTINEL = exports.TYPE_RATE = exports.TYPE_NUMERIC = exports.TYPE_IMAGE = exports.TYPE_ICON = exports.TYPE_DATE = exports.TYPE_CHECKBOX = exports.TYPE_ADDRESS = exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = exports.TYPE_AMOUNT = exports.TYPE_ACCOUNT_NUMBER = exports.TYPE_ACCOUNT = exports.CELL_HEADER_HEIGHT_DENSE = exports.CELL_HEADER_HEIGHT = exports.CELL_HEIGHT_DENSE = exports.CELL_HEIGHT = exports.NB_ROWS_BACK_TO_TOP = exports.MAX_ROWS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
@@ -39,6 +39,8 @@ var TYPE_ACCOUNT = 'account';
 exports.TYPE_ACCOUNT = TYPE_ACCOUNT;
 var TYPE_ACCOUNT_NUMBER = 'account_number';
 exports.TYPE_ACCOUNT_NUMBER = TYPE_ACCOUNT_NUMBER;
+var TYPE_AMOUNT = 'amount';
+exports.TYPE_AMOUNT = TYPE_AMOUNT;
 var TYPE_CUSTOMER_ACCOUNT_NUMBER = 'customer_account_number';
 exports.TYPE_CUSTOMER_ACCOUNT_NUMBER = TYPE_CUSTOMER_ACCOUNT_NUMBER;
 var TYPE_ADDRESS = 'address';
@@ -131,7 +133,7 @@ var DEFAULT_WIDTHS = (_DEFAULT_WIDTHS = {}, (0, _defineProperty2.default)(_DEFAU
  */
 
 exports.DEFAULT_WIDTHS = DEFAULT_WIDTHS;
-var DEFAULT_VIEWS = (_DEFAULT_VIEWS = {}, (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ACCOUNT, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ACCOUNT_NUMBER, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ADDRESS, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_CHECKBOX, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_COUNTRY, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_DATE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ICON, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_IMAGE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_NUMERIC, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_RATE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_SENTINEL, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_SCORE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_STATUS, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_TEXT, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_THIRD_PARTY_SECURITY, VIEWS.LARGE), _DEFAULT_VIEWS);
+var DEFAULT_VIEWS = (_DEFAULT_VIEWS = {}, (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ACCOUNT, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ACCOUNT_NUMBER, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_AMOUNT, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ADDRESS, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_CHECKBOX, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_COUNTRY, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_DATE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_ICON, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_IMAGE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_NUMERIC, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_RATE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_SENTINEL, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_SCORE, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_STATUS, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_TEXT, VIEWS.LARGE), (0, _defineProperty2.default)(_DEFAULT_VIEWS, TYPE_THIRD_PARTY_SECURITY, VIEWS.LARGE), _DEFAULT_VIEWS);
 /**
  * Cell default side padding (one side) for each views
  * @type {{}}
@@ -145,5 +147,5 @@ var DEFAULT_PADDING = (_DEFAULT_PADDING = {}, (0, _defineProperty2.default)(_DEF
  */
 
 exports.DEFAULT_PADDING = DEFAULT_PADDING;
-var ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL, TYPE_SCORE];
+var ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_AMOUNT, TYPE_RATE, TYPE_SENTINEL, TYPE_SCORE];
 exports.ALIGN_RIGHT_TYPES = ALIGN_RIGHT_TYPES;