How to use @bentley/presentation-components - 10 common examples

private _onFindSimilar = async (provider: IPresentationPropertyDataProvider, record: PropertyRecord) => {
    try {
      const factory = new DataProvidersFactory();
      const similarInstancesProvider = await factory.createSimilarInstancesTableDataProvider(provider,
        record, { displayType: DefaultContentDisplayTypes.List });
      await this._selectAllInstances(similarInstancesProvider);
      this.setState({ similarInstancesProvider });
    } catch (e) {
      console.log(e); // tslint:disable-line:no-console
      alert(`Can't find similar instances for the selected property`);
      this.setState({ similarInstancesProvider: undefined });
    }
  }

.then((ruleset: RegisteredRuleset) => {
        if (!this._isMounted)
          return;
        this._ruleset = ruleset;
        const dataProvider = new PresentationTreeDataProvider(this.props.iModelConnection, this._ruleset.id);
        this.enableCheckboxes(dataProvider); // tslint:disable-line:no-floating-promises
        this._dataProvider = dataProvider;
      });
  }

import * as React from "react";

import { GlobalContextMenu, ContextMenuItem } from "@bentley/ui-core";
import {
  ConfigurableUiManager,
  ConfigurableCreateInfo,
  WidgetControl,
} from "@bentley/ui-framework";
import { Table, TableCellContextMenuArgs } from "@bentley/ui-components";
import { PresentationTableDataProvider, tableWithUnifiedSelection } from "@bentley/presentation-components";
import { IModelConnection, IModelApp, NotifyMessageDetails, OutputMessagePriority } from "@bentley/imodeljs-frontend";
import { ContextMenuItemInfo } from "./UnifiedSelectionPropertyGridWidget";

// create a HOC property grid component that supports unified selection
// tslint:disable-next-line:variable-name
const UnifiedSelectionTable = tableWithUnifiedSelection(Table);

export class UnifiedSelectionTableWidgetControl extends WidgetControl {
  constructor(info: ConfigurableCreateInfo, options: any) {
    super(info, options);

    if (options && options.iModelConnection && options.rulesetId)
      this.reactElement = ;
  }
}

interface UnifiedSelectionTableWidgetProps {
  iModelConnection?: IModelConnection;
  rulesetId?: string;
}

interface UnifiedSelectionTableWidgetState {

/*---------------------------------------------------------------------------------------------
* 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 { IModelApp } from "@bentley/imodeljs-frontend";
import { tableWithUnifiedSelection, IPresentationTableDataProvider } from "@bentley/presentation-components";
import { Table, SelectionMode } from "@bentley/ui-components";
import "./FindSimilarWidget.css";

// tslint:disable-next-line:variable-name naming-convention
const SampleTable = tableWithUnifiedSelection(Table);

export interface Props {
  dataProvider: IPresentationTableDataProvider;
  onDismissed?: () => void;
}

export default class FindSimilarWidget extends React.PureComponent {
  constructor(props: Props, context?: any) {
    super(props, context);
    this.state = { prevProps: props };
  }
  public componentWillUnmount() {
    this.props.dataProvider.dispose();
  }
  public componentDidUpdate(prevProps: Props) {
    if (this.props.dataProvider !== prevProps.dataProvider)

/*---------------------------------------------------------------------------------------------
* 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 { IModelApp, IModelConnection } from "@bentley/imodeljs-frontend";
import { PresentationTableDataProvider, tableWithUnifiedSelection, IPresentationTableDataProvider } from "@bentley/presentation-components";
import { Table } from "@bentley/ui-components";
import "./GridWidget.css";

// tslint:disable-next-line:variable-name naming-convention
const SampleTable = tableWithUnifiedSelection(Table);

export interface Props {
  imodel: IModelConnection;
  rulesetId: string;
}

export interface State {
  dataProvider: IPresentationTableDataProvider;
}

export default class GridWidget extends React.PureComponent {
  constructor(props: Props, context?: any) {
    super(props, context);
    this.state = { dataProvider: createDataProviderFromProps(props) };
  }
  public static getDerivedStateFromProps(props: Props, state: State): State | 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";

// 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;
  }
}

import {
  ConfigurableUiManager,
  ConfigurableCreateInfo,
  WidgetControl,
} from "@bentley/ui-framework";
import { Orientation, GlobalContextMenu, ContextMenuItem, ContextMenuItemProps } from "@bentley/ui-core";
import { PropertyGrid, PropertyGridContextMenuArgs } from "@bentley/ui-components";
import { PresentationPropertyDataProvider, propertyGridWithUnifiedSelection } from "@bentley/presentation-components";
import { Field } from "@bentley/presentation-common";
import { Presentation } from "@bentley/presentation-frontend";
import { IModelApp, IModelConnection } from "@bentley/imodeljs-frontend";

// create a HOC property grid component that supports unified selection
// tslint:disable-next-line:variable-name
const UnifiedSelectionPropertyGrid = propertyGridWithUnifiedSelection(PropertyGrid);

export class UnifiedSelectionPropertyGridWidgetControl extends WidgetControl {
  constructor(info: ConfigurableCreateInfo, options: any) {
    super(info, options);

    if (options && options.iModelConnection && options.rulesetId)
      this.reactElement = ;
  }
}

interface UnifiedSelectionPropertyGridWidgetProps {
  iModelConnection: IModelConnection;
  rulesetId: string;
}

export type ContextMenuItemInfo = ContextMenuItemProps & React.Attributes & { label: string };

*--------------------------------------------------------------------------------------------*/

import * as React from "react";
import { IModelApp, IModelConnection, PropertyRecord } from "@bentley/imodeljs-frontend";
import {
  PresentationPropertyDataProvider, propertyGridWithUnifiedSelection,
  IPresentationPropertyDataProvider,
} from "@bentley/presentation-components";
import { Field } from "@bentley/presentation-common";
import { GlobalContextMenu, ContextMenuItem, ContextMenuItemProps } from "@bentley/ui-core";
import { PropertyGrid, PropertyData, PropertyCategory, PropertyGridContextMenuArgs } from "@bentley/ui-components";
import { Presentation } from "@bentley/presentation-frontend";
import "./PropertiesWidget.css";

// tslint:disable-next-line:variable-name naming-convention
const SamplePropertyGrid = propertyGridWithUnifiedSelection(PropertyGrid);

export interface Props {
  imodel: IModelConnection;
  rulesetId: string;
  onFindSimilar?: (propertiesProvider: IPresentationPropertyDataProvider, record: PropertyRecord) => void;
}

type ContextMenuItemInfo = ContextMenuItemProps & React.Attributes & { label: string };

export interface State {
  dataProvider: PresentationPropertyDataProvider;
  contextMenu?: PropertyGridContextMenuArgs;
  contextMenuItemInfos?: ContextMenuItemInfo[];
}
export default class PropertiesWidget extends React.Component {
  constructor(props: Props, context?: any) {

const createDataProvider = (props: VisibilityTreeProps): IPresentationTreeDataProvider => {
  let dataProvider: IPresentationTreeDataProvider;
  if (props.dataProvider) {
    dataProvider = props.dataProvider;
  } else {
    const provider = new PresentationTreeDataProvider(props.imodel, RULESET.id);
    provider.pagingSize = pageSize;
    dataProvider = provider;
  }
  if (props.enablePreloading && dataProvider.loadHierarchy) {
    // tslint:disable-next-line: no-floating-promises
    dataProvider.loadHierarchy();
  }
  return dataProvider;
};