Method onRenderHTML

modules/widgets/src/timeline-widget.tsx:153–196

(rootElement: HTMLElement)

  }

  onRenderHTML(rootElement: HTMLElement): void {
    const {timeRange, step, formatLabel} = this.props;
    const isPlaying = this.getPlaying();
    const currentTime = this.getTime();

    rootElement.dataset.placement = this.props.placement;

    render(
      <div className="deck-widget-button-group">
        {isPlaying ? (
          <IconButton
            label="Pause"
            className="deck-widget-timeline-pause"
            onClick={this.handlePlayPause}
          />
        ) : (
          <IconButton
            label="Play"
            className="deck-widget-timeline-play"
            onClick={this.handlePlayPause}
          />
        )}
        <RangeInput
          min={timeRange[0]}
          max={timeRange[1]}
          orientation="horizontal"
          step={step}
          value={[currentTime, currentTime]}
          onChange={this.handleTimeChange}
          decorations={[
            {
              position: [currentTime, currentTime + step],
              element: (
                <div className="deck-widget-timeline-label deck-widget-timeline-label--current">
                  {formatLabel(currentTime)}
                </div>
              )
            }
          ]}
        />
      </div>,
      rootElement
    );
  }

  private handlePlayPause = (): void => {
    const isPlaying = this.getPlaying();