cronofy-elements 1.48.1 → 1.49.1

package/src/js/components/AvailabilityViewer/Preloading.js

@@ -1,66 +0,0 @@
-import React, { useContext } from "react";
-import { css, keyframes } from "@emotion/core";
-
-import { I18nContext, ThemeContext } from "./AvailabilityViewer";
-
-const Preloading = () => {
-    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: 0px;
-                left: 0px;
-                width: 40px;
-                height: 40px;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            `}
-            className={`${theme.prefix}__preloading`}
-        >
-            <svg
-                css={css`
-                    width: 20px;
-                    height: 20px;
-                    fill: ${theme.colors.black};
-                    animation: ${spin} infinite linear 1s;
-                `}
-                className={`${theme.prefix}__preloading-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
-                css={css`
-                    position: absolute;
-                    top: 50%;
-                    left: 100%;
-                    transform: translateY(-50%);
-                    color: ${theme.colors.black};
-                    line-height: 1;
-                    font-size: 12px;
-                `}
-                className={`${theme.prefix}__preloading-text`}
-            >
-                {i18n.t("refreshing")}
-            </span>
-        </div>
-    );
-};
-
-export default Preloading;

package/src/js/components/AvailabilityViewer/SelectedSlot.js

@@ -1,106 +0,0 @@
-import React, { useContext, useState } from "react";
-import { css } from "@emotion/core";
-import { transparentize } from "polished";
-
-import Tooltip from "./Tooltip";
-
-import { filterObject } from "../../helpers/utils";
-import {
-    createExportableSelection,
-    calculateDisplayText,
-} from "../../helpers/utils.AvailabilityViewer";
-import { buttonReset } from "../../styles/utils";
-
-import { I18nContext, ThemeContext, StatusContext } from "./AvailabilityViewer";
-import { useSelection } from "./contexts/selection-context";
-
-const SelectedSlot = ({ slotDetails }) => {
-    const slot = slotDetails.slot;
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [status, setStatus] = useContext(StatusContext);
-    const [selectedSlots, dispatchSelection] = useSelection();
-    const i18n = useContext(I18nContext);
-
-    const [displayText, setDisplayText] = useState(() => calculateDisplayText(i18n, slot, status));
-
-    const removeFromSelectionList = () => {
-        const filteredSlots = filterObject(slot.start, selectedSlots);
-
-        dispatchSelection({
-            type: "SET_SELECTED_SLOTS",
-            selectedSlots: filteredSlots,
-        });
-
-        const exportableSelection = createExportableSelection(filteredSlots);
-        let callbackContent = {
-            notification: {
-                type: "slot_removed",
-                slot,
-            },
-            slots: exportableSelection,
-        };
-        status.notificationCallback(callbackContent);
-    };
-
-    return (
-        <div
-            css={css`
-                width: 100%;
-                height: 100%;
-                flex-grow: 1;
-                position: relative;
-                background: ${theme.colors.availableActive};
-                ${
-                    status.mode !== "free_select"
-                        ? `box-shadow: ${transparentize(0.9, theme.colors.black)} 0 5px 5px -2px;`
-                        : ""
-                }
-                &:hover .${theme.prefix}__slot-tooltip {
-                    opacity: 1;
-                }
-                z-index: 1;
-            `}
-            className={`${theme.prefix}__selected-slot`}
-        >
-            {status.mode !== "multi_select" &&
-            status.mode !== "no_confirm" &&
-            status.mode !== "free_select" ? (
-                <Tooltip time={displayText.time} top={slotDetails.topSlot} hover={true} />
-            ) : null}
-
-            <button
-                type="button"
-                css={css`
-                    ${buttonReset};
-                    background: ${status.mode === "free_select"
-                        ? theme.colors.available
-                        : theme.colors.availableActive};
-                    display: block;
-                    font-size: 12px;
-                    width: 100%;
-                    height: 100%;
-                    cursor: pointer;
-                    color: ${theme.colors.white};
-                    &:focus {
-                        outline: none;
-                    }
-                `}
-                className={`${theme.prefix}__selected-slot__button`}
-                onClick={() =>
-                    status.mode === "multi_select" || status.mode === "free_select"
-                        ? removeFromSelectionList()
-                        : status.notificationCallback({
-                              notification: {
-                                  type: "slot_selected",
-                                  slot: slot,
-                              },
-                          })
-                }
-            >
-                {displayText.text}
-            </button>
-        </div>
-    );
-};
-
-export default SelectedSlot;

package/src/js/components/AvailabilityViewer/SelectedSlots.js

@@ -1,72 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import moment from "moment-timezone";
-
-import { ThemeContext } from "./AvailabilityViewer";
-
-import SelectedSlot from "./SelectedSlot";
-
-import { objectToArray } from "../../helpers/utils";
-import { useSelection } from "./contexts/selection-context";
-
-const SelectedSlots = ({ bounds }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [selectedSlots] = useSelection();
-
-    const mappableSlots = objectToArray(selectedSlots);
-    let sortedMappableSlots = mappableSlots.sort((a, b) => {
-        if (moment(a.key, "YYYY-MM-DDTHH:mm:00Z") < moment(b.key, "YYYY-MM-DDTHH:mm:00Z")) {
-            return -1;
-        }
-        if (moment(a.key, "YYYY-MM-DDTHH:mm:00Z") > moment(b.key, "YYYY-MM-DDTHH:mm:00Z")) {
-            return 1;
-        }
-        return 0;
-    });
-
-    if (typeof bounds !== "undefined") {
-        const limits = [
-            moment(bounds[0], "YYYY-MM-DD").startOf("day"),
-            moment(bounds[1], "YYYY-MM-DD").endOf("day"),
-        ];
-        sortedMappableSlots = sortedMappableSlots.filter(item => {
-            const beforeStart = moment(item.value.slot.start, "YYYY-MM-DDTHH:mm:00Z").diff(
-                limits[0],
-                "minutes"
-            );
-            const afterEnd = moment(item.value.slot.end, "YYYY-MM-DDTHH:mm:00Z").diff(
-                limits[1],
-                "minutes"
-            );
-            return beforeStart >= 0 && afterEnd <= 0;
-        });
-    }
-
-    const slotsMarkup = sortedMappableSlots.map((item, i) => {
-        let activeSlot = item.value;
-        return (
-            <React.Fragment key={`selected_${item.key}`}>
-                <div
-                    css={css`
-                        height: ${theme.slotHeightCalc.height * theme.slotHeightCalc.multiple}px;
-                        position: absolute;
-                        z-index: 5;
-                        top: ${activeSlot.position.y}px;
-                        left: ${activeSlot.position.x * theme.sizes.columnWidth}px;
-                        width: ${theme.sizes.columnWidth}px;
-                        display: flex;
-                        justify-content: center;
-                        pointerevents: auto;
-                    `}
-                    className={`${theme.prefix}__selection-positioner`}
-                >
-                    <SelectedSlot slotDetails={activeSlot} />
-                </div>
-            </React.Fragment>
-        );
-    });
-
-    return <React.Fragment>{slotsMarkup}</React.Fragment>;
-};
-
-export default SelectedSlots;

package/src/js/components/AvailabilityViewer/SelectionMask.js

@@ -1,44 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import { transparentize } from "polished";
-
-import { ThemeContext } from "./AvailabilityViewer";
-import { HoverContext } from "./Week";
-import { useSelection } from "./contexts/selection-context";
-
-const SelectionMask = () => {
-    const [selectedSlots, dispatchSelection] = useSelection();
-    const [hover, setHover] = useContext(HoverContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const handleDeselection = () => {
-        // If we setState on MouseMove for slots, the fans on a 2019 🍏 MBP will start to
-        // spin (sounding like a helicopter). But *sometimes* we need this "realtime" mouse
-        // position (i.e. when clearing a selection and reseting hover).
-        setHover({ ...hover, helicopterMode: true });
-        dispatchSelection({
-            type: "CLEAR_SELECTED_SLOTS",
-        });
-    };
-
-    return (
-        /* eslint-disable */
-        <div
-            css={css`
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: ${transparentize(0.8, theme.colors.black)};
-                z-index: 4;
-                cursor: pointer;
-            `}
-            className={`${theme.prefix}__selection-mask`}
-            onClick={handleDeselection}
-        />
-        /* eslint-disable */
-    );
-};
-
-export default SelectionMask;

package/src/js/components/AvailabilityViewer/Slot.js

@@ -1,237 +0,0 @@
-import React, { useState, useContext, useEffect } from "react";
-import moment from "moment-timezone";
-import { css } from "@emotion/core";
-
-import { HoverContext } from "./Week";
-import { I18nContext, StatusContext, ThemeContext } from "./AvailabilityViewer";
-
-import { buttonReset } from "../../styles/utils";
-import { createExportableSelection } from "../../helpers/utils.AvailabilityViewer";
-import { useSelection } from "./contexts/selection-context";
-
-const Slot = ({ slot, day, topSlot, columnCount }) => {
-    const i18n = useContext(I18nContext);
-    const [hover, setHover] = useContext(HoverContext);
-    const [status, _setStatus] = useContext(StatusContext);
-    const [theme, _setTheme] = useContext(ThemeContext);
-    const [selectedSlots, dispatchSelection] = useSelection();
-
-    const hoverButton = React.createRef();
-
-    // Default slot info
-    const [slotData, setSlotData] = useState(() => ({
-        position: { y: 0, x: columnCount },
-        topSlot: topSlot,
-        slot: {
-            start: slot.start,
-            end: slot.end,
-            participants: slot.participants,
-        },
-    }));
-
-    // Default time display
-    const [timeDisplay, setTimeDisplay] = useState(() => {
-        const defaultTimeDisplayStart = i18n
-            .f(moment(slot.start, "YYYY-MM-DDTHH:mm:00Z").tz(status.tzid), "LT")
-            .replace(" ", "");
-        const defaultTimeDisplayEnd = i18n
-            .f(moment(slot.end, "YYYY-MM-DDTHH:mm:00Z").tz(status.tzid), "LT")
-            .replace(" ", "");
-        return `${defaultTimeDisplayStart} - ${defaultTimeDisplayEnd}`;
-    });
-
-    const updateSlotData = () => {
-        const hoverTopPosition = hoverButton.current.offsetTop;
-
-        const targetSlot = slot.target ? day.slots.find(item => item.start === slot.target) : false;
-
-        if (targetSlot) {
-            // If the slot is "overlapped" by an available slot
-            // we want to select the overlapping slot instead,
-            // so let's find it and update our slot data.
-            const targetYPosition =
-                hoverTopPosition -
-                theme.slotHeightCalc.height * (theme.slotHeightCalc.multiple - slot.targetOffset);
-            setSlotData({
-                ...slotData,
-                slot: {
-                    available: targetSlot.available,
-                    start: targetSlot.start,
-                    end: targetSlot.end,
-                    participants: targetSlot.participants,
-                },
-                position: { y: targetYPosition, x: columnCount },
-            });
-        } else {
-            setSlotData({
-                ...slotData,
-                slot: {
-                    available: slot.available,
-                    start: slot.start,
-                    end: slot.end,
-                    participants: slot.participants,
-                },
-                position: { y: hoverTopPosition, x: columnCount },
-            });
-        }
-    };
-
-    useEffect(() => {
-        updateSlotData();
-    }, [slot]);
-
-    useEffect(() => {
-        updateSlotData();
-    }, []);
-
-    useEffect(() => {
-        if (status.mode === "no_confirm" && Object.keys(selectedSlots).length > 0) {
-            const target = selectedSlots[slotData.slot.start];
-            if (target && target.position.y !== slotData.position.y) {
-                if (slotData.position.y === 0 && !slotData.topSlot) {
-                    updateSlotData();
-                    return;
-                } else {
-                    dispatchSelection({
-                        type: "SET_SELECTED_SLOTS",
-                        selectedSlots: {
-                            [slotData.slot.start]: slotData,
-                        },
-                    });
-                }
-            }
-        }
-    }, [slotData]);
-
-    useEffect(() => {
-        const timeStart = moment(slotData.slot.start, "YYYY-MM-DDTHH:mm:00Z").tz(status.tzid);
-        const timeDisplayStart = i18n.f(timeStart, "LT").replace(" ", "");
-
-        const timeEnd = moment(slotData.slot.end, "YYYY-MM-DDTHH:mm:00Z").tz(status.tzid);
-        const timeDisplayEnd = i18n.f(timeEnd, "LT").replace(" ", "");
-
-        setTimeDisplay(`${timeDisplayStart} - ${timeDisplayEnd}`);
-    }, [slotData]);
-
-    const handleHover = () => {
-        const availibility = slot.visiblyAvailable && slot.target ? true : slot.available;
-
-        setHover({
-            times: timeDisplay,
-            position: slotData.position,
-            visible: true,
-            topSlot,
-            available: availibility,
-            helicopterMode: false,
-            hideTooltip: slot.blocked,
-        });
-    };
-
-    const overSelectionLimit =
-        typeof status.maxSelection === "number"
-            ? Object.keys(selectedSlots).length >= status.maxSelection
-            : false;
-
-    const handleSelect = () => {
-        if (overSelectionLimit || slot.blocked) {
-            return;
-        }
-
-        handleHover();
-
-        if (
-            slot.available ||
-            (slot.visiblyAvailable && slot.target) ||
-            status.slotSelection === "unrestricted"
-        ) {
-            const slotForSelection = slotData;
-
-            if (status.mode === "no_confirm") {
-                dispatchSelection({
-                    type: "SET_SELECTED_SLOTS",
-                    selectedSlots: {
-                        [slotForSelection.slot.start]: slotForSelection,
-                    },
-                });
-
-                status.notificationCallback({
-                    notification: {
-                        type: "slot_selected",
-                        slot: slotForSelection.slot,
-                    },
-                });
-            } else {
-                // The slot is available, and we're either in multi_select mode
-                // or default mode (there *is* a confirmation step).
-
-                // Add the newly selected slot to the list of selected slots.
-                let newSlots = { ...selectedSlots };
-                newSlots[slotForSelection.slot.start] = slotForSelection;
-
-                dispatchSelection({
-                    type: "SET_SELECTED_SLOTS",
-                    selectedSlots: newSlots,
-                });
-
-                // If we're in multi_select mode,
-                if (status.mode === "multi_select") {
-                    const exportableSelection = createExportableSelection(newSlots);
-                    const callbackContent = {
-                        notification: {
-                            type: "slot_added",
-                            slot: slotForSelection.slot,
-                        },
-                        slots: exportableSelection,
-                    };
-                    status.notificationCallback(callbackContent);
-                }
-            }
-        }
-    };
-
-    const handleLiveHover = () => {
-        // If we setState on MouseMove for slots, the fans on a 2019 🍏 MBP will start to
-        // spin (sounding like a helicopter). But *sometimes* we need this "realtime" mouse
-        // position (i.e. when clearing a selection and reseting hover).
-        if (hover.helicopterMode) {
-            handleHover();
-        }
-    };
-
-    const handleHoverEnd = () => {
-        setHover({
-            ...hover,
-            visible: false,
-        });
-    };
-
-    return (
-        /* eslint-disable */
-        <button
-            type="button"
-            ref={hoverButton}
-            css={css`
-                ${buttonReset};
-                height: 100%;
-                width: 100%;
-                display: block;
-                cursor: ${slot.visiblyAvailable && (overSelectionLimit || slot.blocked)
-                    ? "not-allowed"
-                    : "pointer"};
-                &:focus {
-                    outline: none;
-                }
-            `}
-            tabIndex="-1"
-            onClick={handleSelect}
-            onMouseOver={handleLiveHover}
-            onMouseEnter={handleHover}
-            onMouseOut={handleHoverEnd}
-        >
-            <span className="visuallyhidden">{timeDisplay}</span>
-        </button>
-        /* eslint-disable */
-    );
-};
-
-export default Slot;

package/src/js/components/AvailabilityViewer/SlotFreeSelect.js

@@ -1,115 +0,0 @@
-import React, { useContext, useState } from "react";
-import { css } from "@emotion/core";
-import { transparentize } from "polished";
-
-import { DragContext } from "./Week";
-import { I18nContext, LimitsContext, StatusContext, ThemeContext } from "./AvailabilityViewer";
-
-import ToggleIcon from "./ToggleIcon";
-import Tooltip from "./Tooltip";
-
-import { buttonReset } from "../../styles/utils";
-import { calculateTimeString, tweenSlots } from "../../helpers/utils.AvailabilityViewer";
-
-const SlotFreeSelect = ({ slot, topSlot, toggleMultiple }) => {
-    const [drag, setDrag] = useContext(DragContext);
-    const i18n = useContext(I18nContext);
-    const [limits, setLimits] = useContext(LimitsContext);
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const [timeString] = useState(calculateTimeString(slot, i18n, status.tzid));
-
-    const isDragged = drag.dragged.includes(slot.start);
-
-    let normalBG = "none";
-    let slotModifierClass = "inactive";
-    let freeOrBusy = "free";
-    if (isDragged) {
-        normalBG = drag.toggleState ? theme.colors.availableActive : theme.colors.unavailableActive;
-        slotModifierClass = "active";
-        freeOrBusy = drag.toggleState ? "free" : "busy";
-    }
-    const hoverBG = drag.mouseDown
-        ? transparentize(1, theme.colors.black)
-        : transparentize(0.8, theme.colors.black);
-
-    const handleMouseDown = () => {
-        const toggleState = !slot.selected;
-        setDrag({
-            mouseDown: true,
-            toggleState,
-            dragged: [slot.start],
-            dragStart: slot.start,
-        });
-    };
-
-    const handleMouseEnter = () => {
-        if (drag.mouseDown) {
-            const dragged = tweenSlots({
-                start: drag.dragStart,
-                end: slot.start,
-                tzid: status.tzid,
-                interval: limits.interval,
-            });
-
-            setDrag({
-                ...drag,
-                dragged,
-            });
-        }
-    };
-
-    const handleMouseUp = () => {
-        toggleMultiple(drag.dragged, drag.toggleState);
-        setDrag({
-            mouseDown: false,
-            toggleState: "available",
-            dragged: [],
-            dragStart: false,
-        });
-    };
-
-    return (
-        <button
-            type="button"
-            css={css`
-                ${buttonReset};
-                height: 100%;
-                width: 100%;
-                display: block;
-                cursor: pointer;
-                background: ${normalBG};
-                position: relative;
-                &:focus {
-                    outline: none;
-                }
-                &:hover {
-                    background: ${isDragged ? normalBG : hoverBG};
-                    .${theme.prefix}__slot-tooltip {
-                        opacity: 1;
-                    }
-                    .${theme.prefix}__status-icon {
-                        opacity: 1;
-                    }
-                }
-            `}
-            tabIndex="-1"
-            className={`
-                ${theme.prefix}__slot-free-select
-                ${theme.prefix}__slot-free-select--${slotModifierClass}
-                ${theme.prefix}__slot-free-select--${slotModifierClass}--${freeOrBusy}`}
-            onMouseDown={handleMouseDown}
-            onMouseEnter={handleMouseEnter}
-            onMouseUp={handleMouseUp}
-        >
-            {!drag.mouseDown ? (
-                <React.Fragment>
-                    <Tooltip time={timeString} top={topSlot} hover={false} />
-                    <ToggleIcon available={slot.selected} />
-                </React.Fragment>
-            ) : null}
-        </button>
-    );
-};
-export default SlotFreeSelect;