cronofy-elements - npm Package Compare versions

Comparing version 1.19.0 to 1.20.0

package.json

 {
     "name": "cronofy-elements",
-    "version": "1.19.0",
+    "version": "1.20.0",
     "description": "Fast track scheduling with Cronofy's embeddable UI Elements",
@@ -78,2 +78,3 @@ "main": "build/npm/CronofyElements.js",
         "postcss-loader": "^2.1.5",
+        "prettier": "2.0.5",
         "react": "^16.10.1",
@@ -80,0 +81,0 @@ "react-custom-scrollbars": "^4.2.1",

src/js/components/AvailabilityRules/AvailabilityRules.js

@@ -90,2 +90,3 @@ import React, { useState, useEffect } from "react";
             labelWidth: 60,
+            labelWidthSmall: 24,
             columnWidth: 100,
@@ -92,0 +93,0 @@ wrapperWidth: false,

src/js/components/AvailabilityRules/DayLabels.js

@@ -70,6 +70,6 @@ import React, { useContext } from "react";
                     width: ${theme.sizes.labelWidth}px;
-                    flex-shrink: 1;
+                    flex-shrink: 0;
                     height: ${extras.slotHeight.height}px;
                     @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        display: none;
+                        width: ${theme.sizes.labelWidthSmall}px;
                     }
@@ -83,2 +83,5 @@ `}
                     align-content: stretch;
+                    ${theme.sizes.wrapperUnderflow
+                        ? `margin-left: ${theme.sizes.wrapperUnderflow}px;`
+                        : ""}
                 `}
@@ -85,0 +88,0 @@ >

src/js/components/AvailabilityRules/TimeLabels.js

@@ -1,5 +0,8 @@
-import React, { useState, useContext } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import moment from "moment-timezone";
 import { css, jsx } from "@emotion/core";
 
+import { useWindowSize } from "../../hooks/useWindowSize";
+import { condenseTimeLabel } from "../../helpers/utils.AvailabilityViewer";
+
 import {
@@ -12,5 +15,5 @@ ExtrasContext,
 } from "./AvailabilityRules";
-import TimeSelector from "./TimeSelector";
+import TimeExpander from "./TimeExpander";
 
-const TimeLabel = ({ slot, height, open }) => {
+const TimeLabel = ({ slot, height, open, count }) => {
     const i18n = useContext(I18nContext);
@@ -21,3 +24,20 @@ const [status, setStatus] = useContext(StatusContext);
     const isOnTheHour = timeObject.minute() === 0;
-    const timeString = i18n.f(timeObject, "LT").replace(" ", "");
+
+    const size = useWindowSize();
+
+    let labelText = null;
+
+    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 (
@@ -31,9 +51,7 @@ <div
                 text-transform: lowercase;
+                transform: translateY(-6px);
+                padding-right: 2px;
+                width: ${theme.sizes.labelWidth}px;
                 @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                    text-align: left;
-                    opacity: 0.6;
-                    padding-top: 2px;
-                    padding-left: ${2 + theme.sizes.wrapperUnderflow}px;
-                    user-select: none;
-                    pointer-events: none;
+                    width: ${theme.sizes.labelWidthSmall}px;
                 }
@@ -44,3 +62,3 @@ `}
         >
-            {isOnTheHour ? timeString : null}
+            {isOnTheHour && count > 0 ? timeLabel : null}
         </div>
@@ -62,6 +80,2 @@ );
         <React.Fragment>
-            {selectionVisibility ? (
-                <TimeSelector done={handleCalendarSelection} />
-            ) : null}
-
             <div
@@ -74,6 +88,3 @@ css={css`
                     @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        z-index: 2;
+                        width: ${theme.sizes.labelWidthSmall}px;
                     }
@@ -83,34 +94,7 @@ `}
             >
-                <div
-                    css={css`
-                        position: absolute;
-                        bottom: 100%;
-                        right: 0;
-                        width: 20px;
-                        height: 20px;
-                        transform: translate(-10px, -10px);
-                        cursor: pointer;
-                        @media (max-width: ${theme.sizes.breakpoints.small}px) {
-                            left: 0;
-                            transform: translate(0, -40px);
-                        }
-                    `}
-                    onClick={handleCalendarSelection}
-                    className={`${theme.prefix}__time-select__trigger`}
-                >
-                    <svg
-                        width="20"
-                        height="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                        className={`${theme.prefix}__time-select__trigger-icon`}
-                    >
-                        <path
-                            d="M3.94 6.5L2.22 3.64l1.42-1.42L6.5 3.94c.52-.3 1.1-.54 1.7-.7L9 0h2l.8 3.24c.6.16 1.18.4 1.7.7l2.86-1.72 1.42 1.42-1.72 2.86c.3.52.54 1.1.7 1.7L20 9v2l-3.24.8c-.16.6-.4 1.18-.7 1.7l1.72 2.86-1.42 1.42-2.86-1.72c-.52.3-1.1.54-1.7.7L11 20H9l-.8-3.24c-.6-.16-1.18-.4-1.7-.7l-2.86 1.72-1.42-1.42 1.72-2.86c-.3-.52-.54-1.1-.7-1.7L0 11V9l3.24-.8c.16-.6.4-1.18.7-1.7zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
-                            fill={theme.colors.hairline}
-                        />
-                    </svg>
-                </div>
-                {staticSlots.map(slot => (
+                <TimeExpander backwards={true} />
+                {staticSlots.map((slot, i) => (
                     <TimeLabel
                         key={`${slot.day}_${slot.start}`}
+                        count={i}
                         slot={slot}
@@ -121,2 +105,3 @@ height={extras.slotHeight.height}
                 ))}
+                <TimeExpander />
             </div>
@@ -123,0 +108,0 @@ </React.Fragment>

src/js/components/AvailabilityRules/Week.js

@@ -43,7 +43,3 @@ import React, { useContext, useEffect, useState } from "react";
 
-        // Account for small-screen layout
-        const availableSpaceForGrid =
-            size.width > theme.sizes.breakpoints.small
-                ? elementWidth - labelColumnWidth
-                : elementWidth;
+        const availableSpaceForGrid = elementWidth - labelColumnWidth;
 
@@ -50,0 +46,0 @@ const columnCount = 7;

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

Number of package files

233

increased by0.43%

Worsened metrics

Total package byte prevSize

2605580

decreased by-0.41%

Dev dependency count

48

increased by2.13%

Lines of code

24232

decreased by-0.71%

No dependency changes