@spothero/ui 15.1.0 → 15.1.1

package/styles/DateTime/DateTimeRangePicker.jsx

@@ -1,629 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import uuidV4 from 'uuid/v4';
-import DateUtils from '@spothero/utils/date';
-import TimeUtils from '@spothero/utils/time';
-import DateTimePicker from './DateTimePicker';
-
-const TOOLTIP_TYPES = ['date', 'time', 'none'];
-
-export default class DateTimeRangePicker extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A unique ID which is used to identify the start picker for accessibility purposes on the client as well as the server. */
-        startId: PropTypes.string.isRequired,
-        /** A unique ID which is used to identify the end picker for accessibility purposes on the client as well as the server. */
-        endId: PropTypes.string.isRequired,
-        /** Whether to show the calendar and clock icons in the selectors. */
-        useIcons: PropTypes.bool,
-        /** If using the icons, whether they should appear on the left or right side of the input fields. */
-        iconPosition: PropTypes.oneOf(['left', 'right']),
-        /** A custom label (typically a Label component) to display above the start date input. */
-        startDateLabel: PropTypes.node,
-        /** A custom label (typically a Label component) to display above the start time selector. */
-        startTimeLabel: PropTypes.node,
-        /** A custom label (typically a Label component) to display above the end date input. */
-        endDateLabel: PropTypes.node,
-        /** A custom label (typically a Label component) to display above the end time selector. */
-        endTimeLabel: PropTypes.node,
-        /** A unique name which is used to identify the start date element. If belonging to a form this is used as the key for serialization and is required. */
-        startDateName: PropTypes.string,
-        /** A unique name which is used to identify the start time element. If belonging to a form this is used as the key for serialization and is required. */
-        startTimeName: PropTypes.string,
-        /** A unique name which is used to identify the end date element. If belonging to a form this is used as the key for serialization and is required. */
-        endDateName: PropTypes.string,
-        /** A unique name which is used to identify the end time element. If belonging to a form this is used as the key for serialization and is required. */
-        endTimeName: PropTypes.string,
-        /** The multiplier with which to create selectable times in the dropdown (in minutes). */
-        timeStep: PropTypes.number,
-        /** The amount of time (in minutes) the end time should bump up when the start date is after end date. Usually set to the same as timeStep. */
-        endTimeBump: PropTypes.number,
-        /** An element or string to separate the start date/time from the end date/time. */
-        separator: PropTypes.node,
-        /** A function that alters how the selected start date is displayed in the input field. Takes the date in MM/DD/YYYY format and should return a string with the new format. */
-        startDateDisplayFormat: PropTypes.func,
-        /** The <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">format</a> to display the start time in. */
-        startTimeDisplayFormat: PropTypes.string,
-        /** A function that alters how the selected end date is displayed in the input field. Takes the date in MM/DD/YYYY format and should return a string with the new format. */
-        endDateDisplayFormat: PropTypes.func,
-        /** The <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">format</a> to display the end time in. */
-        endTimeDisplayFormat: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the start date which should be selected. */
-        startDate: PropTypes.string,
-        /** A string in the format of 'hh:mm A' representing the start time which should be selected. */
-        startTime: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the end date which should be selected. */
-        endDate: PropTypes.string,
-        /** A string in the format of 'hh:mm A' representing the end time which should be selected. */
-        endTime: PropTypes.string,
-        /**
-         * Function to execute when the selected start date and/or start time changes.
-         *
-         * @param {String} startDate - The start date in the format 'MM/DD/YYYY'.
-         * @param {String} startTime - The start time in the format 'hh:mm A'.
-         * @param {String} endDate - The end date in the format 'MM/DD/YYYY'.
-         * @param {String} endTime - The end time in the format 'hh:mm A'.
-         */
-        onStartChange: PropTypes.func,
-        /**
-         * Function to execute when the selected end date and/or end time changes.
-         *
-         * @param {String} startDate - The start date in the format 'MM/DD/YYYY'.
-         * @param {String} startTime - The start time in the format 'hh:mm A'.
-         * @param {String} endDate - The end date in the format 'MM/DD/YYYY'.
-         * @param {String} endTime - The end time in the format 'hh:mm A'.
-         */
-        onEndChange: PropTypes.func,
-        /**
-         * Where the applicable start tooltip should be anchored to.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        startTooltipType: PropTypes.oneOf(TOOLTIP_TYPES),
-        /**
-         * Where the applicable end tooltip should be anchored to.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        endTooltipType: PropTypes.oneOf(TOOLTIP_TYPES),
-        /**
-         * The message to display inside of the start tooltip.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        startTooltipMessage: PropTypes.string,
-        /**
-         * The message to display inside of the end tooltip.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        endTooltipMessage: PropTypes.string,
-        /**
-         * Where to position the tooltip in relation to the triggering element.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-        /**
-         * Whether to reposition the tooltip when it moves, be it via window resize or scrolling or whatever moves it.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        updateTooltipPositionOnMove: PropTypes.bool,
-        /** Whether to disable days before today in the start date selector. */
-        disableStartPast: PropTypes.bool,
-        /** A string in the format 'MM/DD/YYYY' representing the date where days before it should be disabled in the start calendar. */
-        disableStartDateBefore: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the date where days after it should be disabled in the start calendar. */
-        disableStartDateAfter: PropTypes.string,
-        /** A string in the format 'hh:mm A' representing the time where times before it should be disabled in the start selector. */
-        disableStartTimeBefore: PropTypes.string,
-        /** A string in the format 'hh:mm A' representing the time where times after it should be disabled in the start selector. */
-        disableStartTimeAfter: PropTypes.string,
-        /** Whether to disable days before today in the end date selector. */
-        disableEndPast: PropTypes.bool,
-        /** A string in the format 'MM/DD/YYYY' representing the date where days before it should be disabled in the end calendar. */
-        disableEndDateBefore: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the date where days after it should be disabled in the end calendar. */
-        disableEndDateAfter: PropTypes.string,
-        /** A string in the format 'hh:mm A' representing the time where times before it should be disabled in the end selector. */
-        disableEndTimeBefore: PropTypes.string,
-        /** A string in the format 'hh:mm A' representing the time where times after it should be disabled in the end selector. */
-        disableEndTimeAfter: PropTypes.string,
-        /** Whether to disable the Start DateTimePicker. */
-        disableStartDateTimePicker: PropTypes.bool,
-        /** Whether to disable the End DateTimePicker. */
-        disableEndDateTimePicker: PropTypes.bool,
-        /** Enables automatically bumping the end date/time to be the start date/time plus `endTimeBump`. If false, the fields will be marked invalid. */
-        autoBumpInvalidEnabled: PropTypes.bool,
-        /** Puts the calendar in the center of the page with a shim behind it. */
-        useTetherShim: PropTypes.bool,
-        /** Forces highlighting all the fields in the red error state. */
-        areAllFieldsEmpty: PropTypes.bool,
-        /**
-         * Function to execute when the selected date(s) are valid.
-         */
-        onValid: PropTypes.func,
-        /**
-         * Function to execute when the selected date(s) are invalid.
-         */
-        onInvalid: PropTypes.func,
-    };
-    static defaultProps = {
-        useIcons: true,
-        timeStep: 30,
-        endTimeBump: 30,
-        disableStartPast: true,
-        disableEndPast: true,
-        iconPosition: 'right',
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {
-            startId,
-            endId,
-            startDate,
-            startTime,
-            endDate,
-            endTime,
-            disableEndTimeBefore,
-            startTooltipType,
-            startTooltipMessage,
-            endTooltipType,
-            endTooltipMessage,
-            tooltipPosition,
-            updateTooltipPositionOnMove,
-        } = props;
-
-        if (!startId || !endId) {
-            throw new Error(
-                `The props 'startId' and 'endId' are required to make DateTimeRangePicker accessible for users using assistive technologies such as screen readers. Check the render method of DateTimeRangePicker.`
-            );
-        }
-
-        if (
-            startTooltipType ||
-            startTooltipMessage ||
-            endTooltipType ||
-            endTooltipMessage ||
-            tooltipPosition ||
-            updateTooltipPositionOnMove
-        ) {
-            throw new Error(
-                'Tooltip support inside of DateTimePicker was removed in v6.0.0. Use dateNode and timeNode getters in a parent component to add tooltips manually as necessary.'
-            );
-        }
-
-        this.state = {
-            startDate,
-            startTime,
-            endDate,
-            endTime,
-            disableEndTimeBefore,
-            addErrorClass: false,
-            addHighlightClass: false,
-            endKey: uuidV4(),
-        };
-    }
-
-    componentDidMount() {
-        this._checkInitialTimeDisabling();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {onValid, onInvalid} = this.props;
-        const {
-            startDate,
-            startTime,
-            endDate,
-            endTime,
-            addHighlightClass,
-        } = this.state;
-        const {
-            startDate: prevStartDate,
-            startTime: prevStartTime,
-            endDate: prevEndDate,
-            endTime: prevEndTime,
-        } = prevState;
-        const startMoment =
-            startDate && startTime
-                ? this._getCombinedDate(startDate, startTime)
-                : null;
-        const endMoment =
-            endDate && endTime ? this._getCombinedDate(endDate, endTime) : null;
-        const validationState = {
-            startDate,
-            startTime,
-            endDate,
-            endTime,
-            startMoment,
-            endMoment,
-            isEndDayBeforeStartDay:
-                startMoment &&
-                endMoment &&
-                endMoment.isBefore(startMoment, 'day'),
-            isEndTimeSameOrBeforeStartTime:
-                startMoment &&
-                endMoment &&
-                endMoment.isSameOrBefore(startMoment, 'hour'),
-        };
-        let isValid = true;
-
-        if (addHighlightClass) {
-            // if the previous state of the component included the highlight class remove it here
-            // so that next time it needs to highlight it can be re-added and the animation plays
-            this._clearHighlightTimeout();
-
-            this._removeHighlightTimeout = setTimeout(() => {
-                this.setState({
-                    addHighlightClass: false,
-                });
-            }, 3000);
-        }
-
-        if (startDate && startTime && endDate && endTime) {
-            if (
-                startDate !== prevStartDate ||
-                startTime !== prevStartTime ||
-                endDate !== prevEndDate ||
-                endTime !== prevEndTime
-            ) {
-                isValid = this._checkValidity();
-            }
-        }
-
-        if (!isValid && onInvalid) {
-            onInvalid(validationState);
-        } else if (isValid && onValid) {
-            onValid(validationState);
-        }
-    }
-
-    componentWillUnmount() {
-        this._clearHighlightTimeout();
-    }
-
-    _onStartChange = ({selectedDate, selectedTime}) => {
-        const {onStartChange} = this.props;
-        const {endDate, endTime} = this.state;
-        const newData = {
-            startDate: selectedDate,
-            startTime: selectedTime,
-            endDate,
-            endTime,
-        };
-
-        this.setState({
-            startDate: selectedDate,
-            startTime: selectedTime,
-            ...this._getDisableEndTimeBefore(newData),
-        });
-
-        if (onStartChange) {
-            onStartChange(newData);
-        }
-    };
-
-    _onEndChange = ({selectedDate, selectedTime}) => {
-        const {onEndChange} = this.props;
-        const {startDate, startTime} = this.state;
-        const newData = {
-            startDate,
-            startTime,
-            endDate: selectedDate,
-            endTime: selectedTime,
-        };
-
-        this.setState({
-            endDate: selectedDate,
-            endTime: selectedTime,
-            ...this._getDisableEndTimeBefore(newData),
-        });
-
-        if (onEndChange) {
-            onEndChange(newData);
-        }
-    };
-
-    _checkInitialTimeDisabling() {
-        const {startDate, startTime, endDate, endTime} = this.state;
-        const {disableEndTimeBefore, endKey} = this._getDisableEndTimeBefore({
-            startDate,
-            startTime,
-            endDate,
-            endTime,
-        });
-
-        this.setState({
-            disableEndTimeBefore,
-            endKey,
-        });
-    }
-
-    _clearHighlightTimeout() {
-        if (this._removeHighlightTimeout) {
-            clearTimeout(this._removeHighlightTimeout);
-        }
-    }
-
-    _getCombinedDate(date, time) {
-        return DateUtils.combineDateAndTime(
-            DateUtils.getAsMoment(date),
-            TimeUtils.getAsMoment(time)
-        );
-    }
-
-    _checkValidity() {
-        const {autoBumpInvalidEnabled, endTimeBump, onEndChange} = this.props;
-        const {startDate, startTime, endDate, endTime} = this.state;
-        const start = this._getCombinedDate(startDate, startTime);
-        const end = this._getCombinedDate(endDate, endTime);
-        const newState = {
-            addErrorClass: false,
-            endDate,
-            endTime,
-        };
-        let isValid = true;
-
-        if (end.isSameOrBefore(start)) {
-            isValid = false;
-
-            if (autoBumpInvalidEnabled) {
-                isValid = true;
-
-                const newEnd = start.clone().add(endTimeBump, 'minutes');
-
-                newState.endDate = newEnd.format('MM/DD/YYYY');
-                newState.endTime = newEnd.format('hh:mm A');
-                newState.addHighlightClass = true;
-                newState.endKey = uuidV4();
-
-                // check what times should be disabled based on newly selected values
-                const {
-                    disableEndTimeBefore,
-                    endTime: newEndTime,
-                } = this._getDisableEndTimeBefore({
-                    startDate,
-                    startTime,
-                    endDate: newState.endDate,
-                    endTime: newState.endTime,
-                });
-
-                newState.disableEndTimeBefore = disableEndTimeBefore;
-
-                if (newEndTime) {
-                    newState.endTime = newEndTime;
-                }
-            } else {
-                newState.addErrorClass = true;
-            }
-        }
-
-        this.setState(newState);
-
-        if (onEndChange) {
-            onEndChange({
-                startDate,
-                startTime,
-                endDate: newState.endDate,
-                endTime: newState.endTime,
-            });
-        }
-
-        return isValid;
-    }
-
-    _getDisableEndTimeBefore({startDate, startTime, endDate, endTime}) {
-        const {
-            timeStep,
-            endTimeBump,
-            autoBumpInvalidEnabled,
-            disableEndTimeBefore: propDisableEndTimeBefore,
-        } = this.props;
-        const {disableEndTimeBefore, endKey} = this.state;
-        const newState = {
-            disableEndTimeBefore,
-            endKey,
-        };
-
-        if (startDate && startTime && endDate && endTime) {
-            const start = this._getCombinedDate(startDate, startTime);
-            const end = this._getCombinedDate(endDate, endTime);
-
-            if (start.isSame(end, 'day')) {
-                newState.disableEndTimeBefore = start
-                    .clone()
-                    .add(timeStep, 'minutes')
-                    .format('hh:mm A');
-                newState.endKey = uuidV4();
-
-                if (
-                    start.isSameOrAfter(end, 'hour') &&
-                    autoBumpInvalidEnabled
-                ) {
-                    // bump the end time because it will get bumped anyway due to the prior time not being in the list anymore
-                    newState.endTime = start
-                        .clone()
-                        .add(endTimeBump, 'minutes')
-                        .format('hh:mm A');
-                    newState.addHighlightClass = true;
-                }
-            } else if (
-                newState.disableEndTimeBefore !== propDisableEndTimeBefore
-            ) {
-                newState.disableEndTimeBefore = propDisableEndTimeBefore;
-                newState.endKey = uuidV4();
-            }
-        }
-
-        return newState;
-    }
-
-    /**
-     * Getter for the start date time picker.
-     *
-     * @public
-     * @returns {Element} - The component reference.
-     */
-    get startDateTime() {
-        return this._startDateTime;
-    }
-
-    /**
-     * Getter for the end date time picker.
-     *
-     * @public
-     * @returns {Element} - The component reference.
-     */
-    get endDateTime() {
-        return this._endDateTime;
-    }
-
-    render() {
-        const {
-            className,
-            startId,
-            endId,
-            useIcons,
-            iconPosition,
-            startDateLabel,
-            startTimeLabel,
-            endDateLabel,
-            endTimeLabel,
-            startDateName,
-            startTimeName,
-            endDateName,
-            endTimeName,
-            timeStep,
-            separator,
-            disableStartPast,
-            disableStartDateBefore,
-            disableStartDateAfter,
-            disableStartTimeBefore,
-            disableStartTimeAfter,
-            disableEndPast,
-            disableEndDateBefore,
-            disableEndDateAfter,
-            disableEndTimeAfter,
-            disableStartDateTimePicker,
-            disableEndDateTimePicker,
-            areAllFieldsEmpty,
-            useTetherShim,
-            startDateDisplayFormat,
-            startTimeDisplayFormat,
-            endDateDisplayFormat,
-            endTimeDisplayFormat,
-        } = this.props;
-        const {
-            startDate,
-            startTime,
-            endDate,
-            endTime,
-            addErrorClass,
-            disableEndTimeBefore,
-            endKey,
-            addHighlightClass,
-        } = this.state;
-        const classes = classNames('DateTimeRangePicker', className);
-        const startClasses = classNames('DateTimePicker-start', {
-            'DateTimePicker-error': areAllFieldsEmpty,
-        });
-
-        const endClasses = classNames(
-            'DateTimePicker-end',
-            {'DateTimePicker-highlight': addHighlightClass},
-            {'DateTimePicker-error': addErrorClass || areAllFieldsEmpty}
-        );
-
-        const newDisableEndDateBefore = startDate
-            ? startDate
-            : disableEndDateBefore;
-        let overrideInitialEndMonthWithSelected = true;
-
-        // if the end picker has a date disabled whose month is after the end selected date, make sure the calendar starts with the first selectable month
-        if (endDate && newDisableEndDateBefore) {
-            const endMoment = DateUtils.getAsMoment(endDate);
-            const endBeforeMoment = DateUtils.getAsMoment(
-                newDisableEndDateBefore
-            );
-
-            overrideInitialEndMonthWithSelected = endMoment.isAfter(
-                endBeforeMoment
-            );
-        }
-
-        return (
-            <div className={classes}>
-                <DateTimePicker
-                    ref={node => {
-                        this._startDateTime = node;
-                    }}
-                    id={startId}
-                    dateName={startDateName}
-                    timeName={startTimeName}
-                    className={startClasses}
-                    calendarClassName="calendar-start"
-                    useIcons={useIcons}
-                    iconPosition={iconPosition}
-                    dateLabel={startDateLabel}
-                    timeLabel={startTimeLabel}
-                    timeStep={timeStep}
-                    selectedDate={startDate}
-                    selectedTime={startTime}
-                    dateDisplayFormat={startDateDisplayFormat}
-                    timeDisplayFormat={startTimeDisplayFormat}
-                    onChange={this._onStartChange}
-                    disablePast={disableStartPast}
-                    disableDateBefore={disableStartDateBefore}
-                    disableDateAfter={disableStartDateAfter}
-                    disableTimeBefore={disableStartTimeBefore}
-                    disableTimeAfter={disableStartTimeAfter}
-                    useTetherShim={useTetherShim}
-                    datePlaceholder="Start Date"
-                    timePlaceholder="Start Time"
-                    disabled={disableStartDateTimePicker}
-                />
-
-                {separator}
-
-                <DateTimePicker
-                    key={endKey}
-                    ref={node => {
-                        this._endDateTime = node;
-                    }}
-                    id={endId}
-                    dateName={endDateName}
-                    timeName={endTimeName}
-                    className={endClasses}
-                    calendarClassName="calendar-end"
-                    useIcons={useIcons}
-                    iconPosition={iconPosition}
-                    dateLabel={endDateLabel}
-                    timeLabel={endTimeLabel}
-                    timeStep={timeStep}
-                    selectedDate={endDate}
-                    selectedTime={endTime}
-                    dateDisplayFormat={endDateDisplayFormat}
-                    timeDisplayFormat={endTimeDisplayFormat}
-                    overrideInitialMonthWithSelected={
-                        overrideInitialEndMonthWithSelected
-                    }
-                    onChange={this._onEndChange}
-                    disablePast={disableEndPast}
-                    disableDateBefore={newDisableEndDateBefore}
-                    disableDateAfter={disableEndDateAfter}
-                    disableTimeBefore={disableEndTimeBefore}
-                    disableTimeAfter={disableEndTimeAfter}
-                    useTetherShim={useTetherShim}
-                    datePlaceholder="End Date"
-                    timePlaceholder="End Time"
-                    disabled={disableEndDateTimePicker}
-                />
-            </div>
-        );
-    }
-}