@hipay/hipay-material-ui 2.0.0-beta.36 → 2.0.0-beta.37

package/es/HiDatePicker/HiDateRangePicker.js

@@ -0,0 +1,661 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import MomentLocaleUtils from 'react-day-picker/moment';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import { capitalize } from '../utils/helpers';
+import Caption from './Caption';
+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 Weekday from './Weekday';
+import { HiTextField } from '../HiForm';
+import styles from './stylesheet';
+
+class HiDateRangePicker extends React.Component {
+  constructor(props) {
+    super();
+
+    this.handleInputChange = inputName => event => {
+      this.event = event;
+      this.props.onChange(inputName, event.target.value);
+    };
+
+    this.handleDayPickerFocus = name => () => {
+      this.setState({
+        focusedInput: name
+      });
+    };
+
+    this.handleDayPickerBlur = name => () => {
+      this.setState({
+        focusedInput: ''
+      });
+
+      if (this.props.onBlur) {
+        this.props.onBlur(name);
+      }
+    };
+
+    this.state = {
+      fromCurrentMonth: props.from ? props.from : new Date(),
+      toCurrentMonth: props.to ? props.to : new Date(),
+      focusedInput: ''
+    };
+    this.handleReset = this.handleReset.bind(this);
+    this.handleDayChange = this.handleDayChange.bind(this);
+    this.handleDayChangeFrom = this.handleDayChangeFrom.bind(this);
+    this.handleDayChangeTo = this.handleDayChangeTo.bind(this);
+    this.handleCurrentMonthChange = this.handleCurrentMonthChange.bind(this);
+    this.handleCurrentMonthChangeFrom = this.handleCurrentMonthChangeFrom.bind(this);
+    this.handleCurrentMonthChangeTo = this.handleCurrentMonthChangeTo.bind(this);
+    this.handleTimeChange = this.handleTimeChange.bind(this);
+    this.handleCalendarClick = this.handleCalendarClick.bind(this);
+    this.handleCalendarClickFrom = this.handleCalendarClickFrom.bind(this);
+    this.handleCalendarClickTo = this.handleCalendarClickTo.bind(this);
+    this.handleClockClick = this.handleClockClick.bind(this);
+    this.handleClockClickFrom = this.handleClockClickFrom.bind(this);
+    this.handleClockClickTo = this.handleClockClickTo.bind(this);
+    this.handleMonthClick = this.handleMonthClick.bind(this);
+    this.handleMonthClickFrom = this.handleMonthClickFrom.bind(this);
+    this.handleMonthClickTo = this.handleMonthClickTo.bind(this);
+    this.handleYearClick = this.handleYearClick.bind(this);
+    this.handleYearClickFrom = this.handleYearClickFrom.bind(this);
+    this.handleYearClickTo = this.handleYearClickTo.bind(this);
+    this.handleDayPickerFocus = this.handleDayPickerFocus.bind(this);
+    this.handleDayPickerBlur = this.handleDayPickerBlur.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.openPanel = this.openPanel.bind(this);
+    this.renderCaption = this.renderCaption.bind(this);
+    this.renderCaptionFrom = this.renderCaptionFrom.bind(this);
+    this.renderCaptionTo = this.renderCaptionTo.bind(this);
+    this.renderNavBar = this.renderNavBar.bind(this);
+    this.renderNavBarFrom = this.renderNavBarFrom.bind(this);
+    this.renderNavBarTo = this.renderNavBarTo.bind(this);
+    this.renderOverlay = this.renderOverlay.bind(this);
+    this.renderOverlayFrom = this.renderOverlayFrom.bind(this);
+    this.renderOverlayTo = this.renderOverlayTo.bind(this);
+    this.renderMonthPickerOverlay = this.renderMonthPickerOverlay.bind(this);
+    this.renderTimePickerOverlay = this.renderTimePickerOverlay.bind(this);
+    this.renderYearPickerOverlay = this.renderYearPickerOverlay.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    // Focus From input on enabling
+    if (prevProps.disabled === true && this.props.disabled === false) {
+      this.timeout = setTimeout(() => {
+        if (this.fromInput.getInput()) {
+          this.fromInput.getInput().focus();
+        }
+      }, 0);
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  handleDayChange(name, day, modifiers) {
+    if (day) {
+      // if time disabled, focus TO input
+      // else focus current input
+      if (!this.props.enableTime) {
+        if (day instanceof Date) {
+          if (name === 'from' && this.toInput) {
+            this.toInput.getInput().focus();
+          } else if (name === 'to') {
+            if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
+              // trigger blur only if user clicks on date into calendar
+              // else keep focus to see day selection into calendar
+              document.activeElement.blur();
+            }
+
+            delete this.event;
+          }
+        }
+      } else {
+        this.timeout = setTimeout(() => {
+          if (this[`${name}Input`].getInput()) {
+            this[`${name}Input`].getInput().focus();
+          }
+        }, 10);
+      }
+
+      if (this.props.onChange) {
+        // Keep Time if set
+        if (this.props.enableTime) {
+          if (this.props[name]) {
+            day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
+          } else {
+            day.setHours(0, 0);
+          }
+        }
+
+        this.props.onChange(name, day);
+      }
+
+      if (this.props.enableTime) {
+        this.openPanel(name, 'time');
+      }
+    }
+  }
+
+  handleDayChangeFrom(day, modifiers) {
+    this.handleDayChange('from', day, modifiers);
+  }
+
+  handleDayChangeTo(day, modifiers) {
+    this.handleDayChange('to', day, modifiers);
+  }
+
+  handleCurrentMonthChange(name, day) {
+    this.setState({
+      [`${name}CurrentMonth`]: day,
+      [`${name}OpenedPanel`]: 'calendar'
+    });
+  }
+
+  handleCurrentMonthChangeFrom(day) {
+    this.handleCurrentMonthChange('from', day);
+  }
+
+  handleCurrentMonthChangeTo(day) {
+    this.handleCurrentMonthChange('to', day);
+  }
+
+  handleCalendarClick(name) {
+    this.openPanel(name, 'calendar');
+  }
+
+  handleCalendarClickFrom() {
+    this.handleCalendarClick('from');
+  }
+
+  handleCalendarClickTo() {
+    this.handleCalendarClick('to');
+  }
+
+  handleClockClick(name) {
+    this.openPanel(name, 'time');
+  }
+
+  handleClockClickFrom() {
+    this.handleClockClick('from');
+  }
+
+  handleClockClickTo() {
+    this.handleClockClick('to');
+  }
+
+  handleMonthClick(name) {
+    this.openPanel(name, 'months');
+  }
+
+  handleMonthClickFrom() {
+    this.handleMonthClick('from');
+  }
+
+  handleMonthClickTo() {
+    this.handleMonthClick('to');
+  }
+
+  handleYearClick(name) {
+    this.openPanel(name, 'years');
+  }
+
+  handleYearClickFrom() {
+    this.handleYearClick('from');
+  }
+
+  handleYearClickTo() {
+    this.handleYearClick('to');
+  }
+
+  handleTimeChange(name, date, precision) {
+    this.props.onChange(name, date);
+
+    if (name === 'from' && precision === 'minute') {
+      this.fromInput.hideDayPicker();
+      this.toInput.getInput().focus();
+      this.toInput.showDayPicker();
+    } else if (name === 'to' && precision === 'minute') {
+      this.toInput.hideDayPicker();
+      document.activeElement.blur();
+    }
+  }
+
+  handleReset(name) {
+    this.handleCurrentMonthChange(name, new Date());
+    this.timeout = setTimeout(() => {
+      if (this.props.onReset) {
+        this.props.onReset(name);
+      }
+    }, 0);
+  }
+
+  openPanel(name, panel) {
+    this.setState({
+      [`${name}OpenedPanel`]: panel
+    });
+  }
+
+  renderCaption(name, propsCaption) {
+    return React.createElement(Caption, _extends({
+      onMonthClick: this[`handleMonthClick${capitalize(name)}`],
+      onYearClick: this[`handleYearClick${capitalize(name)}`]
+    }, propsCaption));
+  }
+
+  renderCaptionFrom(propsCaption) {
+    return this.renderCaption('from', propsCaption);
+  }
+
+  renderCaptionTo(propsCaption) {
+    return this.renderCaption('to', propsCaption);
+  }
+
+  renderNavBar(name, propsNavBar) {
+    return React.createElement(NavBar, _extends({
+      showClockButton: this.props.enableTime,
+      onClockClick: this[`handleClockClick${capitalize(name)}`]
+    }, propsNavBar));
+  }
+
+  renderNavBarFrom(propsNavBar) {
+    return this.renderNavBar('from', propsNavBar);
+  }
+
+  renderNavBarTo(propsNavBar) {
+    return this.renderNavBar('to', propsNavBar);
+  }
+
+  renderOverlay(name, propsOverlay, staticPosition) {
+    const rangeOverlayProps = _objectSpread({}, propsOverlay, {
+      side: name,
+      staticPosition
+    });
+
+    switch (this.state[`${name}OpenedPanel`]) {
+      case 'time':
+        return this.renderTimePickerOverlay(name, rangeOverlayProps);
+
+      case 'months':
+        return this.renderMonthPickerOverlay(name, rangeOverlayProps);
+
+      case 'years':
+        return this.renderYearPickerOverlay(name, rangeOverlayProps);
+
+      case 'calendar':
+      default:
+        return React.createElement(Overlay, rangeOverlayProps);
+    }
+  }
+
+  renderOverlayFrom(propsOverlay) {
+    return this.renderOverlay('from', propsOverlay, this.props.staticPosition);
+  }
+
+  renderOverlayTo(propsOverlay) {
+    return this.renderOverlay('to', propsOverlay, this.props.staticPosition);
+  }
+
+  renderMonthPickerOverlay(name, propsOverlay) {
+    const monthPickerProps = {
+      value: this.state[`${name}CurrentMonth`],
+      onChange: this[`handleCurrentMonthChange${capitalize(name)}`]
+    };
+    return React.createElement(MonthPickerOverlay, _extends({
+      key: `${name}-month-picker-overlay`
+    }, monthPickerProps, propsOverlay));
+  }
+
+  renderTimePickerOverlay(name, propsOverlay) {
+    const timePickerProps = {
+      value: this.props[name],
+      onChange: (date, precision) => this.handleTimeChange(name, date, precision),
+      onCalendarClick: this[`handleCalendarClick${capitalize(name)}`]
+    };
+    return React.createElement(TimePickerOverlay, _extends({
+      key: `${name}-time-picker-overlay`
+    }, timePickerProps, propsOverlay));
+  }
+
+  renderYearPickerOverlay(name, propsOverlay) {
+    const yearPickerProps = {
+      value: this.state[`${name}CurrentMonth`],
+      onChange: this[`handleCurrentMonthChange${capitalize(name)}`],
+      disabledFutureDays: this.props.disableFutureDays,
+      disabledPastDays: this.props.disablePastDays
+    };
+    return React.createElement(YearPickerOverlay, _extends({
+      key: `${name}-year-picker-overlay`
+    }, yearPickerProps, propsOverlay));
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      disabledDays,
+      disablePastDays,
+      disableFutureDays,
+      enableTime,
+      labelFrom,
+      labelTo,
+      locale,
+      format,
+      from,
+      minimumDate,
+      onReset,
+      to,
+      translations,
+      id,
+      staticPosition
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, ["classes", "disabledDays", "disablePastDays", "disableFutureDays", "enableTime", "labelFrom", "labelTo", "locale", "format", "from", "minimumDate", "onReset", "to", "translations", "id", "staticPosition"]);
+
+    const {
+      fromCurrentMonth,
+      toCurrentMonth
+    } = this.state;
+    const now = new Date();
+    const modifiers = {
+      start: from,
+      end: to
+    };
+    const modifiersStyles = {
+      start: {
+        borderTopLeftRadius: '50%',
+        borderBottomLeftRadius: '50%'
+      },
+      end: {
+        borderTopRightRadius: '50%',
+        borderBottomRightRadius: '50%'
+      }
+    };
+    const selectedDays = [];
+    const selected = {};
+
+    if (from instanceof Date) {
+      selectedDays.push(from);
+      selected.from = from;
+    }
+
+    if (to instanceof Date) {
+      selectedDays.push(to);
+      selected.to = to;
+    }
+
+    if (Object.values(selected).length > 0) {
+      selectedDays.push(selected);
+    }
+
+    const dayPickerProps = _objectSpread({
+      classNames: classes,
+      disabledDays,
+      firstDayOfWeek: 1,
+      fromMonth: minimumDate,
+      locale,
+      modifiers,
+      modifiersStyles,
+      // Both are required ?
+      selectedDays,
+      todayButton: translations.today,
+      weekdayElement: Weekday
+    }, props); // Build Props for the From DatePicker
+    // Disable days after 'to' date if define
+
+
+    let after;
+
+    if (to instanceof Date && disableFutureDays) {
+      after = to < now ? now : to;
+    } else if (to instanceof Date) {
+      after = to;
+    } else if (disableFutureDays) {
+      after = now;
+    }
+
+    const disabledDaysFrom = _objectSpread({}, disablePastDays && {
+      before: now
+    }, (to || disableFutureDays) && {
+      after
+    }, disabledDays);
+
+    const fromDayPickerProps = _objectSpread({}, dayPickerProps, {
+      onTodayButtonClick: this.handleCurrentMonthChangeFrom,
+      NavBarElement: this.renderNavBarFrom,
+      captionElement: this.renderCaptionFrom,
+      disabledDays: disabledDaysFrom,
+      month: fromCurrentMonth,
+      modifiers: _objectSpread({}, modifiers, {
+        disabled: disabledDaysFrom
+      })
+    }); // Build Props for the To DatePicker
+    // Disable days before 'from' date if define
+
+
+    let before;
+
+    if (from instanceof Date && disablePastDays) {
+      before = from < now ? now : from;
+    } else if (from instanceof Date) {
+      before = from;
+    } else if (disablePastDays) {
+      before = now;
+    }
+
+    const disabledDaysTo = _objectSpread({}, (from || disablePastDays) && {
+      before
+    }, disableFutureDays && {
+      after: now
+    }, disabledDays);
+
+    const toDayPickerProps = _objectSpread({}, dayPickerProps, {
+      onTodayButtonClick: this.handleCurrentMonthChangeTo,
+      NavBarElement: this.renderNavBarTo,
+      captionElement: this.renderCaptionTo,
+      disabledDays: disabledDaysTo,
+      month: toCurrentMonth,
+      modifiers: _objectSpread({}, modifiers, {
+        disabled: disabledDaysTo
+      })
+    }); // From & To InputProps
+
+
+    const fromInputProps = _objectSpread({}, onReset && {
+      onReset: () => this.handleReset('from')
+    }, props, labelFrom && {
+      label: labelFrom
+    }, {
+      id: `${id}-from`,
+      onChange: this.handleInputChange('from')
+    });
+
+    const toInputProps = _objectSpread({}, onReset && {
+      onReset: () => this.handleReset('to')
+    }, props, labelTo && {
+      label: labelTo
+    }, {
+      id: `${id}-to`,
+      onChange: this.handleInputChange('to')
+    });
+
+    const toClass = classNames(classes.toInput, {
+      [classes.absolute]: staticPosition === true && this.state.focusedInput === 'from',
+      [classes.right4]: staticPosition === true && this.state.focusedInput === 'from'
+    });
+    return React.createElement("div", {
+      className: classNames(classes.root, classes.rangePickerContainer)
+    }, React.createElement("div", {
+      className: classes.fromInput,
+      onFocus: this.handleDayPickerFocus('from'),
+      onBlur: this.handleDayPickerBlur('from')
+    }, React.createElement("div", null, React.createElement(DayPickerInput, {
+      ref: el => {
+        this.fromInput = el;
+      },
+      value: from,
+      hideOnDayClick: false,
+      overlayComponent: this.renderOverlayFrom,
+      dayPickerProps: fromDayPickerProps,
+      component: HiTextField,
+      inputProps: fromInputProps,
+      format: enableTime ? `${format} HH:mm` : format,
+      formatDate: MomentLocaleUtils.formatDate,
+      parseDate: MomentLocaleUtils.parseDate,
+      onDayChange: this.handleDayChangeFrom,
+      placeholder: ''
+    }))), React.createElement("div", {
+      className: toClass,
+      onFocus: this.handleDayPickerFocus('to'),
+      onBlur: this.handleDayPickerBlur('to')
+    }, React.createElement(DayPickerInput, {
+      ref: el => {
+        this.toInput = el;
+      },
+      value: to,
+      hideOnDayClick: false,
+      overlayComponent: this.renderOverlayTo,
+      dayPickerProps: toDayPickerProps,
+      component: HiTextField,
+      inputProps: toInputProps,
+      format: enableTime ? `${format} HH:mm` : format,
+      formatDate: MomentLocaleUtils.formatDate,
+      parseDate: MomentLocaleUtils.parseDate,
+      onDayChange: this.handleDayChangeTo,
+      placeholder: ''
+    })));
+  }
+
+}
+
+HiDateRangePicker.defaultProps = {
+  disabledDays: [],
+  disablePastDays: false,
+  disableFutureDays: false,
+  staticPosition: false,
+  enableTime: false,
+  format: 'YYYY-DD-MM',
+  labelFrom: 'Start',
+  labelTo: 'End',
+  locale: 'fr-FR',
+  minimumDate: new Date(2013, 4, 1),
+  // by default 1 May 2013
+  translations: {
+    today: 'today',
+    hour: 'Hour',
+    minute: 'Minute',
+    month: 'Month',
+    year: 'Year'
+  }
+};
+HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Inactif
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * 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 (inclu)
+   */
+  disableFutureDays: PropTypes.bool,
+
+  /**
+   * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+   */
+  disablePastDays: PropTypes.bool,
+
+  /**
+   * Ajoute la gestion de l'heure
+   */
+  enableTime: PropTypes.bool,
+
+  /**
+   * Format des dates affichées
+   */
+  format: PropTypes.string,
+
+  /**
+   * Date de début sélectionnée
+   */
+  from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /**
+   * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Label du champs de début
+   */
+  labelFrom: PropTypes.string,
+
+  /**
+   * Label du champs de fin
+   */
+  labelTo: PropTypes.string,
+
+  /**
+   * Locale utilisée
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Date minimale sélectionnable
+   */
+  minimumDate: PropTypes.instanceOf(Date),
+
+  /**
+   * Callback à la sélection d'une date
+   * @param {string} nom de l'input
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Callback à la sélection d'une date
+   * @param {string} nom du champs
+   * @param {string} nouvelle valeur du champs
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Callback au reset de l'input
+   * @param {string} nom du champs réinitialisé
+   */
+  onReset: PropTypes.func,
+
+  /**
+   * Si true, le calendrier sera dans une div static plutot que dans une popper absolute
+   */
+  staticPosition: PropTypes.bool,
+
+  /**
+   * Date de fin sélectionnée
+   */
+  to: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
+  /**
+   * Traductions
+   */
+  translations: PropTypes.object
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiHiDateRangePicker'
+})(HiDateRangePicker);