@hipay/hipay-material-ui 2.0.0-beta.66 → 2.0.0-beta.69

package/es/HiAlertModal/HiAlertModal.js

@@ -11,23 +11,24 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '../styles';
 import HiButton from '../HiButton';
 import HiIcon from '../HiIcon';
+import { escapeHTML } from '../utils/helpers';
 export const styles = theme => ({
   classContent: {
     fontSize: 14,
-    lineHeight: '20px',
+    lineHeight: '24px',
     color: '#484848',
     position: 'relative'
   },
   classDialogPaper: {
-    minHeight: 280,
+    minHeight: 248,
     maxWidth: 280,
     borderRadius: 2
   },
   classCancelButton: {
-    float: 'right'
+    margin: '0'
   },
   classSubmitButton: {
-    margin: '0'
+    float: 'right'
   },
   classTitle: {
     fontSize: 20,
@@ -60,18 +61,6 @@ class HiAlertModal extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    this.handleClickCancel = () => {
-      if (this.props.onCancelClick) {
-        this.props.onCancelClick();
-      }
-    };
-
-    this.handleClickSubmit = () => {
-      if (this.props.onSubmitClick) {
-        this.props.onSubmitClick();
-      }
-    };
-
     this.handleOnClose = () => {
       if (this.props.onClose) {
         this.props.onClose();
@@ -79,9 +68,7 @@ class HiAlertModal extends React.PureComponent {
     };
 
     this.handleOnClose = this.handleOnClose.bind(this);
-    this.handleClickCancel = this.handleClickCancel.bind(this);
-    this.handleClickSubmit = this.handleClickSubmit.bind(this);
-  } // Appelé au clic du bouton d'annulation
+  } // Appelé si clic en dehors de la pop up
 
 
   // Render
@@ -103,6 +90,17 @@ class HiAlertModal extends React.PureComponent {
     } = _this$props,
           props = _objectWithoutProperties(_this$props, ["backgroundIcon", "iconSize", "classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "cancelColor", "submitColor", "title"]);
 
+    let dialogContent = content;
+
+    if (typeof content === 'string') {
+      dialogContent = React.createElement("span", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: escapeHTML(content)
+        }
+      });
+    }
+
     return React.createElement(Dialog, _extends({
       open: open,
       onClose: this.handleOnClose,
@@ -124,28 +122,29 @@ class HiAlertModal extends React.PureComponent {
       classes: {
         root: classes.classContent
       }
-    }, content)), React.createElement(DialogActions, {
+    }, dialogContent)), React.createElement(DialogActions, {
       classes: {
         root: classes.classAction
       }
-    }, labelSubmitButton && React.createElement(HiButton, {
-      classes: {
-        root: classes.classSubmitButton
-      },
-      onClick: this.handleClickSubmit,
-      color: submitColor
-    }, labelSubmitButton), labelCancelButton && React.createElement(HiButton, {
+    }, labelCancelButton && React.createElement(HiButton, {
       classes: {
         root: classes.classCancelButton
       },
-      onClick: this.handleClickCancel,
+      onClick: onCancelClick,
       color: cancelColor
-    }, labelCancelButton)));
+    }, labelCancelButton), labelSubmitButton && React.createElement(HiButton, {
+      classes: {
+        root: classes.classSubmitButton
+      },
+      onClick: onSubmitClick,
+      color: submitColor
+    }, labelSubmitButton)));
   }
 
 }
 
 HiAlertModal.defaultProps = {
+  content: '',
   cancelColor: 'neutral',
   submitColor: 'primary'
 };

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -28,16 +28,17 @@ class HiBreadcrumb extends React.PureComponent {
     }, React.createElement("div", null, steps.map((step, index) => {
       const validConnector = step.status === 'validated' && index < steps.length - 1 && (steps[index + 1].status === 'validated' || steps[index + 1].status === 'active');
       return React.createElement(HiStep, {
-        index: index,
+        index: step.id,
         content: step.content,
         key: step.id,
-        onClick: this.handleStep(index),
+        onClick: this.handleStep(step.id),
         isLast: index === steps.length - 1,
         validConnector: validConnector,
         type: type,
-        steps: steps
+        steps: steps,
+        active: activeStep === step.id
       }, React.createElement(HiStepLabel, {
-        active: activeStep === index,
+        active: activeStep === step.id,
         status: step.status,
         notificationNumber: step.notificationNumber,
         type: type,

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -7,33 +7,54 @@ 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 => ({
   summaryContent: {
     display: 'inline-block',
-    border: 'none'
+    border: 'none',
+    '&$expanded': {
+      margin: 'initial'
+    }
   },
   summaryRoot: {
     borderBottom: '1px solid #E3E6E7',
     height: 48,
-    minHeight: 48
+    minHeight: 48,
+    padding: '0 0 0 8px',
+    '&$expanded': {
+      minHeight: 48
+    }
+  },
+  expanded: {},
+  collapseDisable: {
+    cursor: 'default',
+    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: 40,
+    marginRight: 32,
     '&>svg': {
       fontSize: 18,
-      marginLeft: 3,
-      marginBottom: -5
+      marginLeft: 3
+    },
+    "&>button": {
+      marginRight: -12
     }
   }),
   panel: {
@@ -41,15 +62,23 @@ export const styles = theme => ({
     border: 'none'
   },
   panelDetails: {
-    padding: '8px 24px'
+    padding: 0
   },
   disabledPanel: {
     backgroundColor: '#ffffff',
     opacity: 1
+  },
+  expandIcon: {
+    width: 24,
+    height: 24,
+    right: 0
   }
 });
 
-var _ref = React.createElement(ExpandMoreIcon, null);
+var _ref = React.createElement(HiIcon, {
+  icon: "mdi_menu_up",
+  size: 24
+});
 
 class HiExpansionPanel extends React.PureComponent {
   render() {
@@ -60,10 +89,12 @@ class HiExpansionPanel extends React.PureComponent {
       secondaryHeading,
       secondaryHeadingDisabled,
       secondaryHeadingIcon,
+      collapseDisable,
       children,
-      classes
+      classes,
+      expanded
     } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "children", "classes"]);
+          props = _objectWithoutProperties(_this$props, ["disabled", "heading", "secondaryHeading", "secondaryHeadingDisabled", "secondaryHeadingIcon", "collapseDisable", "children", "classes", "expanded"]);
 
     const effectiveDisabled = disabled || !children;
     return React.createElement(ExpansionPanel, _extends({
@@ -71,13 +102,19 @@ class HiExpansionPanel extends React.PureComponent {
       classes: {
         root: classes.panel,
         disabled: classes.disabledPanel
-      }
+      },
+      expanded: collapseDisable || expanded
     }, props), React.createElement(ExpansionPanelSummary, {
       classes: {
         root: classes.summaryRoot,
-        content: classes.summaryContent
+        content: classes.summaryContent,
+        expanded: classes.expanded,
+        expandIcon: classes.expandIcon
       },
-      expandIcon: _ref
+      className: classNames({
+        [classes.collapseDisable]: collapseDisable
+      }),
+      expandIcon: !collapseDisable && _ref
     }, React.createElement("div", {
       className: classes.secondaryHeading
     }, !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled, secondaryHeadingIcon), React.createElement("div", {
@@ -129,7 +166,12 @@ HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Icone dans le titre secondaire du panel
    */
-  secondaryHeadingIcon: PropTypes.any
+  secondaryHeadingIcon: PropTypes.any,
+
+  /**
+   * Désactive l'action d'ouverture et de fermeture du composant
+   */
+  collapseDisable: PropTypes.bool
 } : {};
 export default withStyles(styles, {
   hiComponent: true,

package/es/HiForm/HiInput.js

@@ -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/HiForm/HiUpload.js

@@ -361,9 +361,9 @@ HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
   helperText: PropTypes.string,
 
   /**
-   * id du composant
+   * Identifiant unique
    */
-  id: PropTypes.string.isRequired,
+  id: PropTypes.string,
 
   /**
    * Array containing each of the inputs the component has to show (represented by an object).

package/es/HiSelect/HiSelect.js

@@ -210,9 +210,11 @@ class HiSelect extends React.PureComponent {
           // Sinon focus sur l'élément sélectionné
           this.focusOnSelectedItem(this.props.value);
         } else {
-          setTimeout(() => {
-            this.searchField.focus();
-          }, 1);
+          if (this.searchField) {
+            setTimeout(() => {
+              this.searchField.focus();
+            }, 1);
+          }
         }
       }
     };
@@ -289,7 +291,7 @@ class HiSelect extends React.PureComponent {
             this.handleClose();
           }
         }
-      } else if (key === 'space') {
+      } else if (key === 'space' && event.target !== this.searchField) {
         event.preventDefault();
 
         if (this.state.open) {
@@ -430,6 +432,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, {
@@ -449,10 +457,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() {
@@ -542,8 +558,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/HiSelectableList/HiSelectableList.js

@@ -7,6 +7,7 @@ import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import keycode from 'keycode';
+import LazyLoad, { forceCheck } from 'react-lazyload';
 export const styles = () => ({
   root: {
     padding: 0
@@ -52,18 +53,35 @@ class HiSelectableList extends React.PureComponent {
         hideCheckbox,
         hoverIcon,
         icon,
+        lazy,
         selectedItemIdList,
         sort,
         onKeyDown,
         onKeyUp
       } = _this$props,
-            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
+            others = _objectWithoutProperties(_this$props, ["checkedIcon", "disabled", "disabledItemIdList", "hideCheckbox", "hoverIcon", "icon", "lazy", "selectedItemIdList", "sort", "onKeyDown", "onKeyUp"]);
 
       if (sort && item.children) {
         item.children.sort(this.compareItem);
       }
 
-      return React.createElement(React.Fragment, {
+      const placeholderContent = React.createElement("div", {
+        style: {
+          width: '90%',
+          padding: '8px 6px',
+          height: 40,
+          position: 'sticky',
+          left: 0
+        }
+      }, React.createElement("div", {
+        style: {
+          backgroundColor: '#F5F5F5',
+          width: '100%',
+          height: '100%',
+          borderRadius: 4
+        }
+      }));
+      const itemComponent = React.createElement(React.Fragment, {
         key: item.id
       }, React.createElement(HiSelectableListItem, _extends({}, others, {
         checkedIcon: checkedIcon,
@@ -79,6 +97,19 @@ class HiSelectableList extends React.PureComponent {
         ,
         item: item
       }, item)), item.children && item.children.length > 0 && item.children.filter(subItem => !(subItem.displayed === false)).map(subItem => this.buildRecursiveListItem(subItem, level + 1)));
+
+      if (lazy) {
+        return React.createElement(LazyLoad, {
+          key: item.id,
+          height: 40,
+          offset: 400,
+          once: true,
+          overflow: true,
+          placeholder: placeholderContent
+        }, itemComponent);
+      }
+
+      return itemComponent;
     };
 
     this.compareItem = (a, b) => {
@@ -133,6 +164,12 @@ class HiSelectableList extends React.PureComponent {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
+      forceCheck();
+    }
+  }
+
   render() {
     const {
       classes,
@@ -161,6 +198,7 @@ HiSelectableList.defaultProps = {
   disabled: false,
   disabledItemIdList: [],
   hideCheckbox: false,
+  lazy: true,
   selectedItemIdList: [],
   sort: false,
   sortAppendList: ['_all']
@@ -216,6 +254,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   itemList: PropTypes.array.isRequired,
 
+  /**
+   * Active lazyloading on list items
+   */
+  lazy: PropTypes.bool,
+
   /**
    * Fonction de callback à la sélection d'un item, renvoie l'item sélectionné
    *

package/es/HiTable/HiTableRow.js

@@ -19,7 +19,7 @@ export const styles = theme => ({
       backgroundColor: `${theme.palette.action.hover} !important`
     }
   },
-  clicableRow: {
+  clickableRow: {
     cursor: 'pointer'
   }
 });
@@ -47,7 +47,7 @@ class HiTableRow extends React.PureComponent {
     } = this.props;
     return React.createElement(TableRow, {
       className: classNames(classes.row, {
-        [classes.clicableRow]: this.props.onClick
+        [classes.clickableRow]: this.props.onClick
       }),
       hover: true,
       onClick: event => this.handleClick(event, rowdata),

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.65
+/** @license HiPay-Material-UI v2.0.0-beta.69
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.65
+/** @license HiPay-Material-UI v2.0.0-beta.69
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.66",
+  "version": "2.0.0-beta.69",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -58,6 +58,7 @@
     "react-day-picker": "^7.2.4",
     "react-event-listener": "^0.6.2",
     "react-jss": "^8.1.0",
+    "react-lazyload": "^2.5.0",
     "react-leaflet": "^2.1.0",
     "react-pdf": "^3.0.5",
     "react-spinners": "^0.4.5",
@@ -73,4 +74,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}