guestbell-forms 3.0.38 → 3.0.40

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

@@ -0,0 +1,217 @@
+import * as React from 'react';
+
+export type BookingCalendarSelectionCoordinates = [number, number];
+export interface BookingCalendarSelectionData {
+  origin: BookingCalendarSelectionCoordinates;
+  target: BookingCalendarSelectionCoordinates;
+}
+export interface BookingCalendarSelectionProps {
+  disabled?: boolean;
+  onSelecting?: (data: {
+    origin: BookingCalendarSelectionCoordinates;
+    target: BookingCalendarSelectionCoordinates;
+  }) => void;
+  onSelected?: (data: {
+    origin: BookingCalendarSelectionCoordinates;
+    target: BookingCalendarSelectionCoordinates;
+  }) => void;
+  dataRowsCount: number;
+  minSelectionSize: number;
+  children?: React.ReactNode;
+}
+
+export interface BookingCalendarSelectionState {
+  selectionBoxOrigin: BookingCalendarSelectionCoordinates;
+  selectionBoxTarget: BookingCalendarSelectionCoordinates;
+  hold: boolean;
+  animation: string;
+  selectionBox: boolean;
+}
+
+export default class BookingCalendarSelection extends React.Component<
+  BookingCalendarSelectionProps,
+  BookingCalendarSelectionState
+> {
+  private animationInProgress: number;
+  private containerRef: React.RefObject<HTMLDivElement>;
+
+  constructor(props) {
+    super(props);
+    this.animationInProgress = null;
+    this.containerRef = React.createRef();
+    this.state = {
+      hold: false,
+      selectionBox: false,
+      selectionBoxOrigin: [0, 0],
+      selectionBoxTarget: [0, 0],
+      animation: '',
+    };
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  }
+
+  handleTransformBox() {
+    const { selectionBoxOrigin, selectionBoxTarget } = this.state;
+    if (
+      selectionBoxOrigin[1] > selectionBoxTarget[1] &&
+      selectionBoxOrigin[0] > selectionBoxTarget[0]
+    ) {
+      return 'scaleY(-1) scaleX(-1)';
+    }
+
+    if (selectionBoxOrigin[1] > selectionBoxTarget[1]) {
+      return 'scaleY(-1)';
+    }
+    if (selectionBoxOrigin[0] > selectionBoxTarget[0]) {
+      return 'scaleX(-1)';
+    }
+    return null;
+  }
+
+  handleMouseLeave(evt: React.MouseEvent<HTMLElement>) {
+    /*if (this.state.hold) {
+      this.setState({
+        hold: false,
+        animation: 'bookingCalendar__selection--fadeout',
+      });
+      this.animationInProgress = (setTimeout(() => {
+        this.setState({
+          selectionBox: false,
+          animation: '',
+          selectionBoxOrigin: [0, 0],
+          selectionBoxTarget: [0, 0],
+        });
+        this.animationInProgress = null;
+      }, 300) as unknown) as number;
+    }*/
+  }
+
+  handleMouseUp(evt: React.MouseEvent<HTMLElement>) {
+    if (this.state.hold) {
+      const distance = Math.sqrt(
+        Math.pow(
+          this.state.selectionBoxTarget[1] - this.state.selectionBoxOrigin[1],
+          2
+        ) +
+          Math.pow(
+            this.state.selectionBoxTarget[0] - this.state.selectionBoxOrigin[0],
+            2
+          )
+      );
+      this.setState({
+        hold: false,
+        animation: 'bookingCalendar__selection--fadeout',
+      });
+      this.animationInProgress = setTimeout(() => {
+        this.setState({
+          selectionBox: false,
+          animation: '',
+          selectionBoxOrigin: [0, 0],
+          selectionBoxTarget: [0, 0],
+        });
+        this.animationInProgress = null;
+      }, 300) as unknown as number;
+      if (distance < this.props.minSelectionSize) {
+        return;
+      }
+      this.props.onSelected?.({
+        origin: this.state.selectionBoxOrigin,
+        target: this.state.selectionBoxTarget,
+      });
+    }
+  }
+
+  handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
+    if (this.props.disabled || e.nativeEvent.button !== 0) {
+      return;
+    }
+    clearTimeout(this.animationInProgress);
+    this.animationInProgress = null;
+    this.setState({ selectionBox: false, animation: '' });
+
+    const bb = this.containerRef.current?.getBoundingClientRect();
+    this.setState({
+      hold: true,
+      selectionBoxOrigin: [
+        e.nativeEvent.pageX - bb.x,
+        e.nativeEvent.pageY - bb.y,
+      ],
+      selectionBoxTarget: [
+        e.nativeEvent.pageX - bb.x,
+        e.nativeEvent.pageY - bb.y,
+      ],
+    });
+  }
+
+  private handleMouseMove(evt: React.MouseEvent<HTMLDivElement>) {
+    if (this.state.hold && !this.state.selectionBox) {
+      this.setState({ selectionBox: true });
+    }
+    if (this.state.selectionBox && !this.animationInProgress) {
+      const bb = this.containerRef.current?.getBoundingClientRect();
+      this.setState({
+        selectionBoxTarget: [
+          evt.nativeEvent.pageX - bb?.x,
+          evt.nativeEvent.pageY - bb?.y,
+        ],
+      });
+
+      this.props.onSelecting?.({
+        origin: this.state.selectionBoxOrigin,
+        target: this.state.selectionBoxTarget,
+      });
+    }
+  }
+
+  render() {
+    const baseStyle: React.CSSProperties = {
+      zIndex: 10,
+      left: this.state.selectionBoxOrigin[0],
+      top: this.state.selectionBoxOrigin[1],
+      height: Math.abs(
+        this.state.selectionBoxTarget[1] - this.state.selectionBoxOrigin[1] - 1
+      ),
+      width: Math.abs(
+        this.state.selectionBoxTarget[0] - this.state.selectionBoxOrigin[0] - 1
+      ),
+      userSelect: 'none',
+      transformOrigin: 'top left',
+      transform: this.handleTransformBox(),
+    };
+    const boxVisible =
+      Math.sqrt(
+        Math.pow(
+          this.state.selectionBoxTarget[1] - this.state.selectionBoxOrigin[1],
+          2
+        ) +
+          Math.pow(
+            this.state.selectionBoxTarget[0] - this.state.selectionBoxOrigin[0],
+            2
+          )
+      ) > this.props.minSelectionSize;
+    return (
+      <div
+        ref={this.containerRef}
+        className="bookingCalendar__selection__container"
+        style={{
+          zIndex: this.state.selectionBox ? 99999 : undefined,
+          gridRowEnd: `span ${this.props.dataRowsCount}`,
+        }}
+        onMouseDown={this.handleMouseDown}
+        onMouseUp={this.handleMouseUp}
+        onMouseMove={this.handleMouseMove}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {boxVisible && this.state.selectionBox && (
+          <div
+            className={`bookingCalendar__selection ${this.state.animation}`}
+            style={baseStyle}
+          />
+        )}
+        {this.props.children}
+      </div>
+    );
+  }
+}

package/src/lib/components/bookingCalendar/bookingCalendarTimeAxis/BookingCalendarTimeAxis.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import {
+  BookingCalendarTimeAxisClasses,
+  bookingCalendarTimeAxisDefaultClasses,
+} from './classes';
+import classNames from 'classnames';
+import { GridItem } from '../utils';
+import { Duration } from 'moment';
+import { GetMomentFormatFunctionType } from '..';
+
+export interface BookingCalendarTimeAxisProps
+  extends BookingCalendarTimeAxisClasses {
+  items: GridItem[];
+  bestStep: Duration;
+  getMomentFormatFunction: GetMomentFormatFunctionType;
+}
+
+export function BookingCalendarTimeAxis(props: BookingCalendarTimeAxisProps) {
+  const {
+    className,
+    timeAxisItemClassName,
+    items,
+    getMomentFormatFunction,
+    bestStep,
+  } = props;
+  const svgRef = React.useRef<SVGSVGElement>();
+  return (
+    <svg
+      className={classNames(
+        bookingCalendarTimeAxisDefaultClasses.className,
+        className
+      )}
+      ref={svgRef}
+      height="100"
+    >
+      <g>
+        {items.map((item, key) => (
+          <svg key={key} x={`${item.left * 100}%`}>
+            <text
+              transform="translate(-7) rotate(90)"
+              className={classNames(
+                bookingCalendarTimeAxisDefaultClasses.timeAxisItemClassName,
+                timeAxisItemClassName
+              )}
+            >
+              {item.date.format(getMomentFormatFunction?.(item.date, bestStep))}
+            </text>
+          </svg>
+        ))}
+      </g>
+    </svg>
+  );
+}

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

@@ -0,0 +1,9 @@
+export interface BookingCalendarTimeAxisClasses {
+  className?: string;
+  timeAxisItemClassName?: string;
+}
+
+export const bookingCalendarTimeAxisDefaultClasses: BookingCalendarTimeAxisClasses = {
+  className: 'bookingCalendar__timeAxis',
+  timeAxisItemClassName: 'bookingCalendar__timeAxis__item',
+};

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

@@ -0,0 +1,21 @@
+import { BookingCalendarControlsClasses } from './bookingCalendarControls/classes';
+
+export interface BookingCalendarClasses {
+  className?: string;
+  laneContainerClassName?: string;
+  laneHeaderContainerClassName?: string;
+  lanesHeaderHeaderContainerClassName?: string;
+  lanesHeaderContainerClassName?: string;
+  tableClassName?: string;
+  controlsClasses?: BookingCalendarControlsClasses;
+}
+
+export const bookingCalendarDefaultClasses: BookingCalendarClasses = {
+  className: 'bookingCalendar',
+  laneContainerClassName: 'bookingCalendar__laneContainer',
+  laneHeaderContainerClassName: 'bookingCalendar__laneHeaderContainer',
+  lanesHeaderContainerClassName: 'bookingCalendar__lanesHeaderContainer',
+  lanesHeaderHeaderContainerClassName:
+    'bookingCalendar__lanesHeaderHeaderContainer',
+  tableClassName: 'bookingCalendar__table',
+};

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

@@ -0,0 +1,61 @@
+import moment, { Moment, Duration } from 'moment';
+
+export interface BookingCalendarItemT {
+  from: Moment;
+  till: Moment;
+  /*
+  Optional index that identifies the lane
+  */
+  laneKey?: string | number;
+}
+
+export interface BookingCalendarItemWithOriginalIndexT {
+  originalIndex: number;
+}
+
+export interface BookingCalendarDateRange {
+  from: Moment;
+  till: Moment;
+}
+
+export interface ZoomLevel {
+  step: Duration;
+  label: React.ReactNode;
+}
+
+export const defaultGetMomentFormatFunction = (
+  date: Moment,
+  bestStep: Duration
+) => {
+  if (!date || !bestStep) {
+    return undefined;
+  }
+  if (date.valueOf() === date.clone().startOf('day').valueOf()) {
+    return 'MMM Do';
+  }
+  return 'h:mm a';
+};
+
+export type GetMomentFormatFunctionType = typeof defaultGetMomentFormatFunction;
+
+export const defaultGetNewMomentFunction = (date: Date) => {
+  return moment(date);
+};
+
+export type GetNewMomentFunctionType = typeof defaultGetNewMomentFunction;
+
+export const defaultGridAvailableSteps: Duration[] = [
+  moment.duration(1, 'minute'),
+  moment.duration(5, 'minute'),
+  moment.duration(10, 'minute'),
+  moment.duration(15, 'minute'),
+  moment.duration(20, 'minute'),
+  moment.duration(30, 'minute'),
+  moment.duration(1, 'hour'),
+  moment.duration(2, 'hour'),
+  moment.duration(4, 'hour'),
+  moment.duration(6, 'hour'),
+  moment.duration(8, 'hour'),
+  moment.duration(12, 'hour'),
+  moment.duration(1, 'day'),
+];

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

@@ -0,0 +1,3 @@
+export * from './BookingCalendar';
+export * from './common';
+export * from './classes';