@ausbom/time-scrubber 0.3.11 → 0.4.0

package/lib/TimeScrubber.d.ts

@@ -19,6 +19,7 @@ export interface IProps {
   loop?: boolean
   onChange?: (timeStep: string) => void
   onPause?: () => void
+  onPlay?: () => void
   rightUtils?: React.ReactNode
   showUtils?: boolean
   timePerStep?: number

package/lib/TimeScrubber.js

@@ -1 +1,2 @@
-"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})});(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}}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)})}},{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=[];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"),style:_objectSpread(_objectSpread({},step.style),{},{left:"".concat((0,_utils.toPercentageWidth)(timeSteps,stepIndex),"%")})},/*#__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:true,autoPlay:false,errorText:"",forecastMarker:null,isError:false,isLoading:false,loadingText:"",loop:false,onChange:function onChange(){},onPause:function onPause(){},showUtils:true,timePerStep:500,timeSteps:[]});var _default=TimeScrubber;exports["default"]=_default;
+"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
+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=[];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"),style:_objectSpread(_objectSpread({},step.style),{},{left:"".concat((0,_utils.toPercentageWidth)(timeSteps,stepIndex),"%")})},/*#__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:true,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/time-scrubber",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "description": "",
   "keywords": [],
   "author": "",
@@ -41,5 +41,5 @@
     "@ausbom/styles": "^0.9.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "0bf333c15b131c52eb8c63b1ee2f89ffe01c7ff4"
+  "gitHead": "753ae10075159d45876f3122758b708a5db13e19"
 }