@itwin/imodel-components-react 4.1.0-dev.1 → 4.2.0-dev.1

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

@@ -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.
-*--------------------------------------------------------------------------------------------*/
+ * 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;
+  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;
+  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;
+  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;
+  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;
+  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;
-    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, .85);
-    }
-
-    input {
-        position: absolute;
-        border: none;
-        margin-top: 10px;
-        top: 1.2rem;
-        left: 50%;
-        transform: translateX(-50%);
-        cursor: pointer;
-    }
+    left: 50%;
+    bottom: -25px;
+    font-size: 14px;
+    white-space: nowrap;
+    transform: translateX(-50%);
+    color: rgba(black, 0.85);
+  }
 
-    input:focus {
-        cursor: text;
-        left: -.25rem;
-        top: calc(1.2rem - .25rem);
-        width: 140px;
-        padding: .25rem;
-        border: 1px solid #ddd;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, .11);
-        box-sizing: border-box;
-        outline: none;
-    }
+  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;
+  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, .85);
-    white-space: nowrap;
+  position: absolute;
+  margin-top: 9px;
+  font-size: 14px;
+  color: rgba(black, 0.85);
+  white-space: nowrap;
 }
 
 .tick-label.start {
-    left: -50px;
+  left: -50px;
 }
 
 .tick-label.end {
-    right: -50px;
-    text-align: right;
+  right: -50px;
+  text-align: right;
 }
 
 .tick-label.tick {
-    margin-left: 11px;
-    text-align: left;
+  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;
-    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;
-        }
+    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.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":"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"}

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

@@ -55,14 +55,25 @@ class TimelineComponent extends React.Component {
         this._requestFrame = 0;
         this._unmounted = false;
         this._standardTimelineMenuItems = [
-            { label: UiIModelComponents_1.UiIModelComponents.translate("timeline.slow"), timelineDuration: slowSpeed },
-            { label: UiIModelComponents_1.UiIModelComponents.translate("timeline.medium"), timelineDuration: mediumSpeed },
-            { label: UiIModelComponents_1.UiIModelComponents.translate("timeline.fast"), timelineDuration: fastSpeed },
+            {
+                label: UiIModelComponents_1.UiIModelComponents.translate("timeline.slow"),
+                timelineDuration: slowSpeed,
+            },
+            {
+                label: UiIModelComponents_1.UiIModelComponents.translate("timeline.medium"),
+                timelineDuration: mediumSpeed,
+            },
+            {
+                label: UiIModelComponents_1.UiIModelComponents.translate("timeline.fast"),
+                timelineDuration: fastSpeed,
+            },
         ];
         this._handleTimelinePausePlayEvent = (args) => {
             const timelineArgs = args;
             // istanbul ignore else
-            if (!timelineArgs || this.props.componentId !== timelineArgs.uiComponentId || timelineArgs.timelineAction === undefined)
+            if (!timelineArgs ||
+                this.props.componentId !== timelineArgs.uiComponentId ||
+                timelineArgs.timelineAction === undefined)
                 return;
             let startPlaying;
             switch (timelineArgs.timelineAction) {
@@ -131,7 +142,7 @@ class TimelineComponent extends React.Component {
         };
         // set the current duration, which will call the OnChange callback
         this._setDuration = (currentDuration) => {
-            const actualDuration = Math.min(this.state.totalDuration, (Math.max(currentDuration, 0)));
+            const actualDuration = Math.min(this.state.totalDuration, Math.max(currentDuration, 0));
             this._timeLastCycle = new Date().getTime();
             // istanbul ignore else
             if (!this._unmounted)
@@ -171,7 +182,7 @@ class TimelineComponent extends React.Component {
         };
         this._replay = () => {
             // timeline was complete, restart from the beginning
-            this.setState({ currentDuration: 0 }, (() => this._play()));
+            this.setState({ currentDuration: 0 }, () => this._play());
         };
         // user changed the total duration
         this._onTotalDurationChange = (value) => {
@@ -201,7 +212,8 @@ class TimelineComponent extends React.Component {
         this._currentDate = () => {
             const fraction = this.state.currentDuration / this.state.totalDuration;
             if (this.props.endDate && this.props.startDate) {
-                const timeElapsed = (this.props.endDate.getTime() - this.props.startDate.getTime()) * fraction;
+                const timeElapsed = (this.props.endDate.getTime() - this.props.startDate.getTime()) *
+                    fraction;
                 return new Date(this.props.startDate.getTime() + timeElapsed);
             }
             return new Date();
@@ -236,10 +248,13 @@ class TimelineComponent extends React.Component {
                 let keyIndex = 0;
                 if (this.state.includeRepeat) {
                     const checked = this.state.repeat;
-                    const icon = checked ? React.createElement("span", { className: "icon" },
+                    const icon = checked ? (React.createElement("span", { className: "icon" },
                         React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCheckmark, null) }),
-                        " ") : React.createElement("span", null);
-                    itemNodes.push(React.createElement(itwinui_react_1.MenuItem, { key: ++keyIndex, onClick: () => { this._onRepeatChanged(); close(); }, icon: icon }, this._repeatLabel));
+                        " ")) : (React.createElement("span", null));
+                    itemNodes.push(React.createElement(itwinui_react_1.MenuItem, { key: ++keyIndex, onClick: () => {
+                            this._onRepeatChanged();
+                            close();
+                        }, icon: icon }, this._repeatLabel));
                     itemNodes.push(React.createElement(itwinui_react_1.MenuDivider, { key: ++keyIndex }));
                 }
                 contextMenuItems.forEach((item, index) => {
@@ -272,10 +287,11 @@ class TimelineComponent extends React.Component {
                             enabled: true,
                             phase: "beforeWrite",
                             fn({ state }) {
-                                state.attributes.popper.class = "timeline-component-max-sized-scrolling-menu";
+                                state.attributes.popper.class =
+                                    "timeline-component-max-sized-scrolling-menu";
                             },
                         },
-                    ]
+                    ],
                 } },
                 React.createElement("span", { "data-testid": "timeline-settings", className: "timeline-settings icon", role: "button", tabIndex: -1, title: components_react_1.UiComponents.translate("button.label.settings") },
                     React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgMoreVertical, null) }))));
@@ -283,14 +299,19 @@ class TimelineComponent extends React.Component {
         this.state = {
             isPlaying: false,
             minimized: true,
-            currentDuration: props.initialDuration ? props.initialDuration : /* istanbul ignore next */ 0,
+            currentDuration: props.initialDuration
+                ? props.initialDuration
+                : /* istanbul ignore next */ 0,
             totalDuration: this.props.totalDuration,
             repeat: this.props.repeat ? true : false,
-            includeRepeat: this.props.includeRepeat || this.props.includeRepeat === undefined ? true : false,
+            includeRepeat: this.props.includeRepeat || this.props.includeRepeat === undefined
+                ? true
+                : false,
         };
         this._repeatLabel = UiIModelComponents_1.UiIModelComponents.translate("timeline.repeat");
         // istanbul ignore else
-        if (this.props.componentId) { // can't handle an event if we have no id
+        if (this.props.componentId) {
+            // can't handle an event if we have no id
             this._removeListener = appui_abstract_1.UiAdmin.onGenericUiEvent.addListener(this._handleTimelinePausePlayEvent);
         }
     }
@@ -303,7 +324,8 @@ class TimelineComponent extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
         let result = false;
         // istanbul ignore next
-        if (nextState !== this.state || nextProps !== this.props ||
+        if (nextState !== this.state ||
+            nextProps !== this.props ||
             nextProps.startDate !== this.props.startDate ||
             nextProps.endDate !== this.props.endDate ||
             nextProps.initialDuration !== this.props.initialDuration ||
@@ -314,7 +336,9 @@ class TimelineComponent extends React.Component {
     componentDidUpdate(prevProps) {
         // istanbul ignore else
         if (this.props.initialDuration !== prevProps.initialDuration) {
-            this._setDuration(this.props.initialDuration ? this.props.initialDuration : /* istanbul ignore next */ 0);
+            this._setDuration(this.props.initialDuration
+                ? this.props.initialDuration
+                : /* istanbul ignore next */ 0);
         }
         // istanbul ignore else
         if (this.props.repeat !== prevProps.repeat) {
@@ -335,7 +359,7 @@ class TimelineComponent extends React.Component {
     }
     _displayTime(millisec) {
         const addZero = (i) => {
-            return (i < 10) ? `0${i}` : i;
+            return i < 10 ? `0${i}` : i;
         };
         const date = new Date(millisec);
         // const hours = date.getUTCHours();
@@ -346,7 +370,7 @@ class TimelineComponent extends React.Component {
     _getMilliseconds(time) {
         // istanbul ignore else - WIP
         if (time.indexOf(":") !== -1) {
-            return (Number(time.split(":")[0]) * 60 + Number(time.split(":")[1])) * 1000;
+            return ((Number(time.split(":")[0]) * 60 + Number(time.split(":")[1])) * 1000);
         }
         else {
             return Number(time) * 1000;
@@ -355,13 +379,16 @@ class TimelineComponent extends React.Component {
     _createMenuItemNode(item, index, currentTimelineDuration, close) {
         const label = item.label;
         const checked = currentTimelineDuration === item.timelineDuration;
-        const icon = checked ? React.createElement("span", { className: "icon" },
+        const icon = checked ? (React.createElement("span", { className: "icon" },
             React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCheckmark, null) }),
-            " ") : React.createElement("span", null);
-        return (React.createElement(itwinui_react_1.MenuItem, { key: index, icon: icon, onClick: () => { this._onSetTotalDuration(item.timelineDuration); close(); } }, label));
+            " ")) : (React.createElement("span", null));
+        return (React.createElement(itwinui_react_1.MenuItem, { key: index, icon: icon, onClick: () => {
+                this._onSetTotalDuration(item.timelineDuration);
+                close();
+            } }, label));
     }
     render() {
-        const { startDate, endDate, showDuration, timeZoneOffset, dateFormatOptions, timeFormatOptions } = this.props;
+        const { startDate, endDate, showDuration, timeZoneOffset, dateFormatOptions, timeFormatOptions, } = this.props;
         const { currentDuration, totalDuration, minimized } = this.state;
         const currentDate = this._currentDate();
         const durationString = this._displayTime(currentDuration);
@@ -377,14 +404,14 @@ class TimelineComponent extends React.Component {
             React.createElement("div", { className: "scrubber" },
                 React.createElement(PlayerButton_1.PlayButton, { className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause }),
                 React.createElement("div", { className: "start-time-container" },
-                    hasDates && React.createElement("span", { "data-testid": "test-start-date", className: "start-date" }, (0, components_react_1.toDateString)(startDate, timeZoneOffset, dateFormatOptions)),
-                    hasDates && !showDuration && React.createElement("span", { "data-testid": "test-start-time", className: "start-time" }, (0, components_react_1.toTimeString)(startDate, timeZoneOffset, timeFormatOptions)),
-                    showDuration && React.createElement("span", { className: "duration-start-time" }, durationString)),
+                    hasDates && (React.createElement("span", { "data-testid": "test-start-date", className: "start-date" }, (0, components_react_1.toDateString)(startDate, timeZoneOffset, dateFormatOptions))),
+                    hasDates && !showDuration && (React.createElement("span", { "data-testid": "test-start-time", className: "start-time" }, (0, components_react_1.toTimeString)(startDate, timeZoneOffset, timeFormatOptions))),
+                    showDuration && (React.createElement("span", { className: "duration-start-time" }, durationString))),
                 React.createElement(Scrubber_1.Scrubber, { className: "slider", currentDuration: this.state.currentDuration, totalDuration: totalDuration, startDate: startDate, endDate: endDate, isPlaying: this.state.isPlaying, inMiniMode: !!minimized, showTime: !showDuration, onChange: this._onTimelineChange, onUpdate: this._onTimelineChange, timeZoneOffset: this.props.timeZoneOffset, markDate: this.props.markDate }),
                 React.createElement("div", { className: "end-time-container" },
-                    hasDates && React.createElement("span", { className: "end-date" }, (0, components_react_1.toDateString)(endDate, timeZoneOffset)),
-                    hasDates && !showDuration && React.createElement("span", { className: "end-time" }, (0, components_react_1.toTimeString)(endDate, timeZoneOffset, timeFormatOptions)),
-                    showDuration && React.createElement(InlineEdit_1.InlineEdit, { className: "duration-end-time", defaultValue: totalDurationString, onChange: this._onTotalDurationChange })),
+                    hasDates && (React.createElement("span", { className: "end-date" }, (0, components_react_1.toDateString)(endDate, timeZoneOffset))),
+                    hasDates && !showDuration && (React.createElement("span", { className: "end-time" }, (0, components_react_1.toTimeString)(endDate, timeZoneOffset, timeFormatOptions))),
+                    showDuration && (React.createElement(InlineEdit_1.InlineEdit, { className: "duration-end-time", defaultValue: totalDurationString, onChange: this._onTotalDurationChange }))),
                 minimized && this._renderSettings())));
     }
 }