cronofy-elements 1.48.2 → 1.49.2

package/src/js/components/AvailabilityViewer/EmptyColumn.js

@@ -1,29 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { I18nContext, ThemeContext, StatusContext } from "./AvailabilityViewer";
-
-const EmptyColumn = () => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [status, setStatus] = useContext(StatusContext);
-    const i18n = useContext(I18nContext);
-    return (
-        <div
-            css={css`
-                width: 100%;
-                height: 100%;
-                flex-grow: 1;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            `}
-            className={`${theme.prefix}__column-body ${theme.prefix}__column-body--empty`}
-        >
-            <span className={`${theme.prefix}__column-message visuallyhidden`}>
-                {status.loading ? null : i18n.t("no_slots_found")}
-            </span>
-        </div>
-    );
-};
-
-export default EmptyColumn;

package/src/js/components/AvailabilityViewer/Footer.js

@@ -1,36 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import Legend from "./Legend";
-import Navigation from "./Navigation";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-const Footer = () => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                display: flex;
-                margin-top: 10px;
-                align-items: center;
-            `}
-            className={`${theme.prefix}__footer`}
-        >
-            <span
-                css={css`
-                    width: ${theme.sizes.labelWidth}px;
-                    flex-grow: 0;
-                    flex-shrink: 0;
-                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        width: ${theme.sizes.labelWidthSmall}px;
-                    }
-                `}
-            />
-            <Legend />
-            <Navigation />
-        </div>
-    );
-};
-
-export default Footer;

package/src/js/components/AvailabilityViewer/GridFreeSelect.js

@@ -1,33 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-import DayColumn from "./DayColumn";
-
-const GridFreeSelect = ({ slots, layer = 4 }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    console.log("GridFreeSelect slots", slots);
-    return (
-        <div
-            css={css`
-                display: flex;
-                justify-content: stretch;
-                position: absolute;
-                z-index: ${layer};
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-            `}
-            className={`${theme.prefix}__grid-columns`}
-        >
-            {slots.map((day, columnCount) => (
-                <DayColumn key={day.day} columnCount={columnCount} day={day} />
-            ))}
-        </div>
-    );
-};
-
-export default GridFreeSelect;

package/src/js/components/AvailabilityViewer/HoverSlot.js

@@ -1,35 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { StatusContext, ThemeContext } from "./AvailabilityViewer";
-
-const HoverSlot = ({ available }) => {
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const classModifier =
-        !available && status.slotSelection === "unrestricted"
-            ? `${theme.prefix}__hover-slot--unavailable`
-            : `${theme.prefix}__hover-slot--${available ? "available" : "unavailable"}`;
-    return (
-        <div
-            className={`${theme.prefix}__hover-slot ${classModifier}`}
-            css={css`
-                width: 100%;
-                height: 100%;
-                flex-grow: 1;
-                position: relative;
-                cursor: pointer;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                background: ${available || status.slotSelection === "unrestricted"
-                    ? theme.colors.availableHover
-                    : theme.colors.unavailableHover};
-            `}
-        />
-    );
-};
-
-export default HoverSlot;

package/src/js/components/AvailabilityViewer/HoverTooltip.js

@@ -1,34 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import Tooltip from "./Tooltip";
-
-import { StatusContext, ThemeContext } from "./AvailabilityViewer";
-
-const HoverTooltip = ({ available, times, topSlot }) => {
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const classModifier =
-        !available && status.slotSelection === "unrestricted"
-            ? `${theme.prefix}__tooltip-positioner--unavailable`
-            : `${theme.prefix}__tooltip-positioner--${available ? "available" : "unavailable"}`;
-    return (
-        <div
-            className={`${theme.prefix}__tooltip-positioner ${classModifier}`}
-            css={css`
-                width: 100%;
-                height: 100%;
-                flex-grow: 1;
-                position: relative;
-                display: flex;
-                pointer-events: none;
-                user-select: none;
-            `}
-        >
-            <Tooltip time={times} top={topSlot} />
-        </div>
-    );
-};
-
-export default HoverTooltip;

package/src/js/components/AvailabilityViewer/LabelColumn.js

@@ -1,53 +0,0 @@
-import React, { useContext, useState } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext, StatusContext } from "./AvailabilityViewer";
-import { LabelsContext } from "./WeekWrapper";
-
-import LabelItem from "./LabelItem";
-import TimeExpander from "./TimeExpander";
-import TimeSelector from "./TimeSelector";
-import TimeSelectorTrigger from "./TimeSelectorTrigger";
-
-const LabelColumn = () => {
-    const [selectionVisibility, setSelectionVisibility] = useState(false);
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-    const labels = useContext(LabelsContext);
-
-    const handleTimeSelection = () => {
-        setSelectionVisibility(!selectionVisibility);
-    };
-
-    const labelsOutput = labels.times.map((label, i) => (
-        <LabelItem key={label.start} label={label} i={i} />
-    ));
-
-    return (
-        <div
-            css={css`
-                width: ${theme.sizes.labelWidth}px;
-                flex-grow: 0;
-                flex-shrink: 0;
-                position: relative;
-                z-index: 2;
-                @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    width: ${theme.sizes.labelWidthSmall}px;
-                }
-            `}
-            className={`${theme.prefix}__time-labels`}
-        >
-            {selectionVisibility && <TimeSelector done={handleTimeSelection} />}
-            {status.boundsControl && status.mode !== "free_select" && (
-                <TimeSelectorTrigger handleTimeSelection={handleTimeSelection} />
-            )}
-            {(status.mode === "free_select" || status.allowExpansion) && (
-                <TimeExpander backwards={true} />
-            )}
-            {labelsOutput}
-            {(status.mode === "free_select" || status.allowExpansion) && <TimeExpander />}
-        </div>
-    );
-};
-
-export default LabelColumn;

package/src/js/components/AvailabilityViewer/LabelItem.js

@@ -1,73 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import moment from "moment-timezone";
-import { css } from "@emotion/core";
-
-import { useWindowSize } from "../../hooks/useWindowSize";
-import { condenseTimeLabel } from "../../helpers/utils.AvailabilityViewer";
-
-import { I18nContext, ThemeContext, StatusContext } from "./AvailabilityViewer";
-
-const LabelItem = ({ label, i }) => {
-    const i18n = useContext(I18nContext);
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const size = useWindowSize();
-
-    let labelText = null;
-
-    const localStart = moment.utc(label.start, "YYYY-MM-DDTHH:mm:00Z").tz(status.tzid);
-
-    const calculateLabel = () => {
-        const labelText = i18n.f(localStart, "LT");
-        return size.width > theme.sizes.breakpoints.small
-            ? labelText
-            : condenseTimeLabel(labelText);
-    };
-
-    const [timeLabel, setTimeLabel] = useState(() => calculateLabel());
-
-    useEffect(() => {
-        setTimeLabel(calculateLabel());
-    }, [size]);
-
-    if (label.hour && i > 0) {
-        labelText = (
-            <span
-                css={css`
-                    display: block;
-                    width: 100%;
-                    position: absolute;
-                    right: 2px;
-                    color: ${theme.colors.black};
-                    line-height: 1;
-                    font-size: 12px;
-                    text-transform: lowercase;
-                    text-align: right;
-                    transform: translateY(-50%);
-                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        width: ${theme.sizes.labelWidthSmall}px;
-                    }
-                `}
-                className={`${theme.prefix}__time-text`}
-            >
-                {timeLabel}
-            </span>
-        );
-    }
-    return (
-        <div
-            key={label.start}
-            css={css`
-                display: block;
-                height: ${theme.slotHeightCalc.height}px;
-                position: relative;
-            `}
-            className={`${theme.prefix}__time-label`}
-        >
-            {labelText}
-        </div>
-    );
-};
-
-export default LabelItem;

package/src/js/components/AvailabilityViewer/Legend.js

@@ -1,79 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { I18nContext, StatusContext, ThemeContext } from "./AvailabilityViewer";
-import TimeZoneDisplay from "./TimeZoneDisplay";
-
-const LegendItem = ({ status }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-
-    let colour;
-    switch (status) {
-        case "selected":
-        case "available":
-            colour = theme.colors.available;
-            break;
-        case "busy":
-            colour = theme.colors.booked;
-            break;
-
-        default:
-            colour = "none";
-    }
-
-    return (
-        <div
-            css={css`
-                display: flex;
-                flex-shrink: 0;
-                margin-right: 20px;
-            `}
-            className={`${theme.prefix}__legend-item`}
-        >
-            <div
-                css={css`
-                    width: 20px;
-                    height: 20px;
-                    flex-shrink: 0;
-                    border: 1px solid ${theme.colors.hairline};
-                    margin-right: 10px;
-                    background: ${colour};
-                `}
-                className={`${theme.prefix}__example ${theme.prefix}__example--${status}`}
-            />
-            <span className={`${theme.prefix}__legend-label`}>{i18n.t(status)}</span>
-        </div>
-    );
-};
-
-const Legend = () => {
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    let legendItems = ["available", "unavailable"];
-    if (status.mode === "free_select") {
-        legendItems = ["selected", "free", "busy"];
-    }
-
-    return (
-        <div
-            css={css`
-                flex-grow: 1;
-                display: flex;
-                margin-left: ${theme.sizes.wrapperUnderflow}px;
-                @media (max-width: 550px) {
-                    flex-wrap: wrap;
-                }
-            `}
-            className={`${theme.prefix}__legend`}
-        >
-            {legendItems.map(item => (
-                <LegendItem key={`item_${item}`} status={item} />
-            ))}
-            {status.customtzid ? <TimeZoneDisplay /> : null}
-        </div>
-    );
-};
-
-export default Legend;

package/src/js/components/AvailabilityViewer/Loading.js

@@ -1,57 +0,0 @@
-import React, { useContext } from "react";
-import { css, keyframes } from "@emotion/core";
-import { transparentize } from "polished";
-
-import { I18nContext, ThemeContext } from "./AvailabilityViewer";
-
-const Loading = () => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-
-    const spin = keyframes`
-        0% {
-            transform: rotate(0deg);
-        }
-        100%{
-            transform: rotate(360deg);
-        }
-    `;
-
-    return (
-        <div
-            css={css`
-                position: absolute;
-                z-index: 5;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: ${transparentize(0.8, theme.colors.black)};
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            `}
-            className={`${theme.prefix}__loading`}
-        >
-            <svg
-                css={css`
-                    width: 2em;
-                    height: 2em;
-                    fill: ${theme.colors.white};
-                    animation: ${spin} infinite linear 1s;
-                `}
-                className={`${theme.prefix}__loading-icon`}
-                viewBox="0 0 489.711 489.711"
-            >
-                <path d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13 c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13 c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1 c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z" />
-                <path d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7 c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8 c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1 c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4 C456.056,357.911,481.656,274.811,462.456,195.511z" />
-            </svg>
-            <span className={`${theme.prefix}__loading-text visuallyhidden`}>
-                {i18n.t("loading")}
-            </span>
-        </div>
-    );
-};
-
-export default Loading;

package/src/js/components/AvailabilityViewer/MonthLabels.js

@@ -1,43 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./AvailabilityViewer";
-import { LabelsContext } from "./WeekWrapper";
-
-const MonthLabels = () => {
-    const labels = useContext(LabelsContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                display: flex;
-                justify-content: stretch;
-                position: relative;
-            `}
-            className={`${theme.prefix}__month-labels`}
-        >
-            <div
-                css={css`
-                    width: ${theme.sizes.labelWidth}px;
-                    flex-grow: 0;
-                    flex-shrink: 0;
-                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        width: ${theme.sizes.labelWidthSmall}px;
-                    }
-                `}
-            />
-            <div
-                css={css`
-                    font-size: 20px;
-                    margin-left: ${theme.sizes.wrapperUnderflow}px;
-                `}
-                className={`
-                    ${theme.prefix}__month-label`}
-            >
-                {labels.month}
-            </div>
-        </div>
-    );
-};
-
-export default MonthLabels;

package/src/js/components/AvailabilityViewer/Navigation.js

@@ -1,138 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import { css } from "@emotion/core";
-
-import { buttonReset } from "../../styles/utils";
-
-import { LoggingContext, I18nContext, StatusContext, ThemeContext } from "./AvailabilityViewer";
-import { usePages } from "./contexts/page-context";
-
-const Navigation = () => {
-    const log = useContext(LoggingContext);
-    const i18n = useContext(I18nContext);
-    const [pages, dispatchPages] = usePages();
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    useEffect(() => {
-        const dataIsPreloaded = status.pagesLoaded.includes(pages.current);
-        setStatus(status => ({
-            ...status,
-            error: false,
-            loading: !dataIsPreloaded,
-            preloading: dataIsPreloaded,
-        }));
-    }, [pages.current]);
-
-    const navigatePage = nextPrev => {
-        if (typeof nextPrev !== "number") {
-            log.warn("navigatePage called without a number");
-        }
-
-        if (nextPrev > 0) {
-            dispatchPages({ type: "SET_NEXT_PAGE" });
-        } else {
-            dispatchPages({ type: "SET_PREV_PAGE" });
-        }
-    };
-
-    const navButton = css`
-        ${buttonReset};
-        display: block;
-        cursor: pointer;
-        position: relative;
-        background: ${theme.colors.primary};
-        color: ${theme.colors.white};
-        padding: 10px;
-        border-radius: 2px;
-        border: 1px solid ${theme.colors.primary};
-        width: 32px;
-        height: 33px;
-        text-align: center;
-        margin-left: 4px;
-    `;
-
-    const icon = css`
-        position: absolute;
-        top: 50%;
-        right: 50%;
-        width: 16px;
-        height: 16px;
-        fill: ${theme.colors.white};
-        transform: translate(50%, -50%);
-        pointer-events: none;
-    `;
-
-    const disabledButton = css`
-        background: ${theme.colors.white};
-        border-color: ${theme.colors.hairline};
-    `;
-    const disabledIcon = css`
-        fill: ${theme.colors.hairline};
-    `;
-
-    const buttonOneStyles = css`
-        ${navButton};
-        ${!pages.hasPrev ? disabledButton : ""}
-    `;
-    const buttonTwoStyles = css`
-        ${navButton};
-        ${!pages.hasNext ? disabledButton : ""}
-    `;
-
-    return (
-        <React.Fragment>
-            {pages.total > 0 ? (
-                <div
-                    className={`${theme.prefix}__navigation`}
-                    css={css`
-                        display: flex;
-                        justify-content: flex-end;
-                    `}
-                >
-                    <button
-                        type="button"
-                        onClick={() => navigatePage(-1)}
-                        css={buttonOneStyles}
-                        disabled={!pages.hasPrev ? true : false}
-                        className={`${theme.prefix}__button ${theme.prefix}__button--prev`}
-                    >
-                        <span className={"visuallyhidden"}>{i18n.t("previous")}</span>
-                        <svg
-                            css={css`
-                                ${icon};
-                                transform: translate(50%, -50%) rotate(180deg);
-                                transform-origin: 50% 50%;
-                                ${!pages.hasPrev ? disabledIcon : ""}
-                            `}
-                            className={`${theme.prefix}__icon ${theme.prefix}__icon--prev`}
-                            viewBox="0 0 512 364"
-                        >
-                            <path d="M323.114,3.795 C327.274,-0.365 334.037,-0.365 338.197,3.795 L338.197,3.795 L508.466432,174.062857 C510.636034,176.015872 512.001,178.845594 512.001,181.992 C512.001,184.915901 510.822508,187.566325 508.914941,189.493853 L508.864,189.545 L508.864,189.545 L508.84,189.568 L338.198,360.211 C336.21425,362.19475 333.624354,363.237137 331.008322,363.320559 L330.667,363.326 C327.936,363.326 325.206,362.28 323.115,360.211 C318.955,356.051 318.955,349.288 323.115,345.128 L323.115,345.128 L475.583,192.658 L10.667,192.659 C4.87396774,192.659 0.154449792,188.032918 0.00371430969,182.276022 L0,181.992 C0,176.104 4.779,171.325 10.667,171.325 L10.667,171.325 L475.559,171.324 L323.114,18.878 C319.028286,14.7922857 318.955327,8.19570568 322.895122,4.02031761 Z"></path>
-                        </svg>
-                    </button>
-                    <button
-                        type="button"
-                        onClick={() => navigatePage(1)}
-                        css={buttonTwoStyles}
-                        className={`${theme.prefix}__button ${theme.prefix}__button--next`}
-                        disabled={!pages.hasNext ? true : false}
-                    >
-                        <span className={"visuallyhidden"}>{i18n.t("next")}</span>
-                        <svg
-                            css={css`
-                                ${icon};
-                                ${!pages.hasNext ? disabledIcon : ""}
-                            `}
-                            className={`${theme.prefix}__icon ${theme.prefix}__icon--next`}
-                            viewBox="0 0 512 364"
-                        >
-                            <path d="M323.114,3.795 C327.274,-0.365 334.037,-0.365 338.197,3.795 L338.197,3.795 L508.466432,174.062857 C510.636034,176.015872 512.001,178.845594 512.001,181.992 C512.001,184.915901 510.822508,187.566325 508.914941,189.493853 L508.864,189.545 L508.864,189.545 L508.84,189.568 L338.198,360.211 C336.21425,362.19475 333.624354,363.237137 331.008322,363.320559 L330.667,363.326 C327.936,363.326 325.206,362.28 323.115,360.211 C318.955,356.051 318.955,349.288 323.115,345.128 L323.115,345.128 L475.583,192.658 L10.667,192.659 C4.87396774,192.659 0.154449792,188.032918 0.00371430969,182.276022 L0,181.992 C0,176.104 4.779,171.325 10.667,171.325 L10.667,171.325 L475.559,171.324 L323.114,18.878 C319.028286,14.7922857 318.955327,8.19570568 322.895122,4.02031761 Z"></path>
-                        </svg>
-                    </button>
-                </div>
-            ) : null}
-        </React.Fragment>
-    );
-};
-
-export default Navigation;

package/src/js/components/AvailabilityViewer/Overlay.js

@@ -1,60 +0,0 @@
-import React, { memo, useContext } from "react";
-import { css } from "@emotion/core";
-
-import Slot from "./Slot";
-import SlotFreeSelect from "./SlotFreeSelect";
-
-import { StatusContext, ThemeContext } from "./AvailabilityViewer";
-
-import { overlayComparator } from "../../helpers/comparators.AvailabilityViewer";
-
-let Overlay = ({ day, columnCount, toggleMultiple }) => {
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const overlay = day.slots.map((slot, i) => {
-        let lastAvailable = false;
-        let blockBelow = false;
-        const topSlot = i < theme.slotHeightCalc.multiple;
-
-        const height = lastAvailable
-            ? theme.slotHeightCalc.height * theme.slotHeightCalc.multiple
-            : theme.slotHeightCalc.height;
-        return (
-            <div
-                css={css`
-                    display: block;
-                    height: ${height}px;
-                `}
-                key={`${day.day}_${i}`}
-            >
-                {status.mode !== "free_select" && (
-                    <Slot
-                        slot={slot}
-                        day={day}
-                        columnCount={columnCount}
-                        topSlot={topSlot}
-                        blockBelow={blockBelow}
-                    />
-                )}
-                {status.mode === "free_select" && (
-                    <SlotFreeSelect
-                        key={`slot-free-${slot.start}`}
-                        slot={slot}
-                        day={day}
-                        columnCount={columnCount}
-                        topSlot={topSlot}
-                        blockBelow={blockBelow}
-                        toggleMultiple={toggleMultiple}
-                    />
-                )}
-            </div>
-        );
-    });
-
-    return overlay;
-};
-
-Overlay = memo(Overlay, overlayComparator);
-
-export default Overlay;