in src/components/common/animation-control/animation-control.js [104:167]
render() {
const {currentTime, domain, speed, step, timeSteps} = this.props.animationConfig;
const {showSpeedControl} = this.state;
const animationType = Array.isArray(timeSteps)
? ANIMATION_TYPE.interval
: ANIMATION_TYPE.continuous;
return (
<BottomWidgetInner className="bottom-widget--inner">
<AnimationWidgetInner className="animation-widget--inner">
<div style={{marginLeft: '-10px'}}>
<AnimationController
value={currentTime}
domain={domain}
speed={speed}
updateAnimation={this._updateAnimation}
steps={timeSteps}
animationType={animationType}
>
{(isAnimating, start, pause, reset) => (
<AnimationPlaybacks
className="animation-control-playpause"
startAnimation={start}
isAnimating={isAnimating}
pauseAnimation={pause}
resetAnimation={reset}
buttonHeight={BUTTON_HEIGHT}
buttonStyle="link"
/>
)}
</AnimationController>
</div>
<StyledDomain className="animation-control__time-domain">
<span>{moment.utc(domain[0]).format(DEFAULT_TIME_FORMAT)}</span>
</StyledDomain>
<SliderWrapper className="animation-control__slider">
<Slider
showValues={false}
isRanged={false}
step={step}
minValue={domain ? domain[0] : 0}
maxValue={domain ? domain[1] : 1}
value1={currentTime}
onSlider1Change={this.onSlider1Change}
enableBarDrag={true}
/>
</SliderWrapper>
<StyledDomain className="animation-control__time-domain">
<span>{moment.utc(domain[1]).format(DEFAULT_TIME_FORMAT)}</span>
</StyledDomain>
<div className="animation-control__speed-control">
<SpeedControl
onClick={this.toggleSpeedControl}
showSpeedControl={showSpeedControl}
updateAnimationSpeed={this.props.updateAnimationSpeed}
speed={speed}
buttonHeight={BUTTON_HEIGHT}
/>
</div>
</AnimationWidgetInner>
<FloatingTimeDisplay currentTime={currentTime} />
</BottomWidgetInner>
);
}