cronofy-elements - npm Package Compare versions

Comparing version 1.38.1 to 1.39.0

package.json

 {
     "name": "cronofy-elements",
-    "version": "1.38.1",
+    "version": "1.39.0",
     "description": "Fast track scheduling with Cronofy's embeddable UI Elements",
@@ -5,0 +5,0 @@ "main": "build/npm/CronofyElements.js",

src/js/components/AvailabilityRules/Slot.js

@@ -6,3 +6,2 @@ import React, { useContext } from "react";
 import { ExtrasContext, ThemeContext } from "./Wrapper";
-import { DragContext } from "./Week";
 
@@ -15,2 +14,3 @@ import ToggleIcon from "./ToggleIcon";
 import { useI18n } from "../../contexts/i18n-context";
+import { useDrag } from "./contexts/drag-context";
 
@@ -21,3 +21,3 @@ const Slot = ({ slot, handleRuleChange, first }) => {
     const [theme, setTheme] = useContext(ThemeContext);
-    const [drag, setDrag] = useContext(DragContext);
+    const [drag, setDrag] = useDrag();
 
@@ -71,2 +71,72 @@ const hoverBG = drag.mouseDown
 
+    const handleKeyDown = e => {
+        if (!extras.keyboardSupport) return;
+
+        switch (e.key) {
+            case "Spacebar":
+            case " ":
+                const toggleState = slot.available ? "unavailable" : "available";
+                setDrag({
+                    mouseDown: true,
+                    toggleState,
+                    dragged: [slot.id],
+                    dragStart: slot.id,
+                    dragColumn: slot.day,
+                });
+                break;
+            case "Tab":
+                if (drag.mouseDown) {
+                    const dragged = connectSlots(drag.dragStart, slot.id);
+
+                    setDrag({
+                        ...drag,
+                        dragged,
+                    });
+                }
+                break;
+            case "Enter":
+                handleRuleChange(drag.dragged, drag.toggleState);
+                setDrag({
+                    mouseDown: false,
+                    toggleState: "available",
+                    dragged: [],
+                    dragStart: false,
+                    dragColumn: false,
+                });
+                break;
+            case "Escape":
+                setDrag({
+                    mouseDown: false,
+                    toggleState: "available",
+                    dragged: [],
+                    dragStart: false,
+                    dragColumn: false,
+                });
+                break;
+        }
+    };
+
+    const handleFocus = () => {
+        if (!extras.keyboardSupport) return;
+
+        if (drag.mouseDown) {
+            if (drag.dragColumn !== slot.day) {
+                setDrag({
+                    mouseDown: false,
+                    toggleState: "available",
+                    dragged: [],
+                    dragStart: false,
+                    dragColumn: false,
+                });
+            } else {
+                const dragged = connectSlots(drag.dragStart, slot.id);
+
+                setDrag({
+                    ...drag,
+                    dragged,
+                });
+            }
+        }
+    };
+
     return (
@@ -104,6 +174,8 @@ <div
                     &:focus {
-                        outline: none;
+                        outline: ${extras.keyboardSupport === "basic"
+                            ? `solid ${theme.colors.availableHover}`
+                            : "none"};
                     }
                 `}
-                tabIndex="-1"
+                tabIndex={extras.keyboardSupport === "basic" ? "0" : "-1"}
                 className={`${theme.prefix}__slot-button`}
@@ -113,2 +185,4 @@ onMouseDown={handleMouseDown}
                 onMouseUp={handleMouseUp}
+                onKeyDown={e => handleKeyDown(e)}
+                onFocus={handleFocus}
             >
@@ -115,0 +189,0 @@ {!drag.mouseDown ? (

src/js/components/AvailabilityRules/Slots.js

@@ -5,3 +5,3 @@ import React, { useContext } from "react";
 import { SlotsContext, ThemeContext, ExtrasContext } from "./Wrapper";
-import { DragContext } from "./Week";
+import { useDrag } from "./contexts/drag-context";
 
@@ -12,3 +12,3 @@ import Slot from "./Slot";
     const [slots, handleRuleChange] = useContext(SlotsContext);
-    const [drag, setDrag] = useContext(DragContext);
+    const [drag, setDrag] = useDrag();
     const [extras, setExtras] = useContext(ExtrasContext);
@@ -25,2 +25,3 @@ const [theme, setTheme] = useContext(ThemeContext);
                 dragStart: false,
+                dragColumn: false,
             });
@@ -27,0 +28,0 @@ }

src/js/components/AvailabilityRules/Week.js

@@ -1,2 +0,2 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { useWindowSize } from "../../hooks/useWindowSize";
@@ -14,3 +14,3 @@ import { css } from "@emotion/core";
 
-export const DragContext = React.createContext();
+import { DragProvider } from "./contexts/drag-context";
 
@@ -22,3 +22,3 @@ const Week = () => {
 
-    const [drag, setDrag] = useState({
+    const drag = {
         mouseDown: false,
@@ -28,3 +28,4 @@ toggleState: "available",
         dragStart: false,
-    });
+        dragColumn: false,
+    };
 
@@ -71,3 +72,3 @@ const gridWrapper = React.createRef();
     return (
-        <DragContext.Provider value={[drag, setDrag]}>
+        <DragProvider drag={drag}>
             <DayLabels />
@@ -114,3 +115,3 @@ <div
             </div>
-        </DragContext.Provider>
+        </DragProvider>
     );
@@ -117,0 +118,0 @@ };

src/js/components/DateTimePicker/utils/slots.js

@@ -52,3 +52,7 @@ import moment from "moment-timezone";
             current: currentMonth === month,
-            query: { ...query, query_periods: croppedQueryPeriods },
+            query: {
+                ...query,
+                query_periods: croppedQueryPeriods,
+                max_results: query.max_results ?? 512,
+            },
         };
@@ -55,0 +59,0 @@ });

src/js/helpers/init.AvailabilityRules.js

@@ -143,2 +143,24 @@ import {
 
+    const keyboardSupportedValues = ["basic"];
+
+    const validateKeyBoardSupport = keyboard_support => {
+        const validKeyboardSupport = keyboardSupportedValues.includes(keyboard_support);
+        if (!validKeyboardSupport) {
+            log.error(
+                `Please provide a valid \`config.keyboard_support\`. \`${keyboard_support}\` is not a supported value.`,
+                {
+                    docsSlug: "availability-rules/#config.keyboard_support",
+                }
+            );
+            return false;
+        } else {
+            return keyboard_support;
+        }
+    };
+
+    const keyboardSupport =
+        typeof config.keyboard_support === "undefined"
+            ? false
+            : validateKeyBoardSupport(config.keyboard_support);
+
     const domains = parseConnectionDomains(
@@ -156,2 +178,3 @@ options.data_center,
     delete config.auto_create_rules;
+    delete config.keyboard_support;
 
@@ -170,2 +193,3 @@ return {
             autoCreateRulesMode,
+            keyboardSupport,
         },
@@ -172,0 +196,0 @@ translations,

src/js/helpers/utils.AvailabilityRules.js

@@ -72,2 +72,7 @@ import moment from "moment-timezone";
 
+    let keyboardSupport = false;
+    if (options.config && typeof options.config.keyboardSupport !== "undefined") {
+        keyboardSupport = options.config.keyboardSupport;
+    }
+
     return {
@@ -83,2 +88,3 @@ limits: {
         slotHeight,
+        keyboardSupport,
     };
@@ -85,0 +91,0 @@ };

tests/DateTimePicker/contexts/status-reducer.test.js

@@ -314,2 +314,3 @@ import { statusReducer } from "../../../src/js/components/DateTimePicker/contexts/status-reducer";
                     required_duration: { minutes: 60 },
+                    max_results: 512,
                 },
@@ -329,2 +330,3 @@ },
                     required_duration: { minutes: 60 },
+                    max_results: 512,
                 },
@@ -413,2 +415,3 @@ },
                 query: {
+                    max_results: 512,
                     participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
@@ -428,2 +431,3 @@ query_periods: [
                 query: {
+                    max_results: 512,
                     participants: [{ sub: "acc_5f35432b3f07d06753082354" }],
@@ -430,0 +434,0 @@ query_periods: [

tests/DateTimePicker/utils.test.js

@@ -268,2 +268,168 @@ import * as utils from "../../src/js/components/DateTimePicker/utils/slots";
     });
+
+    describe("getMonthObjectsFromQuery", () => {
+        const tzid = "Etc/UTC";
+
+        it("returns the currentMonth when query_periods is empty", () => {
+            const query_periods = [];
+
+            const query = {
+                query_periods,
+            };
+
+            const expected = [
+                {
+                    month: moment.tz().format("YYYY-MM"),
+                    current: true,
+                },
+            ];
+
+            const actual = utils.getMonthObjectsFromQuery(query, tzid);
+
+            expect(actual).toEqual(expected);
+        });
+
+        describe("when query_periods is populated", () => {
+            const query_periods = [
+                {
+                    start: "2021-06-11T00:00:00Z",
+                    end: "2021-06-12T23:00:00Z",
+                },
+                {
+                    start: "2021-06-13T00:00:00Z",
+                    end: "2021-07-14T23:00:00Z",
+                },
+            ];
+
+            it("returns list based on query_periods", () => {
+                const query = {
+                    query_periods,
+                };
+
+                const expected = [
+                    {
+                        month: "2021-06",
+                        current: true,
+                        query: {
+                            query_periods: [
+                                {
+                                    end: "2021-06-12T23:00:00Z",
+                                    start: "2021-06-11T00:00:00Z",
+                                },
+                                {
+                                    end: "2021-06-30T23:59:00Z",
+                                    start: "2021-06-13T00:00:00Z",
+                                },
+                            ],
+                            max_results: 512,
+                        },
+                    },
+                    {
+                        month: "2021-07",
+                        current: false,
+                        query: {
+                            query_periods: [
+                                {
+                                    end: "2021-07-14T23:00:00Z",
+                                    start: "2021-07-01T00:00:00Z",
+                                },
+                            ],
+                            max_results: 512,
+                        },
+                    },
+                ];
+
+                const actual = utils.getMonthObjectsFromQuery(query, tzid);
+
+                expect(actual).toEqual(expected);
+            });
+
+            it("correctly sets max_results", () => {
+                const query = {
+                    query_periods,
+                    max_results: 15,
+                };
+
+                const expected = [
+                    {
+                        month: "2021-06",
+                        current: true,
+                        query: {
+                            query_periods: [
+                                {
+                                    end: "2021-06-12T23:00:00Z",
+                                    start: "2021-06-11T00:00:00Z",
+                                },
+                                {
+                                    end: "2021-06-30T23:59:00Z",
+                                    start: "2021-06-13T00:00:00Z",
+                                },
+                            ],
+                            max_results: 15,
+                        },
+                    },
+                    {
+                        month: "2021-07",
+                        current: false,
+                        query: {
+                            query_periods: [
+                                {
+                                    end: "2021-07-14T23:00:00Z",
+                                    start: "2021-07-01T00:00:00Z",
+                                },
+                            ],
+                            max_results: 15,
+                        },
+                    },
+                ];
+
+                const actual = utils.getMonthObjectsFromQuery(query, tzid);
+
+                expect(actual).toEqual(expected);
+            });
+
+            it("defaults max_results to 512", () => {
+                const query = {
+                    query_periods,
+                };
+
+                const expected = [
+                    {
+                        month: "2021-06",
+                        current: true,
+                        query: {
+                            query_periods: [
+                                {
+                                    end: "2021-06-12T23:00:00Z",
+                                    start: "2021-06-11T00:00:00Z",
+                                },
+                                {
+                                    end: "2021-06-30T23:59:00Z",
+                                    start: "2021-06-13T00:00:00Z",
+                                },
+                            ],
+                            max_results: 512,
+                        },
+                    },
+                    {
+                        month: "2021-07",
+                        current: false,
+                        query: {
+                            query_periods: [
+                                {
+                                    end: "2021-07-14T23:00:00Z",
+                                    start: "2021-07-01T00:00:00Z",
+                                },
+                            ],
+                            max_results: 512,
+                        },
+                    },
+                ];
+
+                const actual = utils.getMonthObjectsFromQuery(query, tzid);
+
+                expect(actual).toEqual(expected);
+            });
+        });
+    });
 });

tests/init.AvailabilityRules.test.js

@@ -70,2 +70,3 @@ import moment from "moment-timezone";
                 autoCreateRulesMode: false,
+                keyboardSupport: false,
             },
@@ -250,2 +251,31 @@ data_center: "de",
     });
+
+    it("correctly parses the keyboard_support option", () => {
+        const input = {
+            target_id: "TARGET",
+            element_token: "TOKEN",
+            availability_rule_id: "RULE_ID",
+            config: {
+                keyboard_support: "basic",
+            },
+        };
+        const expectedOutput = {
+            config: {
+                keyboardSupport: "basic",
+            },
+        };
+        const result = parseAvailabilityRulesOptions(input);
+        expect(result.config.keyboardSupport).toEqual(expectedOutput.config.keyboardSupport);
+    });
+
+    it("shows an error if there is an invalid keyboard_support option present", () => {
+        const input = {
+            config: {
+                keyboard_support: "invalid-option",
+            },
+        };
+        parseAvailabilityRulesOptions(input);
+        expect(console.error).toHaveBeenCalledTimes(1);
+        expect(console.warn).toHaveBeenCalledTimes(0);
+    });
 });

tests/utils.AvailabilityRules.test.js

@@ -36,2 +36,3 @@ import * as utils from "../src/js/helpers/utils.AvailabilityRules";
             slotHeight: { height: 40 },
+            keyboardSupport: false,
         };
@@ -47,2 +48,3 @@ expect(utils.parseExtras()).toEqual(expectedOutput);
                 start_time: "08:00",
+                keyboardSupport: "basic",
             },
@@ -61,2 +63,3 @@ tzid: "America/Chicago",
             slotHeight: { height: 26 },
+            keyboardSupport: "basic",
         };
@@ -63,0 +66,0 @@ expect(utils.parseExtras(input)).toEqual(expectedOutput);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3501511

increased by0.46%

Number of package files

331

increased by0.3%

Lines of code

25674

increased by1.16%

No dependency changes