cronofy-elements 1.48.1 → 1.49.1

package/src/js/components/AvailabilityViewer/Slots.js

@@ -1,57 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext, StatusContext } from "./AvailabilityViewer";
-
-const Slots = ({ day }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [status, setStatus] = useContext(StatusContext);
-
-    const slotsMarkup = day.slots.map((slot, i) => {
-        let diagonal = Math.sqrt(2 * Math.pow(theme.slotHeightCalc.height, 2));
-        let slotModifierClass = slot.visiblyAvailable ? "available" : "unavailable";
-        let colour =
-            status.mode !== "free_select" && slot.visiblyAvailable ? theme.colors.available : "";
-        if (status.mode === "free_select" && slot.selected) {
-            colour = theme.colors.available;
-            slotModifierClass = "selected";
-        }
-        if (status.mode === "free_select" && !slot.visiblyAvailable) {
-            colour = theme.colors.booked;
-            slotModifierClass = "busy";
-        }
-        if (status.mode === "free_select" && !slot.visiblyAvailable && slot.selected) {
-            slotModifierClass = "selected-busy";
-        }
-        return (
-            <div
-                css={css`
-                    display: block;
-                    height: ${theme.slotHeightCalc.height}px;
-                    position: relative;
-                    background: ${colour};
-                    ${status.mode === "free_select" && !slot.visiblyAvailable && slot.selected
-                        ? `
-                        background: none;
-                        background-size: ${theme.slotHeightCalc.height}px ${
-                              theme.slotHeightCalc.height
-                          }px;
-                        background-image: repeating-linear-gradient(
-                            to bottom right,
-                            ${theme.colors.available},
-                            ${theme.colors.available} ${diagonal / 4}px,
-                            ${theme.colors.booked} ${diagonal / 4}px,
-                            ${theme.colors.booked} ${diagonal / 2}px
-                        );`
-                        : ""};
-                `}
-                className={`${theme.prefix}__slot-background ${theme.prefix}__slot-background--${slotModifierClass}`}
-                key={`slot_${slot.start}`}
-            />
-        );
-    });
-
-    return slotsMarkup;
-};
-
-export default Slots;

package/src/js/components/AvailabilityViewer/TimeExpander.js

@@ -1,93 +0,0 @@
-import React, { useContext, useState } from "react";
-import { css } from "@emotion/core";
-
-import { hours } from "../../helpers/utils";
-import { buttonReset } from "../../styles/utils";
-
-import { I18nContext, LimitsContext, ThemeContext } from "./AvailabilityViewer";
-
-const TimeExpander = ({ backwards = false }) => {
-    const i18n = useContext(I18nContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [limits, setLimits] = useContext(LimitsContext);
-
-    const [originalLimits] = useState({ start: limits.start, end: limits.end });
-
-    const handleTimeExpansion = ({ reversed }) => {
-        const key = reversed ? "start" : "end";
-        const newHour = reversed ? hours[0] : hours[hours.length - 1];
-        setLimits({
-            ...limits,
-            [key]: newHour,
-        });
-    };
-
-    const handleTimeContraction = ({ reversed }) => {
-        const key = reversed ? "start" : "end";
-        setLimits({
-            ...limits,
-            [key]: originalLimits[key],
-        });
-    };
-
-    const label = backwards ? "earlier" : "later";
-    const atMidnight = backwards
-        ? limits.start === hours[0]
-        : limits.end === hours[hours.length - 1];
-
-    const labelOrientation = (backwards && !atMidnight) || (!backwards && atMidnight) ? -90 : 90;
-
-    return (
-        <button
-            type="button"
-            css={css`
-                ${buttonReset};
-                display: block;
-                position: absolute;
-                left: 0;
-                ${backwards ? "top: 0" : "bottom: 0"};
-                z-index: 1;
-                cursor: pointer;
-                width: ${theme.sizes.labelWidth}px;
-                height: 40px;
-                transform: translateY(${backwards ? -50 : 50}%);
-                &:hover > svg {
-                    fill: ${theme.colors.primary};
-                }
-                @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    width: ${theme.sizes.labelWidthSmall}px;
-                }
-            `}
-            className={`${theme.prefix}__time-expander-button ${
-                theme.prefix
-            }__time-expander-button--${backwards ? "backwards" : "forwards"}`}
-            onClick={() =>
-                atMidnight
-                    ? handleTimeContraction({ reversed: backwards })
-                    : handleTimeExpansion({ reversed: backwards })
-            }
-        >
-            <span className={"visuallyhidden"}>{i18n.t(label)}</span>
-            <svg
-                css={css`
-                    position: absolute;
-                    top: 50%;
-                    right: 50%;
-                    width: 16px;
-                    height: 16px;
-                    fill: ${theme.colors.black};
-                    transform: translate(50%, -50%) rotate(${labelOrientation}deg);
-                    transform-origin: 50% 50%;
-                    pointer-events: none;
-                `}
-                className={`${theme.prefix}__time-expander-button-icon`}
-                viewBox="0 0 512 364"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <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>
-    );
-};
-
-export default TimeExpander;

package/src/js/components/AvailabilityViewer/TimeLines.js

@@ -1,74 +0,0 @@
-import React, { memo, useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./AvailabilityViewer";
-import { LabelsContext } from "./WeekWrapper";
-
-let TimeLines = () => {
-    const labels = useContext(LabelsContext);
-    const [theme, _setTheme] = useContext(ThemeContext);
-    const height = theme.slotHeightCalc.height;
-
-    const labelsOutput = labels.times.map(label => {
-        const lineWidth = label.hour ? "1.5px" : "1px";
-        const dashArray = label.hour ? "3,4" : "1,2";
-
-        return (
-            <div
-                key={label.start}
-                css={css`
-                    display: block;
-                    height: ${height}px;
-                    position: relative;
-                    &:first-of-type .${theme.prefix}__tick-mark {
-                        display: none;
-                    }
-                `}
-                className={`${theme.prefix}__timeline ${
-                    label.hour ? `${theme.prefix}__timeline--hour` : ""
-                }`}
-            >
-                <svg
-                    css={css`
-                        width: 100%;
-                        height: ${lineWidth};
-                        position: absolute;
-                        top: -1px;
-                        left: 0;
-                    `}
-                    className={`${theme.prefix}__tick-mark`}
-                    viewBox="0 0 500 1"
-                    preserveAspectRatio="none"
-                >
-                    <path
-                        strokeWidth={lineWidth}
-                        d="M0,1 L500,1"
-                        stroke={theme.colors.hairline}
-                        strokeDasharray={dashArray}
-                        strokeLinecap="square"
-                    />
-                </svg>
-            </div>
-        );
-    });
-    return (
-        <div
-            css={css`
-                width: 100%;
-                height: 100%;
-                border: 1px solid ${theme.colors.hairline};
-                position: relative;
-                z-index: 2;
-                pointer-events: none;
-                user-select: none;
-            `}
-            className={`${theme.prefix}__timelines`}
-        >
-            {labelsOutput}
-        </div>
-    );
-};
-
-TimeLines = memo(TimeLines);
-
-export default TimeLines;

package/src/js/components/AvailabilityViewer/TimeSelector.js

@@ -1,243 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import { transparentize } from "polished";
-import moment from "moment-timezone";
-
-import { I18nContext, LimitsContext, StatusContext, ThemeContext } from "./AvailabilityViewer";
-
-import { hours } from "../../helpers/utils";
-import { buttonReset } from "../../styles/utils";
-
-const TimeSelector = ({ done }) => {
-    const [status, setStatus] = useContext(StatusContext);
-    const i18n = useContext(I18nContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [limits, setLimits] = useContext(LimitsContext);
-
-    const handleStartChange = e => {
-        setLimits({
-            ...limits,
-            start: e.target.value,
-        });
-        done();
-    };
-
-    const handleEndChange = e => {
-        setLimits({
-            ...limits,
-            end: e.target.value,
-        });
-        done();
-    };
-
-    const startOptions = hours
-        .filter(time => {
-            const localEnd = limits.end;
-            const end = localEnd === "00:00" ? "24:00" : localEnd;
-            return parseInt(time, 10) < parseInt(end, 10);
-        })
-        .map(time => {
-            return (
-                <option key={`start_${time}`} value={time}>
-                    {i18n.f(moment.tz(time, "HH:mm", status.tzid), "LT").replace(" ", "")}
-                </option>
-            );
-        });
-
-    const endOptions = hours
-        .filter(time => {
-            const localStart = limits.start;
-            const start = localStart === "00:00" ? "00:01" : localStart;
-            return parseInt(time, 10) > parseInt(start, 10);
-        })
-        .map(time => (
-            <option key={`end_${time}`} value={time}>
-                {i18n.f(moment.tz(time, "HH:mm", status.tzid), "LT").replace(" ", "")}
-            </option>
-        ));
-
-    return (
-        /* eslint-disable */
-        <div
-            css={css`
-                position: absolute;
-                top: 20px;
-                left: 10px;
-                background: ${theme.colors.white};
-                border: 1px solid ${theme.colors.hairline};
-                border-radius: 4px;
-                box-shadow: ${transparentize(0.8, theme.colors.black)} 0 1px 3px 0;
-                padding: 30px 20px 10px 10px;
-                z-index: 4;
-            `}
-            className={`${theme.prefix}__time-select`}
-        >
-            <button
-                type="button"
-                css={css`
-                    ${buttonReset};
-                    position: absolute;
-                    top: 7px;
-                    right: 7px;
-                    width: 12px;
-                    height: 12px;
-                `}
-                onClick={done}
-                className={`${theme.prefix}__time-select__close-button`}
-            >
-                <svg
-                    css={css`
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                        width: 12px;
-                        height: 12px;
-                        display: block;
-                    `}
-                    className={`${theme.prefix}__time-select__close-button-icon`}
-                    viewBox="0 0 7 6"
-                >
-                    <path
-                        fill={theme.colors.black}
-                        d="M3.5 2.287L5.451.336c.163-.163.455-.135.651.062.197.196.225.488.062.65L4.213 3l1.951 1.951c.163.163.135.455-.062.651-.196.197-.488.225-.65.062L3.5 3.713 1.549 5.664c-.163.163-.455.135-.651-.062-.197-.196-.225-.488-.062-.65L2.787 3 .836 1.049C.673.886.7.594.898.398c.196-.197.488-.225.65-.062L3.5 2.287z"
-                    />
-                </svg>
-                <span className="visuallyhidden">{i18n.t("close")}</span>
-            </button>
-            <div
-                css={css`
-                    display: flex;
-                    align-items: center;
-                    margin-bottom: 20px;
-                    justify-content: stretch;
-                `}
-                className={`${theme.prefix}__time-select__row`}
-            >
-                <span
-                    css={css`
-                        width: 40px;
-                        margin-right: 10px;
-                        flex-shrink: 0;
-                    `}
-                    className={`${theme.prefix}__time-select__label`}
-                >
-                    {i18n.t("start")}
-                </span>
-                <div
-                    css={css`
-                        border: 1px solid ${theme.colors.hairline};
-                        border-radius: 4px;
-                        padding: 6px;
-                        display: block;
-                        background: ${theme.colors.white};
-                        height: 32px;
-                        line-height: 1;
-                        position: relative;
-                        overflow: hidden;
-                        width: 100%;
-                        min-width: 60px;
-                    `}
-                    className={`${theme.prefix}__time-select__select-wrapper`}
-                >
-                    <select
-                        css={css`
-                            color: ${theme.colors.black};
-                            display: block;
-                            font-size: 16px;
-                            padding: 0.5em;
-                            cursor: pointer;
-                            line-height: 1;
-                            background: transparent;
-                            border-radius: 0;
-                            border: 0;
-                            position: absolute;
-                            appearance: none;
-                            top: -2px;
-                            width: 120%;
-                            right: -20%;
-                            &:focus {
-                                outline: none;
-                            }
-                        `}
-                        name=""
-                        id=""
-                        onChange={e => handleStartChange(e)}
-                        value={limits.start}
-                        className={`${theme.prefix}__time-select__select`}
-                    >
-                        {startOptions}
-                    </select>
-                </div>
-            </div>
-            <div
-                css={css`
-                    display: flex;
-                    align-items: center;
-                    margin-bottom: 20px;
-                    justify-content: stretch;
-                `}
-                className={`${theme.prefix}__time-select__row`}
-            >
-                <span
-                    css={css`
-                        width: 40px;
-                        margin-right: 10px;
-                        flex-shrink: 0;
-                    `}
-                    className={`${theme.prefix}__time-select__label`}
-                >
-                    {i18n.t("end")}
-                </span>
-                <div
-                    css={css`
-                        border: 1px solid ${theme.colors.hairline};
-                        border-radius: 4px;
-                        padding: 6px;
-                        display: block;
-                        background: ${theme.colors.white};
-                        height: 32px;
-                        line-height: 1;
-                        position: relative;
-                        overflow: hidden;
-                        width: 100%;
-                        min-width: 120px;
-                    `}
-                    className={`${theme.prefix}__time-select__select-wrapper`}
-                >
-                    <select
-                        css={css`
-                            color: ${theme.colors.black};
-                            display: block;
-                            font-size: 16px;
-                            padding: 0.5em;
-                            cursor: pointer;
-                            line-height: 1;
-                            background: transparent;
-                            border-radius: 0;
-                            border: 0;
-                            position: absolute;
-                            top: -2px;
-                            width: 120%;
-                            right: -20%;
-                            appearance: none;
-                            &:focus {
-                                outline: none;
-                            }
-                        `}
-                        name=""
-                        id=""
-                        onChange={e => handleEndChange(e)}
-                        value={limits.end === "00:00" ? "24:00" : limits.end}
-                        className={`${theme.prefix}__time-select__select`}
-                    >
-                        {endOptions}
-                    </select>
-                </div>
-            </div>
-        </div>
-        /* eslint-disable */
-    );
-};
-
-export default TimeSelector;

package/src/js/components/AvailabilityViewer/TimeSelectorTrigger.js

@@ -1,42 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-const TimeSelectorTrigger = ({ handleTimeSelection }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        /* eslint-disable */
-        <div
-            css={css`
-                position: absolute;
-                bottom: 100%;
-                right: 0;
-                width: 20px;
-                height: 20px;
-                transform: translate(-10px, -10px);
-                cursor: pointer;
-                @media (max-width: 650px) {
-                    display: none;
-                }
-            `}
-            onClick={handleTimeSelection}
-            className={`${theme.prefix}__time-select__trigger`}
-        >
-            <svg
-                width="20"
-                height="20"
-                xmlns="http://www.w3.org/2000/svg"
-                className={`${theme.prefix}__time-select__trigger-icon`}
-            >
-                <path
-                    d="M3.94 6.5L2.22 3.64l1.42-1.42L6.5 3.94c.52-.3 1.1-.54 1.7-.7L9 0h2l.8 3.24c.6.16 1.18.4 1.7.7l2.86-1.72 1.42 1.42-1.72 2.86c.3.52.54 1.1.7 1.7L20 9v2l-3.24.8c-.16.6-.4 1.18-.7 1.7l1.72 2.86-1.42 1.42-2.86-1.72c-.52.3-1.1.54-1.7.7L11 20H9l-.8-3.24c-.6-.16-1.18-.4-1.7-.7l-2.86 1.72-1.42-1.42 1.72-2.86c-.3-.52-.54-1.1-.7-1.7L0 11V9l3.24-.8c.16-.6.4-1.18.7-1.7zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
-                    fill={theme.colors.hairline}
-                />
-            </svg>
-        </div>
-        /* eslint-disable */
-    );
-};
-
-export default TimeSelectorTrigger;

package/src/js/components/AvailabilityViewer/TimeZoneDisplay.js

@@ -1,28 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { I18nContext, StatusContext, ThemeContext } from "./AvailabilityViewer";
-import { tzi18n } from "../../helpers/i18n";
-
-const TimeZoneDisplay = () => {
-    const [status, setStatus] = useContext(StatusContext);
-    const i18n = useContext(I18nContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                flex-grow: 1;
-                display: flex;
-                width: 100%;
-                @media (max-width: 500px) {
-                    margin-top: 6px;
-                }
-            `}
-            className={`${theme.prefix}__timezone`}
-        >
-            {i18n.t("time_zone")}: {tzi18n(status.tzid, status.locale)}
-        </div>
-    );
-};
-
-export default TimeZoneDisplay;

package/src/js/components/AvailabilityViewer/ToggleIcon.js

@@ -1,41 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-const ToggleIcon = ({ available }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div className={`${theme.prefix}__status-icon-wrapper`}>
-            <svg
-                css={css`
-                    opacity: 0;
-                    display: block;
-                    width: 10px;
-                    height: 10px;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    padding: 0px;
-                    border-radius: 50%;
-                    pointer-events: none;
-                `}
-                className={`${theme.prefix}__status-icon`}
-                viewBox="0 0 7 6"
-            >
-                <path
-                    css={css`
-                        transform: rotate(${available ? "0" : "45deg"});
-                        transition: transform 0.4s;
-                        transform-origin: 50% 50%;
-                    `}
-                    fill={theme.colors.black}
-                    d="M3.5 2.287L5.451.336c.163-.163.455-.135.651.062.197.196.225.488.062.65L4.213 3l1.951 1.951c.163.163.135.455-.062.651-.196.197-.488.225-.65.062L3.5 3.713 1.549 5.664c-.163.163-.455.135-.651-.062-.197-.196-.225-.488-.062-.65L2.787 3 .836 1.049C.673.886.7.594.898.398c.196-.197.488-.225.65-.062L3.5 2.287z"
-                />
-            </svg>
-        </div>
-    );
-};
-
-export default ToggleIcon;

package/src/js/components/AvailabilityViewer/Tooltip.js

@@ -1,65 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-const Tooltip = ({ time, top = false, hover = true }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <span
-            css={css`
-                display: block;
-                opacity: ${hover ? 1 : 0};
-                position: absolute;
-                width: 110%;
-                min-width: 130px;
-                height: 36px;
-                color: ${theme.colors.white};
-                display: block;
-                ${top ? `top: 100%;` : `bottom: 100%;`}
-                left: 50%;
-                transform: translateX(-50%);
-                transition: opacity 0.2s;
-                user-select: none;
-                pointer-events: none;
-                text-align: center;
-            `}
-            className={`${theme.prefix}__slot-tooltip`}
-        >
-            <svg
-                css={css`
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    z-index: 1;
-                    ${top ? `transform: rotate(180deg);` : ``}
-                `}
-                className={`${theme.prefix}__slot-tooltip-background`}
-                viewBox="0 0 106 29"
-                preserveAspectRatio="none"
-            >
-                <path
-                    fill={theme.colors.black}
-                    d="M56.75 24l-4.5 4.5-4.5-4.5H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h102a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H56.75z"
-                />
-            </svg>
-            <span
-                css={css`
-                    position: relative;
-                    top: ${top ? `16px;` : `8px;`}
-                    display: block;
-                    z-index: 1;
-                    font-size: 12px;
-                    line-height: 1;
-                `}
-                className={`${theme.prefix}__slot-tooltip-label`}
-            >
-                {time}
-            </span>
-        </span>
-    );
-};
-
-export default Tooltip;