@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/es/HiDatePicker/HiDatePicker.js

@@ -1,8 +1,9 @@
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-import _extends from 'babel-runtime/helpers/extends';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { formatDate, parseDate } from 'react-day-picker/moment';
+import MomentLocaleUtils from 'react-day-picker/moment';
 import DayPickerInput from 'react-day-picker/DayPickerInput';
 import withStyles from '../styles/withStyles';
 import Caption from './Caption';
@@ -10,310 +11,340 @@ import Overlay from './Overlays/Overlay';
 import TimePickerOverlay from './Overlays/TimePickerOverlay';
 import MonthPickerOverlay from './Overlays/MonthPickerOverlay';
 import YearPickerOverlay from './Overlays/YearPickerOverlay';
-import Navbar from './Navbar';
+import NavBar from './NavBar';
 import Weekday from './Weekday';
-import { HiTextField } from '../HiForm';
+import HiTextField from '../HiForm/HiTextField';
 import styles from './stylesheet';
 
 class HiDatePicker extends React.Component {
+  constructor(props) {
+    super();
+    this.state = {
+      openedPanel: 'calendar',
+      currentMonth: props.value ? props.value : new Date()
+    }; // this.formatDate = this.formatDate.bind(this);
 
-    constructor(props) {
-        super();
-
-        this.state = {
-            openedPanel: 'calendar',
-            currentMonth: props.value ? props.value : new Date()
-        };
-
-        // 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.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);
-    }
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
 
-    handleReset() {
-        this.handleCurrentMonthChange(new Date());
-        this.props.onReset();
-    }
+  handleReset() {
+    this.handleCurrentMonthChange(new Date());
+    this.props.onReset();
+  }
 
-    handleDayChange(day, modifiers) {
-        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);
-        }
-        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');
+  handleInputChange(event) {
+    this.props.onChange(event.target.value);
+  }
+
+  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);
+          }
         }
-    }
 
-    handleCalendarClick() {
-        this.openPanel('calendar');
-    }
+        this.props.onChange(day);
+      }
 
-    handleClockClick() {
+      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');
+      }
     }
+  }
 
-    handleMonthClick() {
-        this.openPanel('months');
-    }
+  handleCalendarClick() {
+    this.openPanel('calendar');
+  }
 
-    handleYearClick() {
-        this.openPanel('years');
-    }
+  handleClockClick() {
+    this.openPanel('time');
+  }
 
-    handleCurrentMonthChange(day) {
-        this.setState({
-            // Current Month can't be anterior to minimumDate
-            currentMonth: day < this.props.minimumDate ? this.props.minimumDate : day,
-            openedPanel: 'calendar'
-        });
-    }
+  handleMonthClick() {
+    this.openPanel('months');
+  }
 
-    handleTimeChange(date, precision) {
-        this.props.onChange(date);
-        if (date instanceof Date && precision === 'minute') {
-            document.activeElement.blur();
-        }
-    }
+  handleYearClick() {
+    this.openPanel('years');
+  }
 
-    openPanel(panel) {
-        this.setState({
-            openedPanel: panel
-        });
-    }
+  handleCurrentMonthChange(day) {
+    this.setState({
+      // Current Month can't be anterior to minimumDate
+      currentMonth: day < this.props.minimumDate ? this.props.minimumDate : day,
+      openedPanel: 'calendar'
+    });
+  }
 
-    renderCaption(propsCaption) {
-        return React.createElement(Caption, _extends({
-            onMonthClick: this.handleMonthClick,
-            onYearClick: this.handleYearClick
-        }, propsCaption));
-    }
+  handleTimeChange(date, precision) {
+    this.props.onChange(date);
 
-    renderOverlay(propsOverlay) {
-        switch (this.state.openedPanel) {
-            case 'time':
-                return this.renderTimePickerOverlay(propsOverlay);
-            case 'months':
-                return this.renderMonthPickerOverlay(propsOverlay);
-            case 'years':
-                return this.renderYearPickerOverlay(propsOverlay);
-            case 'calendar':
-            default:
-                return React.createElement(Overlay, propsOverlay);
-        }
+    if (date instanceof Date && precision === 'minute') {
+      document.activeElement.blur();
     }
+  }
 
-    renderMonthPickerOverlay(propsOverlay) {
-        const monthPickerProps = {
-            value: this.state.currentMonth,
-            onChange: this.handleCurrentMonthChange
-        };
+  openPanel(panel) {
+    this.setState({
+      openedPanel: panel
+    });
+  }
 
-        return React.createElement(MonthPickerOverlay, _extends({
-            key: 'month-picker-overlay'
-        }, monthPickerProps, propsOverlay));
-    }
+  renderCaption(propsCaption) {
+    return React.createElement(Caption, _extends({
+      onMonthClick: this.handleMonthClick,
+      onYearClick: this.handleYearClick
+    }, propsCaption));
+  }
 
-    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));
-    }
+  renderOverlay(propsOverlay) {
+    switch (this.state.openedPanel) {
+      case 'time':
+        return this.renderTimePickerOverlay(propsOverlay);
 
-    renderYearPickerOverlay(propsOverlay) {
-        const yearPickerProps = {
-            value: this.state.currentMonth,
-            onChange: this.handleCurrentMonthChange
-        };
+      case 'months':
+        return this.renderMonthPickerOverlay(propsOverlay);
 
-        return React.createElement(YearPickerOverlay, _extends({ key: 'year-picker-overlay' }, yearPickerProps, propsOverlay));
-    }
+      case 'years':
+        return this.renderYearPickerOverlay(propsOverlay);
 
-    render() {
-        const _props = this.props,
-              {
-            classes,
-            disabledDays,
-            disablePastDays,
-            disableFutureDays,
-            enableTime,
-            format,
-            locale,
-            minimumDate,
-            onReset,
-            translations,
-            value,
-            hideOnDayClick
-        } = _props,
-              props = _objectWithoutProperties(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'enableTime', 'format', 'locale', 'minimumDate', 'onReset', 'translations', 'value', 'hideOnDayClick']);
-
-        const { currentMonth } = this.state;
-
-        const effectiveDisabledDays = _extends({}, disablePastDays && {
-            before: new Date()
-        }, disableFutureDays && {
-            after: new Date()
-        }, disabledDays);
-
-        const modifiersStyles = {
-            selected: {
-                borderRadius: '50%'
-            }
-        };
-
-        const dayPickerProps = _extends({
-            todayButton: translations.today,
-            onTodayButtonClick: this.handleCurrentMonthChange,
-            weekdayElement: Weekday,
-            navbarElement: props2 => React.createElement(Navbar, _extends({
-                showClockButton: enableTime,
-                onClockClick: this.handleClockClick
-            }, props2)),
-            captionElement: this.renderCaption,
-            classNames: classes,
-            disabledDays: effectiveDisabledDays,
-            selectedDays: value,
-            locale,
-            firstDayOfWeek: 1,
-            fromMonth: minimumDate,
-            modifiers: {
-                disabled: effectiveDisabledDays,
-                selected: value
-            },
-            modifiersStyles,
-            month: currentMonth
-        }, props);
-
-        const inputProps = _extends({}, onReset && {
-            onReset: this.handleReset
-        }, {
-            onBlur: this.handleBlur
-        }, props);
-
-        return React.createElement(
-            'div',
-            { className: classes.root },
-            React.createElement(DayPickerInput, {
-                ref: el => {
-                    this.datePickerInput = el;
-                },
-                value: value,
-                hideOnDayClick: hideOnDayClick,
-                overlayComponent: this.renderOverlay,
-                dayPickerProps: dayPickerProps,
-                component: HiTextField,
-                inputProps: inputProps,
-                placeholder: '',
-                format: enableTime ? `${format} HH:mm` : format,
-                formatDate: formatDate,
-                parseDate: parseDate,
-                onDayChange: this.handleDayChange
-            })
-        );
+      case 'calendar':
+      default:
+        return React.createElement(Overlay, propsOverlay);
     }
+  }
+
+  renderMonthPickerOverlay(propsOverlay) {
+    const monthPickerProps = {
+      value: this.state.currentMonth,
+      onChange: this.handleCurrentMonthChange
+    };
+    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
+    };
+    return React.createElement(TimePickerOverlay, _extends({
+      key: 'time-picker-overlay'
+    }, timePickerProps, propsOverlay));
+  }
+
+  renderYearPickerOverlay(propsOverlay) {
+    const yearPickerProps = {
+      value: this.state.currentMonth,
+      onChange: this.handleCurrentMonthChange
+    };
+    return React.createElement(YearPickerOverlay, _extends({
+      key: 'year-picker-overlay'
+    }, yearPickerProps, propsOverlay));
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      disabledDays,
+      disablePastDays,
+      disableFutureDays,
+      enableTime,
+      format,
+      locale,
+      minimumDate,
+      onReset,
+      translations,
+      value,
+      hideOnDayClick
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "format", "locale", "minimumDate", "onReset", "translations", "value", "hideOnDayClick"]);
+
+    const {
+      currentMonth
+    } = this.state;
+
+    const effectiveDisabledDays = _objectSpread({}, disablePastDays && {
+      before: new Date()
+    }, disableFutureDays && {
+      after: new Date()
+    }, disabledDays);
+
+    const modifiersStyles = {
+      selected: {
+        borderRadius: '50%'
+      }
+    };
+
+    const dayPickerProps = _objectSpread({
+      todayButton: translations.today,
+      onTodayButtonClick: this.handleCurrentMonthChange,
+      weekdayElement: Weekday,
+      navbarElement: props2 => React.createElement(NavBar, _extends({
+        showClockButton: enableTime,
+        onClockClick: this.handleClockClick
+      }, props2)),
+      captionElement: this.renderCaption,
+      classNames: classes,
+      disabledDays: effectiveDisabledDays,
+      selectedDays: typeof value === 'object' ? value : undefined,
+      locale,
+      firstDayOfWeek: 1,
+      fromMonth: minimumDate,
+      modifiers: {
+        disabled: effectiveDisabledDays,
+        selected: value
+      },
+      modifiersStyles,
+      month: currentMonth
+    }, props);
+
+    const inputProps = _objectSpread({}, onReset && {
+      onReset: this.handleReset
+    }, {
+      onBlur: this.handleBlur
+    }, props, {
+      onChange: this.handleInputChange
+    });
+
+    return React.createElement("div", {
+      className: classes.root
+    }, React.createElement(DayPickerInput, {
+      ref: el => {
+        this.datePickerInput = el;
+      },
+      value: value,
+      hideOnDayClick: hideOnDayClick,
+      overlayComponent: this.renderOverlay,
+      dayPickerProps: dayPickerProps,
+      component: HiTextField,
+      inputProps: inputProps,
+      placeholder: '',
+      format: enableTime ? `${format} HH:mm` : format,
+      formatDate: momentLocaleUtils.formatDate,
+      parseDate: momentLocaleUtils.parseDate,
+      onDayChange: this.handleDayChange
+    }));
+  }
+
 }
 
 HiDatePicker.defaultProps = {
-    disabledDays: [],
-    disablePastDays: false,
-    disableFutureDays: false,
-    enableTime: false,
-    format: 'YYYY-DD-MM',
-    hideOnDayClick: false,
-    locale: 'fr-FR',
-    minimumDate: new Date(2013, 4, 1), // by default 1 May 2013
-    translations: {
-        today: 'today'
-    }
+  disabledDays: [],
+  disablePastDays: false,
+  disableFutureDays: false,
+  enableTime: false,
+  format: 'YYYY-DD-MM',
+  hideOnDayClick: false,
+  locale: 'fr-FR',
+  minimumDate: new Date(2013, 4, 1),
+  // by default 1 May 2013
+  translations: {
+    today: 'today'
+  }
 };
 HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * ReactDayPicker prop
-     * Définie les jours non sélectionnables
-     */
-    disabledDays: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.instanceOf(Date)]),
-    /**
-     * Uniquement la sélection de date antérieures à aujourd'hui (inclus)
-     */
-    disableFutureDays: PropTypes.bool,
-    /**
-     * Uniquement la sélection de date postérieures à aujourd'hui (inclus)
-     */
-    disablePastDays: PropTypes.bool,
-    /**
-     * Ajoute la gestion de l'heure
-     */
-    enableTime: PropTypes.bool,
-    /**
-     * Format des dates affichées
-     */
-    format: PropTypes.string,
-    /**
-     * Si true : ferme la popup quand on sélectionne une date
-     */
-    hideOnDayClick: PropTypes.bool,
-    /**
-     * Locale utilisée
-     */
-    locale: PropTypes.string,
-    /**
-     * Date minimale sélectionnable
-     */
-    minimumDate: PropTypes.instanceOf(Date),
-    /**
-     * Callback à la sélection d'une date
-     *
-     * @param {Date} date sélectionnée
-     */
-    onChange: PropTypes.func.isRequired,
-    /**
-     * Callback au reset de l'input
-     */
-    onReset: PropTypes.func,
-    /**
-     * Traductions
-     */
-    translations: PropTypes.object,
-    /**
-     * Date sélectionnée
-     */
-    value: PropTypes.instanceOf(Date)
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * ReactDayPicker prop
+   * Définie les jours non sélectionnables
+   */
+  disabledDays: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.instanceOf(Date)]),
+
+  /**
+   * Uniquement la sélection de date antérieures à aujourd'hui (inclus)
+   */
+  disableFutureDays: PropTypes.bool,
+
+  /**
+   * Uniquement la sélection de date postérieures à aujourd'hui (inclus)
+   */
+  disablePastDays: PropTypes.bool,
+
+  /**
+   * Ajoute la gestion de l'heure
+   */
+  enableTime: PropTypes.bool,
+
+  /**
+   * Format des dates affichées
+   */
+  format: PropTypes.string,
+
+  /**
+   * Si true : ferme la popup quand on sélectionne une date
+   */
+  hideOnDayClick: PropTypes.bool,
+
+  /**
+   * Locale utilisée
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Date minimale sélectionnable
+   */
+  minimumDate: PropTypes.instanceOf(Date),
+
+  /**
+   * Callback à la sélection d'une date
+   *
+   * @param {Date} date sélectionnée
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Callback au reset de l'input
+   */
+  onReset: PropTypes.func,
+
+  /**
+   * Traductions
+   */
+  translations: PropTypes.object,
+
+  /**
+   * Date sélectionnée
+   */
+  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])
 } : {};
-export default withStyles(styles, { name: 'HmuiHiDatePicker' })(HiDatePicker);
+export default withStyles(styles, {
+  name: 'HmuiHiDatePicker'
+})(HiDatePicker);