cronofy-elements - npm Package Compare versions

Comparing version 1.17.4 to 1.17.5

package.json

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

src/js/components/AvailabilityRules/AvailabilityRules.js

@@ -83,3 +83,5 @@ import React, { useState, useEffect } from "react";
             labelWidth: 60,
-            columnWidth: 100
+            columnWidth: 100,
+            wrapperWidth: false,
+            wrapperUnderflow: 0
         }
@@ -86,0 +88,0 @@ });

src/js/components/AvailabilityRules/TimeLabels.js

@@ -33,3 +33,3 @@ import React, { useState, useContext } from "react";
                     padding-top: 2px;
-                    padding-left: 2px;
+                    padding-left: ${2 + theme.sizes.wrapperUnderflow}px;
                     user-select: none;
@@ -36,0 +36,0 @@ pointer-events: none;

src/js/components/AvailabilityRules/Week.js

@@ -37,7 +37,26 @@ import React, { useContext, useEffect, useState } from "react";
     const calculateColumnWidth = () => {
-        const gridWrapperWidth = gridWrapper.current.clientWidth;
-        if (gridWrapperWidth) {
-            const columnWidth = Math.floor(gridWrapperWidth / 7);
+        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;
+
+        // Account for small-screen layout
+        const availableSpaceForGrid =
+            size.width > 550 ? elementWidth - labelColumnWidth : elementWidth;
+
+        const columnCount = 7;
+        if (availableSpaceForGrid) {
+            const columnWidth = Math.floor(availableSpaceForGrid / columnCount);
+            const remainder = availableSpaceForGrid % columnCount;
             if (columnWidth != theme.sizes.columnWidth) {
-                setTheme({ ...theme, sizes: { ...theme.sizes, columnWidth } });
+                setTheme(t => ({
+                    ...t,
+                    sizes: {
+                        ...t.sizes,
+                        columnWidth,
+                        wrapperWidth: columnWidth * columnCount,
+                        wrapperUnderflow: remainder
+                    }
+                }));
             }
@@ -59,2 +78,3 @@ }
             <div
+                ref={gridWrapper}
                 css={css`
@@ -75,16 +95,26 @@ position: relative;
                 <div
-                    ref={gridWrapper}
                     css={css`
-                        position: relative;
                         width: 100%;
-                        height: ${extras.slotHeight.height *
-                            extras.limits.slotsPerDay}px;
                     `}
-                    className={`${theme.prefix}__grid`}
                 >
-                    {!status.loading ? <SlotsDisplay /> : null}
-                    <WeekGrid
-                        key={`${extras.limits.start}_${extras.limits.end}`}
-                    />
-                    {status.loading ? <Loading /> : <Slots />}
+                    <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>
@@ -91,0 +121,0 @@ </div>

src/js/components/AvailabilityViewer/AvailabilityViewer.js

@@ -59,3 +59,5 @@ import React, { useState, useEffect } from "react";
             labelWidth: 60,
-            columnWidth: 100
+            columnWidth: 100,
+            wrapperWidth: false,
+            wrapperUnderflow: 0
         }
@@ -62,0 +64,0 @@ });

src/js/components/AvailabilityViewer/LabelColumn.js

@@ -48,2 +48,3 @@ import React, { useContext, useState } from "react";
                             left: 0;
+                            left: ${theme.sizes.wrapperUnderflow}px;
                             top: 2px;
@@ -50,0 +51,0 @@ text-align: left;

src/js/components/AvailabilityViewer/Week.js

 import React, { useContext, useState, useEffect } from "react";
-import { useWindowSize } from "../../hooks/useWindowSize";
 import { css, jsx } from "@emotion/core";
@@ -68,3 +67,2 @@
     const hoverElementTooltip = React.createRef();
-    const gridWrapper = React.createRef();
 
@@ -147,15 +145,2 @@ const toggleMultiple = (IDs, toggleStatus) => {
 
-    const calculateColumnWidth = () => {
-        const gridWrapperWidth = gridWrapper.current.clientWidth;
-        if (gridWrapperWidth) {
-            const columnWidth = Math.floor(gridWrapperWidth / 7);
-            if (columnWidth != theme.sizes.columnWidth) {
-                setTheme(t => ({
-                    ...t,
-                    sizes: { ...t.sizes, columnWidth }
-                }));
-            }
-        }
-    };
-
     useEffect(() => {
@@ -171,8 +156,2 @@ if (status.mode !== "multi_select") {
 
-    const size = useWindowSize();
-
-    useEffect(() => {
-        calculateColumnWidth();
-    }, [size]);
-
     const hoverHeight =
@@ -189,8 +168,14 @@ hover.available || status.slotSelection === "unrestricted"
                 <div
-                    ref={gridWrapper}
                     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;`
+                            : ""}
                     `}
@@ -197,0 +182,0 @@ className={`${theme.prefix}__grid`}

src/js/components/AvailabilityViewer/WeekWrapper.js

@@ -5,2 +5,3 @@ import React, { useContext, useEffect, useState } from "react";
 import { timeLabels } from "../../helpers/slots";
+import { useWindowSize } from "../../hooks/useWindowSize";
 
@@ -31,5 +32,42 @@ import DayLabels from "./DayLabels";
 
+    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;
+
+        // Account for small-screen layout
+        const availableSpaceForGrid =
+            size.width > 650 ? elementWidth - labelColumnWidth : elementWidth;
+
+        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(() => {
         setLabels(timeLabels(limits, slots[1].day, status.tzid));
     }, [slots, limits]);
+
     return (
@@ -43,5 +81,6 @@ <LabelsContext.Provider value={labels}>
                         display: flex;
-                        justify-content: stretch;
+                        justify-content: space-between;
                         position: relative;
                     `}
+                    ref={gridWrapper}
                     className={`${theme.prefix}__week`}
@@ -48,0 +87,0 @@ >

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

2673718

increased by0.2%

Lines of code

24447

increased by0.21%

No dependency changes