react-timelane 0.0.0

package/src/components/Timeline.scss

@@ -0,0 +1,297 @@
+* {
+  box-sizing: border-box;
+}
+.timeline {
+  --timeline-aside-width: 150px;
+  --timeline-border-color-light: #f0f0f0;
+  --timeline-border-color-normal: lightgray;
+  --timeline-border-color-dark: gray;
+
+  --timeline-highlight-color: #f8f8f8;
+  --timeline-focused-color: rgba(0, 0, 255, 0.1);
+  --timeline-hover-color: rgba(0, 0, 0, 0.05);
+
+  overflow: auto;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-left: 1px solid var(--timeline-border-color-normal);
+
+  .timeline-header {
+    top: 0;
+    z-index: 101;
+    background: white;
+
+    .timeline-header-months {
+      display: flex;
+      flex-flow: row nowrap;
+
+      .timeline-header-month-label {
+        border-right: 1px solid var(--timeline-border-color-normal);
+        border-bottom: 1px solid var(--timeline-border-color-normal);
+        overflow: hidden;
+        font-size: 1em;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        cursor: pointer;
+
+        &:hover {
+          background: var(--timeline-hover-color);
+        }
+      }
+    }
+
+    .timeline-header-weeks {
+      display: flex;
+      flex-flow: row nowrap;
+
+      .timeline-header-week-label {
+        border-right: 1px solid var(--timeline-border-color-normal);
+        border-bottom: 1px solid var(--timeline-border-color-normal);
+        overflow: hidden;
+        font-size: 1em;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        cursor: pointer;
+
+        &:hover {
+          background: var(--timeline-hover-color);
+        }
+      }
+    }
+
+    .timeline-header-days {
+      display: flex;
+      flex-flow: row nowrap;
+
+      .timeline-header-day-label {
+        border-right: 1px solid var(--timeline-border-color-normal);
+        border-bottom: 1px solid var(--timeline-border-color-normal);
+        overflow: hidden;
+        font-size: 0.8em;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        cursor: pointer;
+
+        &:hover {
+          background: var(--timeline-hover-color);
+        }
+
+        &.timeline-header-day-label-focused {
+          background: var(--timeline-focused-color);
+        }
+      }
+    }
+  }
+
+  .timeline-header-corner {
+    z-index: 102;
+    background: white;
+    border-right: 1px solid var(--timeline-border-color-normal);
+    border-bottom: 1px solid var(--timeline-border-color-normal);
+  }
+
+  .timeline-body {
+    z-index: 99;
+    position: relative;
+    width: fit-content;
+
+    .timeline-swimlane {
+      border-color: var(--timeline-border-color-normal) !important;
+      border-top: 1px solid gray;
+      border-bottom: 1px solid gray;
+      margin-top: -1px;
+      overflow: hidden;
+
+      .timeline-drop-target {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .timeline-item {
+          position: absolute;
+          cursor: pointer;
+          border-radius: 3px;
+
+          -webkit-touch-callout: none; /* iOS Safari */
+          -webkit-user-select: none; /* Safari */
+          -khtml-user-select: none; /* Konqueror HTML */
+          -moz-user-select: none; /* Old versions of Firefox */
+          -ms-user-select: none; /* Internet Explorer/Edge */
+          user-select: none; /* Non-prefixed version, currently
+                                      supported by Chrome, Edge, Opera and Firefox */
+          &.timeline-item-marked {
+            .timeline-allocation {
+              border: 2px dashed rgba(0, 0, 0, 0.5);
+            }
+          }
+
+          .timeline-item-drag-handle {
+            height: 100%;
+          }
+
+          .timeline-item-resize-handle {
+            background: #bed7dc;
+            border-radius: 5px;
+            top: 4px !important;
+            bottom: 4px !important;
+            height: auto !important;
+            width: 6px !important;
+            z-index: 2;
+            background: transparent !important;
+            transition: 0.2s;
+
+            &:hover {
+              background: rgba(0, 0, 0, 0.1) !important;
+            }
+
+            &.timeline-item-resize-handle-left {
+              left: 0 !important;
+              margin-left: 1px;
+            }
+            &.timeline-item-resize-handle-right {
+              right: 0 !important;
+            }
+          }
+
+          .timeline-allocation {
+            background: #92a8d1;
+            border-radius: 2px;
+            border: 2px solid transparent;
+            height: calc(100% - 1px);
+            overflow: hidden;
+            cursor: pointer;
+            padding: 0 4px;
+            margin-left: 1px;
+
+            -webkit-touch-callout: none; /* iOS Safari */
+            -webkit-user-select: none; /* Safari */
+            -khtml-user-select: none; /* Konqueror HTML */
+            -moz-user-select: none; /* Old versions of Firefox */
+            -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                      supported by Chrome, Edge, Opera and Firefox */
+
+            container-type: size;
+            container-name: timeline-allocation;
+
+            .timeline-allocation-title {
+              font-weight: bold;
+              transform-origin: top left;
+              // font-size: 20px;
+              line-height: 30px;
+              white-space: nowrap;
+            }
+
+            @container timeline-allocation (max-height: 30px) {
+              .timeline-allocation-title {
+                margin: 0;
+              }
+            }
+
+            &.timeline-allocation-selected {
+              border: 2px dashed rgba(0, 0, 0, 0.5);
+            }
+          }
+
+          &.dragging {
+            opacity: 0;
+          }
+        }
+
+        .timeline-drop-preview {
+          background: blue;
+          position: absolute;
+          border-radius: 2px;
+          color: white;
+        }
+      }
+
+      &.timeline-row-focused {
+        background: var(--timeline-focused-color);
+      }
+    }
+  }
+
+  .timeline-aside {
+    border-right: 1px solid var(--timeline-border-color-normal);
+    width: var(--timeline-aside-width);
+    background: white;
+
+    .timeline-aside-swimlane-header {
+      border: 1px solid var(--timeline-border-color-normal);
+      border-right: none;
+      border-left: none;
+      margin-top: -1px;
+      padding: 10px;
+      overflow: hidden;
+      position: relative;
+      cursor: pointer;
+
+      &.timeline-aside-swimlane-header-focused {
+        background: var(--timeline-focused-color);
+      }
+
+      &:hover {
+        .timeline-aside-resource-menu {
+          opacity: 1;
+        }
+      }
+
+      .timeline-aside-resource-menu {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        opacity: 0;
+        transition: 0.15s;
+
+        &.timeline-aside-resource-menu-open {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .timeline-background {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .timeline-background-inner {
+      display: flex;
+      flex-flow: row nowrap;
+      height: 100%;
+
+      .timeline-background-day-label {
+        border-right: 1px solid var(--timeline-border-color-light);
+        overflow: hidden;
+        font-size: 0.8em;
+        height: 100%;
+        z-index: -100;
+
+        &.timeline-background-day-label-sunday {
+          border-right: 1px solid var(--timeline-border-color-normal);
+        }
+
+        &.timeline-background-day-label-focused {
+          background: var(--timeline-focused-color);
+        }
+      }
+
+      .timeline-background-focused-day-position {
+        position: absolute;
+        height: 100%;
+        background: var(--timeline-focused-color);
+        z-index: -101;
+      }
+    }
+  }
+}
+
+.timeline-header-tooltip,
+.timeline-header-day-tooltip {
+  font-size: 2em;
+}

package/src/components/TimelineAside.tsx

@@ -0,0 +1,81 @@
+import { MouseEvent, PropsWithChildren, ReactElement } from "react";
+import { useTimelineContext } from "../hooks/useTimelineContext";
+import { SwimlaneT } from "../types";
+
+interface TimelineAsideProps {
+  swimlanes: SwimlaneT[];
+  focusedSwimlane?: SwimlaneT | null;
+  setFocusedSwimlane?: (lane: SwimlaneT | null) => void;
+  onSwimlaneHeaderClick?: (lane: SwimlaneT, e: MouseEvent) => void;
+  onSwimlaneHeaderDoubleClick?: (lane: SwimlaneT, e: MouseEvent) => void;
+  onSwimlaneHeaderContextMenu?: (lane: SwimlaneT, e: MouseEvent) => void;
+  renderSwimlaneHeader?: (lane: SwimlaneT) => ReactElement;
+}
+
+export default function TimelineAside({
+  swimlanes,
+  focusedSwimlane,
+  setFocusedSwimlane = () => undefined,
+  onSwimlaneHeaderClick = () => undefined,
+  onSwimlaneHeaderDoubleClick = () => undefined,
+  onSwimlaneHeaderContextMenu = () => undefined,
+  renderSwimlaneHeader = defaultRenderSwimlaneHeader,
+}: TimelineAsideProps) {
+  const { settings } = useTimelineContext();
+
+  return (
+    <div className="timeline-aside">
+      {swimlanes &&
+        swimlanes.map((lane) => (
+          <SwimlaneHeader
+            key={lane.id}
+            height={settings.pixelsPerResource}
+            isFocused={focusedSwimlane ? focusedSwimlane.id === lane.id : false}
+            onClick={(e) => {
+              setFocusedSwimlane(lane);
+              onSwimlaneHeaderClick(lane, e);
+            }}
+            onDoubleClick={(e) => onSwimlaneHeaderDoubleClick(lane, e)}
+            onContextMenu={(e) => onSwimlaneHeaderContextMenu(lane, e)}
+          >
+            {renderSwimlaneHeader(lane)}
+          </SwimlaneHeader>
+        ))}
+    </div>
+  );
+}
+
+interface SwimlaneHeaderProps {
+  height: number;
+  isFocused?: boolean;
+  onClick?: (e: MouseEvent) => void;
+  onDoubleClick?: (e: MouseEvent) => void;
+  onContextMenu?: (e: MouseEvent) => void;
+}
+
+function SwimlaneHeader({
+  height,
+  isFocused,
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+  children,
+}: PropsWithChildren<SwimlaneHeaderProps>) {
+  return (
+    <div
+      className={`timeline-aside-swimlane-header ${
+        isFocused ? "timeline-aside-swimlane-header-focused" : ""
+      }`}
+      style={{ height: `${height}px` }}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
+    >
+      {children}
+    </div>
+  );
+}
+
+function defaultRenderSwimlaneHeader(lane: SwimlaneT) {
+  return <div>{lane.id}</div>;
+}

package/src/components/TimelineBackground.tsx

@@ -0,0 +1,53 @@
+import { eachDayOfInterval, format, isSunday } from "date-fns";
+import { dateToPixel } from "./core/utils";
+import { useTimelineContext } from "../hooks/useTimelineContext";
+
+interface TimelineBackgroundProps {
+  focusedDay?: Date | null;
+}
+
+export default function TimelineBackground({
+  focusedDay,
+}: TimelineBackgroundProps) {
+  const { settings } = useTimelineContext();
+
+  return (
+    <div className="timeline-background">
+      <div className="timeline-background-inner">
+        {focusedDay && (
+          <div
+            className="timeline-background-focused-day-position"
+            style={{
+              width: `${settings.pixelsPerDay}px`,
+              marginLeft: `${
+                dateToPixel(focusedDay, settings.start, settings) -
+                settings.pixelsPerDay / 2
+              }px`,
+            }}
+          ></div>
+        )}
+
+        <div
+          id="timeline-background-date-anchor"
+          style={{
+            position: "absolute",
+            top: 0,
+            width: `1px`,
+            height: "100%",
+          }}
+        ></div>
+
+        {eachDayOfInterval(settings).map((day, index) => (
+          <div
+            key={index}
+            className={`timeline-background-day-label ${
+              isSunday(day) ? "timeline-background-day-label-sunday" : ""
+            } `}
+            style={{ width: `${settings.pixelsPerDay}px` }}
+            data-day={format(day, "yyyy-MM-dd")}
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/TimelineBody.tsx

@@ -0,0 +1,54 @@
+import { MouseEvent, ReactElement } from "react";
+import CoreSwimlane from "./core/CoreSwimlane/CoreSwimlane";
+import { AvailableSpace, CoreItem, SwimlaneT } from "../types";
+
+interface TimelineBodyProps<T> {
+  lanes: SwimlaneT[];
+  items: CoreItem<T>[];
+  renderItem?: (item: CoreItem<T>, isDragged: boolean) => ReactElement;
+  onItemUpdate?: (item: CoreItem<T>) => void;
+  onLaneClick?: (
+    lane: SwimlaneT,
+    when: Date,
+    availableSpace: AvailableSpace | null,
+    e: MouseEvent
+  ) => void;
+  onLaneDoubleClick?: (
+    lane: SwimlaneT,
+    when: Date,
+    availableSpace: AvailableSpace | null,
+    e: MouseEvent
+  ) => void;
+  onLaneContextMenu?: (lane: SwimlaneT, when: Date, e: MouseEvent) => void;
+}
+
+export function TimelineBody<T>({
+  lanes,
+  items,
+  renderItem,
+  onItemUpdate = () => undefined,
+  onLaneClick = () => undefined,
+  onLaneDoubleClick = () => undefined,
+  onLaneContextMenu = () => undefined,
+}: TimelineBodyProps<T>) {
+  return (
+    <div className="timeline-body">
+      {lanes.map((lane) => (
+        <CoreSwimlane<T>
+          key={lane.id}
+          swimlane={lane}
+          items={items.filter((item) => item.swimlaneId === lane.id)}
+          renderItem={renderItem}
+          onItemUpdate={onItemUpdate}
+          onClick={(when, availableSpace, e) =>
+            onLaneClick(lane, when, availableSpace, e)
+          }
+          onDoubleClick={(when, availableSpace, e) =>
+            onLaneDoubleClick(lane, when, availableSpace, e)
+          }
+          onContextMenu={(when, e) => onLaneContextMenu(lane, when, e)}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/TimelineHeader/DaysHeader.tsx

@@ -0,0 +1,44 @@
+import { MouseEvent, ReactElement } from "react";
+import { Pixels, TimeRange } from "../../types";
+import { eachDayOfInterval, isSameDay } from "date-fns";
+import { renderDayHeader } from "./renderingUtils";
+
+interface DaysHeaderProps {
+  range: TimeRange;
+  pixels: Pixels;
+  focusedDay?: Date | null;
+  setFocusedDay?: (day: Date | null) => void;
+  render?: (day: Date) => ReactElement;
+  onDayClick?: (_: { day: Date; e: MouseEvent }) => void;
+}
+
+export function DaysHeader({
+  range,
+  pixels,
+  focusedDay,
+  setFocusedDay = () => {},
+  render = renderDayHeader,
+  onDayClick = () => undefined,
+}: DaysHeaderProps) {
+  return (
+    <div className="timeline-header-days">
+      {eachDayOfInterval(range).map((day, index) => (
+        <div
+          key={index}
+          className={`timeline-header-day-label ${
+            focusedDay && isSameDay(focusedDay, day)
+              ? "timeline-header-day-label-focused"
+              : ""
+          }`}
+          style={{ width: `${pixels.pixelsPerDay}px` }}
+          onClick={(e) => {
+            onDayClick({ day, e });
+            setFocusedDay(day);
+          }}
+        >
+          {render(day)}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/TimelineHeader/MonthsHeader.tsx

@@ -0,0 +1,62 @@
+import { MouseEvent, ReactElement } from "react";
+import { Pixels, TimeRange } from "../../types";
+import {
+  differenceInCalendarDays,
+  eachMonthOfInterval,
+  lastDayOfMonth,
+} from "date-fns";
+import { renderMonthHeader } from "./renderingUtils";
+
+interface MonthsHeaderProps {
+  range: TimeRange;
+  pixels: Pixels;
+  setFocusedDay?: (day: Date | null) => void;
+  render?: (firstDay: Date, lastDay: Date) => ReactElement;
+  onMonthClick?: (params: {
+    firstDay: Date;
+    lastDay: Date;
+    e: MouseEvent;
+  }) => void;
+}
+
+export function MonthsHeader({
+  range,
+  pixels,
+  setFocusedDay = () => {},
+  render = renderMonthHeader,
+  onMonthClick = () => undefined,
+}: MonthsHeaderProps) {
+  return (
+    <div className="timeline-header-months">
+      {eachMonthOfInterval(range).map((firstDay, index) => {
+        if (firstDay < range.start) {
+          firstDay = range.start;
+        }
+
+        let lastDay = lastDayOfMonth(firstDay);
+
+        if (lastDay > range.end) {
+          lastDay = range.end;
+        }
+
+        const numberOfDays = differenceInCalendarDays(lastDay, firstDay) + 1;
+
+        return (
+          <div
+            key={index}
+            className="timeline-header-month-label"
+            style={{
+              width: `${pixels.pixelsPerDay * numberOfDays}px`,
+            }}
+            onClick={(e) => {
+              onMonthClick({ firstDay, lastDay, e });
+              setFocusedDay(firstDay);
+            }}
+          >
+            {render(firstDay, lastDay)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/TimelineHeader/TimelineHeader.tsx

@@ -0,0 +1,64 @@
+import { MouseEvent, ReactElement } from "react";
+import { MonthsHeader } from "./MonthsHeader";
+import { WeeksHeader } from "./WeeksHeader";
+import { DaysHeader } from "./DaysHeader";
+import { useTimelineContext } from "../../hooks/useTimelineContext";
+
+interface TimelineHeaderProps {
+  focusedDay?: Date | null;
+  setFocusedDay?: (day: Date | null) => void;
+
+  renderMonthHeader?: (firstDay: Date, lastDay: Date) => ReactElement;
+  renderWeekHeader?: (firstDay: Date, lastDay: Date) => ReactElement;
+  renderDayHeader?: (day: Date) => ReactElement;
+
+  onMonthClick?: (_: { firstDay: Date; lastDay: Date; e: MouseEvent }) => void;
+  onWeekClick?: (_: { firstDay: Date; lastDay: Date; e: MouseEvent }) => void;
+  onDayClick?: (_: { day: Date; e: MouseEvent }) => void;
+}
+
+export function TimelineHeader({
+  focusedDay,
+  setFocusedDay = () => {},
+  renderMonthHeader,
+  renderWeekHeader,
+  renderDayHeader,
+  onMonthClick,
+  onDayClick,
+  onWeekClick,
+}: TimelineHeaderProps) {
+  const { settings } = useTimelineContext();
+
+  return (
+    <div className="timeline-header">
+      {settings.showMonths && (
+        <MonthsHeader
+          range={settings}
+          pixels={settings}
+          setFocusedDay={setFocusedDay}
+          render={renderMonthHeader}
+          onMonthClick={onMonthClick}
+        />
+      )}
+      {settings.showWeeks && (
+        <WeeksHeader
+          range={settings}
+          pixels={settings}
+          setFocusedDay={setFocusedDay}
+          render={renderWeekHeader}
+          onWeekClick={onWeekClick}
+        />
+      )}
+      {settings.showDays && (
+        <DaysHeader
+          range={settings}
+          pixels={settings}
+          focusedDay={focusedDay}
+          setFocusedDay={setFocusedDay}
+          render={renderDayHeader}
+          onDayClick={onDayClick}
+        />
+      )}
+    </div>
+  );
+}