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

package/HiSelect/HiSelectMobile.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      position: 'absolute',
+      opacity: '0',
+      marginTop: -40,
+      height: 40
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiSelectMobile =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiSelectMobile, _React$Component);
+
+  function HiSelectMobile() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiSelectMobile);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiSelectMobile)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _this.buildOptionList = function (itemList) {
+      var optionList = [];
+
+      if (itemList.length) {
+        var parentId;
+        var groupList = [];
+        itemList.forEach(function (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].concat((0, _toConsumableArray2.default)(item.children))));
+            } else {
+              optionList.push(_react.default.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 = function (itemList) {
+      var group = itemList.shift();
+      return _react.default.createElement("optgroup", {
+        key: group.id,
+        label: group.label
+      }, itemList.map(function (item) {
+        return _react.default.createElement("option", {
+          key: item.id,
+          "data-item": JSON.stringify(item),
+          value: item.id
+        }, item.label);
+      }));
+    };
+
+    _this.handleChange = function (event) {
+      if (!_this.props.multiple) {
+        var 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
+        var optionsSelected = [];
+        Array.prototype.forEach.call(event.target.options, function (option) {
+          if (option.selected) {
+            optionsSelected.push(JSON.parse(option.getAttribute('data-item')));
+          }
+        });
+
+        _this.props.onChange(event, optionsSelected);
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiSelectMobile, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          id = _this$props.id,
+          itemList = _this$props.itemList,
+          multiple = _this$props.multiple,
+          value = _this$props.value;
+      var additionalProps = (0, _extends2.default)({}, multiple && {
+        multiple: 'multiple'
+      });
+      return _react.default.createElement("select", (0, _extends2.default)({
+        value: value,
+        style: {
+          width: this.props.width
+        },
+        onChange: this.handleChange,
+        className: classes.root,
+        name: id,
+        id: id
+      }, additionalProps), this.buildOptionList(itemList));
+    }
+  }]);
+  return HiSelectMobile;
+}(_react.default.Component);
+
+HiSelectMobile.defaultProps = {
+  itemList: []
+};
+HiSelectMobile.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Identifiant du select
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Liste des options du select
+   */
+  itemList: _propTypes.default.array.isRequired,
+
+  /**
+   * True s'il est possible de sélectionner plusieurs options
+   */
+  multiple: _propTypes.default.bool,
+
+  /**
+   * Fonction appelée lors de la sélection/désélection
+   */
+  onChange: _propTypes.default.func.isRequired,
+
+  /**
+   * Valeur(s) sélectionnée(s)
+   */
+  value: _propTypes.default.any,
+
+  /**
+   * Largeur du select
+   */
+  width: _propTypes.default.number
+} : {};
+
+var _default = (0, _withStyles.default)(styles)(HiSelectMobile);
+
+exports.default = _default;

package/es/HiAlertModal/HiAlertModal.js

@@ -115,7 +115,7 @@ class HiAlertModal extends React.PureComponent {
       color: theme.palette.background2,
       icon: backgroundIcon,
       size: iconSize
-    })), React.createElement(DialogTitle, {
+    })), title && React.createElement(DialogTitle, {
       disableTypography: true,
       classes: {
         root: classes.classTitle

package/es/HiChip/HiChip.js

@@ -106,6 +106,8 @@ function HiChip(props) {
     id,
     img,
     label,
+    onClick,
+    onKeyDown,
     onPrevious,
     onNext,
     onDelete,
@@ -120,13 +122,17 @@ function HiChip(props) {
   } = props;
   return React.createElement("div", {
     id: id,
+    role: 'button',
     className: classNames(classes.root, className, {
       [classes.leftNavigation]: onPrevious,
       [classes.rightNavigation]: onNext,
       [classes.deletable]: onDelete,
       [classes.leftIcon]: icon
     }),
-    title: title
+    title: title,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    tabIndex: "0"
   }, icon && React.createElement(HiIcon, {
     className: classNames(classes.icon, {
       [classes.iconClickable]: onIconClick
@@ -223,6 +229,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 
+  /**
+   * Fonction de callback au clic sur la chip
+   */
+  onClick: PropTypes.func,
+
   /**
    * Fonction de callback au clic sur l'icon close si cancelable = true
    */
@@ -233,6 +244,11 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onIconClick: PropTypes.func,
 
+  /**
+   * Fonction de callback à l'appui sur une touche du clavier
+   */
+  onKeyDown: PropTypes.func,
+
   /**
    * Fonction de callback au clic sur l'icon next
    */

package/es/HiDatePicker/HiDatePicker.js

@@ -17,11 +17,19 @@ import NavBar from './NavBar';
 import Weekday from './Weekday';
 import HiTextField from '../HiForm/HiTextField';
 import styles from './stylesheet';
+import { isMobile } from 'react-device-detect';
+import classNames from 'classnames';
+import HiFormControl from '../HiForm/HiFormControl';
+import HiDatePickerMobile from './HiDatePickerMobile';
 
 class HiDatePicker extends React.Component {
   constructor(props) {
     super();
 
+    this.handleInputChange = event => {
+      this.props.onChange(event.target.value);
+    };
+
     this.handleKeyDown = name => event => {
       if (event.key === 'Escape' && !event.shiftKey) {
         this.datePickerInput.hideDayPicker();
@@ -29,164 +37,155 @@ class HiDatePicker extends React.Component {
       }
     };
 
-    const today = moment().tz(props.timezoneName);
-    this.state = {
-      openedPanel: 'calendar',
-      currentMonth: props.value ? props.value : new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds())
-    }; // this.formatDate = this.formatDate.bind(this);
-
-    this.handleCalendarClick = this.handleCalendarClick.bind(this);
-    this.handleClockClick = this.handleClockClick.bind(this);
-    this.handleMonthClick = this.handleMonthClick.bind(this);
-    this.handleYearClick = this.handleYearClick.bind(this);
-    this.handleDayChange = this.handleDayChange.bind(this);
-    this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
-    this.handleReset = this.handleReset.bind(this);
-    this.handleTimeChange = this.handleTimeChange.bind(this);
-    this.openPanel = this.openPanel.bind(this);
-    this.renderCaption = this.renderCaption.bind(this);
-    this.renderOverlay = this.renderOverlay.bind(this);
-    this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
-    this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
-    this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
-
-  handleInputChange(event) {
-    this.props.onChange(event.target.value);
-  }
-
-  handleReset() {
-    const today = moment().tz(this.props.timezoneName);
-    this.handleCurrentMonthChange(new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()));
-    this.props.onReset();
-  }
+    this.handleReset = () => {
+      const today = moment().tz(this.props.timezoneName);
+      this.handleCurrentMonthChange(new Date(today.year(), today.month(), today.date(), today.hours(), today.minutes(), today.seconds(), today.milliseconds()));
+      this.props.onReset();
+    };
 
-  handleDayChange(day, modifiers) {
-    if (day) {
-      if (modifiers.selected) {
-        // Deselect day
-        this.props.onChange(undefined);
-      } else {
-        // Keep Time if set
-        if (this.props.enableTime && day !== undefined) {
-          if (this.props.value) {
-            day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-          } else {
-            day.setHours(0, 0);
+    this.handleDayChange = (day, modifiers) => {
+      if (day) {
+        if (modifiers.selected) {
+          // Deselect day
+          this.props.onChange(undefined);
+        } else {
+          // Keep Time if set
+          if (this.props.enableTime && day !== undefined) {
+            if (this.props.value) {
+              day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+            } else {
+              day.setHours(0, 0);
+            }
           }
+
+          this.props.onChange(day);
         }
 
-        this.props.onChange(day);
+        if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+          // Hide overlay & remove focus on input
+          document.activeElement.blur();
+        } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
+          // Open Time panel after date selection
+          this.openPanel('time');
+        }
       }
+    };
 
-      if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
-        // Hide overlay & remove focus on input
-        document.activeElement.blur();
-      } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
-        // Open Time panel after date selection
-        this.openPanel('time');
+    this.handleChangeMobile = event => {
+      let date;
+
+      if (event.target.value) {
+        date = new Date(event.target.value);
       }
-    }
-  }
 
-  handleCalendarClick() {
-    this.openPanel('calendar');
-  }
+      this.props.onChange(date);
+    };
 
-  handleClockClick() {
-    this.openPanel('time');
-  }
+    this.handleCalendarClick = () => {
+      this.openPanel('calendar');
+    };
 
-  handleMonthClick() {
-    this.openPanel('months');
-  }
+    this.handleClockClick = () => {
+      this.openPanel('time');
+    };
 
-  handleYearClick() {
-    this.openPanel('years');
-  }
+    this.handleMonthClick = () => {
+      this.openPanel('months');
+    };
 
-  handleCurrentMonthChange(day) {
-    this.setState({
-      // Current Month can't be anterior to minimumDate
-      currentMonth: day < this.props.minimumDate ? this.props.minimumDate : day,
-      openedPanel: 'calendar'
-    });
-  }
+    this.handleYearClick = () => {
+      this.openPanel('years');
+    };
 
-  handleTimeChange(date, precision) {
-    this.props.onChange(date);
+    this.handleCurrentMonthChange = day => {
+      this.setState({
+        // Current Month can't be anterior to minimumDate
+        currentMonth: day < this.props.minimumDate ? this.props.minimumDate : day,
+        openedPanel: 'calendar'
+      });
+    };
 
-    if (date instanceof Date && precision === 'minute') {
-      document.activeElement.blur();
-    }
-  }
+    this.handleTimeChange = (date, precision) => {
+      this.props.onChange(date);
 
-  openPanel(panel) {
-    this.setState({
-      openedPanel: panel
-    });
-  }
+      if (date instanceof Date && precision === 'minute') {
+        document.activeElement.blur();
+      }
+    };
 
-  renderCaption(propsCaption) {
-    return React.createElement(Caption, _extends({
-      onMonthClick: this.handleMonthClick,
-      onYearClick: this.handleYearClick
-    }, propsCaption));
-  }
+    this.openPanel = panel => {
+      this.setState({
+        openedPanel: panel
+      });
+    };
 
-  renderOverlay(propsOverlay) {
-    switch (this.state.openedPanel) {
-      case 'time':
-        return this.renderTimePickerOverlay(propsOverlay);
+    this.renderCaption = propsCaption => {
+      return React.createElement(Caption, _extends({
+        onMonthClick: this.handleMonthClick,
+        onYearClick: this.handleYearClick
+      }, propsCaption));
+    };
 
-      case 'months':
-        return this.renderMonthPickerOverlay(propsOverlay);
+    this.renderOverlay = propsOverlay => {
+      switch (this.state.openedPanel) {
+        case 'time':
+          return this.renderTimePickerOverlay(propsOverlay);
 
-      case 'years':
-        return this.renderYearPickerOverlay(propsOverlay);
+        case 'months':
+          return this.renderMonthPickerOverlay(propsOverlay);
 
-      case 'calendar':
-      default:
-        return React.createElement(Overlay, propsOverlay);
-    }
-  }
+        case 'years':
+          return this.renderYearPickerOverlay(propsOverlay);
 
-  renderMonthPickerOverlay(propsOverlay) {
-    const monthPickerProps = {
-      value: this.state.currentMonth,
-      onChange: this.handleCurrentMonthChange
+        case 'calendar':
+        default:
+          return React.createElement(Overlay, propsOverlay);
+      }
     };
-    return React.createElement(MonthPickerOverlay, _extends({
-      key: 'month-picker-overlay'
-    }, monthPickerProps, propsOverlay));
-  }
 
-  renderTimePickerOverlay(propsOverlay) {
-    const timePickerProps = {
-      value: this.props.value,
-      onChange: this.handleTimeChange,
-      onCalendarClick: this.handleCalendarClick
+    this.renderMonthPickerOverlay = propsOverlay => {
+      const monthPickerProps = {
+        value: this.state.currentMonth,
+        onChange: this.handleCurrentMonthChange
+      };
+      return React.createElement(MonthPickerOverlay, _extends({
+        key: 'month-picker-overlay'
+      }, monthPickerProps, propsOverlay));
     };
-    return React.createElement(TimePickerOverlay, _extends({
-      key: 'time-picker-overlay'
-    }, timePickerProps, propsOverlay));
-  }
 
-  renderYearPickerOverlay(propsOverlay) {
-    const yearPickerProps = {
-      value: this.state.currentMonth,
-      onChange: this.handleCurrentMonthChange,
-      disableFutureDays: this.props.disableFutureDays,
-      minimumDate: this.props.minimumDate
+    this.renderTimePickerOverlay = propsOverlay => {
+      const timePickerProps = {
+        value: this.props.value,
+        onChange: this.handleTimeChange,
+        onCalendarClick: this.handleCalendarClick
+      };
+      return React.createElement(TimePickerOverlay, _extends({
+        key: 'time-picker-overlay'
+      }, timePickerProps, propsOverlay));
+    };
+
+    this.renderYearPickerOverlay = propsOverlay => {
+      const yearPickerProps = {
+        value: this.state.currentMonth,
+        onChange: this.handleCurrentMonthChange,
+        disableFutureDays: this.props.disableFutureDays,
+        minimumDate: this.props.minimumDate
+      };
+      return React.createElement(YearPickerOverlay, _extends({
+        key: 'year-picker-overlay'
+      }, yearPickerProps, propsOverlay));
+    };
+
+    const _today = moment().tz(props.timezoneName);
+
+    this.state = {
+      openedPanel: 'calendar',
+      currentMonth: props.value ? props.value : new Date(_today.year(), _today.month(), _today.date(), _today.hours(), _today.minutes(), _today.seconds(), _today.milliseconds())
     };
-    return React.createElement(YearPickerOverlay, _extends({
-      key: 'year-picker-overlay'
-    }, yearPickerProps, propsOverlay));
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
   }
 
   render() {
@@ -264,7 +263,7 @@ class HiDatePicker extends React.Component {
     return React.createElement("div", {
       className: classes.root,
       onKeyDown: this.handleKeyDown()
-    }, React.createElement(DayPickerInput, {
+    }, !isMobile ? React.createElement(DayPickerInput, {
       ref: el => {
         this.datePickerInput = el;
       },
@@ -279,6 +278,23 @@ class HiDatePicker extends React.Component {
       formatDate: MomentLocaleUtils.formatDate,
       parseDate: MomentLocaleUtils.parseDate,
       onDayChange: this.handleDayChange
+    }) : React.createElement(HiDatePickerMobile, {
+      id: this.props.id,
+      label: this.props.label,
+      required: this.props.required,
+      disabled: this.props.disabled,
+      error: this.props.error,
+      errorText: this.props.errorText,
+      helperText: this.props.helperText,
+      helperIcon: this.props.helperIcon,
+      enableTime: enableTime,
+      value: value,
+      onChange: this.handleChangeMobile,
+      disablePastDays: disablePastDays,
+      disableFutureDays: disableFutureDays,
+      today: today,
+      minimumDate: minimumDate,
+      format: enableTime ? `${format} HH:mm` : format
     }));
   }
 

package/es/HiDatePicker/HiDatePickerMobile.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiFormControl from '../HiForm/HiFormControl';
+import moment from 'moment-timezone';
+import styles from './stylesheet';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import HiInput from '../HiForm/HiInput';
+
+class HiDatePickerMobile extends React.Component {
+  render() {
+    const {
+      classes,
+      id,
+      label,
+      required,
+      disabled,
+      error,
+      errorText,
+      helperIcon,
+      helperText,
+      enableTime,
+      value,
+      disablePastDays,
+      disableFutureDays,
+      minimumDate,
+      today,
+      range,
+      format
+    } = this.props;
+
+    const addtionalProps = _objectSpread({}, this.props.disabled && {
+      disabled: "disabled"
+    });
+
+    return React.createElement(HiFormControl, {
+      id: id,
+      label: label,
+      required: required,
+      disabled: disabled,
+      error: error,
+      errorText: errorText,
+      helperText: helperText,
+      helperIcon: helperIcon
+    }, React.createElement(HiInput, {
+      inputId: id,
+      name: id,
+      type: "text",
+      placeholder: this.props.placeholder,
+      value: !value ? '' : moment(value).format(format),
+      disabled: disabled
+    }), React.createElement("input", _extends({
+      className: classNames(classes.root, classes.rootMobile, {
+        [classes.mobileRangeRoot]: range
+      }),
+      id: id,
+      type: enableTime ? "datetime-local" : "date",
+      value: !value ? '' : enableTime ? moment(value).format('YYYY-MM-DDTHH:mm') : moment(value).format('YYYY-MM-DD'),
+      onChange: this.props.onChange,
+      min: disablePastDays ? today.format('YYYY-MM-DD') : minimumDate ? moment(minimumDate).format('YYYY-MM-DD') : '',
+      max: disableFutureDays ? today.format('YYYY-MM-DD') : ''
+    }, addtionalProps)));
+  }
+
+}
+
+HiDatePickerMobile.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: PropTypes.object,
+  disabled: PropTypes.bool,
+  disableFutureDays: PropTypes.bool,
+  disablePastDays: PropTypes.bool,
+  enableTime: PropTypes.bool,
+  error: PropTypes.bool,
+  errorText: PropTypes.string,
+  format: PropTypes.string,
+  helperIcon: PropTypes.string,
+  helperText: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  label: PropTypes.string,
+  minimumDate: PropTypes.any,
+  onChange: PropTypes.func,
+  range: PropTypes.bool,
+  required: PropTypes.bool,
+  today: PropTypes.any,
+  value: PropTypes.any
+} : {};
+export default withStyles(styles)(HiDatePickerMobile);