@hipay/hipay-material-ui 2.0.0-beta.36 → 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/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,7 +47,9 @@ 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,
@@ -113,7 +115,8 @@ var styles = function styles(theme) {
     }),
     label: {
       display: 'inline-block',
-      margin: '1px 0'
+      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,
       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'
     }
   };
@@ -303,13 +306,13 @@ function (_React$Component) {
         onMouseLeave: this.setHover(false)
       }, {
         style: {
-          paddingLeft: "".concat(level * 32, "px")
+          paddingLeft: "".concat(paddingLeft + level * 32, "px")
         }
       }), !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
         checked: selected,
         checkedIcon: checkedIcon,
         classes: {
-          root: classes.checkbox
+          root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
         },
         color: "primary" // TODO ?
         ,
@@ -344,7 +347,7 @@ HiSelectableListItem.defaultProps = {
   checkedIcon: 'check_box',
   indeterminate: false,
   level: 0,
-  paddingLeft: 0,
+  paddingLeft: 4,
   pinned: false,
   secondaryInline: true,
   selected: false,

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

package/es/HiCell/CellImage.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+export const styles = () => ({
+  img: {
+    height: 'auto',
+    float: 'left'
+  },
+  label: {
+    marginLeft: 5,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+/**
+ * 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 {
+      classes,
+      path,
+      label,
+      shortLabel,
+      view,
+      size
+    } = this.props;
+    if (!path || path === '') return '';
+    return React.createElement("div", {
+      className: classes.wrapper,
+      title: label
+    }, React.createElement("img", {
+      src: path,
+      alt: label,
+      className: classes.img,
+      width: size
+    }), shortLabel && view === 'm' && React.createElement("span", {
+      className: classes.label
+    }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && React.createElement("span", {
+      className: classes.label
+    }, label));
+  }
+
+}
+
+CellImage.defaultProps = {
+  size: 24,
+  view: 's'
+};
+CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Label
+   */
+  label: PropTypes.string,
+
+  /**
+   * Image path
+   */
+  path: PropTypes.string,
+
+  /**
+   * Short label
+   */
+  shortLabel: PropTypes.string,
+
+  /**
+   * Image size
+   */
+  size: PropTypes.number,
+
+  /**
+   * View (L/M/S)
+   */
+  view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellImage'
+})(CellImage);

package/es/HiCell/CellNumeric.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import { formatNumber, formatCurrencyAmount } from '../utils/helpers';
+export const styles = () => ({
+  wrapper: {
+    textAlign: 'right',
+    direction: 'rtl'
+  }
+});
+/**
+ * Cette cellule permet d'afficher un volume ou un montant avec devise
+ */
+
+class CellNumeric extends React.PureComponent {
+  render() {
+    const {
+      classes,
+      value,
+      locale,
+      currency,
+      view,
+      precision
+    } = this.props;
+    let displayedValue = '';
+    let title = '';
+
+    if (currency) {
+      displayedValue = formatCurrencyAmount(value, view, locale, currency);
+      title = formatCurrencyAmount(value, 'l', locale, currency);
+    } else {
+      displayedValue = formatNumber(value, view, locale, precision);
+      title = formatNumber(value, 'l', locale);
+    }
+
+    return React.createElement("div", {
+      className: classes.wrapper,
+      title: title
+    }, displayedValue);
+  }
+
+}
+
+CellNumeric.defaultProps = {
+  view: 'm'
+};
+CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Code de la devise (ISO 4217)
+   */
+  currency: PropTypes.string,
+
+  /**
+   * Locale BCP 47
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Nombre de chiffres après la virgule
+   */
+  precision: PropTypes.number,
+
+  /**
+   * Volume/Amount
+   */
+  value: PropTypes.number.isRequired,
+
+  /**
+   * View (L/M/S)
+   */
+  view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellNumeric'
+})(CellNumeric);