react-timelane 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +141 -51
- package/dist/components/TimelaneLane/AvailableSpaceIndicator.d.ts +2 -2
- package/dist/components/TimelaneLane/TimelaneLane.d.ts +2 -2
- package/dist/components/TimelaneWrapper.d.ts +1 -1
- package/dist/components/utils.d.ts +3 -3
- package/dist/react-timelane.css +1 -1
- package/dist/react-timelane.js +9 -13
- package/dist/types/Item.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,54 +1,144 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
...tseslint.configs.stylisticTypeChecked,
|
|
23
|
-
],
|
|
24
|
-
languageOptions: {
|
|
25
|
-
// other options...
|
|
26
|
-
parserOptions: {
|
|
27
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
28
|
-
tsconfigRootDir: import.meta.dirname,
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
})
|
|
1
|
+
# react-timelane
|
|
2
|
+
|
|
3
|
+
A React/TypeScript library to build timelines / horizontally scrollable calendars with multiple lanes.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
react-timelane has a particular focus on usability and comes with many neat features:
|
|
8
|
+
|
|
9
|
+
- item drag and drop
|
|
10
|
+
- item resizing
|
|
11
|
+
- jump (scroll) to point in time, lane or item
|
|
12
|
+
- item selection via mouse range
|
|
13
|
+
|
|
14
|
+
## Demo
|
|
15
|
+
|
|
16
|
+
https://dhansmair.github.io/react-timelane
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install react-timelane
|
|
32
22
|
```
|
|
33
23
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
import
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
24
|
+
## Code Example
|
|
25
|
+
|
|
26
|
+
see `docs/src/components/MyTimelane.tsx` for the full example:
|
|
27
|
+
|
|
28
|
+
```typescript
|
|
29
|
+
import { addDays, min } from "date-fns";
|
|
30
|
+
import { useState, type MouseEvent } from "react";
|
|
31
|
+
import {
|
|
32
|
+
type AvailableSpace,
|
|
33
|
+
type Lane,
|
|
34
|
+
type Item,
|
|
35
|
+
type ItemId,
|
|
36
|
+
type TimelaneSettings,
|
|
37
|
+
TimelaneSettingsProvider,
|
|
38
|
+
useScroll,
|
|
39
|
+
} from "react-timelane";
|
|
40
|
+
import type Allocation from "../models/Allocation";
|
|
41
|
+
import type Resource from "../models/Resource";
|
|
42
|
+
import AllocationComponent from "./AllocationComponent";
|
|
43
|
+
|
|
44
|
+
import { Timelane as TL } from "react-timelane";
|
|
45
|
+
|
|
46
|
+
const defaultSettings: TimelaneSettings = {
|
|
47
|
+
showMonths: true,
|
|
48
|
+
showWeeks: true,
|
|
49
|
+
showDays: true,
|
|
50
|
+
start: new Date(2025, 3, 1),
|
|
51
|
+
end: new Date(2025, 6, 2),
|
|
52
|
+
pixelsPerDay: 50,
|
|
53
|
+
pixelsPerResource: 100,
|
|
54
|
+
allowOverlaps: false,
|
|
55
|
+
focusedDate: null,
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
interface MyTimelaneProps {
|
|
59
|
+
resources: Resource[];
|
|
60
|
+
allocations: Allocation[];
|
|
61
|
+
onAllocationCreate: (allocation: Allocation) => void;
|
|
62
|
+
onAllocationUpdate: (allocation: Allocation) => void;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function MyTimelane({
|
|
66
|
+
resources,
|
|
67
|
+
allocations,
|
|
68
|
+
onAllocationCreate,
|
|
69
|
+
onAllocationUpdate,
|
|
70
|
+
}: MyTimelaneProps) {
|
|
71
|
+
const [selection, setSelection] = useState<ItemId[]>([]);
|
|
72
|
+
|
|
73
|
+
const lanes: Lane[] = resources.map((resource) => ({
|
|
74
|
+
id: resource.id,
|
|
75
|
+
capacity: resource.capacity,
|
|
76
|
+
}));
|
|
77
|
+
|
|
78
|
+
const items: Item<Allocation>[] = allocations.map((allocation) => ({
|
|
79
|
+
id: allocation.id,
|
|
80
|
+
laneId: allocation.resourceId,
|
|
81
|
+
start: allocation.start,
|
|
82
|
+
end: allocation.end,
|
|
83
|
+
size: allocation.size,
|
|
84
|
+
offset: allocation.offset,
|
|
85
|
+
payload: allocation,
|
|
86
|
+
}));
|
|
87
|
+
|
|
88
|
+
function handleItemUpdate(item: Item<Allocation>) {
|
|
89
|
+
const updatedAllocation: Allocation = {
|
|
90
|
+
...item.payload,
|
|
91
|
+
resourceId: item.laneId,
|
|
92
|
+
start: item.start,
|
|
93
|
+
end: item.end,
|
|
94
|
+
size: item.size,
|
|
95
|
+
offset: item.offset,
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
onAllocationUpdate(updatedAllocation);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<TL.Container>
|
|
103
|
+
<TL.Header
|
|
104
|
+
onDayClick={({ day }) => {
|
|
105
|
+
console.log("day clicked", day);
|
|
106
|
+
}}
|
|
107
|
+
onMonthClick={({ firstDay }) => {
|
|
108
|
+
console.log("month clicked", firstDay);
|
|
109
|
+
}}
|
|
110
|
+
onWeekClick={({ firstDay }) => {
|
|
111
|
+
console.log("week clicked", firstDay);
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
<TL.Body
|
|
115
|
+
onSelect={(selection) => {
|
|
116
|
+
setSelection(selection);
|
|
117
|
+
}}
|
|
118
|
+
>
|
|
119
|
+
{lanes.map((lane) => (
|
|
120
|
+
<TL.Lane
|
|
121
|
+
key={lane.id}
|
|
122
|
+
lane={lane}
|
|
123
|
+
items={items.filter((item) => item.laneId === lane.id)}
|
|
124
|
+
onItemUpdate={handleItemUpdate}
|
|
125
|
+
renderItem={(item, isDragged) => (
|
|
126
|
+
<AllocationComponent
|
|
127
|
+
allocation={item.payload}
|
|
128
|
+
isDragged={isDragged}
|
|
129
|
+
isSelected={selection.includes(item.id)}
|
|
130
|
+
/>
|
|
131
|
+
)}
|
|
132
|
+
/>
|
|
133
|
+
))}
|
|
134
|
+
</TL.Body>
|
|
135
|
+
<TL.Background />
|
|
136
|
+
<TL.Aside
|
|
137
|
+
lanes={lanes}
|
|
138
|
+
renderLaneHeader={(lane) => <div>{lane.id}</div>}
|
|
139
|
+
/>
|
|
140
|
+
<TL.Layout.Corner />
|
|
141
|
+
</TL.Container>
|
|
142
|
+
);
|
|
143
|
+
}
|
|
54
144
|
```
|
|
@@ -3,7 +3,7 @@ import { Item, Pixels, Lane, TimeRange } from '../../types';
|
|
|
3
3
|
interface AvailableSpaceIndicatorProps<T> {
|
|
4
4
|
pixels: Pixels;
|
|
5
5
|
range: TimeRange;
|
|
6
|
-
|
|
6
|
+
lane: Lane;
|
|
7
7
|
debug: boolean;
|
|
8
8
|
items: Item<T>[];
|
|
9
9
|
}
|
|
@@ -17,5 +17,5 @@ interface AvailableSpaceIndicatorProps<T> {
|
|
|
17
17
|
* @param param0
|
|
18
18
|
* @returns
|
|
19
19
|
*/
|
|
20
|
-
export default function AvailableSpaceIndicator<T>({ pixels, range,
|
|
20
|
+
export default function AvailableSpaceIndicator<T>({ pixels, range, lane, items, debug, children, }: PropsWithChildren<AvailableSpaceIndicatorProps<T>>): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MouseEvent, ReactElement } from 'react';
|
|
2
2
|
import { AvailableSpace, Item, Lane } from '../../types';
|
|
3
3
|
interface TimelaneLaneProps<T> {
|
|
4
|
-
|
|
4
|
+
lane: Lane;
|
|
5
5
|
items: Item<T>[];
|
|
6
6
|
focused?: boolean;
|
|
7
7
|
onItemUpdate?: (item: Item<T>) => void;
|
|
@@ -12,5 +12,5 @@ interface TimelaneLaneProps<T> {
|
|
|
12
12
|
renderItem?: (item: Item<T>, isDragged: boolean) => ReactElement;
|
|
13
13
|
onResizeStart?: (data: T) => void;
|
|
14
14
|
}
|
|
15
|
-
export declare function TimelaneLane<T>({
|
|
15
|
+
export declare function TimelaneLane<T>({ lane, items, focused, onItemUpdate, onMouseUp, onClick, onDoubleClick, onContextMenu, renderItem, onResizeStart, }: TimelaneLaneProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
export {};
|
|
@@ -12,8 +12,8 @@ export declare function getGrabPosition(source: ElementDragPayload, location: Dr
|
|
|
12
12
|
absolute: Position;
|
|
13
13
|
relative: Position;
|
|
14
14
|
};
|
|
15
|
-
export declare function getUpdatedItem<T>(oldItem: Item<T>,
|
|
16
|
-
export declare function getDropPreviewRectangle<S, T>(
|
|
15
|
+
export declare function getUpdatedItem<T>(oldItem: Item<T>, lane: Lane, dropPreviewRect: Rectangle, pixels: Pixels, range: TimeRange): Item<T>;
|
|
16
|
+
export declare function getDropPreviewRectangle<S, T>(lane: Lane, items: Item<T>[], item: Item<S>, mousePosition: Position | null, grabInfo: GrabInfo, pixels: Pixels, grid: Grid, range: TimeRange, allowOverlaps: boolean): Rectangle | null;
|
|
17
17
|
/**
|
|
18
18
|
* Returns true if two rectangles (l1, r1) and (l2, r2) overlap
|
|
19
19
|
* @param a
|
|
@@ -24,4 +24,4 @@ export declare function doOverlap(a: Rectangle, b: Rectangle): boolean;
|
|
|
24
24
|
export declare function getOverlap(a: Rectangle, b: Rectangle): Rectangle | null;
|
|
25
25
|
export declare function itemsDoOverlap<T>(a: Item<T>, b: Item<T>): boolean;
|
|
26
26
|
export declare function isWithinTargetDimensions(item: Rectangle, targetDimensions: Dimensions): boolean;
|
|
27
|
-
export declare function getAvailableSpace<T>(clickedDate: Date, clickedOffset: number,
|
|
27
|
+
export declare function getAvailableSpace<T>(clickedDate: Date, clickedOffset: number, lane: Lane, items: Item<T>[], range: TimeRange): AvailableSpace | null;
|
package/dist/react-timelane.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.timelane-layout{position:relative;width:100%;height:100%;overflow:auto}.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;overflow:hidden}.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:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-aside{grid-area:aside-l;position:sticky;position:-webkit-sticky;left:0;z-index:101}.timelane-layout .timelane-layout-inner .timelane-layout-aside.timelane-layout-aside-right{grid-area:aside-r;right:0;left:initial;border-left:1px solid lightgray}.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:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-right{grid-area:corner-tr;top:0;right:0;border-bottom:1px solid lightgray;border-left:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-left{grid-area:corner-bl;bottom:0;left:0;border-top:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-right{grid-area:corner-br;bottom:0;right:0;border-top:1px solid lightgray;border-left:1px solid lightgray}*{box-sizing:border-box}.timelane{--timelane-aside-width: 150px;--timelane-border-color-light: #f0f0f0;--timelane-border-color-normal: lightgray;--timelane-border-color-dark: gray;--timelane-highlight-color: #f8f8f8;--timelane-focused-color: rgba(0, 0, 255, .1);--timelane-hover-color: rgba(0, 0, 0, .05);overflow:auto;position:relative;width:100%;height:100%;border-left:1px solid var(--timelane-border-color-normal)}.timelane .timelane-header{top:0;z-index:101;background:#fff}.timelane .timelane-header .timelane-header-months{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-months .timelane-header-month-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-months .timelane-header-month-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-weeks{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-days .timelane-header-day-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:.8em;height:20px;line-height:20px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-days .timelane-header-day-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days .timelane-header-day-label.timelane-header-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-header-corner{z-index:102;background:#fff;border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal)}.timelane .timelane-body{z-index:99;position:relative;width:fit-content}.timelane .timelane-body .timelane-
|
|
1
|
+
.timelane-layout{position:relative;width:100%;height:100%;overflow:auto}.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;overflow:hidden}.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:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-aside{grid-area:aside-l;position:sticky;position:-webkit-sticky;left:0;z-index:101}.timelane-layout .timelane-layout-inner .timelane-layout-aside.timelane-layout-aside-right{grid-area:aside-r;right:0;left:initial;border-left:1px solid lightgray}.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:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-right{grid-area:corner-tr;top:0;right:0;border-bottom:1px solid lightgray;border-left:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-left{grid-area:corner-bl;bottom:0;left:0;border-top:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-right{grid-area:corner-br;bottom:0;right:0;border-top:1px solid lightgray;border-left:1px solid lightgray}*{box-sizing:border-box}.timelane{--timelane-aside-width: 150px;--timelane-border-color-light: #f0f0f0;--timelane-border-color-normal: lightgray;--timelane-border-color-dark: gray;--timelane-highlight-color: #f8f8f8;--timelane-focused-color: rgba(0, 0, 255, .1);--timelane-hover-color: rgba(0, 0, 0, .05);overflow:auto;position:relative;width:100%;height:100%;border-left:1px solid var(--timelane-border-color-normal)}.timelane .timelane-header{top:0;z-index:101;background:#fff}.timelane .timelane-header .timelane-header-months{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-months .timelane-header-month-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-months .timelane-header-month-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-weeks{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-days .timelane-header-day-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:.8em;height:20px;line-height:20px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-days .timelane-header-day-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days .timelane-header-day-label.timelane-header-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-header-corner{z-index:102;background:#fff;border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal)}.timelane .timelane-body{z-index:99;position:relative;width:fit-content}.timelane .timelane-body .timelane-lane{border-color:var(--timelane-border-color-normal)!important;border-top:1px solid gray;border-bottom:1px solid gray;margin-top:-1px;overflow:hidden}.timelane .timelane-body .timelane-lane .timelane-drop-target{position:relative;width:100%;height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item{position:absolute;cursor:pointer;border-radius:3px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.timelane-item-marked .timelane-allocation{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-drag-handle{height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-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:.2s}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle:hover{background:#0000001a!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-left{left:0!important;margin-left:1px}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-right{right:0!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-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;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;container-type:size;container-name:timelane-allocation}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{font-weight:700;transform-origin:top left;line-height:30px;white-space:nowrap}@container timelane-allocation (max-height: 30px){.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{margin:0}}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation.timelane-allocation-selected{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.dragging{opacity:0}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-drop-preview{background:#00f;position:absolute;border-radius:2px;color:#fff}.timelane .timelane-body .timelane-lane.timelane-row-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside{border-right:1px solid var(--timelane-border-color-normal);width:var(--timelane-aside-width);background:#fff}.timelane .timelane-aside .timelane-aside-lane-header{border:1px solid var(--timelane-border-color-normal);border-right:none;border-left:none;margin-top:-1px;padding:10px;overflow:hidden;position:relative;cursor:pointer}.timelane .timelane-aside .timelane-aside-lane-header.timelane-aside-lane-header-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside .timelane-aside-lane-header:hover .timelane-aside-resource-menu{opacity:1}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu{position:absolute;top:5px;right:5px;opacity:0;transition:.15s}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu.timelane-aside-resource-menu-open{opacity:1}.timelane .timelane-background{position:relative;width:100%;height:100%}.timelane .timelane-background .timelane-background-inner{display:flex;flex-flow:row nowrap;height:100%}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label{border-right:1px solid var(--timelane-border-color-light);overflow:hidden;font-size:.8em;height:100%;z-index:-100}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-sunday{border-right:1px solid var(--timelane-border-color-normal)}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-background .timelane-background-inner .timelane-background-focused-day-position{position:absolute;height:100%;background:var(--timelane-focused-color);z-index:-101}.timelane-header-tooltip,.timelane-header-day-tooltip{font-size:2em}
|
package/dist/react-timelane.js
CHANGED
|
@@ -120,7 +120,7 @@ function dr({
|
|
|
120
120
|
return /* @__PURE__ */ y(
|
|
121
121
|
"div",
|
|
122
122
|
{
|
|
123
|
-
className: `timelane-aside-
|
|
123
|
+
className: `timelane-aside-lane-header ${t ? "timelane-aside-lane-header-focused" : ""}`,
|
|
124
124
|
style: { height: `${e}px` },
|
|
125
125
|
onClick: r,
|
|
126
126
|
onDoubleClick: n,
|
|
@@ -1543,7 +1543,7 @@ function te(e, t) {
|
|
|
1543
1543
|
function It(e, t, r, n, i) {
|
|
1544
1544
|
return {
|
|
1545
1545
|
id: e.id,
|
|
1546
|
-
|
|
1546
|
+
laneId: t.id,
|
|
1547
1547
|
start: _e(
|
|
1548
1548
|
de(i.start, Math.floor(r.x / n.pixelsPerDay)),
|
|
1549
1549
|
12
|
|
@@ -4203,10 +4203,10 @@ function ta({ overlap: e }) {
|
|
|
4203
4203
|
);
|
|
4204
4204
|
}
|
|
4205
4205
|
function Pt(e) {
|
|
4206
|
-
return "id" in e && "
|
|
4206
|
+
return "id" in e && "laneId" in e && "start" in e && "end" in e && "size" in e && "offset" in e;
|
|
4207
4207
|
}
|
|
4208
4208
|
function ra({
|
|
4209
|
-
|
|
4209
|
+
lane: e,
|
|
4210
4210
|
items: t,
|
|
4211
4211
|
focused: r = !1,
|
|
4212
4212
|
onItemUpdate: n = () => {
|
|
@@ -4226,11 +4226,7 @@ function ra({
|
|
|
4226
4226
|
const { settings: f } = pe(), l = {
|
|
4227
4227
|
x: f.pixelsPerDay,
|
|
4228
4228
|
offsetX: f.pixelsPerDay / 2
|
|
4229
|
-
}, d = Ye(
|
|
4230
|
-
e,
|
|
4231
|
-
f,
|
|
4232
|
-
f
|
|
4233
|
-
), [h, g] = V(null), [p, m] = V(
|
|
4229
|
+
}, d = Ye(e, f, f), [h, g] = V(null), [p, m] = V(
|
|
4234
4230
|
null
|
|
4235
4231
|
);
|
|
4236
4232
|
function b(v) {
|
|
@@ -4295,9 +4291,9 @@ function ra({
|
|
|
4295
4291
|
return /* @__PURE__ */ y(
|
|
4296
4292
|
"div",
|
|
4297
4293
|
{
|
|
4298
|
-
id: `timelane-
|
|
4299
|
-
className: `timelane-
|
|
4300
|
-
"data-timelane-
|
|
4294
|
+
id: `timelane-lane-${e.id}`,
|
|
4295
|
+
className: `timelane-lane ${r ? "timelane-lane-focused" : ""}`,
|
|
4296
|
+
"data-timelane-lane-id": e.id,
|
|
4301
4297
|
style: d,
|
|
4302
4298
|
onMouseUp: i,
|
|
4303
4299
|
onClick: (v) => S(v, "single"),
|
|
@@ -4641,7 +4637,7 @@ const ya = ({
|
|
|
4641
4637
|
function n(a) {
|
|
4642
4638
|
window.requestAnimationFrame(() => {
|
|
4643
4639
|
const u = document.getElementById(
|
|
4644
|
-
`timelane-
|
|
4640
|
+
`timelane-lane-${a}`
|
|
4645
4641
|
);
|
|
4646
4642
|
u && u.scrollIntoView({ block: "center", behavior: "smooth" });
|
|
4647
4643
|
});
|
package/dist/types/Item.d.ts
CHANGED