cronofy-elements 1.48.1 → 1.49.1

package/src/js/components/AvailabilityRules/Footer.js

@@ -1,109 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ExtrasContext, ThemeContext, StatusContext } from "./Wrapper";
-import Legend from "./Legend";
-import TimeZoneDisplay from "./TimeZoneDisplay";
-import RemoveButton from "./RemoveButton";
-import LoadingSpinner from "../generic/LoadingSpinner";
-
-import { buttonReset } from "../../styles/utils";
-import { useI18n } from "../../contexts/i18n-context";
-
-const Footer = ({ generateRules }) => {
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [status, setStatus] = useContext(StatusContext);
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                margin-top: 20px;
-                display: flex;
-                justify-content: stretch;
-                align-items: center;
-                @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    flex-wrap: wrap;
-                    align-items: flex-end;
-                }
-            `}
-            className={`${theme.prefix}__footer`}
-        >
-            <div
-                className={`${theme.prefix}__footer-spacer`}
-                css={css`
-                    display: block;
-                    width: ${theme.sizes.labelWidth}px;
-                    flex-shrink: 0;
-                    height: ${extras.slotHeight.height}px;
-                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        display: none;
-                    }
-                `}
-            />
-            <Legend />
-            <TimeZoneDisplay />
-            {status.saved ? (
-                <div
-                    css={css`
-                        padding: 10px;
-                        background: ${theme.colors.whiteDark};
-                        border-left: 4px solid
-                            ${status.savedSuccess ? theme.colors.green : theme.colors.red};
-                        margin-right: 10px;
-                        flex-shrink: 0;
-                    `}
-                    className={`${theme.prefix}__confirmation`}
-                >
-                    {status.savedSuccess ? i18n.t("rules_saved") : i18n.t("error")}
-                    <RemoveButton callback={() => setStatus({ ...status, saved: false })} />
-                </div>
-            ) : null}
-            <button
-                type="button"
-                css={css`
-                    ${buttonReset};
-                    display: block;
-                    cursor: pointer;
-                    position: relative;
-                    background: ${theme.colors.primary};
-                    color: ${theme.colors.white};
-                    padding: 10px;
-                    border-radius: 2px;
-                    min-width: 132px;
-                    flex-shrink: 0;
-                    text-align: center;
-                    flex-shrink: 0;
-                `}
-                onClick={() => generateRules()}
-                className={`${theme.prefix}__submit`}
-            >
-                {status.saving ? (
-                    <div
-                        css={css`
-                            display: flex;
-                            justify-content: space-between;
-                            font-size: 1em;
-                            align-items: center;
-                        `}
-                        className={`${theme.prefix}__submit-inner`}
-                    >
-                        <LoadingSpinner size={20} padding={0} color={theme.colors.white} />
-                        <span
-                            css={css`
-                                display: block;
-                                width: 100%;
-                            `}
-                        >
-                            {i18n.t("saving")}
-                        </span>
-                    </div>
-                ) : (
-                    i18n.t("save_new_rules")
-                )}
-            </button>
-        </div>
-    );
-};
-
-export default Footer;

package/src/js/components/AvailabilityRules/Legend.js

@@ -1,57 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Wrapper";
-import { useI18n } from "../../contexts/i18n-context";
-
-const LegendItem = ({ available }) => {
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                display: flex;
-                margin-right: 20px;
-            `}
-            className={`${theme.prefix}__legend-item`}
-        >
-            <div
-                css={css`
-                    width: 20px;
-                    height: 20px;
-                    border: 1px solid ${theme.colors.hairline};
-                    margin-right: 10px;
-                    background: ${available ? theme.colors.available : theme.colors.unavailable};
-                `}
-                className={`${theme.prefix}__example ${theme.prefix}__example--${
-                    available ? "available" : "unavailable"
-                }`}
-            />
-            <span className={`${theme.prefix}__legend-label`}>
-                {available ? i18n.t("available") : i18n.t("unavailable")}
-            </span>
-        </div>
-    );
-};
-
-const Legend = () => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <div
-            css={css`
-                flex-grow: 1;
-                display: flex;
-                flex-shrink: 0;
-                @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    margin-bottom: 16px;
-                }
-            `}
-            className={`${theme.prefix}__legend`}
-        >
-            <LegendItem available={true} />
-            <LegendItem available={false} />
-        </div>
-    );
-};
-
-export default Legend;

package/src/js/components/AvailabilityRules/Loading.js

@@ -1,53 +0,0 @@
-import React, { useContext } from "react";
-import { css, keyframes } from "@emotion/core";
-import { transparentize } from "polished";
-
-import { ThemeContext } from "./Wrapper";
-import { useI18n } from "../../contexts/i18n-context";
-
-const spin = keyframes`
-    0% {
-        transform: rotate(0deg);
-    }
-    100%{
-        transform: rotate(360deg);
-    }
-`;
-
-const Loading = () => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const i18n = useI18n();
-    return (
-        <div
-            css={css`
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: ${transparentize(0.8, "#000000")};
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            `}
-            className={`${theme.prefix}__loading-wrapper`}
-        >
-            <svg
-                css={css`
-                    width: 2em;
-                    height: 2em;
-                    fill: #ffffff;
-                    animation: ${spin} infinite linear 1s;
-                `}
-                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={"visuallyhidden"}>{i18n.t("loading")}</span>
-        </div>
-    );
-};
-
-export default Loading;

package/src/js/components/AvailabilityRules/RemoveButton.js

@@ -1,57 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { buttonReset } from "../../styles/utils";
-import { ThemeContext } from "./Wrapper";
-import { useI18n } from "../../contexts/i18n-context";
-
-const RemoveButton = ({ callback }) => {
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <button
-            type="button"
-            css={css`
-                ${buttonReset}
-                margin-left: 8px;
-                background: ${theme.colors.white};
-                padding: 0;
-                border-radius: 50%;
-                height: 16px;
-                width: 16px;
-                position: relative;
-                cursor: pointer;
-                transition: background 0.2s;
-                &:hover {
-                    background: ${theme.colors.black};
-                    .${theme.prefix}__calendars__remove-button-icon {
-                        fill: ${theme.colors.white};
-                    }
-                }
-            `}
-            className={`${theme.prefix}__calendars__remove-button`}
-            onClick={() => callback()}
-        >
-            <svg
-                css={css`
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    width: 8px;
-                    height: 8px;
-                    display: block;
-                    transition: fill 0.2s;
-                    fill: ${theme.colors.black};
-                `}
-                className={`${theme.prefix}__calendars__remove-button-icon`}
-                viewBox="0 0 7 6"
-            >
-                <path 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("remove")}</span>
-        </button>
-    );
-};
-
-export default RemoveButton;

package/src/js/components/AvailabilityRules/Slot.js

@@ -1,195 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import { transparentize } from "polished";
-
-import { ExtrasContext, ThemeContext } from "./Wrapper";
-
-import ToggleIcon from "./ToggleIcon";
-import Tooltip from "./Tooltip";
-
-import { buttonReset } from "../../styles/utils";
-import { connectSlots } from "../../helpers/slots.rules";
-import { useI18n } from "../../contexts/i18n-context";
-import { useDrag } from "./contexts/drag-context";
-
-const Slot = ({ slot, handleRuleChange, first }) => {
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [drag, setDrag] = useDrag();
-
-    const hoverBG = drag.mouseDown
-        ? transparentize(1, theme.colors.black)
-        : transparentize(0.8, theme.colors.black);
-
-    const isDragged = drag.dragged.includes(slot.id);
-
-    let normalBG = "none";
-    if (isDragged) {
-        normalBG =
-            drag.toggleState === "available"
-                ? theme.colors.availableActive
-                : theme.colors.unavailableActive;
-    }
-
-    const cursor = drag.mouseDown ? "row-resize" : "pointer";
-
-    const handleMouseDown = () => {
-        const toggleState = slot.available ? "unavailable" : "available";
-        setDrag({
-            mouseDown: true,
-            toggleState,
-            dragged: [slot.id],
-            dragStart: slot.id,
-        });
-    };
-
-    const handleMouseEnter = () => {
-        if (drag.mouseDown) {
-            const dragged = connectSlots(drag.dragStart, slot.id);
-
-            setDrag({
-                ...drag,
-                dragged,
-            });
-        }
-    };
-
-    const handleMouseUp = () => {
-        handleRuleChange(drag.dragged, drag.toggleState);
-        setDrag({
-            mouseDown: false,
-            toggleState: "available",
-            dragged: [],
-            dragStart: false,
-        });
-    };
-
-    const handleKeyDown = e => {
-        if (!extras.keyboardSupport) return;
-
-        switch (e.key) {
-            case "Spacebar":
-            case " ":
-                const toggleState = slot.available ? "unavailable" : "available";
-                setDrag({
-                    mouseDown: true,
-                    toggleState,
-                    dragged: [slot.id],
-                    dragStart: slot.id,
-                    dragColumn: slot.day,
-                });
-                break;
-            case "Tab":
-                if (drag.mouseDown) {
-                    const dragged = connectSlots(drag.dragStart, slot.id);
-
-                    setDrag({
-                        ...drag,
-                        dragged,
-                    });
-                }
-                break;
-            case "Enter":
-                handleRuleChange(drag.dragged, drag.toggleState);
-                setDrag({
-                    mouseDown: false,
-                    toggleState: "available",
-                    dragged: [],
-                    dragStart: false,
-                    dragColumn: false,
-                });
-                break;
-            case "Escape":
-                setDrag({
-                    mouseDown: false,
-                    toggleState: "available",
-                    dragged: [],
-                    dragStart: false,
-                    dragColumn: false,
-                });
-                break;
-        }
-    };
-
-    const handleFocus = () => {
-        if (!extras.keyboardSupport) return;
-
-        if (drag.mouseDown) {
-            if (drag.dragColumn !== slot.day) {
-                setDrag({
-                    mouseDown: false,
-                    toggleState: "available",
-                    dragged: [],
-                    dragStart: false,
-                    dragColumn: false,
-                });
-            } else {
-                const dragged = connectSlots(drag.dragStart, slot.id);
-
-                setDrag({
-                    ...drag,
-                    dragged,
-                });
-            }
-        }
-    };
-
-    return (
-        <div
-            css={css`
-                display: block;
-                height: ${extras.slotHeight.height}px;
-                background: ${normalBG};
-                transition: background 0.2s;
-            `}
-            className={`${theme.prefix}__slot ${theme.prefix}__slot--${
-                slot.available ? "available" : "unavailable"
-            } ${isDragged ? `${theme.prefix}__slot--dragging` : ""}`}
-        >
-            <button
-                type="button"
-                css={css`
-                    ${buttonReset};
-                    height: 100%;
-                    width: 100%;
-                    display: block;
-                    cursor: ${cursor};
-                    position: relative;
-                    user-select: none;
-                    &:hover {
-                        background: ${hoverBG};
-                        .${theme.prefix}__slot-tooltip {
-                            opacity: 1;
-                        }
-                        .${theme.prefix}__status-icon {
-                            opacity: 1;
-                        }
-                    }
-                    &:focus {
-                        outline: ${extras.keyboardSupport === "basic"
-                            ? `solid ${theme.colors.availableHover}`
-                            : "none"};
-                    }
-                `}
-                tabIndex={extras.keyboardSupport === "basic" ? "0" : "-1"}
-                className={`${theme.prefix}__slot-button`}
-                onMouseDown={handleMouseDown}
-                onMouseEnter={handleMouseEnter}
-                onMouseUp={handleMouseUp}
-                onKeyDown={e => handleKeyDown(e)}
-                onFocus={handleFocus}
-            >
-                {!drag.mouseDown ? (
-                    <React.Fragment>
-                        <Tooltip key={`slot_tooltip_${slot.id}`} time={slot.label} top={first} />
-                        <ToggleIcon key={`slot_icon_${slot.id}`} available={slot.available} />
-                    </React.Fragment>
-                ) : null}
-                <span className="visuallyhidden">{i18n.t("toggle_slot")}</span>
-            </button>
-        </div>
-    );
-};
-
-export default Slot;

package/src/js/components/AvailabilityRules/SlotDisplay.js

@@ -1,27 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ExtrasContext, ThemeContext } from "./Wrapper";
-
-const Slot = ({ slot }) => {
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    let normalBG = slot.available ? theme.colors.available : theme.colors.unavailable;
-
-    return (
-        <div
-            css={css`
-                display: block;
-                height: ${extras.slotHeight.height}px;
-                background: ${normalBG};
-                transition: background 0.2s;
-            `}
-            className={`${theme.prefix}__slot-background ${theme.prefix}__slot-background--${
-                slot.available ? `available` : `unavailable`
-            }`}
-        />
-    );
-};
-
-export default Slot;

package/src/js/components/AvailabilityRules/Slots.js

@@ -1,81 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { SlotsContext, ThemeContext, ExtrasContext } from "./Wrapper";
-import { useDrag } from "./contexts/drag-context";
-
-import Slot from "./Slot";
-
-const Slots = () => {
-    const [slots, handleRuleChange] = useContext(SlotsContext);
-    const [drag, setDrag] = useDrag();
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const handleMouseOut = () => {
-        if (drag.mouseDown) {
-            handleRuleChange(drag.dragged, drag.toggleState);
-            setDrag({
-                mouseDown: false,
-                toggleState: true,
-                dragged: [],
-                dragStart: false,
-                dragColumn: false,
-            });
-        }
-    };
-
-    const daysList = slots.map((day, i) => {
-        return (
-            <div
-                key={day.day}
-                css={css`
-                    display: block;
-                    margin: 0;
-                    padding: 0;
-                    width: ${theme.sizes.columnWidth}px;
-                    flex-shrink: 1;
-                    z-index: 3;
-                `}
-                className={`${theme.prefix}__slots-column`}
-            >
-                {day.slots.map((slot, i) => {
-                    const reverseOptions = {
-                        15: 4,
-                        30: 2,
-                        60: 1,
-                    };
-                    const first = i < reverseOptions[extras.limits.duration];
-                    return (
-                        <Slot
-                            key={`Slot_${slot.id}`}
-                            slot={slot}
-                            handleRuleChange={handleRuleChange}
-                            first={first}
-                        />
-                    );
-                })}
-            </div>
-        );
-    });
-    return (
-        <div
-            css={css`
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                align-content: stretch;
-                position: absolute;
-                top: 0;
-                left: 0;
-            `}
-            className={`${theme.prefix}__slots-columns`}
-            onMouseLeave={handleMouseOut}
-        >
-            {daysList}
-        </div>
-    );
-};
-
-export default Slots;

package/src/js/components/AvailabilityRules/SlotsDisplay.js

@@ -1,68 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { SlotsContext, ThemeContext, ExtrasContext } from "./Wrapper";
-
-import SlotDisplay from "./SlotDisplay";
-
-const SlotsDisplay = () => {
-    const [slots, _] = useContext(SlotsContext);
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const daysList = slots.map((day, i) => {
-        return (
-            <div
-                key={day.day}
-                css={css`
-                    display: block;
-                    margin: 0;
-                    padding: 0;
-                    width: ${theme.sizes.columnWidth}px;
-                    flex-shrink: 1;
-                    border-right: 1px solid ${theme.colors.hairline};
-                    &:last-of-type {
-                        border-right: none;
-                    }
-                `}
-                className={`${theme.prefix}__slots-background-column`}
-            >
-                {day.slots.map((slot, i) => {
-                    const reverseOptions = {
-                        15: 4,
-                        30: 2,
-                        60: 1,
-                    };
-                    const first = i < reverseOptions[extras.limits.duration];
-                    return (
-                        <SlotDisplay
-                            key={`SlotDisplay_${day.day}_${slot.start}`}
-                            slot={slot}
-                            first={first}
-                        />
-                    );
-                })}
-            </div>
-        );
-    });
-
-    return (
-        <div
-            css={css`
-                display: flex;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                align-content: stretch;
-                position: absolute;
-                top: 0;
-                left: 0;
-            `}
-            className={`${theme.prefix}__slots-background-columns`}
-        >
-            {daysList}
-        </div>
-    );
-};
-
-export default SlotsDisplay;