@ausbom/time-scrubber 0.8.2 → 0.8.4
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/lib/TimeScrubber.js +2 -2
- package/lib/components/SkipButton/SkipButton.js +1 -1
- package/lib/components/Timeline/SubScrub.js +1 -1
- package/lib/components/Timeline/Timeline.d.ts +1 -1
- package/lib/components/Timeline/Timeline.js +1 -1
- package/lib/components/Timeline/Timeline.scss +1 -1
- package/package.json +8 -10
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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));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
|
|
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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));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 _Timeline=_interopRequireDefault(require("./components/Timeline/Timeline"));var _types=require("./types");var _utils=require("./utils");function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){(0,_defineProperty2["default"])(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}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){function TimeScrubber(props){var _this;(0,_classCallCheck2["default"])(this,TimeScrubber);_this=_callSuper(this,TimeScrubber,[props]);(0,_defineProperty2["default"])(_this,"state",{playState:_this.props.autoPlay?_types.ScrubberState.PLAYING:_types.ScrubberState.PAUSED});(0,_defineProperty2["default"])(_this,"handleResize",function(){var autoHideMarkers=_this.props.autoHideMarkers;if(autoHideMarkers){_this.placeLabels()}});(0,_defineProperty2["default"])(_this,"play",function(){_this.setState({playState:_types.ScrubberState.PLAYING},function(){_this.props.onPlay()})});(0,_defineProperty2["default"])(_this,"pause",function(){_this.setState({playState:_types.ScrubberState.PAUSED},function(){_this.props.onPause()})});(0,_defineProperty2["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"])(_this,"handlePlayPauseClick",function(event){event.preventDefault();_this.togglePlayState()});(0,_defineProperty2["default"])(_this,"handleStepThroughClick",function(event){event.preventDefault();_this.pause();var _this$props=_this.props,activeStep=_this$props.activeStep,timeSteps=_this$props.timeSteps;var activeStepIndex=(0,_utils.getStepIndexById)(timeSteps,activeStep);if(activeStepIndex===-1){_this.playStep(timeSteps[0])}else{var nextStepIndex=activeStepIndex===timeSteps.length-1?0:activeStepIndex+1;_this.playStep(timeSteps[nextStepIndex])}});(0,_defineProperty2["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"])(_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,_inherits2["default"])(TimeScrubber,_React$Component);return(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
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$props2=this.props,activeStep=_this$props2.activeStep,forecastMarker=_this$props2.forecastMarker,loop=_this$props2.loop,timePerStep=_this$props2.timePerStep,timeSteps=_this$props2.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$props3=this.props,alert=_this$props3.alert,errorText=_this$props3.errorText,isError=_this$props3.isError,isLoading=_this$props3.isLoading,leftUtils=_this$props3.leftUtils,loadingText=_this$props3.loadingText,rightUtils=_this$props3.rightUtils,showUtils=_this$props3.showUtils,timeSteps=_this$props3.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})},/*#__PURE__*/_react["default"].createElement("button",{"data-testid":"bom-time-scrub-play-pause",className:(0,_classnames["default"])("bom-scrub-action"),type:"button",onClick:this.handlePlayPauseClick,onKeyDown:this.handleRootKeyDown,disabled:!hasMultipleSteps},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-action__icon",icon:playState===_types.ScrubberState.PLAYING||isLoading||isError?
|
|
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$props2=this.props,activeStep=_this$props2.activeStep,forecastMarker=_this$props2.forecastMarker,loop=_this$props2.loop,timePerStep=_this$props2.timePerStep,timeSteps=_this$props2.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$props3=this.props,alert=_this$props3.alert,errorText=_this$props3.errorText,isError=_this$props3.isError,isLoading=_this$props3.isLoading,leftUtils=_this$props3.leftUtils,loadingText=_this$props3.loadingText,rightUtils=_this$props3.rightUtils,showUtils=_this$props3.showUtils,timeSteps=_this$props3.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})},/*#__PURE__*/_react["default"].createElement("button",{"data-testid":"bom-time-scrub-play-pause",className:(0,_classnames["default"])("bom-scrub-action"),type:"button",onClick:this.handlePlayPauseClick,onKeyDown:this.handleRootKeyDown,disabled:!hasMultipleSteps},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-action__icon",icon:playState===_types.ScrubberState.PLAYING||isLoading||isError?_icon.Pause24:_icon.Play24,primaryColor:_styles.palette.neutral.white,size:24}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__label"},playState===_types.ScrubberState.PLAYING?"Pause":"Play")),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline-container"},renderTimelineContents()),/*#__PURE__*/_react["default"].createElement("button",{"data-testid":"bom-time-scrub-step-through",className:(0,_classnames["default"])("bom-scrub-action","bom-scrub-action--step-through"),type:"button",onClick:this.handleStepThroughClick,disabled:!hasMultipleSteps},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-action__icon",icon:_icon.Skip24,primaryColor:isLoading||isError?_styles.palette.neutral.greyMedium:_styles.palette.primary.electricBlue,size:24}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__label"},playState===_types.ScrubberState.PLAYING?"Pause":"Play"))),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)))}}])}(_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=exports["default"]=TimeScrubber;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));var _styles=require("@ausbom/styles");var _excluded=["innerRef","children","className","direction"];function _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var Directions={FORWARD:"forward",BACKWARD:"backward"};var SkipButton=/*#__PURE__*/function(_React$PureComponent){function SkipButton(){(0,_classCallCheck2["default"])(this,SkipButton);return _callSuper(this,SkipButton,arguments)}(0,_inherits2["default"])(SkipButton,_React$PureComponent);return(0,_createClass2["default"])(SkipButton,[{key:"render",value:function render(){var _ref=this.props,innerRef=_ref.innerRef,children=_ref.children,className=_ref.className,direction=_ref.direction,restProps=(0,_objectWithoutProperties2["default"])(_ref,_excluded);var classes=(0,_classnames["default"])(className,"bom-scrub-skip",{"bom-scrub-skip--forward":direction===Directions.FORWARD,"bom-scrub-skip--backward":direction===Directions.BACKWARD});return/*#__PURE__*/_react["default"].createElement("button",(0,_extends2["default"])({ref:innerRef,className:classes,type:"button"},restProps),direction===Directions.BACKWARD&&/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-skip__icon","aria-hidden":true,icon:_icon.Backwards16,size:12,primaryColor:_styles.palette.neutral.white}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-skip__label"},children),direction===Directions.FORWARD&&/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-skip__icon","aria-hidden":true,icon:_icon.Forwards16,size:12,primaryColor:_styles.palette.neutral.white}))}}])}(_react["default"].PureComponent);(0,_defineProperty2["default"])(SkipButton,"defaultProps",{direction:Directions.FORWARD});var SkipButtonWithRef=/*#__PURE__*/_react["default"].forwardRef(function(props,ref){return/*#__PURE__*/_react["default"].createElement(SkipButton,(0,_extends2["default"])({innerRef:ref},props))});SkipButtonWithRef.displayName="SkipButton";var _default=exports["default"]=SkipButtonWithRef;
|
|
@@ -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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));function _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var SubScrub=/*#__PURE__*/function(_React$Component){function SubScrub(props){var _this;(0,_classCallCheck2["default"])(this,SubScrub);_this=_callSuper(this,SubScrub,[props]);(0,_defineProperty2["default"])(_this,"state",{progress:_this.props.getProgress()});(0,_defineProperty2["default"])(_this,"
|
|
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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));function _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var SubScrub=/*#__PURE__*/function(_React$Component){function SubScrub(props){var _this;(0,_classCallCheck2["default"])(this,SubScrub);_this=_callSuper(this,SubScrub,[props]);(0,_defineProperty2["default"])(_this,"state",{progress:_this.props.getProgress()});(0,_defineProperty2["default"])(_this,"start",function(){if(_this.polling){return}_this.polling=true;window.requestAnimationFrame(_this.poll)});(0,_defineProperty2["default"])(_this,"poll",function(){if(!_this.polling){return}_this.setState({progress:_this.props.getProgress()},function(){window.requestAnimationFrame(_this.poll)})});(0,_defineProperty2["default"])(_this,"stop",function(){_this.polling=false});_this.timeout=null;_this.polling=false;return _this}(0,_inherits2["default"])(SubScrub,_React$Component);return(0,_createClass2["default"])(SubScrub,[{key:"componentDidMount",value:function componentDidMount(){// Only setup polling for progress if animateProgress is true.
|
|
2
2
|
if(!this.props.animateProgress||!this.props.active)return;this.start()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){// Only update polling for progress if animateProgress is true.
|
|
3
3
|
if(!this.props.animateProgress)return;if(!prevProps.active&&this.props.active)this.start();if(prevProps.active&&!this.props.active)this.stop()}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.stop()}},{key:"render",value:function render(){var progress=this.state.progress;return/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-tl__segment-progress",style:{transform:"scaleX(".concat(Math.min(progress,1),")")}})}}])}(_react["default"].Component);(0,_defineProperty2["default"])(SubScrub,"defaultProps",{});var _default=exports["default"]=SubScrub;
|
|
@@ -1,4 +1,4 @@
|
|
|
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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));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 _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var Timeline=/*#__PURE__*/function(_React$Component){function Timeline(props){var _this;(0,_classCallCheck2["default"])(this,Timeline);_this=_callSuper(this,Timeline,[props]);(0,_defineProperty2["default"])(_this,"
|
|
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 _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));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 _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var Timeline=/*#__PURE__*/function(_React$Component){function Timeline(props){var _this;(0,_classCallCheck2["default"])(this,Timeline);_this=_callSuper(this,Timeline,[props]);(0,_defineProperty2["default"])(_this,"handleResize",function(){_this.showHideGaps()});(0,_defineProperty2["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"])(_this,"getActiveIndex",function(){return(0,_utils.getStepIndexById)(_this.props.timeSteps,_this.props.activeStep)});(0,_defineProperty2["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"])(_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"])(_this,"isLastStep",function(){var timeSteps=_this.props.timeSteps;return _this.getActiveIndex()===timeSteps.length-1});(0,_defineProperty2["default"])(_this,"play",function(){var onStepPlayback=_this.props.onStepPlayback;onStepPlayback(_this.getNextStep())});(0,_defineProperty2["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"])(_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,_inherits2["default"])(Timeline,_React$Component);return(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
2
|
var color;// Use a switch statement to determine the color based on the current step's status
|
|
3
3
|
switch(step.status){// If the step status is 'future', set the color to charcoal medium from the neutral palette
|
|
4
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
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ausbom/time-scrubber",
|
|
3
|
-
"
|
|
3
|
+
"type": "commonjs",
|
|
4
|
+
"version": "0.8.4",
|
|
4
5
|
"description": "",
|
|
5
6
|
"keywords": [],
|
|
6
7
|
"author": "",
|
|
@@ -20,7 +21,7 @@
|
|
|
20
21
|
},
|
|
21
22
|
"scripts": {
|
|
22
23
|
"build": "babel src --out-dir lib --extensions '.ts,.tsx' --delete-dir-on-start",
|
|
23
|
-
"build:watch": "npm run build -- --copy-files --watch",
|
|
24
|
+
"build:watch": "npm run build -- --copy-files --no-copy-ignored --watch ",
|
|
24
25
|
"build:readme": "../generate-readme.sh",
|
|
25
26
|
"postbuild": "copyfiles -u 1 \"./src/**/{*.d.*,*.scss}\" ./lib"
|
|
26
27
|
},
|
|
@@ -31,16 +32,13 @@
|
|
|
31
32
|
"node": ">=10"
|
|
32
33
|
},
|
|
33
34
|
"devDependencies": {
|
|
34
|
-
"@ausbom/babel-preset": "^0.2.
|
|
35
|
-
},
|
|
36
|
-
"peerDependencies": {
|
|
37
|
-
"react": ">= 16.3.x"
|
|
35
|
+
"@ausbom/babel-preset": "^0.2.1"
|
|
38
36
|
},
|
|
39
37
|
"dependencies": {
|
|
40
|
-
"@ausbom/form": "^0.4.
|
|
41
|
-
"@ausbom/icon": "^0.23.
|
|
42
|
-
"@ausbom/styles": "^0.14.
|
|
38
|
+
"@ausbom/form": "^0.4.54",
|
|
39
|
+
"@ausbom/icon": "^0.23.3",
|
|
40
|
+
"@ausbom/styles": "^0.14.4",
|
|
43
41
|
"lodash.debounce": "4.0.8"
|
|
44
42
|
},
|
|
45
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "18cc71041ec60f545b727fc22d0b6edc624c23b2"
|
|
46
44
|
}
|