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

package/es/HiDatePicker/HiDateRangePicker.js

@@ -19,6 +19,8 @@ import Weekday from './Weekday';
 import { HiTextField } from '../HiForm';
 import styles from './stylesheet';
 import HiFormControl from '../HiForm/HiFormControl';
+import { isMobile } from 'react-device-detect';
+import HiDatePickerMobile from './HiDatePickerMobile';
 
 class HiDateRangePicker extends React.Component {
   constructor(props) {
@@ -136,6 +138,16 @@ class HiDateRangePicker extends React.Component {
       this.props.onChange(`${name}Error`, error);
     };
 
+    this.handleChangeMobile = inputName => event => {
+      let date;
+
+      if (event.target.value) {
+        date = new Date(event.target.value);
+      }
+
+      this.props.onChange(inputName, date);
+    };
+
     this.handleCurrentMonthChange = day => {
       this.setState({
         currentMonth: day,
@@ -441,16 +453,16 @@ class HiDateRangePicker extends React.Component {
     });
 
     const toClass = classNames(classes.toInput, {
-      [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from',
-      [classes.right4]: staticPosition === true && this.state.focusedInput === 'from'
+      [classes.absolute]: !isMobile && staticPosition === true && this.state.focusedInput === 'from',
+      [classes.right4]: !isMobile && staticPosition === true && this.state.focusedInput === 'from'
     });
     let content = React.createElement("div", {
       className: classNames(classes.root, classes.rangePickerContainer)
     }, React.createElement("div", {
       className: classes.fromInput,
-      onFocus: () => this.handleDayPickerFocus('from'),
-      onKeyDown: this.handleKeyDown('from')
-    }, React.createElement("div", null, React.createElement(DayPickerInput, {
+      onFocus: !isMobile ? () => this.handleDayPickerFocus('from') : undefined,
+      onKeyDown: !isMobile ? this.handleKeyDown('from') : undefined
+    }, React.createElement("div", null, !isMobile ? React.createElement(DayPickerInput, {
       key: '1',
       ref: el => {
         this.fromInput = el;
@@ -466,12 +478,25 @@ class HiDateRangePicker extends React.Component {
       parseDate: MomentLocaleUtils.parseDate,
       onDayChange: day => this.handleDayChange('from', day),
       placeholder: ''
+    }) : React.createElement(HiDatePickerMobile, {
+      id: this.props.id,
+      label: labelFrom,
+      range: true,
+      required: this.props.required,
+      enableTime: enableTime,
+      value: from,
+      onChange: this.handleChangeMobile('from'),
+      disablePastDays: this.props.disablePastDays,
+      disableFutureDays: disableFutureDays,
+      today: today,
+      minimumDate: minimumDate,
+      format: enableTime ? `${format} HH:mm` : format
     }))), React.createElement("div", {
       className: toClass,
-      onFocus: () => this.handleDayPickerFocus('to'),
-      onBlur: () => this.handleDayPickerBlur('to'),
-      onKeyDown: this.handleKeyDown('to')
-    }, React.createElement(DayPickerInput, {
+      onFocus: !isMobile ? () => this.handleDayPickerFocus('to') : undefined,
+      onBlur: !isMobile ? () => this.handleDayPickerBlur('to') : undefined,
+      onKeyDown: !isMobile ? this.handleKeyDown('to') : undefined
+    }, !isMobile ? React.createElement(DayPickerInput, {
       key: '1',
       ref: el => {
         this.toInput = el;
@@ -486,6 +511,19 @@ class HiDateRangePicker extends React.Component {
       formatDate: MomentLocaleUtils.formatDate,
       parseDate: MomentLocaleUtils.parseDate,
       placeholder: ''
+    }) : React.createElement(HiDatePickerMobile, {
+      id: this.props.id,
+      label: labelTo,
+      range: true,
+      required: this.props.required,
+      enableTime: enableTime,
+      value: to,
+      onChange: this.handleChangeMobile('to'),
+      disablePastDays: this.props.disablePastDays,
+      disableFutureDays: disableFutureDays,
+      today: today,
+      minimumDate: minimumDate,
+      format: enableTime ? `${format} HH:mm` : format
     })));
 
     if (!hasSelector) {

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -9,6 +9,7 @@ import withStyles from '../styles/withStyles';
 import HiSelectField from '../HiSelect/HiSelectField';
 import HiDateRangePicker from './HiDateRangePicker';
 import HiFormControl from '../HiForm/HiFormControl';
+import { isMobile } from 'react-device-detect';
 export function findSeparator(format) {
   let str = '';
 
@@ -311,7 +312,7 @@ class HiDateRangeSelector extends React.Component {
       },
       staticPosition: staticPosition,
       onSubmit: this.props.onSubmit
-    }, selectProps))), React.createElement(Grid, {
+    }, selectProps))), (isMobile && selectedPreset === 'custom' || !isMobile) && React.createElement(Grid, {
       item: true,
       xs: 12,
       sm: 8,

package/es/HiDatePicker/stylesheet.js

@@ -8,6 +8,22 @@ export default (theme => ({
     minWidth: 252,
     maxWidth: 500
   },
+  rootMobile: _objectSpread({}, theme.typography.b1, {
+    backgroundColor: theme.palette.background2,
+    borderBottom: '1px solid #E0E0E0',
+    borderLeft: 'none',
+    borderRight: 'none',
+    borderTop: 'none',
+    height: 40,
+    paddingLeft: 8,
+    paddingTop: 10,
+    position: 'absolute',
+    marginTop: -40,
+    opacity: 0
+  }),
+  mobileRangeRoot: {
+    minWidth: '100%'
+  },
   fromInput: {
     position: 'relative',
     display: 'inline-block',

package/es/HiNotice/HiKPI.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '../styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
+import Collapse from '@material-ui/core/Collapse';
 export const styles = theme => ({
   root: {
     background: theme.palette.background3,
@@ -45,32 +46,32 @@ export const styles = theme => ({
     boxShadow: 'none'
   },
   body: {
-    height: '100%',
     margin: 0,
     display: 'inline-grid',
     alignItems: 'center',
     fontSize: 20,
-    fontWeight: theme.typography.fontWeightLight
+    fontWeight: theme.typography.fontWeightLight,
+    flex: '1 1 auto'
   },
   title: {
-    height: '100%',
     maxHeight: 16,
     maxWidth: '100%',
     margin: '7px 0px',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     fontSize: 14,
-    fontWeight: theme.typography.fontWeightLight
+    fontWeight: theme.typography.fontWeightLight,
+    flex: '0 1 16px'
   },
   subtitle: {
-    height: '100%',
     maxHeight: 28,
     margin: '2px 0px',
     maxWidth: '100%',
     color: theme.palette.neutral.main,
     fontSize: 11,
     lineHeight: '13px',
-    fontWeight: theme.typography.fontWeightMedium
+    fontWeight: theme.typography.fontWeightMedium,
+    flex: '0 1 28px'
   },
   minify: {
     height: 72
@@ -110,7 +111,11 @@ class HiKPI extends React.Component {
       [classes.active]: active,
       [classes.minify]: minify
     });
-    return React.createElement(ButtonBase, {
+    return React.createElement(Collapse, {
+      in: !minify,
+      timeout: "auto",
+      collapsedHeight: "88px"
+    }, React.createElement(ButtonBase, {
       className: rootclass,
       onClick: !disable ? this.handleClick(id) : undefined,
       title: tooltip
@@ -120,7 +125,7 @@ class HiKPI extends React.Component {
       className: classes.body
     }, minify && bodyMinify ? bodyMinify : body), subtitle && minify === false && React.createElement("div", {
       className: classes.subtitle
-    }, subtitle));
+    }, subtitle)));
   }
 
 }

package/es/HiPaymentMeans/HiPaymentMeans.js

@@ -308,6 +308,7 @@ class HiPaymentMeans extends React.Component {
         username = `${translations.gender_male} ${cardUser}`;
       }
 
+      const creditDebit = translations.credit && translations.debit && (credit ? translations.credit : translations.debit).toUpperCase();
       let cardLayout;
 
       switch (type) {
@@ -427,7 +428,7 @@ class HiPaymentMeans extends React.Component {
             className: classNames(classes.labelLarge, classes.userNameSepa)
           }, username), React.createElement("div", {
             className: classNames(classes.labelLarge, classes.labelDebitCredit)
-          }, (credit ? translations.credit : translations.debit).toUpperCase()));
+          }, creditDebit));
           break;
 
         case 'prepaid-card':

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.74
+/** @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.74
+/** @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.