cronofy-elements 1.48.1 → 1.49.1

package/src/js/components/AvailabilityRules/TimeExpander.js

@@ -1,119 +0,0 @@
-import React, { useContext, useState } from "react";
-import { css } from "@emotion/core";
-
-import { hours } from "../../helpers/utils";
-import { buttonReset } from "../../styles/utils";
-
-import { ExtrasContext, ThemeContext } from "./Wrapper";
-import { calculateSlotsPerDay } from "../../helpers/utils.AvailabilityRules";
-import { useI18n } from "../../contexts/i18n-context";
-
-const TimeExpander = ({ backwards = false }) => {
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [extras, setExtras] = useContext(ExtrasContext);
-
-    const [originalLimits] = useState({
-        start: extras.limits.start,
-        end: extras.limits.end,
-    });
-
-    const handleTimeExpansion = ({ reversed }) => {
-        const key = reversed ? "start" : "end";
-        const newHour = reversed ? hours[0] : hours[hours.length - 1];
-
-        const times = {
-            start: extras.limits.start,
-            end: extras.limits.end,
-            [key]: newHour,
-        };
-
-        setExtras({
-            ...extras,
-            limits: {
-                ...extras.limits,
-                [key]: newHour,
-                slotsPerDay: calculateSlotsPerDay(extras.limits.duration, times.start, times.end),
-                slotsOffset: calculateSlotsPerDay(extras.limits.duration, "00:00", times.start),
-            },
-        });
-    };
-
-    const handleTimeContraction = ({ reversed }) => {
-        const key = reversed ? "start" : "end";
-
-        const times = {
-            start: extras.limits.start,
-            end: extras.limits.end,
-            [key]: originalLimits[key],
-        };
-
-        setExtras({
-            ...extras,
-            limits: {
-                ...extras.limits,
-                [key]: originalLimits[key],
-                slotsPerDay: calculateSlotsPerDay(extras.limits.duration, times.start, times.end),
-                slotsOffset: calculateSlotsPerDay(extras.limits.duration, "00:00", times.start),
-            },
-        });
-    };
-
-    const label = backwards ? "earlier" : "later";
-    const atMidnight = backwards
-        ? extras.limits.start === hours[0]
-        : extras.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: 100%;
-                height: 40px;
-                transform: translateY(${backwards ? -50 : 50}%);
-                &:hover > svg {
-                    fill: ${theme.colors.primary};
-                }
-            `}
-            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/AvailabilityRules/TimeLabels.js

@@ -1,89 +0,0 @@
-import React, { useEffect, useState, useContext } from "react";
-import moment from "moment-timezone";
-import { css } from "@emotion/core";
-
-import { useWindowSize } from "../../hooks/useWindowSize";
-import { condenseTimeLabel } from "../../helpers/utils.AvailabilityViewer";
-
-import { ExtrasContext, ThemeContext, StaticSlotsContext } from "./Wrapper";
-import TimeExpander from "./TimeExpander";
-import { useI18n } from "../../contexts/i18n-context";
-
-const TimeLabel = ({ slot, height, count }) => {
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-    const timeObject = moment(slot.start, "HH:mm");
-    const isOnTheHour = timeObject.minute() === 0;
-
-    const size = useWindowSize();
-
-    const calculateLabel = () => {
-        const labelText = i18n.f(timeObject, "LT");
-        return size.width > theme.sizes.breakpoints.small
-            ? labelText
-            : condenseTimeLabel(labelText);
-    };
-
-    const [timeLabel, setTimeLabel] = useState(() => calculateLabel());
-
-    useEffect(() => {
-        setTimeLabel(calculateLabel());
-    }, [size]);
-
-    return (
-        <div
-            css={css`
-                height: ${height}px;
-                line-height: 1;
-                text-align: right;
-                font-size: 12px;
-                text-transform: lowercase;
-                transform: translateY(-6px);
-                padding-right: 2px;
-                width: ${theme.sizes.labelWidth}px;
-                @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    width: ${theme.sizes.labelWidthSmall}px;
-                }
-            `}
-            className={`${theme.prefix}__label--time`}
-        >
-            {isOnTheHour && count > 0 ? timeLabel : null}
-        </div>
-    );
-};
-
-const TimeLabels = () => {
-    const staticSlots = useContext(StaticSlotsContext);
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    return (
-        <React.Fragment>
-            <div
-                css={css`
-                    position: relative;
-                    width: ${theme.sizes.labelWidth}px;
-                    flex-shrink: 1;
-                    padding-right: 4px;
-                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        width: ${theme.sizes.labelWidthSmall}px;
-                    }
-                `}
-                className={`${theme.prefix}__label-column`}
-            >
-                <TimeExpander backwards={true} />
-                {staticSlots.map((slot, i) => (
-                    <TimeLabel
-                        key={`${slot.day}_${slot.start}`}
-                        count={i}
-                        slot={slot}
-                        height={extras.slotHeight.height}
-                    />
-                ))}
-                <TimeExpander />
-            </div>
-        </React.Fragment>
-    );
-};
-
-export default TimeLabels;

package/src/js/components/AvailabilityRules/TimeZoneDisplay.js

@@ -1,41 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ExtrasContext, StatusContext, ThemeContext } from "./Wrapper";
-import { useTz } from "../../contexts/tz-context";
-import { useI18n } from "../../contexts/i18n-context";
-import TimeZoneSelector from "../generic/TimeZoneSelector";
-
-const TimeZoneDisplay = () => {
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [status, setStatus] = useContext(StatusContext);
-    const i18n = useI18n();
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [tz, setTz] = useTz();
-    return (
-        <div
-            css={css`
-                flex-grow: 1;
-                display: flex;
-                width: 100%;
-                padding-right: 1em;
-                @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    margin-bottom: 16px;
-                }
-            `}
-            className={`${theme.prefix}__timezone`}
-        >
-            <p
-                css={css`
-                    padding: 0.3em 0.6em 0 0;
-                    margin: 0;
-                `}
-            >
-                {i18n.t("time_zone")}
-            </p>
-            <TimeZoneSelector locale={status.locale} theme={theme} tz={tz} setTz={setTz} />
-        </div>
-    );
-};
-
-export default TimeZoneDisplay;

package/src/js/components/AvailabilityRules/ToggleIcon.js

@@ -1,41 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Wrapper";
-
-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/AvailabilityRules/Tooltip.js

@@ -1,63 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Wrapper";
-
-const Tooltip = ({ time, top }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    return (
-        <span
-            css={css`
-                display: block;
-                opacity: 0;
-                position: absolute;
-                width: 96%;
-                min-width: 130px;
-                height: 36px;
-                color: ${theme.colors.white};
-                display: block;
-                ${top ? `top: 100%;` : `bottom: 100%;`}
-                left: 50%;
-                transform: translateX(-50%);
-                user-select: none;
-                pointer-events: none;
-                z-index: 2;
-            `}
-            className={`${theme.prefix}__slot-tooltip`}
-        >
-            <svg
-                css={css`
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    ${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;
-                    font-size: 12px;
-                    line-height: 1;
-                    text-transform: lowercase;
-                `}
-                className={`${theme.prefix}__slot-tooltip-label`}
-            >
-                {time}
-            </span>
-        </span>
-    );
-};
-
-export default Tooltip;

package/src/js/components/AvailabilityRules/UnknownCalendar.js

@@ -1,33 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Wrapper";
-import RemoveButton from "./RemoveButton";
-import { useI18n } from "../../contexts/i18n-context";
-
-const Calendar = ({ id, remove = false }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const i18n = useI18n();
-    return (
-        <div
-            css={css`
-                display: flex;
-                align-items: center;
-                border-radius: 4px;
-                background: ${theme.colors.greyMid};
-                margin-right: 8px;
-                margin-bottom: 5px;
-                font-size: 16px;
-                line-height: 1;
-                padding: 6px 10px;
-                color: ${theme.colors.white};
-            `}
-            className={`${theme.prefix}__calendars__calendar`}
-        >
-            {i18n.t("unknown")}
-            {remove ? <RemoveButton callback={() => remove(id)} /> : null}
-        </div>
-    );
-};
-
-export default Calendar;

package/src/js/components/AvailabilityRules/Week.js

@@ -1,115 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import { useWindowSize } from "../../hooks/useWindowSize";
-import { css } from "@emotion/core";
-
-import { ExtrasContext, StatusContext, ThemeContext } from "./Wrapper";
-
-import DayLabels from "./DayLabels";
-import TimeLabels from "./TimeLabels";
-import Loading from "./Loading";
-import Slots from "./Slots";
-import SlotsDisplay from "./SlotsDisplay";
-import WeekGrid from "./WeekGrid";
-
-import { DragProvider } from "./contexts/drag-context";
-
-const Week = () => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [status, setStatus] = useContext(StatusContext);
-
-    const drag = {
-        mouseDown: false,
-        toggleState: "available",
-        dragged: [],
-        dragStart: false,
-        dragColumn: false,
-    };
-
-    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();
-    }, []);
-
-    useEffect(() => {
-        calculateColumnWidth();
-    }, [size]);
-
-    return (
-        <DragProvider drag={drag}>
-            <DayLabels />
-            <div
-                ref={gridWrapper}
-                css={css`
-                    position: relative;
-                    z-index: 1;
-                    width: 100%;
-                    display: flex;
-                    display: flex;
-                    margin: 0;
-                    padding: 0;
-                    width: 100%;
-                    align-content: stretch;
-                `}
-                className={`${theme.prefix}__wrapper`}
-            >
-                <TimeLabels />
-                <div
-                    css={css`
-                        width: 100%;
-                    `}
-                >
-                    <div
-                        css={css`
-                            position: relative;
-                            height: ${extras.slotHeight.height * extras.limits.slotsPerDay}px;
-                            ${theme.sizes.wrapperWidth
-                                ? `width: ${theme.sizes.wrapperWidth}px;`
-                                : ""}
-                            ${theme.sizes.wrapperUnderflow
-                                ? `margin-left: ${theme.sizes.wrapperUnderflow}px;`
-                                : ""}
-                        `}
-                        className={`${theme.prefix}__grid`}
-                    >
-                        {!status.loading ? <SlotsDisplay /> : null}
-                        <WeekGrid key={`${extras.limits.start}_${extras.limits.end}`} />
-                        {status.loading ? <Loading /> : <Slots />}
-                    </div>
-                </div>
-            </div>
-        </DragProvider>
-    );
-};
-
-export default Week;

package/src/js/components/AvailabilityRules/WeekGrid.js

@@ -1,80 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import moment from "moment-timezone";
-
-import { StaticSlotsContext, ExtrasContext, ThemeContext } from "./Wrapper";
-
-const WeekGrid = () => {
-    const staticSlots = useContext(StaticSlotsContext);
-    const [extras, setExtras] = useContext(ExtrasContext);
-    const [theme, setTheme] = useContext(ThemeContext);
-
-    const days = staticSlots.map((slot, i) => {
-        const isStartOfHour = moment(slot.start, "HH:mm").minutes() === 0;
-
-        const lineWidth = isStartOfHour ? "1.5px" : "1px";
-        const dashArray = isStartOfHour ? "3,4" : "1,2";
-        return (
-            <div
-                css={css`
-                    display: block;
-                    margin: 0;
-                    padding: 0;
-                    height: ${extras.slotHeight.height}px;
-                    width: 100%;
-                    user-select: none;
-                    pointer-events: none;
-                    position: relative;
-                    &:first-of-type .${theme.prefix}__tick-mark {
-                        display: none;
-                    }
-                `}
-                key={`slotTick_${i}`}
-                className={`${theme.prefix}__tick-mark-wrapper`}
-            >
-                <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>
-                <span className="visuallyhidden">{slot.start}</span>
-            </div>
-        );
-    });
-    return (
-        <div
-            css={css`
-                display: block;
-                position: absolute;
-                top: 0;
-                left: 0;
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                border: 1px solid ${theme.colors.hairline};
-                user-select: none;
-                pointer-events: none;
-            `}
-            className={`${theme.prefix}__grid-border`}
-        >
-            {days}
-        </div>
-    );
-};
-
-export default WeekGrid;