@spothero/ui 15.1.0 → 15.1.2

package/styles/DateTime/DatePickerCalendarWithRange.jsx

@@ -1,218 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import moment from 'moment';
-import DayPicker, {DateUtils as DayPickerDateUtils} from 'react-day-picker';
-import DateUtils from '@spothero/utils/date';
-import DatePickerCalendarNavigation from './DatePickerCalendarNavigation';
-
-const DATE = new Date();
-const DATE_FORMAT = 'MM/DD/YYYY';
-
-export default class DatePickerCalendarWithRange extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /**
-         * Function to execute when the selected date changes.
-         *
-         * @param {Object} properties - Updated date properties.
-         * @param {String} properties.selectedStartDate - The selected start date in the format 'MM/DD/YYYY'.
-         * @param {String} properties.selectedEndDate - The selected end date in the format 'MM/DD/YYYY'.
-         */
-        onChange: PropTypes.func,
-        /** A string in the format 'MM/DD/YYYY' representing the start of a date range which should be selected on the calendar. */
-        selectedStartDate: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the end of a date range which should be selected on the calendar. */
-        selectedEndDate: PropTypes.string,
-        /** A string which might be empty, 'start', or 'end' to denote which boundary to adjust (after a valid range has been selected). */
-        adjustStartOrEnd: PropTypes.string,
-        /** The number of months to display on the calendar. */
-        numberOfMonths: PropTypes.number,
-        /** Array of strings to use as weekday titles, beginning with Sunday. */
-        weekdayTitles: PropTypes.array,
-        /** A string in the format 'MM/DD/YYYY' representing the date where any day prior is disabled. */
-        disableBefore: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the date where any day past is disabled. */
-        disableAfter: PropTypes.string,
-        /** Whether to set the initial month to show in the calendar to the same month as the selected day falls within when a selectedDate is passed. */
-        overrideInitialMonthWithSelected: PropTypes.bool,
-    };
-    static defaultProps = {
-        numberOfMonths: 1,
-        weekdayTitles: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-        overrideInitialMonthWithSelected: true,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {selectedStartDate, selectedEndDate} = props;
-
-        this.state = {
-            selectedStartDate: selectedStartDate
-                ? DateUtils.getAsDate(selectedStartDate)
-                : null,
-            selectedEndDate: selectedEndDate
-                ? DateUtils.getAsDate(selectedEndDate)
-                : null,
-        };
-    }
-
-    _onDaySelected = (day, {selected, disabled}, evt) => {
-        if (disabled) {
-            return;
-        }
-
-        const {onChange} = this.props;
-        const {
-            to: selectedStartDate,
-            from: selectedEndDate,
-        } = this._updateDateRange(day);
-
-        this.setState({selectedStartDate, selectedEndDate});
-
-        if (onChange) {
-            onChange({
-                selectedStartDate: selectedStartDate
-                    ? moment(selectedStartDate).format(DATE_FORMAT)
-                    : null,
-                selectedEndDate: selectedEndDate
-                    ? moment(selectedEndDate).format(DATE_FORMAT)
-                    : null,
-            });
-        }
-    };
-
-    _updateDateRange = newDate => {
-        const {adjustStartOrEnd} = this.props;
-        const {
-            selectedStartDate: prevSelectedStartDate,
-            selectedEndDate: prevSelectedEndDate,
-        } = this.state;
-        let newStartDate;
-        let newEndDate;
-
-        if (!prevSelectedStartDate || !prevSelectedEndDate) {
-            // if both start and end dates aren't populated, use the default logic
-            const {from, to} = DayPickerDateUtils.addDayToRange(newDate, {
-                from: prevSelectedStartDate,
-                to: prevSelectedEndDate,
-            });
-
-            newStartDate = from;
-            newEndDate = to;
-        } else if (adjustStartOrEnd === 'start') {
-            // if start input is focused, update start date and clear end date
-            newStartDate = newDate;
-            newEndDate = null;
-        } else if (
-            adjustStartOrEnd === 'end' &&
-            !DayPickerDateUtils.isDayBefore(newDate, prevSelectedStartDate)
-        ) {
-            // if end input is focused and newDate >= prevSelectedStartDate, update end date
-            newStartDate = prevSelectedStartDate;
-            newEndDate = newDate;
-        } else if (
-            adjustStartOrEnd === 'end' &&
-            DayPickerDateUtils.isDayBefore(newDate, prevSelectedStartDate)
-        ) {
-            // if end input is focused and newDate < prevSelectedStartDate, update start date and clear end date
-            newStartDate = newDate;
-            newEndDate = null;
-        }
-
-        return {
-            to: newStartDate,
-            from: newEndDate,
-        };
-    };
-
-    _renderDayMarkup = day => {
-        const m = moment(day);
-        const date = `${m.format('MM')}/${m.format('DD')}/${m.format('YYYY')}`;
-
-        return (
-            <span className="DatePicker-Day--wrapper">
-                <span data-date={date}>{day.getDate()}</span>
-            </span>
-        );
-    };
-
-    render() {
-        const {
-            className,
-            numberOfMonths,
-            weekdayTitles,
-            disableBefore,
-            disableAfter,
-            overrideInitialMonthWithSelected,
-        } = this.props;
-        const {selectedStartDate, selectedEndDate} = this.state;
-        const classes = classNames(
-            'DatePicker-calendar',
-            'DatePicker-calendar-with-range',
-            className
-        );
-        let firstMonth = DATE;
-        let fromMonth = DATE;
-        let toMonth = null;
-
-        if (disableBefore) {
-            const beforeDate = DateUtils.getAsDate(disableBefore);
-
-            if (fromMonth) {
-                if (DateUtils.isAfter(beforeDate, fromMonth)) {
-                    fromMonth = beforeDate;
-                }
-            } else {
-                fromMonth = beforeDate;
-            }
-
-            firstMonth = fromMonth;
-        }
-
-        if (disableAfter) {
-            toMonth = DateUtils.getAsDate(disableAfter);
-        }
-
-        if (selectedStartDate && overrideInitialMonthWithSelected) {
-            firstMonth = selectedStartDate;
-        }
-
-        return (
-            <div className={classes}>
-                <DayPicker
-                    selectedDays={[
-                        selectedStartDate,
-                        {
-                            from: selectedStartDate,
-                            to: selectedEndDate,
-                        },
-                    ]}
-                    modifiers={{
-                        start: selectedStartDate,
-                        end: selectedEndDate,
-                        'start-without-end': day =>
-                            DayPickerDateUtils.isSameDay(
-                                day,
-                                selectedStartDate
-                            ) && !selectedEndDate,
-                    }}
-                    disabledDays={{
-                        before: fromMonth,
-                        ...(toMonth && {after: toMonth}),
-                    }}
-                    fromMonth={fromMonth}
-                    toMonth={toMonth}
-                    initialMonth={firstMonth}
-                    onDayClick={this._onDaySelected}
-                    numberOfMonths={numberOfMonths}
-                    renderDay={this._renderDayMarkup}
-                    weekdaysShort={weekdayTitles}
-                    navbarElement={<DatePickerCalendarNavigation />}
-                />
-            </div>
-        );
-    }
-}

package/styles/DateTime/DateTimePicker.jsx

@@ -1,266 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DatePicker from './DatePicker';
-import TimePicker from './TimePicker';
-
-export default class DateTimePicker extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A unique ID which is used to identify this element for accessibility purposes on the client as well as the server. */
-        id: PropTypes.string.isRequired,
-        /** Additional class(es) to add to the the underlying calendar component. */
-        calendarClassName: PropTypes.string,
-        /** 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']),
-        /** Whether the DateTimePicker is disabled or not. */
-        disabled: PropTypes.bool,
-        /** A unique name which is used to identify the date element. If belonging to a form this is used as the key for serialization and is required. */
-        dateName: PropTypes.string,
-        /** A unique name which is used to identify the time element. If belonging to a form this is used as the key for serialization and is required. */
-        timeName: PropTypes.string,
-        /** A custom label (typically a Label component) to display above the date input. */
-        dateLabel: PropTypes.element,
-        /** A placeholder to display in the date input. */
-        datePlaceholder: PropTypes.string,
-        /** A custom label (typically a Label component) to display above the time selector. */
-        timeLabel: PropTypes.element,
-        /** A placeholder to display in the time input. */
-        timePlaceholder: PropTypes.string,
-        /** A function that alters how the selected date is displayed in the input field. Takes the date in MM/DD/YYYY format and should return a string with the new format. */
-        dateDisplayFormat: PropTypes.func,
-        /** The <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">format</a> to display the time in. */
-        timeDisplayFormat: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the date which should be selected. */
-        selectedDate: PropTypes.string,
-        /** A string in the format of 'hh:mm A' representing the time which should be selected. */
-        selectedTime: PropTypes.string,
-        /** Whether to set the initial month to show in the calendar to the same month as the selected day falls within when a day is selected. */
-        overrideInitialMonthWithSelected: PropTypes.bool,
-        /** The multiplier with which to create selectable times in the dropdown (in minutes). */
-        timeStep: PropTypes.number,
-        /**
-         * Where the applicable tooltip should be anchored to.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        tooltipType: PropTypes.oneOf(['none', 'date', 'time']),
-        /**
-         * The message to display inside of the tooltip.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        tooltipMessage: 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. */
-        disablePast: PropTypes.bool,
-        /** A string in the format 'MM/DD/YYYY' representing the date where days before it should be disabled in the calendar. */
-        disableDateBefore: PropTypes.string,
-        /** A string in the format 'MM/DD/YYYY' representing the date where days after it should be disabled in the calendar. */
-        disableDateAfter: PropTypes.string,
-        /** A string in the format 'hh:mm A' representing the time where times before it should be disabled in the selector. */
-        disableTimeBefore: PropTypes.string,
-        /** A string in the format 'hh:mm A' representing the time where times after it should be disabled in the selector. */
-        disableTimeAfter: PropTypes.string,
-        /** Puts the calendar in the center of the page with a shim behind it. */
-        useTetherShim: PropTypes.bool,
-        /**
-         * A function to execute after the tooltip has been hidden.
-         *
-         * @deprecated Tooltip support was removed in v6.0.0.
-         */
-        onTooltipHidden: PropTypes.func,
-        /**
-         * Function to execute when the selected date and/or time changes.
-         *
-         * @param {String} selectedDate - The selected date in the format 'MM/DD/YYYY'.
-         * @param {String} selectedTime - The selected time in the format 'hh:mm A'.
-         */
-        onChange: PropTypes.func,
-    };
-    static defaultProps = {
-        useIcons: true,
-        timeStep: 30,
-        disablePast: true,
-        overrideInitialMonthWithSelected: true,
-        iconPosition: 'right',
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {
-            id,
-            selectedDate,
-            selectedTime,
-            tooltipType,
-            tooltipMessage,
-            tooltipPosition,
-            updateTooltipPositionOnMove,
-            onTooltipHidden,
-        } = props;
-
-        if (!id) {
-            throw new Error(
-                `The prop 'id' is required to make DateTimePicker accessible for users using assistive technologies such as screen readers. Check the render method of DateTimePicker.`
-            );
-        }
-
-        if (
-            tooltipType ||
-            tooltipMessage ||
-            tooltipPosition ||
-            updateTooltipPositionOnMove ||
-            onTooltipHidden
-        ) {
-            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 = {
-            selectedDate,
-            selectedTime,
-        };
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {onChange} = this.props;
-        const {selectedDate, selectedTime} = this.state;
-        const {
-            selectedDate: prevSelectedDate,
-            selectedTime: prevSelectedTime,
-        } = prevState;
-
-        if (
-            (selectedDate !== prevSelectedDate ||
-                selectedTime !== prevSelectedTime) &&
-            onChange
-        ) {
-            onChange({
-                selectedDate,
-                selectedTime,
-            });
-        }
-    }
-
-    _onDateChange = selectedDate => {
-        this.setState({
-            selectedDate,
-        });
-    };
-
-    _onTimeChange = selectedTime => {
-        this.setState({
-            selectedTime,
-        });
-    };
-
-    /**
-     * Getter for the date picker input DOM element.
-     *
-     * @public
-     * @returns {Element} - The input element.
-     */
-    get dateNode() {
-        return this._datePicker.node;
-    }
-
-    /**
-     * Getter for the time picker select DOM element.
-     *
-     * @public
-     * @returns {Element} - The select element.
-     */
-    get timeNode() {
-        return this._timePicker.node;
-    }
-
-    render() {
-        const {
-            className,
-            id,
-            useIcons,
-            iconPosition,
-            dateLabel,
-            dateDisplayFormat,
-            timeDisplayFormat,
-            datePlaceholder,
-            timeLabel,
-            timePlaceholder,
-            dateName,
-            timeName,
-            timeStep,
-            calendarClassName,
-            overrideInitialMonthWithSelected,
-            disablePast,
-            disableDateBefore,
-            disableDateAfter,
-            disableTimeBefore,
-            disableTimeAfter,
-            useTetherShim,
-            disabled,
-        } = this.props;
-        const {selectedDate, selectedTime} = this.state;
-        const classes = classNames('DateTimePicker', className);
-
-        return (
-            <div className={classes}>
-                <DatePicker
-                    ref={node => {
-                        this._datePicker = node;
-                    }}
-                    id={id}
-                    name={dateName}
-                    displayFormat={dateDisplayFormat}
-                    calendarClassName={calendarClassName}
-                    useIcon={useIcons}
-                    iconPosition={iconPosition}
-                    disabled={disabled}
-                    label={dateLabel}
-                    placeholder={datePlaceholder}
-                    selectedDate={selectedDate}
-                    overrideInitialMonthWithSelected={
-                        overrideInitialMonthWithSelected
-                    }
-                    onChange={this._onDateChange}
-                    disablePast={disablePast}
-                    disableBefore={disableDateBefore}
-                    disableAfter={disableDateAfter}
-                    useTetherShim={useTetherShim}
-                />
-                <TimePicker
-                    ref={node => {
-                        this._timePicker = node;
-                    }}
-                    name={timeName}
-                    useIcon={useIcons}
-                    displayFormat={timeDisplayFormat}
-                    iconPosition={iconPosition}
-                    disabled={disabled}
-                    label={timeLabel}
-                    placeholder={timePlaceholder}
-                    selectedTime={selectedTime}
-                    step={timeStep}
-                    disableBefore={disableTimeBefore}
-                    disableAfter={disableTimeAfter}
-                    onChange={this._onTimeChange}
-                />
-            </div>
-        );
-    }
-}

package/styles/DateTime/DateTimePicker.spec.js

@@ -1,60 +0,0 @@
-import moment from 'moment';
-
-describe('<DateTimePicker />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            const dateTodayFormatted = moment().format('MM/DD/YYYY');
-
-            beforeEach(() => {
-                cy.visitStory('v1/DateTimePicker/Display', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onDateTimePickerChange = ({
-                            selectedDate,
-                            selectedTime,
-                        }) => {
-                            console.log(
-                                'selected date and time:',
-                                selectedDate,
-                                selectedTime
-                            ); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onDateTimePickerChange').as(
-                            'onChange'
-                        );
-                    },
-                });
-            });
-
-            it('Renders properly', () => {
-                cy.get('.DateTimePicker')
-                    .should('have.class', 'DateTimePicker')
-                    .get('select')
-                    .get('input');
-            });
-
-            it('Fires `onChange` properly', () => {
-                cy.get('input')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('select')
-                    .select('03:00 AM')
-                    .get('@onChange')
-                    .should('be.calledWith', {
-                        selectedDate: dateTodayFormatted,
-                        selectedTime: '03:00 AM',
-                    });
-            });
-        });
-
-        context('Classes', () => {
-            it('Has custom class names', () => {
-                cy.visitStory('v1/DateTimePicker/Display', 'Classes')
-                    .get('.DateTimePicker')
-                    .should('have.class', 'DateTimePickerClasses')
-                    .should('have.class', 'DateTimePickerClasses2');
-            });
-        });
-    });
-});