guestbell-forms 3.0.40 → 3.0.41

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": ".",