@hipay/hipay-material-ui 2.0.0-beta.68 → 2.0.0-beta.70

package/HiTable/HiCellBuilder.js

@@ -150,6 +150,7 @@ function (_React$PureComponent) {
                 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
               });
@@ -194,6 +195,8 @@ function (_React$PureComponent) {
                 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
               });
@@ -211,15 +214,12 @@ function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          className = _this$props.className,
           column = _this$props.column,
           data = _this$props.data,
           locale = _this$props.locale;
       return _react.default.createElement(_TableCell.default, {
-        style: {
-          border: 'none',
-          paddingRight: '13px',
-          paddingLeft: '13px'
-        }
+        className: className
       }, this.createCell(column, data, locale));
     }
   }]);
@@ -227,6 +227,11 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 HiCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Override TableCell style
+   */
+  className: _propTypes.default.object,
+
   /**
    * Propriétés de la colonne
    */

package/HiTable/HiTableHeader.js

@@ -36,13 +36,21 @@ var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSor
 var cst = _interopRequireWildcard(require("./constants"));
 
 // @inheritedComponent TableHeader
-var styles = {
-  icon: {
-    color: '#00ADE9'
-  },
-  headerRoot: {
-    cursor: 'inherit'
-  }
+var styles = function styles(theme) {
+  return {
+    head: {
+      cursor: 'inherit',
+      borderBottom: "solid 1px ".concat(theme.palette.divider)
+    },
+    cell: {
+      border: 'none',
+      paddingRight: '13px',
+      paddingLeft: '13px'
+    },
+    icon: {
+      color: '#00ADE9'
+    }
+  };
 };
 
 var HiTableHeader =
@@ -84,7 +92,9 @@ function (_React$PureComponent) {
           orderBy = _this$props.orderBy,
           sortable = _this$props.sortable,
           dense = _this$props.dense;
-      return _react.default.createElement(_TableHead.default, null, _react.default.createElement(_TableRow.default, {
+      return _react.default.createElement(_TableHead.default, {
+        className: classes.head
+      }, _react.default.createElement(_TableRow.default, {
         style: {
           height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
           whiteSpace: 'nowrap'
@@ -100,13 +110,8 @@ function (_React$PureComponent) {
         var finalLabel = view === 's' ? smallLabel : label;
         return _react.default.createElement(_TableCell.default, {
           key: colId,
+          className: classes.cell,
           sortDirection: orderBy === colId ? order : false,
-          style: {
-            border: 'none',
-            borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
-            paddingRight: '13px',
-            paddingLeft: '13px'
-          },
           numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
           title: headerTooltip
         }, sortable ? _react.default.createElement(_TableSortLabel.default, {

package/HiTable/HiTableRow.js

@@ -46,15 +46,18 @@ var styles = function styles(theme) {
       '&:last-child': {
         borderBottom: 'solid 1px #E4E7E8'
       },
-      '&:first-child': {
-        borderTop: 'solid 1px #E4E7E8'
-      },
       '&:hover, &:focus': {
         backgroundColor: "".concat(theme.palette.action.hover, " !important")
       }
     },
     clickableRow: {
       cursor: 'pointer'
+    },
+    cell: {
+      border: 'none',
+      padding: '0px 13px',
+      minHeight: '32px',
+      maxHeight: '40px'
     }
   };
 };
@@ -115,6 +118,7 @@ function (_React$PureComponent) {
       }, Object.keys(columns).map(function (column) {
         return _react.default.createElement(_HiCellBuilder.default, {
           key: columns[column].colId,
+          className: classes.cell,
           column: columns[column],
           data: rowdata,
           locale: locale

package/es/HiCell/CellIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from '../styles/withStyles';
 import HiIcon from '../HiIcon';
+import HiIconButton from '../HiIconButton';
 export const styles = {
   icon: {
     float: 'left'
@@ -29,13 +30,36 @@ class CellIcon extends React.PureComponent {
       color,
       icon,
       label,
-      view,
-      size
+      onClick,
+      size,
+      view
     } = this.props;
+
+    if (onClick) {
+      return React.createElement("div", {
+        className: classes.wrapper,
+        title: label
+      }, React.createElement(HiIconButton, {
+        color: 'inherit',
+        style: {
+          color,
+          fontSize: size || 24,
+          maxHeight: 31,
+          maxWidth: 31
+        },
+        onClick: onClick
+      }, React.createElement(HiIcon, {
+        className: classes.icon,
+        icon: icon
+      }), view !== 's' && label && React.createElement("span", {
+        className: classes.label
+      }, label)));
+    }
+
     return React.createElement("div", {
       className: classes.wrapper,
       title: label
-    }, icon && React.createElement(HiIcon, {
+    }, React.createElement(HiIcon, {
       color: 'inherit',
       style: {
         color,
@@ -76,6 +100,11 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   label: PropTypes.string,
 
+  /**
+   * Fonction déclenchée lors du clic
+   */
+  onClick: PropTypes.func,
+
   /**
    * View (L/M/S)
    */

package/es/HiCell/CellRate.js

@@ -12,7 +12,7 @@ export const styles = theme => ({
     overflow: 'hidden',
     position: 'relative',
     textAlign: 'right',
-    paddingTop: 10
+    maxHeight: '32px'
   },
   trendChipIcon: {
     width: 14,

package/es/HiCell/CellTextStyled.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiColoredLabel from '../HiColoredLabel';
+import HiButton from '../HiButton';
 const styleRoot = {
   width: '100%',
   height: 19,
@@ -21,12 +22,18 @@ const styleLabel = {
   whiteSpace: 'pre',
   width: '100%'
 };
+const styleButton = {
+  padding: '1px 5px',
+  minHeight: '18px',
+  maxHeight: '18px'
+};
 /**
  * CellText functional component
  * (don't includes complex ellipsis: middle, after-first-word...)
  *
  * @param label
  * @param color
+ * @param isButton
  * @param value
  * @param active
  * @param title
@@ -37,11 +44,24 @@ const styleLabel = {
 const CellTextStyled = ({
   label,
   color,
+  isButton,
+  onClick,
   value = '',
   active = false,
   title = ''
 }) => {
   const valueString = label ? label.toString() : value.toString();
+
+  if (isButton) {
+    return React.createElement(HiButton, {
+      color: color,
+      onClick: onClick,
+      size: "small",
+      style: styleButton,
+      variant: "raised"
+    }, valueString);
+  }
+
   return React.createElement("div", {
     style: styleRoot,
     title: title || valueString
@@ -66,11 +86,21 @@ CellTextStyled.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   color: PropTypes.string,
 
+  /**
+   * Définit si la cellule de text
+   */
+  isButton: PropTypes.bool,
+
   /**
    * Label
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
+  /**
+   * Fonction déclenchée lors du clic
+   */
+  onClick: PropTypes.func,
+
   /**
    * Tooltip
    */

package/es/HiChip/HiChipSwitch.js

@@ -202,7 +202,7 @@ class HiChipSwitch extends React.PureComponent {
 }
 
 HiChipSwitch.defaultProps = {
-  active: true,
+  active: false,
   activeIcon: 'check',
   selection: null,
   selectionTitle: ''

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import HiIcon from './../HiIcon';
 import withStyles from '../styles/withStyles';
 import classNames from 'classnames';
 export const styles = theme => ({
@@ -33,20 +33,28 @@ export const styles = theme => ({
     pointerEvents: 'none'
   },
   heading: _objectSpread({}, theme.typography.b1, {
+    height: 48,
+    display: 'flex',
+    alignItems: 'center',
     fontSize: 20,
     lineHeight: '24px',
     fontWeight: theme.typography.fontWeightLight
   }),
   secondaryHeading: _objectSpread({}, theme.typography.b3, {
     color: theme.palette.neutral.light,
+    height: 48,
+    display: 'flex',
+    alignItems: 'center',
     fontSize: 11,
     lineHeight: '24px',
     float: 'right',
     marginRight: 32,
     '&>svg': {
       fontSize: 18,
-      marginLeft: 3,
-      marginBottom: -5
+      marginLeft: 3
+    },
+    "&>button": {
+      marginRight: -12
     }
   }),
   panel: {
@@ -67,7 +75,10 @@ export const styles = theme => ({
   }
 });
 
-var _ref = React.createElement(ExpandMoreIcon, null);
+var _ref = React.createElement(HiIcon, {
+  icon: "mdi_menu_up",
+  size: 24
+});
 
 class HiExpansionPanel extends React.PureComponent {
   render() {

package/es/HiForm/HiInput.js

@@ -19,7 +19,7 @@ export const styles = theme => ({
     },
     width: '100%',
     // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
-    '&:not($error)': {
+    '&:$error': {
       marginTop: 1
     }
   }),
@@ -292,7 +292,8 @@ class HiInput extends React.PureComponent {
       inputClassName,
       onReset,
       spellcheck,
-      startAdornmentColor
+      startAdornmentColor,
+      inputProps
     } = this.props;
     const {
       focused
@@ -385,13 +386,13 @@ class HiInput extends React.PureComponent {
           this.endAdornmentNode = el;
         }
       }, eraseIcon, endAdornment),
-      inputProps: {
+      inputProps: _objectSpread({
         spellCheck: spellcheck ? "true" : "false",
         className: classNames(inputClassName, classes.inputPropsClassName, {
           [classes.inputText]: !multiline,
           [classes.inputTextArea]: multiline
         })
-      }
+      }, inputProps)
     }));
   }
 
@@ -465,6 +466,11 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   inputId: PropTypes.string,
 
+  /**
+   * Passe des props directement à l'input
+   */
+  inputProps: PropTypes.object,
+
   /**
    * Passe une ref callback au composant input
    */

package/es/HiPin/HiPin.js

@@ -6,9 +6,9 @@ import { withStyles } from '../styles';
 export const styles = theme => ({
   root: {
     display: 'inline-block',
-    padding: '1px 9px',
-    height: 16,
-    lineHeight: '16px',
+    padding: '0px 9px',
+    height: 17,
+    lineHeight: '17px',
     minWidth: 25,
     textAlign: 'center',
     borderRadius: '45px',

package/es/HiSelect/HiSelect.js

@@ -38,13 +38,14 @@ export const styles = theme => ({
     transition: 'none !important'
   },
   labelIcon: {
-    marginRight: 10
+    marginRight: 10,
+    verticalAlign: 'text-bottom'
   },
   labelImg: {
     height: 18,
     width: 'auto',
     margin: '0 4px',
-    verticalAlign: 'middle'
+    verticalAlign: 'text-bottom'
   },
   selectIconLabel: _objectSpread({
     whiteSpace: 'nowrap',
@@ -52,7 +53,7 @@ export const styles = theme => ({
     textOverflow: 'ellipsis',
     paddingRight: 16
   }, theme.typography.b1, {
-    display: 'inline-flex',
+    display: 'inline-block',
     width: '100%'
   }),
   selectImgLabel: _objectSpread({
@@ -432,6 +433,12 @@ class HiSelect extends React.PureComponent {
     this.getInputElement = this.getInputElement.bind(this);
   }
 
+  componentDidMount() {
+    if (this.props.autoFocus) {
+      this.inputEl.focus();
+    }
+  }
+
   static getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.options !== prevState.suggestions) {
       return _objectSpread({}, prevState, {
@@ -451,10 +458,18 @@ class HiSelect extends React.PureComponent {
    */
 
 
-  componentDidMount() {
-    if (this.props.autoFocus) {
-      this.inputEl.focus();
-    }
+  getLengthItemList(itemList) {
+    let itemListLength = 0;
+    itemList.forEach(parent => {
+      if (parent.displayed && itemListLength < 10) {
+        itemListLength += 1;
+
+        if (parent.children && itemListLength < 10) {
+          itemListLength += this.getLengthItemList(parent.children);
+        }
+      }
+    });
+    return itemListLength;
   }
 
   render() {
@@ -544,8 +559,10 @@ class HiSelect extends React.PureComponent {
 
 
     if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
-      // +1 for search input
-      const nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+      // In case we have a nested list
+      const itemListLength = this.getLengthItemList(itemList); // +1 for search input
+
+      const nbItems = itemListLength <= 10 ? itemListLength + 1 : 11;
       popperStyle.transform = `translate3d(-1px, -${nbItems * 40 + 2}px, 0px)`;
     } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
       popperStyle.transform = 'translate3d(-1px, 40px, 0px)';

package/es/HiSelect/HiSelectInput.js

@@ -93,8 +93,9 @@ export const styles = theme => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   }, theme.typography.b1, {
-    display: 'inline-flex',
-    width: '100%'
+    display: 'inline-block',
+    width: '100%',
+    maxWidth: 500
   }),
   placeholder: {
     color: theme.palette.grey[400]

package/es/HiSelect/HiSuggestSelect.js

@@ -161,9 +161,10 @@ class HiSuggestSelect extends React.PureComponent {
       showNoResults,
       onSearch,
       translations,
-      align
+      align,
+      inputClasses
     } = _this$props,
-          otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align"]);
+          otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align", "inputClasses"]);
 
     const {
       focused,
@@ -205,7 +206,8 @@ class HiSuggestSelect extends React.PureComponent {
       onChange: onSearch,
       onKeyDown: this.handleKeyDownSearch,
       onBlur: this.handleBlur,
-      onFocus: this.handleFocus
+      onFocus: this.handleFocus,
+      classes: inputClasses
     })), open && React.createElement(Popper, {
       disablePortal: true,
       anchorEl: this.textInput,
@@ -260,6 +262,11 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   id: PropTypes.string,
 
+  /**
+   * Object that contains the style for Input component
+   */
+  inputClasses: PropTypes.object,
+
   /**
    * Passe une ref callback au composant input
    */

package/es/HiSelectableList/HiSelectableList.js

@@ -107,9 +107,9 @@ class HiSelectableList extends React.PureComponent {
           overflow: true,
           placeholder: placeholderContent
         }, itemComponent);
-      } else {
-        return itemComponent;
       }
+
+      return itemComponent;
     };
 
     this.compareItem = (a, b) => {

package/es/HiTable/HiCellBuilder.js

@@ -100,6 +100,7 @@ class HiCellBuilder extends React.PureComponent {
                 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
               });
@@ -144,6 +145,8 @@ class HiCellBuilder extends React.PureComponent {
                 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
               });
@@ -157,22 +160,24 @@ class HiCellBuilder extends React.PureComponent {
 
   render() {
     const {
+      className,
       column,
       data,
       locale
     } = this.props;
     return React.createElement(TableCell, {
-      style: {
-        border: 'none',
-        paddingRight: '13px',
-        paddingLeft: '13px'
-      }
+      className: className
     }, this.createCell(column, data, locale));
   }
 
 }
 
 HiCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Override TableCell style
+   */
+  className: PropTypes.object,
+
   /**
    * Propriétés de la colonne
    */

package/es/HiTable/HiTableHeader.js

@@ -7,14 +7,21 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import * as cst from './constants';
-const styles = {
+
+const styles = theme => ({
+  head: {
+    cursor: 'inherit',
+    borderBottom: `solid 1px ${theme.palette.divider}`
+  },
+  cell: {
+    border: 'none',
+    paddingRight: '13px',
+    paddingLeft: '13px'
+  },
   icon: {
     color: '#00ADE9'
-  },
-  headerRoot: {
-    cursor: 'inherit'
   }
-};
+});
 
 class HiTableHeader extends React.PureComponent {
   constructor(...args) {
@@ -34,7 +41,9 @@ class HiTableHeader extends React.PureComponent {
       sortable,
       dense
     } = this.props;
-    return React.createElement(TableHead, null, React.createElement(TableRow, {
+    return React.createElement(TableHead, {
+      className: classes.head
+    }, React.createElement(TableRow, {
       style: {
         height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
         whiteSpace: 'nowrap'
@@ -51,13 +60,8 @@ class HiTableHeader extends React.PureComponent {
       const finalLabel = view === 's' ? smallLabel : label;
       return React.createElement(TableCell, {
         key: colId,
+        className: classes.cell,
         sortDirection: orderBy === colId ? order : false,
-        style: {
-          border: 'none',
-          borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
-          paddingRight: '13px',
-          paddingLeft: '13px'
-        },
         numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
         title: headerTooltip
       }, sortable ? React.createElement(TableSortLabel, {

package/es/HiTable/HiTableRow.js

@@ -12,15 +12,18 @@ export const styles = theme => ({
     '&:last-child': {
       borderBottom: 'solid 1px #E4E7E8'
     },
-    '&:first-child': {
-      borderTop: 'solid 1px #E4E7E8'
-    },
     '&:hover, &:focus': {
       backgroundColor: `${theme.palette.action.hover} !important`
     }
   },
   clickableRow: {
     cursor: 'pointer'
+  },
+  cell: {
+    border: 'none',
+    padding: '0px 13px',
+    minHeight: '32px',
+    maxHeight: '40px'
   }
 });
 
@@ -65,6 +68,7 @@ class HiTableRow extends React.PureComponent {
     }, Object.keys(columns).map(column => {
       return React.createElement(HiCellBuilder, {
         key: columns[column].colId,
+        className: classes.cell,
         column: columns[column],
         data: rowdata,
         locale: locale