@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.55

package/HiCell/CellImage.js

@@ -41,6 +41,18 @@ var styles = function styles() {
     }
   };
 };
+
+exports.styles = styles;
+
+var handleError = function handleError(fallbackImage) {
+  return function (e) {
+    if (fallbackImage) {
+      e.target.src = "".concat(fallbackImage);
+    } else {
+      e.target.style.display = 'none';
+    }
+  };
+};
 /**
  * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
  * En vue large, aucun tooltip n'est affiché
@@ -48,8 +60,6 @@ var styles = function styles() {
  */
 
 
-exports.styles = styles;
-
 var CellImage =
 /*#__PURE__*/
 function (_React$PureComponent) {
@@ -69,7 +79,8 @@ function (_React$PureComponent) {
           label = _this$props.label,
           shortLabel = _this$props.shortLabel,
           view = _this$props.view,
-          size = _this$props.size;
+          size = _this$props.size,
+          fallbackImage = _this$props.fallbackImage;
       if (!path || path === '') return '';
       return _react.default.createElement("div", {
         className: classes.wrapper,
@@ -78,7 +89,8 @@ function (_React$PureComponent) {
         src: path,
         alt: label,
         className: classes.img,
-        width: size
+        width: size,
+        onError: handleError(fallbackImage)
       }), shortLabel && view === 'm' && _react.default.createElement("span", {
         className: classes.label
       }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && _react.default.createElement("span", {

package/HiCell/CellNumeric.js

@@ -28,8 +28,7 @@ var _helpers = require("../utils/helpers");
 var styles = function styles() {
   return {
     wrapper: {
-      textAlign: 'right',
-      direction: 'rtl'
+      textAlign: 'right'
     }
   };
 };

package/HiCell/CellSentinelScore.js

@@ -39,7 +39,6 @@ var sentinelColorById = {
   AUTHENTICATE: '#484A4B',
   FORCE_AUTHENTICATE: '#20272B',
   PENDING: '#3987AD',
-  TO_BE_REVIEWED: '#FF8F01',
   CHALLENGED: '#FF8F01',
   BLOCKED: '#D50000',
   ALLOWED: '#00AF01',
@@ -65,13 +64,14 @@ function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          active = _this$props.active,
           classes = _this$props.classes,
           result = _this$props.result,
           value = _this$props.value;
       return _react.default.createElement("div", {
         className: classes.flexContent
       }, _react.default.createElement(_HiColoredLabel.default, {
-        active: result === 'TO_BE_REVIEWED',
+        active: active,
         classes: {
           root: classes.label
         },
@@ -84,10 +84,10 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 CellSentinelScore.defaultProps = {
-  active: false,
-  outlined: false
+  active: false
 };
 CellSentinelScore.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: _propTypes.default.bool,
   classes: _propTypes.default.object,
   result: _propTypes.default.string,
   value: _propTypes.default.number

package/HiCell/CellTextStyled.js

@@ -0,0 +1,71 @@
+"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 _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var styleRoot = {
+  width: '100%',
+  height: 19,
+  margin: 'auto 0',
+  display: 'flex',
+  lineHeight: '15px'
+};
+var styleColorLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre'
+};
+var styleLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre',
+  width: '100%'
+};
+/**
+ * CellText functional component
+ * (don't includes complex ellipsis: middle, after-first-word...)
+ *
+ * @param label
+ * @param color
+ * @param value
+ * @param active
+ * @param title
+ * @returns {*}
+ * @constructor
+ */
+
+var CellTextStyled = function CellTextStyled(_ref) {
+  var label = _ref.label,
+      color = _ref.color,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title;
+  var valueString = label ? label.toString() : value.toString();
+  return _react.default.createElement("div", {
+    style: styleRoot,
+    title: title ? title : valueString
+  }, color ? _react.default.createElement(_HiColoredLabel.default, {
+    style: styleColorLabel,
+    label: valueString,
+    color: color,
+    active: active
+  }) : _react.default.createElement("div", {
+    style: styleLabel
+  }, valueString));
+};
+
+var _default = CellTextStyled;
+exports.default = _default;

package/HiCell/index.js

@@ -53,6 +53,12 @@ Object.defineProperty(exports, "CellText", {
     return _CellText.default;
   }
 });
+Object.defineProperty(exports, "CellTextStyled", {
+  enumerable: true,
+  get: function get() {
+    return _CellTextStyled.default;
+  }
+});
 
 var _CellAddress = _interopRequireDefault(require("./CellAddress"));
 
@@ -68,4 +74,6 @@ var _CellRate = _interopRequireDefault(require("./CellRate"));
 
 var _CellSentinel = _interopRequireDefault(require("./CellSentinel"));
 
-var _CellText = _interopRequireDefault(require("./CellText"));
+var _CellText = _interopRequireDefault(require("./CellText"));
+
+var _CellTextStyled = _interopRequireDefault(require("./CellTextStyled"));

package/HiChip/HiChip.js

@@ -82,6 +82,7 @@ var styles = function styles(theme) {
       textOverflow: 'ellipsis'
     },
     prefix: {
+      whiteSpace: 'nowrap',
       color: theme.palette.neutral.dark,
       paddingRight: 4
     },

package/HiDatePicker/HiDateRangePicker.js

@@ -103,9 +103,19 @@ function (_React$Component) {
     };
 
     _this.onDayToClick = function (day) {
-      _this.handleDayChange('to', day);
+      var change = (0, _moment2.default)(day) >= (0, _moment2.default)(_this.props.from);
 
-      document.activeElement.blur();
+      if (change && _this.props.disableFutureDays && (0, _moment2.default)(day) > (0, _moment2.default)()) {
+        change = false;
+      }
+
+      if (change) {
+        console.log((0, _extends2.default)({}, _this.props));
+
+        _this.handleDayChange('to', day);
+
+        document.activeElement.blur();
+      }
     };
 
     _this.handleTimeChange = function (name, date, precision) {

package/HiDatePicker/HiDateRangeSelector.js

@@ -226,7 +226,6 @@ function (_React$Component) {
         this.setState({
           containerWidth: (0, _reactDom.findDOMNode)(this.container).clientWidth - 5
         });
-        this.handleSelectChange('selectedPreset')(undefined, this.state.selectedPreset);
       }
     }
   }, {
@@ -321,8 +320,8 @@ function (_React$Component) {
           root: classes.dateRangePicker
         },
         id: idRange,
-        from: from,
-        to: to,
+        from: selectedPreset ? from : undefined,
+        to: selectedPreset ? to : undefined,
         enableTime: enableTime,
         onChange: onChange,
         toError: toError,
@@ -354,7 +353,6 @@ function (_React$Component) {
 
 HiDateRangeSelector.defaultProps = {
   availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
-  defaultPreset: 'cd',
   enableTime: false,
   returnSelectValue: false,
   staticPosition: false,

package/HiSelect/HiSuggestSelect.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -33,6 +35,8 @@ var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
 
 var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
 
 var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
@@ -62,6 +66,9 @@ var styles = function styles(theme) {
       borderRadius: '0px 2px',
       maxHeight: 440,
       transition: 'none'
+    },
+    alignRight: {
+      right: 0
     }
   };
 };
@@ -195,7 +202,8 @@ function (_React$PureComponent) {
           showNoResults = _this$props.showNoResults,
           onSearch = _this$props.onSearch,
           translations = _this$props.translations,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations"]);
+          align = _this$props.align,
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align"]);
       var _this$state = this.state,
           focused = _this$state.focused,
           options = _this$state.options;
@@ -240,7 +248,7 @@ function (_React$PureComponent) {
         disablePortal: true,
         anchorEl: this.textInput,
         placement: "bottom-start",
-        className: classes.popper,
+        className: (0, _classnames.default)(classes.popper, (0, _defineProperty2.default)({}, classes.alignRight, align === 'right')),
         open: true
       }, _react.default.createElement(_Grow.default, {
         in: open,
@@ -264,6 +272,7 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 HiSuggestSelect.defaultProps = {
+  align: 'left',
   showMinLength: false,
   showNoResults: false,
   translations: {
@@ -273,6 +282,11 @@ HiSuggestSelect.defaultProps = {
   options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Align popper on right or left of container
+   */
+  align: _propTypes.default.oneOf(['left', 'right']),
+
   /**
    * Useful to extend the style applied to components.
    */

package/HiSelectableList/HiSelectableListItem.js

@@ -146,7 +146,9 @@ var styles = function styles(theme) {
       textOverflow: 'ellipsis',
       textAlign: 'right',
       margin: '4px 12px 4px 8px',
-      alignSelf: 'center'
+      alignSelf: 'center',
+      minWidth: '40%',
+      maxWidth: '100%'
     }),
     checkbox: {
       marginTop: 3

package/HiTable/HiCellBuilder.js

@@ -25,25 +25,25 @@ 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 _CellAddress = _interopRequireDefault(require("../HiCell/CellAddress"));
 
-var _CellDate = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellDate"));
+var _CellDate = _interopRequireDefault(require("../HiCell/CellDate"));
 
-var _CellIcon = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellIcon"));
+var _CellIcon = _interopRequireDefault(require("../HiCell/CellIcon"));
 
-var _CellImage = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellImage"));
+var _CellImage = _interopRequireDefault(require("../HiCell/CellImage"));
 
-var _CellNumeric = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellNumeric"));
+var _CellNumeric = _interopRequireDefault(require("../HiCell/CellNumeric"));
 
-var _CellSentinel = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellSentinel"));
+var _CellSentinel = _interopRequireDefault(require("../HiCell/CellSentinel"));
 
-var _CellSentinelScore = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellSentinelScore"));
+var _CellSentinelScore = _interopRequireDefault(require("../HiCell/CellSentinelScore"));
 
-var _CellText = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellText"));
+var _CellTextStyled = _interopRequireDefault(require("../HiCell/CellTextStyled"));
 
-var _CellRate = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellRate"));
+var _CellRate = _interopRequireDefault(require("../HiCell/CellRate"));
 
-var _CellPinToAction = _interopRequireDefault(require("@hipay/hipay-material-ui/HiCell/CellPinToAction"));
+var _CellPinToAction = _interopRequireDefault(require("../HiCell/CellPinToAction"));
 
 var cst = _interopRequireWildcard(require("./constants"));
 
@@ -104,7 +104,8 @@ function (_React$PureComponent) {
                 shortLabel: datacell.id,
                 path: datacell.img,
                 size: datacell.size,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                fallbackImage: datacell.fallbackImage
               });
 
             case cst.TYPE_RATE:
@@ -168,7 +169,8 @@ function (_React$PureComponent) {
             case cst.TYPE_SENTINEL_SCORE:
               return _react.default.createElement(_CellSentinelScore.default, {
                 value: datacell.value,
-                result: datacell.result
+                result: datacell.result,
+                active: datacell.active
               });
 
             case cst.TYPE_PIN_TO_ACTION:
@@ -178,18 +180,13 @@ function (_React$PureComponent) {
               });
 
             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,
+              return _react.default.createElement(_CellTextStyled.default, {
+                active: datacell.active,
                 color: datacell.color,
-                ellipsis: datacell.ellipse,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                label: datacell.label,
+                title: datacell.title,
+                value: datacell.value
               });
           }
         }

package/HiTable/HiTableHeader.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -76,6 +78,8 @@ function (_React$PureComponent) {
   (0, _createClass2.default)(HiTableHeader, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           classes = _this$props.classes,
           columns = _this$props.columns,
@@ -89,28 +93,32 @@ function (_React$PureComponent) {
           whiteSpace: 'nowrap'
         }
       }, Object.keys(columns).map(function (key) {
-        var column = columns[key];
+        var _columns$key = columns[key],
+            colId = _columns$key.colId,
+            type = _columns$key.type,
+            label = _columns$key.label,
+            smallLabel = _columns$key.smallLabel,
+            view = _columns$key.view;
         return _react.default.createElement(_TableCell.default, {
-          key: column.colId,
-          sortDirection: orderBy === column.colId ? order : false,
+          key: colId,
+          sortDirection: orderBy === colId ? order : false,
           style: {
             border: 'none',
-            borderBottom: orderBy === column.colId ? 'solid 1px #00ADE9' : 'none',
+            borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
             paddingRight: '13px',
             paddingLeft: '13px'
           },
-          numeric: !!cst.ALIGN_RIGHT_TYPES.includes(column.type)
-        }, sortable ? _react.default.createElement(_Tooltip.default, {
-          title: "Sort",
-          enterDelay: 300
-        }, _react.default.createElement(_TableSortLabel.default, {
-          active: orderBy === column.colId,
+          numeric: cst.ALIGN_RIGHT_TYPES.includes(type)
+        }, _react.default.createElement(_TableSortLabel.default, (0, _extends2.default)({}, sortable && {
+          active: orderBy === colId,
           direction: order,
-          onClick: this.createSortHandler(column.colId),
+          onClick: _this2.createSortHandler(colId)
+        }, {
           classes: {
             icon: classes.icon
-          }
-        }, column.label)) : column.label);
+          },
+          title: label
+        }), view === 's' ? smallLabel : label));
       }, this)));
     }
   }]);

package/es/HiCell/CellImage.js

@@ -17,12 +17,21 @@ export const styles = () => ({
     alignItems: 'center'
   }
 });
+
+const handleError = fallbackImage => e => {
+  if (fallbackImage) {
+    e.target.src = `${fallbackImage}`;
+  } else {
+    e.target.style.display = 'none';
+  }
+};
 /**
  * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
  * En vue large, aucun tooltip n'est affiché
  * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
  */
 
+
 class CellImage extends React.PureComponent {
   render() {
     const {
@@ -31,7 +40,8 @@ class CellImage extends React.PureComponent {
       label,
       shortLabel,
       view,
-      size
+      size,
+      fallbackImage
     } = this.props;
     if (!path || path === '') return '';
     return React.createElement("div", {
@@ -41,7 +51,8 @@ class CellImage extends React.PureComponent {
       src: path,
       alt: label,
       className: classes.img,
-      width: size
+      width: size,
+      onError: handleError(fallbackImage)
     }), shortLabel && view === 'm' && React.createElement("span", {
       className: classes.label
     }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && React.createElement("span", {

package/es/HiCell/CellNumeric.js

@@ -4,8 +4,7 @@ import withStyles from '../styles/withStyles';
 import { formatNumber, formatCurrencyAmount } from '../utils/helpers';
 export const styles = () => ({
   wrapper: {
-    textAlign: 'right',
-    direction: 'rtl'
+    textAlign: 'right'
   }
 });
 /**

package/es/HiCell/CellSentinelScore.js

@@ -15,7 +15,6 @@ export const sentinelColorById = {
   AUTHENTICATE: '#484A4B',
   FORCE_AUTHENTICATE: '#20272B',
   PENDING: '#3987AD',
-  TO_BE_REVIEWED: '#FF8F01',
   CHALLENGED: '#FF8F01',
   BLOCKED: '#D50000',
   ALLOWED: '#00AF01',
@@ -28,6 +27,7 @@ export const sentinelColorById = {
 class CellSentinelScore extends React.PureComponent {
   render() {
     const {
+      active,
       classes,
       result,
       value
@@ -35,7 +35,7 @@ class CellSentinelScore extends React.PureComponent {
     return React.createElement("div", {
       className: classes.flexContent
     }, React.createElement(HiColoredLabel, {
-      active: result === 'TO_BE_REVIEWED',
+      active: active,
       classes: {
         root: classes.label
       },
@@ -47,10 +47,10 @@ class CellSentinelScore extends React.PureComponent {
 }
 
 CellSentinelScore.defaultProps = {
-  active: false,
-  outlined: false
+  active: false
 };
 CellSentinelScore.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: PropTypes.bool,
   classes: PropTypes.object,
   result: PropTypes.string,
   value: PropTypes.number

package/es/HiCell/CellTextStyled.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import HiColoredLabel from '../HiColoredLabel';
+const styleRoot = {
+  width: '100%',
+  height: 19,
+  margin: 'auto 0',
+  display: 'flex',
+  lineHeight: '15px'
+};
+const styleColorLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre'
+};
+const styleLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre',
+  width: '100%'
+};
+/**
+ * CellText functional component
+ * (don't includes complex ellipsis: middle, after-first-word...)
+ *
+ * @param label
+ * @param color
+ * @param value
+ * @param active
+ * @param title
+ * @returns {*}
+ * @constructor
+ */
+
+const CellTextStyled = ({
+  label,
+  color,
+  value = '',
+  active = false,
+  title = ''
+}) => {
+  const valueString = label ? label.toString() : value.toString();
+  return React.createElement("div", {
+    style: styleRoot,
+    title: title ? title : valueString
+  }, color ? React.createElement(HiColoredLabel, {
+    style: styleColorLabel,
+    label: valueString,
+    color: color,
+    active: active
+  }) : React.createElement("div", {
+    style: styleLabel
+  }, valueString));
+};
+
+export default CellTextStyled;

package/es/HiCell/index.js

@@ -5,4 +5,5 @@ export { default as CellImage } from './CellImage';
 export { default as CellNumeric } from './CellNumeric';
 export { default as CellRate } from './CellRate';
 export { default as CellSentinel } from './CellSentinel';
-export { default as CellText } from './CellText';
+export { default as CellText } from './CellText';
+export { default as CellTextStyled } from './CellTextStyled';

package/es/HiChip/HiChip.js

@@ -63,6 +63,7 @@ export const styles = theme => ({
     textOverflow: 'ellipsis'
   },
   prefix: {
+    whiteSpace: 'nowrap',
     color: theme.palette.neutral.dark,
     paddingRight: 4
   },

package/es/HiDatePicker/HiDateRangePicker.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import MomentLocaleUtils from 'react-day-picker/moment';
@@ -56,8 +56,17 @@ class HiDateRangePicker extends React.Component {
     };
 
     this.onDayToClick = day => {
-      this.handleDayChange('to', day);
-      document.activeElement.blur();
+      let change = moment(day) >= moment(this.props.from);
+
+      if (change && this.props.disableFutureDays && moment(day) > moment()) {
+        change = false;
+      }
+
+      if (change) {
+        console.log(_objectSpread({}, this.props));
+        this.handleDayChange('to', day);
+        document.activeElement.blur();
+      }
     };
 
     this.handleTimeChange = (name, date, precision) => {