@itwin/imodel-components-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/imodel-components-react/timeline/Scrubber.js

@@ -1,165 +1,165 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import "./Scrubber.scss";
-import * as React from "react";
-import { Slider } from "@itwin/itwinui-react";
-import { useEventListener } from "@itwin/core-react";
-import { toDateString, toTimeString } from "@itwin/components-react";
-/**
- * @internal
- */
-export function getPercentageOfRectangle(rect, pointer) {
-    const position = Math.min(rect.right, Math.max(rect.left, pointer));
-    return (position - rect.left) / rect.width;
-}
-// istanbul ignore next - WIP
-const formatDuration = (value) => {
-    const addZero = (i) => {
-        return (i < 10) ? `0${i}` : i;
-    };
-    const date = new Date(value);
-    const minutes = date.getUTCMinutes();
-    const seconds = date.getUTCSeconds();
-    return `${addZero(minutes)}:${addZero(seconds)}`;
-};
-const formatDate = (startDate, endDate, fraction, timeZoneOffset) => {
-    const delta = (endDate.getTime() - startDate.getTime()) * fraction;
-    const date = new Date(startDate.getTime() + delta);
-    return toDateString(date, timeZoneOffset);
-};
-// istanbul ignore next - WIP
-const formatTime = (startDate, endDate, fraction, timeZoneOffset) => {
-    const delta = (endDate.getTime() - startDate.getTime()) * fraction;
-    const date = new Date(startDate.getTime() + delta);
-    return ` ${toTimeString(date, timeZoneOffset)}`;
-};
-function generateToolTipText(showTime, percent, min, max, startDate, endDate, timeZoneOffset = 0) {
-    if (startDate && endDate)
-        return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : ""} `;
-    const val = Math.round(min + ((max - min) * percent));
-    return formatDuration(val);
-}
-function getPercentageFromDate(startDate, endDate, date) {
-    const newDate = date ? date : new Date();
-    const startTime = startDate.getTime();
-    const totalDuration = endDate.getTime() - startTime;
-    return (newDate.getTime() - startTime) / totalDuration;
-}
-function getDateMarker(dateMarkerPropsIn, startDate, endDate) {
-    const percentage = getPercentageFromDate(startDate, endDate, dateMarkerPropsIn.date);
-    const marker = dateMarkerPropsIn.dateMarker ? dateMarkerPropsIn.dateMarker : React.createElement("span", { className: "date-marker-default" });
-    return { datePercentage: percentage, dateMarker: marker };
-}
-function markDateInTimelineRange(dateMarkerProps, startDate, endDate) {
-    // istanbul ignore else
-    if (dateMarkerProps && startDate && endDate) {
-        const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();
-        // istanbul ignore else
-        if (inDate.getTime() >= startDate.getTime() && inDate.getTime() <= endDate.getTime())
-            return true;
-    }
-    return false;
-}
-/**
- * @internal
- */
-export function RailMarkers({ showToolTip, percent, tooltipText, markDate }) {
-    return (React.createElement("div", { className: "components-timeline-rail-marker-container" },
-        showToolTip &&
-            React.createElement("div", { className: "components-timeline-tooltip", style: { left: `${Math.round(percent * 100)}% ` } },
-                React.createElement("span", { className: "tooltip-text" }, tooltipText)),
-        markDate &&
-            React.createElement("div", { className: "components-timeline-date-marker", "data-testid": "test-date-marker", style: { left: `${Math.round(markDate.datePercentage * 100)}% ` } }, markDate.dateMarker)));
-}
-/**
- * Custom Timeline Thumb
- * @internal
- */
-export function CustomThumb() {
-    return (React.createElement("div", { className: "scrubber-handle" },
-        React.createElement("div", null),
-        React.createElement("div", null),
-        React.createElement("div", null)));
-}
-/**
- * @internal
- */
-export function useFocusedThumb(sliderContainer) {
-    const [thumbElement, setThumbElement] = React.useState();
-    React.useLayoutEffect(() => {
-        // istanbul ignore else
-        if (sliderContainer) {
-            const element = sliderContainer.querySelector(".iui-slider-thumb");
-            if (element && thumbElement !== element) {
-                setThumbElement(element);
-            }
-        }
-    }, [sliderContainer, thumbElement]);
-    const [thumbHasFocus, setThumbHasFocus] = React.useState(false);
-    const handleThumbFocus = React.useCallback(() => {
-        setThumbHasFocus(true);
-    }, []);
-    const handleThumbBlur = React.useCallback(() => {
-        setThumbHasFocus(false);
-    }, []);
-    useEventListener("focus", handleThumbFocus, thumbElement);
-    useEventListener("blur", handleThumbBlur, thumbElement);
-    return thumbHasFocus;
-}
-/** Scrubber/Slider for timeline control
- * @internal
- */
-export function Scrubber(props) {
-    const { startDate, endDate, showTime, isPlaying, totalDuration, timeZoneOffset, currentDuration, className, onChange, onUpdate } = props;
-    const thumbProps = () => {
-        return {
-            className: "components-timeline-thumb",
-            children: React.createElement(CustomThumb, null),
-        };
-    };
-    const sliderRef = React.useRef(null);
-    const [sliderContainer, setSliderContainer] = React.useState();
-    const [pointerPercent, setPointerPercent] = React.useState(0);
-    React.useLayoutEffect(() => {
-        // istanbul ignore else
-        if (sliderRef.current) {
-            const container = sliderRef.current.querySelector(".iui-slider-container");
-            if (container && sliderContainer !== container) {
-                setSliderContainer(container);
-            }
-        }
-    }, [sliderContainer]);
-    const tooltipProps = React.useCallback(() => {
-        return { visible: false };
-    }, []);
-    const [showRailTooltip, setShowRailTooltip] = React.useState(false);
-    // istanbul ignore next
-    const handlePointerEnter = React.useCallback(() => {
-        setShowRailTooltip(true);
-    }, []);
-    // istanbul ignore next
-    const handlePointerLeave = React.useCallback(() => {
-        setShowRailTooltip(false);
-    }, []);
-    const handlePointerMove = React.useCallback((event) => {
-        sliderContainer &&
-            setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));
-    }, [sliderContainer]);
-    const thumbHasFocus = useFocusedThumb(sliderContainer);
-    const tickLabel = React.useMemo(() => {
-        const showTip = isPlaying || showRailTooltip || thumbHasFocus;
-        const percent = (isPlaying || thumbHasFocus) ? currentDuration / totalDuration : pointerPercent;
-        const markDateInRange = markDateInTimelineRange(props.markDate, startDate, endDate);
-        const currentDateMarker = props.markDate && markDateInRange && startDate && endDate ? getDateMarker(props.markDate, startDate, endDate) : undefined;
-        const tooltipText = generateToolTipText(!!showTime, percent, 0, totalDuration, startDate, endDate, timeZoneOffset);
-        return (React.createElement(RailMarkers, { showToolTip: showTip, percent: percent, tooltipText: tooltipText, markDate: currentDateMarker }));
-    }, [isPlaying, showRailTooltip, currentDuration, totalDuration, pointerPercent, startDate, endDate, timeZoneOffset, showTime, thumbHasFocus, props.markDate]);
-    return (React.createElement(Slider, { ref: sliderRef, className: className, step: 1, min: 0, max: totalDuration, minLabel: "", maxLabel: "", onUpdate: onUpdate, onChange: onChange, values: [currentDuration], tooltipProps: tooltipProps, thumbProps: thumbProps, tickLabels: tickLabel, railContainerProps: {
-            onPointerEnter: handlePointerEnter,
-            onPointerMove: handlePointerMove,
-            onPointerLeave: handlePointerLeave,
-        } }));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import "./Scrubber.scss";
+import * as React from "react";
+import { Slider } from "@itwin/itwinui-react";
+import { useEventListener } from "@itwin/core-react";
+import { toDateString, toTimeString } from "@itwin/components-react";
+/**
+ * @internal
+ */
+export function getPercentageOfRectangle(rect, pointer) {
+    const position = Math.min(rect.right, Math.max(rect.left, pointer));
+    return (position - rect.left) / rect.width;
+}
+// istanbul ignore next - WIP
+const formatDuration = (value) => {
+    const addZero = (i) => {
+        return (i < 10) ? `0${i}` : i;
+    };
+    const date = new Date(value);
+    const minutes = date.getUTCMinutes();
+    const seconds = date.getUTCSeconds();
+    return `${addZero(minutes)}:${addZero(seconds)}`;
+};
+const formatDate = (startDate, endDate, fraction, timeZoneOffset) => {
+    const delta = (endDate.getTime() - startDate.getTime()) * fraction;
+    const date = new Date(startDate.getTime() + delta);
+    return toDateString(date, timeZoneOffset);
+};
+// istanbul ignore next - WIP
+const formatTime = (startDate, endDate, fraction, timeZoneOffset) => {
+    const delta = (endDate.getTime() - startDate.getTime()) * fraction;
+    const date = new Date(startDate.getTime() + delta);
+    return ` ${toTimeString(date, timeZoneOffset)}`;
+};
+function generateToolTipText(showTime, percent, min, max, startDate, endDate, timeZoneOffset = 0) {
+    if (startDate && endDate)
+        return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : ""} `;
+    const val = Math.round(min + ((max - min) * percent));
+    return formatDuration(val);
+}
+function getPercentageFromDate(startDate, endDate, date) {
+    const newDate = date ? date : new Date();
+    const startTime = startDate.getTime();
+    const totalDuration = endDate.getTime() - startTime;
+    return (newDate.getTime() - startTime) / totalDuration;
+}
+function getDateMarker(dateMarkerPropsIn, startDate, endDate) {
+    const percentage = getPercentageFromDate(startDate, endDate, dateMarkerPropsIn.date);
+    const marker = dateMarkerPropsIn.dateMarker ? dateMarkerPropsIn.dateMarker : React.createElement("span", { className: "date-marker-default" });
+    return { datePercentage: percentage, dateMarker: marker };
+}
+function markDateInTimelineRange(dateMarkerProps, startDate, endDate) {
+    // istanbul ignore else
+    if (dateMarkerProps && startDate && endDate) {
+        const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();
+        // istanbul ignore else
+        if (inDate.getTime() >= startDate.getTime() && inDate.getTime() <= endDate.getTime())
+            return true;
+    }
+    return false;
+}
+/**
+ * @internal
+ */
+export function RailMarkers({ showToolTip, percent, tooltipText, markDate }) {
+    return (React.createElement("div", { className: "components-timeline-rail-marker-container" },
+        showToolTip &&
+            React.createElement("div", { className: "components-timeline-tooltip", style: { left: `${Math.round(percent * 100)}% ` } },
+                React.createElement("span", { className: "tooltip-text" }, tooltipText)),
+        markDate &&
+            React.createElement("div", { className: "components-timeline-date-marker", "data-testid": "test-date-marker", style: { left: `${Math.round(markDate.datePercentage * 100)}% ` } }, markDate.dateMarker)));
+}
+/**
+ * Custom Timeline Thumb
+ * @internal
+ */
+export function CustomThumb() {
+    return (React.createElement("div", { className: "scrubber-handle" },
+        React.createElement("div", null),
+        React.createElement("div", null),
+        React.createElement("div", null)));
+}
+/**
+ * @internal
+ */
+export function useFocusedThumb(sliderContainer) {
+    const [thumbElement, setThumbElement] = React.useState();
+    React.useLayoutEffect(() => {
+        // istanbul ignore else
+        if (sliderContainer) {
+            const element = sliderContainer.querySelector(".iui-slider-thumb");
+            if (element && thumbElement !== element) {
+                setThumbElement(element);
+            }
+        }
+    }, [sliderContainer, thumbElement]);
+    const [thumbHasFocus, setThumbHasFocus] = React.useState(false);
+    const handleThumbFocus = React.useCallback(() => {
+        setThumbHasFocus(true);
+    }, []);
+    const handleThumbBlur = React.useCallback(() => {
+        setThumbHasFocus(false);
+    }, []);
+    useEventListener("focus", handleThumbFocus, thumbElement);
+    useEventListener("blur", handleThumbBlur, thumbElement);
+    return thumbHasFocus;
+}
+/** Scrubber/Slider for timeline control
+ * @internal
+ */
+export function Scrubber(props) {
+    const { startDate, endDate, showTime, isPlaying, totalDuration, timeZoneOffset, currentDuration, className, onChange, onUpdate } = props;
+    const thumbProps = () => {
+        return {
+            className: "components-timeline-thumb",
+            children: React.createElement(CustomThumb, null),
+        };
+    };
+    const sliderRef = React.useRef(null);
+    const [sliderContainer, setSliderContainer] = React.useState();
+    const [pointerPercent, setPointerPercent] = React.useState(0);
+    React.useLayoutEffect(() => {
+        // istanbul ignore else
+        if (sliderRef.current) {
+            const container = sliderRef.current.querySelector(".iui-slider-container");
+            if (container && sliderContainer !== container) {
+                setSliderContainer(container);
+            }
+        }
+    }, [sliderContainer]);
+    const tooltipProps = React.useCallback(() => {
+        return { visible: false };
+    }, []);
+    const [showRailTooltip, setShowRailTooltip] = React.useState(false);
+    // istanbul ignore next
+    const handlePointerEnter = React.useCallback(() => {
+        setShowRailTooltip(true);
+    }, []);
+    // istanbul ignore next
+    const handlePointerLeave = React.useCallback(() => {
+        setShowRailTooltip(false);
+    }, []);
+    const handlePointerMove = React.useCallback((event) => {
+        sliderContainer &&
+            setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));
+    }, [sliderContainer]);
+    const thumbHasFocus = useFocusedThumb(sliderContainer);
+    const tickLabel = React.useMemo(() => {
+        const showTip = isPlaying || showRailTooltip || thumbHasFocus;
+        const percent = (isPlaying || thumbHasFocus) ? currentDuration / totalDuration : pointerPercent;
+        const markDateInRange = markDateInTimelineRange(props.markDate, startDate, endDate);
+        const currentDateMarker = props.markDate && markDateInRange && startDate && endDate ? getDateMarker(props.markDate, startDate, endDate) : undefined;
+        const tooltipText = generateToolTipText(!!showTime, percent, 0, totalDuration, startDate, endDate, timeZoneOffset);
+        return (React.createElement(RailMarkers, { showToolTip: showTip, percent: percent, tooltipText: tooltipText, markDate: currentDateMarker }));
+    }, [isPlaying, showRailTooltip, currentDuration, totalDuration, pointerPercent, startDate, endDate, timeZoneOffset, showTime, thumbHasFocus, props.markDate]);
+    return (React.createElement(Slider, { ref: sliderRef, className: className, step: 1, min: 0, max: totalDuration, minLabel: "", maxLabel: "", onUpdate: onUpdate, onChange: onChange, values: [currentDuration], tooltipProps: tooltipProps, thumbProps: thumbProps, tickLabels: tickLabel, railContainerProps: {
+            onPointerEnter: handlePointerEnter,
+            onPointerMove: handlePointerMove,
+            onPointerLeave: handlePointerLeave,
+        } }));
+}
 //# sourceMappingURL=Scrubber.js.map

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

@@ -1,78 +1,78 @@
-/** @packageDocumentation
- * @module Timeline
- */
-import "./SolarTimeline.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { SolarDataProvider } from "./interfaces";
-interface SolarTimelineComponentProps {
-    dataProvider: SolarDataProvider;
-    onPlayPause?: (playing: boolean) => void;
-    duration?: number;
-    speed?: number;
-}
-interface SolarTimelineComponentState {
-    isPlaying: boolean;
-    isDateOpened: boolean;
-    isSettingsOpened: boolean;
-    dayStartMs: number;
-    sunRiseOffsetMs: number;
-    sunSetOffsetMs: number;
-    sunDeltaMs: number;
-    currentTimeOffsetMs: number;
-    speed: number;
-    loop: boolean;
-    shadowColor: ColorDef;
-    duration: number;
-    adjustedDuration: number;
-}
-/** Solar Timeline
- * @alpha
- */
-export declare class SolarTimeline extends React.PureComponent<SolarTimelineComponentProps, SolarTimelineComponentState> {
-    private _datePicker;
-    private _settings;
-    private _requestFrame;
-    private _unmounted;
-    private _timeLastCycle;
-    private _totalPlayTime;
-    private _settingsPopupTitle;
-    private _playLabel;
-    private _settingLabel;
-    private _loopLabel;
-    private _speedLabel;
-    private _dateTimeLabel;
-    private _months;
-    private _timeLabel;
-    private _amLabel;
-    private _pmLabel;
-    private readonly _presetColors;
-    constructor(props: SolarTimelineComponentProps);
-    componentWillUnmount(): void;
-    private _updateAnimation;
-    private _play;
-    private _onPause;
-    private _onPlay;
-    private setPlaybackTimeBySunTime;
-    /** note the day passed in is in the time of the current user not in project time because the date picker works in
-     * local time  */
-    private _onDayClick;
-    private _onTimeChanged;
-    private _onCloseDayPicker;
-    private _onOpenDayPicker;
-    private _onCloseSettingsPopup;
-    private _onOpenSettingsPopup;
-    private ensureRange;
-    private processSunTimeChange;
-    private _onUpdate;
-    private _onChange;
-    private _onSpeedChange;
-    private _onToggleLoop;
-    private _formatTime;
-    private _onPresetColorPick;
-    private _handleHueOrSaturationChange;
-    getLocalTime(ticks: number): Date;
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module Timeline
+ */
+import "./SolarTimeline.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { SolarDataProvider } from "./interfaces";
+interface SolarTimelineComponentProps {
+    dataProvider: SolarDataProvider;
+    onPlayPause?: (playing: boolean) => void;
+    duration?: number;
+    speed?: number;
+}
+interface SolarTimelineComponentState {
+    isPlaying: boolean;
+    isDateOpened: boolean;
+    isSettingsOpened: boolean;
+    dayStartMs: number;
+    sunRiseOffsetMs: number;
+    sunSetOffsetMs: number;
+    sunDeltaMs: number;
+    currentTimeOffsetMs: number;
+    speed: number;
+    loop: boolean;
+    shadowColor: ColorDef;
+    duration: number;
+    adjustedDuration: number;
+}
+/** Solar Timeline
+ * @alpha
+ */
+export declare class SolarTimeline extends React.PureComponent<SolarTimelineComponentProps, SolarTimelineComponentState> {
+    private _datePicker;
+    private _settings;
+    private _requestFrame;
+    private _unmounted;
+    private _timeLastCycle;
+    private _totalPlayTime;
+    private _settingsPopupTitle;
+    private _playLabel;
+    private _settingLabel;
+    private _loopLabel;
+    private _speedLabel;
+    private _dateTimeLabel;
+    private _months;
+    private _timeLabel;
+    private _amLabel;
+    private _pmLabel;
+    private readonly _presetColors;
+    constructor(props: SolarTimelineComponentProps);
+    componentWillUnmount(): void;
+    private _updateAnimation;
+    private _play;
+    private _onPause;
+    private _onPlay;
+    private setPlaybackTimeBySunTime;
+    /** note the day passed in is in the time of the current user not in project time because the date picker works in
+     * local time  */
+    private _onDayClick;
+    private _onTimeChanged;
+    private _onCloseDayPicker;
+    private _onOpenDayPicker;
+    private _onCloseSettingsPopup;
+    private _onOpenSettingsPopup;
+    private ensureRange;
+    private processSunTimeChange;
+    private _onUpdate;
+    private _onChange;
+    private _onSpeedChange;
+    private _onToggleLoop;
+    private _formatTime;
+    private _onPresetColorPick;
+    private _handleHueOrSaturationChange;
+    getLocalTime(ticks: number): Date;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=SolarTimeline.d.ts.map