cronofy-elements 1.48.2 → 1.49.2

package/src/js/components/generic/ShadowScrollbars.js

@@ -1,70 +0,0 @@
-import React from "react";
-import { css } from "@emotion/core";
-import { Scrollbars } from "react-custom-scrollbars";
-// import { transparentize } from "polished";
-
-const containerStyle = css`
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-`;
-const shadowTopStyle = css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 10px;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
-`;
-const shadowBottomStyle = css`
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 10px;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
-`;
-
-class ShadowScrollbars extends React.Component {
-    constructor(props, ...rest) {
-        super(props, ...rest);
-        this.state = {
-            scrollTop: 0,
-            scrollHeight: 0,
-            clientHeight: 0,
-        };
-        this.handleUpdate = this.handleUpdate.bind(this);
-    }
-
-    handleUpdate(values) {
-        const { shadowTop, shadowBottom } = this.refs;
-        const { scrollTop, scrollHeight, clientHeight } = values;
-        const shadowTopOpacity = (1 / 20) * Math.min(scrollTop, 20);
-        const bottomScrollTop = scrollHeight - clientHeight;
-        const shadowBottomOpacity =
-            (1 / 20) * (bottomScrollTop - Math.max(scrollTop, bottomScrollTop - 20));
-        shadowTop.style.opacity = shadowTopOpacity;
-        shadowBottom.style.opacity = shadowBottomOpacity;
-    }
-
-    render() {
-        return (
-            <div className="shadow-scroll" css={containerStyle}>
-                <Scrollbars
-                    css={css`
-                        flex-grow: 1;
-                    `}
-                    className="shadow-scroll__inner"
-                    ref="scrollbars"
-                    onUpdate={this.handleUpdate}
-                    {...this.props}
-                />
-                <div ref="shadowTop" css={shadowTopStyle} />
-                <div ref="shadowBottom" css={shadowBottomStyle} />
-            </div>
-        );
-    }
-}
-
-export default ShadowScrollbars;

package/src/js/components/generic/TimeZoneSelector.js

@@ -1,158 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-import { tzi18n } from "../../helpers/i18n";
-
-const TimeZoneSelector = ({ locale, theme, tz, setTz }) => {
-    const [showList, setShowList] = useState(() => false);
-    const [focused, setFocused] = useState(() => false);
-
-    const tzRef = useRef();
-    const tzListRef = useRef();
-
-    const scrollIntoViewOptions = {
-        behavior: "auto",
-        block: "nearest",
-        inline: "start",
-    };
-
-    const toggleShowList = () => {
-        setShowList(showList ? false : true);
-    };
-
-    const handleOptionSelect = selectedTz => {
-        setTz({ ...tz, selectedTzid: selectedTz });
-        setShowList(false);
-    };
-
-    const handleKeyDown = e => {
-        const list = tz.list;
-        switch (e.key) {
-            case "ArrowDown":
-                e.preventDefault();
-                const nextFocusedItemIndex = list.findIndex(item => focused === item.tzid) + 1;
-                const nextItem = nextFocusedItemIndex > list.length - 1 ? 0 : nextFocusedItemIndex;
-
-                setFocused(list[nextItem].tzid);
-
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                const prevFocusedItemIndex = list.findIndex(item => focused === item.tzid) - 1;
-                const prevItem = prevFocusedItemIndex < 0 ? list.length - 1 : prevFocusedItemIndex;
-
-                setFocused(list[prevItem].tzid);
-
-                break;
-            case "Enter":
-                const tz = list.find(item => focused === item.tzid);
-                handleOptionSelect(tz);
-                break;
-            case "Escape":
-                setShowList(false);
-                break;
-        }
-    };
-
-    const handleClickOutside = e => {
-        if (tzRef.current && !tzRef.current.contains(e.target)) {
-            setShowList(false);
-        }
-    };
-
-    useEffect(() => {
-        document.addEventListener("click", handleClickOutside);
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
-    }, []);
-
-    useEffect(() => {
-        if (showList && tzListRef.current) {
-            tzListRef.current.focus();
-            setFocused(tz.selectedTzid.tzid);
-        }
-    }, [showList]);
-
-    useEffect(() => {
-        if (showList && tzListRef.current && focused) {
-            const focusItem = tz.list.findIndex(item => focused === item.tzid);
-            tzListRef.current.children[focusItem].scrollIntoView(scrollIntoViewOptions);
-        }
-    }, [focused]);
-
-    const meaninglessAbbr = /^[+-][0-9]+$/;
-
-    const renderList = tz.list.map((timezone, key) => {
-        let abbr = "";
-        if (!timezone.abbr.match(meaninglessAbbr)) {
-            abbr = `${timezone.abbr} `;
-        }
-
-        return (
-            <li
-                key={key}
-                role="option"
-                className={
-                    theme.classBuilder("timezone-selector--option") +
-                    (focused === timezone.tzid
-                        ? " " + theme.classBuilder("timezone-selector--focused")
-                        : "") +
-                    (tz.selectedTzid.tzid === timezone.tzid
-                        ? " " + theme.classBuilder("timezone-selector--selected")
-                        : "")
-                }
-                data-name={timezone.name}
-                aria-selected={timezone.tzid === tz.selectedTzid.tzid}
-                onClick={() => handleOptionSelect(timezone)}
-                onKeyDown={() => console.log("keydown on option")}
-            >
-                {`(${abbr}${timezone.offset}) `}
-                <strong>{tzi18n(timezone.tzid, locale)}</strong>
-            </li>
-        );
-    });
-
-    return (
-        <div className={theme.classBuilder("timezone-selector")} ref={tzRef}>
-            <button
-                className={theme.classBuilder("timezone-selector--button")}
-                id="timezone-button"
-                type="button"
-                aria-haspopup="listbox"
-                aria-label="Choose a timezone"
-                aria-expanded={showList}
-                onClick={toggleShowList}
-            >
-                {tzi18n(tz.selectedTzid.tzid, locale)}
-                <svg
-                    className={
-                        theme.classBuilder("timezone-selector--icon") +
-                        (showList ? " " + theme.classBuilder("timezone-selector--icon-open") : "")
-                    }
-                    aria-hidden="true"
-                    viewBox="0 0 13 7"
-                >
-                    <path d="M.809 1.315L2.124 0l4.383 4.342L10.876.013l1.315 1.302L6.507 7l-.939-.938z" />
-                </svg>
-            </button>
-            {showList ? (
-                <div className={theme.classBuilder("timezone-selector--listbox-wrapper")}>
-                    <ul
-                        className={theme.classBuilder("timezone-selector--listbox")}
-                        aria-labelledby="timezone-button"
-                        role="listbox"
-                        id="tz-picker"
-                        ref={tzListRef}
-                        tabIndex={0}
-                        onChange={e => handleOptionSelect(e)}
-                        onKeyDown={e => handleKeyDown(e)}
-                    >
-                        {renderList}
-                    </ul>
-                </div>
-            ) : null}
-        </div>
-    );
-};
-
-export default TimeZoneSelector;

package/src/js/components/generic/TransitionSlide.js

@@ -1,72 +0,0 @@
-import React from "react";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
-import { css } from "@emotion/core";
-
-import { parseDirection } from "../../helpers/events";
-
-const TransitionSlide = ({ direction, keyProp, children, styles }) => {
-    const parsedDirection = parseDirection(direction);
-    const transitionDuration = 400; // ms
-
-    const directions = {
-        forwards: { in: [`100%`, `0`], out: [`-100%`, `0`] },
-        backwards: { in: [`-100%`, `0`], out: [`100%`, `0`] },
-        upwards: { in: [`0`, `100%`], out: [`0`, `-100%`] },
-        downwards: { in: [`0`, `-100%`], out: [`0`, `100%`] },
-    };
-
-    const in_0 = directions[parsedDirection].in[0];
-    const in_1 = directions[parsedDirection].in[1];
-
-    const out_0 = directions[parsedDirection].out[0];
-    const out_1 = directions[parsedDirection].out[1];
-
-    const XY_in = `${in_0}, ${in_1}`;
-    const XY_out = `${out_0}, ${out_1}`;
-
-    const genericTransitionStyles = css`
-        position: relative;
-        width: 100%;
-        // height: 100%;
-        display: flex;
-        overflow: hidden;
-        .transition--slide-enter {
-            transform: translate(${XY_in});
-            transition: transform ${transitionDuration}ms linear;
-        }
-        .transition--slide-enter-active {
-            transform: translate(0, 0);
-        }
-        .transition--slide-exit {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            transform: translate(0, 0);
-            transition: transform ${transitionDuration}ms linear;
-        }
-        .transition--slide-exit-active {
-            transform: translate(${XY_out});
-        }
-    `;
-    return (
-        <TransitionGroup
-            css={css`
-                ${genericTransitionStyles};
-                ${styles};
-            `}
-            className={`direction--${direction}`}
-        >
-            <CSSTransition
-                key={keyProp}
-                timeout={transitionDuration}
-                classNames="transition--slide"
-            >
-                {children}
-            </CSSTransition>
-        </TransitionGroup>
-    );
-};
-
-export default TransitionSlide;

package/src/js/contexts/i18n-context.js

@@ -1,25 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-import { i18nConstructor } from "../helpers/i18n";
-
-const i18nContext = createContext();
-
-export const I18nProvider = ({ children, options }) => {
-    const [i18n, setI18n] = useState(
-        i18nConstructor({
-            context: options.slug,
-            locale: options.locale,
-            localeModifiers: options.locale_modifiers,
-            allPhrases: options.allPhrases,
-            tzid: options.tzid,
-        })
-    );
-    return <i18nContext.Provider value={i18n}>{children}</i18nContext.Provider>;
-};
-export const useI18n = () => {
-    const context = useContext(i18nContext);
-    if (context === undefined) {
-        throw new Error("useI18n must be used within a I18nProvider");
-    }
-    return context;
-};

package/src/js/contexts/log-context.js

@@ -1,18 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-import { logConstructor } from "../helpers/logging";
-
-const LogContext = createContext();
-
-export const LogProvider = ({ children, options }) => {
-    const [log, _setLog] = useState(logConstructor(options.mode, options.name, options.callback));
-    return <LogContext.Provider value={log}>{children}</LogContext.Provider>;
-};
-
-export const useLog = () => {
-    const context = useContext(LogContext);
-    if (context === undefined) {
-        throw new Error("useLog must be used within a LogProvider");
-    }
-    return context;
-};

package/src/js/contexts/tz-context.js

@@ -1,18 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-const TzContext = createContext();
-
-export const TzProvider = ({ children, options }) => {
-    const [tz, setTz] = useState({
-        selectedTzid: options.selectedTzid,
-        list: options.list,
-    });
-    return <TzContext.Provider value={[tz, setTz]}>{children}</TzContext.Provider>;
-};
-export const useTz = () => {
-    const context = useContext(TzContext);
-    if (context === undefined) {
-        throw new Error("useTz must be used within a TzProvider");
-    }
-    return context;
-};

package/src/js/env.example.js

@@ -1,8 +0,0 @@
-const env = {
-    API_DOMAIN: "https://api.cronofy.com",
-    APP_DOMAIN: "https://app.cronofy.com",
-    CLIENT_ID: "XXX",
-    CLIENT_SECRET: "XXX",
-    SUB: "XXX",
-};
-module.exports = env;

package/src/js/helpers/colors.js

@@ -1,33 +0,0 @@
-import { darken, getLuminance } from "polished";
-
-export const hexToRGB = hex =>
-    [hex.substring(0, 2), hex.substring(2, 4), hex.substring(4, 6)].map(hex => parseInt(hex, 16));
-
-export const normalize = num => (num > 255 ? 255 : num < 0 ? 0 : num);
-
-// Shift a color by an amount (-255 > 255)
-export const shift = (color, amount) => {
-    if (color[0] == "#") color = color.slice(1);
-
-    const result = hexToRGB(color)
-        .map(num => num + amount)
-        .map(num => normalize(num))
-        .map(num => num.toString(16))
-        .map(hex => ("0" + hex).substring(hex.length - 1))
-        .join("");
-
-    return `#${result}`;
-};
-
-export const getCalendarColors = (themeColors, calIndex = 0) => {
-    const colors = { calendars: [], ...themeColors };
-
-    const mainColor = colors.calendars[calIndex] || themeColors.greyLight;
-    const textColor = getLuminance(mainColor) < 0.5 ? colors.white : colors.black;
-
-    colors.main = mainColor;
-    colors.mid = darken(0.1, mainColor);
-    colors.dark = darken(0.3, mainColor);
-    colors.text = textColor;
-    return colors;
-};

package/src/js/helpers/comparators.AvailabilityViewer.js

@@ -1,27 +0,0 @@
-export const overlayComparator = (oldProps, newProps) => {
-    // Has the day changed?
-    if (oldProps.day.day !== newProps.day.day) return false;
-
-    // Have the start or end times changed?
-    if (oldProps.day.slots[0].start !== newProps.day.slots[0].start) return false;
-
-    if (
-        oldProps.day.slots[oldProps.day.slots.length - 1].end !==
-        newProps.day.slots[newProps.day.slots.length - 1].end
-    ) {
-        return false;
-    }
-
-    // Check if any slots' `available` or `selected` values have changed...
-    const anyAvailabilityChanged = oldProps.day.slots.some((slot, i) => {
-        // Has the slot's `available` value changed?
-        if (slot.available !== newProps.day.slots[i].available) return true;
-        // Has the slot's `selected` value changed?
-        if (slot.selected !== newProps.day.slots[i].selected) return true;
-    });
-    // ...and return false if any have.
-    if (anyAvailabilityChanged) return false;
-
-    // Otherwise, don't re-render
-    return true;
-};