@hipay/hipay-material-ui 2.0.0-beta.35 → 2.0.0-beta.37

package/HiForm/HiFormControl.js

@@ -45,6 +45,8 @@ var _HiFormLabel = _interopRequireDefault(require("./HiFormLabel"));
 
 var _helpers = require("../utils/helpers");
 
+var _index = _interopRequireDefault(require("keycode/index"));
+
 // @inheritedComponent FormControl
 var styles = function styles(theme) {
   return {
@@ -145,6 +147,14 @@ function (_React$PureComponent) {
       }
     };
 
+    _this.handleKeyDown = function (event) {
+      var key = (0, _index.default)(event);
+
+      if (['space', 'enter'].includes(key)) {
+        _this.handleHelperClick(event);
+      }
+    };
+
     _this.handleHover = function (value) {
       return function () {
         _this.setState({
@@ -173,6 +183,7 @@ function (_React$PureComponent) {
       hovered: false
     };
     _this.handleHelperClick = _this.handleHelperClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleHover = _this.handleHover.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
@@ -214,7 +225,12 @@ function (_React$PureComponent) {
         className: classes.errorDiv
       }, _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.arrowDown, classes.errorDivArrowDown)
-      }), errorText), helperIcon && helperText && !error && helperOpen && _react.default.createElement("div", {
+      }), _react.default.createElement("span", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: (0, _helpers.escapeHTML)(errorText)
+        }
+      })), helperIcon && helperText && !error && helperOpen && _react.default.createElement("div", {
         className: classes.helperDiv
       }, _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.arrowDown, classes.helperDivArrowDown)
@@ -231,10 +247,14 @@ function (_React$PureComponent) {
         focused: !disabled && (focused || hovered)
       }, InputLabelProps), error && _react.default.createElement(_Warning.default, {
         className: classes.errorIcon,
-        onClick: this.handleHelperClick
+        onClick: this.handleHelperClick,
+        tabIndex: 0,
+        onKeyDown: this.handleKeyDown
       }), helperIcon && helperText && !error && _react.default.createElement(_Info.default, {
         className: (0, _classnames.default)(classes.helperIcon, (0, _defineProperty2.default)({}, classes.helperIconActive, helperOpen)),
-        onClick: this.handleHelperClick
+        onClick: this.handleHelperClick,
+        tabIndex: 0,
+        onKeyDown: this.handleKeyDown
       })), _react.default.createElement("div", {
         onMouseEnter: this.handleHover(true),
         onMouseLeave: this.handleHover(false),

package/HiForm/HiInput.js

@@ -88,8 +88,8 @@ var styles = function styles(theme) {
     startAdornment: {
       color: theme.palette.neutral.main,
       zIndex: 1,
-      marginLeft: 8,
-      marginRight: 16
+      marginLeft: 0,
+      marginRight: 8
     },
     startAdornmentFocus: {
       color: theme.palette.neutral.dark

package/HiIcon/HiIcon.js

@@ -38,7 +38,7 @@ var styles = function styles(theme) {
 
     /* Styles applied to the root element. */
     faIcon: {
-      fontSize: 24
+      fontSize: 20
     },
 
     /* Styles applied to the root element if `color="primary"`. */
@@ -80,11 +80,10 @@ function HiIcon(props) {
       classes = props.classes,
       className = props.className,
       color = props.color,
-      fontSize = props.fontSize,
       icon = props.icon,
       size = props.size,
       theme = props.theme,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color", "fontSize", "icon", "size", "theme"]);
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color", "icon", "size", "theme"]);
   var iconName = icon !== null ? icon : children;
   var isHiColor = ['positive', 'negative', 'middle', 'neutral'].includes(color); // Line Awesome icons
 
@@ -92,7 +91,7 @@ function HiIcon(props) {
     return _react.default.createElement("i", (0, _extends2.default)({
       className: (0, _classnames.default)('fa', iconName, classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], color !== 'inherit'), className),
       style: {
-        fontSize: fontSize !== 'inherit' ? size : 'inherit'
+        fontSize: size
       }
     }, other));
   } // Specific HiPay icons
@@ -102,12 +101,9 @@ function HiIcon(props) {
     var IconName = hiSvgIcons[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName))];
     return _react.default.createElement(IconName, (0, _extends2.default)({
       className: (0, _classnames.default)(classes.root, className),
-      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : theme.palette.primary.main
-    }, fontSize === 'default' ? {
+      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : theme.palette.primary.main,
       width: size,
       height: size
-    } : {
-      fontSize: fontSize
     }, other));
   } // MDI - Material Design Icons - https://materialdesignicons.com
 
@@ -116,26 +112,20 @@ function HiIcon(props) {
     var _IconName = mdi[(0, _helpers.capitalize)((0, _helpers.camelize)(iconName.slice(4)))];
     return _react.default.createElement(_IconName, (0, _extends2.default)({
       className: (0, _classnames.default)(classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], isHiColor), className),
-      color: isHiColor ? 'inherit' : color
-    }, fontSize === 'default' ? {
+      color: isHiColor ? 'inherit' : color,
       style: {
         fontSize: size
       }
-    } : {
-      fontSize: fontSize
     }, other));
   } // @material-ui/icons
 
 
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
     className: (0, _classnames.default)(classes.root, (0, _defineProperty2.default)({}, classes["color".concat((0, _helpers.capitalize)(color))], isHiColor), className),
-    color: isHiColor ? 'inherit' : color
-  }, fontSize === 'default' ? {
+    color: isHiColor ? 'inherit' : color,
     style: {
       fontSize: size
     }
-  } : {
-    fontSize: fontSize
   }, other), iconName);
 }
 
@@ -161,11 +151,6 @@ HiIcon.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   color: _propTypes.default.oneOf(['inherit', 'primary', 'secondary', 'action', 'error', 'disabled', 'positive', 'negative', 'middle', 'neutral']),
 
-  /**
-   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   */
-  fontSize: _propTypes.default.oneOf(['inherit', 'default']),
-
   /**
    * Deprecated use (same as children)
    * The name of the icon font ligature.
@@ -179,9 +164,8 @@ HiIcon.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 HiIcon.defaultProps = {
   color: 'inherit',
-  fontSize: 'default',
   icon: null,
-  size: 24
+  size: 20
 };
 HiIcon.muiName = 'HiIcon';
 

package/HiSelect/HiSelect.js

@@ -72,7 +72,7 @@ var styles = function styles(theme) {
       position: 'relative'
     },
     popper: {
-      width: '100%',
+      width: '100% !important',
       zIndex: 1200
     },
     paper: {

package/HiSelect/HiSuggestSelect.js

@@ -53,10 +53,10 @@ var styles = function styles(theme) {
       width: '100%'
     },
     popper: {
-      width: '100%',
-      transform: 'none',
-      zIndex: 9,
-      top: '100%'
+      width: '100% !important',
+      transform: 'none !important',
+      zIndex: '9 !important',
+      top: '100% !important'
     },
     paper: {
       borderRadius: '0px 2px',
@@ -236,12 +236,12 @@ function (_React$PureComponent) {
         onKeyDown: this.handleKeyDownSearch,
         onBlur: this.handleBlur,
         onFocus: this.handleFocus
-      })), open && _react.default.createElement(_Popper.default, {
+      })), _react.default.createElement(_Popper.default, {
         disablePortal: true,
         anchorEl: this.textInput,
         placement: "bottom-start",
-        eventsEnabled: open,
-        className: classes.popper
+        className: classes.popper,
+        open: true
       }, _react.default.createElement(_Grow.default, {
         in: open,
         id: "menu-list",
@@ -253,7 +253,7 @@ function (_React$PureComponent) {
       }, _react.default.createElement(_HiSelectableList.default, {
         itemList: optionsShown,
         selectedIdList: [],
-        checkbox: false,
+        hideCheckbox: true,
         onSelect: this.handleSelect,
         translations: translations,
         onKeyDown: this.handleKeyDown

package/HiSelectableList/HiSelectableList.js

@@ -33,7 +33,9 @@ var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListIt
 
 var styles = function styles() {
   return {
-    root: {}
+    root: {
+      padding: 0
+    }
   };
 };
 /**

package/HiSelectableList/HiSelectableListItem.js

@@ -47,9 +47,12 @@ var _helpers = require("../utils/helpers");
 
 var styles = function styles(theme) {
   return {
-    root: {},
+    root: {
+      paddingLeft: 4
+    },
     listItem: {
       backgroundColor: theme.palette.background3,
+      color: theme.palette.neutral.dark,
       padding: '5px 0',
       fontWeight: theme.typography.fontWeightRegular,
       maxHeight: 56,
@@ -79,7 +82,6 @@ var styles = function styles(theme) {
       width: '100%'
     },
     disabled: {
-      color: theme.palette.action.disabled,
       fontWeight: theme.typography.fontWeightLight,
       cursor: 'default'
     },
@@ -109,11 +111,12 @@ var styles = function styles(theme) {
       fontWeight: 'inherit',
       width: '100%',
       height: '-webkit-fill-available',
-      padding: '4px 0'
+      padding: '5px 0'
     }),
     label: {
       display: 'inline-block',
-      margin: '1px 0 1px 8px'
+      margin: '1px 0',
+      paddingLeft: 4
     },
     coloredLabel: {
       display: 'inline-flex',
@@ -128,7 +131,7 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
       fontSize: 11,
-      marginLeft: 8
+      marginLeft: 4
     }),
     inline: {},
     info: (0, _extends2.default)({}, theme.typography.b3, {
@@ -144,19 +147,19 @@ var styles = function styles(theme) {
       alignSelf: 'center'
     }),
     checkbox: {
-      width: 20,
-      height: 20,
-      fontSize: 20,
-      margin: '5px 6px 5px 0'
+      marginTop: 3
+    },
+    checkboxWithSecondaryInline: {
+      marginTop: '-8px'
     },
     img: {
       width: 24,
       height: 'auto',
-      margin: '2px 8px',
+      margin: '1px 4px 3px 4px',
       verticalAlign: 'middle'
     },
     icon: {
-      margin: '0 8px',
+      margin: '0 4px',
       verticalAlign: 'middle'
     }
   };
@@ -308,7 +311,9 @@ function (_React$Component) {
       }), !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
         checked: selected,
         checkedIcon: checkedIcon,
-        className: classes.checkbox,
+        classes: {
+          root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
+        },
         color: "primary" // TODO ?
         ,
         disabled: disabled,
@@ -338,9 +343,11 @@ HiSelectableListItem.defaultProps = {
   centered: false,
   disabled: false,
   hideCheckbox: false,
+  hoverIcon: 'check_box_outline_blank',
+  checkedIcon: 'check_box',
   indeterminate: false,
   level: 0,
-  paddingLeft: 16,
+  paddingLeft: 4,
   pinned: false,
   secondaryInline: true,
   selected: false,
@@ -380,7 +387,7 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
    */
-  hoverIcon: _propTypes.default.string,
+  hoverIcon: _propTypes.default.node,
 
   /**
    * Icon affiché lorsque l'item n'est pas sélectionné

package/es/HiAppBar/HiAppBar.js

@@ -53,12 +53,10 @@ class HiAppBar extends React.Component {
   handleCollapse() {
     if (this.props.onCollapse) {
       this.props.onCollapse();
-      console.log('oncollapse');
     } else {
       this.setState(prevState => ({
         collapsed: !prevState.collapsed
       }));
-      console.log('setState');
     }
   }
 

package/es/HiCell/CellAddress.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+export const styles = () => ({
+  rightEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre',
+    width: '100%'
+  }
+});
+/**
+ * Cette cellule permet d'afficher une adresse ou le nom d'un lieu
+ * - si le nom du lieu est défini, on affiche le lieu et la ville
+ * - sinon on affiche la ville et le pays
+ * - tous les champs définis sont affichés dans le tooltip
+ */
+
+class CellAddress extends React.PureComponent {
+  render() {
+    const {
+      classes,
+      streetAddress,
+      name,
+      city,
+      postalCode,
+      view,
+      country,
+      isoCountry
+    } = this.props;
+    const labelItems = (view === 'l' ? [name, city, country] : [name, city, isoCountry]).filter(item => item !== undefined);
+    const label = labelItems && labelItems.length > 0 ? labelItems.join(', ') : '';
+    let title = '';
+    if (name) title += `${name}\n`;
+    if (streetAddress) title += `${streetAddress}\n`;
+    if (city && postalCode) title += `${city}, ${postalCode}\n`;
+    if (city && !postalCode) title += `${city}\n`;
+    if (postalCode && !city) title += `${postalCode}\n`;
+    if (country && isoCountry) title += `${country}, ${isoCountry}`;
+    if (country && !isoCountry) title += country;
+    if (isoCountry && !country) title += isoCountry;
+    return React.createElement("div", {
+      className: classes.rightEllipsisSpan,
+      title: title
+    }, label);
+  }
+
+}
+
+CellAddress.defaultProps = {
+  view: 'l'
+};
+CellAddress.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Ville
+   */
+  city: PropTypes.string,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Pays
+   */
+  country: PropTypes.string,
+
+  /**
+   * Code ISO du pays
+   */
+  isoCountry: PropTypes.string,
+
+  /**
+   * Nom du lieu
+   */
+  name: PropTypes.string,
+
+  /**
+   * Code postal
+   */
+  postalCode: PropTypes.string,
+
+  /**
+   * Numéro et nom de la rue
+   */
+  streetAddress: PropTypes.string,
+
+  /**
+   * View (L/M/S)
+   */
+  view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellAddress'
+})(CellAddress);

package/es/HiCell/CellDate.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import 'moment/locale/fr';
+import withStyles from '../styles/withStyles';
+export const styles = {
+  rightEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre',
+    width: '100%'
+  }
+};
+/**
+ * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
+ */
+
+class CellDate extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.formatLong = 'dddd DD MMMM YYYY HH:mm:ss';
+  }
+
+  render() {
+    const {
+      classes,
+      displayTime,
+      date,
+      locale,
+      view,
+      formatShort
+    } = this.props;
+    if (!date) return '';
+    const mdate = moment(date);
+    mdate.locale(locale);
+    let label;
+
+    if (view === 'l') {
+      label = displayTime ? mdate.format(this.formatLong) : mdate.format(this.formatLong.replace(' HH:mm:ss', ''));
+    } else if (view === 'm') {
+      label = displayTime ? mdate.format(`${formatShort} HH:mm:ss`) : mdate.format(formatShort);
+    } else {
+      label = displayTime ? mdate.format(`${formatShort.replace('YYYY', 'YY')} HH:mm:ss`) : mdate.format(formatShort.replace('YYYY', 'YY'));
+    }
+
+    return React.createElement("div", {
+      className: classes.rightEllipsisSpan
+    }, label);
+  }
+
+}
+
+CellDate.defaultProps = {
+  displayTime: false,
+  formatShort: 'DD/MM/YYYY',
+  locale: 'en',
+  view: 'm'
+};
+CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Date as string
+   */
+  date: PropTypes.string,
+
+  /**
+   * Affiche l'heure
+   */
+  displayTime: PropTypes.bool,
+
+  /**
+   * Format de la date en vue small (ex: DD/MM/YYYY)
+   * @see https://momentjs.com/docs/#/parsing/string-format/
+   */
+  formatShort: PropTypes.string,
+
+  /**
+   * Locale moment
+   */
+  locale: PropTypes.string,
+
+  /**
+   * View (L/M/S)
+   */
+  view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellDate'
+})(CellDate);

package/es/HiCell/CellIcon.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import HiIcon from '../HiIcon';
+export const styles = {
+  icon: {
+    float: 'left'
+  },
+  label: {
+    margin: '4px 0 4px 5px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  wrapper: {
+    maxWidth: '100%',
+    display: 'inline-flex'
+  }
+};
+/**
+ * Cette cellule permet d'afficher une icône et un label (optionnel).
+ * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
+ */
+
+class CellIcon extends React.PureComponent {
+  render() {
+    const {
+      classes,
+      color,
+      icon,
+      label,
+      view
+    } = this.props;
+    return React.createElement("div", {
+      className: classes.wrapper,
+      title: label
+    }, icon && React.createElement(HiIcon, {
+      color: color,
+      className: classes.icon,
+      icon: icon,
+      width: 40,
+      height: 24
+    }), view !== 's' && label && React.createElement("span", {
+      className: classes.label
+    }, label));
+  }
+
+}
+
+CellIcon.defaultProps = {
+  view: 'm',
+  color: 'neutral'
+};
+CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Couleur de l'icône
+   */
+  color: PropTypes.string,
+
+  /**
+   * Icon name [from material-design-icons](https://materialdesignicons.com/)
+   * used by HiIconBuilder
+   */
+  icon: PropTypes.string,
+
+  /**
+   * Label
+   */
+  label: PropTypes.string,
+
+  /**
+   * View (L/M/S)
+   */
+  view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellIcon'
+})(CellIcon);