@progress/kendo-react-layout 6.1.1 → 7.0.0-develop.1

package/dist/es/tilelayout/TileLayout.js

@@ -1,178 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { getter, classNames, dispatchEvent, WatermarkOverlay, shouldShowValidationUI, validatePackage } from '@progress/kendo-react-common';
-import { InternalTile } from './InternalTile';
-import { packageMetadata } from '../package-metadata';
-/**
- * @hidden
- */
-var AUTO_FLOW_CLASSES = {
-    'column': 'k-grid-flow-col',
-    'row': 'k-grid-flow-row',
-    'column dense': 'k-grid-flow-col-dense',
-    'row dense': 'k-grid-flow-row-dense',
-    'unset': 'k-grid-flow-unset'
-};
-/**
- * Represents the [KendoReact TileLayout component]({% slug overview_tilelayout %}).
- */
-var TileLayout = /** @class */ (function (_super) {
-    __extends(TileLayout, _super);
-    function TileLayout(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this._element = null;
-        /**
-         * @hidden
-         */
-        _this.state = { positions: (_this.props.items || []).map(function (p, i) { return (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p.defaultPosition)); }) };
-        _this.showLicenseWatermark = false;
-        /**
-         * @hidden
-         */
-        _this.focus = function () {
-            if (_this._element) {
-                _this._element.focus();
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.update = function (index, dOrder, dCol, dRowSpan, dColSpan) {
-            if (dRowSpan === void 0) { dRowSpan = 0; }
-            if (dColSpan === void 0) { dColSpan = 0; }
-            if (dOrder === 0 && dCol === 0 && !dColSpan && !dRowSpan) {
-                return;
-            }
-            var shouldUpdate = false;
-            var positions = _this.state.positions.map(function (p) { return Object.assign({}, p); });
-            // reordering:
-            var current = positions[index];
-            var other = positions.find(function (item) { return (item.order === current.order + dOrder); });
-            if (other && other !== current) {
-                current.order += dOrder;
-                other.order += -dOrder;
-                shouldUpdate = true;
-            }
-            var proposedCol = current.col + dCol;
-            if (dCol !== 0 && proposedCol >= 1 && proposedCol + current.colSpan <= (_this.props.columns || 3) + 1) {
-                current.col = proposedCol;
-                shouldUpdate = true;
-            }
-            // resizing:
-            var proposedColSpan = current.colSpan + dColSpan;
-            if (dColSpan && proposedColSpan >= 1 && proposedColSpan + current.col <= (_this.props.columns || 3) + 1) {
-                current.colSpan = proposedColSpan;
-                shouldUpdate = true;
-            }
-            var proposedRowSpan = current.rowSpan + dRowSpan;
-            if (dRowSpan && proposedRowSpan >= 1) {
-                current.rowSpan = proposedRowSpan;
-                shouldUpdate = true;
-            }
-            if (shouldUpdate) {
-                _this.setState({ positions: positions });
-                dispatchEvent(_this.props.onReposition, {}, _this, { value: positions });
-            }
-        };
-        validatePackage(packageMetadata);
-        _this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(TileLayout.prototype, "element", {
-        /**
-         * Gets the HTML element of the TileLayout component.
-         */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    TileLayout.getDerivedStateFromProps = function (props, state) {
-        if (props.positions) {
-            // The component is in controlled mode.
-            return {
-                positions: props.positions.map(function (p, i) { return (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p)); })
-            };
-        }
-        if (props.items && (!state.positions || (props.items.length !== state.positions.length))) {
-            // The component is in uncontrolled mode.
-            return {
-                positions: props.items.map(function (p, i) { return (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p.defaultPosition)); })
-            };
-        }
-        return null;
-    };
-    TileLayout.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, className = _a.className, _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.columnWidth, columnWidth = _c === void 0 ? '1fr' : _c, gap = _a.gap, _d = _a.rowHeight, rowHeight = _d === void 0 ? '1fr' : _d, style = _a.style, _e = _a.autoFlow, autoFlow = _e === void 0 ? 'column' : _e, _f = _a.items, items = _f === void 0 ? [] : _f;
-        var gapValue = gap
-            ? "".concat(typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + "".concat(typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns)
-            : 16;
-        var tileLayoutStyles = __assign({ gridTemplateColumns: "repeat(".concat(columns, ", minmax(0px, ").concat(typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth, "))"), gridAutoRows: "minmax(0px, ".concat(typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight, ")"), gap: gapValue, padding: gapValue }, style);
-        return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: classNames('k-tilelayout k-pos-relative', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
-                return (React.createElement(React.Fragment, { key: _this.props.dataItemKey ? getter(_this.props.dataItemKey)(tile) : index },
-                    React.createElement(InternalTile, { update: _this.update, defaultPosition: _this.state.positions[index], index: index, resizable: tile.resizable, reorderable: tile.reorderable, style: tile.style, className: tile.className, hintClassName: tile.hintClassName, hintStyle: tile.hintStyle, ignoreDrag: _this.props.ignoreDrag }, tile.item ? tile.item : (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, React.isValidElement(tile.header) ? tile.header : React.createElement("h5", { className: 'k-card-title' }, tile.header)),
-                        React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))),
-                    _this.showLicenseWatermark && React.createElement(WatermarkOverlay, null)));
-            }) }));
-    };
-    /**
-     * @hidden
-     */
-    TileLayout.propTypes = {
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        dir: PropTypes.string,
-        gap: PropTypes.object,
-        columns: PropTypes.number,
-        columnWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        dataItemKey: PropTypes.string,
-        items: PropTypes.array,
-        positions: PropTypes.array,
-        autoFlow: PropTypes.oneOf(['column', 'row', 'column dense', 'row dense', 'unset']),
-        onReposition: PropTypes.func,
-        ignoreDrag: PropTypes.func
-    };
-    /**
-     * @hidden
-     */
-    TileLayout.displayName = 'KendoTileLayout';
-    return TileLayout;
-}(React.Component));
-export { TileLayout };

package/dist/es/tilelayout/interfaces/main.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { Navigation } from '@progress/kendo-react-common';
-import { EventDataProps } from './TimelineCard';
-export interface TimelineEventProps {
-    /**
-     * Specifies if the event card is default collapsed.
-     */
-    opened?: boolean;
-    /**
-     * 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;
-    }[];
-    /**
-     * @Hidden
-     */
-    yearFlag?: number;
-}
-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;
-    /**
-     * Specifies the time for sliding to next event in horizontal mode and time for collapsing the event in vertical mode.
-     * The default value are:
-     * - `300ms` for horizontal
-     * - `400ms` for vertical
-     */
-    transitionDuration?: number;
-    /**
-     * If set to `true`, the user can use dedicated shortcuts to interact with the Timeline.
-     * By default, navigation is disabled.
-     */
-    navigatable?: boolean;
-    /**
-     * An event that is called when event card is toggled.
-     */
-    onChange?: (event: EventDataProps) => void;
-    /**
-     * An event that is called when card action is clicked.
-     */
-    onActionClick?: (event: EventDataProps) => void;
-}
-/**
- * @hidden
- */
-export interface TimelineDirectionsProps {
-    eventsData: TimelineEventProps[];
-    dateFormat?: string;
-    transitionDuration?: number;
-    navigatable?: boolean;
-    navigation?: React.MutableRefObject<Navigation>;
-    onActionClick?: (event: EventDataProps) => void;
-}
-export declare const Timeline: React.FunctionComponent<TimelineProps>;

package/dist/es/timeline/Timeline.js

@@ -1,37 +0,0 @@
-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);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-import { TimelineHorizontal } from './TimelineHorizontal';
-import { TimelineVertical } from './TimelineVertical';
-export var Timeline = function (props) {
-    var combinedProps = __assign({ alterMode: false, collapsibleEvents: true, dateFormat: 'MMM dd, yyyy' }, props);
-    var collapsibleEvents = combinedProps.collapsibleEvents, transitionDuration = combinedProps.transitionDuration, className = combinedProps.className, alterMode = combinedProps.alterMode, navigatable = combinedProps.navigatable, horizontal = combinedProps.horizontal, events = combinedProps.events, dateFormat = combinedProps.dateFormat, onChange = combinedProps.onChange, onActionClick = combinedProps.onActionClick;
-    var _a = React.useState(), trackAxisWidth = _a[0], setTrackAxisWidth = _a[1];
-    var trackWrapRef = React.useRef(null);
-    React.useEffect(function () {
-        if (trackWrapRef.current) {
-            setTrackAxisWidth(trackWrapRef.current.offsetWidth);
-        }
-    }, []);
-    return (React.createElement("div", { ref: trackWrapRef, className: classNames('k-timeline', {
-            'k-timeline-collapsible': collapsibleEvents,
-            'k-timeline-vertical': !horizontal,
-            'k-timeline-alternating': alterMode,
-            'k-timeline-horizontal': horizontal
-        }, className), style: { width: "".concat(trackAxisWidth, "px") } }, horizontal ? React.createElement(TimelineHorizontal, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, transitionDuration: transitionDuration, onActionClick: onActionClick })
-        : React.createElement(TimelineVertical, { navigatable: navigatable, eventsData: events, dateFormat: dateFormat, alterMode: alterMode, collapsibleEvents: collapsibleEvents, transitionDuration: transitionDuration, onChange: onChange, onActionClick: onActionClick })));
-};
-Timeline.propTypes = {
-    className: PropTypes.string
-};

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

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { TimelineEventProps } from './Timeline';
-/**
- * @hidden
- */
-interface TimelineCardProps {
-    tabindex?: number;
-    id?: string;
-    eventData: TimelineEventProps;
-    alternated?: boolean;
-    horizontal?: boolean;
-    collapsible?: boolean;
-    navigatable?: boolean;
-    calloutStyle?: React.CSSProperties;
-    transitionDuration?: number;
-    onChange?: (event: EventDataProps) => void;
-    onActionClick?: (event: EventDataProps) => void;
-}
-export interface EventDataProps {
-    /**
-     * 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

@@ -1,62 +0,0 @@
-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 { SvgIcon, 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 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(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) {
-        setOpen(!open);
-        if (props.onChange) {
-            var toggleEvent = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                eventData: props.eventData
-            };
-            props.onChange.call(undefined, toggleEvent);
-        }
-    };
-    var actionClick = function (event) {
-        if (props.onActionClick) {
-            var actionClickEvent = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                eventData: props.eventData
-            };
-            props.onActionClick.call(undefined, actionClickEvent);
-        }
-    };
-    var cardBody = function () { return (React.createElement(React.Fragment, null,
-        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)); })))); };
-    return (React.createElement("div", { "data-testid": "k-timeline-card", className: classNames('k-timeline-card', { 'k-collapsed': props.collapsible && opened }) },
-        React.createElement(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: 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, null,
-                    React.createElement(CardTitle, null,
-                        React.createElement("span", { className: "k-event-title" }, title),
-                        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(SvgIcon, { icon: chevronRightIcon }))),
-                    subtitle && React.createElement(CardSubtitle, null, subtitle)),
-                props.collapsible
-                    ? React.createElement(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()))));
-};
-TimelineCard.propTypes = {
-    onChange: PropTypes.func,
-    onActionClick: PropTypes.func
-};

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

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