react-timelane 0.0.0 → 0.0.2

package/src/components/Timeline.scss

@@ -1,297 +0,0 @@
-* {
-  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

@@ -1,81 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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>
-  );
-}