@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.16 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 h from "prop-types";
import { validatePackage as y, classNames as E, WatermarkOverlay as T } from "@progress/kendo-react-common";
import { TimelineHorizontal as g } from "./TimelineHorizontal.mjs";
import { TimelineVertical as M } from "./TimelineVertical.mjs";
import { packageMetadata as W } from "../package-metadata.mjs";
const b = (c) => {
const p = !y(W, { component: "Timeline" }), f = {
alterMode: !1,
collapsibleEvents: !1,
dateFormat: "MMM dd, yyyy",
...c
}, {
collapsibleEvents: i,
transitionDuration: r,
className: d,
alterMode: n,
navigatable: l,
horizontal: t,
events: o,
dateFormat: s,
onChange: k,
onActionClick: m
} = f, [v, u] = e.useState(), a = e.useRef(null);
return e.useEffect(() => {
a.current && u(a.current.offsetWidth);
}, []), /* @__PURE__ */ e.createElement(
"div",
{
ref: a,
className: E(
"k-timeline",
{
"k-timeline-collapsible": i,
"k-timeline-vertical": !t,
"k-timeline-alternating": n,
"k-timeline-horizontal": t
},
d
),
style: { width: `${v}px` }
},
t ? /* @__PURE__ */ e.createElement(
g,
{
navigatable: l,
eventsData: o,
dateFormat: s,
transitionDuration: r,
onActionClick: m
}
) : /* @__PURE__ */ e.createElement(
M,
{
navigatable: l,
eventsData: o,
dateFormat: s,
alterMode: n,
collapsibleEvents: i,
transitionDuration: r,
onChange: k,
onActionClick: m
}
),
p && /* @__PURE__ */ e.createElement(T, null)
);
};
b.propTypes = {
className: h.string
};
export {
b as Timeline
};