@ausbom/time-scrubber 0.7.2 → 0.8.1
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/SkipButton/SkipButton.scss +5 -7
- package/lib/components/Timeline/Drag.js +1 -1
- package/lib/components/Timeline/SubScrub.js +2 -2
- package/lib/components/Timeline/Thumb.js +1 -1
- package/lib/components/Timeline/Timeline.js +4 -4
- package/lib/components/Timeline/Timeline.scss +8 -28
- package/lib/scss/module.scss +36 -79
- package/lib/types.js +1 -1
- package/lib/utils.js +1 -1
- package/package.json +5 -5
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
|
|
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 _Play=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Play24"));var _Pause=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Pause24"));var _Skip=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Skip24"));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,"markerRefs",void 0);(0,_defineProperty2["default"])(_this,"markerContainerRef",void 0);(0,_defineProperty2["default"])(_this,"onScrub",void 0);(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$
|
|
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?_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")),/*#__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:_Skip["default"],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
|
|
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 _Forwards=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Forwards16"));var _Backwards=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Backwards16"));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:_Backwards["default"],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:_Forwards["default"],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;
|
|
@@ -4,11 +4,13 @@
|
|
|
4
4
|
background: none;
|
|
5
5
|
border: none;
|
|
6
6
|
color: get-palette-color('neutral.white');
|
|
7
|
-
font-size: 12px;
|
|
8
|
-
padding: 0 8px;
|
|
9
|
-
margin: 5px 0;
|
|
10
7
|
cursor: pointer;
|
|
11
8
|
|
|
9
|
+
@include bom-type-scale(
|
|
10
|
+
$size: 'type-12',
|
|
11
|
+
$line: 'display',
|
|
12
|
+
);
|
|
13
|
+
|
|
12
14
|
&:first-child {
|
|
13
15
|
padding-left: 0;
|
|
14
16
|
}
|
|
@@ -20,10 +22,6 @@
|
|
|
20
22
|
&:focus {
|
|
21
23
|
@include bom-focus-outline-dark;
|
|
22
24
|
}
|
|
23
|
-
|
|
24
|
-
@include bp(m) {
|
|
25
|
-
font-size: 14px;
|
|
26
|
-
}
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
.bom-scrub-skip--forward {
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 Drag=/*#__PURE__*/function(_React$PureComponent){function Drag(){var _this;(0,_classCallCheck2["default"])(this,Drag);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Drag,[].concat(args));(0,_defineProperty2["default"])(_this,"state",{dragging:false});(0,_defineProperty2["default"])(_this,"handleMouseDown",function(event){event.preventDefault();_this.handleDragStart(false)});(0,_defineProperty2["default"])(_this,"handleMouseMove",function(event){event.preventDefault();var x=event.clientX;var y=event.clientY;_this.props.onDrag(x,y)});(0,_defineProperty2["default"])(_this,"handleTouchStart",function(event){event.preventDefault();_this.handleDragStart(true)});(0,_defineProperty2["default"])(_this,"handleTouchMove",function(event){event.preventDefault();var x=event.touches[0].clientX;var y=event.touches[0].clientY;_this.props.onDrag(x,y)});(0,_defineProperty2["default"])(_this,"handleDragStart",function(){var isTouch=arguments.length>0&&arguments[0]!==undefined?arguments[0]:false;_this.setState({dragging:true});if(isTouch){document.addEventListener("touchmove",_this.handleTouchMove);document.addEventListener("touchend",_this.handleDragEnd)}else{document.addEventListener("mousemove",_this.handleMouseMove);document.addEventListener("mouseup",_this.handleDragEnd)}});(0,_defineProperty2["default"])(_this,"handleDragEnd",function(){_this.setState({dragging:false});document.removeEventListener("touchmove",_this.handleTouchMove);document.removeEventListener("touchend",_this.handleDragEnd);document.removeEventListener("mousemove",_this.handleMouseMove);document.removeEventListener("mouseup",_this.handleDragEnd)});(0,_defineProperty2["default"])(_this,"componentWillUnmount",function(){document.removeEventListener("touchmove",_this.handleTouchMove);document.removeEventListener("touchend",_this.handleDragEnd);document.removeEventListener("mousemove",_this.handleMouseMove);document.removeEventListener("mouseup",_this.handleDragEnd)});return _this}(0,_inherits2["default"])(Drag,_React$PureComponent);return(0,_createClass2["default"])(Drag,[{key:"render",value:function render(){var _this$props=this.props,children=_this$props.children,className=_this$props.className;return/*#__PURE__*/_react["default"].createElement("div",{className:className,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart},children)}}])}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Drag,"defaultProps",{});var _default=exports["default"]=Drag;
|
|
@@ -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
|
|
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,"timeout",void 0);(0,_defineProperty2["default"])(_this,"polling",void 0);(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
|
-
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),")")}})}}])
|
|
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 +1 @@
|
|
|
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
|
|
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 Thumb=/*#__PURE__*/function(_React$Component){function Thumb(){var _this;(0,_classCallCheck2["default"])(this,Thumb);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Thumb,[].concat(args));(0,_defineProperty2["default"])(_this,"handleThumbKeyDown",function(event){var key=event.key;if(key==="ArrowLeft"||key==="ArrowDown"){event.preventDefault();_this.props.onGoLeft()}else if(key==="ArrowRight"||key==="ArrowUp"||key===" "||key==="Enter"){event.preventDefault();_this.props.onGoRight()}});return _this}(0,_inherits2["default"])(Thumb,_React$Component);return(0,_createClass2["default"])(Thumb,[{key:"render",value:function render(){var _this2=this;var _this$props=this.props,xPos=_this$props.xPos,label=_this$props.label;return/*#__PURE__*/_react["default"].createElement("div",{role:"button","aria-label":label,tabIndex:0,"data-testid":"bom-scrub-thumb",className:"bom-scrub-thumb",onKeyDown:this.handleThumbKeyDown,onClick:function onClick(){return _this2.props.onGoRight()},style:{left:xPos}})}}])}(_react["default"].Component);(0,_defineProperty2["default"])(Thumb,"defaultProps",{});var _default=exports["default"]=Thumb;
|
|
@@ -1,14 +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
|
|
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,"stepStartTime",void 0);(0,_defineProperty2["default"])(_this,"stepTimePassed",void 0);(0,_defineProperty2["default"])(_this,"playTimeout",void 0);(0,_defineProperty2["default"])(_this,"trackRef",void 0);(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
|
|
5
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
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
|
|
7
|
+
default:color=_styles.palette.neutral.greyDark;break}// Check if the current index (i) is less than or equal to the active index
|
|
8
8
|
if(i<=activeIndex){// If the condition is true, set the color variable to the electric blue color from the primary palette
|
|
9
9
|
color=_styles.palette.primary.electricBlue}// Initialize the ariaLabel with the display label of the step.
|
|
10
10
|
var ariaLabel=step.displayLabel;// Check if the status of the step is 'missing'.
|
|
11
11
|
if(step.status==="missing"){// If the status is 'missing', append the status to the ariaLabel,
|
|
12
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__
|
|
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())}})))}}])
|
|
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)
|
|
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())}})))}}])}(_react["default"].Component);(0,_defineProperty2["default"])(Timeline,"defaultProps",{});var _default=exports["default"]=Timeline;
|
|
@@ -1,27 +1,23 @@
|
|
|
1
|
-
$_thumb-diameter:
|
|
1
|
+
$_thumb-diameter: 12px;
|
|
2
2
|
|
|
3
3
|
.bom-scrub-tl {
|
|
4
4
|
cursor: pointer;
|
|
5
5
|
position: relative;
|
|
6
6
|
display: flex;
|
|
7
7
|
align-items: center;
|
|
8
|
-
margin-top:
|
|
8
|
+
margin-top: 18px;
|
|
9
9
|
height: $_thumb-diameter;
|
|
10
|
-
|
|
11
|
-
@include bp(m) {
|
|
12
|
-
margin-top: 32px;
|
|
13
|
-
}
|
|
14
10
|
}
|
|
15
11
|
|
|
16
12
|
.bom-scrub-tl__track {
|
|
17
13
|
display: flex;
|
|
18
14
|
align-items: center;
|
|
19
15
|
width: 100%;
|
|
16
|
+
gap: 2px;
|
|
20
17
|
}
|
|
21
18
|
|
|
22
19
|
.bom-scrub-tl__track-segment {
|
|
23
20
|
flex-grow: 1;
|
|
24
|
-
margin-right: 2px;
|
|
25
21
|
height: 4px;
|
|
26
22
|
|
|
27
23
|
&--marker {
|
|
@@ -29,22 +25,13 @@ $_thumb-diameter: 20px;
|
|
|
29
25
|
display: block;
|
|
30
26
|
content: '';
|
|
31
27
|
width: 1px;
|
|
32
|
-
height:
|
|
28
|
+
height: 4px;
|
|
33
29
|
background: get-palette-color('neutral.greyDark');
|
|
34
30
|
position: absolute;
|
|
35
|
-
top:
|
|
36
|
-
|
|
37
|
-
@include bp(m) {
|
|
38
|
-
height: 8px;
|
|
39
|
-
top: 13px;
|
|
40
|
-
}
|
|
31
|
+
top: 8px;
|
|
41
32
|
}
|
|
42
33
|
}
|
|
43
34
|
|
|
44
|
-
@include bp(m) {
|
|
45
|
-
height: 6px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
35
|
@media screen and (-ms-high-contrast: active) {
|
|
49
36
|
background: get-palette-color('neutral.white');
|
|
50
37
|
}
|
|
@@ -60,18 +47,14 @@ $_thumb-diameter: 20px;
|
|
|
60
47
|
height: 4px;
|
|
61
48
|
background: get-palette-color('primary.electricBlue');
|
|
62
49
|
|
|
63
|
-
@include bp(m) {
|
|
64
|
-
height: 6px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
50
|
@media screen and (-ms-high-contrast: active) {
|
|
68
51
|
background: get-palette-color('primary.electricBlue');
|
|
69
52
|
}
|
|
70
53
|
}
|
|
71
54
|
|
|
72
55
|
.bom-scrub-thumb {
|
|
73
|
-
width:
|
|
74
|
-
height:
|
|
56
|
+
width: $_thumb-diameter;
|
|
57
|
+
height: $_thumb-diameter;
|
|
75
58
|
background: get-palette-color('primary.electricBlue');
|
|
76
59
|
position: absolute;
|
|
77
60
|
border-radius: 50%;
|
|
@@ -84,11 +67,8 @@ $_thumb-diameter: 20px;
|
|
|
84
67
|
|
|
85
68
|
&:focus {
|
|
86
69
|
@include bom-focus-outline();
|
|
87
|
-
}
|
|
88
70
|
|
|
89
|
-
|
|
90
|
-
width: $_thumb-diameter;
|
|
91
|
-
height: $_thumb-diameter;
|
|
71
|
+
position: absolute;
|
|
92
72
|
}
|
|
93
73
|
|
|
94
74
|
@media screen and (-ms-high-contrast: active) {
|
package/lib/scss/module.scss
CHANGED
|
@@ -4,29 +4,26 @@
|
|
|
4
4
|
|
|
5
5
|
.bom-scrub {
|
|
6
6
|
display: flex;
|
|
7
|
-
height:
|
|
8
|
-
|
|
9
|
-
@include bp(m) {
|
|
10
|
-
height: 86px;
|
|
11
|
-
}
|
|
7
|
+
height: 48px;
|
|
8
|
+
min-height: 48px;
|
|
12
9
|
|
|
13
10
|
&.bom-scrub--loading,
|
|
14
11
|
&.bom-scrub--error {
|
|
15
12
|
.bom-scrub-action {
|
|
16
13
|
background: get-palette-color('neutral.greyMedium');
|
|
14
|
+
|
|
15
|
+
&--step-through {
|
|
16
|
+
background: get-palette-color('neutral.white');
|
|
17
|
+
}
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
.bom-scrub-tl {
|
|
20
|
-
margin-right:
|
|
21
|
-
|
|
22
|
-
@include bp(m) {
|
|
23
|
-
margin-right: 24px;
|
|
24
|
-
}
|
|
21
|
+
margin-right: 12px;
|
|
25
22
|
}
|
|
26
23
|
|
|
27
24
|
.bom-scrub-tl__track {
|
|
28
25
|
background: get-palette-color('neutral.greyMedium');
|
|
29
|
-
min-height:
|
|
26
|
+
min-height: 4px;
|
|
30
27
|
}
|
|
31
28
|
|
|
32
29
|
.bom-scrub-forecast-marker,
|
|
@@ -45,7 +42,8 @@
|
|
|
45
42
|
.bom-scrub-action {
|
|
46
43
|
background: get-palette-color('primary.electricBlue');
|
|
47
44
|
border: none;
|
|
48
|
-
width:
|
|
45
|
+
min-width: 48px;
|
|
46
|
+
width: 48px;
|
|
49
47
|
display: flex;
|
|
50
48
|
flex-direction: column;
|
|
51
49
|
align-items: center;
|
|
@@ -58,12 +56,23 @@
|
|
|
58
56
|
}
|
|
59
57
|
|
|
60
58
|
&:disabled {
|
|
61
|
-
background: get-palette-color('neutral.
|
|
59
|
+
background: get-palette-color('neutral.greyMedium');
|
|
62
60
|
cursor: not-allowed;
|
|
63
61
|
}
|
|
64
62
|
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
&--step-through {
|
|
64
|
+
background: get-palette-color('neutral.white');
|
|
65
|
+
border: 1px solid get-palette-color('neutral.greyMedium');
|
|
66
|
+
|
|
67
|
+
&:disabled {
|
|
68
|
+
background: get-palette-color('neutral.white');
|
|
69
|
+
|
|
70
|
+
svg {
|
|
71
|
+
.__primary {
|
|
72
|
+
fill: get-palette-color('neutral.greyMedium');
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
67
76
|
}
|
|
68
77
|
|
|
69
78
|
@media screen and (-ms-high-contrast: active) {
|
|
@@ -75,26 +84,6 @@
|
|
|
75
84
|
}
|
|
76
85
|
}
|
|
77
86
|
|
|
78
|
-
.bom-scrub-action--with-extra {
|
|
79
|
-
justify-content: space-between;
|
|
80
|
-
|
|
81
|
-
.bom-scrub-action__icon {
|
|
82
|
-
margin-top: 8px;
|
|
83
|
-
|
|
84
|
-
@include bp(m) {
|
|
85
|
-
margin-top: 20px;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.bom-scrub-action__extra {
|
|
90
|
-
margin-bottom: 6px;
|
|
91
|
-
|
|
92
|
-
@include bp(m) {
|
|
93
|
-
margin-bottom: 12px;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
87
|
.bom-scrub-action__label {
|
|
99
88
|
@include visuallyhidden();
|
|
100
89
|
}
|
|
@@ -121,6 +110,7 @@
|
|
|
121
110
|
position: relative;
|
|
122
111
|
border: 1px solid get-palette-color('neutral.greyMedium');
|
|
123
112
|
border-left: none;
|
|
113
|
+
border-right: none;
|
|
124
114
|
touch-action: none;
|
|
125
115
|
}
|
|
126
116
|
|
|
@@ -136,48 +126,29 @@
|
|
|
136
126
|
margin-left: 16px;
|
|
137
127
|
|
|
138
128
|
@include bom-type-scale($size: 'type-12', $line: 'nospace');
|
|
139
|
-
|
|
140
|
-
@include bp(m) {
|
|
141
|
-
@include bom-type-scale($size: 'type-14', $line: 'nospace');
|
|
142
|
-
|
|
143
|
-
margin-left: 24px;
|
|
144
|
-
}
|
|
145
129
|
}
|
|
146
130
|
|
|
147
131
|
.bom-scrub-timeline__loading-bar {
|
|
148
132
|
background: get-palette-color('neutral.greyMedium');
|
|
149
|
-
margin: 0
|
|
133
|
+
margin: 0 12px;
|
|
150
134
|
max-height: 4px;
|
|
151
135
|
position: relative;
|
|
152
136
|
top: 50%;
|
|
153
137
|
width: 100%;
|
|
154
138
|
|
|
155
|
-
@include
|
|
156
|
-
max-height: 6px;
|
|
157
|
-
margin: 0 24px;
|
|
158
|
-
}
|
|
139
|
+
@include bom-type-scale($size: 'type-12', $line: 'nospace');
|
|
159
140
|
}
|
|
160
141
|
|
|
161
142
|
.bom-scrub-display-label {
|
|
162
143
|
color: get-palette-color('neutral.charcoalMedium');
|
|
163
144
|
position: absolute;
|
|
164
|
-
right:
|
|
145
|
+
right: 12px;
|
|
165
146
|
top: 4px;
|
|
166
147
|
|
|
167
148
|
@include bom-type-scale(
|
|
168
149
|
$size: 'type-12',
|
|
169
150
|
$line: 'nospace',
|
|
170
151
|
);
|
|
171
|
-
|
|
172
|
-
@include bp(m) {
|
|
173
|
-
top: 10px;
|
|
174
|
-
right: 24px;
|
|
175
|
-
|
|
176
|
-
@include bom-type-scale(
|
|
177
|
-
$size: 'type-14',
|
|
178
|
-
$line: 'nospace',
|
|
179
|
-
);
|
|
180
|
-
}
|
|
181
152
|
}
|
|
182
153
|
|
|
183
154
|
.bom-scrub-scrubber {
|
|
@@ -202,7 +173,6 @@
|
|
|
202
173
|
.bom-scrub-markers {
|
|
203
174
|
position: relative;
|
|
204
175
|
width: 100%;
|
|
205
|
-
height: 23px;
|
|
206
176
|
}
|
|
207
177
|
|
|
208
178
|
.bom-scrub-marker {
|
|
@@ -217,15 +187,8 @@
|
|
|
217
187
|
|
|
218
188
|
@include bom-type-scale(
|
|
219
189
|
$size: 'type-12',
|
|
220
|
-
$line: '
|
|
190
|
+
$line: 'display',
|
|
221
191
|
);
|
|
222
|
-
|
|
223
|
-
@include bp(m) {
|
|
224
|
-
@include bom-type-scale(
|
|
225
|
-
$size: 'type-14',
|
|
226
|
-
$line: 'display',
|
|
227
|
-
);
|
|
228
|
-
}
|
|
229
192
|
}
|
|
230
193
|
|
|
231
194
|
.bom-scrub-marker--small {
|
|
@@ -245,12 +208,8 @@
|
|
|
245
208
|
}
|
|
246
209
|
|
|
247
210
|
.bom-scrub-overhang {
|
|
248
|
-
width:
|
|
211
|
+
width: 12px;
|
|
249
212
|
height: 100%;
|
|
250
|
-
|
|
251
|
-
@include bp(m) {
|
|
252
|
-
width: 24px;
|
|
253
|
-
}
|
|
254
213
|
}
|
|
255
214
|
|
|
256
215
|
.bom-scrub-overhang--filled {
|
|
@@ -261,17 +220,15 @@
|
|
|
261
220
|
background: get-palette-color('primary.darkBlue');
|
|
262
221
|
display: flex;
|
|
263
222
|
flex-wrap: wrap;
|
|
264
|
-
min-height:
|
|
223
|
+
min-height: 32px;
|
|
265
224
|
justify-content: space-between;
|
|
266
|
-
padding:
|
|
225
|
+
padding: 8px 16px;
|
|
267
226
|
color: get-palette-color('neutral.white');
|
|
268
|
-
font-size: 12px;
|
|
269
227
|
|
|
270
|
-
@include
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}
|
|
228
|
+
@include bom-type-scale(
|
|
229
|
+
$size: 'type-12',
|
|
230
|
+
$line: 'display',
|
|
231
|
+
);
|
|
275
232
|
}
|
|
276
233
|
|
|
277
234
|
.bom-scrub-utils__left {
|
package/lib/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ScrubberState=void 0;/* eslint-disable import/prefer-default-export */var ScrubberState
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ScrubberState=void 0;/* eslint-disable import/prefer-default-export */var ScrubberState=exports.ScrubberState=/*#__PURE__*/function(ScrubberState){ScrubberState["PAUSED"]="PAUSED";ScrubberState["PLAYING"]="PLAYING";return ScrubberState}({});
|
package/lib/utils.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.wrapIndex=exports.toPercentageWidth=exports.mapNumber=exports.getStepIndexById=exports.getStepById=exports.clamp=void 0;var wrapIndex=exports.wrapIndex=function wrapIndex(n,len){return(n%len+len)%len};var mapNumber=exports.mapNumber=function mapNumber(n,srcMin,srcMax,tgtMin,tgtMax){return(n-srcMin)*((tgtMax-tgtMin)/(srcMax-srcMin))+tgtMin};var clamp=exports.clamp=function clamp(n,min,max){return Math.min(Math.max(n,min),max)};var getStepIndexById=exports.getStepIndexById=function getStepIndexById(timeSteps,id){return timeSteps.findIndex(function(step){return step.id===id})};var getStepById=exports.getStepById=function getStepById(timeSteps,id){return timeSteps.find(function(step){return step.id===id})};var toPercentageWidth=exports.toPercentageWidth=function toPercentageWidth(timeSteps,index){return 100/timeSteps.length*index};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ausbom/time-scrubber",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "",
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"react": ">= 16.3.x"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@ausbom/form": "^0.4.
|
|
41
|
-
"@ausbom/icon": "^0.
|
|
42
|
-
"@ausbom/styles": "^0.14.
|
|
40
|
+
"@ausbom/form": "^0.4.52",
|
|
41
|
+
"@ausbom/icon": "^0.23.1",
|
|
42
|
+
"@ausbom/styles": "^0.14.2",
|
|
43
43
|
"lodash.debounce": "4.0.8"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "b2fb259306f6ff4acc90b41a8491469a9cea4d29"
|
|
46
46
|
}
|