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

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

@@ -9,15 +9,28 @@ import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 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, {
     fontSize: 20,
@@ -29,7 +42,7 @@ export const styles = theme => ({
     fontSize: 11,
     lineHeight: '24px',
     float: 'right',
-    marginRight: 40,
+    marginRight: 32,
     '&>svg': {
       fontSize: 18,
       marginLeft: 3,
@@ -41,11 +54,16 @@ export const styles = theme => ({
     border: 'none'
   },
   panelDetails: {
-    padding: '8px 24px'
+    padding: 0
   },
   disabledPanel: {
     backgroundColor: '#ffffff',
     opacity: 1
+  },
+  expandIcon: {
+    width: 24,
+    height: 24,
+    right: 0
   }
 });
 
@@ -60,10 +78,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 +91,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 +155,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/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

@@ -209,6 +209,12 @@ class HiSelect extends React.PureComponent {
         if (!this.props.searchable) {
           // Sinon focus sur l'élément sélectionné
           this.focusOnSelectedItem(this.props.value);
+        } else {
+          if (this.searchField) {
+            setTimeout(() => {
+              this.searchField.focus();
+            }, 1);
+          }
         }
       }
     };
@@ -285,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) {

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);
+      } else {
+        return itemComponent;
+      }
     };
 
     this.compareItem = (a, b) => {
@@ -107,9 +138,8 @@ class HiSelectableList extends React.PureComponent {
   componentDidMount() {
     // Focus on last item selected
     if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
-      let item = this.props.overlay.getElementsByTagName('li')[0];
-
-      if (this.props.value) {
+      if (Array.isArray(this.props.value) && this.props.value.length > 0 || !Array.isArray(this.props.value) && this.props.value) {
+        let item = this.props.overlay.getElementsByTagName('li')[0];
         let lastSelectedValue = Array.isArray(this.props.value) ? this.props.value[this.props.value.length - 1] : this.props.value;
         let index = 0;
         this.props.itemList.forEach(option => {
@@ -129,9 +159,14 @@ class HiSelectableList extends React.PureComponent {
             });
           }
         });
+        item && item.focus();
       }
+    }
+  }
 
-      item.focus();
+  componentDidUpdate(prevProps) {
+    if (this.props.lazy && prevProps.itemList !== this.props.itemList) {
+      forceCheck();
     }
   }
 
@@ -163,6 +198,7 @@ HiSelectableList.defaultProps = {
   disabled: false,
   disabledItemIdList: [],
   hideCheckbox: false,
+  lazy: true,
   selectedItemIdList: [],
   sort: false,
   sortAppendList: ['_all']
@@ -218,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.68
  *
  * 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.68
  *
  * 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

@@ -1,7 +1,8 @@
 {
   "name": "@hipay/hipay-material-ui",
+  "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.65",
+  "version": "2.0.0-beta.68",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -57,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",
@@ -67,12 +69,9 @@
     "warning": "^4.0.1"
   },
   "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
   "engines": {
     "node": ">=6.0.0"
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}