@progress/kendo-react-layout 7.4.0-develop.9 → 7.5.0-develop.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.
- package/appbar/AppBar.js +1 -1
- package/appbar/AppBar.mjs +41 -43
- package/breadcrumb/BreadcrumbLink.js +1 -1
- package/breadcrumb/BreadcrumbLink.mjs +22 -22
- package/card/Card.js +1 -1
- package/card/Card.mjs +19 -19
- package/dist/cdn/js/kendo-react-layout.js +1 -1
- package/index.d.mts +17 -9
- package/index.d.ts +17 -9
- package/package-metadata.mjs +1 -1
- package/package.json +6 -6
- package/panelbar/PanelBar.js +1 -1
- package/panelbar/PanelBar.mjs +9 -10
- package/panelbar/PanelBarItem.js +1 -1
- package/panelbar/PanelBarItem.mjs +68 -65
- package/panelbar/util.js +1 -1
- package/panelbar/util.mjs +74 -70
- package/splitter/Splitter.js +1 -1
- package/splitter/Splitter.mjs +6 -7
- package/stepper/Step.js +1 -1
- package/stepper/Step.mjs +48 -48
- package/stepper/Stepper.js +1 -1
- package/stepper/Stepper.mjs +76 -75
- package/timeline/TimelineCard.js +1 -1
- package/timeline/TimelineCard.mjs +15 -20
- package/timeline/TimelineHorizontal.js +1 -1
- package/timeline/TimelineHorizontal.mjs +98 -93
package/stepper/Stepper.mjs
CHANGED
|
@@ -6,28 +6,28 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
import * as
|
|
9
|
+
import * as a from "react";
|
|
10
10
|
import r from "prop-types";
|
|
11
11
|
import { StepperContext as ee } from "./context/StepperContext.mjs";
|
|
12
|
-
import { validatePackage as te, focusFirstFocusableChild as se, useRtl as
|
|
13
|
-
import { Step as
|
|
12
|
+
import { validatePackage as te, focusFirstFocusableChild as se, useRtl as ae, dispatchEvent as P, Keys as u, classNames as A, svgIconPropType as F } from "@progress/kendo-react-common";
|
|
13
|
+
import { Step as oe } from "./Step.mjs";
|
|
14
14
|
import { ProgressBar as re } from "@progress/kendo-react-progressbars";
|
|
15
|
-
import { DEFAULT_ANIMATION_DURATION as ne, NO_ANIMATION as
|
|
16
|
-
import { packageMetadata as
|
|
15
|
+
import { DEFAULT_ANIMATION_DURATION as ne, NO_ANIMATION as le } from "./contants.mjs";
|
|
16
|
+
import { packageMetadata as ie } from "../package-metadata.mjs";
|
|
17
17
|
import { useLocalization as ce } from "@progress/kendo-react-intl";
|
|
18
|
-
import { progBarAriaLabel as
|
|
19
|
-
const E =
|
|
20
|
-
te(
|
|
18
|
+
import { progBarAriaLabel as M, messages as ue } from "./messages/index.mjs";
|
|
19
|
+
const E = a.forwardRef((k, V) => {
|
|
20
|
+
te(ie);
|
|
21
21
|
const {
|
|
22
22
|
animationDuration: b,
|
|
23
23
|
children: L,
|
|
24
24
|
className: D,
|
|
25
|
-
disabled:
|
|
25
|
+
disabled: m,
|
|
26
26
|
errorIcon: z,
|
|
27
27
|
errorSVGIcon: G,
|
|
28
28
|
item: N,
|
|
29
29
|
items: d,
|
|
30
|
-
linear:
|
|
30
|
+
linear: p,
|
|
31
31
|
mode: K,
|
|
32
32
|
orientation: y,
|
|
33
33
|
style: R,
|
|
@@ -35,76 +35,76 @@ const E = o.forwardRef((k, V) => {
|
|
|
35
35
|
successSVGIcon: B,
|
|
36
36
|
onChange: h,
|
|
37
37
|
onFocus: C
|
|
38
|
-
} = k, H = ce().toLanguageString(
|
|
38
|
+
} = k, H = ce().toLanguageString(M, ue[M]), g = a.useRef(null), w = a.useCallback(
|
|
39
39
|
() => {
|
|
40
40
|
g.current && se(g.current);
|
|
41
41
|
},
|
|
42
42
|
[]
|
|
43
|
-
), I =
|
|
43
|
+
), I = a.useCallback(
|
|
44
44
|
() => ({
|
|
45
45
|
element: g.current,
|
|
46
46
|
focus: w
|
|
47
47
|
}),
|
|
48
48
|
[w]
|
|
49
49
|
);
|
|
50
|
-
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
n(
|
|
54
|
-
}, [
|
|
55
|
-
const v =
|
|
50
|
+
a.useImperativeHandle(V, I);
|
|
51
|
+
const l = k.value || O.value, [f, n] = a.useState(l), c = d ? d.length : 0, o = y === "vertical", S = ae(g, k.dir), U = typeof b == "number" ? b : b !== !1 ? ne : le;
|
|
52
|
+
a.useEffect(() => {
|
|
53
|
+
n(l);
|
|
54
|
+
}, [l]);
|
|
55
|
+
const v = a.useCallback(
|
|
56
56
|
(t, s) => {
|
|
57
|
-
const e = s ===
|
|
58
|
-
|
|
57
|
+
const e = s === l - 1, i = s === l, $ = s === l + 1;
|
|
58
|
+
l !== s && h && !m && (!p || e || i || $) && (P(
|
|
59
59
|
h,
|
|
60
60
|
t,
|
|
61
61
|
I(),
|
|
62
62
|
{ value: s }
|
|
63
63
|
), n(s));
|
|
64
64
|
},
|
|
65
|
-
[
|
|
66
|
-
), j =
|
|
65
|
+
[l, p, h, m, n]
|
|
66
|
+
), j = a.useCallback(
|
|
67
67
|
(t) => {
|
|
68
68
|
let s = t.value, e = t.syntheticEvent;
|
|
69
69
|
v(e, s);
|
|
70
70
|
},
|
|
71
71
|
[v]
|
|
72
|
-
), q =
|
|
72
|
+
), q = a.useCallback(
|
|
73
73
|
(t) => {
|
|
74
|
-
C && !
|
|
74
|
+
C && !m && P(
|
|
75
75
|
C,
|
|
76
76
|
t.syntheticEvent,
|
|
77
77
|
I(),
|
|
78
78
|
void 0
|
|
79
79
|
);
|
|
80
80
|
},
|
|
81
|
-
[C,
|
|
82
|
-
), x =
|
|
81
|
+
[C, m]
|
|
82
|
+
), x = a.useCallback(
|
|
83
83
|
(t) => {
|
|
84
84
|
v(t, f);
|
|
85
85
|
},
|
|
86
86
|
[v, f]
|
|
87
|
-
), J =
|
|
87
|
+
), J = a.useCallback(
|
|
88
88
|
(t) => {
|
|
89
|
-
const s = S === "rtl", e = f,
|
|
89
|
+
const s = S === "rtl", e = f, i = d.length - 1;
|
|
90
90
|
switch (t.keyCode) {
|
|
91
91
|
case u.left:
|
|
92
|
-
t.preventDefault(), !s && e > 0 && n(e - 1), s && e <
|
|
92
|
+
t.preventDefault(), !s && e > 0 && n(e - 1), s && e < i && n(e + 1);
|
|
93
93
|
break;
|
|
94
94
|
case u.right:
|
|
95
|
-
t.preventDefault(), !s && e <
|
|
95
|
+
t.preventDefault(), !s && e < i && n(e + 1), s && e > 0 && n(e - 1);
|
|
96
96
|
break;
|
|
97
97
|
case u.up:
|
|
98
98
|
t.preventDefault(), !s && e > 0 && n(e - 1), s && e > 0 && n(e - 1);
|
|
99
99
|
break;
|
|
100
100
|
case u.down:
|
|
101
|
-
t.preventDefault(), !s && e <
|
|
101
|
+
t.preventDefault(), !s && e < i && n(e + 1), s && e < i && n(e + 1);
|
|
102
102
|
break;
|
|
103
103
|
case u.home:
|
|
104
104
|
t.preventDefault(), n(0);
|
|
105
105
|
break;
|
|
106
106
|
case u.end:
|
|
107
|
-
t.preventDefault(), n(
|
|
107
|
+
t.preventDefault(), n(i);
|
|
108
108
|
break;
|
|
109
109
|
case u.space:
|
|
110
110
|
t.preventDefault();
|
|
@@ -115,70 +115,70 @@ const E = o.forwardRef((k, V) => {
|
|
|
115
115
|
}
|
|
116
116
|
},
|
|
117
117
|
[d, n, f, S, x]
|
|
118
|
-
), Q =
|
|
119
|
-
() =>
|
|
118
|
+
), Q = a.useMemo(
|
|
119
|
+
() => A(
|
|
120
120
|
"k-stepper",
|
|
121
121
|
{
|
|
122
|
-
"k-stepper-linear":
|
|
122
|
+
"k-stepper-linear": p
|
|
123
123
|
},
|
|
124
124
|
D
|
|
125
125
|
),
|
|
126
|
-
[
|
|
127
|
-
), W =
|
|
126
|
+
[p, D]
|
|
127
|
+
), W = a.useMemo(
|
|
128
128
|
() => ({
|
|
129
129
|
display: "grid",
|
|
130
|
-
gridTemplateColumns:
|
|
131
|
-
gridTemplateRows:
|
|
130
|
+
gridTemplateColumns: o ? void 0 : "repeat(" + c * 2 + ", 1fr)",
|
|
131
|
+
gridTemplateRows: o ? "repeat(" + c + ", 1fr)" : void 0,
|
|
132
132
|
...R
|
|
133
133
|
}),
|
|
134
|
-
[
|
|
135
|
-
), X =
|
|
136
|
-
() =>
|
|
134
|
+
[o, c, R]
|
|
135
|
+
), X = a.useMemo(
|
|
136
|
+
() => A(
|
|
137
137
|
"k-step-list",
|
|
138
138
|
{
|
|
139
|
-
"k-step-list-horizontal": !
|
|
140
|
-
"k-step-list-vertical":
|
|
139
|
+
"k-step-list-horizontal": !o,
|
|
140
|
+
"k-step-list-vertical": o
|
|
141
141
|
}
|
|
142
142
|
),
|
|
143
|
-
[
|
|
144
|
-
), Y =
|
|
143
|
+
[o]
|
|
144
|
+
), Y = a.useMemo(
|
|
145
145
|
() => ({
|
|
146
|
-
gridColumnStart:
|
|
147
|
-
gridColumnEnd:
|
|
148
|
-
gridRowStart:
|
|
149
|
-
gridRowEnd:
|
|
146
|
+
gridColumnStart: o ? void 0 : 1,
|
|
147
|
+
gridColumnEnd: o ? void 0 : -1,
|
|
148
|
+
gridRowStart: o ? 1 : void 0,
|
|
149
|
+
gridRowEnd: o ? -1 : void 0
|
|
150
150
|
}),
|
|
151
|
-
[
|
|
152
|
-
), Z =
|
|
151
|
+
[o]
|
|
152
|
+
), Z = a.useMemo(
|
|
153
153
|
() => ({
|
|
154
|
-
gridColumnStart:
|
|
155
|
-
gridColumnEnd:
|
|
156
|
-
gridRowStart:
|
|
157
|
-
gridRowEnd:
|
|
158
|
-
top:
|
|
154
|
+
gridColumnStart: o ? void 0 : 2,
|
|
155
|
+
gridColumnEnd: o ? void 0 : c * 2,
|
|
156
|
+
gridRowStart: o ? 1 : void 0,
|
|
157
|
+
gridRowEnd: o ? c : void 0,
|
|
158
|
+
top: o ? 17 : void 0
|
|
159
159
|
}),
|
|
160
|
-
[
|
|
160
|
+
[o, c]
|
|
161
161
|
), T = d && d.map((t, s) => {
|
|
162
162
|
const e = {
|
|
163
163
|
index: s,
|
|
164
|
-
disabled:
|
|
164
|
+
disabled: m || t.disabled,
|
|
165
165
|
focused: s === f,
|
|
166
|
-
current: s ===
|
|
166
|
+
current: s === l,
|
|
167
167
|
...t
|
|
168
|
-
},
|
|
169
|
-
return /* @__PURE__ */
|
|
168
|
+
}, i = N || oe;
|
|
169
|
+
return /* @__PURE__ */ a.createElement(i, { key: s, ...e });
|
|
170
170
|
});
|
|
171
|
-
return /* @__PURE__ */
|
|
171
|
+
return /* @__PURE__ */ a.createElement(
|
|
172
172
|
ee.Provider,
|
|
173
173
|
{
|
|
174
174
|
value: {
|
|
175
175
|
animationDuration: b,
|
|
176
|
-
isVertical:
|
|
176
|
+
isVertical: o,
|
|
177
177
|
item: N,
|
|
178
|
-
linear:
|
|
178
|
+
linear: p,
|
|
179
179
|
mode: K,
|
|
180
180
|
numOfSteps: c,
|
|
181
|
-
value:
|
|
181
|
+
value: l,
|
|
182
182
|
successIcon: _,
|
|
183
183
|
successSVGIcon: B,
|
|
184
184
|
errorIcon: z,
|
|
@@ -187,7 +187,7 @@ const E = o.forwardRef((k, V) => {
|
|
|
187
187
|
onFocus: q
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
|
-
/* @__PURE__ */
|
|
190
|
+
/* @__PURE__ */ a.createElement(
|
|
191
191
|
"nav",
|
|
192
192
|
{
|
|
193
193
|
className: Q,
|
|
@@ -195,7 +195,7 @@ const E = o.forwardRef((k, V) => {
|
|
|
195
195
|
dir: S,
|
|
196
196
|
onKeyDown: J
|
|
197
197
|
},
|
|
198
|
-
/* @__PURE__ */
|
|
198
|
+
/* @__PURE__ */ a.createElement(
|
|
199
199
|
"ol",
|
|
200
200
|
{
|
|
201
201
|
className: X,
|
|
@@ -203,10 +203,11 @@ const E = o.forwardRef((k, V) => {
|
|
|
203
203
|
},
|
|
204
204
|
T || L
|
|
205
205
|
),
|
|
206
|
-
/* @__PURE__ */
|
|
206
|
+
/* @__PURE__ */ a.createElement(
|
|
207
207
|
re,
|
|
208
208
|
{
|
|
209
209
|
style: Z,
|
|
210
|
+
labelPlacement: "start",
|
|
210
211
|
animation: { duration: U },
|
|
211
212
|
ariaLabel: H,
|
|
212
213
|
"aria-hidden": !0,
|
|
@@ -214,8 +215,8 @@ const E = o.forwardRef((k, V) => {
|
|
|
214
215
|
labelVisible: !1,
|
|
215
216
|
orientation: y,
|
|
216
217
|
reverse: y === "vertical",
|
|
217
|
-
value:
|
|
218
|
-
disabled:
|
|
218
|
+
value: l,
|
|
219
|
+
disabled: m,
|
|
219
220
|
tabIndex: -1
|
|
220
221
|
}
|
|
221
222
|
)
|
|
@@ -229,7 +230,7 @@ E.propTypes = {
|
|
|
229
230
|
dir: r.string,
|
|
230
231
|
disabled: r.bool,
|
|
231
232
|
errorIcon: r.string,
|
|
232
|
-
errorSVGIcon:
|
|
233
|
+
errorSVGIcon: F,
|
|
233
234
|
item: r.any,
|
|
234
235
|
items: r.any,
|
|
235
236
|
linear: r.bool,
|
|
@@ -237,15 +238,15 @@ E.propTypes = {
|
|
|
237
238
|
orientation: r.oneOf(["horizontal", "vertical"]),
|
|
238
239
|
style: r.object,
|
|
239
240
|
successIcon: r.string,
|
|
240
|
-
successSVGIcon:
|
|
241
|
+
successSVGIcon: F,
|
|
241
242
|
value: r.number.isRequired,
|
|
242
243
|
onChange: r.func,
|
|
243
244
|
onFocus: r.func
|
|
244
245
|
};
|
|
245
|
-
const
|
|
246
|
+
const O = {
|
|
246
247
|
value: 0
|
|
247
248
|
};
|
|
248
|
-
E.defaultProps =
|
|
249
|
+
E.defaultProps = O;
|
|
249
250
|
E.displayName = "KendoStepper";
|
|
250
251
|
export {
|
|
251
252
|
E as Stepper
|
package/timeline/TimelineCard.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),k=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),O=require("../card/CardBody.js"),T=require("../card/CardImage.js"),h=require("../card/CardActions.js"),v=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-animation"),R=require("@progress/kendo-svg-icons"),S=require("@progress/kendo-react-buttons");function x(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(i,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return i.default=e,Object.freeze(i)}const t=x(N),E=e=>{const{title:l,subtitle:c,actions:r,images:o,description:C}=e.eventData,[d,b]=t.useState(e.eventData.opened||!1),[s,u]=t.useState(e.eventData.opened||!!e.collapsible),f=n=>{if(b(!d),e.onChange){const a={syntheticEvent:n,nativeEvent:n.nativeEvent,eventData:e.eventData};e.onChange.call(void 0,a)}},g=n=>{if(e.onActionClick){const a={syntheticEvent:n,nativeEvent:n.nativeEvent,eventData:e.eventData};e.onActionClick.call(void 0,a)}},m=()=>t.createElement(t.Fragment,null,t.createElement(O.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,C),o&&o.map((n,a)=>t.createElement(T.CardImage,{key:a,src:n.src})))),r&&t.createElement(h.CardActions,null,r.map((n,a)=>t.createElement("a",{key:a,href:n.url,className:"k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",onClick:g},n.text))));return t.createElement("div",{"data-testid":"k-timeline-card",className:v.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&s})},t.createElement(y.Card,{"aria-live":"polite","aria-describedby":e.id,"aria-atomic":"true",tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible&&s,className:"k-card-with-callout",onClick:n=>f(n)},t.createElement("span",{style:e.calloutStyle,className:v.classNames("k-timeline-card-callout","k-card-callout",{"k-callout-n":e.horizontal},{"k-callout-e":e.alternated&&!e.horizontal},{"k-callout-w":!e.alternated&&!e.horizontal})}),t.createElement("div",{className:"k-card-inner"},t.createElement(A.CardHeader,null,t.createElement(D.CardTitle,null,t.createElement("span",{className:"k-event-title"},l),e.collapsible&&t.createElement(S.Button,{className:"k-event-collapse",fillMode:"flat",svgIcon:R.chevronRightIcon})),c&&t.createElement(I.CardSubtitle,null,c)),e.collapsible?t.createElement(q.Reveal,{transitionEnterDuration:e.transitionDuration||400,transitionExitDuration:e.transitionDuration||400,onBeforeEnter:()=>u(!1),onAfterExited:()=>u(!0)},d?m():null):m())))};E.propTypes={onChange:k.func,onActionClick:k.func};exports.TimelineCard=E;
|
|
@@ -8,19 +8,20 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as t from "react";
|
|
10
10
|
import s from "prop-types";
|
|
11
|
-
import { Card as
|
|
12
|
-
import { CardHeader as
|
|
11
|
+
import { Card as N } from "../card/Card.mjs";
|
|
12
|
+
import { CardHeader as b } from "../card/CardHeader.mjs";
|
|
13
13
|
import { CardTitle as A } from "../card/CardTitle.mjs";
|
|
14
14
|
import { CardSubtitle as D } from "../card/CardSubtitle.mjs";
|
|
15
15
|
import { CardBody as h } from "../card/CardBody.mjs";
|
|
16
16
|
import { CardImage as I } from "../card/CardImage.mjs";
|
|
17
17
|
import { CardActions as g } from "../card/CardActions.mjs";
|
|
18
|
-
import { classNames as u
|
|
19
|
-
import { Reveal as
|
|
20
|
-
import { chevronRightIcon as
|
|
18
|
+
import { classNames as u } from "@progress/kendo-react-common";
|
|
19
|
+
import { Reveal as y } from "@progress/kendo-react-animation";
|
|
20
|
+
import { chevronRightIcon as T } from "@progress/kendo-svg-icons";
|
|
21
|
+
import { Button as O } from "@progress/kendo-react-buttons";
|
|
21
22
|
const x = (e) => {
|
|
22
|
-
const { title:
|
|
23
|
-
if (
|
|
23
|
+
const { title: E, subtitle: l, actions: i, images: c, description: v } = e.eventData, [o, k] = t.useState(e.eventData.opened || !1), [r, m] = t.useState(e.eventData.opened || !!e.collapsible), f = (a) => {
|
|
24
|
+
if (k(!o), e.onChange) {
|
|
24
25
|
const n = {
|
|
25
26
|
syntheticEvent: a,
|
|
26
27
|
nativeEvent: a.nativeEvent,
|
|
@@ -28,7 +29,7 @@ const x = (e) => {
|
|
|
28
29
|
};
|
|
29
30
|
e.onChange.call(void 0, n);
|
|
30
31
|
}
|
|
31
|
-
},
|
|
32
|
+
}, C = (a) => {
|
|
32
33
|
if (e.onActionClick) {
|
|
33
34
|
const n = {
|
|
34
35
|
syntheticEvent: a,
|
|
@@ -37,13 +38,13 @@ const x = (e) => {
|
|
|
37
38
|
};
|
|
38
39
|
e.onActionClick.call(void 0, n);
|
|
39
40
|
}
|
|
40
|
-
}, d = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(h, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null,
|
|
41
|
+
}, d = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(h, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, v), c && c.map((a, n) => /* @__PURE__ */ t.createElement(I, { key: n, src: a.src })))), i && /* @__PURE__ */ t.createElement(g, null, i.map((a, n) => /* @__PURE__ */ t.createElement(
|
|
41
42
|
"a",
|
|
42
43
|
{
|
|
43
44
|
key: n,
|
|
44
45
|
href: a.url,
|
|
45
46
|
className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",
|
|
46
|
-
onClick:
|
|
47
|
+
onClick: C
|
|
47
48
|
},
|
|
48
49
|
a.text
|
|
49
50
|
))));
|
|
@@ -57,7 +58,7 @@ const x = (e) => {
|
|
|
57
58
|
)
|
|
58
59
|
},
|
|
59
60
|
/* @__PURE__ */ t.createElement(
|
|
60
|
-
|
|
61
|
+
N,
|
|
61
62
|
{
|
|
62
63
|
"aria-live": "polite",
|
|
63
64
|
"aria-describedby": e.id,
|
|
@@ -81,21 +82,15 @@ const x = (e) => {
|
|
|
81
82
|
)
|
|
82
83
|
}
|
|
83
84
|
),
|
|
84
|
-
/* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(
|
|
85
|
-
|
|
86
|
-
{
|
|
87
|
-
className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button"
|
|
88
|
-
},
|
|
89
|
-
/* @__PURE__ */ t.createElement(y, { icon: O })
|
|
90
|
-
)), l && /* @__PURE__ */ t.createElement(D, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
|
|
91
|
-
T,
|
|
85
|
+
/* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(b, null, /* @__PURE__ */ t.createElement(A, null, /* @__PURE__ */ t.createElement("span", { className: "k-event-title" }, E), e.collapsible && /* @__PURE__ */ t.createElement(O, { className: "k-event-collapse", fillMode: "flat", svgIcon: T })), l && /* @__PURE__ */ t.createElement(D, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
|
|
86
|
+
y,
|
|
92
87
|
{
|
|
93
88
|
transitionEnterDuration: e.transitionDuration || 400,
|
|
94
89
|
transitionExitDuration: e.transitionDuration || 400,
|
|
95
90
|
onBeforeEnter: () => m(!1),
|
|
96
91
|
onAfterExited: () => m(!0)
|
|
97
92
|
},
|
|
98
|
-
|
|
93
|
+
o ? d() : null
|
|
99
94
|
) : d())
|
|
100
95
|
)
|
|
101
96
|
);
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const gt=require("react"),Tt=require("prop-types"),kt=require("./TimelineCard.js"),vt=require("./utils.js"),M=require("@progress/kendo-svg-icons"),ht=require("@progress/kendo-react-intl"),b=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-buttons");function Et(l){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const T in l)if(T!=="default"){const I=Object.getOwnPropertyDescriptor(l,T);Object.defineProperty(p,T,I.get?I:{enumerable:!0,get:()=>l[T]})}}return p.default=l,Object.freeze(p)}const s=Et(gt),K=l=>{const I=ht.useInternationalization(),[O,X]=s.useState(!1),[L,Y]=s.useState(!0),[G,J]=s.useState(),[u,D]=s.useState(0),[A,Q]=s.useState(),[f,Z]=s.useState(0),[g,tt]=s.useState(0),[a,F]=s.useState(1),[d,y]=s.useState(),[i,et]=s.useState(),[R,W]=s.useState([0,0,0]),[_,U]=s.useState(0),[nt,st]=s.useState(1),m=s.useRef(null),c=s.useRef(null),P=s.useRef(null),{eventsData:rt,dateFormat:at,navigatable:ot,onActionClick:ct}=l,x=A?`${A}%`:"150px",k=s.useRef(new b.Navigation({tabIndex:0,root:m,selectors:[".k-timeline-scrollable-wrap"]}));s.useEffect(()=>{m.current&&l.navigatable&&(setTimeout(()=>{const t=k.current.first;t&&t.setAttribute("tabindex",String(0))},0),k.current.keyboardEvents={keydown:{ArrowRight:lt,ArrowLeft:ft,End:dt,Home:ut}})},[l.navigatable,a,f]),s.useEffect(()=>{k.current.update()});const it=t=>{ot&&k.current&&k.current.triggerKeyboardEvent(t)};s.useEffect(()=>{var r;const t=b.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(w),e=c.current,n=((r=m==null?void 0:m.current)==null?void 0:r.offsetWidth)||0;return t&&e&&t.observe(e),V(),w(),W([n,0,-n]),()=>{t&&t.disconnect()}},[]),s.useEffect(()=>{const t=c.current,e=t&&t.children[a];if(e){const n=e.offsetWidth,r=!(u>=0);if(X(r),i){const o=i.length*n>f*n*((u*-1+100)/100);Y(o)}(t==null?void 0:t.offsetWidth)*-u/100>=t.children.length*n&&(V(),w(),D((e.offsetLeft-e.offsetWidth)/(f*e.offsetWidth)*100*-1)),q(e)}},[f,A,a]);const lt=(t,e,n)=>{if(c.current){const r=c.current.children[a+1],o=r&&r.classList.contains("k-timeline-flag-wrap")?a+2:a+1;if(i&&i.length<=o)return;f+g<=o&&j(),h(o,n)}},ft=(t,e,n)=>{if(c.current){const r=c.current&&c.current.children[a-1],o=r&&r.classList.contains("k-timeline-flag-wrap")?a-2:a-1;if(o<=0)return;o<g&&$(),h(o,n)}},ut=(t,e,n)=>{if(c.current){if(a<=1)return;const r=1;N(!0,r,0,0),h(r,n)}},dt=(t,e,n)=>{if(c.current){const r=c.current&&c.current.children.length-1;if(r<=a)return;const o=Math.floor(r/f),E=o*-100,S=o*f;N(!0,r,S,E),h(r,n)}},V=()=>{const t=vt.addYearsFlags(rt);et(t),y([t[a-1],t[a],t[a+1]])},$=()=>{var e;if(c.current&&i){const n=g-f,r=g-1,o=i[r]&&((e=i[r])!=null&&e.yearFlag)?r-1:r,E=u+100>0?0:u+100;N(!1,o,n,E)}},j=()=>{if(c.current&&i){const e=g+f,n=i[e]&&i[e].yearFlag?e+1:e,r=u-100;N(!0,n,e,r)}},N=(t,e,n,r)=>{C(t,e),w(),tt(n),D(r),F(e)},C=(t,e)=>{if(d&&i){const n=v(t,nt),r=Object.assign([],d,{[n]:i[e]});y(r),st(n),U(t?-100:100),setTimeout(()=>{var H;const o=(H=m.current)==null?void 0:H.offsetWidth,E=Object.assign([],R,{[n]:0,[v(!0,n)]:o,[v(!1,n)]:o&&-o}),S=Object.assign([],r,{[v(!0,n)]:{},[v(!1,n)]:{}});y(S),W(E),U(0)},l.transitionDuration||300)}},v=(t,e)=>{const n=t?e+1:e-1;return d?n<0?d.length-1:n%d.length:0},q=t=>{var n;const e=(a-g)*t.offsetWidth+t.offsetWidth/2+(((n=P.current)==null?void 0:n.offsetWidth)||0);J(e)},h=(t,e)=>{e.preventDefault(),t>a?C(!0,t):t<a&&C(!1,t),F(t)},w=s.useCallback(()=>{const t=c.current,e=t&&t.children[a];if(t instanceof HTMLElement&&e){const n=Math.round(t.offsetWidth/150);q(e),Q(100/n),Z(n)}},[]),mt=()=>({transitionDuration:"300ms"}),z=t=>({transform:`translateX(${t}%)`,transformOrigin:"left top"});return s.createElement(s.Fragment,null,s.createElement("div",{className:"k-timeline-track-wrap",ref:m,onKeyDown:it},s.createElement(B.Button,{ref:P,"aria-hidden":"true",fillMode:"solid",rounded:"full",svgIcon:M.caretAltLeftIcon,icon:"caret-alt-left",onClick:()=>O&&$(),className:b.classNames("k-timeline-arrow","k-timeline-arrow-left",{"k-disabled":!O})}),s.createElement(B.Button,{"aria-hidden":"true",fillMode:"solid",rounded:"full",svgIcon:M.caretAltRightIcon,icon:"caret-alt-right",onClick:()=>L&&j(),className:b.classNames("k-timeline-arrow","k-timeline-arrow-right",{"k-disabled":!L})}),s.createElement("div",{className:"k-timeline-track"},s.createElement("ul",{ref:c,className:"k-timeline-scrollable-wrap",role:"tablist",tabIndex:0,style:{transform:`translateX(${u}%)`}},i&&i.map((t,e)=>t.yearFlag?s.createElement("li",{role:"none",className:"k-timeline-track-item k-timeline-flag-wrap",style:{flex:`1 0 ${x}`},key:e},s.createElement("span",{className:"k-timeline-flag"},t.yearFlag)):s.createElement("li",{role:"tab",className:b.classNames("k-timeline-track-item",{"k-focus":e===a}),"aria-selected":e===a,style:{flex:`1 0 ${x}`},key:e},s.createElement("div",{className:"k-timeline-date-wrap"},s.createElement("span",{className:"k-timeline-date"},I.formatDate(t.date,at))),s.createElement("span",{onClick:n=>h(e,n),className:"k-timeline-circle"})))))),s.createElement("div",{className:"k-timeline-events-list"},s.createElement("ul",{className:"k-timeline-scrollable-wrap",style:_===0?{...z(_)}:{...z(_),...mt()}},d&&d.map((t,e)=>s.createElement("li",{key:e,className:"k-timeline-event",style:{transform:`translate3d(${R[e]}px, 0px, 0px)`}},t&&s.createElement(kt.TimelineCard,{tabindex:R[e]===0?0:-1,eventData:t,onActionClick:ct,horizontal:!0,collapsible:!1,calloutStyle:{left:`${G}px`}}))))))};K.propTypes={onActionClick:Tt.func};exports.TimelineHorizontal=K;
|