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

export const treeCanDropTargetDropCallback = (args: DropTargetArguments) => {
  // Ensure all important properties exist on dataObject
  if ("id" in args.dataObject && "type" in args.dataObject) {
    let id = ""; // keeps empty string if copying so it doesn't do ID checks for canDrop since the ID will change.
    const { id: originalId, label, description, icon, children, type, parentId } = args.dataObject;
    if (args.dropEffect !== DropEffects.Copy) {
      id = originalId; // Link means keep ID and old node, Move means keep ID and delete old node.
    }
    const dragNode: DelayLoadedTreeNodeItem = {
      id, label, description, hasChildren: children !== undefined && children.length > 0,
      parentId: typeof parentId === "string" ? parentId : undefined,
      extendedData: { id, label, description, icon, parentId: typeof parentId === "string" ? parentId : undefined, type, children },
    };
    if (args.dropLocation) {
      if ("id" in args.dropLocation && "extendedData" in args.dropLocation) {
        const dropNode: DelayLoadedTreeNodeItem = args.dropLocation;
        const exists = demoMutableTreeDataProvider.getNodeIndex(dropNode, dragNode) !== -1;
        if (!demoMutableTreeDataProvider.isDescendent(dragNode, dropNode)) {
          if (args.row !== undefined) {
            if (exists && parentId === args.dropLocation.id && args.dropEffect === DropEffects.Move) {
              return true;
            } else if (!exists) {

export const treeDropTargetDropCallback = (args: DropTargetArguments): DropTargetArguments => {
  // Ensure all important properties exist on dataObject
  if (args.dataObject && "id" in args.dataObject && "type" in args.dataObject) {
    const { id: originalId, label, description, icon, children, type, parentId, dataProvider } = args.dataObject;
    let id = "";
    if (args.dropEffect === DropEffects.Copy) {
      id = Math.round(Math.random() * 1e14) + ""; // Copy means new ID, don't delete old.
    } else {
      id = originalId; // Link means keep ID and old node, Move means keep ID and delete old node.
    }
    const dragNode: DelayLoadedTreeNodeItem = {
      id, label, description, icon, hasChildren: children !== undefined && children.length > 0,
      parentId: typeof parentId === "string" ? parentId : undefined,
      extendedData: { id, label, description, icon, parentId: typeof parentId === "string" ? parentId : undefined, type, children },
    };
    if (args.dropLocation) {
      let dropNode: DelayLoadedTreeNodeItem | undefined;
      if ("id" in args.dropLocation && "extendedData" in args.dropLocation)
        dropNode = args.dropLocation;
      const exists = dataProvider === demoMutableTreeDataProvider;
      if (!dropNode || ("id" in dropNode && !demoMutableTreeDataProvider.isDescendent(dragNode, dropNode))) {
        if (exists && args.dropEffect === DropEffects.Move) {

public static async initialize() {
    Presentation.initialize();
    Presentation.selection.scopes.activeScope = "top-assembly";
    UiCore.initialize(IModelApp.i18n); // tslint:disable-line:no-floating-promises
    UiComponents.initialize(IModelApp.i18n); // tslint:disable-line:no-floating-promises

    const oidcConfiguration = this.getOidcConfiguration();
    await UiFramework.initialize(SampleAppIModelApp.store, IModelApp.i18n, oidcConfiguration, "frameworkState");

    // initialize Presentation
    Presentation.initialize({
      activeLocale: IModelApp.i18n.languageList()[0],
    });

    // Register tools.
    Tool1.register(this.sampleAppNamespace);
    Tool2.register(this.sampleAppNamespace);
    ToolWithSettings.register(this.sampleAppNamespace);
    AnalysisAnimationTool.register(this.sampleAppNamespace);
    UiProviderTool.register(this.sampleAppNamespace);

Presentation.initialize({
      // specify `clientId` so Presentation framework can share caches
      // between sessions for the same clients
      clientId: MyAppFrontend.getClientId(),

      // specify locale for localizing presentation data
      activeLocale: IModelApp.i18n.languageList()[0],
    });
    // __PUBLISH_EXTRACT_END__

    // __PUBLISH_EXTRACT_START__ Presentation.Frontend.SetSelectionScope
    Presentation.selection.scopes.activeScope = "top-assembly";
    // __PUBLISH_EXTRACT_END__

    readyPromises.push(UiCore.initialize(IModelApp.i18n));
    readyPromises.push(UiComponents.initialize(IModelApp.i18n));
    this._ready = Promise.all(readyPromises).then(() => { });
  }

{
          key: "description", record: new PropertyRecord({
            value: description,
            valueFormat: PropertyValueFormat.Primitive,
            displayValue: description,
          }, {
            name: "description",
            displayLabel: "description",
            typename: "text",
          }),
        },
      ],
    };
    // if object has children, ie. is a non-leaf node of a tree, don't allow drop.
    if (children !== undefined && children.length > 0) {
      args.dropStatus = DropStatus.None;
      return args;
    }
    const exists = dataProvider === demoMutableTableDataProvider;
    if (args.row !== undefined) {
      if (exists && args.dropEffect === DropEffects.Move) {
        demoMutableTableDataProvider.moveRow(dragRow, args.row);
        args.dropStatus = DropStatus.Drop;
        args.local = true;
      } else {
        demoMutableTableDataProvider.insertRow(dragRow, args.row);
        args.dropStatus = DropStatus.Drop;
      }
    } else if (!exists) {
      demoMutableTableDataProvider.addRow(dragRow);
      args.dropStatus = DropStatus.Drop;
    }

private _setRotation = (endRotMatrix: Matrix3d, face: Face) => {
    ViewportComponentEvents.setCubeMatrix(endRotMatrix, face);
    // set variables, with animTime at 0 to prevent animation.
    this.setState({
      startRotMatrix: endRotMatrix,
      endRotMatrix,
      animation: 1,
      face,
    });
  }
}

private _onMouseUp = () => {
    if (this.state.dragging) {
      this.setState({ dragging: false });
      ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, CubeNavigationAid._getMatrixFace(this.state.endRotMatrix), true);
    }

    // remove so event only triggers after this.onMouseStartDrag
    window.removeEventListener("mousemove", this._onMouseMove);
    window.removeEventListener("mouseup", this._onMouseUp);
  }

private _animationEnd = () => {
    ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, this.state.face, true);
    const startRotMatrix = this.state.endRotMatrix.clone();
    // istanbul ignore next
    if (this._mounted) {
      this.setState({ startRotMatrix }, () => {
        // istanbul ignore else
        if (this.props.onAnimationEnd)
          this.props.onAnimationEnd();
      });
    }
  }

public render(): React.ReactNode {
    const { animation, startRotMatrix, endRotMatrix } = this.state;
    const visible = CubeNavigationAid._isMatrixFace(endRotMatrix) && animation === 1.0;
    const rotMatrix = CubeNavigationAid._interpolateRotMatrix(startRotMatrix, animation, endRotMatrix);
    if (rotMatrix !== startRotMatrix && rotMatrix !== endRotMatrix)
      ViewportComponentEvents.setCubeMatrix(rotMatrix, Face.None);

    const labels: { [key: string]: string } = {
      [Face.Right]: UiFramework.translate("cube.right"),
      [Face.Left]: UiFramework.translate("cube.left"),
      [Face.Back]: UiFramework.translate("cube.back"),
      [Face.Front]: UiFramework.translate("cube.front"),
      [Face.Top]: UiFramework.translate("cube.top"),
      [Face.Bottom]: UiFramework.translate("cube.bottom"),
    };

    const faces: { [key: string]: React.ReactNode } = {};
    for (const key in labels) {
      // istanbul ignore else
      if (labels.hasOwnProperty(key)) {
        const f = key as Face;
        const label = labels[f];

public static startup() {
    IModelApp.startup();

    // contains various initialization promises which need
    // to be fulfilled before the app is ready
    const initPromises = new Array>();

    // initialize localization for the app
    initPromises.push(IModelApp.i18n.registerNamespace("SimpleViewer").readFinished);

    // initialize UiCore
    initPromises.push(UiCore.initialize(IModelApp.i18n));

    // initialize UiComponents
    initPromises.push(UiComponents.initialize(IModelApp.i18n));

    // initialize Presentation
    Presentation.initialize({
      activeLocale: IModelApp.i18n.languageList()[0],
    });

    // initialize RPC communication
    initPromises.push(SimpleViewerApp.initializeRpc());

    // initialize OIDC
    initPromises.push(SimpleViewerApp.initializeOidc());

    // the app is ready when all initialization promises are fulfilled
    this._isReady = Promise.all(initPromises).then(() => { });
  }