@itwin/imodel-components-react 4.1.0 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +335 -327
- package/LICENSE.md +9 -9
- package/README.md +11 -11
- package/lib/cjs/imodel-components-react/UiIModelComponents.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/UiIModelComponents.js +13 -10
- package/lib/cjs/imodel-components-react/UiIModelComponents.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.js +23 -17
- package/lib/cjs/imodel-components-react/color/AlphaSlider.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.scss +71 -63
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.d.ts +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.js +11 -9
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.scss +90 -90
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.d.ts +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.js +6 -8
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.d.ts +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.js +11 -12
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.scss +62 -62
- package/lib/cjs/imodel-components-react/color/HueSlider.d.ts +1 -1
- package/lib/cjs/imodel-components-react/color/HueSlider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/HueSlider.js +32 -15
- package/lib/cjs/imodel-components-react/color/HueSlider.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/HueSlider.scss +78 -61
- package/lib/cjs/imodel-components-react/color/SaturationPicker.d.ts +1 -1
- package/lib/cjs/imodel-components-react/color/SaturationPicker.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/SaturationPicker.js +14 -11
- package/lib/cjs/imodel-components-react/color/SaturationPicker.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/SaturationPicker.scss +36 -35
- package/lib/cjs/imodel-components-react/color/Swatch.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/Swatch.js +5 -8
- package/lib/cjs/imodel-components-react/color/Swatch.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/Swatch.scss +22 -22
- package/lib/cjs/imodel-components-react/color/getCSSColorFromDef.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/getCSSColorFromDef.js +3 -3
- package/lib/cjs/imodel-components-react/color/getCSSColorFromDef.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.js +17 -9
- package/lib/cjs/imodel-components-react/editors/ColorEditor.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.scss +18 -18
- package/lib/cjs/imodel-components-react/editors/WeightEditor.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/editors/WeightEditor.js +8 -6
- package/lib/cjs/imodel-components-react/editors/WeightEditor.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/WeightEditor.scss +16 -16
- package/lib/cjs/imodel-components-react/inputs/QuantityInput.d.ts +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityInput.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityInput.js +18 -12
- package/lib/cjs/imodel-components-react/inputs/QuantityInput.js.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.d.ts +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js +36 -22
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.scss +106 -106
- package/lib/cjs/imodel-components-react/lineweight/Swatch.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/Swatch.js +12 -16
- package/lib/cjs/imodel-components-react/lineweight/Swatch.js.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/Swatch.scss +48 -48
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js +14 -10
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.scss +51 -51
- package/lib/cjs/imodel-components-react/navigationaids/Cube.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/Cube.js +31 -11
- package/lib/cjs/imodel-components-react/navigationaids/Cube.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/Cube.scss +19 -19
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.js +103 -49
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.scss +178 -178
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.js +171 -66
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.scss +135 -135
- package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.js +20 -13
- package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.scss +59 -59
- package/lib/cjs/imodel-components-react/quantityformat/FormatPrecision.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatPrecision.js +4 -7
- package/lib/cjs/imodel-components-react/quantityformat/FormatPrecision.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.js +14 -10
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatType.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatType.js +33 -11
- package/lib/cjs/imodel-components-react/quantityformat/FormatType.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnitLabel.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnitLabel.js +16 -10
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnitLabel.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnits.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnits.js +32 -24
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnits.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.js +58 -39
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/QuantityFormatPanel.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/QuantityFormatPanel.js +8 -7
- package/lib/cjs/imodel-components-react/quantityformat/QuantityFormatPanel.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalPrecision.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalPrecision.js +55 -16
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalPrecision.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalSeparator.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalSeparator.js +11 -5
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalSeparator.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/FractionPrecision.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/FractionPrecision.js +39 -12
- package/lib/cjs/imodel-components-react/quantityformat/misc/FractionPrecision.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ScientificType.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ScientificType.js +11 -5
- package/lib/cjs/imodel-components-react/quantityformat/misc/ScientificType.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/SignOption.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/SignOption.js +19 -7
- package/lib/cjs/imodel-components-react/quantityformat/misc/SignOption.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSeparatorSelector.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js +21 -8
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSizeSelector.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSizeSelector.js +11 -5
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSizeSelector.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSelector.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSelector.js +13 -6
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.js +22 -12
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/UnitDescr.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/UnitDescr.js +30 -13
- package/lib/cjs/imodel-components-react/quantityformat/misc/UnitDescr.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseSolarDataProvider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseSolarDataProvider.js +15 -7
- package/lib/cjs/imodel-components-react/timeline/BaseSolarDataProvider.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseTimelineDataProvider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseTimelineDataProvider.js +11 -9
- package/lib/cjs/imodel-components-react/timeline/BaseTimelineDataProvider.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.js +7 -4
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.scss +27 -27
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.js +3 -3
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.scss +28 -28
- package/lib/cjs/imodel-components-react/timeline/Scrubber.d.ts +1 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.js +32 -17
- package/lib/cjs/imodel-components-react/timeline/Scrubber.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.scss +105 -105
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.js +61 -27
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.scss +359 -359
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.js +4 -5
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.scss +40 -40
- package/lib/cjs/imodel-components-react/timeline/Timeline.scss +165 -165
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js +56 -29
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.scss +178 -178
- package/lib/cjs/imodel-components-react/timeline/interfaces.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/interfaces.js +3 -3
- package/lib/cjs/imodel-components-react/timeline/interfaces.js.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.d.ts +2 -2
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.js +45 -33
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.js.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponentEvents.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponentEvents.js +5 -4
- package/lib/cjs/imodel-components-react/viewport/ViewportComponentEvents.js.map +1 -1
- package/lib/cjs/imodel-components-react.js +3 -3
- package/lib/cjs/imodel-components-react.js.map +1 -1
- package/lib/esm/imodel-components-react/UiIModelComponents.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/UiIModelComponents.js +13 -10
- package/lib/esm/imodel-components-react/UiIModelComponents.js.map +1 -1
- package/lib/esm/imodel-components-react/color/AlphaSlider.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/AlphaSlider.js +23 -17
- package/lib/esm/imodel-components-react/color/AlphaSlider.js.map +1 -1
- package/lib/esm/imodel-components-react/color/AlphaSlider.scss +71 -63
- package/lib/esm/imodel-components-react/color/ColorPickerButton.d.ts +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.js +11 -9
- package/lib/esm/imodel-components-react/color/ColorPickerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.scss +90 -90
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.d.ts +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.js +7 -9
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.d.ts +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.js +13 -14
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.scss +62 -62
- package/lib/esm/imodel-components-react/color/HueSlider.d.ts +1 -1
- package/lib/esm/imodel-components-react/color/HueSlider.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/HueSlider.js +32 -15
- package/lib/esm/imodel-components-react/color/HueSlider.js.map +1 -1
- package/lib/esm/imodel-components-react/color/HueSlider.scss +78 -61
- package/lib/esm/imodel-components-react/color/SaturationPicker.d.ts +1 -1
- package/lib/esm/imodel-components-react/color/SaturationPicker.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/SaturationPicker.js +14 -11
- package/lib/esm/imodel-components-react/color/SaturationPicker.js.map +1 -1
- package/lib/esm/imodel-components-react/color/SaturationPicker.scss +36 -35
- package/lib/esm/imodel-components-react/color/Swatch.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/Swatch.js +5 -8
- package/lib/esm/imodel-components-react/color/Swatch.js.map +1 -1
- package/lib/esm/imodel-components-react/color/Swatch.scss +22 -22
- package/lib/esm/imodel-components-react/color/getCSSColorFromDef.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/getCSSColorFromDef.js +3 -3
- package/lib/esm/imodel-components-react/color/getCSSColorFromDef.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.js +18 -10
- package/lib/esm/imodel-components-react/editors/ColorEditor.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.scss +18 -18
- package/lib/esm/imodel-components-react/editors/WeightEditor.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/editors/WeightEditor.js +10 -8
- package/lib/esm/imodel-components-react/editors/WeightEditor.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/WeightEditor.scss +16 -16
- package/lib/esm/imodel-components-react/inputs/QuantityInput.d.ts +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityInput.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityInput.js +18 -12
- package/lib/esm/imodel-components-react/inputs/QuantityInput.js.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.d.ts +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.js +38 -24
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.js.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.scss +106 -106
- package/lib/esm/imodel-components-react/lineweight/Swatch.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/Swatch.js +12 -16
- package/lib/esm/imodel-components-react/lineweight/Swatch.js.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/Swatch.scss +48 -48
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.js +14 -10
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.scss +51 -51
- package/lib/esm/imodel-components-react/navigationaids/Cube.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/Cube.js +31 -11
- package/lib/esm/imodel-components-react/navigationaids/Cube.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/Cube.scss +19 -19
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.js +105 -51
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.scss +178 -178
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.js +173 -68
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.scss +135 -135
- package/lib/esm/imodel-components-react/quantityformat/FormatPanel.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatPanel.js +20 -13
- package/lib/esm/imodel-components-react/quantityformat/FormatPanel.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatPanel.scss +59 -59
- package/lib/esm/imodel-components-react/quantityformat/FormatPrecision.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatPrecision.js +4 -7
- package/lib/esm/imodel-components-react/quantityformat/FormatPrecision.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.js +14 -10
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatType.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatType.js +33 -11
- package/lib/esm/imodel-components-react/quantityformat/FormatType.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.js +16 -10
- package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnits.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnits.js +32 -24
- package/lib/esm/imodel-components-react/quantityformat/FormatUnits.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js +58 -39
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.js +8 -7
- package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/DecimalPrecision.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/DecimalPrecision.js +55 -16
- package/lib/esm/imodel-components-react/quantityformat/misc/DecimalPrecision.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/DecimalSeparator.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/DecimalSeparator.js +11 -5
- package/lib/esm/imodel-components-react/quantityformat/misc/DecimalSeparator.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/FractionPrecision.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/FractionPrecision.js +39 -12
- package/lib/esm/imodel-components-react/quantityformat/misc/FractionPrecision.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ScientificType.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ScientificType.js +11 -5
- package/lib/esm/imodel-components-react/quantityformat/misc/ScientificType.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/SignOption.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/SignOption.js +19 -7
- package/lib/esm/imodel-components-react/quantityformat/misc/SignOption.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js +21 -8
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.js +11 -5
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js +13 -6
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js +22 -12
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.js +30 -13
- package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseSolarDataProvider.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseSolarDataProvider.js +16 -8
- package/lib/esm/imodel-components-react/timeline/BaseSolarDataProvider.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseTimelineDataProvider.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseTimelineDataProvider.js +11 -9
- package/lib/esm/imodel-components-react/timeline/BaseTimelineDataProvider.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/InlineEdit.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/InlineEdit.js +7 -4
- package/lib/esm/imodel-components-react/timeline/InlineEdit.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/InlineEdit.scss +27 -27
- package/lib/esm/imodel-components-react/timeline/PlayerButton.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/PlayerButton.js +3 -3
- package/lib/esm/imodel-components-react/timeline/PlayerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/PlayerButton.scss +28 -28
- package/lib/esm/imodel-components-react/timeline/Scrubber.d.ts +1 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.js +32 -17
- package/lib/esm/imodel-components-react/timeline/Scrubber.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.scss +105 -105
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.js +63 -29
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.scss +359 -359
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.js +4 -5
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.scss +40 -40
- package/lib/esm/imodel-components-react/timeline/Timeline.scss +165 -165
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.js +58 -31
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.scss +178 -178
- package/lib/esm/imodel-components-react/timeline/interfaces.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/interfaces.js +3 -3
- package/lib/esm/imodel-components-react/timeline/interfaces.js.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.d.ts +2 -2
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.js +47 -35
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.js.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponentEvents.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponentEvents.js +5 -4
- package/lib/esm/imodel-components-react/viewport/ViewportComponentEvents.js.map +1 -1
- package/lib/esm/imodel-components-react.js +3 -3
- package/lib/esm/imodel-components-react.js.map +1 -1
- package/lib/public/locales/en/UiIModelComponents.json +139 -139
- package/package.json +15 -24
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":"AAIA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,UAAU,eAAgB,SAAQ,WAAW;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":"AAIA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,UAAU,eAAgB,SAAQ,WAAW;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAC7C,eAAe,EACf,eAAe,CAChB;IACC,OAAO,CAAC,SAAS,CAAuC;gBAE5C,KAAK,EAAE,eAAe;IASlC,gBAAgB;IACA,kBAAkB,CAChC,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,eAAe;IAU7B,OAAO,CAAC,OAAO,CAEb;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAYhB;IAEF,OAAO,CAAC,SAAS,CAEf;IAEF,OAAO,CAAC,WAAW;IAKH,MAAM;CAiBvB"}
|
|
@@ -28,9 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.InlineEdit = void 0;
|
|
30
30
|
/*---------------------------------------------------------------------------------------------
|
|
31
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
32
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
33
|
-
*--------------------------------------------------------------------------------------------*/
|
|
31
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
32
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
33
|
+
*--------------------------------------------------------------------------------------------*/
|
|
34
34
|
require("./InlineEdit.scss");
|
|
35
35
|
const classnames_1 = __importDefault(require("classnames"));
|
|
36
36
|
const React = __importStar(require("react"));
|
|
@@ -63,7 +63,10 @@ class InlineEdit extends React.Component {
|
|
|
63
63
|
this._onChange = (event) => {
|
|
64
64
|
this.setState({ value: event.target.value });
|
|
65
65
|
};
|
|
66
|
-
this.state = {
|
|
66
|
+
this.state = {
|
|
67
|
+
value: this.props.defaultValue,
|
|
68
|
+
originalValue: this.props.defaultValue,
|
|
69
|
+
};
|
|
67
70
|
}
|
|
68
71
|
/** @internal */
|
|
69
72
|
componentDidUpdate(prevProps, _prevState) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"InlineEdit.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/InlineEdit.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAChG,6BAA2B;AAC3B,4DAAoC;AACpC,6CAA+B;AAC/B,0DAAmD;AAEnD,wDAA6C;AAY7C;;GAEG;AACH,MAAa,UAAW,SAAQ,KAAK,CAAC,SAGrC;IAGC,YAAY,KAAsB;QAChC,KAAK,CAAC,KAAK,CAAC,CAAC;QAHP,cAAS,GAAG,KAAK,CAAC,SAAS,EAAoB,CAAC;QAuBxD,uBAAuB;QACf,YAAO,GAAG,CAAC,KAA0C,EAAE,EAAE;YAC/D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC;QAEM,aAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;YAChE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,KAA4C,EAAE,EAAE;YACpE,QAAQ,KAAK,CAAC,GAAG,EAAE;gBACjB,KAAK,2BAAU,CAAC,MAAM;oBACpB,IAAI,CAAC,QAAQ,CACX,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,CAAC,EACnD,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAQ,CAAC,MAAM,EAAE,CACvC,CAAC;oBACF,MAAM;gBACR,KAAK,2BAAU,CAAC,KAAK;oBACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBACnC,MAAM;aACT;QACH,CAAC,CAAC;QAEM,cAAS,GAAG,CAAC,KAA0C,EAAE,EAAE;YACjE,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;QAC/C,CAAC,CAAC;QA3CA,IAAI,CAAC,KAAK,GAAG;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY;YAC9B,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY;SACvC,CAAC;IACJ,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAChC,SAA0B,EAC1B,UAA2B;QAE3B,IAAI,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;YACtD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;gBACzB,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,aAAa,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;YAC1E,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IA6BO,WAAW,CAAC,KAAa;QAC/B,uBAAuB;QACvB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ;YAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,oBAAC,qBAAK,mBACQ,8BAA8B,EAC1C,SAAS,EAAE,IAAA,oBAAU,EAAC,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAChE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,SAAS,GACxB,CACH,CAAC;IACJ,CAAC;CACF;AA5ED,gCA4EC","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 type { 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<\n InlineEditProps,\n InlineEditState\n> {\n private _inputRef = React.createRef<HTMLInputElement>();\n\n constructor(props: InlineEditProps) {\n super(props);\n\n this.state = {\n value: this.props.defaultValue,\n originalValue: this.props.defaultValue,\n };\n }\n\n /** @internal */\n public override componentDidUpdate(\n prevProps: InlineEditProps,\n _prevState: InlineEditState\n ) {\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 );\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) 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}\n"]}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
|
|
6
|
-
|
|
7
|
-
.inline-edit-input {
|
|
8
|
-
color: var(--iui-color-text);
|
|
9
|
-
background: inherit;
|
|
10
|
-
border: 1px solid transparent;
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
|
|
13
|
-
&.iui-input {
|
|
14
|
-
padding: 0px;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
&:hover {
|
|
18
|
-
border: 1px solid $buic-background-5;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&:focus {
|
|
22
|
-
background: $buic-background-1;
|
|
23
|
-
border: 1px solid $buic-background-5;
|
|
24
|
-
outline: none;
|
|
25
|
-
color: var(--iui-color-text-hover);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
|
|
6
|
+
|
|
7
|
+
.inline-edit-input {
|
|
8
|
+
color: var(--iui-color-text);
|
|
9
|
+
background: inherit;
|
|
10
|
+
border: 1px solid transparent;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
|
|
13
|
+
&.iui-input {
|
|
14
|
+
padding: 0px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&:hover {
|
|
18
|
+
border: 1px solid $buic-background-5;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&:focus {
|
|
22
|
+
background: $buic-background-1;
|
|
23
|
+
border: 1px solid $buic-background-5;
|
|
24
|
+
outline: none;
|
|
25
|
+
color: var(--iui-color-text-hover);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"PlayerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKrD;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;IACxD,OAAO,CAAC,QAAQ,CAGd;IAEc,MAAM;CAevB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAC7C,iBAAiB,EACjB,eAAe,CAChB;gBACa,KAAK,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,GAAG;IAMnD,gBAAgB;IACA,kBAAkB;IAMlC,OAAO,CAAC,QAAQ,CAYd;IAEc,MAAM;CA6BvB"}
|
|
@@ -28,9 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.PlayButton = exports.PlayerButton = void 0;
|
|
30
30
|
/*---------------------------------------------------------------------------------------------
|
|
31
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
32
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
33
|
-
*--------------------------------------------------------------------------------------------*/
|
|
31
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
32
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
33
|
+
*--------------------------------------------------------------------------------------------*/
|
|
34
34
|
require("./PlayerButton.scss");
|
|
35
35
|
const classnames_1 = __importDefault(require("classnames"));
|
|
36
36
|
const React = __importStar(require("react"));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA
|
|
1
|
+
{"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 type { CommonProps } from \"@itwin/core-react\";\nimport { 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) this.props.onClick();\n };\n\n public override render() {\n const { icon, title } = this.props;\n return (\n <button\n data-testid={this.props.className}\n className={classnames(\"player-button\", this.props.className)}\n onClick={this._onClick}\n title={title}\n >\n <span className=\"icon\">\n <Icon iconSpec={icon} />\n </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<\n PlayerButtonProps,\n 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) this.props.onPlay();\n } else {\n // istanbul ignore else\n if (this.props.onPause) 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(\n this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\"\n );\n\n return (\n <button\n data-testid={this.props.className}\n title={title}\n className={classnames(\"player-button\", this.props.className)}\n onClick={this._onClick}\n >\n <span\n className=\"icon\"\n data-testid={this.state.isPlaying ? \"pause\" : \"play\"}\n >\n <Icon\n iconSpec={iconSpec}\n data-testid={this.state.isPlaying ? \"pause\" : \"play\"}\n />\n </span>\n </button>\n );\n }\n}\n"]}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
|
|
6
|
-
.player-button {
|
|
7
|
-
width: 38px;
|
|
8
|
-
height: 38px;
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: center;
|
|
11
|
-
justify-content: center;
|
|
12
|
-
font-size: 16px;
|
|
13
|
-
outline: none;
|
|
14
|
-
border-radius: var(--iui-border-radius-1);
|
|
15
|
-
border: solid 1px var(--iui-color-border-foreground);
|
|
16
|
-
background-color: var(--iui-color-background);
|
|
17
|
-
color: var(--iui-color-icon);
|
|
18
|
-
cursor: pointer;
|
|
19
|
-
|
|
20
|
-
&:hover {
|
|
21
|
-
color: var(--iui-color-icon-hover);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&:focus-visible {
|
|
25
|
-
outline: 1px solid var(--iui-color-border-accent);
|
|
26
|
-
outline-offset: -1px;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
|
|
6
|
+
.player-button {
|
|
7
|
+
width: 38px;
|
|
8
|
+
height: 38px;
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
font-size: 16px;
|
|
13
|
+
outline: none;
|
|
14
|
+
border-radius: var(--iui-border-radius-1);
|
|
15
|
+
border: solid 1px var(--iui-color-border-foreground);
|
|
16
|
+
background-color: var(--iui-color-background);
|
|
17
|
+
color: var(--iui-color-icon);
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
|
|
20
|
+
&:hover {
|
|
21
|
+
color: var(--iui-color-icon-hover);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&:focus-visible {
|
|
25
|
+
outline: 1px solid var(--iui-color-border-accent);
|
|
26
|
+
outline-offset: -1px;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -9,7 +9,7 @@ export declare function getPercentageOfRectangle(rect: DOMRect, pointer: number)
|
|
|
9
9
|
/**
|
|
10
10
|
* @internal
|
|
11
11
|
*/
|
|
12
|
-
export declare function RailMarkers({ showToolTip, percent, tooltipText, markDate }: {
|
|
12
|
+
export declare function RailMarkers({ showToolTip, percent, tooltipText, markDate, }: {
|
|
13
13
|
showToolTip: boolean;
|
|
14
14
|
percent: number;
|
|
15
15
|
tooltipText: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/Scrubber.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/Scrubber.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEnE;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,UAGtE;AAiGD;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,OAAO,EACP,WAAW,EACX,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,eAsBA;AAED;;;GAGG;AACH,wBAAgB,WAAW,gBAQ1B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,eAAe,EAAE,cAAc,GAAG,SAAS,WA0B1E;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,uBAAuB,CAAC;CACpC;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AACD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAyI5C"}
|
|
@@ -25,9 +25,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.Scrubber = exports.useFocusedThumb = exports.CustomThumb = exports.RailMarkers = exports.getPercentageOfRectangle = void 0;
|
|
27
27
|
/*---------------------------------------------------------------------------------------------
|
|
28
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
29
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
30
|
-
*--------------------------------------------------------------------------------------------*/
|
|
28
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
29
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
30
|
+
*--------------------------------------------------------------------------------------------*/
|
|
31
31
|
require("./Scrubber.scss");
|
|
32
32
|
const React = __importStar(require("react"));
|
|
33
33
|
const itwinui_react_1 = require("@itwin/itwinui-react");
|
|
@@ -44,7 +44,7 @@ exports.getPercentageOfRectangle = getPercentageOfRectangle;
|
|
|
44
44
|
// istanbul ignore next - WIP
|
|
45
45
|
const formatDuration = (value) => {
|
|
46
46
|
const addZero = (i) => {
|
|
47
|
-
return
|
|
47
|
+
return i < 10 ? `0${i}` : i;
|
|
48
48
|
};
|
|
49
49
|
const date = new Date(value);
|
|
50
50
|
const minutes = date.getUTCMinutes();
|
|
@@ -65,7 +65,7 @@ const formatTime = (startDate, endDate, fraction, timeZoneOffset) => {
|
|
|
65
65
|
function generateToolTipText(showTime, percent, min, max, startDate, endDate, timeZoneOffset = 0) {
|
|
66
66
|
if (startDate && endDate)
|
|
67
67
|
return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : ""} `;
|
|
68
|
-
const val = Math.round(min + (
|
|
68
|
+
const val = Math.round(min + (max - min) * percent);
|
|
69
69
|
return formatDuration(val);
|
|
70
70
|
}
|
|
71
71
|
function getPercentageFromDate(startDate, endDate, date) {
|
|
@@ -76,7 +76,7 @@ function getPercentageFromDate(startDate, endDate, date) {
|
|
|
76
76
|
}
|
|
77
77
|
function getDateMarker(dateMarkerPropsIn, startDate, endDate) {
|
|
78
78
|
const percentage = getPercentageFromDate(startDate, endDate, dateMarkerPropsIn.date);
|
|
79
|
-
const marker = dateMarkerPropsIn.dateMarker ? dateMarkerPropsIn.dateMarker : React.createElement("span", { className: "date-marker-default" });
|
|
79
|
+
const marker = dateMarkerPropsIn.dateMarker ? (dateMarkerPropsIn.dateMarker) : (React.createElement("span", { className: "date-marker-default" }));
|
|
80
80
|
return { datePercentage: percentage, dateMarker: marker };
|
|
81
81
|
}
|
|
82
82
|
function markDateInTimelineRange(dateMarkerProps, startDate, endDate) {
|
|
@@ -84,7 +84,8 @@ function markDateInTimelineRange(dateMarkerProps, startDate, endDate) {
|
|
|
84
84
|
if (dateMarkerProps && startDate && endDate) {
|
|
85
85
|
const inDate = dateMarkerProps.date ? dateMarkerProps.date : new Date();
|
|
86
86
|
// istanbul ignore else
|
|
87
|
-
if (inDate.getTime() >= startDate.getTime() &&
|
|
87
|
+
if (inDate.getTime() >= startDate.getTime() &&
|
|
88
|
+
inDate.getTime() <= endDate.getTime())
|
|
88
89
|
return true;
|
|
89
90
|
}
|
|
90
91
|
return false;
|
|
@@ -92,13 +93,11 @@ function markDateInTimelineRange(dateMarkerProps, startDate, endDate) {
|
|
|
92
93
|
/**
|
|
93
94
|
* @internal
|
|
94
95
|
*/
|
|
95
|
-
function RailMarkers({ showToolTip, percent, tooltipText, markDate }) {
|
|
96
|
+
function RailMarkers({ showToolTip, percent, tooltipText, markDate, }) {
|
|
96
97
|
return (React.createElement("div", { className: "components-timeline-rail-marker-container" },
|
|
97
|
-
showToolTip &&
|
|
98
|
-
React.createElement("
|
|
99
|
-
|
|
100
|
-
markDate &&
|
|
101
|
-
React.createElement("div", { className: "components-timeline-date-marker", "data-testid": "test-date-marker", style: { left: `${Math.round(markDate.datePercentage * 100)}% ` } }, markDate.dateMarker)));
|
|
98
|
+
showToolTip && (React.createElement("div", { className: "components-timeline-tooltip", style: { left: `${Math.round(percent * 100)}% ` } },
|
|
99
|
+
React.createElement("span", { className: "tooltip-text" }, tooltipText))),
|
|
100
|
+
markDate && (React.createElement("div", { className: "components-timeline-date-marker", "data-testid": "test-date-marker", style: { left: `${Math.round(markDate.datePercentage * 100)}% ` } }, markDate.dateMarker))));
|
|
102
101
|
}
|
|
103
102
|
exports.RailMarkers = RailMarkers;
|
|
104
103
|
/**
|
|
@@ -142,7 +141,7 @@ exports.useFocusedThumb = useFocusedThumb;
|
|
|
142
141
|
* @internal
|
|
143
142
|
*/
|
|
144
143
|
function Scrubber(props) {
|
|
145
|
-
const { startDate, endDate, showTime, isPlaying, totalDuration, timeZoneOffset, currentDuration, className, onChange, onUpdate } = props;
|
|
144
|
+
const { startDate, endDate, showTime, isPlaying, totalDuration, timeZoneOffset, currentDuration, className, onChange, onUpdate, } = props;
|
|
146
145
|
const thumbProps = () => {
|
|
147
146
|
return {
|
|
148
147
|
className: "components-timeline-thumb",
|
|
@@ -180,12 +179,28 @@ function Scrubber(props) {
|
|
|
180
179
|
const thumbHasFocus = useFocusedThumb(sliderContainer);
|
|
181
180
|
const tickLabel = React.useMemo(() => {
|
|
182
181
|
const showTip = isPlaying || showRailTooltip || thumbHasFocus;
|
|
183
|
-
const percent =
|
|
182
|
+
const percent = isPlaying || thumbHasFocus
|
|
183
|
+
? currentDuration / totalDuration
|
|
184
|
+
: pointerPercent;
|
|
184
185
|
const markDateInRange = markDateInTimelineRange(props.markDate, startDate, endDate);
|
|
185
|
-
const currentDateMarker = props.markDate && markDateInRange && startDate && endDate
|
|
186
|
+
const currentDateMarker = props.markDate && markDateInRange && startDate && endDate
|
|
187
|
+
? getDateMarker(props.markDate, startDate, endDate)
|
|
188
|
+
: undefined;
|
|
186
189
|
const tooltipText = generateToolTipText(!!showTime, percent, 0, totalDuration, startDate, endDate, timeZoneOffset);
|
|
187
190
|
return (React.createElement(RailMarkers, { showToolTip: showTip, percent: percent, tooltipText: tooltipText, markDate: currentDateMarker }));
|
|
188
|
-
}, [
|
|
191
|
+
}, [
|
|
192
|
+
isPlaying,
|
|
193
|
+
showRailTooltip,
|
|
194
|
+
currentDuration,
|
|
195
|
+
totalDuration,
|
|
196
|
+
pointerPercent,
|
|
197
|
+
startDate,
|
|
198
|
+
endDate,
|
|
199
|
+
timeZoneOffset,
|
|
200
|
+
showTime,
|
|
201
|
+
thumbHasFocus,
|
|
202
|
+
props.markDate,
|
|
203
|
+
]);
|
|
189
204
|
return (React.createElement(itwinui_react_1.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: {
|
|
190
205
|
onPointerEnter: handlePointerEnter,
|
|
191
206
|
onPointerMove: handlePointerMove,
|
|
@@ -1 +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 type { CommonProps} from \"@itwin/core-react\";\r\nimport { useEventListener } from \"@itwin/core-react\";\r\nimport { toDateString, toTimeString } from \"@itwin/components-react\";\r\nimport type { 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"]}
|
|
1
|
+
{"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 type { CommonProps } from \"@itwin/core-react\";\nimport { useEventListener } from \"@itwin/core-react\";\nimport { toDateString, toTimeString } from \"@itwin/components-react\";\nimport type { 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 = (\n startDate: Date,\n endDate: Date,\n fraction: number,\n timeZoneOffset?: number\n) => {\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 = (\n startDate: Date,\n endDate: Date,\n fraction: number,\n timeZoneOffset?: number\n) => {\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(\n showTime: boolean,\n percent: number,\n min: number,\n max: number,\n startDate?: Date,\n endDate?: Date,\n timeZoneOffset = 0\n) {\n if (startDate && endDate)\n return `${formatDate(startDate, endDate, percent, timeZoneOffset)}${\n showTime ? formatTime(startDate, endDate, percent, timeZoneOffset) : \"\"\n } `;\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(\n dateMarkerPropsIn: TimelineDateMarkerProps,\n startDate: Date,\n endDate: Date\n): DateMarkerProps {\n const percentage = getPercentageFromDate(\n startDate,\n endDate,\n dateMarkerPropsIn.date\n );\n const marker = dateMarkerPropsIn.dateMarker ? (\n dateMarkerPropsIn.dateMarker\n ) : (\n <span className=\"date-marker-default\"></span>\n );\n return { datePercentage: percentage, dateMarker: marker };\n}\n\nfunction markDateInTimelineRange(\n dateMarkerProps?: TimelineDateMarkerProps,\n startDate?: Date,\n endDate?: Date\n): 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 (\n inDate.getTime() >= startDate.getTime() &&\n inDate.getTime() <= endDate.getTime()\n )\n return true;\n }\n return false;\n}\n/**\n * @internal\n */\nexport function RailMarkers({\n showToolTip,\n percent,\n tooltipText,\n markDate,\n}: {\n showToolTip: boolean;\n percent: number;\n tooltipText: string;\n markDate?: DateMarkerProps;\n}) {\n return (\n <div className=\"components-timeline-rail-marker-container\">\n {showToolTip && (\n <div\n className=\"components-timeline-tooltip\"\n style={{ left: `${Math.round(percent * 100)}% ` }}\n >\n <span className=\"tooltip-text\">{tooltipText}</span>\n </div>\n )}\n {markDate && (\n <div\n className=\"components-timeline-date-marker\"\n data-testid=\"test-date-marker\"\n style={{ left: `${Math.round(markDate.datePercentage * 100)}% ` }}\n >\n {markDate.dateMarker}\n </div>\n )}\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 />\n <div />\n <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 {\n startDate,\n endDate,\n showTime,\n isPlaying,\n totalDuration,\n timeZoneOffset,\n currentDuration,\n className,\n onChange,\n onUpdate,\n } = 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] =\n 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(\n \".iui-slider-container\"\n );\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(\n (event: React.PointerEvent) => {\n sliderContainer &&\n setPointerPercent(\n getPercentageOfRectangle(\n sliderContainer.getBoundingClientRect(),\n event.clientX\n )\n );\n },\n [sliderContainer]\n );\n\n const thumbHasFocus = useFocusedThumb(sliderContainer);\n\n const tickLabel = React.useMemo(() => {\n const showTip = isPlaying || showRailTooltip || thumbHasFocus;\n const percent =\n isPlaying || thumbHasFocus\n ? currentDuration / totalDuration\n : pointerPercent;\n const markDateInRange = markDateInTimelineRange(\n props.markDate,\n startDate,\n endDate\n );\n const currentDateMarker =\n props.markDate && markDateInRange && startDate && endDate\n ? getDateMarker(props.markDate, startDate, endDate)\n : undefined;\n const tooltipText = generateToolTipText(\n !!showTime,\n percent,\n 0,\n totalDuration,\n startDate,\n endDate,\n timeZoneOffset\n );\n return (\n <RailMarkers\n showToolTip={showTip}\n percent={percent}\n tooltipText={tooltipText}\n markDate={currentDateMarker}\n />\n );\n }, [\n isPlaying,\n showRailTooltip,\n currentDuration,\n totalDuration,\n pointerPercent,\n startDate,\n endDate,\n timeZoneOffset,\n showTime,\n thumbHasFocus,\n props.markDate,\n ]);\n\n return (\n <Slider\n 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"]}
|