How to use the pondjs.TimeRange function in pondjs

: tb;
                newEnd =
                    this.state.brushingInitializationSite === "brush" ||
                    this.state.brushingInitializationSite === "handle-right"
                        ? Math.round(te - endOffsetConstrain)
                        : te;

                // Swap if needed
                if (newBegin > newEnd) {
                    [newBegin, newEnd] = [newEnd, newBegin];
                }
            }

            if (this.props.onTimeRangeChanged) {
                this.props.onTimeRangeChanged(
                    new TimeRange(newBegin, newEnd),
                    this.state.brushIndex
                );
            }
        }
    }

}

                    newBegin = this.state.brushingInitializationSite === "brush" || this.state.brushingInitializationSite === "handle-left" ? parseInt(tb - startOffsetConstraint, 10) : tb;
                    newEnd = this.state.brushingInitializationSite === "brush" || this.state.brushingInitializationSite === "handle-right" ? parseInt(te - endOffsetConstrain, 10) : te;

                    // Swap if needed
                    if (newBegin > newEnd) {
                        ;
                        var _ref = [newEnd, newBegin];
                        newBegin = _ref[0];
                        newEnd = _ref[1];
                    }
                }

                if (this.props.onTimeRangeChanged) {
                    this.props.onTimeRangeChanged(new _pondjs.TimeRange(newBegin, newEnd), this.state.brushIndex);
                }
            }
        }

constructor(props) {
    super(props);

    const { event } = props;

    const start = event.target_event_start_timestamp_ms;
    const end = event.target_event_end_timestamp_ms;

    this.state = {
      waveforms: [],
      waveformsVisible: {},
      timeRange: new TimeRange(start, end),
      start,
      end,
    };
  }

let newBegin = parseInt(this.state.initialPanBegin - timeOffset, 10);
            let newEnd = parseInt(this.state.initialPanEnd - timeOffset, 10);
            const duration = parseInt(this.state.initialPanEnd - this.state.initialPanBegin, 10);

            if (this.props.minTime && newBegin < this.props.minTime.getTime()) {
                newBegin = this.props.minTime.getTime();
                newEnd = newBegin + duration;
            }

            if (this.props.maxTime && newEnd > this.props.maxTime.getTime()) {
                newEnd = this.props.maxTime.getTime();
                newBegin = newEnd - duration;
            }

            const newTimeRange = new TimeRange(newBegin, newEnd);
            if (this.props.onZoom) {
                this.props.onZoom(newTimeRange);
            }
        } else if (this.props.onMouseMove) {
            const mousePosition = this.getOffsetMousePosition(e);
            if (this.props.onMouseMove) {
                this.props.onMouseMove(mousePosition[0], mousePosition[1]);
            }
        }
    }

var newBegin = parseInt(this.state.initialPanBegin - timeOffset, 10);
                var newEnd = parseInt(this.state.initialPanEnd - timeOffset, 10);
                var duration = parseInt(this.state.initialPanEnd - this.state.initialPanBegin, 10);

                if (this.props.minTime && newBegin < this.props.minTime.getTime()) {
                    newBegin = this.props.minTime.getTime();
                    newEnd = newBegin + duration;
                }

                if (this.props.maxTime && newEnd > this.props.maxTime.getTime()) {
                    newEnd = this.props.maxTime.getTime();
                    newBegin = newEnd - duration;
                }

                var newTimeRange = new _pondjs.TimeRange(newBegin, newEnd);
                if (this.props.onZoom) {
                    this.props.onZoom(newTimeRange);
                }
            } else if (this.props.onMouseMove) {
                var mousePosition = this.getOffsetMousePosition(e);
                if (this.props.onMouseMove) {
                    this.props.onMouseMove(mousePosition[0], mousePosition[1]);
                }
            }
        }
    }, {

viewport() {
        const { width, timeScale } = this.props;
        const viewBeginTime = timeScale.invert(0);
        const viewEndTime = timeScale.invert(width);
        return new TimeRange(viewBeginTime, viewEndTime);
    }

viewport() {
        const { width, timeScale } = this.props;
        const viewBeginTime = timeScale.invert(0);
        const viewEndTime = timeScale.invert(width);
        return new TimeRange(viewBeginTime, viewEndTime);
    }

viewport() {
        const { width, timeScale } = this.props;
        const viewBeginTime = timeScale.invert(0);
        const viewEndTime = timeScale.invert(width);
        return new TimeRange(viewBeginTime, viewEndTime);
    }