@progress/kendo-react-layout 5.15.0-dev.202307112015 → 5.15.0-dev.202307131533

package/dist/npm/timeline/TimelineCard.js

@@ -10,17 +10,16 @@ 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 ANIMATION_DURATION = 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 _b = React.useState(props.eventData.opened || false), open = _b[0], setOpen = _b[1];
+    var _c = React.useState(props.eventData.opened || !!props.collapsible), opened = _c[0], setOpened = _c[1];
     var toggleCard = function (event) {
-        setCollapse(!collapse);
+        setOpen(!open);
         if (props.onChange) {
             var toggleEvent = {
                 syntheticEvent: event,
@@ -40,22 +39,24 @@ var TimelineCard = function (props) {
             props.onActionClick.call(undefined, actionClickEvent);
         }
     };
-    var cardBody = function () { return (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 })); })),
+    var cardBody = function () { return (React.createElement(React.Fragment, null,
+        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)); })))); };
-    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-timeline-card', { 'k-collapsed': props.collapsible && 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("div", { className: "k-card-inner" },
+    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
+        React.createElement(Card_1.Card, { "aria-live": "polite", "aria-describedby": props.id, "aria-atomic": "true", tabIndex: props.tabindex, role: props.horizontal ? 'tabpanel' : 'button', "aria-expanded": props.collapsible && opened },
+            React.createElement("span", { style: props.calloutStyle, className: (0, kendo_react_common_1.classNames)('k-timeline-card-callout', 'k-card-callout', { 'k-callout-n': props.horizontal }, { 'k-callout-e': props.alternated && !props.horizontal }, { 'k-callout-w': !props.alternated && !props.horizontal }) }),
+            React.createElement("div", { className: 'k-card-inner' },
                 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' })),
+                        props.collapsible && React.createElement("span", { onClick: function (event) { return toggleCard(event); }, className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button" },
+                            React.createElement(kendo_react_common_1.SvgIcon, { icon: kendo_svg_icons_1.chevronRightIcon }))),
                     subtitle && React.createElement(CardSubtitle_1.CardSubtitle, null, subtitle)),
-                props.collapsible ?
-                    React.createElement(kendo_react_animation_1.Reveal, { transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, onBeforeEnter: function () { return setCollapsed(false); }, onAfterExited: function () { return setCollapsed(true); } }, !collapse ? cardBody() : null)
+                props.collapsible
+                    ? React.createElement(kendo_react_animation_1.Reveal, { transitionEnterDuration: props.transitionDuration || ANIMATION_DURATION, transitionExitDuration: props.transitionDuration || ANIMATION_DURATION, onBeforeEnter: function () { return setOpened(false); }, onAfterExited: function () { return setOpened(true); } }, open ? cardBody() : null)
                     : cardBody()))));
 };
 exports.TimelineCard = TimelineCard;

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TimelineDirectionsProps } from './Timeline';
+export declare const TimelineHorizontal: React.FunctionComponent<TimelineDirectionsProps>;

package/dist/npm/timeline/TimelineHorizontal.js

@@ -0,0 +1,209 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineHorizontal = void 0;
+var React = require("react");
+var PropTypes = require("prop-types");
+var TimelineCard_1 = require("./TimelineCard");
+var utils_1 = require("./utils");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var TimelineHorizontal = function (props) {
+    var DEFAULT_EVENT_POINT_WITH = 150;
+    var EVENT_CARD_TRANSITION_DURATION = 300;
+    var intl = (0, kendo_react_intl_1.useInternationalization)();
+    var _a = React.useState(false), arrowLeft = _a[0], setArrowLeft = _a[1];
+    var _b = React.useState(true), arrowRight = _b[0], setArrowRight = _b[1];
+    var _c = React.useState(), calloutOffset = _c[0], setCalloutOffset = _c[1];
+    var _d = React.useState(0), translate = _d[0], setTranslate = _d[1];
+    var _e = React.useState(), tabFlexWith = _e[0], setTabFlexWith = _e[1];
+    var _f = React.useState(0), visibleTabs = _f[0], setVisibleTabs = _f[1];
+    var _g = React.useState(0), firstIndexInView = _g[0], setFirstIndexInView = _g[1];
+    var _h = React.useState(1), currentEvent = _h[0], setCurrentEvent = _h[1];
+    var _j = React.useState(), eventsToShow = _j[0], setEventsToShow = _j[1];
+    var _k = React.useState(), eventsOnTrack = _k[0], setEventsOnTrack = _k[1];
+    var _l = React.useState([0, 0, 0]), eventsPositions = _l[0], setEventsPositions = _l[1];
+    var _m = React.useState(0), eventsTranslate = _m[0], setEventsTranslate = _m[1];
+    var _o = React.useState(1), pivotEvent = _o[0], setPivotEvent = _o[1];
+    var trackWrapRef = React.useRef(null);
+    var trackRef = React.useRef(null);
+    var arrowLeftRef = React.useRef(null);
+    var tabWith = tabFlexWith ? "".concat(tabFlexWith, "%") : "".concat(DEFAULT_EVENT_POINT_WITH, "px");
+    var eventsData = props.eventsData, dateFormat = props.dateFormat, onActionClick = props.onActionClick;
+    React.useEffect(function () {
+        var _a;
+        var observerResize = kendo_react_common_1.canUseDOM && window.ResizeObserver && new window.ResizeObserver(repositionEvents);
+        var trackList = trackRef.current;
+        var cardWith = ((_a = trackWrapRef === null || trackWrapRef === void 0 ? void 0 : trackWrapRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        if (observerResize && trackList) {
+            observerResize.observe(trackList);
+        }
+        setYearsFlags();
+        repositionEvents();
+        setEventsPositions([cardWith, 0, -cardWith]);
+        return function () {
+            observerResize.disconnect();
+        };
+    }, []);
+    React.useEffect(function () {
+        var trackList = trackRef.current;
+        var currentTab = trackList && trackList.children[currentEvent];
+        if (currentTab) {
+            var tabWidth = currentTab.offsetWidth;
+            var leftArrow = !(translate >= 0);
+            setArrowLeft(leftArrow);
+            if (eventsOnTrack) {
+                var rightArrow = eventsOnTrack.length * tabWidth > (visibleTabs * tabWidth) * (((translate * -1) + 100) / 100);
+                setArrowRight(rightArrow);
+            }
+            if (((trackList === null || trackList === void 0 ? void 0 : trackList.offsetWidth) * -translate) / 100 >= trackList.children.length * tabWidth) {
+                // TODO: on resize window reposition
+                setYearsFlags();
+                repositionEvents();
+                setTranslate((((currentTab.offsetLeft - currentTab.offsetWidth) / (visibleTabs * currentTab.offsetWidth)) * 100) * -1);
+            }
+            positionCallout(currentTab);
+        }
+    }, [visibleTabs, tabFlexWith, currentEvent]);
+    var setYearsFlags = function () {
+        var trackData = (0, utils_1.addYearsFlags)(eventsData);
+        setEventsOnTrack(trackData);
+        setEventsToShow([trackData[currentEvent - 1], trackData[currentEvent], trackData[currentEvent + 1]]);
+    };
+    var handlePrevClick = function () {
+        var _a;
+        var trackList = trackRef.current;
+        if (trackList && eventsOnTrack) {
+            var firstTabToUpdate = firstIndexInView - visibleTabs;
+            var lastIndexInView = firstIndexInView - 1;
+            var currentEventToUpdate = eventsOnTrack[lastIndexInView] && ((_a = eventsOnTrack[lastIndexInView]) === null || _a === void 0 ? void 0 : _a.yearFlag)
+                ? lastIndexInView - 1
+                : lastIndexInView;
+            var translateUpdate = translate + 100 > 0 ? 0 : translate + 100;
+            updatePage(false, currentEventToUpdate);
+            repositionEvents();
+            setFirstIndexInView(firstTabToUpdate);
+            setTranslate(translateUpdate);
+            setCurrentEvent(currentEventToUpdate);
+        }
+    };
+    var handleNextClick = function () {
+        var trackList = trackRef.current;
+        if (trackList && eventsOnTrack) {
+            var firstTabToUpdate = firstIndexInView + visibleTabs;
+            var currentEventToUpdate = eventsOnTrack[firstTabToUpdate] && eventsOnTrack[firstTabToUpdate].yearFlag
+                ? firstTabToUpdate + 1
+                : firstTabToUpdate;
+            var translateUpdate = translate - 100;
+            updatePage(true, currentEventToUpdate);
+            repositionEvents();
+            setFirstIndexInView(firstTabToUpdate);
+            setTranslate(translateUpdate);
+            setCurrentEvent(currentEventToUpdate);
+        }
+    };
+    var updatePage = function (forward, current) {
+        var _a;
+        if (eventsToShow && eventsOnTrack) {
+            var pageToUpdateIndex_1 = getPivotIndex(forward, pivotEvent);
+            var eventCardsArray_1 = Object.assign([], eventsToShow, (_a = {}, _a[pageToUpdateIndex_1] = eventsOnTrack[current], _a));
+            setEventsToShow(eventCardsArray_1);
+            setPivotEvent(pageToUpdateIndex_1);
+            setEventsTranslate(forward ? -100 : 100);
+            setTimeout(function () {
+                var _a, _b;
+                var _c;
+                var cardWith = (_c = trackWrapRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+                var repositionArray = Object.assign([], eventsPositions, (_a = {},
+                    _a[pageToUpdateIndex_1] = 0,
+                    _a[getPivotIndex(true, pageToUpdateIndex_1)] = cardWith,
+                    _a[getPivotIndex(false, pageToUpdateIndex_1)] = cardWith && -cardWith,
+                    _a));
+                var clearEventsArray = Object.assign([], eventCardsArray_1, (_b = {},
+                    _b[getPivotIndex(true, pageToUpdateIndex_1)] = {},
+                    _b[getPivotIndex(false, pageToUpdateIndex_1)] = {},
+                    _b));
+                setEventsToShow(clearEventsArray);
+                setEventsPositions(repositionArray);
+                setEventsTranslate(0);
+            }, props.transitionDuration || EVENT_CARD_TRANSITION_DURATION);
+        }
+    };
+    var getPivotIndex = function (forward, index) {
+        var pageIndex = forward ? index + 1 : index - 1;
+        if (eventsToShow) {
+            var validIndex = pageIndex < 0
+                ? eventsToShow.length - 1
+                : pageIndex % eventsToShow.length;
+            return validIndex;
+        }
+        return 0;
+    };
+    var positionCallout = function (element) {
+        var _a;
+        var offsetToSet = ((currentEvent - firstIndexInView) * element.offsetWidth) +
+            (element.offsetWidth / 2) +
+            (((_a = arrowLeftRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+        setCalloutOffset(offsetToSet);
+    };
+    var onPointClick = function (index, event) {
+        event.preventDefault();
+        if (index > currentEvent) {
+            updatePage(true, index);
+        }
+        else if (index < currentEvent) {
+            updatePage(false, index);
+        }
+        setCurrentEvent(index);
+    };
+    var repositionEvents = React.useCallback(function () {
+        var trackList = trackRef.current;
+        var currentTab = trackList && trackList.children[currentEvent];
+        if (trackList instanceof HTMLElement && currentTab) {
+            var visibleTabsCount = Math.round(trackList.offsetWidth / DEFAULT_EVENT_POINT_WITH);
+            positionCallout(currentTab);
+            setTabFlexWith(100 / visibleTabsCount);
+            setVisibleTabs(visibleTabsCount);
+        }
+    }, []);
+    var eventCardAnimationStyle = function () { return ({
+        transitionDuration: "".concat(EVENT_CARD_TRANSITION_DURATION, "ms")
+    }); };
+    var eventCardReorderStyle = function (translation) { return ({
+        transform: "translateX(".concat(translation, "%)"), transformOrigin: 'left top'
+    }); };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "k-timeline-track-wrap", ref: trackWrapRef },
+            React.createElement("a", { ref: arrowLeftRef, "aria-hidden": "true", onClick: function () { return arrowLeft && handlePrevClick(); }, className: (0, kendo_react_common_1.classNames)('k-timeline-arrow', 'k-timeline-arrow-left', 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button', { 'k-disabled': !arrowLeft }) },
+                React.createElement(kendo_react_common_1.SvgIcon, { icon: kendo_svg_icons_1.caretAltLeftIcon })),
+            React.createElement("a", { "aria-hidden": "true", onClick: function () { return arrowRight && handleNextClick(); }, className: (0, kendo_react_common_1.classNames)('k-timeline-arrow', 'k-timeline-arrow-right', 'k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button', { 'k-disabled': !arrowRight }) },
+                React.createElement(kendo_react_common_1.SvgIcon, { icon: kendo_svg_icons_1.caretAltRightIcon })),
+            React.createElement("div", { className: "k-timeline-track" },
+                React.createElement("ul", { ref: trackRef, className: "k-timeline-scrollable-wrap", role: "tablist", tabIndex: 0, style: { transform: "translateX(".concat(translate, "%)") } }, eventsOnTrack && eventsOnTrack.map(function (event, index) { return (event.yearFlag
+                    ? (React.createElement("li", { role: "none", className: "k-timeline-track-item k-timeline-flag-wrap", style: { flex: "1 0 ".concat(tabWith) }, key: index },
+                        React.createElement("span", { className: "k-timeline-flag" }, event.yearFlag)))
+                    : (React.createElement("li", { role: "tab", className: (0, kendo_react_common_1.classNames)('k-timeline-track-item', { 'k-focus': index === currentEvent }), "aria-selected": index === currentEvent, style: { flex: "1 0 ".concat(tabWith) }, key: index },
+                        React.createElement("div", { className: "k-timeline-date-wrap" },
+                            React.createElement("span", { className: "k-timeline-date" }, intl.formatDate(event.date, dateFormat))),
+                        React.createElement("span", { onClick: function (e) { return onPointClick(index, e); }, className: "k-timeline-circle" })))); })))),
+        React.createElement("div", { className: "k-timeline-events-list" },
+            React.createElement("ul", { className: "k-timeline-scrollable-wrap", style: eventsTranslate === 0
+                    ? __assign({}, eventCardReorderStyle(eventsTranslate)) : __assign(__assign({}, eventCardReorderStyle(eventsTranslate)), eventCardAnimationStyle()) }, eventsToShow && eventsToShow.map(function (eventData, index) {
+                return (React.createElement("li", { key: index, className: "k-timeline-event", style: { transform: "translate3d(".concat(eventsPositions[index], "px, 0px, 0px)") } }, eventData && React.createElement(TimelineCard_1.TimelineCard, { tabindex: eventsPositions[index] === 0 ? 0 : -1, eventData: eventData, onActionClick: onActionClick, horizontal: true, collapsible: false, calloutStyle: { left: "".concat(calloutOffset, "px") } })));
+            })))));
+};
+exports.TimelineHorizontal = TimelineHorizontal;
+exports.TimelineHorizontal.propTypes = {
+    onActionClick: PropTypes.func
+};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { EventDataProps } from './TimelineCard';
+import { TimelineDirectionsProps } from './Timeline';
+/**
+ * @hidden
+ */
+export interface TimelineVerticalProps extends TimelineDirectionsProps {
+    alterMode?: boolean;
+    collapsibleEvents?: boolean;
+    onChange?: (event: EventDataProps) => void;
+}
+export declare const TimelineVertical: React.FunctionComponent<TimelineVerticalProps>;

package/dist/npm/timeline/TimelineVertical.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineVertical = void 0;
+var React = require("react");
+var PropTypes = require("prop-types");
+var TimelineCard_1 = require("./TimelineCard");
+var utils_1 = require("./utils");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var TimelineVertical = function (props) {
+    var intl = (0, kendo_react_intl_1.useInternationalization)();
+    var _a = React.useState(), eventsList = _a[0], setEventsList = _a[1];
+    var collapsibleEvents = props.collapsibleEvents, transitionDuration = props.transitionDuration, eventsData = props.eventsData, dateFormat = props.dateFormat, alterMode = props.alterMode, onChange = props.onChange, onActionClick = props.onActionClick;
+    React.useEffect(function () {
+        setEventsList((0, utils_1.addYearsFlags)(eventsData));
+    }, []);
+    return (React.createElement("ul", null, eventsList && eventsList.map(function (event, index) {
+        var cardId = (0, kendo_react_common_1.guid)();
+        return (React.createElement(React.Fragment, { key: index }, event.yearFlag
+            ? (React.createElement("li", { className: "k-timeline-flag-wrap" },
+                React.createElement("span", { className: "k-timeline-flag" }, event.yearFlag)))
+            : (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", id: cardId }, intl.formatDate(event.date, dateFormat))),
+                React.createElement("a", { className: "k-timeline-circle" }),
+                React.createElement(TimelineCard_1.TimelineCard, { id: cardId, tabindex: 0, eventData: event, alternated: alterMode && index % 2 !== 0, collapsible: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })))));
+    })));
+};
+exports.TimelineVertical = TimelineVertical;
+exports.TimelineVertical.propTypes = {
+    onActionClick: PropTypes.func
+};

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

@@ -3,3 +3,13 @@ import { TimelineEventProps } from './Timeline';
  * Sort the events list based on event date.
  */
 export declare const sortEventList: (eventList: TimelineEventProps[]) => TimelineEventProps[];
+/**
+ * @hidden
+ */
+export interface yearFlagProps {
+    yearFlag?: number;
+}
+/**
+ * @hidden
+ */
+export declare const addYearsFlags: (eventsData: TimelineEventProps[]) => (TimelineEventProps | yearFlagProps)[];

package/dist/npm/timeline/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sortEventList = void 0;
+exports.addYearsFlags = exports.sortEventList = void 0;
 /**
  * Sort the events list based on event date.
  */
@@ -11,3 +11,21 @@ var sortEventList = function (eventList) {
     return sortedEvents;
 };
 exports.sortEventList = sortEventList;
+/**
+ * @hidden
+ */
+var addYearsFlags = function (eventsData) {
+    var yearFlag;
+    var trackData = eventsData.reduce(function (arr, eventData) {
+        if (yearFlag !== eventData.date.getFullYear()) {
+            yearFlag = eventData.date.getFullYear();
+            arr.push({ yearFlag: yearFlag }, eventData);
+        }
+        else {
+            arr.push(eventData);
+        }
+        return arr;
+    }, []);
+    return trackData;
+};
+exports.addYearsFlags = addYearsFlags;