react-timelane 1.2.2 → 1.2.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 +15 -14
- package/dist/_virtual/index2.js +3 -2
- package/dist/_virtual/index3.js +2 -3
- package/dist/components/Timelane/Timelane.css +1 -1
- package/dist/components/TimelaneAside/TimelaneAside.d.ts +9 -9
- package/dist/components/TimelaneItem/TimelaneItem.d.ts +1 -1
- package/dist/components/TimelaneLane/AvailableSpaceIndicator.d.ts +1 -1
- package/dist/components/TimelaneLane/TimelaneLane.d.ts +2 -2
- package/dist/node_modules/bind-event-listener/dist/index.js +1 -1
- package/dist/node_modules/re-resizable/lib/index.js +1 -1
- package/dist/types/Item.d.ts +1 -1
- package/dist/types/Lane.d.ts +2 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,7 +40,7 @@ import type Allocation from "../models/Allocation";
|
|
|
40
40
|
import type Resource from "../models/Resource";
|
|
41
41
|
import AllocationComponent from "./AllocationComponent";
|
|
42
42
|
|
|
43
|
-
import { Timelane
|
|
43
|
+
import { Timelane } from "react-timelane";
|
|
44
44
|
|
|
45
45
|
interface MyTimelaneProps {
|
|
46
46
|
resources: Resource[];
|
|
@@ -86,8 +86,8 @@ function MyTimelane({
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
return (
|
|
89
|
-
<
|
|
90
|
-
<
|
|
89
|
+
<Timelane>
|
|
90
|
+
<Timelane.Header
|
|
91
91
|
onDayClick={({ day }) => {
|
|
92
92
|
console.log("day clicked", day);
|
|
93
93
|
}}
|
|
@@ -98,16 +98,17 @@ function MyTimelane({
|
|
|
98
98
|
console.log("week clicked", firstDay);
|
|
99
99
|
}}
|
|
100
100
|
/>
|
|
101
|
-
<
|
|
101
|
+
<Timelane.Body
|
|
102
102
|
onSelect={(selection) => {
|
|
103
103
|
setSelection(selection);
|
|
104
104
|
}}
|
|
105
105
|
>
|
|
106
|
-
{lanes.map((
|
|
107
|
-
<
|
|
108
|
-
key={
|
|
109
|
-
|
|
110
|
-
|
|
106
|
+
{lanes.map(({id, capacity}) => (
|
|
107
|
+
<Timelane.Lane
|
|
108
|
+
key={id}
|
|
109
|
+
id={id}
|
|
110
|
+
capacity={capacity}
|
|
111
|
+
items={items.filter((item) => item.laneId === id)}
|
|
111
112
|
onItemUpdate={handleItemUpdate}
|
|
112
113
|
renderItem={(item, isDragged) => (
|
|
113
114
|
<AllocationComponent
|
|
@@ -118,14 +119,14 @@ function MyTimelane({
|
|
|
118
119
|
)}
|
|
119
120
|
/>
|
|
120
121
|
))}
|
|
121
|
-
</
|
|
122
|
-
<
|
|
123
|
-
<
|
|
122
|
+
</Timelane.Body>
|
|
123
|
+
<Timelane.Background />
|
|
124
|
+
<Timelane.Aside
|
|
124
125
|
lanes={lanes}
|
|
125
126
|
renderLaneHeader={(lane) => <div>{lane.id}</div>}
|
|
126
127
|
/>
|
|
127
|
-
<
|
|
128
|
-
</
|
|
128
|
+
<Timelane.Layout.Corner />
|
|
129
|
+
</Timelane.Container>
|
|
129
130
|
);
|
|
130
131
|
}
|
|
131
132
|
```
|
package/dist/_virtual/index2.js
CHANGED
package/dist/_virtual/index3.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*{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
|
|
1
|
+
*{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%;z-index:0}.timelane .timelane-header{width:fit-content;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);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}.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;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{width:var(--timelane-aside-width);background:#fff}.timelane .timelane-aside .timelane-aside-lane-header{border-top:1px solid var(--timelane-border-color-normal);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}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MouseEvent, ReactElement } from 'react';
|
|
2
2
|
import { Lane } from '../../types';
|
|
3
|
-
export interface TimelaneAsideProps {
|
|
4
|
-
lanes: Lane[];
|
|
3
|
+
export interface TimelaneAsideProps<T = unknown> {
|
|
4
|
+
lanes: Lane<T>[];
|
|
5
5
|
/**
|
|
6
6
|
* the width in px
|
|
7
7
|
*/
|
|
@@ -10,15 +10,15 @@ export interface TimelaneAsideProps {
|
|
|
10
10
|
/**
|
|
11
11
|
* deprecated
|
|
12
12
|
*/
|
|
13
|
-
focusedLane?: Lane | null;
|
|
13
|
+
focusedLane?: Lane<T> | null;
|
|
14
14
|
/**
|
|
15
15
|
* deprecated
|
|
16
16
|
*/
|
|
17
|
-
setFocusedLane?: (lane: Lane | null) => void;
|
|
18
|
-
onLaneHeaderClick?: (lane: Lane
|
|
19
|
-
onLaneHeaderDoubleClick?: (lane: Lane
|
|
20
|
-
onLaneHeaderContextMenu?: (lane: Lane
|
|
21
|
-
renderLaneHeader?: (lane: Lane) => ReactElement;
|
|
17
|
+
setFocusedLane?: (lane: Lane<T> | null) => void;
|
|
18
|
+
onLaneHeaderClick?: (lane: Lane<T>, e: MouseEvent) => void;
|
|
19
|
+
onLaneHeaderDoubleClick?: (lane: Lane<T>, e: MouseEvent) => void;
|
|
20
|
+
onLaneHeaderContextMenu?: (lane: Lane<T>, e: MouseEvent) => void;
|
|
21
|
+
renderLaneHeader?: (lane: Lane<T>) => ReactElement;
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
24
|
* `<TimelaneAside>` renders lane headers. The lane header height is determined
|
|
@@ -27,4 +27,4 @@ export interface TimelaneAsideProps {
|
|
|
27
27
|
*
|
|
28
28
|
* It must be a child component of `<Timelane>`.
|
|
29
29
|
*/
|
|
30
|
-
export declare function TimelaneAside({ lanes, width, side, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare function TimelaneAside<T = unknown>({ lanes, width, side, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MouseEvent, ReactElement } from 'react';
|
|
2
2
|
import { AvailableSpace, Item, LaneId } from '../../types';
|
|
3
|
-
export interface TimelaneLaneProps<T> {
|
|
3
|
+
export interface TimelaneLaneProps<T = unknown> {
|
|
4
4
|
id: LaneId;
|
|
5
5
|
capacity?: number;
|
|
6
6
|
items?: Item<T>[];
|
|
@@ -11,7 +11,7 @@ export interface TimelaneLaneProps<T> {
|
|
|
11
11
|
onDoubleClick?: (when: Date, availableSpace: AvailableSpace | null, e: MouseEvent) => void;
|
|
12
12
|
onContextMenu?: (when: Date, e: MouseEvent) => void;
|
|
13
13
|
renderItem?: (item: Item<T>, isDragged: boolean) => ReactElement;
|
|
14
|
-
onResizeStart?: (data
|
|
14
|
+
onResizeStart?: (data?: T) => void;
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
17
|
* `<TimelaneLane>` (or `<Timelane.Lane>`) is a container for items. It takes care of
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as A, jsxs as V } from "react/jsx-runtime";
|
|
2
2
|
import { PureComponent as Z } from "react";
|
|
3
|
-
import { r as q } from "../../../_virtual/
|
|
3
|
+
import { r as q } from "../../../_virtual/index2.js";
|
|
4
4
|
import { Resizer as J } from "./resizer.js";
|
|
5
5
|
var K = /* @__PURE__ */ function() {
|
|
6
6
|
var r = function(o, t) {
|
package/dist/types/Item.d.ts
CHANGED
package/dist/types/Lane.d.ts
CHANGED