@hipay/hipay-material-ui 2.0.0-beta.75 → 2.0.0-beta.76

package/es/HiSelect/HiSelect.js

@@ -11,10 +11,14 @@ import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
 import HiSelectInput from './HiSelectInput';
 import withStyles from '../styles/withStyles';
-import { getNextItemSelectable, foldAccents } from '../utils/helpers';
+import { foldAccents } from '../utils/helpers';
 import HiIcon from '../HiIcon';
 import keycode from 'keycode';
 import classNames from 'classnames';
+import HiAlertModal from '../HiAlertModal';
+import { isMobile } from 'react-device-detect';
+import HiSelectMobile from './HiSelectMobile';
+import { findDOMNode } from 'react-dom';
 export const styles = theme => ({
   root: {
     backgroundColor: theme.palette.background2,
@@ -200,28 +204,46 @@ class HiSelect extends React.PureComponent {
     this.handleClick = () => {
       if (this.state.open) {
         this.handleClose();
+      } else if (this.props.alert && !this.state.alertOpen) {
+        this.setState({
+          open: false,
+          alertOpen: true
+        });
       } else {
         this.setState({
-          open: true
+          open: true,
+          alertOpen: false
         });
         this.handleSuggestions(this.props.options);
         if (this.props.onClick) this.props.onClick(); // Gestion du focus
 
-        if (!this.props.searchable) {
-          setTimeout(() => {
+        setTimeout(() => {
+          if (!this.props.searchable) {
             // Sinon focus sur l'élément sélectionné
             this.focusOnSelectedItem(this.props.value);
-          }, 1);
-        } else {
-          if (this.searchField) {
-            setTimeout(() => {
-              this.searchField.focus();
-            }, 1);
           }
-        }
+        }, 1);
       }
     };
 
+    this.handleSubmitAlert = () => {
+      this.handleClick();
+    };
+
+    this.handleCancelAlert = () => {
+      this.handleClose();
+    };
+
+    this.handleExitedAlert = () => {
+      if (this.searchField) {
+        this.searchField.focus();
+      }
+    };
+
+    this.handleCloseAlert = () => {
+      this.handleClose();
+    };
+
     this.focusOnSelectedItem = selectedValue => {
       if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
         setTimeout(() => {
@@ -253,7 +275,8 @@ class HiSelect extends React.PureComponent {
     this.handleClose = () => {
       this.handleSearchReset();
       this.setState({
-        open: false
+        open: false,
+        alertOpen: false
       });
 
       if (this.props.onClose) {
@@ -287,31 +310,22 @@ class HiSelect extends React.PureComponent {
     this.handleKeyDown = event => {
       const key = keycode(event);
 
-      if (key === 'esc') {
-        event.preventDefault();
-        this.handleClose();
-      } else if (key === 'enter') {
-        if (this.state.open) {
-          if (this.props.multiple) {
-            this.handleClose();
-          }
-        }
-      } else if (key === 'space' && event.target !== this.searchField) {
-        event.preventDefault();
-
-        if (this.state.open) {
-          if (!this.props.multiple) {
-            this.setState({
-              open: false
-            });
+      if (!this.state.alertOpen) {
+        if (key === 'esc') {
+          event.preventDefault();
+          this.handleClose();
+        } else if (key === 'enter') {
+          if (this.state.open) {
+            if (this.props.multiple) {
+              this.handleClose();
+            }
           }
-        } else {
-          this.setState({
-            open: true
-          });
+        } else if (key === 'space' && event.target !== this.searchField) {
+          event.preventDefault();
+          this.handleClick();
+        } else if (key === 'tab') {
+          this.handleClose();
         }
-      } else if (key === 'tab') {
-        this.handleClose();
       }
     };
 
@@ -357,6 +371,9 @@ class HiSelect extends React.PureComponent {
           // select _all options
           onChange(event, options.map(option => option.id), item);
         }
+      } else if (isMobile && multiple) {
+        // Array of selected values
+        onChange(event, item.map(option => option.id), item);
       } else if (value.includes(item.id)) {
         // unselect item
         onChange(event, value.filter(id => id !== item.id), item);
@@ -419,11 +436,13 @@ class HiSelect extends React.PureComponent {
     };
 
     this.state = {
+      alertOpen: false,
       open: false,
       focused: false,
       searchValue: props.searchValue ? undefined : '',
       suggestions: props.options,
-      openDown: true
+      openDown: true,
+      overlayWidth: 0
     };
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
@@ -441,6 +460,12 @@ class HiSelect extends React.PureComponent {
     if (this.props.autoFocus) {
       this.inputEl.focus();
     }
+
+    if (this.overlay) {
+      this.setState({
+        overlayWidth: findDOMNode(this.overlay).clientWidth
+      });
+    }
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -478,6 +503,7 @@ class HiSelect extends React.PureComponent {
 
   render() {
     const {
+      alert,
       classes,
       disabled,
       error,
@@ -503,6 +529,7 @@ class HiSelect extends React.PureComponent {
 
     } = this.props;
     const {
+      alertOpen,
       open,
       focused
     } = this.state;
@@ -608,14 +635,24 @@ class HiSelect extends React.PureComponent {
       }, hiSelectableListProps))), this.placement && this.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
     };
 
-    return React.createElement("div", {
+    return !isMobile ? React.createElement("div", {
       className: classes.root,
       ref: el => {
         this.overlay = el;
       },
       onKeyDown: this.handleKeyDown,
       onKeyDownCapture: this.handleKeyDownCapture
-    }, React.createElement(HiSelectInput, _extends({
+    }, alert && React.createElement(HiAlertModal, {
+      open: alertOpen,
+      title: alert.title,
+      content: alert.content,
+      onSubmitClick: this.handleSubmitAlert,
+      onCancelClick: this.handleCancelAlert,
+      onClose: this.handleCloseAlert,
+      onExited: this.handleExitedAlert,
+      labelSubmitButton: alert.submitButton,
+      labelCancelButton: alert.cancelButton
+    }), React.createElement(HiSelectInput, _extends({
       id: id,
       value: inputValue,
       open: open,
@@ -646,7 +683,37 @@ class HiSelect extends React.PureComponent {
       className: popperClass,
       disablePortal: true,
       style: popperStyle
-    }, content));
+    }, content)) : React.createElement("div", {
+      ref: el => {
+        this.overlay = el;
+      }
+    }, React.createElement(HiSelectInput, _extends({
+      id: id,
+      value: inputValue,
+      open: open,
+      focused: focused,
+      type: type,
+      disabled: disabled,
+      noButton: displayAsChip,
+      error: error,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onMouseEnter: this.props.onMouseEnter,
+      onMouseLeave: this.props.onMouseLeave,
+      onReset: this.props.onReset,
+      placeholder: placeholder
+    }, hiSelectInputProps, {
+      refElement: el => {
+        this.inputEl = el;
+      }
+    })), React.createElement(HiSelectMobile, {
+      onChange: this.handleSelect,
+      multiple: multiple,
+      id: id,
+      itemList: itemList,
+      value: value,
+      width: this.state.overlayWidth
+    }));
   }
 
 }
@@ -678,6 +745,10 @@ HiSelect.defaultProps = {
   filterFunc: filterValue
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Affiche une alerte à l'ouverture de la liste
+   */
+  alert: PropTypes.object,
   align: PropTypes.oneOf(['left', 'right']),
 
   /**

package/es/HiSelect/HiSelectInput.js

@@ -8,6 +8,7 @@ import Icon from '@material-ui/core/Icon';
 import HiIcon from '../HiIcon';
 import withStyles from '../styles/withStyles';
 import keycode from 'keycode';
+import { isMobile } from 'react-device-detect';
 export const styles = theme => ({
   root: {
     width: '100%',
@@ -18,6 +19,9 @@ export const styles = theme => ({
     padding: 8,
     cursor: 'pointer'
   },
+  rootMobile: {
+    backgroundColor: theme.palette.background2
+  },
   underline: {
     '&:before': {
       backgroundColor: theme.palette.input.bottomLine,
@@ -207,7 +211,8 @@ class HiSelectInput extends React.PureComponent {
     const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
       [classes.disabled]: disabled,
       [classes.focused]: focused,
-      [classes.error]: error && !focused
+      [classes.error]: error && !focused,
+      [classes.rootMobile]: isMobile
     });
     const iconClass = classNames(classes.icon, {
       [classes.iconOpen]: open,

package/es/HiSelect/HiSelectMobile.js

@@ -0,0 +1,149 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+export const styles = theme => ({
+  root: {
+    position: 'absolute',
+    opacity: '0',
+    marginTop: -40,
+    height: 40
+  }
+});
+
+class HiSelectMobile extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.buildOptionList = itemList => {
+      let optionList = [];
+
+      if (itemList.length) {
+        let parentId;
+        let groupList = [];
+        itemList.forEach(item => {
+          if (item.id !== '_all' && item.displayed !== false) {
+            if (item.hasChildren) {
+              if (groupList.length) {
+                optionList.push(this.buildChildrenList(groupList));
+                groupList = [];
+              }
+
+              parentId = item.id;
+              groupList.push(item);
+            } else if (parentId) {
+              groupList.push(item);
+            } else if (item.children) {
+              optionList.push(this.buildChildrenList([item, ...item.children]));
+            } else {
+              optionList.push(React.createElement("option", {
+                key: item.id,
+                "data-item": JSON.stringify(item),
+                value: item.id
+              }, item.label));
+            }
+          }
+        });
+
+        if (groupList.length) {
+          optionList.push(this.buildChildrenList(groupList));
+        }
+      }
+
+      return optionList;
+    };
+
+    this.buildChildrenList = itemList => {
+      const group = itemList.shift();
+      return React.createElement("optgroup", {
+        key: group.id,
+        label: group.label
+      }, itemList.map(item => {
+        return React.createElement("option", {
+          key: item.id,
+          "data-item": JSON.stringify(item),
+          value: item.id
+        }, item.label);
+      }));
+    };
+
+    this.handleChange = event => {
+      if (!this.props.multiple) {
+        const itemSelected = event.target[event.target.selectedIndex];
+        this.props.onChange(event, JSON.parse(itemSelected.getAttribute('data-item')));
+      } else {
+        // Multiple on mobile trigger on change with all selected items
+        let optionsSelected = [];
+        Array.prototype.forEach.call(event.target.options, option => {
+          if (option.selected) {
+            optionsSelected.push(JSON.parse(option.getAttribute('data-item')));
+          }
+        });
+        this.props.onChange(event, optionsSelected);
+      }
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      id,
+      itemList,
+      multiple,
+      value
+    } = this.props;
+
+    const additionalProps = _objectSpread({}, multiple && {
+      multiple: 'multiple'
+    });
+
+    return React.createElement("select", _extends({
+      value: value,
+      style: {
+        width: this.props.width
+      },
+      onChange: this.handleChange,
+      className: classes.root,
+      name: id,
+      id: id
+    }, additionalProps), this.buildOptionList(itemList));
+  }
+
+}
+
+HiSelectMobile.defaultProps = {
+  itemList: []
+};
+HiSelectMobile.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Identifiant du select
+   */
+  id: PropTypes.string,
+
+  /**
+   * Liste des options du select
+   */
+  itemList: PropTypes.array.isRequired,
+
+  /**
+   * True s'il est possible de sélectionner plusieurs options
+   */
+  multiple: PropTypes.bool,
+
+  /**
+   * Fonction appelée lors de la sélection/désélection
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Valeur(s) sélectionnée(s)
+   */
+  value: PropTypes.any,
+
+  /**
+   * Largeur du select
+   */
+  width: PropTypes.number
+} : {};
+export default withStyles(styles)(HiSelectMobile);

package/es/styles/createPalette.js

@@ -47,7 +47,7 @@ export const light = {
     // The color of a selected action.
     selected: '#F8F9FB',
     // The color of a disabled action.
-    disabled: '#E0E0E0',
+    disabled: 'rgba(0, 0, 0, 0.24)',
     // The background color of a disabled action.
     disabledBackground: 'rgba(0, 0, 0, 0.12)'
   },

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.75
+/** @license HiPay-Material-UI v2.0.0-beta.76
  *
  * 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.75
+/** @license HiPay-Material-UI v2.0.0-beta.76
  *
  * 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.75",
+  "version": "2.0.0-beta.76",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -56,6 +56,7 @@
     "prop-types": "^15.6.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-day-picker": "^7.2.4",
+    "react-device-detect": "^1.6.2",
     "react-event-listener": "^0.6.2",
     "react-jss": "^8.1.0",
     "react-lazyload": "^2.5.0",
@@ -74,4 +75,4 @@
   },
   "main": "./index.js",
   "module": "./index.es.js"
-}
+}

package/styles/createPalette.js

@@ -65,7 +65,7 @@ var light = {
     // The color of a selected action.
     selected: '#F8F9FB',
     // The color of a disabled action.
-    disabled: '#E0E0E0',
+    disabled: 'rgba(0, 0, 0, 0.24)',
     // The background color of a disabled action.
     disabledBackground: 'rgba(0, 0, 0, 0.12)'
   },