react-timelane 1.2.0 → 1.2.1
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.
|
@@ -2,6 +2,11 @@ import { MouseEvent, ReactElement } from 'react';
|
|
|
2
2
|
import { Lane } from '../../types';
|
|
3
3
|
export interface TimelaneAsideProps {
|
|
4
4
|
lanes: Lane[];
|
|
5
|
+
/**
|
|
6
|
+
* the width in px
|
|
7
|
+
*/
|
|
8
|
+
width?: number;
|
|
9
|
+
side?: "left" | "right";
|
|
5
10
|
/**
|
|
6
11
|
* deprecated
|
|
7
12
|
*/
|
|
@@ -22,4 +27,4 @@ export interface TimelaneAsideProps {
|
|
|
22
27
|
*
|
|
23
28
|
* It must be a child component of `<Timelane>`.
|
|
24
29
|
*/
|
|
25
|
-
export declare function TimelaneAside({ lanes, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare function TimelaneAside({ lanes, width, side, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps): import("react/jsx-runtime").JSX.Element;
|
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}.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}.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}.timelane-layout .timelane-layout-inner .timelane-layout-aside.timelane-layout-aside-right{grid-area:aside-r;right:0;left:initial}.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:
|
|
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)}*{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%}.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}
|
package/dist/react-timelane.js
CHANGED
|
@@ -4545,31 +4545,33 @@ function da({ focusedDay: e }) {
|
|
|
4545
4545
|
}
|
|
4546
4546
|
function fa({
|
|
4547
4547
|
lanes: e,
|
|
4548
|
-
|
|
4549
|
-
|
|
4548
|
+
width: t = 100,
|
|
4549
|
+
side: r = "left",
|
|
4550
|
+
focusedLane: n,
|
|
4551
|
+
setFocusedLane: i = () => {
|
|
4550
4552
|
},
|
|
4551
|
-
onLaneHeaderClick:
|
|
4553
|
+
onLaneHeaderClick: a = () => {
|
|
4552
4554
|
},
|
|
4553
|
-
onLaneHeaderDoubleClick:
|
|
4555
|
+
onLaneHeaderDoubleClick: u = () => {
|
|
4554
4556
|
},
|
|
4555
|
-
onLaneHeaderContextMenu:
|
|
4557
|
+
onLaneHeaderContextMenu: c = () => {
|
|
4556
4558
|
},
|
|
4557
|
-
renderLaneHeader:
|
|
4559
|
+
renderLaneHeader: s = ga
|
|
4558
4560
|
}) {
|
|
4559
|
-
const { settings:
|
|
4560
|
-
return /* @__PURE__ */ m(H.Aside, { children: /* @__PURE__ */ m("div", { className: "timelane-aside", children: e && e.map((
|
|
4561
|
+
const { settings: o } = J();
|
|
4562
|
+
return /* @__PURE__ */ m(H.Aside, { side: r, children: /* @__PURE__ */ m("div", { className: "timelane-aside", style: { width: `${t}px` }, children: e && e.map((f) => /* @__PURE__ */ m(
|
|
4561
4563
|
ha,
|
|
4562
4564
|
{
|
|
4563
|
-
height:
|
|
4564
|
-
isFocused:
|
|
4565
|
-
onClick: (
|
|
4566
|
-
|
|
4565
|
+
height: o.pixelsPerLane,
|
|
4566
|
+
isFocused: n ? n.id === f.id : !1,
|
|
4567
|
+
onClick: (d) => {
|
|
4568
|
+
i(f), a(f, d);
|
|
4567
4569
|
},
|
|
4568
|
-
onDoubleClick: (
|
|
4569
|
-
onContextMenu: (
|
|
4570
|
-
children:
|
|
4570
|
+
onDoubleClick: (d) => u(f, d),
|
|
4571
|
+
onContextMenu: (d) => c(f, d),
|
|
4572
|
+
children: s(f)
|
|
4571
4573
|
},
|
|
4572
|
-
|
|
4574
|
+
f.id
|
|
4573
4575
|
)) }) });
|
|
4574
4576
|
}
|
|
4575
4577
|
function ha({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-timelane",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite",
|
|
@@ -42,6 +42,12 @@
|
|
|
42
42
|
"vite": "^6.3.5",
|
|
43
43
|
"vite-plugin-dts": "^4.5.4"
|
|
44
44
|
},
|
|
45
|
+
"repository": {
|
|
46
|
+
"url": "https://github.com/dhansmair/react-timelane"
|
|
47
|
+
},
|
|
48
|
+
"main": "./dist/react-timelane.js",
|
|
49
|
+
"module": "./dist/react-timelane.js",
|
|
50
|
+
"types": "./dist/index.d.ts",
|
|
45
51
|
"exports": {
|
|
46
52
|
".": {
|
|
47
53
|
"types": "./dist/index.d.ts",
|
|
@@ -55,4 +61,4 @@
|
|
|
55
61
|
"!**/*.stories.ts",
|
|
56
62
|
"!**/*.stories.d.ts"
|
|
57
63
|
]
|
|
58
|
-
}
|
|
64
|
+
}
|