@ausbom/time-scrubber 0.5.10 → 0.7.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.
Files changed (5) hide show
  1. package/README.md +4 -3
  2. package/lib/TimeScrubber.d.ts +5 -0
  3. package/lib/TimeScrubber.js +3 -3
  4. package/lib/components/Timeline/Timeline.js +13 -3
  5. package/package.json +3 -2
package/README.md CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  > The TimeScrubber component provides a UI for playing back and scrubbing through a number of discrete time steps. It's primarily used to scrub through map layers.
4
4
 
5
+
5
6
  ### Installation
6
7
 
7
8
  ```bash
@@ -13,8 +14,7 @@ npm install @ausbom/time-scrubber
13
14
  ```javascript
14
15
  import TimeScrubber from '@ausbom/time-scrubber'
15
16
  import React from 'react'
16
-
17
- <TimeScrubber
17
+ ;<TimeScrubber
18
18
  onChange={(timeStep: string) => {
19
19
  this.setState({
20
20
  activeStep: timeStep,
@@ -33,7 +33,8 @@ import React from 'react'
33
33
  {
34
34
  id: '3',
35
35
  displayLabel: '45 minutes ago',
36
- }
36
+ },
37
37
  ]}
38
38
  />
39
39
  ```
40
+
package/lib/TimeScrubber.d.ts CHANGED
@@ -7,6 +7,10 @@ export interface IState {
7
7
 
8
8
  export interface IProps {
9
9
  activeStep?: string
10
+ alert?: {
11
+ status: 'error' | 'failure' | 'info' | 'success' | 'warning'
12
+ message: JSX.Element | string
13
+ }
10
14
  autoHideMarkers?: boolean
11
15
  autoPlay?: boolean
12
16
  errorText?: string
@@ -18,6 +22,7 @@ export interface IProps {
18
22
  loadingText?: string
19
23
  loop?: boolean
20
24
  onChange?: (timeStep: string) => void
25
+ onScrub?: (timeStep: string) => void
21
26
  onPause?: () => void
22
27
  onPlay?: () => void
23
28
  rightUtils?: React.ReactNode
package/lib/TimeScrubber.js CHANGED
@@ -1,3 +1,3 @@
1
- "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _lodash=_interopRequireDefault(require("lodash.debounce"));var _classnames=_interopRequireDefault(require("classnames"));var _icon=require("@ausbom/icon");var _styles=require("@ausbom/styles");var _Play=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Play24"));var _Pause=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Pause24"));var _Timeline=_interopRequireDefault(require("./components/Timeline/Timeline"));var _types=require("./types");var _utils=require("./utils");function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2["default"])(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var getForecastMarkerPercentageWidth=function getForecastMarkerPercentageWidth(timeSteps,markerId){var markerIndex=(0,_utils.getStepIndexById)(timeSteps,markerId);if(!markerId||markerIndex<0){return 100}return(0,_utils.toPercentageWidth)(timeSteps,markerIndex)};var TimeScrubber=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(TimeScrubber,_React$Component);var _super=_createSuper(TimeScrubber);function TimeScrubber(props){var _this;(0,_classCallCheck2["default"])(this,TimeScrubber);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"state",{playState:_this.props.autoPlay?_types.ScrubberState.PLAYING:_types.ScrubberState.PAUSED});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"markerRefs",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"markerContainerRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleResize",function(){var autoHideMarkers=_this.props.autoHideMarkers;if(autoHideMarkers){_this.placeLabels()}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"play",function(){_this.setState({playState:_types.ScrubberState.PLAYING},function(){_this.props.onPlay()})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"pause",function(){_this.setState({playState:_types.ScrubberState.PAUSED},function(){_this.props.onPause()})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"placeLabels",function(){var itemPadding=8;var hideClass="bom-scrub-marker--hidden";var lastEnd=0;var containerBbox=null;if(_this.markerContainerRef&&_this.markerContainerRef.current){containerBbox=_this.markerContainerRef.current.getBoundingClientRect()}_this.markerRefs.forEach(function(label,i){_this.markerRefs[i].classList.remove(hideClass);var bbox=label.getBoundingClientRect();var start=bbox.left;var end=bbox.right;if(containerBbox&&end>containerBbox.right){_this.markerRefs[i].classList.add(hideClass)}if(start<lastEnd+itemPadding){_this.markerRefs[i].classList.add(hideClass)}else{lastEnd=end}})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handlePlayPauseClick",function(event){event.preventDefault();_this.togglePlayState()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleRootKeyDown",function(event){var keyCode=event.keyCode;var SPACE_KEY_CODE=32;if(keyCode===SPACE_KEY_CODE){event.preventDefault();_this.togglePlayState()}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"togglePlayState",function(){_this.setState(function(_ref){var playState=_ref.playState;var newState;if(playState===_types.ScrubberState.PLAYING){newState={playState:_types.ScrubberState.PAUSED}}else if(playState===_types.ScrubberState.PAUSED){newState={playState:_types.ScrubberState.PLAYING};_this.props.onPlay()}return newState},function(){if(_this.state.playState===_types.ScrubberState.PAUSED){_this.props.onPause()}})});_this.markerRefs=[];_this.markerContainerRef=/*#__PURE__*/_react["default"].createRef();_this.handleResize=(0,_lodash["default"])(_this.handleResize,100);return _this}(0,_createClass2["default"])(TimeScrubber,[{key:"componentDidMount",value:function componentDidMount(){this.handleResize();window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.handleResize)}},{key:"scrubTo",value:function scrubTo(step){var _this2=this;this.setState({playState:_types.ScrubberState.PAUSED},function(){_this2.props.onChange(step.id)});// If the scrubber is playing, run the onPause callback
2
- if(this.state.playState===_types.ScrubberState.PLAYING){this.props.onPause()}}},{key:"playStep",value:function playStep(step){this.props.onChange(step.id)}},{key:"renderLabels",value:function renderLabels(){var _this3=this;var timeSteps=this.props.timeSteps;this.markerRefs=[];// Pre calculate how many segments we have for the label
3
- var segmentsToNextMarker=timeSteps.map(function(timeStep,timeStepIndex,timeStepArr){if(!timeStep.markerLabel)return 1;var nextMarkerIndex=timeStepArr.findIndex(function(a,i){return i>timeStepIndex&&(a.markerLabel!=null||a.markerLabel==="")})-timeStepIndex;if(nextMarkerIndex>0)return nextMarkerIndex;return timeStepArr.length+1+nextMarkerIndex});return timeSteps.map(function(step,stepIndex){var smallLabelText=step.markerLabelTruncated?step.markerLabelTruncated:step.markerLabel;if(!step.markerLabel){return null}return/*#__PURE__*/_react["default"].createElement("div",{key:step.id,ref:function ref(r){if(r){_this3.markerRefs.push(r)}},className:(0,_classnames["default"])(step.className,"bom-scrub-marker","bom-scrub-marker--ellipsis"),style:_objectSpread(_objectSpread({},step.style),{},{left:"".concat((0,_utils.toPercentageWidth)(timeSteps,stepIndex),"%"),width:"calc(".concat(segmentsToNextMarker[stepIndex]," * ").concat(100/timeSteps.length,"% - 2px)")})},/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-marker--small"},smallLabelText),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-marker--large"},step.markerLabel))})}},{key:"renderTimeline",value:function renderTimeline(){var _this4=this;var _this$props=this.props,activeStep=_this$props.activeStep,forecastMarker=_this$props.forecastMarker,loop=_this$props.loop,timePerStep=_this$props.timePerStep,timeSteps=_this$props.timeSteps;var playState=this.state.playState;var activeStepObj=(0,_utils.getStepById)(timeSteps,activeStep);var displayLabel=activeStepObj?activeStepObj.displayLabel:null;var forecastMarkerIndex=(0,_utils.getStepIndexById)(timeSteps,forecastMarker);return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-display-label"},displayLabel),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline"},/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub-overhang",{"bom-scrub-overhang--filled":!forecastMarker||forecastMarkerIndex<0||forecastMarkerIndex>=1})}),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-scrubber"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-forecast-marker",style:{width:"".concat(getForecastMarkerPercentageWidth(timeSteps,forecastMarker),"%")}}),/*#__PURE__*/_react["default"].createElement(_Timeline["default"],{activeStep:activeStep,loop:loop,playState:playState,timePerStep:timePerStep,timeSteps:timeSteps,onStepPlayback:function onStepPlayback(step){_this4.playStep(step)},onFinishPlayback:function onFinishPlayback(){_this4.setState({playState:_types.ScrubberState.PAUSED})},onScrub:function onScrub(step){_this4.scrubTo(step)}}),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-markers",ref:this.markerContainerRef},this.renderLabels())),/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub-overhang",{"bom-scrub-overhang--filled":!forecastMarker||forecastMarkerIndex<0})})))}},{key:"render",value:function render(){var _this5=this;var _this$props2=this.props,errorText=_this$props2.errorText,isError=_this$props2.isError,isLoading=_this$props2.isLoading,leftUtils=_this$props2.leftUtils,loadingText=_this$props2.loadingText,loop=_this$props2.loop,rightUtils=_this$props2.rightUtils,showUtils=_this$props2.showUtils,timeSteps=_this$props2.timeSteps;var playState=this.state.playState;var hasSteps=timeSteps&&timeSteps.length>0;var hasMultipleSteps=timeSteps.length>1;var renderTimelineContents=function renderTimelineContents(){if(isLoading){return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,loadingText&&/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-display-label"},loadingText),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline__loading-bar"}))}if(!isLoading&&isError){return errorText&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline__error-message"},errorText)}return hasSteps&&_this5.renderTimeline()};return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub",{"bom-scrub--loading":isLoading,"bom-scrub--error":isError}),onKeyDown:this.handleRootKeyDown},/*#__PURE__*/_react["default"].createElement("button",{"data-testid":"bom-time-scrub-play-pause",className:(0,_classnames["default"])("bom-scrub-action",{"bom-scrub-action--with-extra":loop}),type:"button",onClick:this.handlePlayPauseClick,disabled:!hasMultipleSteps},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-action__icon",icon:playState===_types.ScrubberState.PLAYING||isLoading||isError?_Pause["default"]:_Play["default"],primaryColor:_styles.palette.neutral.white,size:24}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__label"},playState===_types.ScrubberState.PLAYING?"Pause":"Play"),loop&&/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__extra"},"Loop")),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline-container"},renderTimelineContents())),showUtils&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils__left"},leftUtils),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils__right"},rightUtils)))}}]);return TimeScrubber}(_react["default"].Component);(0,_defineProperty2["default"])(TimeScrubber,"defaultProps",{autoHideMarkers:false,autoPlay:false,errorText:"",forecastMarker:null,isError:false,isLoading:false,loadingText:"",loop:false,onChange:function onChange(){},onPause:function onPause(){},onPlay:function onPlay(){},showUtils:true,timePerStep:500,timeSteps:[]});var _default=TimeScrubber;exports["default"]=_default;
1
+ "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _lodash=_interopRequireDefault(require("lodash.debounce"));var _classnames=_interopRequireDefault(require("classnames"));var _icon=require("@ausbom/icon");var _form=require("@ausbom/form");var _styles=require("@ausbom/styles");var _Play=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Play24"));var _Pause=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Pause24"));var _Timeline=_interopRequireDefault(require("./components/Timeline/Timeline"));var _types=require("./types");var _utils=require("./utils");function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2["default"])(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var getForecastMarkerPercentageWidth=function getForecastMarkerPercentageWidth(timeSteps,markerId){var markerIndex=(0,_utils.getStepIndexById)(timeSteps,markerId);if(!markerId||markerIndex<0){return 100}return(0,_utils.toPercentageWidth)(timeSteps,markerIndex)};var TimeScrubber=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(TimeScrubber,_React$Component);var _super=_createSuper(TimeScrubber);function TimeScrubber(props){var _this;(0,_classCallCheck2["default"])(this,TimeScrubber);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"state",{playState:_this.props.autoPlay?_types.ScrubberState.PLAYING:_types.ScrubberState.PAUSED});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"markerRefs",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"markerContainerRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"onScrub",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleResize",function(){var autoHideMarkers=_this.props.autoHideMarkers;if(autoHideMarkers){_this.placeLabels()}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"play",function(){_this.setState({playState:_types.ScrubberState.PLAYING},function(){_this.props.onPlay()})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"pause",function(){_this.setState({playState:_types.ScrubberState.PAUSED},function(){_this.props.onPause()})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"placeLabels",function(){var itemPadding=8;var hideClass="bom-scrub-marker--hidden";var lastEnd=0;var containerBbox=null;if(_this.markerContainerRef&&_this.markerContainerRef.current){containerBbox=_this.markerContainerRef.current.getBoundingClientRect()}_this.markerRefs.forEach(function(label,i){_this.markerRefs[i].classList.remove(hideClass);var bbox=label.getBoundingClientRect();var start=bbox.left;var end=bbox.right;if(containerBbox&&end>containerBbox.right){_this.markerRefs[i].classList.add(hideClass)}if(start<lastEnd+itemPadding){_this.markerRefs[i].classList.add(hideClass)}else{lastEnd=end}})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handlePlayPauseClick",function(event){event.preventDefault();_this.togglePlayState()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleRootKeyDown",function(event){var keyCode=event.keyCode;var SPACE_KEY_CODE=32;if(keyCode===SPACE_KEY_CODE){event.preventDefault();_this.togglePlayState()}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"togglePlayState",function(){_this.setState(function(_ref){var playState=_ref.playState;var newState;if(playState===_types.ScrubberState.PLAYING){newState={playState:_types.ScrubberState.PAUSED}}else if(playState===_types.ScrubberState.PAUSED){newState={playState:_types.ScrubberState.PLAYING};_this.props.onPlay()}return newState},function(){if(_this.state.playState===_types.ScrubberState.PAUSED){_this.props.onPause()}})});_this.markerRefs=[];_this.markerContainerRef=/*#__PURE__*/_react["default"].createRef();_this.handleResize=(0,_lodash["default"])(_this.handleResize,100);_this.onScrub=(0,_lodash["default"])(_this.props.onScrub,300);return _this}(0,_createClass2["default"])(TimeScrubber,[{key:"componentDidMount",value:function componentDidMount(){this.handleResize();window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.handleResize)}},{key:"scrubTo",value:function scrubTo(step){var _this2=this;this.setState({playState:_types.ScrubberState.PAUSED},function(){_this2.props.onChange(step.id)});// If the scrubber is playing, run the onPause callback
2
+ if(this.state.playState===_types.ScrubberState.PLAYING){this.props.onPause()}if(this.props.onScrub!=null){this.onScrub(step.id)}}},{key:"playStep",value:function playStep(step){this.props.onChange(step.id)}},{key:"renderLabels",value:function renderLabels(){var _this3=this;var timeSteps=this.props.timeSteps;this.markerRefs=[];// Pre calculate how many segments we have for the label
3
+ var segmentsToNextMarker=timeSteps.map(function(timeStep,timeStepIndex,timeStepArr){if(!timeStep.markerLabel)return 1;var nextMarkerIndex=timeStepArr.findIndex(function(a,i){return i>timeStepIndex&&(a.markerLabel!=null||a.markerLabel==="")})-timeStepIndex;if(nextMarkerIndex>0)return nextMarkerIndex;return timeStepArr.length+1+nextMarkerIndex});return timeSteps.map(function(step,stepIndex){var smallLabelText=step.markerLabelTruncated?step.markerLabelTruncated:step.markerLabel;if(!step.markerLabel){return null}return/*#__PURE__*/_react["default"].createElement("div",{key:step.id,ref:function ref(r){if(r){_this3.markerRefs.push(r)}},className:(0,_classnames["default"])(step.className,"bom-scrub-marker","bom-scrub-marker--ellipsis"),style:_objectSpread(_objectSpread({},step.style),{},{left:"".concat((0,_utils.toPercentageWidth)(timeSteps,stepIndex),"%"),width:"calc(".concat(segmentsToNextMarker[stepIndex]," * ").concat(100/timeSteps.length,"% - 2px)")})},/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-marker--small"},smallLabelText),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-marker--large"},step.markerLabel))})}},{key:"renderTimeline",value:function renderTimeline(){var _this4=this;var _this$props=this.props,activeStep=_this$props.activeStep,forecastMarker=_this$props.forecastMarker,loop=_this$props.loop,timePerStep=_this$props.timePerStep,timeSteps=_this$props.timeSteps;var playState=this.state.playState;var activeStepObj=(0,_utils.getStepById)(timeSteps,activeStep);var displayLabel=activeStepObj?activeStepObj.displayLabel:null;var forecastMarkerIndex=(0,_utils.getStepIndexById)(timeSteps,forecastMarker);return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-display-label"},displayLabel),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline"},/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub-overhang",{"bom-scrub-overhang--filled":!forecastMarker||forecastMarkerIndex<0||forecastMarkerIndex>=1})}),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-scrubber"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-forecast-marker",style:{width:"".concat(getForecastMarkerPercentageWidth(timeSteps,forecastMarker),"%")}}),/*#__PURE__*/_react["default"].createElement(_Timeline["default"],{activeStep:activeStep,loop:loop,playState:playState,timePerStep:timePerStep,timeSteps:timeSteps,onStepPlayback:function onStepPlayback(step){_this4.playStep(step)},onFinishPlayback:function onFinishPlayback(){_this4.setState({playState:_types.ScrubberState.PAUSED})},onScrub:function onScrub(step){_this4.scrubTo(step)}}),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-markers",ref:this.markerContainerRef},this.renderLabels())),/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub-overhang",{"bom-scrub-overhang--filled":!forecastMarker||forecastMarkerIndex<0})})))}},{key:"render",value:function render(){var _this5=this;var _this$props2=this.props,alert=_this$props2.alert,errorText=_this$props2.errorText,isError=_this$props2.isError,isLoading=_this$props2.isLoading,leftUtils=_this$props2.leftUtils,loadingText=_this$props2.loadingText,loop=_this$props2.loop,rightUtils=_this$props2.rightUtils,showUtils=_this$props2.showUtils,timeSteps=_this$props2.timeSteps;var playState=this.state.playState;var hasSteps=timeSteps&&timeSteps.length>0;var hasMultipleSteps=timeSteps.length>1;var renderTimelineContents=function renderTimelineContents(){if(isLoading){return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,loadingText&&/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-display-label"},loadingText),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline__loading-bar"}))}if(!isLoading&&isError){return errorText&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline__error-message"},errorText)}return hasSteps&&_this5.renderTimeline()};return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub",{"bom-scrub--loading":isLoading,"bom-scrub--error":isError}),onKeyDown:this.handleRootKeyDown},/*#__PURE__*/_react["default"].createElement("button",{"data-testid":"bom-time-scrub-play-pause",className:(0,_classnames["default"])("bom-scrub-action",{"bom-scrub-action--with-extra":loop}),type:"button",onClick:this.handlePlayPauseClick,disabled:!hasMultipleSteps},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-action__icon",icon:playState===_types.ScrubberState.PLAYING||isLoading||isError?_Pause["default"]:_Play["default"],primaryColor:_styles.palette.neutral.white,size:24}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__label"},playState===_types.ScrubberState.PLAYING?"Pause":"Play"),loop&&/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__extra"},"Loop")),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline-container"},renderTimelineContents())),alert&&/*#__PURE__*/_react["default"].createElement(_form.Alert,{status:alert.status},alert.message),showUtils&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils__left"},leftUtils),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils__right"},rightUtils)))}}]);return TimeScrubber}(_react["default"].Component);(0,_defineProperty2["default"])(TimeScrubber,"defaultProps",{autoHideMarkers:false,autoPlay:false,errorText:"",forecastMarker:null,isError:false,isLoading:false,loadingText:"",loop:false,onChange:function onChange(){},onPause:function onPause(){},onPlay:function onPlay(){},onScrub:function onScrub(){},showUtils:true,timePerStep:500,timeSteps:[]});var _default=TimeScrubber;exports["default"]=_default;
package/lib/components/Timeline/Timeline.js CHANGED
@@ -1,4 +1,14 @@
1
- "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _lodash=_interopRequireDefault(require("lodash.debounce"));var _classnames=_interopRequireDefault(require("classnames"));var _styles=require("@ausbom/styles");var _SubScrub=_interopRequireDefault(require("./SubScrub"));var _Thumb=_interopRequireDefault(require("./Thumb"));var _Drag=_interopRequireDefault(require("./Drag"));var _types=require("../../types");var _utils=require("../../utils");function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Timeline=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(Timeline,_React$Component);var _super=_createSuper(Timeline);function Timeline(props){var _this;(0,_classCallCheck2["default"])(this,Timeline);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stepStartTime",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stepTimePassed",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"playTimeout",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"trackRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleResize",function(){_this.showHideGaps()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"showHideGaps",function(){var timeSteps=_this.props.timeSteps;var smoothClass="bom-scrub--no-gaps";var gapSize=2;var minSegmentSize=6;var thresholdWidth=timeSteps.length*(gapSize+minSegmentSize);if(!_this.trackRef||!_this.trackRef.current){return}var _this$trackRef$curren=_this.trackRef.current.getBoundingClientRect(),width=_this$trackRef$curren.width;_this.trackRef.current.classList.remove(smoothClass);if(width<thresholdWidth){_this.trackRef.current.classList.add(smoothClass)}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getActiveIndex",function(){return(0,_utils.getStepIndexById)(_this.props.timeSteps,_this.props.activeStep)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getNextStep",function(){var _this$props=_this.props,timeSteps=_this$props.timeSteps,activeStep=_this$props.activeStep;if(!timeSteps.length){return null}if(!activeStep){return timeSteps[0]}return timeSteps[(0,_utils.wrapIndex)(_this.getActiveIndex()+1,timeSteps.length)]});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getPreviousStep",function(){var _this$props2=_this.props,timeSteps=_this$props2.timeSteps,activeStep=_this$props2.activeStep;if(!timeSteps.length){return null}if(!activeStep){return timeSteps[0]}return timeSteps[(0,_utils.wrapIndex)(_this.getActiveIndex()-1,timeSteps.length)]});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"isLastStep",function(){var timeSteps=_this.props.timeSteps;return _this.getActiveIndex()===timeSteps.length-1});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"play",function(){var onStepPlayback=_this.props.onStepPlayback;onStepPlayback(_this.getNextStep())});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"playStep",function(){var _this$props3=_this.props,loop=_this$props3.loop,timePerStep=_this$props3.timePerStep,onStepPlayback=_this$props3.onStepPlayback;if(!loop&&_this.isLastStep()){_this.props.onFinishPlayback();return}var timeRemainingInStep=timePerStep;_this.stepStartTime=Date.now();_this.playTimeout=setTimeout(function(){onStepPlayback(_this.getNextStep())},timeRemainingInStep)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"pause",function(){_this.stepTimePassed=0;_this.stepStartTime=null;clearTimeout(_this.playTimeout);_this.playTimeout=null});_this.stepStartTime=null;_this.stepTimePassed=0;_this.playTimeout=null;_this.trackRef=/*#__PURE__*/_react["default"].createRef();_this.handleResize=(0,_lodash["default"])(_this.handleResize,500);return _this}(0,_createClass2["default"])(Timeline,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.playState===_types.ScrubberState.PLAYING){this.play()}this.handleResize();window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.playState===_types.ScrubberState.PAUSED&&this.props.playState===_types.ScrubberState.PLAYING){this.play()}if(prevProps.playState===_types.ScrubberState.PLAYING&&this.props.playState===_types.ScrubberState.PAUSED){this.pause()}if(this.props.playState===_types.ScrubberState.PLAYING&&prevProps.activeStep!==this.props.activeStep){this.playStep()}if((prevProps.timeSteps&&prevProps.timeSteps.length)!==(this.props.timeSteps&&this.props.timeSteps.length)){this.showHideGaps()}}},{key:"render",value:function render(){var _this2=this;var _this$props4=this.props,activeStep=_this$props4.activeStep,onScrub=_this$props4.onScrub,playState=_this$props4.playState,timePerStep=_this$props4.timePerStep,timeSteps=_this$props4.timeSteps;var activeIndex=(0,_utils.getStepIndexById)(timeSteps,activeStep);var activeStepInRange=activeIndex>=0;var activeStepObj=(0,_utils.getStepById)(timeSteps,activeStep);return/*#__PURE__*/_react["default"].createElement(_Drag["default"],{className:"bom-scrub-tl",onDrag:function onDrag(x){var trackDom=_this2.trackRef.current;if(!trackDom||timeSteps.length<=0){return}var _trackDom$getBounding=trackDom.getBoundingClientRect(),left=_trackDom$getBounding.left,width=_trackDom$getBounding.width;var relX=x-left;var scaled=(0,_utils.mapNumber)(relX,0,width,0,timeSteps.length);var clamped=(0,_utils.clamp)(scaled,0,timeSteps.length-1);var index=Math.floor(clamped);if(index>=0){onScrub(timeSteps[index])}}},/*#__PURE__*/_react["default"].createElement("div",{ref:this.trackRef,className:"bom-scrub-tl__track","data-testid":"bom-scrub-track"},timeSteps.map(function(step,i){var color=_styles.palette.neutral.greyDark;// TODO: This logic need to be looked at
2
- // as the current colors do not give the appearance of animating.
3
- if(i<=activeIndex){color=_styles.palette.primary.electricBlue}else if(i===activeIndex&&playState===_types.ScrubberState.PLAYING){color=_styles.palette.primary.darkBlue}return/*#__PURE__*/_react["default"].createElement("div",{role:"button","aria-label":step.displayLabel,className:(0,_classnames["default"])("bom-scrub-tl__track-segment",{"bom-scrub-tl__track-segment--marker":!!step.markerLabel}),"data-testid":"bom-scrub-segment",key:step.id,style:{background:color},onClick:function onClick(){onScrub(timeSteps[i])}},i===activeIndex&&playState===_types.ScrubberState.PLAYING&&/*#__PURE__*/ // NOTE: Pass the animateProgress prop as true to enable animation of segments (Beware, this is browser intensive)
1
+ "use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _lodash=_interopRequireDefault(require("lodash.debounce"));var _classnames=_interopRequireDefault(require("classnames"));var _styles=require("@ausbom/styles");var _SubScrub=_interopRequireDefault(require("./SubScrub"));var _Thumb=_interopRequireDefault(require("./Thumb"));var _Drag=_interopRequireDefault(require("./Drag"));var _types=require("../../types");var _utils=require("../../utils");function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Timeline=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(Timeline,_React$Component);var _super=_createSuper(Timeline);function Timeline(props){var _this;(0,_classCallCheck2["default"])(this,Timeline);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stepStartTime",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stepTimePassed",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"playTimeout",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"trackRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleResize",function(){_this.showHideGaps()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"showHideGaps",function(){var timeSteps=_this.props.timeSteps;var smoothClass="bom-scrub--no-gaps";var gapSize=2;var minSegmentSize=6;var thresholdWidth=timeSteps.length*(gapSize+minSegmentSize);if(!_this.trackRef||!_this.trackRef.current){return}var _this$trackRef$curren=_this.trackRef.current.getBoundingClientRect(),width=_this$trackRef$curren.width;_this.trackRef.current.classList.remove(smoothClass);if(width<thresholdWidth){_this.trackRef.current.classList.add(smoothClass)}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getActiveIndex",function(){return(0,_utils.getStepIndexById)(_this.props.timeSteps,_this.props.activeStep)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getNextStep",function(){var _this$props=_this.props,timeSteps=_this$props.timeSteps,activeStep=_this$props.activeStep;if(!timeSteps.length){return null}if(!activeStep){return timeSteps[0]}return timeSteps[(0,_utils.wrapIndex)(_this.getActiveIndex()+1,timeSteps.length)]});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getPreviousStep",function(){var _this$props2=_this.props,timeSteps=_this$props2.timeSteps,activeStep=_this$props2.activeStep;if(!timeSteps.length){return null}if(!activeStep){return timeSteps[0]}return timeSteps[(0,_utils.wrapIndex)(_this.getActiveIndex()-1,timeSteps.length)]});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"isLastStep",function(){var timeSteps=_this.props.timeSteps;return _this.getActiveIndex()===timeSteps.length-1});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"play",function(){var onStepPlayback=_this.props.onStepPlayback;onStepPlayback(_this.getNextStep())});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"playStep",function(){var _this$props3=_this.props,loop=_this$props3.loop,timePerStep=_this$props3.timePerStep,onStepPlayback=_this$props3.onStepPlayback;if(!loop&&_this.isLastStep()){_this.props.onFinishPlayback();return}var timeRemainingInStep=timePerStep;_this.stepStartTime=Date.now();_this.playTimeout=setTimeout(function(){onStepPlayback(_this.getNextStep())},timeRemainingInStep)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"pause",function(){_this.stepTimePassed=0;_this.stepStartTime=null;clearTimeout(_this.playTimeout);_this.playTimeout=null});_this.stepStartTime=null;_this.stepTimePassed=0;_this.playTimeout=null;_this.trackRef=/*#__PURE__*/_react["default"].createRef();_this.handleResize=(0,_lodash["default"])(_this.handleResize,500);return _this}(0,_createClass2["default"])(Timeline,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.playState===_types.ScrubberState.PLAYING){this.play()}this.handleResize();window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.playState===_types.ScrubberState.PAUSED&&this.props.playState===_types.ScrubberState.PLAYING){this.play()}if(prevProps.playState===_types.ScrubberState.PLAYING&&this.props.playState===_types.ScrubberState.PAUSED){this.pause()}if(this.props.playState===_types.ScrubberState.PLAYING&&prevProps.activeStep!==this.props.activeStep){this.playStep()}if((prevProps.timeSteps&&prevProps.timeSteps.length)!==(this.props.timeSteps&&this.props.timeSteps.length)){this.showHideGaps()}}},{key:"render",value:function render(){var _this2=this;var _this$props4=this.props,activeStep=_this$props4.activeStep,onScrub=_this$props4.onScrub,playState=_this$props4.playState,timePerStep=_this$props4.timePerStep,timeSteps=_this$props4.timeSteps;var activeIndex=(0,_utils.getStepIndexById)(timeSteps,activeStep);var activeStepInRange=activeIndex>=0;var activeStepObj=(0,_utils.getStepById)(timeSteps,activeStep);return/*#__PURE__*/_react["default"].createElement(_Drag["default"],{className:"bom-scrub-tl",onDrag:function onDrag(x){var trackDom=_this2.trackRef.current;if(!trackDom||timeSteps.length<=0){return}var _trackDom$getBounding=trackDom.getBoundingClientRect(),left=_trackDom$getBounding.left,width=_trackDom$getBounding.width;var relX=x-left;var scaled=(0,_utils.mapNumber)(relX,0,width,0,timeSteps.length);var clamped=(0,_utils.clamp)(scaled,0,timeSteps.length-1);var index=Math.floor(clamped);if(index>=0){onScrub(timeSteps[index])}}},/*#__PURE__*/_react["default"].createElement("div",{ref:this.trackRef,className:"bom-scrub-tl__track","data-testid":"bom-scrub-track"},timeSteps.map(function(step,i){// Declare a variable 'color' of type string to store the color value based on step status
2
+ var color;// Use a switch statement to determine the color based on the current step's status
3
+ switch(step.status){// If the step status is 'future', set the color to charcoal medium from the neutral palette
4
+ case"future":color=_styles.palette.neutral.charcoalMedium;break;// If the step status is 'missing', set the color to light grey from the neutral palette
5
+ case"missing":color=_styles.palette.neutral.greyLight;break;// If the step status is 'past', set the color to dark grey from the neutral palette
6
+ case"past":color=_styles.palette.neutral.greyDark;break;// If the step status doesn't match any of the above cases, set the color to a default value
7
+ default:color=_styles.palette.neutral.greyDark;break;}// Check if the current index (i) is less than or equal to the active index
8
+ if(i<=activeIndex){// If the condition is true, set the color variable to the electric blue color from the primary palette
9
+ color=_styles.palette.primary.electricBlue}// Initialize the ariaLabel with the display label of the step.
10
+ var ariaLabel=step.displayLabel;// Check if the status of the step is 'missing'.
11
+ if(step.status==="missing"){// If the status is 'missing', append the status to the ariaLabel,
12
+ // separated by a comma and a space for better readability by screen readers.
13
+ ariaLabel+=", ".concat(step.status)}return/*#__PURE__*/_react["default"].createElement("div",{role:"button","data-id":step.id,"data-value":i,"aria-label":ariaLabel,className:(0,_classnames["default"])("bom-scrub-tl__track-segment",{"bom-scrub-tl__track-segment--marker":!!step.markerLabel}),"data-testid":"bom-scrub-segment",key:step.id,style:{background:color},onClick:function onClick(){onScrub(timeSteps[i])}},i===activeIndex&&playState===_types.ScrubberState.PLAYING&&/*#__PURE__*/ // NOTE: Pass the animateProgress prop as true to enable animation of segments (Beware, this is browser intensive)
4
14
  _react["default"].createElement(_SubScrub["default"],{active:playState===_types.ScrubberState.PLAYING,getProgress:function getProgress(){var timePassed=Date.now()-_this2.stepStartTime;return timePassed/timePerStep}}))}),activeStepInRange&&/*#__PURE__*/_react["default"].createElement(_Thumb["default"],{label:activeStepObj?activeStepObj.displayLabel:null,xPos:"".concat(100/timeSteps.length*activeIndex+100/timeSteps.length/2,"%"),onGoLeft:function onGoLeft(){onScrub(_this2.getPreviousStep())},onGoRight:function onGoRight(){onScrub(_this2.getNextStep())}})))}}]);return Timeline}(_react["default"].Component);(0,_defineProperty2["default"])(Timeline,"defaultProps",{});var _default=Timeline;exports["default"]=_default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ausbom/time-scrubber",
3
- "version": "0.5.10",
3
+ "version": "0.7.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "",
@@ -37,9 +37,10 @@
37
37
  "react": ">= 16.3.x"
38
38
  },
39
39
  "dependencies": {
40
+ "@ausbom/form": "^0.4.47",
40
41
  "@ausbom/icon": "^0.21.2",
41
42
  "@ausbom/styles": "^0.13.0",
42
43
  "lodash.debounce": "4.0.8"
43
44
  },
44
- "gitHead": "fb700e0e3fdab1b33a91603366afa9bb05cfc2f2"
45
+ "gitHead": "e1aa58f420f563d78420697bf81eb7e4bb43edac"
45
46
  }