guestbell-forms 3.0.39 → 3.0.40

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

@@ -0,0 +1,9 @@
+export interface BookingCalendarDatePickerClasses {
+  className?: string;
+  buttonClassName?: string;
+}
+
+export const bookingCalendarDatePickerDefaultClasses: BookingCalendarDatePickerClasses = {
+  className: 'bookingCalendar__datePicker',
+  buttonClassName: 'bookingCalendar__datePicker__button',
+};

package/src/lib/components/bookingCalendar/bookingCalendarDatePicker/index.ts

@@ -0,0 +1,2 @@
+export * from './BookingCalendarDatePicker';
+export * from './classes';

package/src/lib/components/bookingCalendar/bookingCalendarGrid/BookingCalendarGrid.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {
+  BookingCalendarGridClasses,
+  bookingCalendarGridDefaultClasses,
+} from './classes';
+import classNames from 'classnames';
+import { GridItem } from '../utils';
+
+export interface BookingCalendarGridProps extends BookingCalendarGridClasses {
+  items: GridItem[];
+  containerRef?: (elem: HTMLElement) => void;
+  dataRowsCount: number;
+  width: number;
+}
+
+export function BookingCalendarGrid(props: BookingCalendarGridProps) {
+  const {
+    className,
+    gridItemClassName,
+    containerRef,
+    dataRowsCount,
+    items,
+    width,
+  } = props;
+  const style = React.useMemo(
+    () => ({
+      gridRowEnd: `span ${dataRowsCount}`,
+      ...(width ? { width: `${width}px` } : {}),
+    }),
+    [dataRowsCount, width]
+  );
+  return (
+    <div
+      className={classNames(
+        bookingCalendarGridDefaultClasses.className,
+        className
+      )}
+      style={style}
+      ref={containerRef}
+    >
+      {items.map((item, key) => (
+        <div
+          className={classNames(
+            bookingCalendarGridDefaultClasses.gridItemClassName,
+            gridItemClassName
+          )}
+          key={key}
+          style={{
+            left: `${item.left * 100}%`,
+            opacity: 0.7 * item.opacity + 0.1,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+export interface BookingCalendarGridClasses {
+  className?: string;
+  gridItemClassName?: string;
+}
+
+export const bookingCalendarGridDefaultClasses: BookingCalendarGridClasses = {
+  className: 'bookingCalendar__grid',
+  gridItemClassName: 'bookingCalendar__grid__item',
+};

package/src/lib/components/bookingCalendar/bookingCalendarItem/BookingCalendarItem.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import {
+  BookingCalendarRenderItem as DefaultBookingCalendarRenderItem,
+  BookingCalendarRenderItemProps,
+} from '../bookingCalendarRenderItem/BookingCalendarRenderItem';
+import { BookingCalendarItemT } from '../common';
+import classNames from 'classnames';
+import { getItemPositionStyle } from './../utils';
+import {
+  BookingCalendarItemClasses,
+  bookingCalendarItemDefaultClasses,
+} from './classes';
+import { Duration, Moment } from 'moment';
+
+export interface BookingCalendarItemBaseProps<T extends BookingCalendarItemT> {
+  item: T;
+  itemIndex: number;
+  laneIndex: number;
+  from: Moment;
+  till: Moment;
+  step: Duration;
+  /**
+   * Number between [0,1] that tells how far from previous item (or start) this item starts
+   */
+  marginStart: number;
+
+  /**
+   * Number between [0,1] that tells what part of the lane the item starts at
+   */
+  start: number;
+  /**
+   * Like start but can be negative (go offscreen)
+   */
+  realStart: number;
+  /**
+   * Actual start date shown on grid
+   */
+  realFrom: Moment;
+  /**
+   * Some part of the item was cut from the beginning
+   */
+  startIsCut: boolean;
+  /**
+   * Number between [0,1] that tells what part of the lane the item takes
+   */
+  width: number;
+  /**
+   * Number between [0,1] that tells what part of the lane the item ends at
+   */
+  end: number;
+  /**
+   * Like end but can be more than 1 (go offscreen)
+   */
+  realEnd: number;
+  /**
+   * Actual end date shown on grid
+   */
+  realTill: Moment;
+  /**
+   * Some part of the item was cut from the end
+   */
+  endIsCut: boolean;
+
+  BookingCalendarRenderItem?: React.ComponentType<
+    BookingCalendarRenderItemProps<T>
+  >;
+}
+
+export interface BookingCalendarItemProps<T extends BookingCalendarItemT>
+  extends BookingCalendarItemClasses,
+    BookingCalendarItemBaseProps<T> {}
+
+export function BookingCalendarItem<T extends BookingCalendarItemT>(
+  props: BookingCalendarItemProps<T>
+) {
+  const {
+    className,
+    marginStart,
+    width,
+    BookingCalendarRenderItem = DefaultBookingCalendarRenderItem,
+  } = props;
+  const style = React.useMemo(() => getItemPositionStyle(marginStart, width), [
+    marginStart,
+    width,
+  ]);
+  return (
+    <div
+      className={classNames(
+        bookingCalendarItemDefaultClasses.className,
+        className
+      )}
+      style={style}
+    >
+      <BookingCalendarRenderItem {...props} />
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export interface BookingCalendarItemClasses {
+  className?: string;
+}
+
+export const bookingCalendarItemDefaultClasses: BookingCalendarItemClasses = {
+  className: 'bookingCalendar__item',
+};

package/src/lib/components/bookingCalendar/bookingCalendarItem/index.ts

@@ -0,0 +1,2 @@
+export * from './BookingCalendarItem';
+export * from './classes';

package/src/lib/components/bookingCalendar/bookingCalendarLane/BookingCalendarLane.tsx

@@ -0,0 +1,69 @@
+import classNames from 'classnames';
+import { Duration, Moment } from 'moment';
+import * as React from 'react';
+import {
+  BookingCalendarItem as DefaultBookingCalendarItem,
+  BookingCalendarItemProps,
+} from '../bookingCalendarItem/BookingCalendarItem';
+import { BookingCalendarRenderItemProps } from '../bookingCalendarRenderItem';
+import { calculateItemsDimensions } from '../utils';
+import { BookingCalendarItemT } from './../common';
+import {
+  bookingCalendarLaneDefaultClasses,
+  BookingCalendarLaneClasses,
+} from './classes';
+
+export interface BookingCalendarLaneProps<T extends BookingCalendarItemT>
+  extends BookingCalendarLaneClasses {
+  items: T[];
+  laneIndex: number;
+  from: Moment;
+  till: Moment;
+  step: Duration;
+  BookingCalendarItem?: React.ComponentType<BookingCalendarItemProps<T>>;
+  BookingCalendarRenderItem?: React.ComponentType<
+    BookingCalendarRenderItemProps<T>
+  >;
+}
+
+export function BookingCalendarLane<T extends BookingCalendarItemT>(
+  props: BookingCalendarLaneProps<T>
+) {
+  const {
+    className,
+    items,
+    laneIndex,
+    from,
+    till,
+    step,
+    BookingCalendarItem = DefaultBookingCalendarItem,
+    BookingCalendarRenderItem,
+  } = props;
+  const calculatedItems = React.useMemo(
+    () => calculateItemsDimensions(items, from, till),
+    [items, from, till]
+  );
+  return (
+    <div
+      className={classNames(
+        bookingCalendarLaneDefaultClasses.className,
+        className
+      )}
+    >
+      {calculatedItems?.map((item, itemIndex) =>
+        item.width > 0 ? (
+          <BookingCalendarItem
+            BookingCalendarRenderItem={BookingCalendarRenderItem}
+            key={itemIndex}
+            itemIndex={itemIndex}
+            laneIndex={laneIndex}
+            from={from}
+            till={till}
+            step={step}
+            {...item}
+          />
+        ) : null
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export interface BookingCalendarLaneClasses {
+  className?: string;
+}
+
+export const bookingCalendarLaneDefaultClasses: BookingCalendarLaneClasses = {
+  className: 'bookingCalendar__lane',
+};

package/src/lib/components/bookingCalendar/bookingCalendarLane/index.ts

@@ -0,0 +1,2 @@
+export * from './BookingCalendarLane';
+export * from './classes';

package/src/lib/components/bookingCalendar/bookingCalendarLaneHeader/BookingCalendarLaneHeader.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import {
+  bookingCalendarLaneHeaderDefaultClasses,
+  BookingCalendarLaneHeaderClasses,
+} from './classes';
+
+export interface BookingCalendarLaneHeaderProps<TLaneData>
+  extends BookingCalendarLaneHeaderClasses {
+  laneKey: string | number;
+  data: TLaneData;
+}
+
+export function BookingCalendarLaneHeader<TLaneData>(
+  props: BookingCalendarLaneHeaderProps<TLaneData>
+) {
+  const { className, laneKey } = props;
+  return (
+    <div
+      className={classNames(
+        bookingCalendarLaneHeaderDefaultClasses.className,
+        className
+      )}
+    >
+      {laneKey}.
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export interface BookingCalendarLaneHeaderClasses {
+  className?: string;
+}
+
+export const bookingCalendarLaneHeaderDefaultClasses: BookingCalendarLaneHeaderClasses = {
+  className: 'bookingCalendar__laneHeader',
+};

package/src/lib/components/bookingCalendar/bookingCalendarLaneHeader/index.ts

@@ -0,0 +1 @@
+export * from './BookingCalendarLaneHeader';

package/src/lib/components/bookingCalendar/bookingCalendarLanesHeader/BookingCalendarLanesHeader.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { BookingCalendarDateRange, BookingCalendarItemT } from '../common';
+import { Duration, Moment } from 'moment';
+import {
+  BookingCalendarLanesHeaderClasses,
+  bookingCalendarLanesHeaderDefaultClasses,
+} from './classes';
+import { generateControlItems } from '../utils';
+import { BookingCalendarLane } from '../bookingCalendarLane';
+import { BookingCalendarLanesHeaderRenderItemFactory } from './BookingCalendarLanesHeaderRenderItem';
+
+export interface BookingCalendarLanesHeaderProps<T extends BookingCalendarItemT>
+  extends BookingCalendarLanesHeaderClasses {
+  step: Duration;
+  from: Moment;
+  till: Moment;
+  onRangeChange?: (range: BookingCalendarDateRange) => void;
+}
+
+export function BookingCalendarLanesHeader<T extends BookingCalendarItemT>(
+  props: BookingCalendarLanesHeaderProps<T>
+) {
+  const { className, laneClassName, step, from, till, onRangeChange } = props;
+  if (!step || !from || !till) {
+    return null;
+  }
+  const items = React.useMemo(
+    () => generateControlItems(from, till, step, from?.clone().startOf('day')),
+    [from, till, step]
+  );
+  const BookingCalendarLanesHeaderRenderItem = React.useMemo(
+    () => BookingCalendarLanesHeaderRenderItemFactory(onRangeChange),
+    [onRangeChange]
+  );
+  return (
+    <div
+      className={classNames(
+        bookingCalendarLanesHeaderDefaultClasses.className,
+        className
+      )}
+    >
+      <BookingCalendarLane
+        className={classNames(
+          bookingCalendarLanesHeaderDefaultClasses.laneClassName,
+          laneClassName
+        )}
+        items={items}
+        from={from}
+        till={till}
+        laneIndex={-1}
+        BookingCalendarRenderItem={BookingCalendarLanesHeaderRenderItem}
+        step={step}
+      />
+    </div>
+  );
+}

package/src/lib/components/bookingCalendar/bookingCalendarLanesHeader/BookingCalendarLanesHeaderRenderItem.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { BookingCalendarRenderItemProps } from '../bookingCalendarRenderItem';
+import { bookingCalendarRenderItemDefaultClasses } from '../bookingCalendarRenderItem/classes';
+import { BookingCalendarItemT, BookingCalendarDateRange } from '../common';
+import { Button } from '../../button/Button';
+
+export const BookingCalendarLanesHeaderRenderItemFactory = (
+  onRangeChange: (range: BookingCalendarDateRange) => void
+) =>
+  function BookingCalendarLanesHeaderRenderItem<T extends BookingCalendarItemT>(
+    props: BookingCalendarRenderItemProps<T>
+  ) {
+    const { item, className, startIsCut, endIsCut, realFrom, realTill } = props;
+    const onClick = React.useCallback(
+      () => onRangeChange({ from: item.from, till: item.till }),
+      [item]
+    );
+    return item ? (
+      <div
+        className={classNames(
+          bookingCalendarRenderItemDefaultClasses.className,
+          className
+        )}
+      >
+        <Button
+          className="bookingCalendar__lanesHeader__renderItem__button"
+          noShadow={true}
+          onClick={onClick}
+          type="primary"
+        >
+          {startIsCut || endIsCut ? (
+            <>
+              {item.from.format('ddd, Do')}
+              <br />
+              <span className="bookingCalendar__lanesHeader__renderItem__button__mutedText bookingCalendar__lanesHeader__renderItem__button__mutedText--split">
+                <span>{startIsCut && realFrom.format('M/D H:mm')}</span>
+                <span>{endIsCut && realTill.format('M/D H:mm')}</span>
+              </span>
+            </>
+          ) : (
+            <>
+              {item.from.format('ddd')}
+              <br />
+              <span className="bookingCalendar__lanesHeader__renderItem__button__mutedText">
+                {item.from.format('Do')}
+              </span>
+            </>
+          )}
+        </Button>
+      </div>
+    ) : null;
+  };

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

@@ -0,0 +1,9 @@
+export interface BookingCalendarLanesHeaderClasses {
+  className?: string;
+  laneClassName?: string;
+}
+
+export const bookingCalendarLanesHeaderDefaultClasses: BookingCalendarLanesHeaderClasses = {
+  className: 'bookingCalendar__lanesHeader',
+  laneClassName: 'bookingCalendar__lanesHeader__lane',
+};

package/src/lib/components/bookingCalendar/bookingCalendarLanesHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './BookingCalendarLanesHeader';
+export * from './classes';

package/src/lib/components/bookingCalendar/bookingCalendarRenderItem/BookingCalendarRenderItem.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import { BookingCalendarItemProps } from '../bookingCalendarItem';
+import { BookingCalendarItemT } from './../common';
+import {
+  bookingCalendarRenderItemDefaultClasses,
+  BookingCalendarRenderItemClasses,
+} from './classes';
+
+export interface BookingCalendarRenderItemProps<T extends BookingCalendarItemT>
+  extends BookingCalendarItemProps<T>,
+    BookingCalendarRenderItemClasses {
+  alwaysShowContent?: boolean;
+  children?: React.ReactNode;
+}
+
+export function BookingCalendarRenderItem<T extends BookingCalendarItemT>(
+  props: BookingCalendarRenderItemProps<T>
+) {
+  const {
+    item,
+    className,
+    laneIndex,
+    itemIndex,
+    width,
+    endIsCut,
+    startIsCut,
+    alwaysShowContent,
+    children = (
+      <>
+        {laneIndex}-{itemIndex}
+        <br />
+        {item.from?.format?.('M/D H:mm')}
+        <br />
+        {item.till?.format?.('M/D H:mm')}
+      </>
+    ),
+  } = props;
+  /*const stepWidth = React.useMemo(
+    () => step.asMilliseconds() / till.diff(from),
+    [step, from, till]
+  );*/
+  return item ? (
+    <div
+      className={classNames(
+        bookingCalendarRenderItemDefaultClasses.className,
+        className,
+        {
+          [bookingCalendarRenderItemDefaultClasses.cutStartClassname]: startIsCut,
+          [bookingCalendarRenderItemDefaultClasses.cutEndClassname]: endIsCut,
+        }
+      )}
+    >
+      {(alwaysShowContent || width > 0.1) && children}
+    </div>
+  ) : null;
+}

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

@@ -0,0 +1,11 @@
+export interface BookingCalendarRenderItemClasses {
+  className?: string;
+  cutStartClassname?: string;
+  cutEndClassname?: string;
+}
+
+export const bookingCalendarRenderItemDefaultClasses: BookingCalendarRenderItemClasses = {
+  className: 'bookingCalendar__renderItem',
+  cutStartClassname: 'bookingCalendar__renderItem--cutStart',
+  cutEndClassname: 'bookingCalendar__renderItem--cutEnd',
+};

package/src/lib/components/bookingCalendar/bookingCalendarRenderItem/index.ts

@@ -0,0 +1 @@
+export * from './BookingCalendarRenderItem';