@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
101 lines (100 loc) • 4.06 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 t from "react";
import s from "prop-types";
import { Card as N } from "../card/Card.mjs";
import { CardHeader as b } from "../card/CardHeader.mjs";
import { CardTitle as A } from "../card/CardTitle.mjs";
import { CardSubtitle as D } from "../card/CardSubtitle.mjs";
import { CardBody as h } from "../card/CardBody.mjs";
import { CardImage as I } from "../card/CardImage.mjs";
import { CardActions as g } from "../card/CardActions.mjs";
import { classNames as u } from "@progress/kendo-react-common";
import { Reveal as y } from "@progress/kendo-react-animation";
import { chevronRightIcon as T } from "@progress/kendo-svg-icons";
import { Button as O } from "@progress/kendo-react-buttons";
const x = (e) => {
const { title: E, subtitle: l, actions: i, images: o, description: v } = e.eventData, [c, k] = t.useState(e.eventData.opened || !1), [r, m] = t.useState(e.eventData.opened || !!e.collapsible), f = (a) => {
if (k(!c), e.onChange) {
const n = {
syntheticEvent: a,
nativeEvent: a.nativeEvent,
eventData: e.eventData
};
e.onChange.call(void 0, n);
}
}, C = (a) => {
if (e.onActionClick) {
const n = {
syntheticEvent: a,
nativeEvent: a.nativeEvent,
eventData: e.eventData
};
e.onActionClick.call(void 0, n);
}
}, 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), o && o.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(
"a",
{
key: n,
href: a.url,
className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",
onClick: C
},
a.text
))));
return /* @__PURE__ */ t.createElement(
"div",
{
"data-testid": "k-timeline-card",
className: u("k-timeline-card", { "k-collapsed": e.collapsible && r })
},
/* @__PURE__ */ t.createElement(
N,
{
"aria-live": "polite",
"aria-describedby": e.id,
"aria-atomic": "true",
tabIndex: e.tabindex,
role: e.horizontal ? "tabpanel" : "button",
"aria-expanded": e.collapsible && r,
className: "k-card-with-callout",
onClick: (a) => f(a)
},
/* @__PURE__ */ t.createElement(
"span",
{
style: e.calloutStyle,
className: u(
"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 }
)
}
),
/* @__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(
y,
{
transitionEnterDuration: e.transitionDuration || 400,
transitionExitDuration: e.transitionDuration || 400,
onBeforeEnter: () => m(!1),
onAfterExited: () => m(!0)
},
c ? d() : null
) : d())
)
);
};
x.propTypes = {
onChange: s.func,
onActionClick: s.func
};
export {
x as TimelineCard
};