guestbell-forms 3.0.40 → 3.0.42

package/src/lib/components/bookingCalendar/bookingCalendarSelection/BookingCalendarSelection.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { bookingCalendarSelectionDefaultClasses } from './classes';
 
 export type BookingCalendarSelectionCoordinates = [number, number];
 export interface BookingCalendarSelectionData {
@@ -11,10 +12,13 @@ export interface BookingCalendarSelectionProps {
     origin: BookingCalendarSelectionCoordinates;
     target: BookingCalendarSelectionCoordinates;
   }) => void;
-  onSelected?: (data: {
-    origin: BookingCalendarSelectionCoordinates;
-    target: BookingCalendarSelectionCoordinates;
-  }) => void;
+  onSelected?: (
+    data: {
+      origin: BookingCalendarSelectionCoordinates;
+      target: BookingCalendarSelectionCoordinates;
+    },
+    e: React.MouseEvent<HTMLElement>
+  ) => void;
   dataRowsCount: number;
   minSelectionSize: number;
   children?: React.ReactNode;
@@ -116,10 +120,13 @@ export default class BookingCalendarSelection extends React.Component<
       if (distance < this.props.minSelectionSize) {
         return;
       }
-      this.props.onSelected?.({
-        origin: this.state.selectionBoxOrigin,
-        target: this.state.selectionBoxTarget,
-      });
+      this.props.onSelected?.(
+        {
+          origin: this.state.selectionBoxOrigin,
+          target: this.state.selectionBoxTarget,
+        },
+        evt
+      );
     }
   }
 
@@ -168,8 +175,14 @@ export default class BookingCalendarSelection extends React.Component<
   render() {
     const baseStyle: React.CSSProperties = {
       zIndex: 10,
-      left: this.state.selectionBoxOrigin[0],
-      top: this.state.selectionBoxOrigin[1],
+      left: Math.min(
+        this.state.selectionBoxOrigin[0],
+        this.state.selectionBoxTarget[0]
+      ),
+      top: Math.min(
+        this.state.selectionBoxOrigin[1],
+        this.state.selectionBoxTarget[1]
+      ),
       height: Math.abs(
         this.state.selectionBoxTarget[1] - this.state.selectionBoxOrigin[1] - 1
       ),
@@ -177,8 +190,8 @@ export default class BookingCalendarSelection extends React.Component<
         this.state.selectionBoxTarget[0] - this.state.selectionBoxOrigin[0] - 1
       ),
       userSelect: 'none',
-      transformOrigin: 'top left',
-      transform: this.handleTransformBox(),
+      // transformOrigin: 'top left',
+      // transform: this.handleTransformBox(),
     };
     const boxVisible =
       Math.sqrt(
@@ -194,7 +207,7 @@ export default class BookingCalendarSelection extends React.Component<
     return (
       <div
         ref={this.containerRef}
-        className="bookingCalendar__selection__container"
+        className={bookingCalendarSelectionDefaultClasses.root}
         style={{
           zIndex: this.state.selectionBox ? 99999 : undefined,
           gridRowEnd: `span ${this.props.dataRowsCount}`,
@@ -206,11 +219,12 @@ export default class BookingCalendarSelection extends React.Component<
       >
         {boxVisible && this.state.selectionBox && (
           <div
-            className={`bookingCalendar__selection ${this.state.animation}`}
+            className={`${bookingCalendarSelectionDefaultClasses.selection} ${this.state.animation}`}
             style={baseStyle}
-          />
+          >
+            {this.props.children}
+          </div>
         )}
-        {this.props.children}
       </div>
     );
   }

package/src/lib/components/bookingCalendar/bookingCalendarSelection/classes.ts

@@ -0,0 +1,10 @@
+export interface BookingCalendarSelectionClasses {
+  root?: string;
+  selection?: string;
+}
+
+export const bookingCalendarSelectionDefaultClasses: BookingCalendarSelectionClasses =
+  {
+    root: 'bookingCalendar__selection__container',
+    selection: 'bookingCalendar__selection',
+  };

package/src/lib/components/bookingCalendar/common.ts

@@ -3,6 +3,7 @@ import moment, { Moment, Duration } from 'moment';
 export interface BookingCalendarItemT {
   from: Moment;
   till: Moment;
+  id: string | number;
   /*
   Optional index that identifies the lane
   */

package/src/lib/components/bookingCalendar/utils.ts

@@ -180,7 +180,8 @@ export function splitBookingsToLanes<T extends BookingCalendarItemT, TLaneData>(
   return lanes;
 }
 
-export function itemsOverlap<T extends BookingCalendarItemT>(a: T, b: T) {
+type Picked = Pick<BookingCalendarItemT, 'from' | 'till'>;
+export function itemsOverlap(a: Picked, b: Picked) {
   if (!a?.from || !a?.till || !b?.from || !b?.till) {
     return false;
   }
@@ -267,6 +268,7 @@ export const generateControlItems = (
       .clone()
       .add(subtract)
       .add(step.asMilliseconds() * (index + 1)),
+    id: index
   }));
 };
 

package/src/lib/scss/components/bookingCalendar/bookingCalendar.scss

@@ -263,6 +263,8 @@ $border-color-dark: black;
   animation-duration: 0.2s;
   animation-name: fadeIn;
   user-select: none;
+  padding: 0.5rem;
+  overflow: hidden;
 }
 
 .bookingCalendar__selection--fadeout {

package/src/stories/Schedule.tsx

@@ -12,20 +12,21 @@ const generateBookingItemsBetweenDates = (
   from: Moment,
   till: Moment,
   count = 50
-) => {
+): BookingCalendarItemT[] => {
   const width = till.valueOf() - from.valueOf();
   const startMs = from.valueOf();
-  return new Array(count).fill(0).map(() => {
+  return new Array(count).fill(0).map((_, index) => {
     const _from = randomIntFromInterval(0, till.valueOf() - startMs) + startMs;
     const _width = randomIntFromInterval(width / 100, width / 50);
     return {
+      id: index,
       from: moment(_from),
       till: moment(_from).add(_width, 'ms'),
       laneKey:
         randomIntFromInterval(1, 3) === 1
           ? undefined
           : randomIntFromInterval(1, 3),
-    } as BookingCalendarItemT;
+    };
   });
 };
 
@@ -47,6 +48,15 @@ export const Schedule = () => {
     () => bookings.filter((b) => itemsOverlap(b, { from, till })),
     [from, till, bookings]
   );
+  const onSelection = React.useCallback(
+    (items: BookingCalendarItemT[], _from, _till, e) => {
+      console.log(items);
+      if (e.ctrlKey) {
+        setRange({ from: _from, till: _till });
+      }
+    },
+    []
+  );
   return (
     <div className="container">
       <BookingCalendar
@@ -55,6 +65,8 @@ export const Schedule = () => {
         till={till}
         step={duration(1, 'day')}
         onRangeChange={setRange}
+        onSelection={onSelection}
+        selectionContent={'Hold CTRL to zoom'}
         // lanesCount={3}
         lanesSource={new Array(3).fill(0).map((_, index) => ({
           laneKey: index,

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "rootDir": "./src/lib",
+    "rootDir": ".",
     "outDir": "./dist",
     "declarationDir": "./dist/dts",
     "baseUrl": ".",