guestbell-forms 3.0.41 → 3.0.43

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

@@ -44,6 +44,7 @@ export interface LaneData<T extends BookingCalendarItemT, TLaneData>
 export function splitBookingsToLanes<T extends BookingCalendarItemT, TLaneData>(
   bookings: T[],
   from: Moment,
+  till: Moment,
   minLanesCount: number,
   lanesSource: LaneSourceData<T, TLaneData>[] = [],
   unmatchedToFront = true
@@ -136,10 +137,12 @@ export function splitBookingsToLanes<T extends BookingCalendarItemT, TLaneData>(
   });*/
   }
   for (let index = 0; index < lanes.length; index++) {
-    const lane = lanes[index];
-    lanes[index].items = lane.items.sort(
-      (a, b) => a.from.valueOf() - b.from.valueOf()
-    );
+    const laneItems = lanes[index].items;
+    const normal = laneItems.filter((a) => a.till.valueOf() < till.valueOf());
+    normal.sort((a, b) => a.from.valueOf() - b.from.valueOf());
+    const atEnd = laneItems.filter((a) => a.till.valueOf() >= till.valueOf());
+    atEnd.sort((a, b) => a.from.valueOf() - b.from.valueOf());
+    lanes[index].items = [...normal, ...atEnd];
   }
   if (lanes.length < minLanesCount) {
     lanes = lanes.concat(
@@ -220,7 +223,7 @@ export function calculateItemsDimensions<T extends BookingCalendarItemT>(
         const end = endIsCut ? (endMs - startMs) / widthMs : realEnd;
         const realTill = endIsCut ? moment(endMs) : moment(item.till);
         const marginStart = start - lastEnd;
-        lastEnd = (item.till.valueOf() - startMs) / widthMs;
+        lastEnd = Math.min((item.till.valueOf() - startMs) / widthMs, 1);
         return {
           item,
           start,
@@ -268,7 +271,7 @@ export const generateControlItems = (
       .clone()
       .add(subtract)
       .add(step.asMilliseconds() * (index + 1)),
-    id: index
+    id: index,
   }));
 };
 

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

@@ -63,14 +63,16 @@ $border-color-dark: black;
 }
 .bookingCalendar__item {
   position: relative;
-  background-color: rgba($primary-color, 0.9);
-  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
 }
 
 .bookingCalendar__renderItem {
   padding: 0.5rem;
+  background-color: rgba($primary-color, 0.9);
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
   &::before,
   &::after {
     content: '';

package/src/stories/OverlappingSchedule.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import OverlappingSchedule from './OverlappingSchedule';
+
+const meta = {
+  title: 'Example/OverlappingSchedule',
+  component: OverlappingSchedule,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+  },
+} satisfies Meta<typeof OverlappingSchedule>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/OverlappingSchedule.tsx

@@ -0,0 +1,174 @@
+import moment, { duration, Moment } from 'moment';
+import * as React from 'react';
+import {
+  BookingCalendar,
+  BookingCalendarItemT,
+  BookingCalendarRenderItem,
+  BookingCalendarRenderItemProps,
+} from '../lib';
+import classNames from 'classnames';
+import './overlappingSchedule.scss';
+
+type TItem = BookingCalendarItemT & { overlapping?: boolean };
+
+const generateBookingItemsBetweenDates = (
+  from: Moment,
+  till: Moment
+): TItem[] => {
+  const width = till.valueOf() - from.valueOf();
+  const startMs = from.valueOf();
+  const nonOverlappingCount = 10;
+  const laneCount = 5;
+  let i = 0;
+  return new Array(laneCount)
+    .fill(0)
+    .map((_, laneIndex) => [
+      ...new Array(nonOverlappingCount).fill(0).map((_, index) => {
+        const _from = startMs + index * (width / nonOverlappingCount);
+        const _width = width / (nonOverlappingCount + 1);
+        return {
+          id: i++,
+          from: moment(_from),
+          till: moment(_from).add(_width, 'ms'),
+          laneKey: laneIndex,
+        };
+      }),
+      ...(laneIndex === 0
+        ? [
+            {
+              id: i++,
+              from: moment(from),
+              till: moment(till),
+              laneKey: laneIndex,
+              overlapping: true,
+            },
+          ]
+        : laneIndex === 1
+        ? [
+            {
+              id: i++,
+              from: moment(from).subtract(width / 2, 'ms'),
+              till: moment(till).add(width / 2, 'ms'),
+              laneKey: laneIndex,
+              overlapping: true,
+            },
+            {
+              id: i++,
+              from: moment(from).subtract(width / 2, 'ms'),
+              till: moment(till).add(width / 2, 'ms'),
+              laneKey: laneIndex,
+              overlapping: true,
+            },
+          ]
+        : laneIndex === 2
+        ? [
+            {
+              id: i++,
+              from: moment(till).subtract(width / 2, 'ms'),
+              till: moment(till),
+              laneKey: laneIndex,
+              overlapping: true,
+            },
+          ]
+        : laneIndex === 3
+        ? [
+            {
+              id: i++,
+              from: moment(from).add(width / (nonOverlappingCount * 2), 'ms'),
+              till: moment(till).subtract(
+                width / (nonOverlappingCount * 2),
+                'ms'
+              ),
+              laneKey: laneIndex,
+              overlapping: true,
+            },
+          ]
+        : laneIndex === 4
+        ? [
+            {
+              id: i++,
+              from: moment(from).add(width / (nonOverlappingCount * 2), 'ms'),
+              till: moment(till).subtract(
+                width / (nonOverlappingCount * 2),
+                'ms'
+              ),
+              laneKey: laneIndex,
+              overlapping: true,
+            },
+            {
+              id: i++,
+              from: moment(from).add(width / (nonOverlappingCount * 2), 'ms'),
+              till: moment(till).subtract(
+                width / (nonOverlappingCount * 2),
+                'ms'
+              ),
+              laneKey: laneIndex,
+              overlapping: true,
+            },
+          ]
+        : []),
+    ])
+    .reduce((acc, val) => acc.concat(val), [])
+    .filter((a) => a /*&&a?.laneKey === 1*/);
+};
+
+export const Schedule = () => {
+  const [{ from, till }, setRange] = React.useState({
+    from: moment().startOf('day').subtract(0, 'day'),
+    till: moment().startOf('day').add(7, 'days'),
+  });
+
+  const bookings = React.useMemo(
+    () =>
+      generateBookingItemsBetweenDates(
+        from.clone().subtract(0, 'day'),
+        till.clone().add(0, 'day')
+      ),
+    []
+  );
+
+  const onSelection = React.useCallback((items: TItem[], _from, _till, e) => {
+    console.log(items);
+    if (e.ctrlKey) {
+      setRange({ from: _from, till: _till });
+    }
+  }, []);
+  const RenderItem: React.FC<BookingCalendarRenderItemProps<TItem>> =
+    React.useCallback((props) => {
+      return (
+        <BookingCalendarRenderItem
+          className={classNames({ overlapping__item: props.item.overlapping })}
+          {...props}
+          alwaysShowContent={true}
+        >
+          <div />
+        </BookingCalendarRenderItem>
+      );
+    }, []);
+  return (
+    <div className="container">
+      <BookingCalendar
+        bookings={bookings}
+        from={from}
+        till={till}
+        step={duration(1, 'day')}
+        onRangeChange={setRange}
+        onSelection={onSelection}
+        selectionContent={'Hold CTRL to zoom'}
+        // lanesCount={3}
+        lanesSource={new Array(5).fill(0).map((_, index) => ({
+          laneKey: index,
+          data: { data: 'test' },
+          rowClassName: 'test',
+        }))}
+        zoomLevels={[
+          { step: duration(1, 'day'), label: 'Day' },
+          { step: duration(1, 'week'), label: 'Week' },
+        ]}
+        BookingCalendarRenderItem={RenderItem}
+      />
+    </div>
+  );
+};
+
+export default Schedule;

package/src/stories/overlappingSchedule.scss

@@ -0,0 +1,10 @@
+.bookingCalendar__renderItem {
+  position: relative;
+  z-index: 2;
+}
+.overlapping__item {
+  background: black;
+  width: 100%;
+  z-index: 1;
+  transform: scaleY(0.8);
+}