@progress/kendo-react-layout 5.14.0-dev.202305301859 → 5.14.0-dev.202305311028

package/dist/es/main.d.ts

@@ -88,5 +88,7 @@ export * from './actionsheet/interfaces/ActionSheetItemProps';
 export * from './actionsheet/ActionSheetHeader';
 export * from './actionsheet/ActionSheetContent';
 export * from './actionsheet/ActionSheetFooter';
+export * from './timeline/Timeline';
+export * from './timeline/utils';
 export * from './contextmenu/ContextMenu';
 export * from './expansionpanel';

package/dist/es/main.js

@@ -88,5 +88,7 @@ export * from './actionsheet/interfaces/ActionSheetItemProps';
 export * from './actionsheet/ActionSheetHeader';
 export * from './actionsheet/ActionSheetContent';
 export * from './actionsheet/ActionSheetFooter';
+export * from './timeline/Timeline';
+export * from './timeline/utils';
 export * from './contextmenu/ContextMenu';
 export * from './expansionpanel';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1685471305,
+    publishDate: 1685527085,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/timeline/Timeline.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ToggleEventProps } from './TimelineCard';
+export interface TimelineEventProps {
+    /**
+     * Specifies the text that is rendered as body of the event card.
+     */
+    description: string;
+    /**
+     * Represent event point on the axis.
+     */
+    date: Date;
+    /**
+     * Specifies the text that is rendered as title.
+     */
+    title: string;
+    /**
+     * Specifies the text that is rendered under the title.
+     */
+    subtitle?: string;
+    /**
+     * Specifies the images that are rendered under the description.
+     */
+    images?: {
+        src: string;
+        alt?: string;
+    }[];
+    /**
+     * Specifies the corresponding links that are rendered under the images.
+     */
+    actions?: {
+        text: string;
+        url: string;
+    }[];
+}
+export interface TimelineProps {
+    events: TimelineEventProps[];
+    /**
+     * Specifies the CSS class names which are set to the Timeline.
+     */
+    className?: string;
+    /**
+     * Specifies option for expanding and collapsing the event card.
+     */
+    collapsibleEvents?: boolean;
+    /**
+     * @hidden
+     */
+    horizontal?: boolean;
+    /**
+     * The date format for displaying the event date.
+     */
+    dateFormat?: string;
+    /**
+     * Render events alternatingly on both sides of the axis.
+     */
+    alterMode?: boolean;
+    /**
+     * An event that is called when event card is toggled.
+     */
+    onChange?: (event: ToggleEventProps) => void;
+    /**
+     * An event that is called when card action is clicked.
+     */
+    onActionClick?: (event: {
+        eventData: TimelineEventProps;
+    }) => void;
+}
+export declare const Timeline: React.FunctionComponent<TimelineProps>;

package/dist/es/timeline/Timeline.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { TimelineCard } from './TimelineCard';
+import { classNames } from '@progress/kendo-react-common';
+import { useInternationalization } from '@progress/kendo-react-intl';
+export var Timeline = function (props) {
+    var collapsibleEvents = props.collapsibleEvents, className = props.className, alterMode = props.alterMode, horizontal = props.horizontal, events = props.events, dateFormat = props.dateFormat, onChange = props.onChange, onActionClick = props.onActionClick;
+    var intl = useInternationalization();
+    var yearPoint = undefined;
+    var setYearPoint = function (year) {
+        yearPoint = year;
+        return (React.createElement("li", { className: "k-timeline-flag-wrap" },
+            React.createElement("span", { className: "k-timeline-flag" }, year)));
+    };
+    var timelineVertical = function () { return (React.createElement("ul", null, events.map(function (eventData, index) {
+        return (React.createElement(React.Fragment, { key: index },
+            yearPoint !== eventData.date.getFullYear() && setYearPoint(eventData.date.getFullYear()),
+            React.createElement("li", { className: classNames('k-timeline-event', { 'k-reverse': index % 2 === 0 }) },
+                React.createElement("div", { className: "k-timeline-date-wrap" },
+                    React.createElement("span", { className: "k-timeline-date" }, intl.formatDate(eventData.date, dateFormat))),
+                React.createElement("a", { className: "k-timeline-circle" }),
+                React.createElement(TimelineCard, { eventData: eventData, alternated: alterMode && index % 2 === 0, collapsible: collapsibleEvents, onChange: onChange, onActionClick: onActionClick }))));
+    }))); };
+    return (React.createElement("div", { className: classNames('k-timeline', 'k-timeline-collapsible', {
+            'k-timeline-collapsible': collapsibleEvents,
+            'k-timeline-vertical': !horizontal,
+            'k-timeline-alternating': alterMode,
+            'k-timeline-horizontal': horizontal
+        }, className) }, timelineVertical()));
+};
+Timeline.defaultProps = {
+    alterMode: true,
+    collapsibleEvents: true,
+    dateFormat: 'MMM dd, yyyy'
+};
+Timeline.propTypes = {
+    className: PropTypes.string
+};

package/dist/es/timeline/TimelineCard.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { TimelineEventProps } from './Timeline';
+/**
+ * @hidden
+ */
+interface TimelineCardProps {
+    eventData: TimelineEventProps;
+    alternated?: boolean;
+    collapsible?: boolean;
+    onChange?: (event: ToggleEventProps) => void;
+    onActionClick?: (event: {
+        eventData: TimelineEventProps;
+    }) => void;
+}
+export interface ToggleEventProps {
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent?: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent?: any;
+    /**
+     * The selected card value.
+     */
+    eventData: TimelineEventProps;
+}
+export declare const TimelineCard: React.FunctionComponent<TimelineCardProps>;
+export {};

package/dist/es/timeline/TimelineCard.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Card } from '../card/Card';
+import { CardHeader } from '../card/CardHeader';
+import { CardTitle } from '../card/CardTitle';
+import { CardSubtitle } from '../card/CardSubtitle';
+import { CardBody } from '../card/CardBody';
+import { CardImage } from '../card/CardImage';
+import { CardActions } from '../card/CardActions';
+import { Button } from '@progress/kendo-react-buttons';
+import { classNames } from '@progress/kendo-react-common';
+import { Reveal } from '@progress/kendo-react-animation';
+import { chevronRightIcon } from '@progress/kendo-svg-icons';
+export var TimelineCard = function (props) {
+    var animationDuration = 400;
+    var _a = props.eventData, title = _a.title, subtitle = _a.subtitle, actions = _a.actions, images = _a.images, description = _a.description;
+    var _b = React.useState(true), collapse = _b[0], setCollapse = _b[1];
+    var _c = React.useState(true), collapsed = _c[0], setCollapsed = _c[1];
+    var toggleCard = function (event) {
+        setCollapse(!collapse);
+        if (props.onChange) {
+            var toggleEvent = {
+                syntheticEvent: event,
+                nativeEvent: event.nativeEvent,
+                eventData: props.eventData
+            };
+            props.onChange.call(undefined, toggleEvent);
+        }
+    };
+    var actionClick = function () {
+        if (props.onActionClick) {
+            var actionClickEvent = {
+                eventData: props.eventData
+            };
+            props.onActionClick.call(undefined, actionClickEvent);
+        }
+    };
+    return (React.createElement("div", { className: classNames('k-timeline-card', { 'k-collapsed': collapsed }) },
+        React.createElement(Card, { className: "k-card-with-callout" },
+            React.createElement("span", { className: classNames('k-timeline-card-callout', 'k-card-callout', { 'k-callout-e': props.alternated }, { 'k-callout-w': !props.alternated }) }),
+            React.createElement(CardHeader, null,
+                React.createElement(CardTitle, null,
+                    React.createElement("span", { className: "k-event-title" }, title),
+                    props.collapsible && React.createElement(Button, { fillMode: 'flat', icon: 'chevron-right', svgIcon: chevronRightIcon, onClick: function (event) { return toggleCard(event); }, className: 'k-event-collapse' })),
+                subtitle && React.createElement(CardSubtitle, null, subtitle)),
+            React.createElement(Reveal, { transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, onBeforeEnter: function () { return setCollapsed(false); }, onAfterExited: function () { return setCollapsed(true); } }, !collapse ? React.createElement(CardBody, null,
+                React.createElement("div", { className: "k-card-description" },
+                    React.createElement("p", null, description),
+                    images && images.map(function (image, index) { return (React.createElement(CardImage, { key: index, src: image.src })); })),
+                React.createElement(CardActions, null, actions && actions.map(function (action, index) { return (React.createElement("a", { key: index, href: action.url, className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary", onClick: actionClick }, action.text)); })))
+                : null))));
+};
+TimelineCard.propTypes = {
+    onChange: PropTypes.func,
+    onActionClick: PropTypes.func
+};

package/dist/es/timeline/utils.d.ts

@@ -0,0 +1,5 @@
+import { TimelineEventProps } from './Timeline';
+/**
+ * Sort the events list based on event date.
+ */
+export declare const sortEventList: (eventList: TimelineEventProps[]) => TimelineEventProps[];

package/dist/es/timeline/utils.js

@@ -0,0 +1,9 @@
+/**
+ * Sort the events list based on event date.
+ */
+export var sortEventList = function (eventList) {
+    var sortedEvents = eventList.sort(function (a, b) {
+        return a.date.getTime() - b.date.getTime();
+    });
+    return sortedEvents;
+};

package/dist/npm/main.d.ts

@@ -88,5 +88,7 @@ export * from './actionsheet/interfaces/ActionSheetItemProps';
 export * from './actionsheet/ActionSheetHeader';
 export * from './actionsheet/ActionSheetContent';
 export * from './actionsheet/ActionSheetFooter';
+export * from './timeline/Timeline';
+export * from './timeline/utils';
 export * from './contextmenu/ContextMenu';
 export * from './expansionpanel';

package/dist/npm/main.js

@@ -109,5 +109,7 @@ __exportStar(require("./actionsheet/interfaces/ActionSheetItemProps"), exports);
 __exportStar(require("./actionsheet/ActionSheetHeader"), exports);
 __exportStar(require("./actionsheet/ActionSheetContent"), exports);
 __exportStar(require("./actionsheet/ActionSheetFooter"), exports);
+__exportStar(require("./timeline/Timeline"), exports);
+__exportStar(require("./timeline/utils"), exports);
 __exportStar(require("./contextmenu/ContextMenu"), exports);
 __exportStar(require("./expansionpanel"), exports);

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1685471305,
+    publishDate: 1685527085,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/timeline/Timeline.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ToggleEventProps } from './TimelineCard';
+export interface TimelineEventProps {
+    /**
+     * Specifies the text that is rendered as body of the event card.
+     */
+    description: string;
+    /**
+     * Represent event point on the axis.
+     */
+    date: Date;
+    /**
+     * Specifies the text that is rendered as title.
+     */
+    title: string;
+    /**
+     * Specifies the text that is rendered under the title.
+     */
+    subtitle?: string;
+    /**
+     * Specifies the images that are rendered under the description.
+     */
+    images?: {
+        src: string;
+        alt?: string;
+    }[];
+    /**
+     * Specifies the corresponding links that are rendered under the images.
+     */
+    actions?: {
+        text: string;
+        url: string;
+    }[];
+}
+export interface TimelineProps {
+    events: TimelineEventProps[];
+    /**
+     * Specifies the CSS class names which are set to the Timeline.
+     */
+    className?: string;
+    /**
+     * Specifies option for expanding and collapsing the event card.
+     */
+    collapsibleEvents?: boolean;
+    /**
+     * @hidden
+     */
+    horizontal?: boolean;
+    /**
+     * The date format for displaying the event date.
+     */
+    dateFormat?: string;
+    /**
+     * Render events alternatingly on both sides of the axis.
+     */
+    alterMode?: boolean;
+    /**
+     * An event that is called when event card is toggled.
+     */
+    onChange?: (event: ToggleEventProps) => void;
+    /**
+     * An event that is called when card action is clicked.
+     */
+    onActionClick?: (event: {
+        eventData: TimelineEventProps;
+    }) => void;
+}
+export declare const Timeline: React.FunctionComponent<TimelineProps>;

package/dist/npm/timeline/Timeline.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = void 0;
+var React = require("react");
+var PropTypes = require("prop-types");
+var TimelineCard_1 = require("./TimelineCard");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var Timeline = function (props) {
+    var collapsibleEvents = props.collapsibleEvents, className = props.className, alterMode = props.alterMode, horizontal = props.horizontal, events = props.events, dateFormat = props.dateFormat, onChange = props.onChange, onActionClick = props.onActionClick;
+    var intl = (0, kendo_react_intl_1.useInternationalization)();
+    var yearPoint = undefined;
+    var setYearPoint = function (year) {
+        yearPoint = year;
+        return (React.createElement("li", { className: "k-timeline-flag-wrap" },
+            React.createElement("span", { className: "k-timeline-flag" }, year)));
+    };
+    var timelineVertical = function () { return (React.createElement("ul", null, events.map(function (eventData, index) {
+        return (React.createElement(React.Fragment, { key: index },
+            yearPoint !== eventData.date.getFullYear() && setYearPoint(eventData.date.getFullYear()),
+            React.createElement("li", { className: (0, kendo_react_common_1.classNames)('k-timeline-event', { 'k-reverse': index % 2 === 0 }) },
+                React.createElement("div", { className: "k-timeline-date-wrap" },
+                    React.createElement("span", { className: "k-timeline-date" }, intl.formatDate(eventData.date, dateFormat))),
+                React.createElement("a", { className: "k-timeline-circle" }),
+                React.createElement(TimelineCard_1.TimelineCard, { eventData: eventData, alternated: alterMode && index % 2 === 0, collapsible: collapsibleEvents, onChange: onChange, onActionClick: onActionClick }))));
+    }))); };
+    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-timeline', 'k-timeline-collapsible', {
+            'k-timeline-collapsible': collapsibleEvents,
+            'k-timeline-vertical': !horizontal,
+            'k-timeline-alternating': alterMode,
+            'k-timeline-horizontal': horizontal
+        }, className) }, timelineVertical()));
+};
+exports.Timeline = Timeline;
+exports.Timeline.defaultProps = {
+    alterMode: true,
+    collapsibleEvents: true,
+    dateFormat: 'MMM dd, yyyy'
+};
+exports.Timeline.propTypes = {
+    className: PropTypes.string
+};

package/dist/npm/timeline/TimelineCard.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { TimelineEventProps } from './Timeline';
+/**
+ * @hidden
+ */
+interface TimelineCardProps {
+    eventData: TimelineEventProps;
+    alternated?: boolean;
+    collapsible?: boolean;
+    onChange?: (event: ToggleEventProps) => void;
+    onActionClick?: (event: {
+        eventData: TimelineEventProps;
+    }) => void;
+}
+export interface ToggleEventProps {
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent?: React.SyntheticEvent<any>;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent?: any;
+    /**
+     * The selected card value.
+     */
+    eventData: TimelineEventProps;
+}
+export declare const TimelineCard: React.FunctionComponent<TimelineCardProps>;
+export {};

package/dist/npm/timeline/TimelineCard.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineCard = void 0;
+var React = require("react");
+var PropTypes = require("prop-types");
+var Card_1 = require("../card/Card");
+var CardHeader_1 = require("../card/CardHeader");
+var CardTitle_1 = require("../card/CardTitle");
+var CardSubtitle_1 = require("../card/CardSubtitle");
+var CardBody_1 = require("../card/CardBody");
+var CardImage_1 = require("../card/CardImage");
+var CardActions_1 = require("../card/CardActions");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_animation_1 = require("@progress/kendo-react-animation");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var TimelineCard = function (props) {
+    var animationDuration = 400;
+    var _a = props.eventData, title = _a.title, subtitle = _a.subtitle, actions = _a.actions, images = _a.images, description = _a.description;
+    var _b = React.useState(true), collapse = _b[0], setCollapse = _b[1];
+    var _c = React.useState(true), collapsed = _c[0], setCollapsed = _c[1];
+    var toggleCard = function (event) {
+        setCollapse(!collapse);
+        if (props.onChange) {
+            var toggleEvent = {
+                syntheticEvent: event,
+                nativeEvent: event.nativeEvent,
+                eventData: props.eventData
+            };
+            props.onChange.call(undefined, toggleEvent);
+        }
+    };
+    var actionClick = function () {
+        if (props.onActionClick) {
+            var actionClickEvent = {
+                eventData: props.eventData
+            };
+            props.onActionClick.call(undefined, actionClickEvent);
+        }
+    };
+    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-timeline-card', { 'k-collapsed': collapsed }) },
+        React.createElement(Card_1.Card, { className: "k-card-with-callout" },
+            React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-timeline-card-callout', 'k-card-callout', { 'k-callout-e': props.alternated }, { 'k-callout-w': !props.alternated }) }),
+            React.createElement(CardHeader_1.CardHeader, null,
+                React.createElement(CardTitle_1.CardTitle, null,
+                    React.createElement("span", { className: "k-event-title" }, title),
+                    props.collapsible && React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', icon: 'chevron-right', svgIcon: kendo_svg_icons_1.chevronRightIcon, onClick: function (event) { return toggleCard(event); }, className: 'k-event-collapse' })),
+                subtitle && React.createElement(CardSubtitle_1.CardSubtitle, null, subtitle)),
+            React.createElement(kendo_react_animation_1.Reveal, { transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, onBeforeEnter: function () { return setCollapsed(false); }, onAfterExited: function () { return setCollapsed(true); } }, !collapse ? React.createElement(CardBody_1.CardBody, null,
+                React.createElement("div", { className: "k-card-description" },
+                    React.createElement("p", null, description),
+                    images && images.map(function (image, index) { return (React.createElement(CardImage_1.CardImage, { key: index, src: image.src })); })),
+                React.createElement(CardActions_1.CardActions, null, actions && actions.map(function (action, index) { return (React.createElement("a", { key: index, href: action.url, className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary", onClick: actionClick }, action.text)); })))
+                : null))));
+};
+exports.TimelineCard = TimelineCard;
+exports.TimelineCard.propTypes = {
+    onChange: PropTypes.func,
+    onActionClick: PropTypes.func
+};

package/dist/npm/timeline/utils.d.ts

@@ -0,0 +1,5 @@
+import { TimelineEventProps } from './Timeline';
+/**
+ * Sort the events list based on event date.
+ */
+export declare const sortEventList: (eventList: TimelineEventProps[]) => TimelineEventProps[];

package/dist/npm/timeline/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sortEventList = void 0;
+/**
+ * Sort the events list based on event date.
+ */
+var sortEventList = function (eventList) {
+    var sortedEvents = eventList.sort(function (a, b) {
+        return a.date.getTime() - b.date.getTime();
+    });
+    return sortedEvents;
+};
+exports.sortEventList = sortEventList;