@itwin/imodel-components-react 4.0.0 → 4.0.1

package/lib/esm/imodel-components-react/timeline/InlineEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport \"./InlineEdit.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\n\r\ninterface InlineEditProps extends CommonProps {\r\n  defaultValue: string;\r\n  onChange?: (value: string) => void;\r\n}\r\n\r\ninterface InlineEditState {\r\n  value: string;\r\n  originalValue: string;\r\n}\r\n\r\n/** Duration Inline Editor\r\n * @internal\r\n */\r\nexport class InlineEdit extends React.Component<InlineEditProps, InlineEditState> {\r\n  private _inputRef = React.createRef<HTMLInputElement>();\r\n\r\n  constructor(props: InlineEditProps) {\r\n    super(props);\r\n\r\n    this.state = { value: this.props.defaultValue, originalValue: this.props.defaultValue };\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: InlineEditProps, _prevState: InlineEditState) { // eslint-disable-line @typescript-eslint/naming-convention\r\n    if (prevProps.defaultValue !== this.props.defaultValue) {\r\n      this.setState((_, props) => {\r\n        return { value: props.defaultValue, originalValue: props.defaultValue };\r\n      });\r\n    }\r\n  }\r\n\r\n  // istanbul ignore next\r\n  private _onBlur = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    this._sendChange(event.target.value);\r\n  };\r\n\r\n  private _onFocus = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    event.target.select();\r\n  };\r\n\r\n  private _onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n    switch (event.key) {\r\n      case SpecialKey.Escape:\r\n        this.setState(\r\n          (prevState) => ({ value: prevState.originalValue }),\r\n          () => this._inputRef.current!.select());\r\n        break;\r\n      case SpecialKey.Enter:\r\n        this._sendChange(this.state.value);\r\n        break;\r\n    }\r\n  };\r\n\r\n  private _onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    this.setState({ value: event.target.value });\r\n  };\r\n\r\n  private _sendChange(value: string) {\r\n    // istanbul ignore else\r\n    if (this.props.onChange)\r\n      this.props.onChange(value);\r\n  }\r\n\r\n  public override render() {\r\n    return (\r\n      <Input\r\n        data-testid=\"timeline-duration-edit-input\"\r\n        className={classnames(\"inline-edit-input\", this.props.className)}\r\n        style={this.props.style}\r\n        ref={this._inputRef}\r\n        type=\"text\"\r\n        value={this.state.value}\r\n        size=\"small\"\r\n        onFocus={this._onFocus}\r\n        onBlur={this._onBlur}\r\n        onKeyDown={this._onKeyDown}\r\n        onChange={this._onChange} />\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/InlineEdit.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*--------------------------------------------------------------------------------------------*/\nimport \"./InlineEdit.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\n\ninterface InlineEditProps extends CommonProps {\n  defaultValue: string;\n  onChange?: (value: string) => void;\n}\n\ninterface InlineEditState {\n  value: string;\n  originalValue: string;\n}\n\n/** Duration Inline Editor\n * @internal\n */\nexport class InlineEdit extends React.Component<InlineEditProps, InlineEditState> {\n  private _inputRef = React.createRef<HTMLInputElement>();\n\n  constructor(props: InlineEditProps) {\n    super(props);\n\n    this.state = { value: this.props.defaultValue, originalValue: this.props.defaultValue };\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: InlineEditProps, _prevState: InlineEditState) { // eslint-disable-line @typescript-eslint/naming-convention\n    if (prevProps.defaultValue !== this.props.defaultValue) {\n      this.setState((_, props) => {\n        return { value: props.defaultValue, originalValue: props.defaultValue };\n      });\n    }\n  }\n\n  // istanbul ignore next\n  private _onBlur = (event: React.ChangeEvent<HTMLInputElement>) => {\n    this._sendChange(event.target.value);\n  };\n\n  private _onFocus = (event: React.ChangeEvent<HTMLInputElement>) => {\n    event.target.select();\n  };\n\n  private _onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      case SpecialKey.Escape:\n        this.setState(\n          (prevState) => ({ value: prevState.originalValue }),\n          () => this._inputRef.current!.select());\n        break;\n      case SpecialKey.Enter:\n        this._sendChange(this.state.value);\n        break;\n    }\n  };\n\n  private _onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    this.setState({ value: event.target.value });\n  };\n\n  private _sendChange(value: string) {\n    // istanbul ignore else\n    if (this.props.onChange)\n      this.props.onChange(value);\n  }\n\n  public override render() {\n    return (\n      <Input\n        data-testid=\"timeline-duration-edit-input\"\n        className={classnames(\"inline-edit-input\", this.props.className)}\n        style={this.props.style}\n        ref={this._inputRef}\n        type=\"text\"\n        value={this.state.value}\n        size=\"small\"\n        onFocus={this._onFocus}\n        onBlur={this._onBlur}\n        onKeyDown={this._onKeyDown}\n        onChange={this._onChange} />\n    );\n  }\n}\n"]}

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

@@ -1,27 +1,27 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-.inline-edit-input {
-  color: var(--iui-color-text);
-  background: inherit;
-  border: 1px solid transparent;
-  box-sizing: border-box;
-
-  &.iui-input {
-    padding: 0px;
-  }
-
-  &:hover {
-    border: 1px solid $buic-background-5;
-  }
-
-  &:focus {
-    background: $buic-background-1;
-    border: 1px solid $buic-background-5;
-    outline: none;
-    color: var(--iui-color-text-hover);
-  }
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+.inline-edit-input {
+  color: var(--iui-color-text);
+  background: inherit;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+
+  &.iui-input {
+    padding: 0px;
+  }
+
+  &:hover {
+    border: 1px solid $buic-background-5;
+  }
+
+  &:focus {
+    background: $buic-background-1;
+    border: 1px solid $buic-background-5;
+    outline: none;
+    color: var(--iui-color-text-hover);
+  }
 }

package/lib/esm/imodel-components-react/timeline/PlayerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport \"./PlayerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SvgPause, SvgPlay } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Player button used by buttons on timeline control\r\n * @internal\r\n */\r\nexport class PlayerButton extends React.PureComponent<any> {\r\n  private _onClick = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onClick)\r\n      this.props.onClick();\r\n  };\r\n\r\n  public override render() {\r\n    const { icon, title } = this.props;\r\n    return (\r\n      <button data-testid={this.props.className} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick} title={title}>\r\n        <span className=\"icon\"><Icon iconSpec={icon} /></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport interface PlayerButtonProps extends CommonProps {\r\n  isPlaying: boolean;\r\n  onPlay?: () => void;\r\n  onPause?: () => void;\r\n  tooltip?: string;\r\n}\r\n\r\ninterface PlayButtonState {\r\n  isPlaying: boolean;\r\n}\r\n\r\n/** Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {\r\n\r\n  constructor(props: PlayerButtonProps, context?: any) {\r\n    super(props, context);\r\n\r\n    this.state = { isPlaying: this.props.isPlaying };\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate() {\r\n    if (this.props.isPlaying !== this.state.isPlaying) {\r\n      this.setState((_, props) => ({ isPlaying: props.isPlaying }));\r\n    }\r\n  }\r\n\r\n  private _onClick = () => {\r\n    const _isPlaying = !this.state.isPlaying;\r\n\r\n    this.setState({ isPlaying: _isPlaying });\r\n\r\n    if (_isPlaying) {\r\n      // istanbul ignore else\r\n      if (this.props.onPlay)\r\n        this.props.onPlay();\r\n    } else {\r\n      // istanbul ignore else\r\n      if (this.props.onPause)\r\n        this.props.onPause();\r\n    }\r\n  };\r\n\r\n  public override render() {\r\n    const { tooltip } = this.props;\r\n    const iconSpec = this.state.isPlaying ? <SvgPause /> : <SvgPlay />;\r\n    let title = tooltip;\r\n\r\n    if (!title)\r\n      title = UiIModelComponents.translate(this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\");\r\n\r\n    return (\r\n      <button data-testid={this.props.className} title={title} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick}>\r\n        <span className=\"icon\" data-testid={this.state.isPlaying ? \"pause\" : \"play\"} ><Icon iconSpec={iconSpec} data-testid={this.state.isPlaying ? \"pause\" : \"play\"} /></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.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*--------------------------------------------------------------------------------------------*/\nimport \"./PlayerButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps, Icon } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\nimport { SvgPause, SvgPlay } from \"@itwin/itwinui-icons-react\";\n\n/** Player button used by buttons on timeline control\n * @internal\n */\nexport class PlayerButton extends React.PureComponent<any> {\n  private _onClick = () => {\n    // istanbul ignore else\n    if (this.props.onClick)\n      this.props.onClick();\n  };\n\n  public override render() {\n    const { icon, title } = this.props;\n    return (\n      <button data-testid={this.props.className} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick} title={title}>\n        <span className=\"icon\"><Icon iconSpec={icon} /></span>\n      </button>\n    );\n  }\n}\n\n/** Properties for Play/Pause button used on timeline control\n * @internal\n */\nexport interface PlayerButtonProps extends CommonProps {\n  isPlaying: boolean;\n  onPlay?: () => void;\n  onPause?: () => void;\n  tooltip?: string;\n}\n\ninterface PlayButtonState {\n  isPlaying: boolean;\n}\n\n/** Play/Pause button used on timeline control\n * @internal\n */\nexport class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {\n\n  constructor(props: PlayerButtonProps, context?: any) {\n    super(props, context);\n\n    this.state = { isPlaying: this.props.isPlaying };\n  }\n\n  /** @internal */\n  public override componentDidUpdate() {\n    if (this.props.isPlaying !== this.state.isPlaying) {\n      this.setState((_, props) => ({ isPlaying: props.isPlaying }));\n    }\n  }\n\n  private _onClick = () => {\n    const _isPlaying = !this.state.isPlaying;\n\n    this.setState({ isPlaying: _isPlaying });\n\n    if (_isPlaying) {\n      // istanbul ignore else\n      if (this.props.onPlay)\n        this.props.onPlay();\n    } else {\n      // istanbul ignore else\n      if (this.props.onPause)\n        this.props.onPause();\n    }\n  };\n\n  public override render() {\n    const { tooltip } = this.props;\n    const iconSpec = this.state.isPlaying ? <SvgPause /> : <SvgPlay />;\n    let title = tooltip;\n\n    if (!title)\n      title = UiIModelComponents.translate(this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\");\n\n    return (\n      <button data-testid={this.props.className} title={title} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick}>\n        <span className=\"icon\" data-testid={this.state.isPlaying ? \"pause\" : \"play\"} ><Icon iconSpec={iconSpec} data-testid={this.state.isPlaying ? \"pause\" : \"play\"} /></span>\n      </button>\n    );\n  }\n}\n"]}

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

@@ -1,28 +1,28 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-.player-button {
-  width: 38px;
-  height: 38px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  outline: none;
-  border-radius: var(--iui-border-radius-1);
-  border: solid 1px var(--iui-color-border-foreground);
-  background-color: var(--iui-color-background);
-  color: var(--iui-color-icon);
-  cursor: pointer;
-
-  &:hover {
-    color: var(--iui-color-icon-hover);
-  }
-
-  &:focus-visible {
-    outline: 1px solid var(--iui-color-border-accent);
-    outline-offset: -1px;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.player-button {
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  outline: none;
+  border-radius: var(--iui-border-radius-1);
+  border: solid 1px var(--iui-color-border-foreground);
+  background-color: var(--iui-color-background);
+  color: var(--iui-color-icon);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--iui-color-icon-hover);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--iui-color-border-accent);
+    outline-offset: -1px;
+  }
+}

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

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

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

@@ -1,105 +1,105 @@
-/*---------------------------------------------------------------------------------------------
-* 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/z-index";
-// the following overrides default iui-slider-thumb settings from  iTwinUI
-div.components-timeline-thumb.iui-slider-thumb {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--iui-color-background);
-  box-sizing: border-box;
-  width: 38px;
-  height: 20px;
-  border-radius: var(--iui-border-radius-1);
-  border: 1px solid var(--iui-color-border);
-  transform: translateX(-19.2px);
-  top: 4px;
-}
-
-.components-timeline-rail-marker-container {
-  width: 100%;
-  position: absolute;
-
-  div.components-timeline-tooltip {
-    @include uicore-z-index(tooltip);
-    position: absolute;
-    top: -8px;
-    display: inline-block;
-    transform: translateX(-50px);
-    border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
-    font-size: 14px;
-
-    .tooltip-text {
-      width: 100px;
-      background-color: rgba(0, 0, 0, var(--iui-opacity-3));
-      color: #fff;
-      // opacity: 0.8;
-      text-align: center;
-      border-radius: 6px;
-      padding: 8px 0;
-      position: absolute;
-      z-index: 1;
-      bottom: 150%;
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 100%;
-        left: 50%;
-        margin-left: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: rgba(0, 0, 0, var(--iui-opacity-3)) transparent
-          transparent transparent;
-      }
-    }
-  }
-}
-
-.scrubber-handle {
-  pointer-events: none;
-  position: absolute;
-  width: 38px;
-  height: 20px;
-  border-radius: var(--iui-border-radius-1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  > div {
-    width: 1px;
-    height: 10px;
-    margin: 0 1px;
-    background-color: var(--iui-color-border-subtle);
-  }
-}
-
-.scrubber-track {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 4px;
-  z-index: 1;
-  cursor: pointer;
-}
-
-.components-timeline-date-marker {
-  pointer-events: none;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(50%);
-}
-
-.date-marker-default {
-  height: 12px;
-  width: 3px;
-  border-radius: var(--iui-border-radius-1);
-  transform: translateY(1px);
-  background-color: var(--iui-color-border);
-}
+/*---------------------------------------------------------------------------------------------
+* 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/z-index";
+// the following overrides default iui-slider-thumb settings from  iTwinUI
+div.components-timeline-thumb.iui-slider-thumb {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--iui-color-background);
+  box-sizing: border-box;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  border: 1px solid var(--iui-color-border);
+  transform: translateX(-19.2px);
+  top: 4px;
+}
+
+.components-timeline-rail-marker-container {
+  width: 100%;
+  position: absolute;
+
+  div.components-timeline-tooltip {
+    @include uicore-z-index(tooltip);
+    position: absolute;
+    top: -8px;
+    display: inline-block;
+    transform: translateX(-50px);
+    border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
+    font-size: 14px;
+
+    .tooltip-text {
+      width: 100px;
+      background-color: rgba(0, 0, 0, var(--iui-opacity-3));
+      color: #fff;
+      // opacity: 0.8;
+      text-align: center;
+      border-radius: 6px;
+      padding: 8px 0;
+      position: absolute;
+      z-index: 1;
+      bottom: 150%;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, var(--iui-opacity-3)) transparent
+          transparent transparent;
+      }
+    }
+  }
+}
+
+.scrubber-handle {
+  pointer-events: none;
+  position: absolute;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  > div {
+    width: 1px;
+    height: 10px;
+    margin: 0 1px;
+    background-color: var(--iui-color-border-subtle);
+  }
+}
+
+.scrubber-track {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.components-timeline-date-marker {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(50%);
+}
+
+.date-marker-default {
+  height: 12px;
+  width: 3px;
+  border-radius: var(--iui-border-radius-1);
+  transform: translateY(1px);
+  background-color: var(--iui-color-border);
+}