@itwin/imodel-components-react 4.17.1 → 5.0.0-dev.2

package/lib/cjs/imodel-components-react/timeline/Timeline.scss

@@ -1,165 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.timeline {
-  position: relative;
-  height: 110px;
-  background: $buic-background-1;
-  border: 1px solid $buic-background-5;
-  box-sizing: border-box;
-}
-
-.rail {
-  position: absolute;
-  width: 100%;
-  height: 40px;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  z-index: 3;
-}
-
-.rail-center {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 4px;
-  cursor: pointer;
-  pointer-events: none;
-  background: $buic-background-5;
-}
-
-.tooltip-rail {
-  position: absolute;
-  margin-left: -11px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-}
-
-.needle {
-  position: absolute;
-  top: 0;
-  transform: translateX(-50%);
-  z-index: 4;
-  width: 2px;
-  height: 100%;
-  background: $buic-foreground-primary;
-  cursor: pointer;
-}
-
-.handle {
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 4;
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  border: none;
-  border-radius: 50%;
-  background: $buic-foreground-primary;
-  border: 2px solid $buic-background-1;
-
-  > span {
-    position: absolute;
-    left: 50%;
-    bottom: -25px;
-    font-size: 14px;
-    white-space: nowrap;
-    transform: translateX(-50%);
-    color: rgba(black, 0.85);
-  }
-
-  input {
-    position: absolute;
-    border: none;
-    margin-top: 10px;
-    top: 1.2rem;
-    left: 50%;
-    transform: translateX(-50%);
-    cursor: pointer;
-  }
-
-  input:focus {
-    cursor: text;
-    left: -0.25rem;
-    top: calc(1.2rem - 0.25rem);
-    width: 140px;
-    padding: 0.25rem;
-    border: 1px solid #ddd;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.11);
-    box-sizing: border-box;
-    outline: none;
-  }
-}
-
-.tick-line {
-  position: absolute;
-  width: 2px;
-  height: 11px;
-  transform: translateX(-50%);
-  background: $buic-background-5;
-}
-
-.tick-label {
-  position: absolute;
-  margin-top: 9px;
-  font-size: 14px;
-  color: rgba(black, 0.85);
-  white-space: nowrap;
-}
-
-.tick-label.start {
-  left: -50px;
-}
-
-.tick-label.end {
-  right: -50px;
-  text-align: right;
-}
-
-.tick-label.tick {
-  margin-left: 11px;
-  text-align: left;
-}
-
-.tooltip {
-  position: absolute;
-  top: -20px;
-  display: inline-block;
-  border-bottom: 1px dotted #222;
-  margin-left: 22px;
-  font-size: 14px;
-
-  .tooltip-text {
-    width: 100px;
-    background-color: #222;
-    color: #fff;
-    // opacity: 0.8;
-    text-align: center;
-    border-radius: 6px;
-    padding: 8px 0;
-    position: absolute;
-    z-index: 1;
-    bottom: 150%;
-    left: 50%;
-    margin-left: -60px;
-
-    &:after {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-width: 5px;
-      border-style: solid;
-      border-color: #222 transparent transparent transparent;
-    }
-  }
-}

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts

@@ -1,100 +0,0 @@
-/** @packageDocumentation
- * @module Timeline
- */
-import "./TimelineComponent.scss";
-import * as React from "react";
-import type { DateFormatOptions } from "@itwin/components-react";
-import type { Slider } from "@itwin/itwinui-react";
-import type { PlaybackSettings } from "./interfaces";
-/** [[TimelineMenuItemOption]]: specifies how the app wants the timeline speeds to be installed on the TimelineComponent's ContextMenu
- * "replace" : use the app-supplied items in place of the standard items
- * "append" : add the app-supplied items following the standard items
- * "prefix" : add the app-supplied items before the standard items
- *
- * @public
- */
-export type TimelineMenuItemOption = "replace" | "append" | "prefix";
-/** [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu
- * @public
- */
-export interface TimelineMenuItemProps {
-    /** localized label for menu item */
-    label: string;
-    /** duration for the entire timeline to play */
-    timelineDuration: number;
-}
-/** TimelineDateMarkerProps: Mark a date on the timeline with an indicator
- * @public
- */
-export interface TimelineDateMarkerProps {
-    /** Date to mark. If undefined, today's date will be used. */
-    date?: Date;
-    /** ReactNode to use as the marker on the timeline. If undefined, a short vertical bar will mark the date. */
-    dateMarker?: React.ReactNode;
-}
-/** [[TimelineComponentProps]] configure the timeline
- * @public
- */
-export interface TimelineComponentProps {
-    /** Start date: beginning of the date range of a date-based timeline. */
-    startDate?: Date;
-    /** End date: end of the date range of a date-based timeline. */
-    endDate?: Date;
-    /** Total duration: range of the timeline in milliseconds.
-     * @note This can be changed by user interaction. See {@link TimelineComponentProps.appMenuItems}.
-     */
-    totalDuration: number;
-    /** Initial value for the current duration (the location of the thumb) in milliseconds */
-    initialDuration?: number;
-    /** Show in minimized mode (For future use. This prop will always be treated as true.)
-     * @deprecated in 4.10.0. Has no effect.
-     */
-    minimized?: boolean;
-    /** When playing, repeat indefinitely. Defaults to `false`.
-     * @note This can be changed by user interaction. See {@link TimelineComponentProps.includeRepeat}.
-     */
-    repeat?: boolean;
-    /** Show duration instead of time */
-    showDuration?: boolean;
-    /** Callback with current duration value (as a fraction) */
-    onChange?: (duration: number) => void;
-    /** Callback triggered when play/pause button is pressed */
-    onPlayPause?: (playing: boolean) => void;
-    /** Callback triggered when backward/forward buttons are pressed.
-     * @deprecated in 4.10.0. Has no effect.
-     */
-    onJump?: (forward: boolean) => void;
-    /** Callback triggered when a setting is changed */
-    onSettingsChange?: (arg: PlaybackSettings) => void;
-    /** Always display in miniMode with no expand menu (For future use. This prop will always be treated as true)
-     * @deprecated in 4.10.0. Has no effect.
-     */
-    alwaysMinimized?: boolean;
-    /** ComponentId -- must be set to use TimelineComponentEvents
-     * @deprecated in 4.11.0.  Use the isPlaying prop instead.
-     */
-    componentId?: string;
-    /** Include the repeat option on the Timeline Context Menu. Defaults to `true`. */
-    includeRepeat?: boolean;
-    /** App-supplied speed entries in the Timeline Context Menu. Defaults to `[Slow, Medium, Fast]` items. */
-    appMenuItems?: TimelineMenuItemProps[];
-    /** How to include the supplied app menu items in the Timeline Context Menu (prefix, append or replace). Defaults to `replace`. */
-    appMenuItemOption?: TimelineMenuItemOption;
-    /** Display date and time offset by the number of minutes specified. When undefined - local timezone will be used */
-    timeZoneOffset?: number;
-    /** Display a marker on the timeline rail to indicate current date - will only work if starDate and endDate are defined */
-    markDate?: TimelineDateMarkerProps;
-    /** Options used to format date string. If not defined it will user browser default locale settings. */
-    dateFormatOptions?: DateFormatOptions;
-    /** Options used to format time string. If not defined it will user browser default locale settings. */
-    timeFormatOptions?: DateFormatOptions;
-    /** Used to control the play/pause state of the Timeline.*/
-    isPlaying?: boolean;
-    /** Props for a container that holds the slider thumbs and tracks. */
-    trackContainerProps?: React.ComponentProps<typeof Slider>["trackContainerProps"];
-}
-/** [[TimelineComponent]] is used to playback timeline data
- * @public
- */
-export declare function TimelineComponent(props: TimelineComponentProps): React.JSX.Element;
-//# sourceMappingURL=TimelineComponent.d.ts.map

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimelineComponent.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAQnD,OAAO,KAAK,EAAE,gBAAgB,EAAyB,MAAM,cAAc,CAAC;AAU5E;;;;;;GAMG;AACH,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6GAA6G;IAC7G,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,wEAAwE;IACxE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,gEAAgE;IAChE,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB,yFAAyF;IACzF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yGAAyG;IACzG,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACvC,kIAAkI;IAClI,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,oHAAoH;IACpH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0HAA0H;IAC1H,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,uGAAuG;IACvG,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,uGAAuG;IACvG,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,mBAAmB,CAAC,EAAE,KAAK,CAAC,cAAc,CACxC,OAAO,MAAM,CACd,CAAC,qBAAqB,CAAC,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAwN9D"}

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js

@@ -1,286 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineComponent = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Timeline
- */
-require("./TimelineComponent.scss");
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const components_react_1 = require("@itwin/components-react");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const InlineEdit_1 = require("./InlineEdit");
-const interfaces_1 = require("./interfaces");
-const PlayButton_1 = require("./PlayButton");
-const Scrubber_1 = require("./Scrubber");
-const useTranslation_1 = require("../useTranslation");
-const slowSpeed = 60 * 1000;
-const mediumSpeed = 20 * 1000;
-const fastSpeed = 10 * 1000;
-/** [[TimelineComponent]] is used to playback timeline data
- * @public
- */
-function TimelineComponent(props) {
-    const { appMenuItemOption = "replace", startDate, endDate, showDuration, timeZoneOffset, dateFormatOptions, timeFormatOptions, includeRepeat = true, onSettingsChange, onChange, onPlayPause, } = props;
-    const [isPlaying, setIsPlaying] = React.useState(!!props.isPlaying);
-    const [currentDuration, setCurrentDuration] = React.useState(props.initialDuration ?? 0);
-    const [totalDuration, setTotalDuration] = React.useState(props.totalDuration);
-    const [repeat, setRepeat] = React.useState(props.repeat ?? false);
-    const playOrReplay = React.useCallback(() => {
-        if (isPlaying)
-            return;
-        if (currentDuration >= totalDuration) {
-            setCurrentDuration(0);
-        }
-        setIsPlaying(true);
-        onPlayPause?.(true);
-    }, [isPlaying, onPlayPause, currentDuration, totalDuration]);
-    const pause = React.useCallback(() => {
-        if (!isPlaying)
-            return;
-        setIsPlaying(false);
-        onPlayPause?.(false);
-    }, [isPlaying, onPlayPause]);
-    const updateTotalDuration = (newTotalDuration) => {
-        if (newTotalDuration === totalDuration)
-            return;
-        const fraction = currentDuration / totalDuration;
-        const newCurrentDuration = fraction * newTotalDuration;
-        setTotalDuration(newTotalDuration);
-        setCurrentDuration(newCurrentDuration);
-        onSettingsChange?.({ duration: newTotalDuration });
-    };
-    const updateDuration = (newDuration, currentTotalDuration = totalDuration) => {
-        newDuration = Math.max(newDuration, 0);
-        newDuration = Math.min(newDuration, currentTotalDuration);
-        if (newDuration === currentDuration)
-            return;
-        setCurrentDuration(newDuration);
-        const fraction = newDuration / currentTotalDuration;
-        onChange?.(fraction);
-    };
-    const updateRepeat = (newRepeat) => {
-        if (newRepeat === repeat)
-            return;
-        setRepeat(newRepeat);
-        onSettingsChange?.({ loop: newRepeat });
-    };
-    const [prevTotalDuration, setPrevTotalDuration] = React.useState(props.totalDuration);
-    if (prevTotalDuration !== props.totalDuration) {
-        setPrevTotalDuration(props.totalDuration);
-        updateTotalDuration(props.totalDuration);
-    }
-    const [prevInitialDuration, setPrevInitialDuration] = React.useState(props.initialDuration);
-    if (prevInitialDuration !== props.initialDuration) {
-        setPrevInitialDuration(props.initialDuration);
-        updateDuration(props.initialDuration ?? 0, props.totalDuration);
-    }
-    const [prevRepeat, setPrevRepeat] = React.useState(props.repeat);
-    if (prevRepeat !== props.repeat) {
-        setPrevRepeat(props.repeat);
-        updateRepeat(props.repeat ?? repeat);
-    }
-    React.useEffect(() => {
-        // eslint-disable-next-line deprecation/deprecation
-        if (!props.componentId)
-            return;
-        return appui_abstract_1.UiAdmin.onGenericUiEvent.addListener((args) => {
-            const timelineArgs = args;
-            if (!timelineArgs ||
-                // eslint-disable-next-line deprecation/deprecation
-                props.componentId !== timelineArgs.uiComponentId ||
-                timelineArgs.timelineAction === undefined)
-                return;
-            switch (timelineArgs.timelineAction) {
-                case interfaces_1.TimelinePausePlayAction.Play:
-                    playOrReplay();
-                    break;
-                case interfaces_1.TimelinePausePlayAction.Pause:
-                    pause();
-                    break;
-                case interfaces_1.TimelinePausePlayAction.Toggle:
-                    if (isPlaying) {
-                        pause();
-                    }
-                    else {
-                        playOrReplay();
-                    }
-                    break;
-            }
-        });
-        // eslint-disable-next-line deprecation/deprecation
-    }, [isPlaying, pause, playOrReplay, props.componentId]);
-    useAnimation(({ delta }) => {
-        const duration = currentDuration + delta;
-        updateDuration(duration);
-        if (duration >= totalDuration) {
-            if (repeat) {
-                setCurrentDuration(0);
-                return;
-            }
-            pause();
-        }
-    }, isPlaying);
-    React.useEffect(() => {
-        if (props.isPlaying)
-            playOrReplay();
-        if (props.isPlaying === false)
-            pause();
-    }, [props.isPlaying, playOrReplay, pause]);
-    const onTimelineChange = (values) => {
-        const newDuration = values[0];
-        updateDuration(newDuration);
-    };
-    const currentDurationStr = toDisplayTime(currentDuration);
-    const totalDurationStr = toDisplayTime(totalDuration);
-    const hasDates = !!startDate && !!endDate;
-    return (React.createElement("div", { "data-testid": "timeline-component", className: "timeline-component" },
-        React.createElement(PlayButton_1.PlayButton, { isPlaying: isPlaying, onPlay: playOrReplay, onPause: pause }),
-        React.createElement("div", { className: "time-container" },
-            hasDates && (React.createElement("span", { "data-testid": "test-start-date", className: "timeline-date" }, (0, components_react_1.toDateString)(startDate, timeZoneOffset, dateFormatOptions))),
-            hasDates && !showDuration && (React.createElement("span", { "data-testid": "test-start-time", className: "timeline-time" }, (0, components_react_1.toTimeString)(startDate, timeZoneOffset, timeFormatOptions))),
-            showDuration && (React.createElement("span", { className: "timeline-duration-time" }, currentDurationStr))),
-        React.createElement(Scrubber_1.Scrubber, { className: "slider", currentDuration: currentDuration, totalDuration: totalDuration, startDate: startDate, endDate: endDate, isPlaying: isPlaying, showTime: !showDuration, onChange: onTimelineChange, onUpdate: onTimelineChange, timeZoneOffset: props.timeZoneOffset, markDate: props.markDate, trackContainerProps: props.trackContainerProps }),
-        React.createElement("div", { className: "time-container" },
-            hasDates && (React.createElement("span", { "data-testid": "test-end-date", className: "timeline-date" }, (0, components_react_1.toDateString)(endDate, timeZoneOffset))),
-            hasDates && !showDuration && (React.createElement("span", { className: "timeline-time" }, (0, components_react_1.toTimeString)(endDate, timeZoneOffset, timeFormatOptions))),
-            showDuration && (React.createElement(InlineEdit_1.InlineEdit, { className: "timeline-duration-time", defaultValue: totalDurationStr, onChange: (value) => {
-                    const newTotalDuration = timeToMs(value);
-                    updateTotalDuration(newTotalDuration);
-                } }))),
-        React.createElement(SettingsMenu, { appMenuItems: props.appMenuItems, appMenuItemOption: appMenuItemOption, includeRepeat: includeRepeat, repeat: repeat, totalDuration: totalDuration, onRepeatClick: () => {
-                updateRepeat(!repeat);
-            }, onTotalDurationChange: (newTotalDuration) => {
-                updateTotalDuration(newTotalDuration);
-            } })));
-}
-exports.TimelineComponent = TimelineComponent;
-function SettingsMenu({ appMenuItems, appMenuItemOption, includeRepeat, repeat, totalDuration, onRepeatClick, onTotalDurationChange, }) {
-    const { translate } = (0, useTranslation_1.useTranslation)();
-    const menuItems = React.useMemo(() => {
-        const standardItems = [
-            {
-                label: translate("timeline.slow"),
-                timelineDuration: slowSpeed,
-            },
-            {
-                label: translate("timeline.medium"),
-                timelineDuration: mediumSpeed,
-            },
-            {
-                label: translate("timeline.fast"),
-                timelineDuration: fastSpeed,
-            },
-        ];
-        if (!appMenuItems) {
-            return standardItems;
-        }
-        if (appMenuItemOption === "append") {
-            return [...standardItems, ...appMenuItems];
-        }
-        if (appMenuItemOption === "prefix") {
-            return [...appMenuItems, ...standardItems];
-        }
-        // Replace
-        return appMenuItems;
-    }, [appMenuItemOption, appMenuItems, translate]);
-    return (React.createElement(itwinui_react_1.DropdownMenu, { menuItems: (close) => {
-            return [
-                ...(includeRepeat
-                    ? [
-                        React.createElement(itwinui_react_1.MenuItem, { key: "repeat", onClick: () => {
-                                onRepeatClick();
-                                close();
-                            }, startIcon: repeat ? React.createElement(itwinui_icons_react_1.SvgCheckmark, null) : React.createElement(React.Fragment, null) }, translate("timeline.repeat")),
-                        React.createElement(itwinui_react_1.MenuDivider, { key: "divider" }),
-                    ]
-                    : []),
-                ...menuItems.map((item, index) => {
-                    const checked = totalDuration === item.timelineDuration;
-                    return (React.createElement(itwinui_react_1.MenuItem, { key: index, startIcon: checked ? React.createElement(itwinui_icons_react_1.SvgCheckmark, null) : React.createElement(React.Fragment, null), onClick: () => {
-                            onTotalDurationChange(item.timelineDuration);
-                            close();
-                        } }, item.label));
-                }),
-            ];
-        }, placement: "top-start" },
-        React.createElement(itwinui_react_1.IconButton, { "data-testid": "timeline-settings", label: translate("timeline.settings"), styleType: "borderless" },
-            React.createElement(itwinui_icons_react_1.SvgMoreVertical, null))));
-}
-function useAnimation(onAnimate, playing = true) {
-    const onAnimateRef = React.useRef(onAnimate);
-    onAnimateRef.current = onAnimate;
-    const lastTimeRef = React.useRef();
-    React.useEffect(() => {
-        if (!playing)
-            return;
-        let handle = 0;
-        let didCancel = false;
-        const animate = (time) => {
-            if (lastTimeRef.current === undefined) {
-                lastTimeRef.current = time;
-            }
-            const delta = time - lastTimeRef.current;
-            lastTimeRef.current = time;
-            onAnimateRef.current({
-                delta,
-            });
-            if (didCancel)
-                return;
-            handle = window.requestAnimationFrame(animate);
-        };
-        handle = window.requestAnimationFrame(animate);
-        return () => {
-            didCancel = true;
-            lastTimeRef.current = undefined;
-            window.cancelAnimationFrame(handle);
-        };
-    }, [playing]);
-}
-function timeToMs(time) {
-    if (time.indexOf(":") !== -1) {
-        return ((Number(time.split(":")[0]) * 60 + Number(time.split(":")[1])) * 1000);
-    }
-    else {
-        return Number(time) * 1000;
-    }
-}
-function toDisplayTime(ms) {
-    const addZero = (i) => {
-        return i < 10 ? `0${i}` : i;
-    };
-    const date = new Date(ms);
-    // const hours = date.getUTCHours();
-    const minutes = date.getUTCMinutes();
-    const seconds = date.getUTCSeconds();
-    return `${addZero(minutes)}:${addZero(seconds)}`;
-}
-//# sourceMappingURL=TimelineComponent.js.map

package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimelineComponent.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Timeline\n */\nimport \"./TimelineComponent.scss\";\nimport * as React from \"react\";\nimport { UiAdmin } from \"@itwin/appui-abstract\";\nimport type { DateFormatOptions } from \"@itwin/components-react\";\nimport { toDateString, toTimeString } from \"@itwin/components-react\";\nimport { SvgCheckmark, SvgMoreVertical } from \"@itwin/itwinui-icons-react\";\nimport type { Slider } from \"@itwin/itwinui-react\";\nimport {\n  DropdownMenu,\n  IconButton,\n  MenuDivider,\n  MenuItem,\n} from \"@itwin/itwinui-react\";\nimport { InlineEdit } from \"./InlineEdit\";\nimport type { PlaybackSettings, TimelinePausePlayArgs } from \"./interfaces\";\nimport { TimelinePausePlayAction } from \"./interfaces\";\nimport { PlayButton } from \"./PlayButton\";\nimport { Scrubber } from \"./Scrubber\";\nimport { useTranslation } from \"../useTranslation\";\n\nconst slowSpeed = 60 * 1000;\nconst mediumSpeed = 20 * 1000;\nconst fastSpeed = 10 * 1000;\n\n/** [[TimelineMenuItemOption]]: specifies how the app wants the timeline speeds to be installed on the TimelineComponent's ContextMenu\n * \"replace\" : use the app-supplied items in place of the standard items\n * \"append\" : add the app-supplied items following the standard items\n * \"prefix\" : add the app-supplied items before the standard items\n *\n * @public\n */\nexport type TimelineMenuItemOption = \"replace\" | \"append\" | \"prefix\";\n\n/** [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu\n * @public\n */\nexport interface TimelineMenuItemProps {\n  /** localized label for menu item */\n  label: string;\n\n  /** duration for the entire timeline to play */\n  timelineDuration: number;\n}\n\n/** TimelineDateMarkerProps: Mark a date on the timeline with an indicator\n * @public\n */\nexport interface TimelineDateMarkerProps {\n  /** Date to mark. If undefined, today's date will be used. */\n  date?: Date;\n  /** ReactNode to use as the marker on the timeline. If undefined, a short vertical bar will mark the date. */\n  dateMarker?: React.ReactNode;\n}\n\n/** [[TimelineComponentProps]] configure the timeline\n * @public\n */\nexport interface TimelineComponentProps {\n  /** Start date: beginning of the date range of a date-based timeline. */\n  startDate?: Date;\n  /** End date: end of the date range of a date-based timeline. */\n  endDate?: Date;\n  /** Total duration: range of the timeline in milliseconds.\n   * @note This can be changed by user interaction. See {@link TimelineComponentProps.appMenuItems}.\n   */\n  totalDuration: number;\n  /** Initial value for the current duration (the location of the thumb) in milliseconds */\n  initialDuration?: number;\n  /** Show in minimized mode (For future use. This prop will always be treated as true.)\n   * @deprecated in 4.10.0. Has no effect.\n   */\n  minimized?: boolean;\n  /** When playing, repeat indefinitely. Defaults to `false`.\n   * @note This can be changed by user interaction. See {@link TimelineComponentProps.includeRepeat}.\n   */\n  repeat?: boolean;\n  /** Show duration instead of time */\n  showDuration?: boolean;\n  /** Callback with current duration value (as a fraction) */\n  onChange?: (duration: number) => void;\n  /** Callback triggered when play/pause button is pressed */\n  onPlayPause?: (playing: boolean) => void;\n  /** Callback triggered when backward/forward buttons are pressed.\n   * @deprecated in 4.10.0. Has no effect.\n   */\n  onJump?: (forward: boolean) => void;\n  /** Callback triggered when a setting is changed */\n  onSettingsChange?: (arg: PlaybackSettings) => void;\n  /** Always display in miniMode with no expand menu (For future use. This prop will always be treated as true)\n   * @deprecated in 4.10.0. Has no effect.\n   */\n  alwaysMinimized?: boolean;\n  /** ComponentId -- must be set to use TimelineComponentEvents\n   * @deprecated in 4.11.0.  Use the isPlaying prop instead.\n   */\n  componentId?: string;\n  /** Include the repeat option on the Timeline Context Menu. Defaults to `true`. */\n  includeRepeat?: boolean;\n  /** App-supplied speed entries in the Timeline Context Menu. Defaults to `[Slow, Medium, Fast]` items. */\n  appMenuItems?: TimelineMenuItemProps[];\n  /** How to include the supplied app menu items in the Timeline Context Menu (prefix, append or replace). Defaults to `replace`. */\n  appMenuItemOption?: TimelineMenuItemOption;\n  /** Display date and time offset by the number of minutes specified. When undefined - local timezone will be used */\n  timeZoneOffset?: number;\n  /** Display a marker on the timeline rail to indicate current date - will only work if starDate and endDate are defined */\n  markDate?: TimelineDateMarkerProps;\n  /** Options used to format date string. If not defined it will user browser default locale settings. */\n  dateFormatOptions?: DateFormatOptions;\n  /** Options used to format time string. If not defined it will user browser default locale settings. */\n  timeFormatOptions?: DateFormatOptions;\n  /** Used to control the play/pause state of the Timeline.*/\n  isPlaying?: boolean;\n  /** Props for a container that holds the slider thumbs and tracks. */\n  trackContainerProps?: React.ComponentProps<\n    typeof Slider\n  >[\"trackContainerProps\"];\n}\n\n/** [[TimelineComponent]] is used to playback timeline data\n * @public\n */\nexport function TimelineComponent(props: TimelineComponentProps) {\n  const {\n    appMenuItemOption = \"replace\",\n    startDate,\n    endDate,\n    showDuration,\n    timeZoneOffset,\n    dateFormatOptions,\n    timeFormatOptions,\n    includeRepeat = true,\n    onSettingsChange,\n    onChange,\n    onPlayPause,\n  } = props;\n  const [isPlaying, setIsPlaying] = React.useState(!!props.isPlaying);\n  const [currentDuration, setCurrentDuration] = React.useState(\n    props.initialDuration ?? 0\n  );\n  const [totalDuration, setTotalDuration] = React.useState(props.totalDuration);\n  const [repeat, setRepeat] = React.useState(props.repeat ?? false);\n\n  const playOrReplay = React.useCallback(() => {\n    if (isPlaying) return;\n\n    if (currentDuration >= totalDuration) {\n      setCurrentDuration(0);\n    }\n\n    setIsPlaying(true);\n    onPlayPause?.(true);\n  }, [isPlaying, onPlayPause, currentDuration, totalDuration]);\n  const pause = React.useCallback(() => {\n    if (!isPlaying) return;\n    setIsPlaying(false);\n    onPlayPause?.(false);\n  }, [isPlaying, onPlayPause]);\n  const updateTotalDuration = (newTotalDuration: number) => {\n    if (newTotalDuration === totalDuration) return;\n\n    const fraction = currentDuration / totalDuration;\n    const newCurrentDuration = fraction * newTotalDuration;\n\n    setTotalDuration(newTotalDuration);\n    setCurrentDuration(newCurrentDuration);\n    onSettingsChange?.({ duration: newTotalDuration });\n  };\n  const updateDuration = (\n    newDuration: number,\n    currentTotalDuration = totalDuration\n  ) => {\n    newDuration = Math.max(newDuration, 0);\n    newDuration = Math.min(newDuration, currentTotalDuration);\n\n    if (newDuration === currentDuration) return;\n    setCurrentDuration(newDuration);\n\n    const fraction = newDuration / currentTotalDuration;\n    onChange?.(fraction);\n  };\n  const updateRepeat = (newRepeat: boolean) => {\n    if (newRepeat === repeat) return;\n\n    setRepeat(newRepeat);\n    onSettingsChange?.({ loop: newRepeat });\n  };\n\n  const [prevTotalDuration, setPrevTotalDuration] = React.useState(\n    props.totalDuration\n  );\n  if (prevTotalDuration !== props.totalDuration) {\n    setPrevTotalDuration(props.totalDuration);\n    updateTotalDuration(props.totalDuration);\n  }\n\n  const [prevInitialDuration, setPrevInitialDuration] = React.useState(\n    props.initialDuration\n  );\n  if (prevInitialDuration !== props.initialDuration) {\n    setPrevInitialDuration(props.initialDuration);\n    updateDuration(props.initialDuration ?? 0, props.totalDuration);\n  }\n\n  const [prevRepeat, setPrevRepeat] = React.useState(props.repeat);\n  if (prevRepeat !== props.repeat) {\n    setPrevRepeat(props.repeat);\n    updateRepeat(props.repeat ?? repeat);\n  }\n\n  React.useEffect(() => {\n    // eslint-disable-next-line deprecation/deprecation\n    if (!props.componentId) return;\n    return UiAdmin.onGenericUiEvent.addListener((args) => {\n      const timelineArgs = args as TimelinePausePlayArgs;\n      if (\n        !timelineArgs ||\n        // eslint-disable-next-line deprecation/deprecation\n        props.componentId !== timelineArgs.uiComponentId ||\n        timelineArgs.timelineAction === undefined\n      )\n        return;\n\n      switch (timelineArgs.timelineAction) {\n        case TimelinePausePlayAction.Play:\n          playOrReplay();\n          break;\n        case TimelinePausePlayAction.Pause:\n          pause();\n          break;\n        case TimelinePausePlayAction.Toggle:\n          if (isPlaying) {\n            pause();\n          } else {\n            playOrReplay();\n          }\n          break;\n      }\n    });\n    // eslint-disable-next-line deprecation/deprecation\n  }, [isPlaying, pause, playOrReplay, props.componentId]);\n  useAnimation(({ delta }) => {\n    const duration = currentDuration + delta;\n    updateDuration(duration);\n\n    if (duration >= totalDuration) {\n      if (repeat) {\n        setCurrentDuration(0);\n        return;\n      }\n\n      pause();\n    }\n  }, isPlaying);\n\n  React.useEffect(() => {\n    if (props.isPlaying) playOrReplay();\n\n    if (props.isPlaying === false) pause();\n  }, [props.isPlaying, playOrReplay, pause]);\n\n  const onTimelineChange = (values: ReadonlyArray<number>) => {\n    const newDuration = values[0];\n    updateDuration(newDuration);\n  };\n\n  const currentDurationStr = toDisplayTime(currentDuration);\n  const totalDurationStr = toDisplayTime(totalDuration);\n  const hasDates = !!startDate && !!endDate;\n  return (\n    <div data-testid=\"timeline-component\" className=\"timeline-component\">\n      <PlayButton isPlaying={isPlaying} onPlay={playOrReplay} onPause={pause} />\n      <div className=\"time-container\">\n        {hasDates && (\n          <span data-testid=\"test-start-date\" className=\"timeline-date\">\n            {toDateString(startDate, timeZoneOffset, dateFormatOptions)}\n          </span>\n        )}\n        {hasDates && !showDuration && (\n          <span data-testid=\"test-start-time\" className=\"timeline-time\">\n            {toTimeString(startDate, timeZoneOffset, timeFormatOptions)}\n          </span>\n        )}\n        {showDuration && (\n          <span className=\"timeline-duration-time\">{currentDurationStr}</span>\n        )}\n      </div>\n      <Scrubber\n        className=\"slider\"\n        currentDuration={currentDuration}\n        totalDuration={totalDuration}\n        startDate={startDate}\n        endDate={endDate}\n        isPlaying={isPlaying}\n        showTime={!showDuration}\n        onChange={onTimelineChange}\n        onUpdate={onTimelineChange}\n        timeZoneOffset={props.timeZoneOffset}\n        markDate={props.markDate}\n        trackContainerProps={props.trackContainerProps}\n      />\n      <div className=\"time-container\">\n        {hasDates && (\n          <span data-testid=\"test-end-date\" className=\"timeline-date\">\n            {toDateString(endDate, timeZoneOffset)}\n          </span>\n        )}\n        {hasDates && !showDuration && (\n          <span className=\"timeline-time\">\n            {toTimeString(endDate, timeZoneOffset, timeFormatOptions)}\n          </span>\n        )}\n        {showDuration && (\n          <InlineEdit\n            className=\"timeline-duration-time\"\n            defaultValue={totalDurationStr}\n            onChange={(value) => {\n              const newTotalDuration = timeToMs(value);\n              updateTotalDuration(newTotalDuration);\n            }}\n          />\n        )}\n      </div>\n      <SettingsMenu\n        appMenuItems={props.appMenuItems}\n        appMenuItemOption={appMenuItemOption}\n        includeRepeat={includeRepeat}\n        repeat={repeat}\n        totalDuration={totalDuration}\n        onRepeatClick={() => {\n          updateRepeat(!repeat);\n        }}\n        onTotalDurationChange={(newTotalDuration) => {\n          updateTotalDuration(newTotalDuration);\n        }}\n      />\n    </div>\n  );\n}\n\ntype SettingsMenuProps = Pick<\n  TimelineComponentProps,\n  \"appMenuItems\" | \"totalDuration\"\n> &\n  Pick<\n    Required<TimelineComponentProps>,\n    \"appMenuItemOption\" | \"includeRepeat\" | \"repeat\"\n  > & {\n    onRepeatClick: () => void;\n    onTotalDurationChange: (totalDuration: number) => void;\n  };\n\nfunction SettingsMenu({\n  appMenuItems,\n  appMenuItemOption,\n  includeRepeat,\n  repeat,\n  totalDuration,\n  onRepeatClick,\n  onTotalDurationChange,\n}: SettingsMenuProps) {\n  const { translate } = useTranslation();\n\n  const menuItems = React.useMemo(() => {\n    const standardItems: TimelineMenuItemProps[] = [\n      {\n        label: translate(\"timeline.slow\"),\n        timelineDuration: slowSpeed,\n      },\n      {\n        label: translate(\"timeline.medium\"),\n        timelineDuration: mediumSpeed,\n      },\n      {\n        label: translate(\"timeline.fast\"),\n        timelineDuration: fastSpeed,\n      },\n    ];\n\n    if (!appMenuItems) {\n      return standardItems;\n    }\n\n    if (appMenuItemOption === \"append\") {\n      return [...standardItems, ...appMenuItems];\n    }\n    if (appMenuItemOption === \"prefix\") {\n      return [...appMenuItems, ...standardItems];\n    }\n    // Replace\n    return appMenuItems;\n  }, [appMenuItemOption, appMenuItems, translate]);\n\n  return (\n    <DropdownMenu\n      menuItems={(close) => {\n        return [\n          ...(includeRepeat\n            ? [\n                <MenuItem\n                  key=\"repeat\"\n                  onClick={() => {\n                    onRepeatClick();\n                    close();\n                  }}\n                  startIcon={repeat ? <SvgCheckmark /> : <></>}\n                >\n                  {translate(\"timeline.repeat\")}\n                </MenuItem>,\n                <MenuDivider key=\"divider\" />,\n              ]\n            : []),\n          ...menuItems.map((item, index) => {\n            const checked = totalDuration === item.timelineDuration;\n            return (\n              <MenuItem\n                key={index}\n                startIcon={checked ? <SvgCheckmark /> : <></>}\n                onClick={() => {\n                  onTotalDurationChange(item.timelineDuration);\n                  close();\n                }}\n              >\n                {item.label}\n              </MenuItem>\n            );\n          }),\n        ];\n      }}\n      placement=\"top-start\"\n    >\n      <IconButton\n        data-testid=\"timeline-settings\"\n        label={translate(\"timeline.settings\")}\n        styleType=\"borderless\"\n      >\n        <SvgMoreVertical />\n      </IconButton>\n    </DropdownMenu>\n  );\n}\n\nfunction useAnimation(\n  onAnimate: (args: { delta: number }) => void,\n  playing = true\n) {\n  const onAnimateRef = React.useRef(onAnimate);\n  onAnimateRef.current = onAnimate;\n\n  const lastTimeRef = React.useRef<number | undefined>();\n\n  React.useEffect(() => {\n    if (!playing) return;\n\n    let handle = 0;\n    let didCancel = false;\n\n    const animate = (time: number) => {\n      if (lastTimeRef.current === undefined) {\n        lastTimeRef.current = time;\n      }\n\n      const delta = time - lastTimeRef.current;\n      lastTimeRef.current = time;\n\n      onAnimateRef.current({\n        delta,\n      });\n\n      if (didCancel) return;\n\n      handle = window.requestAnimationFrame(animate);\n    };\n\n    handle = window.requestAnimationFrame(animate);\n    return () => {\n      didCancel = true;\n      lastTimeRef.current = undefined;\n      window.cancelAnimationFrame(handle);\n    };\n  }, [playing]);\n}\n\nfunction timeToMs(time: string) {\n  if (time.indexOf(\":\") !== -1) {\n    return (\n      (Number(time.split(\":\")[0]) * 60 + Number(time.split(\":\")[1])) * 1000\n    );\n  } else {\n    return Number(time) * 1000;\n  }\n}\n\nfunction toDisplayTime(ms: number) {\n  const addZero = (i: number) => {\n    return i < 10 ? `0${i}` : i;\n  };\n\n  const date = new Date(ms);\n  // const hours = date.getUTCHours();\n  const minutes = date.getUTCMinutes();\n  const seconds = date.getUTCSeconds();\n  return `${addZero(minutes)}:${addZero(seconds)}`;\n}\n"]}

package/lib/cjs/imodel-components-react/timeline/interfaces.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/interfaces.ts"],"names":[],"mappings":"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"}