react-timelane 0.0.0

package/src/global.d.ts

@@ -0,0 +1,9 @@
+declare module "*.scss" {
+  const content: Record<string, string>;
+  export default content;
+}
+
+declare module "*.css" {
+  const content: Record<string, string>;
+  export default content;
+}

package/src/hooks/useScroll.tsx

@@ -0,0 +1,71 @@
+import { ItemId, SwimlaneId } from "../types";
+import { useTimelineContext } from "./useTimelineContext";
+import { dateToPixel } from "../components/core/utils";
+
+export const useScroll = () => {
+  const { settings } = useTimelineContext();
+
+  function scrollTo(destination: { horz?: Date; vert?: SwimlaneId } | ItemId) {
+    if (destination instanceof Object) {
+      if (destination.horz !== undefined) {
+        scrollToDate(destination.horz);
+      }
+
+      if (destination.vert !== undefined) {
+        scrollToLane(destination.vert);
+      }
+    } else {
+      scrollToItem(destination);
+    }
+  }
+
+  function scrollToDate(date: Date) {
+    window.requestAnimationFrame(() => {
+      const el: HTMLElement | null = document.getElementById(
+        "timeline-background-date-anchor"
+      );
+
+      if (el) {
+        const offsetLeft: number = dateToPixel(date, settings.start, settings);
+
+        el.style.setProperty("left", `${offsetLeft}px`);
+
+        el.scrollIntoView({
+          block: "nearest",
+          inline: "center",
+          behavior: "smooth",
+        });
+      }
+    });
+  }
+
+  function scrollToLane(laneId: SwimlaneId) {
+    window.requestAnimationFrame(() => {
+      const el: HTMLElement | null = document.getElementById(
+        `timeline-swimlane-${laneId}`
+      );
+
+      if (el) {
+        el.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    });
+  }
+
+  function scrollToItem(itemId: ItemId) {
+    window.requestAnimationFrame(() => {
+      const el: HTMLElement | null = document.getElementById(
+        `timeline-item-${itemId}`
+      );
+
+      if (el) {
+        el.scrollIntoView({
+          block: "center",
+          inline: "center",
+          behavior: "smooth",
+        });
+      }
+    });
+  }
+
+  return { scrollTo, scrollToDate, scrollToItem, scrollToLane };
+};

package/src/hooks/useTimelineContext.tsx

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { TimelineSettingsContext } from "../components/TimelineSettingsContext";
+
+export const useTimelineContext = () => {
+  return useContext(TimelineSettingsContext);
+};

package/src/index.ts

@@ -0,0 +1,15 @@
+export { default as TimelineLayout } from "./components/layout/TimelineLayout";
+export { default as TimelineAside } from "./components/TimelineAside";
+export { default as TimelineBackground } from "./components/TimelineBackground";
+export * from "./components/TimelineHeader";
+export { default as TimelineWrapper } from "./components/TimelineWrapper";
+export { default as CoreSwimlane } from "./components/core/CoreSwimlane/CoreSwimlane";
+export { TimelineBody } from "./components/TimelineBody";
+export { TimelineSelectionLayer } from "./components/TimelineSelectionLayer";
+
+export * from "./types";
+export * from "./components/core/utils";
+export * from "./components/core/CoreSwimlane/utils";
+
+export { useScroll } from "./hooks/useScroll";
+export { useTimelineContext } from "./hooks/useTimelineContext";

package/src/types/AvailableSpace.ts

@@ -0,0 +1,6 @@
+export interface AvailableSpace {
+  start: Date;
+  end: Date;
+  minOffset: number;
+  maxOffset: number;
+}

package/src/types/CoreItem.ts

@@ -0,0 +1,23 @@
+import { ItemId } from "./ItemId";
+import { SwimlaneId } from "./SwimlaneId";
+
+export type CoreItem<T = void> = {
+  id: ItemId;
+  swimlaneId: SwimlaneId;
+  start: Date;
+  end: Date;
+  size: number;
+  offset: number;
+  payload: T;
+};
+
+export function isCoreItem(a: object): a is CoreItem {
+  return (
+    "id" in a &&
+    "swimlaneId" in a &&
+    "start" in a &&
+    "end" in a &&
+    "size" in a &&
+    "offset" in a
+  );
+}

package/src/types/DateBounds.ts

@@ -0,0 +1,4 @@
+export interface DateBounds {
+  lower: Date;
+  upper: Date;
+}

package/src/types/Dimensions.ts

@@ -0,0 +1,4 @@
+export interface Dimensions {
+  width: number;
+  height: number;
+}

package/src/types/GrabInfo.ts

@@ -0,0 +1,6 @@
+import { Position } from "./Position";
+
+export interface GrabInfo {
+  absolute: Position;
+  relative: Position;
+}

package/src/types/Grid.ts

@@ -0,0 +1,6 @@
+export interface Grid {
+  x?: number;
+  y?: number;
+  offsetX?: number;
+  offsetY?: number;
+}

package/src/types/ItemId.ts

@@ -0,0 +1 @@
+export type ItemId = number;

package/src/types/OffsetBounds.ts

@@ -0,0 +1,4 @@
+export interface OffsetBounds {
+  lower: number;
+  upper: number;
+}

package/src/types/Pixels.ts

@@ -0,0 +1,4 @@
+export interface Pixels {
+  pixelsPerDay: number;
+  pixelsPerResource: number;
+}

package/src/types/Position.ts

@@ -0,0 +1,4 @@
+export interface Position {
+  x: number;
+  y: number;
+}

package/src/types/Rectangle.ts

@@ -0,0 +1,6 @@
+export interface Rectangle {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}

package/src/types/SwimlaneId.ts

@@ -0,0 +1 @@
+export type SwimlaneId = number;

package/src/types/SwimlaneT.ts

@@ -0,0 +1,6 @@
+import { SwimlaneId } from "./SwimlaneId";
+
+export interface SwimlaneT {
+  id: SwimlaneId;
+  capacity: number;
+}

package/src/types/TimeRange.ts

@@ -0,0 +1,4 @@
+export interface TimeRange {
+  start: Date;
+  end: Date;
+}

package/src/types/TimelineSettings.ts

@@ -0,0 +1,11 @@
+export interface TimelineSettings {
+  start: Date;
+  end: Date;
+  pixelsPerDay: number;
+  pixelsPerResource: number;
+  showMonths: boolean;
+  showWeeks: boolean;
+  showDays: boolean;
+  allowOverlaps: boolean;
+  focusedDate: Date | null;
+}

package/src/types/index.ts

@@ -0,0 +1,15 @@
+export { type TimeRange } from "./TimeRange";
+export { type Pixels } from "./Pixels";
+export { type Rectangle } from "./Rectangle";
+export { type Position } from "./Position";
+export { type Grid } from "./Grid";
+export { type ItemId } from "./ItemId";
+export { type AvailableSpace } from "./AvailableSpace";
+export { type CoreItem, isCoreItem } from "./CoreItem";
+export { type Dimensions } from "./Dimensions";
+export { type GrabInfo } from "./GrabInfo";
+export { type SwimlaneId } from "./SwimlaneId";
+export { type SwimlaneT } from "./SwimlaneT";
+export { type DateBounds } from "./DateBounds";
+export { type OffsetBounds } from "./OffsetBounds";
+export { type TimelineSettings } from "./TimelineSettings";

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports": true,
+    "allowArbitraryExtensions": true,
+    "allowJs": true,
+    "isolatedModules": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": false,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"],
+  "exclude": ["docs"]
+}

package/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+// import vitePluginSass from "vite-plugin-sass";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    // vitePluginSass(),
+    dts({ include: ["src"] }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: ["react", "react/jsx-runtime"],
+    },
+  },
+  // css: {
+  //   preprocessorOptions: {
+  //     scss: {
+  //       additionalData: `
+  //         @import "TimelineV3/layout/layout.scss";
+  //       `,
+  //     },
+  //   },
+  // },
+});