@spothero/ui 15.1.0 → 15.1.2

package/styles/DateTime/DateTimeRangePicker.spec.js

@@ -1,425 +0,0 @@
-import moment from 'moment';
-import DateTimeAssertions from './date-time-assertions';
-
-describe('<DateTimeRangePicker />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/DateTimeRangePicker/Display', 'Default')
-                    .get('.DateTimePicker-start')
-                    .find('select')
-                    .as('startSelect')
-                    .get('.DateTimePicker-start')
-                    .find('input')
-                    .as('startInput')
-                    .get('.DateTimePicker-end')
-                    .find('select')
-                    .as('endSelect')
-                    .get('.DateTimePicker-end')
-                    .find('input')
-                    .as('endInput');
-            });
-
-            it('Renders properly', () => {
-                cy.get('.DateTimeRangePicker')
-                    .should('have.class', 'DateTimeRangePicker')
-                    .get('@startSelect')
-                    .get('@startInput')
-                    .get('@endSelect')
-                    .get('@endInput');
-            });
-
-            it('Does not automatically bump the end date/time when start date/time are equal or after the end date/time.', () => {
-                cy.get('.DateTimePicker-end')
-                    .find('input')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('.DateTimePicker-end')
-                    .find('select')
-                    .select('11:00 PM')
-                    .get('.DateTimePicker-start')
-                    .find('select')
-                    .select('11:30 PM')
-                    .get('.DateTimePicker-start')
-                    .find('input')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('.DateTimePicker-end')
-                    .find('select')
-                    .should('have.value', '11:00 PM');
-            });
-        });
-
-        context('Classes', () => {
-            it('Has custom class names', () => {
-                cy.visitStory('v1/DateTimeRangePicker/Display', 'Classes')
-                    .get('.DateTimeRangePicker')
-                    .should('have.class', 'DateTimeRangePickerClasses')
-                    .should('have.class', 'DateTimeRangePickerClasses2');
-            });
-        });
-
-        context('Labels and Names', () => {
-            it('Has custom labels and field names', () => {
-                cy.visitStory(
-                    'v1/DateTimeRangePicker/Display',
-                    'LabelsAndNames'
-                )
-                    .get('.DateTimePicker-start .DatePicker .Label')
-                    .contains('Pick a start date yo')
-                    .get('.DateTimePicker-start .TimePicker .Label')
-                    .contains('Pick a start time yo')
-                    .get('.DateTimePicker-end .DatePicker .Label')
-                    .contains('Pick a end date yo')
-                    .get('.DateTimePicker-end .TimePicker .Label')
-                    .contains('Pick a end time yo')
-                    .get('.DateTimePicker-start .DatePicker .FormElement-item')
-                    .should('have.attr', 'name', 'start-date')
-                    .get('.DateTimePicker-start .TimePicker .FormElement-item')
-                    .should('have.attr', 'name', 'start-time')
-                    .get('.DateTimePicker-end .DatePicker .FormElement-item')
-                    .should('have.attr', 'name', 'end-date')
-                    .get('.DateTimePicker-end .TimePicker .FormElement-item')
-                    .should('have.attr', 'name', 'end-time');
-            });
-        });
-
-        context('Selected Dates/Times', () => {
-            it('Has pre-selected start date, start time, end date and end time', () => {
-                cy.visitStory(
-                    'v1/DateTimeRangePicker/Display',
-                    'SelectedDateTime'
-                )
-                    .get('.DateTimePicker-start .DatePicker .FormElement-item')
-                    .should('have.value', '01/01/2040')
-                    .get('.DateTimePicker-start .TimePicker .FormElement-item')
-                    .should('have.value', '11:30 AM')
-                    .get('.DateTimePicker-end .DatePicker .FormElement-item')
-                    .should('have.value', '01/01/2040')
-                    .get('.DateTimePicker-end .TimePicker .FormElement-item')
-                    .should('have.value', '01:30 PM');
-            });
-        });
-
-        context('Disabled', () => {
-            it('Has disabled form elements', () => {
-                cy.visitStory('v1/DateTimeRangePicker/Display', 'Disabled')
-                    // Start DatePicker
-                    .get('.DateTimePicker-start .DatePicker .FormElement-item')
-                    .should('have.attr', 'disabled', 'disabled')
-                    // Start TimePicker
-                    .get('.DateTimePicker-start .TimePicker .FormElement-item')
-                    .should('have.attr', 'disabled', 'disabled')
-                    // End DatePicker
-                    .get('.DateTimePicker-end .DatePicker .FormElement-item')
-                    .should('have.attr', 'disabled', 'disabled')
-                    // End TimePicker
-                    .get('.DateTimePicker-end .TimePicker .FormElement-item')
-                    .should('have.attr', 'disabled', 'disabled');
-            });
-        });
-
-        context('Separator', () => {
-            it('Render properly', () => {
-                cy.visitStory('v1/DateTimeRangePicker/Display', 'Separator')
-                    .contains('This comes in between dates')
-                    .should('exist');
-            });
-        });
-    });
-
-    context('Interaction', () => {
-        context('Validation', () => {
-            const today = moment();
-            const dateTodayFormatted = today.format('MM/DD/YYYY');
-
-            beforeEach(() => {
-                cy.visitStory(
-                    'v1/DateTimeRangePicker/Interaction',
-                    'Validation',
-                    {
-                        onBeforeLoad: contentWindow => {
-                            contentWindow.onDateTimeRangePickerOnValid = ({
-                                startDate,
-                                startTime,
-                                endDate,
-                                endTime,
-                                startMoment,
-                                endMoment,
-                                isEndDayBeforeStartDay,
-                                isEndTimeSameOrBeforeStartTime,
-                            }) => {
-                                /* eslint-disable no-console */
-                                console.log('onValid values:', {
-                                    startDate,
-                                    startTime,
-                                    endDate,
-                                    endTime,
-                                    startMoment,
-                                    endMoment,
-                                    isEndDayBeforeStartDay,
-                                    isEndTimeSameOrBeforeStartTime,
-                                });
-                                /* eslint-enable no-console */
-                            };
-
-                            contentWindow.onDateTimeRangePickerOnInvalid = ({
-                                startDate,
-                                startTime,
-                                endDate,
-                                endTime,
-                                startMoment,
-                                endMoment,
-                                isEndDayBeforeStartDay,
-                                isEndTimeSameOrBeforeStartTime,
-                            }) => {
-                                /* eslint-disable no-console */
-                                console.log('onInvalid values:', {
-                                    startDate,
-                                    startTime,
-                                    endDate,
-                                    endTime,
-                                    startMoment,
-                                    endMoment,
-                                    isEndDayBeforeStartDay,
-                                    isEndTimeSameOrBeforeStartTime,
-                                });
-                                /* eslint-enable no-console */
-                            };
-
-                            cy.stub(
-                                contentWindow,
-                                'onDateTimeRangePickerOnValid'
-                            ).as('onValid');
-
-                            cy.stub(
-                                contentWindow,
-                                'onDateTimeRangePickerOnInvalid'
-                            ).as('onInvalid');
-                        },
-                    }
-                )
-                    .get('.DateTimePicker-start')
-                    .find('select')
-                    .as('startSelect')
-                    .get('.DateTimePicker-start')
-                    .find('input')
-                    .as('startInput')
-                    .get('.DateTimePicker-end')
-                    .find('select')
-                    .as('endSelect')
-                    .get('.DateTimePicker-end')
-                    .find('input')
-                    .as('endInput');
-            });
-
-            it('Fires `onValid` properly', () => {
-                cy.get('@startInput')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('@startSelect')
-                    .select('03:00 AM')
-                    .get('@endInput')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('@endSelect')
-                    .select('08:00 AM')
-                    .get('@onValid')
-                    .should(response => {
-                        const onValidCalls = response.getCalls();
-
-                        // remove difficult to compare moment objects from calls
-                        onValidCalls.forEach(call => {
-                            delete call.args[0].startMoment;
-                            delete call.args[0].endMoment;
-                        });
-
-                        // interactions above will cause 6 varying onValid calls with progressively more data returned
-                        expect(onValidCalls[0].args[0]).to.deep.equal({
-                            startDate: undefined, // eslint-disable-line no-undefined
-                            startTime: undefined, // eslint-disable-line no-undefined
-                            endDate: undefined, // eslint-disable-line no-undefined
-                            endTime: undefined, // eslint-disable-line no-undefined
-                            isEndDayBeforeStartDay: null,
-                            isEndTimeSameOrBeforeStartTime: null,
-                        });
-                        expect(onValidCalls[1].args[0]).to.deep.equal({
-                            startDate: dateTodayFormatted,
-                            startTime: undefined, // eslint-disable-line no-undefined
-                            endDate: undefined, // eslint-disable-line no-undefined
-                            endTime: undefined, // eslint-disable-line no-undefined
-                            isEndDayBeforeStartDay: null,
-                            isEndTimeSameOrBeforeStartTime: null,
-                        });
-                        expect(onValidCalls[2].args[0]).to.deep.equal({
-                            startDate: dateTodayFormatted,
-                            startTime: '03:00 AM',
-                            endDate: undefined, // eslint-disable-line no-undefined
-                            endTime: undefined, // eslint-disable-line no-undefined
-                            isEndDayBeforeStartDay: null,
-                            isEndTimeSameOrBeforeStartTime: null,
-                        });
-                        expect(onValidCalls[3].args[0]).to.deep.equal({
-                            startDate: dateTodayFormatted,
-                            startTime: '03:00 AM',
-                            endDate: dateTodayFormatted,
-                            endTime: undefined, // eslint-disable-line no-undefined
-                            isEndDayBeforeStartDay: null,
-                            isEndTimeSameOrBeforeStartTime: null,
-                        });
-                        expect(onValidCalls[4].args[0]).to.deep.equal({
-                            startDate: dateTodayFormatted,
-                            startTime: '03:00 AM',
-                            endDate: dateTodayFormatted,
-                            endTime: '08:00 AM',
-                            isEndDayBeforeStartDay: false,
-                            isEndTimeSameOrBeforeStartTime: false,
-                        });
-                        expect(onValidCalls[5].args[0]).to.deep.equal({
-                            startDate: dateTodayFormatted,
-                            startTime: '03:00 AM',
-                            endDate: dateTodayFormatted,
-                            endTime: '08:00 AM',
-                            isEndDayBeforeStartDay: false,
-                            isEndTimeSameOrBeforeStartTime: false,
-                        });
-                    });
-            });
-
-            let nextDayDateFormatted = null;
-
-            it('Fires `onInvalid` properly', () => {
-                cy.get('@endInput')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('@endSelect')
-                    .select('03:00 AM')
-                    .get('@startSelect')
-                    .select('08:00 AM')
-                    .get('@startInput')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .then($todayElement => {
-                        if ($todayElement.next().length) {
-                            return $todayElement.next();
-                        } else {
-                            return $todayElement
-                                .parent()
-                                .next()
-                                .find('.DayPicker-Day')
-                                .first();
-                        }
-                    })
-                    .then($nextDay => {
-                        nextDayDateFormatted = moment(
-                            $nextDay.find('span')[0].getAttribute('data-date')
-                        ).format('MM/DD/YYYY');
-
-                        cy.wrap($nextDay).click();
-                    })
-                    .get('@onInvalid')
-                    .should(response => {
-                        const onInvalidCalls = response.getCalls();
-
-                        // remove difficult to compare moment objects from calls
-                        delete onInvalidCalls[0].args[0].startMoment;
-                        delete onInvalidCalls[0].args[0].endMoment;
-
-                        // interactions above result in one onInvalid call
-                        expect(onInvalidCalls[0].args[0]).to.deep.equal({
-                            startDate: nextDayDateFormatted,
-                            startTime: '08:00 AM',
-                            endDate: dateTodayFormatted,
-                            endTime: '03:00 AM',
-                            isEndDayBeforeStartDay: true,
-                            isEndTimeSameOrBeforeStartTime: true,
-                        });
-                    });
-            });
-        });
-
-        context('All Fields Empty', () => {
-            it('Has all the fields in the red error state', () => {
-                cy.visitStory(
-                    'v1/DateTimeRangePicker/Interaction',
-                    'AllFieldsEmpty'
-                )
-                    .get('.DateTimePicker-start')
-                    .should('have.class', 'DateTimePicker-error')
-                    .get('.DateTimePicker-end')
-                    .should('have.class', 'DateTimePicker-error');
-            });
-        });
-
-        context('Auto Bump Invalid', () => {
-            it('Automatically bumps the end date/time to be the start date/time plus 60 minutes.', () => {
-                cy.visitStory(
-                    'v1/DateTimeRangePicker/Interaction',
-                    'AutoBumpInvalid'
-                )
-                    .get('.DateTimePicker-end')
-                    .find('input')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('.DateTimePicker-end')
-                    .find('select')
-                    .select('03:00 AM')
-                    .get('.DateTimePicker-start')
-                    .find('select')
-                    .select('08:00 AM')
-                    .get('.DateTimePicker-start')
-                    .find('input')
-                    .focus()
-                    .get('.DayPicker-Day--today')
-                    .click()
-                    .get('.DateTimePicker-end')
-                    .find('select')
-                    .should('have.value', '09:00 AM')
-                    .get('.DateTimePicker-end')
-                    .should('have.class', 'DateTimePicker-highlight');
-            });
-        });
-
-        context('Enable/Disable Dates', () => {
-            it('Enables dates in the past when disablePast is false', () => {
-                cy.visitStory(
-                    'v1/DateTimeRangePicker/Interaction',
-                    'EnablePastDates'
-                );
-
-                DateTimeAssertions.pastDatesEnabled(
-                    '.DateTimePicker-start .DatePicker .FormElement-item'
-                );
-                DateTimeAssertions.pastDatesEnabled(
-                    '.DateTimePicker-end .DatePicker .FormElement-item'
-                );
-            });
-
-            it('Disables dates and times before disableBefore and after disableAfter', () => {
-                cy.visitStory(
-                    'v1/DateTimeRangePicker/Interaction',
-                    'DisableBeforeAfter'
-                );
-
-                DateTimeAssertions.datesDisabledBeforeAndAfter(
-                    '.DateTimePicker-start .DatePicker .FormElement-item'
-                );
-                DateTimeAssertions.datesDisabledBeforeAndAfter(
-                    '.DateTimePicker-end .DatePicker .FormElement-item'
-                );
-                DateTimeAssertions.timesDisabledBeforeAndAfter(
-                    '.DateTimePicker-start .TimePicker select'
-                );
-                DateTimeAssertions.timesDisabledBeforeAndAfter(
-                    '.DateTimePicker-end .TimePicker select'
-                );
-            });
-        });
-    });
-});

package/styles/DateTime/TimePicker.jsx

@@ -1,158 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import moment from 'moment';
-import omit from 'lodash/omit';
-import IconClock from '@spothero/icons/clock';
-import TimeUtils from '@spothero/utils/time';
-import Select from '../Select/Select';
-
-export default class TimePicker extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A unique name which is used to identify this element. If belonging to a form this is used as the key for serialization and is required. */
-        name: PropTypes.string,
-        /** Whether to show the clock icon in the input field. */
-        useIcon: PropTypes.bool,
-        /** If using the icon, whether it should appear on the left or right side of the input field. */
-        iconPosition: PropTypes.oneOf(['left', 'right']),
-        /** A custom label (typically a Label component) to display above the input. */
-        label: PropTypes.element,
-        /** The placeholder text to show in the input before a selection is made. */
-        placeholder: PropTypes.string,
-        /** The <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">format</a> to display the time in. */
-        displayFormat: PropTypes.string,
-        /** A string in the format of 'hh:mm A' representing the time which should be selected. */
-        selectedTime: PropTypes.string,
-        /** The multiplier with which to create selectable times in the dropdown (in minutes). */
-        step: PropTypes.number,
-        /** A string in the format 'hh:mm A' representing the time where times before it should be disabled in the selector. */
-        disableBefore: PropTypes.string,
-        /** A string in the format 'hh:mm A' representing the time where times after it should be disabled in the selector. */
-        disableAfter: PropTypes.string,
-        /** Whether the component is disabled. */
-        disabled: PropTypes.bool,
-        /**
-         * Function to execute when the selected time changes.
-         *
-         * @param {String} selectedTime - The selected time in the format 'hh:mm A'.
-         */
-        onChange: PropTypes.func,
-    };
-    static defaultProps = {
-        useIcon: true,
-        step: 30,
-        iconPosition: 'right',
-        displayFormat: 'hh:mm A',
-    };
-    state = {
-        selectedTime: this.props.selectedTime,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {step, disableBefore, disableAfter, displayFormat} = props;
-        const dayStart = moment().startOf('day');
-        const timesParams = {
-            step,
-        };
-
-        if (disableBefore) {
-            timesParams.ignoreBefore = moment(disableBefore, 'hh:mm A').diff(
-                dayStart,
-                'minutes'
-            );
-        }
-
-        if (disableAfter) {
-            timesParams.ignoreAfter = moment(disableAfter, 'hh:mm A').diff(
-                dayStart,
-                'minutes'
-            );
-        }
-
-        this._times = TimeUtils.getTimes(timesParams).map(({formatted}) => {
-            return {
-                value: formatted,
-                label: displayFormat
-                    ? TimeUtils.getAsMoment(formatted).format(displayFormat)
-                    : formatted,
-            };
-        });
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {onChange} = this.props;
-        const {selectedTime} = this.state;
-
-        if (selectedTime !== prevState.selectedTime && onChange) {
-            onChange(selectedTime);
-        }
-    }
-
-    _onSelectChange = ({value}) => {
-        this.setState({
-            selectedTime: value,
-        });
-    };
-
-    /**
-     * Getter for the select DOM element.
-     *
-     * @public
-     * @returns {Element} - The select element.
-     */
-    get node() {
-        return this._select.node;
-    }
-
-    render() {
-        const {
-            className,
-            label,
-            placeholder,
-            useIcon,
-            iconPosition,
-            name,
-            disabled,
-            ...attrs
-        } = this.props;
-
-        const spreadProps = omit(attrs, [
-            'onChange',
-            'step',
-            'displayFormat',
-            'disableBefore',
-            'disableAfter',
-            'selectedTime',
-        ]);
-        const {selectedTime} = this.state;
-        const classes = classNames(
-            'TimePicker',
-            {'TimePicker-with-icon': useIcon},
-            className
-        );
-
-        return (
-            <div className={classes}>
-                {label}
-                <Select
-                    ref={node => {
-                        this._select = node;
-                    }}
-                    name={name}
-                    defaultValue={selectedTime}
-                    onChange={this._onSelectChange}
-                    items={this._times}
-                    disabled={disabled}
-                    icon={useIcon ? <IconClock className="Icon-clock" /> : null}
-                    iconPosition={iconPosition}
-                    placeholder={placeholder}
-                    {...spreadProps}
-                />
-            </div>
-        );
-    }
-}