@itwin/imodel-components-react 4.9.0 → 4.10.0

package/lib/esm/imodel-components-react/timeline/SolarTimeline.scss

@@ -7,10 +7,6 @@
 $top-position: 6px;
 $bottom-position: 4px;
 
-.solar-slider.solar-timeline > .iui-slider-container {
-  height: 28px;
-}
-
 .solar-timeline-wrapper {
   box-sizing: border-box;
   background: var(--iui-color-background);
@@ -69,16 +65,13 @@ $bottom-position: 4px;
       color: var(--iui-color-text);
       font-size: var(--iui-font-size-1);
       cursor: pointer;
+      gap: 6px;
 
       &:focus-visible {
         outline: 1px solid var(--iui-color-border-accent);
         outline-offset: -1px;
       }
 
-      > span:nth-child(2) {
-        margin: 0 6px;
-      }
-
       > .icon-calendar {
         flex-grow: 1;
         margin-left: auto;
@@ -125,13 +118,18 @@ $bottom-position: 4px;
     }
   }
 
-  .solar-slider {
+  .solar-timeline {
     position: relative;
     display: flex;
     box-sizing: border-box;
     align-items: center;
     flex: 1;
 
+    .solar-slider {
+      position: relative;
+      flex: 1;
+    }
+
     .rail-outer {
       position: absolute;
       top: 50%;
@@ -248,10 +246,6 @@ $bottom-position: 4px;
   margin-bottom: 8px;
 }
 
-.solar-timeline-wrapper .solar-timeline {
-  display: flex;
-}
-
 .solar-timeline-wrapper.expanded {
   height: 100px;
 }

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

@@ -1,9 +1,11 @@
-import type { DateFormatOptions } from "@itwin/components-react";
+/** @packageDocumentation
+ * @module Timeline
+ */
+import "./TimelineComponent.scss";
 import * as React from "react";
+import type { DateFormatOptions } from "@itwin/components-react";
 import type { PlaybackSettings } from "./interfaces";
-import "./TimelineComponent.scss";
-/**
- * [[TimelineMenuItemOption]]: specifies how the app wants the timeline speeds to be installed on the TimelineComponent's ContextMenu
+/** [[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
@@ -11,8 +13,7 @@ import "./TimelineComponent.scss";
  * @public
  */
 export type TimelineMenuItemOption = "replace" | "append" | "prefix";
-/**
- * [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu
+/** [[TimelineMenuItemProps]] specifies playback speed entries in the Timeline's ContextMenu
  * @public
  */
 export interface TimelineMenuItemProps {
@@ -30,8 +31,7 @@ export interface TimelineDateMarkerProps {
     /** 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
+/** [[TimelineComponentProps]] configure the timeline
  * @public
  */
 export interface TimelineComponentProps {
@@ -39,13 +39,19 @@ export interface TimelineComponentProps {
     startDate?: Date;
     /** End date: end of the date range of a date-based timeline. */
     endDate?: Date;
-    /** Total duration: range of the timeline in milliseconds. */
+    /** 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.) */
+    /** Show in minimized mode (For future use. This prop will always be treated as true.)
+     * @deprecated in 4.10.x. Has no effect.
+     */
     minimized?: boolean;
-    /** When playing, repeat indefinitely */
+    /** 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;
@@ -53,19 +59,23 @@ export interface TimelineComponentProps {
     onChange?: (duration: number) => void;
     /** Callback triggered when play/pause button is pressed */
     onPlayPause?: (playing: boolean) => void;
-    /** Callback triggered when backward/forward buttons are pressed */
+    /** Callback triggered when backward/forward buttons are pressed.
+     * @deprecated in 4.10.x. 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) */
+    /** Always display in miniMode with no expand menu (For future use. This prop will always be treated as true)
+     * @deprecated in 4.10.x. Has no effect.
+     */
     alwaysMinimized?: boolean;
     /** ComponentId -- must be set to use TimelineComponentEvents */
     componentId?: string;
-    /** Include the repeat option on the Timeline Context Menu */
+    /** Include the repeat option on the Timeline Context Menu. Defaults to `true`. */
     includeRepeat?: boolean;
-    /** App-supplied speed entries in the Timeline Context Menu */
+    /** 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, replace)*/
+    /** 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;
@@ -76,56 +86,8 @@ export interface TimelineComponentProps {
     /** Options used to format time string. If not defined it will user browser default locale settings. */
     timeFormatOptions?: DateFormatOptions;
 }
-/** @internal */
-interface TimelineComponentState {
-    /**  True if timeline is currently playing, false if paused */
-    isPlaying: boolean;
-    /** Minimized mode (For future use. This will always be true) */
-    minimized?: boolean;
-    /** Current duration in milliseconds */
-    currentDuration: number;
-    /** Total duration in milliseconds */
-    totalDuration: number;
-    /** If true, automatically restart when the timeline is finished playing */
-    repeat: boolean;
-    /** If true, include the repeat option in the timeline context menu */
-    includeRepeat: boolean;
-}
-/**
- * [[TimelineComponent]] is used to playback timeline data
+/** [[TimelineComponent]] is used to playback timeline data
  * @public
  */
-export declare class TimelineComponent extends React.Component<TimelineComponentProps, TimelineComponentState> {
-    private _timeLastCycle;
-    private _requestFrame;
-    private _unmounted;
-    private _repeatLabel;
-    private _removeListener?;
-    private _standardTimelineMenuItems;
-    constructor(props: TimelineComponentProps);
-    componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: TimelineComponentProps, nextState: TimelineComponentState): boolean;
-    componentDidUpdate(prevProps: TimelineComponentProps): void;
-    private _handleTimelinePausePlayEvent;
-    private _onBackward;
-    private _onForward;
-    private _onPlay;
-    private _onPause;
-    private _onTimelineChange;
-    private _setDuration;
-    private _updateAnimation;
-    private _play;
-    private _replay;
-    private _displayTime;
-    private _getMilliseconds;
-    private _onTotalDurationChange;
-    private _changeRepeatSetting;
-    private _onRepeatChanged;
-    private _currentDate;
-    private _onSetTotalDuration;
-    private _createMenuItemNode;
-    private _renderSettings;
-    render(): React.JSX.Element;
-}
-export {};
+export declare function TimelineComponent(props: TimelineComponentProps): React.JSX.Element;
 //# sourceMappingURL=TimelineComponent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimelineComponent.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/TimelineComponent.tsx"],"names":[],"mappings":"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"}
+{"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;AAejE,OAAO,KAAK,EAAE,gBAAgB,EAAyB,MAAM,cAAc,CAAC;AAS5E;;;;;;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,gEAAgE;IAChE,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;CACvC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBA8M9D"}