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

constructor(groupItemProps: GroupItemProps, onItemExecuted?: OnItemExecutedFunc) {
    super(groupItemProps, onItemExecuted);

    this.groupId = (groupItemProps.groupId !== undefined) ? groupItemProps.groupId : "";
    if (groupItemProps.groupId)
      this.groupId = groupItemProps.groupId;
    else {
      GroupItemDef._sId++;
      this.groupId = GroupItemDef.groupIdPrefix + GroupItemDef._sId;
    }

    this.directionExplicit = (groupItemProps.direction !== undefined);
    this.direction = (groupItemProps.direction !== undefined) ? groupItemProps.direction : Direction.Bottom;
    this.itemsInColumn = (groupItemProps.itemsInColumn !== undefined) ? groupItemProps.itemsInColumn : 7;
    this._panelLabel = PropsHelper.getStringSpec(groupItemProps.panelLabel, groupItemProps.paneLabelKey); // tslint:disable-line: deprecation
    this.items = groupItemProps.items;
    this.defaultActiveItemId = groupItemProps.defaultActiveItemId;
  }

private getActivityMessage(): React.ReactNode {
    // istanbul ignore next
    if (!this.state.activityMessageInfo)
      return null;

    const messageDetails = this.state.activityMessageInfo.details;
    const percentComplete = UiFramework.translate("activityCenter.percentComplete");
    const cancelMessage = UiCore.translate("dialog.cancel");
    return (
      
        }
      >
        
                {cancelMessage}
                <span>&nbsp;</span>
                
                  <i>
                </i><i>
               :
              
                <i></i></i>

private initializeFrontstageLayout(nineZone: NineZoneManagerProps) {
    const nestedPanelsManager = FrontstageManager.NineZoneManager.getNestedPanelsManager();
    nestedPanelsManager.getPanelsManager("inner").getPanelManager(StagePanelType.Top).minSize = 20;
    nestedPanelsManager.getPanelsManager("inner").getPanelManager(StagePanelType.Top).collapseOffset = 0;
    nestedPanelsManager.getPanelsManager("inner").getPanelManager(StagePanelType.Bottom).minSize = 20;
    nestedPanelsManager.getPanelsManager("inner").getPanelManager(StagePanelType.Bottom).collapseOffset = 0;
    nestedPanelsManager.getPanelsManager("outer").getPanelManager(StagePanelType.Top).minSize = 20;
    nestedPanelsManager.getPanelsManager("outer").getPanelManager(StagePanelType.Top).collapseOffset = 0;
    nestedPanelsManager.getPanelsManager("outer").getPanelManager(StagePanelType.Bottom).minSize = 20;
    nestedPanelsManager.getPanelsManager("outer").getPanelManager(StagePanelType.Bottom).collapseOffset = 0;

    widgetZoneIds.forEach((zoneId: WidgetZoneId) => {
      const zoneDef = this.getZoneDef(zoneId);
      if (!zoneDef || zoneDef.zoneState === ZoneState.Off)
        return;

      if (!zoneDef.allowsMerging)
        this.setZoneAllowsMerging(zoneId, false);

      if (zoneDef.mergeWithZone)
        this.mergeZones(zoneId, zoneDef.mergeWithZone);

      const zoneProps = nineZone.zones.zones[zoneId];
      // istanbul ignore else
      if (zoneProps.widgets.length >= 1) {

private cloneStagePanelElement(panelDef: StagePanelDef | undefined, runtimeProps: FrontstageRuntimeProps): React.ReactNode {
    if (!this.state.isUiVisible && UiShowHideManager.showHidePanels)
      return null;

    if (panelDef) {
      const { location } = panelDef;
      const panelElement = Frontstage.getStagePanelElement(location, this.props);

      // istanbul ignore else
      if (panelElement && React.isValidElement(panelElement)) {
        const panelKey = getNestedStagePanelKey(panelDef.location);
        const panels = runtimeProps.nineZone.nested.panels[panelKey.id];
        const panel = StagePanelsManager.getPanel(panelKey.type, panels);
        const draggedWidget = runtimeProps.nineZone.zones.draggedWidget;

        const panelRuntimeProps: StagePanelRuntimeProps = {
          draggedWidgetId: draggedWidget ? draggedWidget.id : undefined,
          getWidgetContentRef: this._getContentRef,
          isInFooterMode: runtimeProps.nineZone.zones.isInFooterMode,
          isTargeted: !!runtimeProps.nineZone.zones.target,
          panel,
          panelDef,
          stagePanelChangeHandler: runtimeProps.stagePanelChangeHandler,
          widgetChangeHandler: runtimeProps.widgetChangeHandler,
          widgets: runtimeProps.nineZone.zones.widgets,
          widgetTabs: runtimeProps.widgetTabs,
          zoneDefProvider: runtimeProps.zoneDefProvider,
        };

public render(): React.ReactNode {
    const { runtimeProps } = this.props;

    if (!runtimeProps)
      return null;

    const { zoneDef } = runtimeProps;

    let widgetElement: React.ReactNode;
    // istanbul ignore else
    if (runtimeProps.zone.widgets.length === 1) {
      if (zoneDef.isToolSettings && isToolSettingsWidgetManagerProps(runtimeProps.widget) && runtimeProps.widget.mode === ToolSettingsWidgetMode.TitleBar) {
        const widgetDef = zoneDef.getSingleWidgetDef();
        const isClosed = widgetDef ? (widgetDef.state === WidgetState.Closed || widgetDef.state === WidgetState.Hidden) : false;
        return (

{UiFramework.translate("tools.AnalysisAnimation.ToolSettings.duration")}
          <input id="animationDuration" value="{(this.state.animationDuration" step="1" max="30" min="1" type="number">
          {UiFramework.translate("tools.AnalysisAnimation.ToolSettings.seconds")}
        
        <div>
          <input checked="{this.state.isLooping}" type="checkbox" id="animationLoop">
          {UiFramework.translate("tools.AnalysisAnimation.ToolSettings.loop")}
        </div>
        <div>
          <input id="animationSlider" value="{this.state.elapsedTime.toString()}" max="{this.state.animationDuration.toString()}" min="0" type="range">
        </div>
        <div>
          
                }
                /&gt;
                }
                /&gt;
</div>

private getNavigationWidget(): React.ReactNode {

    const horizontalToolbar =
      
            
            
             ModalDialogManager.openDialog(this.modalDialog())} />
             ModalDialogManager.openDialog(this.radialMenu())} />
             ModalDialogManager.openDialog(this.testPopup())} />
          
        }
      />;

    const verticalToolbar =

private getNavigationWidget(): React.ReactNode {

    const horizontalToolbar =
      
            
            
            
          
        }
      />;

    const verticalToolbar =

,
              ,
            ]}
          />
        }
      />
    );
  }
}

/** Define a ToolWidget with Buttons to display in the TopLeft zone.
 */
class FrontstageToolWidget extends React.Component {
  private _horizontalToolbar =
    
          
          
          
        
      }
    />;

  private _verticalToolbar =

labelKey: "SampleApp:buttons.switchLayout",
      execute: async () => {
        const activeFrontstageDef = FrontstageManager.activeFrontstageDef;
        if (activeFrontstageDef) {
          const contentLayout = ContentLayoutManager.findLayout("TwoHalvesHorizontal");
          if (contentLayout && activeFrontstageDef.contentGroup) {
            await ContentLayoutManager.setActiveLayout(contentLayout, activeFrontstageDef.contentGroup);
          }
        }
      },
    });
  }

  private _horizontalToolbar =
    
          
          
          
          
          
        
      }
    />;

  private _verticalToolbar =