react-timelane 1.2.0 → 1.2.2

package/dist/components/TimelaneItem/DragResizeComponent.js

@@ -0,0 +1,125 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as x, useState as v, useEffect as z } from "react";
+import b from "../../node_modules/tiny-invariant/dist/esm/tiny-invariant.js";
+import { draggable as D } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
+import { getGrabPosition as I } from "../utils.js";
+import { Resizable as C } from "../../node_modules/re-resizable/lib/index.js";
+import { useTimelaneContext as P } from "../../hooks/useTimelaneContext.js";
+function k({
+  item: n,
+  rectangle: e,
+  boundingRectangle: d,
+  children: R,
+  onDrag: g,
+  onDragStart: p,
+  onDrop: w,
+  onUpdate: y,
+  onResizeStart: $
+}) {
+  const { settings: o } = P(), r = x(null), l = x(null), [s, u] = v(e);
+  return z(() => {
+    u(e);
+  }, [e]), z(() => (b(r.current), b(l.current), D({
+    element: r.current,
+    dragHandle: l.current,
+    onDragStart: ({ source: m, location: i }) => {
+      const a = I(m, i);
+      p(a.absolute, a.relative);
+    },
+    onDrag: () => {
+      g();
+    },
+    onDrop: () => {
+      w();
+    },
+    getInitialData: () => ({ ...n }),
+    canDrag: () => o.enableItemDragging
+  })), [o.enableItemDragging, n, g, p, w]), /* @__PURE__ */ f(
+    "div",
+    {
+      id: `timelane-item-${n.id}`,
+      className: "timelane-item",
+      "data-timelane-item-id": n.id,
+      ref: r,
+      style: {
+        width: `${s.width}px`,
+        height: `${s.height}px`,
+        minWidth: `${s.width}px`,
+        minHeight: `${s.height}px`,
+        maxWidth: `${s.width}px`,
+        maxHeight: `${s.height}px`,
+        top: `${s.y}px`,
+        left: `${s.x}px`
+      },
+      onMouseDown: (m) => {
+        m.stopPropagation();
+      },
+      onClick: (m) => {
+        m.stopPropagation();
+      },
+      children: /* @__PURE__ */ f(
+        C,
+        {
+          enable: o.enableItemResizing === !0 ? void 0 : o.enableItemResizing,
+          handleClasses: {
+            left: "timelane-item-resize-handle timelane-item-resize-handle-left",
+            right: "timelane-item-resize-handle timelane-item-resize-handle-right"
+          },
+          size: {
+            width: s.width,
+            height: s.height
+          },
+          onResizeStart: () => {
+            $();
+          },
+          onResize: (m, i, a, t) => {
+            u((h) => i === "right" ? {
+              ...h,
+              width: e.width + t.width
+            } : i === "left" ? {
+              ...h,
+              x: e.x - t.width,
+              width: e.width + t.width
+            } : i === "bottom" ? {
+              ...h,
+              height: Math.min(
+                e.height + t.height,
+                d.height - e.y
+              )
+            } : i === "top" ? {
+              ...h,
+              y: e.y - t.height,
+              height: e.height + t.height
+            } : h);
+          },
+          onResizeStop: (m, i, a, t) => {
+            let h = e;
+            i === "right" ? h = {
+              ...e,
+              width: e.width + t.width
+            } : i === "left" ? h = {
+              ...e,
+              x: e.x - t.width,
+              width: e.width + t.width
+            } : i === "bottom" ? h = {
+              ...e,
+              height: Math.min(
+                e.height + t.height,
+                d.height - e.y
+              )
+            } : i === "top" && (h = {
+              ...e,
+              y: e.y - t.height,
+              height: e.height + t.height
+            }), y(h);
+          },
+          style: { overflow: "hidden" },
+          children: /* @__PURE__ */ f("div", { className: "timelane-item-drag-handle", ref: l, children: R })
+        }
+      )
+    }
+  );
+}
+export {
+  k as default
+};

package/dist/components/TimelaneItem/TimelaneItem.js

@@ -0,0 +1,42 @@
+import { jsx as I } from "react/jsx-runtime";
+import l from "./DragResizeComponent.js";
+import { getItemRectangle as D, getDropTargetDimensions as R, getUpdatedItem as i } from "../utils.js";
+function b({
+  lane: o,
+  item: r,
+  settings: e,
+  children: t,
+  onDragStart: m,
+  onDrag: n,
+  onDrop: a,
+  onUpdate: p,
+  onResizeStart: c
+}) {
+  const d = D(r, o, e, e), f = R(o, e, e);
+  return /* @__PURE__ */ I(
+    l,
+    {
+      item: r,
+      rectangle: d,
+      boundingRectangle: f,
+      onDrag: n,
+      onDragStart: m,
+      onDrop: a,
+      onUpdate: (u) => {
+        const g = i(
+          r,
+          o,
+          u,
+          e,
+          e
+        );
+        p(g);
+      },
+      onResizeStart: c,
+      children: t
+    }
+  );
+}
+export {
+  b as default
+};

package/dist/components/TimelaneLane/DropPreview.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+function a({
+  x: e,
+  y: t,
+  width: p,
+  height: r,
+  children: i
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: "timelane-drop-preview",
+      style: {
+        left: `${e}px`,
+        top: `${t}px`,
+        width: `${p}px`,
+        height: `${r}px`
+      },
+      children: i
+    }
+  );
+}
+export {
+  a as default
+};

package/dist/components/TimelaneLane/DropTarget.js

@@ -0,0 +1,57 @@
+import { jsx as c } from "react/jsx-runtime";
+import { dropTargetForElements as P } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
+import { useRef as l, useEffect as v } from "react";
+import b from "../../node_modules/tiny-invariant/dist/esm/tiny-invariant.js";
+import { getGrabPosition as s } from "../utils.js";
+function y({
+  children: n,
+  onDragStart: a = () => {
+  },
+  onDrag: g = () => {
+  },
+  onDrop: p = () => {
+  },
+  onDragEnter: u = () => {
+  },
+  onDragLeave: m = () => {
+  }
+}) {
+  const d = l(null);
+  return v(() => {
+    const f = d.current;
+    return b(f), P({
+      element: f,
+      getData: () => ({ drop: "drop" }),
+      onDragStart: ({ source: t, location: e }) => {
+        const r = i(e), o = s(t, e);
+        a(r, o, t.data);
+      },
+      onDragEnter: ({ source: t, location: e }) => {
+        const r = i(e), o = s(t, e);
+        u(r, o, t.data);
+      },
+      onDrag: ({ source: t, location: e }) => {
+        const r = i(e), o = s(t, e);
+        g(r, o, t.data);
+      },
+      onDrop: ({ source: t, location: e }) => {
+        const r = i(e), o = s(t, e);
+        p(r, o, t.data);
+      },
+      onDragLeave: ({ source: t, location: e }) => {
+        const r = s(t, e);
+        m(r, t.data);
+      }
+    });
+  }, [g, m, a, p, u]), /* @__PURE__ */ c("div", { className: "timelane-drop-target", ref: d, children: n });
+}
+function i(n) {
+  const a = n.current.dropTargets[0].element.getBoundingClientRect();
+  return {
+    x: n.current.input.pageX - a.x,
+    y: n.current.input.pageY - a.y
+  };
+}
+export {
+  y as default
+};

package/dist/components/TimelaneLane/OverlapIndicator.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+function e({ overlap: t }) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: `${t.x}px`,
+        top: `${t.y}px`,
+        width: `${t.width - 1}px`,
+        height: `${t.height - 1}px`,
+        background: "rgba(255,0,0, 0.3)",
+        marginLeft: "1px",
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+export {
+  e as default
+};

package/dist/components/TimelaneLane/TimelaneLane.js

@@ -0,0 +1,164 @@
+import { jsx as d, jsxs as x } from "react/jsx-runtime";
+import X from "./DropTarget.js";
+import $ from "./DropPreview.js";
+import { useState as P } from "react";
+import { getDropTargetDimensions as z, getItemRectangle as A, getOverlap as H, getAvailableSpace as N, getUpdatedItem as U, getDropPreviewRectangle as q } from "../utils.js";
+import F from "../TimelaneItem/TimelaneItem.js";
+import G from "./OverlapIndicator.js";
+import { useTimelaneContext as J } from "../../hooks/useTimelaneContext.js";
+import { isItem as R } from "../../types/Item.js";
+import { formatDate as h } from "../../node_modules/date-fns/format.js";
+import { setHours as K } from "../../node_modules/date-fns/setHours.js";
+import { addDays as Q } from "../../node_modules/date-fns/addDays.js";
+function ce({
+  id: o,
+  capacity: i = 100,
+  items: s = [],
+  focused: I = !1,
+  onItemUpdate: m = () => {
+  },
+  onMouseUp: w = () => {
+  },
+  onClick: C = () => {
+  },
+  onDoubleClick: O = () => {
+  },
+  onContextMenu: T = () => {
+  },
+  renderItem: b = V,
+  onResizeStart: k = () => {
+  }
+}) {
+  const l = { id: o, capacity: i }, { settings: n } = J(), S = {
+    x: n.pixelsPerDay,
+    offsetX: n.pixelsPerDay / 2
+  }, M = z(l, n, n), [p, u] = P(null), [c, f] = P(
+    null
+  );
+  function g(e) {
+    const t = e.currentTarget.getBoundingClientRect();
+    return K(
+      Q(
+        n.start,
+        (e.clientX - t.left) / n.pixelsPerDay
+      ),
+      12
+    );
+  }
+  function L(e) {
+    const t = e.currentTarget.getBoundingClientRect();
+    return (e.pageY - t.top) / t.height * i;
+  }
+  function Y(e, t, r) {
+    if (!R(r)) return;
+    const a = q(
+      l,
+      s,
+      r,
+      e,
+      t,
+      n,
+      S,
+      n,
+      n.allowOverlaps
+    );
+    f(a);
+  }
+  function j(e, t, r) {
+    if (!R(r) || c === null) return;
+    const a = U(
+      r,
+      l,
+      c,
+      n,
+      n
+    );
+    m(a), f(null);
+  }
+  function B() {
+    f(null);
+  }
+  function D(e, t) {
+    const r = g(e), a = L(e), y = N(
+      r,
+      a,
+      l,
+      s,
+      n
+    );
+    t == "single" ? C(r, y, e) : O(r, y, e);
+  }
+  const v = s.map((e) => ({
+    id: e.id,
+    ...A(e, l, n, n)
+  })), E = v.flatMap(
+    (e) => v.map((t) => e.id < t.id ? H(e, t) : null)
+  ).filter((e) => e !== null);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      id: `timelane-lane-${o}`,
+      className: `timelane-lane ${I ? "timelane-lane-focused" : ""}`,
+      "data-timelane-lane-id": o,
+      style: M,
+      onMouseUp: w,
+      onClick: (e) => D(e, "single"),
+      onDoubleClick: (e) => D(e, "double"),
+      onContextMenu: (e) => {
+        T(g(e), e);
+      },
+      children: /* @__PURE__ */ x(
+        X,
+        {
+          onDrag: Y,
+          onDragLeave: B,
+          onDrop: j,
+          children: [
+            s.map((e, t) => /* @__PURE__ */ d(
+              F,
+              {
+                item: e,
+                settings: n,
+                lane: l,
+                onDragStart: () => {
+                  u(e);
+                },
+                onDrag: () => {
+                },
+                onDrop: () => {
+                  u(null);
+                },
+                onUpdate: m,
+                onResizeStart: () => {
+                  k(e.payload);
+                },
+                children: b(
+                  e,
+                  p !== null && p.id === e.id
+                )
+              },
+              t
+            )),
+            c && /* @__PURE__ */ d($, { ...c }),
+            E.map((e, t) => /* @__PURE__ */ d(G, { overlap: e }, t))
+          ]
+        }
+      )
+    }
+  );
+}
+function V(o, i) {
+  return /* @__PURE__ */ x("div", { children: [
+    o.id,
+    " (",
+    h(o.start, "yyyy-mm-dd"),
+    " -",
+    " ",
+    h(o.end, "yyyy-mm-dd"),
+    ")",
+    i ? "dragging" : ""
+  ] });
+}
+export {
+  ce as TimelaneLane
+};

package/dist/components/TimelaneLayout/TimelaneLayout.js

@@ -0,0 +1,77 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as r } from "react";
+import './layout.css';/* empty css            */
+function l({ children: e }) {
+  const o = r(null);
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "timelane-layout",
+      onWheel: (t) => {
+        o.current && (t.ctrlKey || t.shiftKey) && (o.current.scrollLeft += t.deltaY, t.preventDefault());
+      },
+      ref: o,
+      children: /* @__PURE__ */ a("div", { className: "timelane-layout-inner", children: e })
+    }
+  );
+}
+function n({ children: e }) {
+  return /* @__PURE__ */ a("div", { className: "timelane-layout-header", children: e });
+}
+function i({ children: e }) {
+  return /* @__PURE__ */ a("div", { className: "timelane-layout-background", children: e });
+}
+function u({ children: e }) {
+  return /* @__PURE__ */ a("div", { className: "timelane-layout-body", children: e });
+}
+function m({ children: e }) {
+  return /* @__PURE__ */ a("div", { className: "timelane-layout-footer", children: e });
+}
+function c({
+  side: e = "left",
+  children: o
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `timelane-layout-aside ${e == "left" ? "timelane-layout-aside-left" : "timelane-layout-aside-right"}`,
+      children: o
+    }
+  );
+}
+function s({
+  corner: e = "top left",
+  children: o
+}) {
+  let t = "";
+  switch (e) {
+    case "top left":
+      t = "timelane-layout-corner-top-left";
+      break;
+    case "top right":
+      t = "timelane-layout-corner-top-right";
+      break;
+    case "bottom left":
+      t = "timelane-layout-corner-bottom-left";
+      break;
+    case "bottom right":
+      t = "timelane-layout-corner-bottom-right";
+      break;
+  }
+  return /* @__PURE__ */ a("div", { className: `timelane-layout-corner ${t}`, children: o });
+}
+l.Header = n;
+l.Body = u;
+l.Background = i;
+l.Footer = m;
+l.Aside = c;
+l.Corner = s;
+export {
+  l as TimelaneLayout,
+  c as TimelaneLayoutAside,
+  i as TimelaneLayoutBackground,
+  u as TimelaneLayoutBody,
+  s as TimelaneLayoutCorner,
+  m as TimelaneLayoutFooter,
+  n as TimelaneLayoutHeader
+};

package/dist/components/TimelaneLayout/layout.css

@@ -0,0 +1 @@
+:root{--border: 1px solid lightgray}.timelane-layout{position:relative;width:100%;height:100%;overflow:auto;border:var(--border)}.timelane-layout .timelane-layout-inner{position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:"corner-tl header corner-tr" "aside-l body aside-r" "corner-bl footer corner-br"}.timelane-layout .timelane-layout-inner .timelane-layout-header,.timelane-layout .timelane-layout-inner .timelane-layout-footer,.timelane-layout .timelane-layout-inner .timelane-layout-aside,.timelane-layout .timelane-layout-inner .timelane-layout-corner{background:#fff}.timelane-layout .timelane-layout-inner .timelane-layout-header{grid-area:header;position:sticky;position:-webkit-sticky;top:0;z-index:101;border-bottom:var(--border)}.timelane-layout .timelane-layout-inner .timelane-layout-body{grid-area:body;z-index:100}.timelane-layout .timelane-layout-inner .timelane-layout-background{grid-area:body;z-index:-1}.timelane-layout .timelane-layout-inner .timelane-layout-footer{grid-area:footer;position:sticky;position:-webkit-sticky;bottom:0;z-index:101;border-top:var(--border)}.timelane-layout .timelane-layout-inner .timelane-layout-aside{grid-area:aside-l;justify-self:stretch;position:sticky;position:-webkit-sticky;left:0;z-index:101;border-right:var(--border)}.timelane-layout .timelane-layout-inner .timelane-layout-aside.timelane-layout-aside-right{grid-area:aside-r;right:0;left:initial;border-left:var(--border);border-right:none}.timelane-layout .timelane-layout-inner .timelane-layout-corner{position:sticky;position:-webkit-sticky;z-index:102}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-left{grid-area:corner-tl;top:0;left:0;border-bottom:var(--border);border-right:var(--border)}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-right{grid-area:corner-tr;top:0;right:0;border-bottom:var(--border);border-left:var(--border)}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-left{grid-area:corner-bl;bottom:0;left:0;border-top:var(--border);border-right:var(--border)}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-right{grid-area:corner-br;bottom:0;right:0;border-top:var(--border);border-left:var(--border)}

package/dist/components/TimelaneSettingsProvider/TimelaneSettingsContext.js

@@ -0,0 +1,21 @@
+import { createContext as e } from "react";
+const t = {
+  start: new Date(2025, 1, 1),
+  end: new Date(2025, 5, 1),
+  pixelsPerDay: 30,
+  pixelsPerLane: 100,
+  showMonths: !0,
+  showWeeks: !0,
+  showDays: !0,
+  allowOverlaps: !0,
+  focusedDate: null,
+  enableItemDragging: !0,
+  enableItemResizing: !0
+}, n = {
+  settings: t,
+  setSettings: () => {
+  }
+}, a = e(n);
+export {
+  a as TimelaneSettingsContext
+};

package/dist/components/TimelaneSettingsProvider/TimelaneSettingsProvider.js

@@ -0,0 +1,15 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useState as m, useEffect as s } from "react";
+import { TimelaneSettingsContext as f } from "./TimelaneSettingsContext.js";
+function S({
+  settings: t,
+  children: r
+}) {
+  const [o, e] = m(t);
+  return s(() => {
+    e((i) => ({ ...i, ...t }));
+  }, [t]), /* @__PURE__ */ n(f.Provider, { value: { settings: o, setSettings: e }, children: r });
+}
+export {
+  S as TimelaneSettingsProvider
+};