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

private _onCheckboxClick = async (stateChanges: Array<{ node: TreeNodeItem, newState: CheckBoxState }>) => {
    for (const { node } of stateChanges) {
      // toggle the state of the checkbox
      const check = (node.checkBoxState === CheckBoxState.On) ? CheckBoxState.Off : CheckBoxState.On;

      // get the selected nodes
      const _selectedNodes = this.state.selectedNodes.slice();

      // change the state of the selected node (which will recursively change any children)
      await this._onNodesSelected(_selectedNodes, node, check);

      // finally set the state
      this.setState({ selectedNodes: _selectedNodes });
    }
  }

private onCheckboxClick = (stateChanges: Array<{ node: TreeNodeItem, newState: CheckBoxState }>) => {
    const selectedNodes: TreeNodeItem[] = [];
    const deselectedNodes: TreeNodeItem[] = [];
    for (const { node, newState } of stateChanges) {
      switch (newState) {
        case CheckBoxState.On:
          selectedNodes.push(node);
          break;

        case CheckBoxState.Off:
          deselectedNodes.push(node);
          break;
      }
    }

    // tslint:disable-next-line: no-floating-promises
    this.addToSelection(selectedNodes, false);
    // tslint:disable-next-line: no-floating-promises
    this.removeFromSelection(deselectedNodes);
  }
  public render() {

public render(): JSX.Element {
    // cspell:disable
    return (
      <dialog title="{&quot;Modal">
        <p>Lorem ipsum dolor sit amet, posse imperdiet ius in, mundi cotidieque ei per. Vel scripta ornatus assentior cu. Duo nonumy equidem te, per ad malis deserunt consetetur. In per invidunt conceptam. Ea pri aeque corrumpit. Eum ea ipsum perfecto vulputate, an cum oblique ornatus.</p>
        <p>Deserunt perpetua intellegam ex qui. Sanctus epicuri molestiae vim ut, vix in dolorem mnesarchum. Quas tollit malorum usu id, sea dicat congue abhorreant ex. Reque tibique cu mel. Ea vix posse consequuntur, nam dicat nostrud ne. Id mea autem viderer, minim minimum adversarium ex vis, commodo malorum sea ei.</p>
        <p>Cu novum viris detraxit eam. Erat inimicus necessitatibus vim in, noster placerat pro an, modus homero percipitur duo no. Ius voluptatum reprehendunt id, nulla nemore ut his. Mei ei quis qualisque consetetur, illud possim id vel.</p>
        <p>Quando verear regione ius ei. Eum tractatos ullamcorper ei, vidisse repudiare ea his. Possim intellegam ne duo, solet malorum nostrum eum ut, ei alterum corrumpit eum. Has ad utroque eloquentiam. Qui case forensibus eloquentiam ne. Usu no nominati principes, primis luptatum mea ex. No dicit nullam qui.</p>
        <p>
          movable: <input checked="{this.state.movable}" type="checkbox"> { this.setState((prevState) =&gt; ({ movable: !prevState.movable })); }} /&gt;
          resizable: <input checked="{this.state.resizable}" type="checkbox"> { this.setState((prevState) =&gt; ({ resizable: !prevState.resizable })); }} /&gt;
          overlay: <input checked="{this.state.overlay}" type="checkbox"> { this.setState((prevState) =&gt; ({ overlay: !prevState.overlay })); }} /&gt;</p></dialog>

private _onSplitterChange = (size: number): void => {
    let percentage = 0;

    // istanbul ignore else
    if (this._containerDiv && size > 0) {
      if (this.props.orientation === Orientation.Horizontal) {
        const height = this._containerDiv.getBoundingClientRect().height;
        if (height > 0)
          percentage = size / height;
      } else {
        const width = this._containerDiv.getBoundingClientRect().width;
        if (width > 0)
          percentage = size / width;
      }

      // istanbul ignore else
      if (this.props.onSplitterChange)
        this.props.onSplitterChange(size, percentage);
    }
  }

private checkBoxClicked(stateChanges: Array<{ node: TreeNodeItem, newState: CheckBoxState }>) {
    const changedNodes: PhotoFolder[] = [];
    for (const stateChange of stateChanges) {
      if (!(stateChange.node instanceof PhotoFolder))
        continue;
      const photoFolder: PhotoFolder = stateChange.node as PhotoFolder;
      photoFolder.visible = (stateChange.newState === CheckBoxState.On);
      changedNodes.push(photoFolder);
      // need all the subnodes, too.
      const subNodes = photoFolder.getSubFolders();
      for (const subNode of subNodes) {
        changedNodes.push(subNode);
      }
    }

    // raise the changed event.
    if (changedNodes.length > 0) {
      changedNodes[0].photoTree.onTreeNodeChanged.raiseEvent(changedNodes);
      this.props.dataProvider.markerVisibilityChange();
    }
  }

private onCheckboxStateChange = async (stateChanges: Array<{ node: TreeNodeItem, newState: CheckBoxState }>) => {
    // istanbul ignore next
    if (!this._visibilityHandler)
      return;

    for (const { node, newState } of stateChanges) {
      // tslint:disable-next-line: no-floating-promises
      this._visibilityHandler.changeVisibility(node, newState === CheckBoxState.On);
    }
  }

private async onCheckboxStateChange(
    stateChanges: Array<{
      node: TreeNodeItem;
      newState: CheckBoxState;
    }>,
  ) {
    const nodesToEnable: TreeNodeItem[] = [];
    const nodesToDisable: TreeNodeItem[] = [];
    for (const { node, newState } of stateChanges) {
      if (newState === CheckBoxState.On) {
        nodesToEnable.push(node);
      } else {
        nodesToDisable.push(node);
      }
    }

    if (nodesToEnable.length > 0) {
      this._manageNodesState(nodesToEnable, true); // tslint:disable-line:no-floating-promises
    }

    if (nodesToDisable.length > 0) {
      this._manageNodesState(nodesToDisable, false); // tslint:disable-line:no-floating-promises
    }
  }

import { RelativePosition } from "@bentley/ui-abstract";
import { ToolAssistanceInstruction } from "@bentley/imodeljs-frontend";
import { Timer, BodyText, Point, PointProps, Icon } from "@bentley/ui-core";

import { CursorInformation, CursorPopupManager, CursorUpdatedEventArgs } from "../../../ui-framework";

import "./CursorPrompt.scss";

/** @alpha */
export class CursorPrompt {
  private _timeOut: number;
  private _fadeOut: boolean;
  private _timer: Timer;
  private _relativePosition = RelativePosition.BottomRight;
  private _offset: Point = new Point(20, 20);
  private _popupId = "cursor-prompt";

  constructor(timeOut: number, fadeOut: boolean) {
    this._timeOut = timeOut;
    this._fadeOut = fadeOut;
    this._timer = new Timer(timeOut);
  }

  public display(toolIconSpec: string, instruction: ToolAssistanceInstruction, offset: PointProps = { x: 20, y: 20 }, relativePosition: RelativePosition = RelativePosition.BottomRight) {
    if (!instruction.text) {
      // istanbul ignore else
      if (this._timer.isRunning)
        this.close(false);
      return;
    }

const [label, setLabel] = useState(() => {
    const newLabel = getLabel();
    if (isPromiseLike(newLabel)) {
      newLabel.then((result) => setLabel(result)); // tslint:disable-line: no-floating-promises
      return ;
    }
    return newLabel;
  });

private setSizeFromRef(button: HTMLButtonElement | null) {
    // istanbul ignore else
    if (button) {
      const rect = button.getBoundingClientRect();
      this.size = new Size(rect.width, rect.height);

      if (this.props.onSizeKnown)
        this.props.onSizeKnown(this.size);
    }
  }