cronofy-elements 1.48.2 → 1.49.2

package/src/js/components/AvailabilityViewer/Week.js

@@ -1,255 +0,0 @@
-import React, { useContext, useState, useEffect } from "react";
-import { css } from "@emotion/core";
-
-import DayColumn from "./DayColumn";
-import DayColumnDisplay from "./DayColumnDisplay";
-import DayColumnWrapper from "./DayColumnWrapper";
-import Error from "../generic/Error";
-import HoverSlot from "./HoverSlot";
-import HoverTooltip from "./HoverTooltip";
-import Loading from "./Loading";
-import Preloading from "./Preloading";
-import SelectedSlots from "./SelectedSlots";
-import SelectionMask from "./SelectionMask";
-import TimeLines from "./TimeLines";
-
-import {
-    I18nContext,
-    LimitsContext,
-    MasterSlotsContext,
-    SlotsContext,
-    StatusContext,
-    ThemeContext,
-} from "./AvailabilityViewer";
-import {
-    buildPeriodsFromSlots,
-    checkBlockedSlots,
-    getSelectedSlots,
-} from "../../helpers/utils.AvailabilityViewer";
-import { objectIsEmpty } from "../../helpers/utils";
-import { useSelection } from "./contexts/selection-context";
-
-export const HoverContext = React.createContext();
-export const DragContext = React.createContext();
-
-const Week = () => {
-    const i18n = useContext(I18nContext);
-    const slots = useContext(SlotsContext);
-
-    const [limits, setLimits] = useContext(LimitsContext);
-    const [slotData, setSlotData] = useContext(MasterSlotsContext);
-    const [status, setStatus] = useContext(StatusContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [selectedSlots, dispatchSelection] = useSelection();
-
-    const [drag, setDrag] = useState({
-        mouseDown: false,
-        toggleState: "available",
-        dragged: [],
-        dragStart: false,
-    });
-
-    const [hover, setHover] = useState({
-        times: false,
-        position: { y: 0, x: 0 },
-        visible: false,
-        topSlot: false,
-        available: false,
-        hideTooltip: false,
-        // If we setState on MouseOver 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).
-        helicopterMode: false,
-    });
-
-    const hoverElement = React.createRef();
-    const hoverElementTooltip = React.createRef();
-
-    const toggleMultiple = (IDs, toggleStatus) => {
-        setSlotData(oldSlotData => {
-            const updatedSlotData = oldSlotData.map(day => ({
-                ...day,
-                slots: day.slots.map(slot =>
-                    IDs.includes(slot.start) ? { ...slot, selected: toggleStatus } : slot
-                ),
-            }));
-
-            const currentlySelectedSlots = getSelectedSlots(updatedSlotData);
-            const queryPeriods = buildPeriodsFromSlots(currentlySelectedSlots);
-            const callbackContent = {
-                notification: {
-                    type: "query_periods_edited",
-                    query_periods: queryPeriods,
-                },
-            };
-            status.notificationCallback(callbackContent);
-            return updatedSlotData;
-        });
-    };
-
-    const handleMouseOut = () => {
-        if (drag.mouseDown) {
-            toggleMultiple(drag.dragged, drag.toggleState);
-            setDrag({
-                mouseDown: false,
-                toggleState: true,
-                dragged: [],
-                dragStart: false,
-            });
-        }
-    };
-
-    useEffect(() => {
-        if (status.mode === "multi_select" && limits.duration / limits.interval !== 1) {
-            // If overlapping is a posibility, prevent overlapping by marking
-            // the overlapped slots as `blocked`
-            const blockedSlotData = checkBlockedSlots({
-                slots: slotData,
-                selected: selectedSlots,
-                interval: limits.interval,
-                duration: limits.duration,
-            });
-            setSlotData(blockedSlotData);
-        }
-
-        if (objectIsEmpty(selectedSlots) && status.mode !== "free_select") {
-            hoverElement.current.style.display = "none";
-            hoverElementTooltip.current.style.display = "none";
-        }
-    }, [selectedSlots]);
-
-    useEffect(() => {
-        if (status.mode !== "free_select") {
-            hoverElement.current.style.display = "flex";
-            hoverElement.current.style.opacity = hover.visible ? "1" : "0";
-
-            hoverElementTooltip.current.style.display = "flex";
-            hoverElementTooltip.current.style.opacity = hover.visible ? "1" : "0";
-        }
-    }, [hover]);
-
-    const tooltipText =
-        hover.available || status.slotSelection === "unrestricted"
-            ? hover.times
-            : status.mode === "free_select"
-            ? i18n.t("booked")
-            : i18n.t("unavailable");
-
-    useEffect(() => {
-        if (status.mode !== "multi_select" && status.mode !== "no_confirm") {
-            dispatchSelection({ type: "CLEAR_SELECTED_SLOTS" });
-        }
-    }, [slots]);
-
-    useEffect(() => {
-        if (status.mode !== "free_select" && status.mode !== "no_confirm") {
-            dispatchSelection({ type: "CLEAR_SELECTED_SLOTS" });
-        }
-    }, [limits]);
-
-    const hoverHeight =
-        hover.available || status.slotSelection === "unrestricted"
-            ? theme.slotHeightCalc.height * theme.slotHeightCalc.multiple
-            : theme.slotHeightCalc.height;
-
-    return (
-        <HoverContext.Provider value={[hover, setHover]}>
-            <div
-                css={css`
-                    flex-grow: 1;
-                    flex-shrink: 1;
-                    position: relative;
-                    z-index: 1;
-                    background-color: ${theme.colors.unavailable};
-                    ${theme.sizes.wrapperWidth ? `width: ${theme.sizes.wrapperWidth}px;` : ""}
-                    ${theme.sizes.wrapperUnderflow
-                        ? `margin-left: ${theme.sizes.wrapperUnderflow}px;`
-                        : ""}
-                `}
-                className={`${theme.prefix}__grid`}
-                onMouseLeave={handleMouseOut}
-            >
-                {!status.loading ? (
-                    <DayColumnWrapper>
-                        {slots.map(day => (
-                            <DayColumnDisplay key={day.day} day={day} />
-                        ))}
-                    </DayColumnWrapper>
-                ) : null}
-                <TimeLines />
-                {status.mode !== "free_select" && (
-                    <div
-                        ref={hoverElement}
-                        css={css`
-                            position: absolute;
-                            z-index: 2;
-                            display: none;
-                            width: ${theme.sizes.columnWidth}px;
-                            height: ${hoverHeight}px;
-                            top: ${hover.position.y}px;
-                            left: ${hover.position.x * theme.sizes.columnWidth}px;
-                        `}
-                        className={`${theme.prefix}__hover-positioner ${theme.prefix}__hover-positioner--main`}
-                    >
-                        <HoverSlot
-                            available={hover.available}
-                            times={tooltipText}
-                            topSlot={hover.topSlot}
-                        />
-                    </div>
-                )}
-
-                <DayColumnWrapper layer={4}>
-                    <DragContext.Provider value={[drag, setDrag]}>
-                        {slots.map((day, columnCount) => (
-                            <DayColumn
-                                key={day.day}
-                                columnCount={columnCount}
-                                day={day}
-                                toggleMultiple={toggleMultiple}
-                            />
-                        ))}
-                    </DragContext.Provider>
-                </DayColumnWrapper>
-
-                {status.mode !== "free_select" && (
-                    <React.Fragment>
-                        {!objectIsEmpty(selectedSlots) && status.mode === "confirm" ? (
-                            <SelectionMask />
-                        ) : null}
-                        <SelectedSlots bounds={[slots[0].day, slots[6].day]} />
-
-                        <div
-                            ref={hoverElementTooltip}
-                            css={css`
-                                position: absolute;
-                                z-index: 5;
-                                display: none;
-                                pointer-events: none;
-                                user-select: none;
-                                top: ${hover.position.y}px;
-                                left: ${hover.position.x * theme.sizes.columnWidth}px;
-                                width: ${theme.sizes.columnWidth}px;
-                                height: ${hoverHeight}px;
-                            `}
-                            className={`${theme.prefix}__hover-positioner ${theme.prefix}__hover-positioner--tooltip`}
-                        >
-                            {!hover.hideTooltip ? (
-                                <HoverTooltip
-                                    available={hover.available}
-                                    times={tooltipText}
-                                    topSlot={hover.topSlot}
-                                />
-                            ) : null}
-                        </div>
-                    </React.Fragment>
-                )}
-                {status.loading ? <Loading /> : null}
-                {status.preloading && status.mode !== "free_select" ? <Preloading /> : null}
-                {status.error ? <Error message={i18n.t("global_error")} theme={theme} /> : null}
-            </div>
-        </HoverContext.Provider>
-    );
-};
-
-export default Week;

package/src/js/components/AvailabilityViewer/WeekWrapper.js

@@ -1,132 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import { css } from "@emotion/core";
-
-import {
-    checkIfDaysMatch,
-    checkIfLimitsMatch,
-    getAllLabels,
-} from "../../helpers/utils.AvailabilityViewer";
-import { useWindowSize } from "../../hooks/useWindowSize";
-
-import DayLabels from "./DayLabels";
-import LabelColumn from "./LabelColumn";
-import MonthLabels from "./MonthLabels";
-import Week from "./Week";
-
-import { I18nContext, ThemeContext, LimitsContext, StatusContext } from "./AvailabilityViewer";
-import { usePages } from "./contexts/page-context";
-
-export const LabelsContext = React.createContext();
-
-const WeekWrapper = () => {
-    const i18n = useContext(I18nContext);
-    const [pages, dispatchPages] = usePages();
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [status, setStatus] = useContext(StatusContext);
-    const [limits, setLimits] = useContext(LimitsContext);
-
-    // These are the time|day|month labels for *all* weeks.
-    const [allLabels, setAllLabels] = useState(() =>
-        getAllLabels({
-            days: pages.days,
-            limits,
-            tzid: status.tzid,
-            i18n,
-            locale: status.locale,
-        })
-    );
-
-    // These are the time|day|month labels for the currently visible week.
-    const [labels, setLabels] = useState(allLabels[pages.current - 1]);
-
-    const gridWrapper = React.createRef();
-    const size = useWindowSize();
-
-    const calculateColumnWidth = () => {
-        const elementWidth = gridWrapper.current.clientWidth;
-
-        // Calculation is predicated on gridWrapper having only two
-        // children: a label-column [0] and the grid [1]
-        const labelColumnWidth = gridWrapper.current.children[0].clientWidth;
-        const availableSpaceForGrid = elementWidth - labelColumnWidth;
-
-        const columnCount = 7;
-        if (availableSpaceForGrid) {
-            const columnWidth = Math.floor(availableSpaceForGrid / columnCount);
-            const remainder = availableSpaceForGrid % columnCount;
-            if (columnWidth != theme.sizes.columnWidth) {
-                setTheme(t => ({
-                    ...t,
-                    sizes: {
-                        ...t.sizes,
-                        columnWidth,
-                        wrapperWidth: columnWidth * columnCount,
-                        wrapperUnderflow: remainder,
-                    },
-                }));
-            }
-        }
-    };
-
-    useEffect(() => {
-        calculateColumnWidth();
-    }, [size]);
-
-    useEffect(() => {
-        if (pages.set) {
-            // Have the days changed?
-            const daysMatch = checkIfDaysMatch(pages.days, allLabels);
-            const limitsMatch = checkIfLimitsMatch(
-                limits,
-                allLabels[pages.current - 1].times,
-                status.tzid
-            );
-
-            if (!daysMatch || !limitsMatch) {
-                //  If they've changed we need to recalculate labels, but
-                // this is expensive so we don't want to do it unless we
-                // absolutely have to.
-                setAllLabels(
-                    getAllLabels({
-                        days: pages.days,
-                        limits,
-                        tzid: status.tzid,
-                        i18n,
-                        locale: status.locale,
-                    })
-                );
-            } else {
-                setLabels(allLabels[pages.current - 1]);
-            }
-        }
-    }, [pages, limits]);
-
-    useEffect(() => {
-        // If `allLabels` is updated, make sure we
-        // recalculate the active labels too.
-        setLabels(allLabels[pages.current - 1]);
-    }, [allLabels]);
-
-    return (
-        <LabelsContext.Provider value={labels}>
-            <div className={`${theme.prefix}__body`}>
-                <MonthLabels />
-                <DayLabels />
-                <div
-                    css={css`
-                        display: flex;
-                        justify-content: space-between;
-                        position: relative;
-                    `}
-                    ref={gridWrapper}
-                    className={`${theme.prefix}__week`}
-                >
-                    <LabelColumn />
-                    <Week />
-                </div>
-            </div>
-        </LabelsContext.Provider>
-    );
-};
-
-export default WeekWrapper;

package/src/js/components/AvailabilityViewer/contexts/page-context.js

@@ -1,17 +0,0 @@
-import React, { createContext, useContext } from "react";
-
-const PagesContext = createContext();
-
-export const PagesProvider = ({ children, value: pages, dispatch: pagesDispatch }) => {
-    return <PagesContext.Provider value={[pages, pagesDispatch]}>{children}</PagesContext.Provider>;
-};
-
-export const usePages = () => {
-    const context = useContext(PagesContext);
-
-    if (!context) {
-        throw new Error("usePages must be used within PagesContext");
-    }
-
-    return context;
-};

package/src/js/components/AvailabilityViewer/contexts/page-reducer.js

@@ -1,28 +0,0 @@
-export const pageReducer = (state, action) => {
-    switch (action.type) {
-        case "SET_PREV_PAGE": {
-            const current = Math.max(1, state.current - 1);
-
-            return {
-                ...state,
-                current,
-                hasNext: true,
-                hasPrev: current > 1,
-            };
-        }
-
-        case "SET_NEXT_PAGE": {
-            const current = Math.min(state.total, state.current + 1);
-
-            return {
-                ...state,
-                current,
-                hasNext: current < state.total,
-                hasPrev: true,
-            };
-        }
-
-        default:
-            throw new Error(`Unsupported action type: ${action.type}`);
-    }
-};

package/src/js/components/AvailabilityViewer/contexts/selection-context.js

@@ -1,25 +0,0 @@
-import React, { createContext, useContext } from "react";
-
-const SelectionContext = createContext();
-
-export const SelectionProvider = ({
-    children,
-    value: selectedSlots,
-    dispatch: dispatchSelection,
-}) => {
-    return (
-        <SelectionContext.Provider value={[selectedSlots, dispatchSelection]}>
-            {children}
-        </SelectionContext.Provider>
-    );
-};
-
-export const useSelection = () => {
-    const context = useContext(SelectionContext);
-
-    if (context === undefined) {
-        throw new Error("useSelection must be used within SelectionProvider");
-    }
-
-    return context;
-};

package/src/js/components/AvailabilityViewer/contexts/selection-reducer.js

@@ -1,18 +0,0 @@
-export const selectionReducer = (state, action) => {
-    switch (action.type) {
-        case "SET_SELECTED_SLOTS":
-            return {
-                ...state,
-                selectedSlots: action.selectedSlots,
-            };
-
-        case "CLEAR_SELECTED_SLOTS":
-            return {
-                ...state,
-                selectedSlots: {},
-            };
-
-        default:
-            throw new Error(`Unsupported action type: ${action.type}`);
-    }
-};

package/src/js/components/CalendarSync/Active.js

@@ -1,57 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { I18nContext, ThemeContext } from "./CalendarSync";
-
-const Active = () => {
-    const i18n = useContext(I18nContext);
-    const theme = useContext(ThemeContext);
-
-    return (
-        <div
-            css={css`
-                display: flex;
-                align-items: center;
-                padding: 10px 0;
-            `}
-            className={`${theme.prefix}__status--active`}
-        >
-            <span
-                css={css`
-                    display: block;
-                    color: ${theme.colors.greyMid};
-                    text-transform: uppercase;
-                    font-weight: bold;
-                    letter-spacing: 1px;
-                    font-size: 10px;
-                    line-height: 1;
-                `}
-                className={`${theme.prefix}__status-label`}
-            >
-                {i18n.t("active")}
-            </span>
-            <svg
-                css={css`
-                    display: block;
-                    width: 16px;
-                    height: 16px;
-                    margin-right: 4px;
-                    margin-left: 4px;
-                    background: ${theme.colors.green};
-                    border-radius: 50%;
-                `}
-                viewBox="0 0 14 15"
-                className={`${theme.prefix}__status-icon ${theme.prefix}__status-icon--tick`}
-            >
-                <path
-                    css={css`
-                        fill: ${theme.colors.white};
-                    `}
-                    d="M3.095 7.892l.65-.927L6.06 8.587l3.57-5.097.926.649-4.218 6.024z"
-                />
-            </svg>
-        </div>
-    );
-};
-
-export default Active;

package/src/js/components/CalendarSync/AddToggle.js

@@ -1,72 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { buttonReset } from "../../styles/utils";
-import { I18nContext, ThemeContext, StatusContext } from "./CalendarSync";
-
-const AddToggle = () => {
-    const theme = useContext(ThemeContext);
-    const [status, dispatchStatus] = useContext(StatusContext);
-    const i18n = useContext(I18nContext);
-
-    const handleAddToggle = () => {
-        dispatchStatus({ type: "TOGGLE_ADD_PROFILE" });
-    };
-
-    return (
-        <div
-            css={css`
-                height: 40px;
-                display: flex;
-                align-items: center;
-                margin-right: 10px;
-            `}
-            className={`${theme.prefix}__add-toggle`}
-        >
-            <button
-                type="button"
-                css={css`
-                    ${buttonReset}
-                    padding: 0 10px;
-                    height: 30px;
-                    display: flex;
-                    align-items: center;
-                    cursor: pointer;
-                    border: 1px solid ${theme.colors.hairline};
-                    border-radius: 4px;
-                `}
-                className={`${theme.prefix}__add-toggle-button`}
-                onClick={handleAddToggle}
-            >
-                <svg
-                    css={css`
-                        display: block;
-                        width: 12px;
-                        height: 12px;
-                        margin-right: 10px;
-                        fill: ${theme.colors.grey};
-                    `}
-                    className={`${theme.prefix}__add-toggle-icon`}
-                    viewBox={status.adding ? "0 0 13 10" : "0 0 13 13"}
-                >
-                    {status.adding ? (
-                        <path d="M2.756 4.41L6.333.834 5.5 0l-5 5 .417.417L5.5 10l.833-.833-3.577-3.578h9.53V4.411z" />
-                    ) : (
-                        <path d="M7.319 5.417h4.482c.374 0 .677.367.677.82 0 .452-.303.818-.677.818H7.32v4.483c0 .374-.367.677-.819.677-.452 0-.819-.303-.819-.677V7.055H1.199c-.374 0-.677-.366-.677-.819 0-.452.303-.819.677-.819H5.68V.935c0-.374.367-.677.819-.677.452 0 .819.303.819.677v4.482z" />
-                    )}
-                </svg>
-                <span
-                    css={css`
-                        line-height: 1;
-                        font-weight: bold;
-                    `}
-                    className={`${theme.prefix}__add-toggle-text`}
-                >
-                    {status.adding ? i18n.t("back") : i18n.t("add_calendar_account")}
-                </span>
-            </button>
-        </div>
-    );
-};
-
-export default AddToggle;