cronofy-elements 1.48.0 → 1.49.0

package/src/js/components/Agenda/Agenda.js

@@ -1,243 +0,0 @@
-import React, { useState, useEffect } from "react";
-import moment from "moment-timezone";
-
-import * as connections from "../../helpers/connections";
-import * as utils from "../../helpers/events";
-import { parseStyleOptions } from "../../helpers/theming";
-import { i18nConstructor } from "../../helpers/i18n";
-import { logConstructor } from "../../helpers/logging";
-
-import Calendar from "./Calendar";
-import Container from "../generic/Container";
-import Error from "../generic/Error";
-
-export const CalendarsContext = React.createContext();
-export const LoggingContext = React.createContext();
-export const EventsContext = React.createContext();
-export const I18nContext = React.createContext();
-export const StatusContext = React.createContext();
-export const ThemeContext = React.createContext();
-
-const Agenda = ({ options }) => {
-    const [log, setLog] = useState(
-        logConstructor(
-            options.config.logs,
-            "Agenda View",
-            options.callback ? options.callback : false
-        )
-    );
-
-    const [i18n, setI18n] = useState(
-        i18nConstructor({
-            context: "agenda",
-            locale: options.locale,
-            allPhrases: options.translations,
-            tzid: options.tzid,
-        })
-    );
-
-    const [status, setStatus] = useState({
-        active_date: i18n.f(moment(new Date()), `YYYY-MM-DD`),
-        direction: "forwards",
-        expanded: false,
-        loading: true,
-        error: false,
-        locale: options.locale,
-        mode: options.config.mode,
-    });
-
-    const [theme, setTheme] = useState({
-        ...parseStyleOptions(options.styles, "CronofyAgenda", options),
-    });
-
-    const [eventData, setEventData] = useState({
-        events: {},
-        days: {},
-    });
-
-    const [calendars, setCalendars] = useState([]);
-
-    const [currentEvents, setCurrentEvents] = useState([]);
-
-    const [state, setState] = useState({
-        args: {
-            tzid: "Europe/London",
-            include_managed: true,
-            only_managed: status.mode === "only_managed" || status.mode === "free_busy_managed",
-            from: i18n.f(moment(new Date()).add(-7, "days"), `YYYY-MM-DD`),
-            to: i18n.f(moment(new Date()).add(7, "days"), `YYYY-MM-DD`),
-        },
-        offset: 7,
-    });
-
-    const getCurrentEvents = () => {
-        // get event IDs for the active date.
-        const eventIDs = eventData.days[status.active_date];
-        // get all the events
-        const allEvents = eventData.events;
-        // create an array of all events who's IDs are in the active date IDs list
-        const currentEvents = [];
-        for (const event in eventIDs) {
-            currentEvents.push(allEvents[event]);
-        }
-        setCurrentEvents(currentEvents);
-    };
-
-    const getEventsByType = () => {
-        const getEventsOptions = {
-            token: options.token,
-            api_domain: options.domains.apiDomain,
-            args: state.args,
-            next: connections.loadNextPage,
-            mock: options.demo,
-        };
-        if (status.mode === "free_busy_managed") {
-            // Getting both events AND free_busy
-            return Promise.all([
-                connections.getEvents(getEventsOptions),
-                connections.getEvents({
-                    ...getEventsOptions,
-                    freeBusy: true,
-                }),
-            ]).then(res => {
-                // both res[N] will have `events` and `userinfo`, and we
-                // want to combine the two events arrays. We expect both
-                // userinfo values to be the same, but favour res[0].
-                const combinedResults = {
-                    ...res[0],
-                    events: [...res[0].events, ...res[1].events],
-                };
-                return combinedResults;
-            });
-        } else if (status.mode === "free_busy") {
-            // Getting JUST free_busy
-            return connections.getEvents({
-                ...getEventsOptions,
-                freeBusy: true,
-            });
-        } else {
-            // Getting JUST events
-            return connections.getEvents(getEventsOptions);
-        }
-    };
-
-    const triggerGetEvents = () => {
-        getEventsByType()
-            .then(res => {
-                const calendarsFromUserinfo = connections.parseUserInfoCalendars(res.userinfo);
-                setCalendars(calendarsFromUserinfo);
-
-                const eventsDayRange = utils.getDayRange(
-                    status.active_date,
-                    state.offset,
-                    eventData.days
-                );
-
-                const parsedEvents = utils.parseEvents(res.events);
-
-                const eventsDays = utils.setEventDayIDs(parsedEvents, eventsDayRange);
-                const eventsObj = utils.parseEventsByID(parsedEvents, state.events);
-                setEventData({
-                    days: eventsDays,
-                    events: { ...eventData.events, ...eventsObj },
-                });
-                setStatus({ ...status, loading: false });
-            })
-            .catch(error => {
-                const errorMessage = error.message ? error.message : error;
-                const errorOutput = {};
-                if (error.docsSlug) {
-                    errorOutput.docsSlug = error.docsSlug;
-                }
-                log.error(errorMessage, errorOutput);
-                setStatus({ ...status, loading: false, error: error });
-            });
-    };
-
-    const resetArgsByOffset = from => {
-        const args = { ...state.args };
-
-        const fromObj = moment(from).add(0 - state.offset, "days");
-        const toObj = moment(from).add(state.offset, "days");
-
-        args.from = i18n.f(fromObj, `YYYY-MM-DD`);
-        args.to = i18n.f(toObj, `YYYY-MM-DD`);
-        setState({
-            ...state,
-            args,
-        });
-    };
-
-    const setDates = (target, direction) => {
-        resetArgsByOffset(target);
-        setStatus({ ...status, active_date: target, direction });
-    };
-
-    const navigate = action => {
-        const oldFrom = moment(status.active_date);
-        let newDate;
-        switch (action) {
-            case "today":
-                const today = moment(new Date());
-                const diff = utils.checkDirection(today, oldFrom);
-                newDate = i18n.f(today, "YYYY-MM-DD");
-                setDates(newDate, diff);
-                break;
-            case "prev":
-                newDate = oldFrom.subtract(1, "days");
-                setDates(i18n.f(newDate, "YYYY-MM-DD"), "backwards");
-                break;
-            case "next":
-                setStatus({ ...status, direction: "forwards" });
-                newDate = oldFrom.add(1, "days");
-                setDates(i18n.f(newDate, "YYYY-MM-DD"), "forwards");
-                break;
-            default:
-                newDate = oldFrom.add(1, "days");
-                setDates(i18n.f(newDate, "YYYY-MM-DD"), "forwards");
-        }
-    };
-
-    const setExpanded = id => {
-        const direction = id ? "upwards" : "downwards";
-        setStatus({ ...status, expanded: id, direction });
-    };
-
-    useEffect(() => {
-        const targetDate = status.active_date;
-        const loadedDays = { ...eventData.days };
-        const dayExistsInState = loadedDays.hasOwnProperty(targetDate);
-        if (!dayExistsInState) {
-            setStatus({ ...status, loading: true });
-            triggerGetEvents();
-        }
-    }, [status.active_date]);
-
-    useEffect(() => {
-        getCurrentEvents();
-    }, [eventData, status.active_date]);
-
-    return (
-        <Container minHeight="500px" className={`${theme.prefix}`}>
-            {status.error ? (
-                <Error message={i18n.t("global_error")} theme={theme} />
-            ) : (
-                <LoggingContext.Provider value={log}>
-                    <I18nContext.Provider value={i18n}>
-                        <ThemeContext.Provider value={theme}>
-                            <StatusContext.Provider value={[status, setStatus]}>
-                                <CalendarsContext.Provider value={calendars}>
-                                    <EventsContext.Provider value={currentEvents}>
-                                        <Calendar nextPrev={navigate} expand={setExpanded} />
-                                    </EventsContext.Provider>
-                                </CalendarsContext.Provider>
-                            </StatusContext.Provider>
-                        </ThemeContext.Provider>
-                    </I18nContext.Provider>
-                </LoggingContext.Provider>
-            )}
-        </Container>
-    );
-};
-
-export default Agenda;

package/src/js/components/Agenda/AllDayEventsList.js

@@ -1,37 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import EventAllDay from "./EventAllDay";
-import Message from "./Message";
-
-import { I18nContext, ThemeContext } from "./Agenda";
-
-const AllDayEventsList = props => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-    return (
-        <div
-            css={css`
-                padding-bottom: 6px;
-                border-bottom: 1px solid ${theme.colors.hairline};
-                margin-bottom: 16px;
-            `}
-            className={`${theme.prefix}__list ${theme.prefix}__list--all-day`}
-        >
-            {props.events.length > 0 ? (
-                props.events.map((event, key) => (
-                    <EventAllDay
-                        key={key}
-                        current={props.date}
-                        data={event}
-                        expand={props.expand}
-                    />
-                ))
-            ) : (
-                <Message message={i18n.t("no_all_day_events")} stylePrefix={theme.prefix} />
-            )}
-        </div>
-    );
-};
-
-export default AllDayEventsList;

package/src/js/components/Agenda/Calendar.js

@@ -1,100 +0,0 @@
-import React, { useContext } from "react";
-import moment from "moment-timezone";
-import { css } from "@emotion/core";
-
-import Loading from "../generic/Loading";
-import TransitionSlide from "../generic/TransitionSlide";
-import CalendarHeader from "./CalendarHeader";
-import EventDetail from "./EventDetail";
-import Message from "./Message";
-import AllDayEventsList from "./AllDayEventsList";
-import TimedEventsList from "./TimedEventsList";
-
-import { getEventByID, calculateLimit, sortEventsByType } from "../../helpers/events";
-
-import { EventsContext, I18nContext, StatusContext, ThemeContext } from "./Agenda";
-
-const Calendar = props => {
-    const theme = useContext(ThemeContext);
-    const [status] = useContext(StatusContext);
-    const i18n = useContext(I18nContext);
-    const events = useContext(EventsContext);
-
-    const today = i18n.f(moment(new Date()), "YYYY-MM-DD");
-    const limit = calculateLimit(status.active_date, today);
-    const eventsByType = sortEventsByType(events);
-    const expandedEvent = getEventByID(status.expanded, events);
-
-    return (
-        <TransitionSlide
-            styles={css`
-                flex-grow: 1;
-            `}
-            direction={status.direction}
-            keyProp={`${status.active_date}_${expandedEvent ? expandedEvent.event_uid : "false"}`}
-        >
-            <div
-                css={css`
-                    display: flex;
-                    flex-grow: 1;
-                    flex-direction: column;
-                    width: 100%;
-
-                    .shadow-scroll {
-                        display: flex;
-                        flex-grow: 1;
-                        flex-shrink: 1;
-                    }
-                `}
-                className={`${theme.prefix}__day`}
-            >
-                {!expandedEvent ? (
-                    <React.Fragment>
-                        <CalendarHeader
-                            date={status.active_date}
-                            nextPrev={props.nextPrev}
-                            limit={limit}
-                        />
-                        <div
-                            css={css`
-                                flex-grow: 1;
-                                flex-shrink: 1;
-                                display: flex;
-                                flex-direction: column;
-                            `}
-                            className={`${theme.prefix}__body`}
-                        >
-                            <Loading loading={status.loading} prefix={theme.prefix}>
-                                {events.length > 0 ? (
-                                    <React.Fragment>
-                                        <AllDayEventsList
-                                            events={eventsByType.allDay}
-                                            date={status.active_date}
-                                            expand={props.expand}
-                                        />
-                                        <TimedEventsList
-                                            events={eventsByType.timed}
-                                            date={status.active_date}
-                                            expand={props.expand}
-                                        />
-                                    </React.Fragment>
-                                ) : (
-                                    <Message message={i18n.t("no_events")} prefix={theme.prefix} />
-                                )}
-                            </Loading>
-                        </div>
-                    </React.Fragment>
-                ) : (
-                    <EventDetail
-                        event={expandedEvent}
-                        current={status.active_date}
-                        data={expandedEvent}
-                        expand={props.expand}
-                    />
-                )}
-            </div>
-        </TransitionSlide>
-    );
-};
-
-export default Calendar;

package/src/js/components/Agenda/CalendarHeader.js

@@ -1,187 +0,0 @@
-import React, { useContext } from "react";
-import moment from "moment-timezone";
-import { css } from "@emotion/core";
-
-import { buttonReset } from "../../styles/utils";
-
-import { I18nContext, ThemeContext } from "./Agenda";
-
-const CalendarHeader = ({ date, nextPrev, limit }) => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-
-    const navButtonBaseStyles = css`
-        ${buttonReset};
-        width: 2em;
-        position: relative;
-        cursor: pointer;
-        &:before {
-            content: "";
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%) rotate(45deg);
-            display: block;
-            width: 1em;
-            height: 1em;
-        }
-        &:focus {
-            outline: none;
-            background: ${theme.colors.cream};
-        }
-        &:active {
-            background: darken(${theme.colors.cream}, 5%);
-        }
-    `;
-
-    const dateObject = moment(date);
-    return (
-        <div
-            css={css`
-                margin-top: 16px;
-                border-top: 1px solid ${theme.colors.hairline};
-                border-bottom: 1px solid ${theme.colors.hairline};
-                // border-radius: 4px;
-                margin-bottom: 16px;
-                display: flex;
-                position: relative;
-                flex-shrink: 0;
-            `}
-            className={`${theme.prefix}__header`}
-        >
-            {!dateObject.isSame(new Date(), "day") ? (
-                <button
-                    type="button"
-                    css={css`
-                        ${buttonReset};
-                        position: absolute;
-                        top: 0;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                        border: 1px solid ${theme.colors.hairline};
-                        border-radius: 4px;
-                        padding: 6px 8px;
-                        line-height: 16px;
-                        background: ${theme.colors.white};
-                        transition: background 0.2s;
-                        cursor: pointer;
-                        &:hover {
-                            background: ${theme.colors.greyPale};
-                        }
-                    `}
-                    className={`${theme.prefix}__today`}
-                    onClick={() => nextPrev("today")}
-                >
-                    {i18n.t("go_to_today")}
-                </button>
-            ) : (
-                <span
-                    css={css`
-                        position: absolute;
-                        top: 0;
-                        left: 50%;
-                        transform: translate(-50%, 0%);
-                        color: ${theme.colors.hairline};
-                    `}
-                    className={`${theme.prefix}__today--current`}
-                >
-                    {i18n.t("today")}
-                </span>
-            )}
-
-            {limit != -1 ? (
-                <button
-                    type="button"
-                    css={css`
-                        ${navButtonBaseStyles};
-                        &:before {
-                            border-left: 2px solid ${theme.colors.greyMid};
-                            border-bottom: 2px solid ${theme.colors.greyMid};
-                        }
-                    `}
-                    className={`${theme.prefix}__nav ${theme.prefix}__nav--prev`}
-                    onClick={() => nextPrev("prev")}
-                >
-                    <span className="visuallyhidden">{i18n.t("previous")}</span>
-                </button>
-            ) : null}
-
-            <div
-                css={css`
-                    flex-grow: 1;
-                    padding: 16px 0;
-                    display: flex;
-                    align-items: center;
-                `}
-                className={`${theme.prefix}__nav-date`}
-            >
-                <div
-                    css={css`
-                        font-size: 48px;
-                        line-height: 1;
-                    `}
-                    className={`${theme.prefix}__nav-date__number-wrapper`}
-                >
-                    <span className={`${theme.prefix}__nav-date__number`}>
-                        {i18n.f(dateObject, "D")}
-                    </span>
-                    <span
-                        css={css`
-                            // text-transform: uppercase;
-                            position: relative;
-                            top: -1.6em;
-                            font-size: 16px;
-                        `}
-                        className={`${theme.prefix}__nav-date__ordinal`}
-                    >
-                        {i18n.f(dateObject, "Do").replace(/[0-9]/g, "")}
-                    </span>
-                </div>
-                <div
-                    css={css`
-                        margin-left: 10px;
-                    `}
-                >
-                    <span
-                        css={css`
-                            display: block;
-                            line-height: 1;
-                            padding-bottom: 4px;
-                        `}
-                        className={`${theme.prefix}__nav-date__day`}
-                    >
-                        {i18n.f(dateObject, "dddd")}
-                    </span>
-                    <span
-                        css={css`
-                            display: block;
-                            line-height: 1;
-                        `}
-                        className={`${theme.prefix}__nav-date__month`}
-                    >
-                        {i18n.f(dateObject, "MMMM")}
-                    </span>
-                </div>
-            </div>
-
-            {limit != 1 ? (
-                <button
-                    type="button"
-                    css={css`
-                        ${navButtonBaseStyles};
-                        &:before {
-                            border-right: 2px solid ${theme.colors.greyMid};
-                            border-top: 2px solid ${theme.colors.greyMid};
-                        }
-                    `}
-                    className={`${theme.prefix}__nav ${theme.prefix}__nav--next`}
-                    onClick={() => nextPrev("next")}
-                >
-                    <span className="visuallyhidden">{i18n.t("next")}</span>
-                </button>
-            ) : null}
-        </div>
-    );
-};
-
-export default CalendarHeader;

package/src/js/components/Agenda/Event.js

@@ -1,34 +0,0 @@
-import React, { useContext } from "react";
-
-import EventWrapper from "./EventWrapper";
-import EventMessages from "./EventMessages";
-import EventTime from "./EventTime";
-import EventMeta from "./EventMeta";
-import { getCalColor } from "../../helpers/events";
-import { truncateString } from "../../helpers/utils";
-
-import { CalendarsContext, ThemeContext } from "./Agenda";
-
-const Event = props => {
-    const theme = useContext(ThemeContext);
-    const calendars = useContext(CalendarsContext);
-    const calIndex = getCalColor(props.data.calendar_id, calendars);
-    return (
-        <EventWrapper calIndex={calIndex} data={props.data} expand={props.expand}>
-            <EventMessages data={props.data} />
-            <EventTime
-                start={props.data.start}
-                end={props.data.end}
-                current={props.current}
-                recurring={props.data.recurring}
-            />
-            <span className={`${theme.prefix}__event__title`}>
-                {truncateString(props.data.summary, 40)}
-            </span>
-
-            <EventMeta data={props.data} calIndex={calIndex} />
-        </EventWrapper>
-    );
-};
-
-export default Event;

package/src/js/components/Agenda/EventAllDay.js

@@ -1,76 +0,0 @@
-import React, { useContext } from "react";
-
-import EventWrapper from "./EventWrapper";
-import EventTime from "./EventTime";
-import { getMultiDayStatus, getCalColor } from "../../helpers/events";
-import { truncateString } from "../../helpers/utils";
-
-import { CalendarsContext, ThemeContext } from "./Agenda";
-
-const EventAllDay = props => {
-    const theme = useContext(ThemeContext);
-    const calendars = useContext(CalendarsContext);
-
-    const calIndex = getCalColor(props.data.calendar_id, calendars);
-    const multiDayStatus = getMultiDayStatus(props.data.start, props.data.end, props.current);
-    return (
-        <EventWrapper
-            calIndex={calIndex}
-            data={props.data}
-            expand={props.expand}
-            transparency={"transparent"}
-            className={`
-                ${theme.prefix}__event--line
-                ${
-                    multiDayStatus === 1 || multiDayStatus === 3
-                        ? `${theme.prefix}__event--has-after`
-                        : ""
-                }
-                ${
-                    multiDayStatus === 2 || multiDayStatus === 3
-                        ? `${theme.prefix}__event--has-before`
-                        : ""
-                }
-            `}
-        >
-            {multiDayStatus === 1 || multiDayStatus === 3 ? (
-                <svg
-                    className={`${theme.prefix}__after-icon`}
-                    viewBox="0 0 100 100"
-                    preserveAspectRatio="none"
-                >
-                    <polygon points="0,0 100,50 0,100" />
-                </svg>
-            ) : null}
-            {multiDayStatus === 2 || multiDayStatus === 3 ? (
-                <svg
-                    className={`${theme.prefix}__before-icon`}
-                    viewBox="0 0 100 100"
-                    preserveAspectRatio="none"
-                >
-                    <polygon points="0,0 100,50 0,100" />
-                </svg>
-            ) : null}
-            <span className={`${theme.prefix}__event__title`} title={props.data.summary}>
-                {truncateString(props.data.summary, 40)}
-            </span>
-            <EventTime
-                start={props.data.start}
-                end={props.data.end}
-                current={props.current}
-                recurring={props.data.recurring}
-            />
-            {props.data.attendees && props.data.attendees.length > 1 ? (
-                <div className={`${theme.prefix}__event__attendees`}>
-                    <span className={`${theme.prefix}__event__attendee`} />
-                    <span className={`${theme.prefix}__event__attendee`} />
-                    <span className={`${theme.prefix}__event__attendee-count`}>
-                        {props.data.attendees.length}
-                    </span>
-                </div>
-            ) : null}
-        </EventWrapper>
-    );
-};
-
-export default EventAllDay;