@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
81 lines (80 loc) • 2.21 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as e from "react";
import y from "prop-types";
import { validatePackage as M, getLicenseMessage as E, classNames as T, WatermarkOverlay as W } from "@progress/kendo-react-common";
import { TimelineHorizontal as b } from "./TimelineHorizontal.mjs";
import { TimelineVertical as x } from "./TimelineVertical.mjs";
import { packageMetadata as m } from "../package-metadata.mjs";
const N = (p) => {
const f = !M(m, { component: "Timeline" }), d = E(m), k = {
alterMode: !1,
collapsibleEvents: !1,
dateFormat: "MMM dd, yyyy",
...p
}, {
collapsibleEvents: i,
transitionDuration: s,
className: g,
alterMode: n,
navigatable: r,
horizontal: t,
events: o,
dateFormat: l,
onChange: v,
onActionClick: c
} = k, [h, u] = e.useState(), a = e.useRef(null);
return e.useEffect(() => {
a.current && u(a.current.offsetWidth);
}, []), /* @__PURE__ */ e.createElement(
"div",
{
ref: a,
className: T(
"k-timeline",
{
"k-timeline-collapsible": i,
"k-timeline-vertical": !t,
"k-timeline-alternating": n,
"k-timeline-horizontal": t
},
g
),
style: { width: `${h}px` }
},
t ? /* @__PURE__ */ e.createElement(
b,
{
navigatable: r,
eventsData: o,
dateFormat: l,
transitionDuration: s,
onActionClick: c
}
) : /* @__PURE__ */ e.createElement(
x,
{
navigatable: r,
eventsData: o,
dateFormat: l,
alterMode: n,
collapsibleEvents: i,
transitionDuration: s,
onChange: v,
onActionClick: c
}
),
f && /* @__PURE__ */ e.createElement(W, { message: d })
);
};
N.propTypes = {
className: y.string
};
export {
N as Timeline
};