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

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);

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',