@spothero/ui 15.0.0-beta.1 → 15.0.0-beta.3

package/styles/utils/animation.js

@@ -0,0 +1,75 @@
+import {window} from 'ssr-window';
+import isString from 'lodash/isString';
+import DOMUtils from './dom';
+
+// t = current time, b = start value, c = change in value, d = duration
+// http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation
+Math.easeInOutQuad = (t, b, c, d) => {
+    /* eslint-disable no-param-reassign, no-mixed-operators */
+    t /= d / 2;
+
+    if (t < 1) {
+        return (c / 2) * t * t + b;
+    }
+
+    t--;
+
+    return (-c / 2) * (t * (t - 2) - 1) + b;
+    /* eslint-enable no-param-reassign, no-mixed-operators */
+};
+
+/**
+ * Utilities for working with animations.
+ * @module AnimationUtils
+ */
+const AnimationUtils = {
+    /**
+     * Scrolls the specified element to the specified position.
+     * @static
+     * @function scrollTo
+     * @param {String|Element} el - The selector or element to scroll to.
+     * @param {Number} [position=0] - The position to scroll the element to.
+     * @param {Number} [duration=400] - The time (in milliseconds) to scroll.
+     * @param {String} [axis='y'] - The axis to scroll on.
+     * @param {Function} [cb] - A callback function to call when the animation finishes.
+     * @example
+     * AnimationUtils.scrollTo(window, 0, 1000);
+     * @returns {void}
+     */
+    scrollTo(el, position = 0, duration = 400, axis = 'y', cb = null) {
+        const element = isString(el) ? DOMUtils.el(el) : el;
+        const start = axis === 'y' ? element.scrollTop : element.scrollLeft;
+        const change = position - start;
+        const increment = 20;
+        let currentTime = 0;
+
+        const animateScroll = () => {
+            currentTime += increment;
+
+            const val = Math.easeInOutQuad(
+                currentTime,
+                start,
+                change,
+                duration
+            );
+
+            if (axis === 'y') {
+                element.scrollTop = val;
+            } else {
+                element.scrollLeft = val;
+            }
+
+            if (currentTime < duration) {
+                window.setTimeout(animateScroll, increment);
+            } else {
+                if (cb) {
+                    cb();
+                }
+            }
+        };
+
+        animateScroll();
+    },
+};
+
+export default AnimationUtils;

package/styles/utils/date.js

@@ -0,0 +1,226 @@
+import {window} from 'ssr-window';
+import isDate from 'lodash/isDate';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import moment from 'moment-timezone';
+
+const splitTextDate = (date, delimeter) => {
+    const d = date.split(delimeter);
+
+    return new Date(d[2], d[0] - 1, d[1]);
+};
+
+const splitMobileDate = date => {
+    const d = date.split('-');
+
+    return new Date(d[0], d[1] - 1, d[2]);
+};
+
+/**
+ * Utilities for working with dates.
+ * @module DateUtils
+ */
+const DateUtils = {
+    // /**
+    //  * Check whether input type of 'date' is supported in the current browser.
+    //  * @static
+    //  * @function supportsDateInput
+    //  * @example
+    //  * DateUtils.supportsDateInput();
+    //  * @returns {Boolean} - Whether the input type is supported.
+    //  */
+    // supportsDateInput() {
+    //     const fakeValue = 'not-a-date';
+    //     const input = document.createElement('input');
+    //
+    //     input.setAttribute('type', 'date');
+    //     input.setAttribute('value', fakeValue);
+    //
+    //     return input.value !== fakeValue;
+    // },
+
+    // /**
+    //  * Gets the closest match to the user's current time zone.
+    //  * @static
+    //  * @function getTimeZone
+    //  * @example
+    //  * DateUtils.getTimeZone(); // 'America/Chicago'
+    //  * @returns {String} - The user's current time zone.
+    //  */
+    // getTimeZone() {
+    //     if (
+    //         window.Intl &&
+    //         isObject(window.Intl) &&
+    //         window.Intl.DateTimeFormat().resolvedOptions().timeZone
+    //     ) {
+    //         return window.Intl.DateTimeFormat().resolvedOptions().timeZone;
+    //     } else {
+    //         return moment.tz.guess();
+    //     }
+    // },
+
+    // /**
+    //  * Converts a mobile input date to a string using the specified format.
+    //  * @static
+    //  * @function convertToDesktop
+    //  * @param {String} date - The input value in the format YYYY-MM-DD.
+    //  * @param {String} [format='MM/DD/YYYY'] - The output format.
+    //  * @example
+    //  * DateUtils.convertToDesktop('1983-01-19');
+    //  * @returns {String} - The formatted date.
+    //  */
+    // convertToDesktop(date, format = 'MM/DD/YYYY') {
+    //     if (!isString(date)) {
+    //         throw new Error('The supplied date is not a string.');
+    //     }
+    //
+    //     if (date.indexOf('-') !== -1) {
+    //         return moment(splitMobileDate(date)).format(format);
+    //     } else {
+    //         return date;
+    //     }
+    // },
+
+    // /**
+    //  * Converts a desktop input date to the native mobile date format.
+    //  * @static
+    //  * @function convertToMobile
+    //  * @param {String} date - The input value in the format MM/DD/YYYY.
+    //  * @example
+    //  * DateUtils.convertToMobile('01/19/1983');
+    //  * @returns {String} - The mobile formatted date.
+    //  */
+    // convertToMobile(date) {
+    //     if (!isString(date)) {
+    //         throw new Error('The supplied date is not a string.');
+    //     }
+    //
+    //     if (date.indexOf('/') !== -1) {
+    //         return moment(splitTextDate(date, '/')).format('YYYY-MM-DD');
+    //     } else {
+    //         return date;
+    //     }
+    // },
+
+    /**
+     * Converts a string date from a text or date input to a date object.
+     * @static
+     * @function getAsDate
+     * @param {String} date - The date in the format MM/DD/YYYY (text input) or YYYY-MM-DD (date input).
+     * @example
+     * DateUtils.getAsDate('1983-01-19');
+     * DateUtils.getAsDate('01/19/1983');
+     * @returns {Date} - The date object.
+     */
+    getAsDate(date) {
+        if (!isString(date)) {
+            throw new Error('The supplied date is not a string.');
+        }
+
+        if (date.indexOf('-') !== -1) {
+            // date input
+            return splitMobileDate(date);
+        } else {
+            // text input
+            return splitTextDate(date, '/');
+        }
+    },
+
+    /**
+     * Converts a string date from a text or date input to a moment instance.
+     * @static
+     * @function getAsMoment
+     * @param {String} date - The date in the format MM/DD/YYYY (text input) or YYYY-MM-DD (date input).
+     * @example
+     * DateUtils.getAsMoment('1983-01-19');
+     * DateUtils.getAsMoment('01/19/1983');
+     * @returns {Moment} - The moment instance.
+     */
+    getAsMoment(date) {
+        if (!isString(date)) {
+            throw new Error('The supplied date is not a string.');
+        }
+
+        if (date.indexOf('-') !== -1) {
+            // date input
+            return moment(splitMobileDate(date));
+        } else {
+            // text input
+            return moment(splitTextDate(date, '/'));
+        }
+    },
+
+    /**
+     * Combines a date moment with a time moment to return one moment instance.
+     * @static
+     * @function combineDateAndTime
+     * @param {Moment} date - The date as a moment instance.
+     * @param {Moment} time - The time as a moment instance.
+     * @example
+     * DateUtils.combineDateAndTime(moment(), moment().add(7, 'hours').add(23, 'minutes'));
+     * @returns {Moment} - The combined moment instance.
+     */
+    combineDateAndTime(date, time) {
+        if (!moment.isMoment(date) || !moment.isMoment(time)) {
+            throw new Error(
+                'The date and/or time supplied was not an instance of Moment.'
+            );
+        }
+
+        return date.hours(time.hours()).minutes(time.minutes());
+    },
+
+    /**
+     * Checks if one date is before another.
+     * @static
+     * @function isBefore
+     * @param {Date} dateToCheck - The date to check.
+     * @param {Date} dateToCompare - The date to check against.
+     * @param {Boolean} [useTime=false] - Whether to use the time in the comparison.
+     * @example
+     * DateUtils.isBefore(new Date(2016, 1, 19), new Date(2016, 3, 14));
+     * @returns {Boolean} - Whether the provided date is before the one being checked against.
+     */
+    isBefore(dateToCheck, dateToCompare, useTime = false) {
+        if (!isDate(dateToCheck) || !isDate(dateToCompare)) {
+            throw new Error(
+                'The dates supplied must be instances of the Date object.'
+            );
+        }
+
+        if (!useTime) {
+            dateToCheck.setHours(0, 0, 0, 0);
+            dateToCompare.setHours(0, 0, 0, 0);
+        }
+
+        return dateToCheck < dateToCompare;
+    },
+
+    /**
+     * Checks if one date is after another.
+     * @static
+     * @function isAfter
+     * @param {Date} dateToCheck - The date to check.
+     * @param {Date} dateToCompare - The date to check against.
+     * @param {Boolean} [useTime=false] - Whether to use the time in the comparison.
+     * @example
+     * DateUtils.isAfter(new Date(2016, 1, 19), new Date(2016, 3, 14));
+     * @returns {Boolean} - Whether the provided date is after the one being checked against.
+     */
+    isAfter(dateToCheck, dateToCompare, useTime = false) {
+        if (!isDate(dateToCheck) || !isDate(dateToCompare)) {
+            throw new Error(
+                'The dates supplied must be instances of the Date object.'
+            );
+        }
+
+        if (!useTime) {
+            dateToCheck.setHours(0, 0, 0, 0);
+            dateToCompare.setHours(0, 0, 0, 0);
+        }
+
+        return dateToCheck > dateToCompare;
+    },
+};
+
+export default DateUtils;