How to use the @bentley/presentation-components.viewWithUnifiedSelection function in @bentley/presentation-components

/*---------------------------------------------------------------------------------------------
* Copyright (c) 2019 Bentley Systems, Incorporated. All rights reserved.
* Licensed under the MIT License. See LICENSE.md in the project root for license terms.
*--------------------------------------------------------------------------------------------*/

import * as React from "react";
import { Id64String } from "@bentley/bentleyjs-core";
import { IModelConnection } from "@bentley/imodeljs-frontend";
import { ViewportComponent } from "@bentley/ui-components";
import { viewWithUnifiedSelection } from "@bentley/presentation-components";

// tslint:disable-next-line:variable-name naming-convention
const SampleViewport = viewWithUnifiedSelection(ViewportComponent);

export interface Props {
  imodel: IModelConnection;
  rulesetId: string;
  viewDefinitionId: Id64String;
}
export default class ViewportContentComponent extends React.Component {
  public render() {
    return (
      
    );
  }
}

import { ViewportComponent, TimelineDataProvider, TimelineComponent } from "@bentley/ui-components";
import {
  ConfigurableCreateInfo, ConfigurableUiManager, ViewportContentControl, ContentViewManager,
  ScheduleAnimationTimelineDataProvider, AnalysisAnimationTimelineDataProvider, UiFramework,
} from "@bentley/ui-framework";
import { ScreenViewport, IModelConnection, ViewState } from "@bentley/imodeljs-frontend";
import { viewWithUnifiedSelection } from "@bentley/presentation-components";
import { ViewQueryParams, ViewDefinitionProps } from "@bentley/imodeljs-common";
import { SampleAppIModelApp } from "../..";
import { Id64String } from "@bentley/bentleyjs-core";
import { LoadingSpinner } from "@bentley/ui-core";

// create a HOC viewport component that supports unified selection
// tslint:disable-next-line:variable-name
const UnifiedSelectionViewport = viewWithUnifiedSelection(ViewportComponent);

/** iModel Viewport Control
 */
export class ScheduleAnimationViewportControl extends ViewportContentControl {

  constructor(info: ConfigurableCreateInfo, options: any) {
    super(info, options);

    const _iModelConnection = UiFramework.getIModelConnection();

    if (_iModelConnection)
      this.reactElement =  { this.viewport = v; }} />;
    else
      this.reactElement = null;
  }
}

/*---------------------------------------------------------------------------------------------
* Copyright (c) 2019 Bentley Systems, Incorporated. All rights reserved.
* Licensed under the MIT License. See LICENSE.md in the project root for license terms.
*--------------------------------------------------------------------------------------------*/
import * as React from "react";
import { Id64String } from "@bentley/bentleyjs-core";
import { IModelConnection } from "@bentley/imodeljs-frontend";
import { ViewportComponent } from "@bentley/ui-components";
import { viewWithUnifiedSelection } from "@bentley/presentation-components";
import Toolbar from "./Toolbar";

// create a HOC viewport component that supports unified selection
// tslint:disable-next-line:variable-name
const SimpleViewport = viewWithUnifiedSelection(ViewportComponent);

/** React properties for the viewport component */
export interface Props {
  /** iModel whose contents should be displayed in the viewport */
  imodel: IModelConnection;
  /** View definition to use when the viewport is first loaded */
  viewDefinitionId: Id64String;
  /** ID of the presentation rule set to use for unified selection */
  rulesetId: string;
}

/** Viewport component for the viewer app */
export default class SimpleViewportComponent extends React.Component {
  public render() {
    return (
      <>

import * as React from "react";
import { Id64String } from "@bentley/bentleyjs-core";
import { ViewportComponent } from "@bentley/ui-components";
import { viewWithUnifiedSelection } from "@bentley/presentation-components";
import { FillCentered } from "@bentley/ui-core";
import { ScreenViewport, ViewState, IModelConnection } from "@bentley/imodeljs-frontend";
import { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl";
import { ConfigurableUiManager } from "../configurableui/ConfigurableUiManager";
import { ViewportContentControl } from "./ViewportContentControl";
import { DefaultViewOverlay } from "./DefaultViewOverlay";
import { UiFramework } from "../UiFramework";
import { connectIModelConnectionAndViewState } from "../redux/connectIModel";

// create a HOC viewport component that supports unified selection
// tslint:disable-next-line:variable-name
const UnifiedSelectionViewport = viewWithUnifiedSelection(ViewportComponent);

/** ViewSelector that is connected to the IModelConnection property in the Redux store. The application must set up the Redux store and include the FrameworkReducer.
 * @beta
 */
export const IModelConnectedViewport = connectIModelConnectionAndViewState(null, null)(UnifiedSelectionViewport); // tslint:disable-line:variable-name

/** [[IModelViewportControl]] options. These options are set in the applicationData property of the [[ContentProps]].
 * @beta
 */
export interface IModelViewportControlOptions {
  /** ViewState or a function to return a ViewState */
  viewState?: ViewState | (() => ViewState);
  /** IModelConnection of data in Viewport */
  iModelConnection?: IModelConnection | (() => IModelConnection);
  /** Optional property to  disable the use of the DefaultViewOverlay */
  disableDefaultViewOverlay?: boolean;