Creating a dropdown component with React Typescript to be used with babylonjs

[nuguru]

Babylon.js Playground

Using the example in this playground as basis I have created a Dropdown component in my react typescript as follows

import { Button, Container, Control, StackPanel } from “@babylonjs/gui”;

export const Dropdown = (function () {
function Dropdown(hostingControl: any, height: any, width: any, color: any, background: any, top: any, left: any, dropdownOptions: any) {
// Members
height = height;
width = width;
color = color || “black”;
background = background || “white”;

// Container
let container = new Container();
container.width = width;
container.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
container.isHitTestVisible = false;

// Primary button
let button = Button.CreateSimpleButton("", "Please Select");
button.height = height;
button.background = background;
button.color = color;
button.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;

// Options panel
let options = new StackPanel("OptionsPanel");
options.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
options.top = height;
options.isVisible = false;
options.isVertical = true;

button.onPointerUpObservable.add(function () {
  options.isVisible = !options.isVisible;
});

// add controls
hostingControl.addControl(container);
container.addControl(button);
container.addControl(options);

// Selection
let selected = null;
let selectedValue = null;

// dropdownOptions.forEach((optionElement: any) => {
//   Dropdown.prototype.addOption(optionElement.key, optionElement.value, 'black', 'white', options);
// });

// if (top) {
//   container.top = top;
// }
// if (left) {
//   container.left = left;
// }

}
Object.defineProperty(Dropdown.prototype, ‘top’, {
get: function () {
return this.container.top;
},
set: function (value) {
this.container.top = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Dropdown.prototype, ‘left’, {
get: function () {
return this.container.left;
},
set: function (value) {
this.container.left = value;
},
enumerable: true,
configurable: true
});

Dropdown.prototype.addOption = function (value: any, text: any, color: any, background: any) {
var _this = this;
var button = Button.CreateSimpleButton(text, text);
button.height = _this.height;
button.paddingTop = “-1px”;
button.background = background || “white”;
button.color = color || “black”;
button.onPointerUpObservable.add(function () {
_this.options.isVisible = false;
_this.button.children[0].text = text;
_this.selected = button;
_this.selectedValue = value;
});
this.options.addControl(button);
};
return Dropdown;
}());

I then tried importing it and use with babylon scene as follows

  import { Dropdown } from "./Dropdown";

  let statusPanel = new StackPanel("StatusPanel");
  // TextBlock for the first CheckBox
  let statusTB = new TextBlock("tb1", "Status: ");
  statusTB.heightInPixels = 15;
  statusTB.widthInPixels = 30;
  statusTB.paddingRight = 5;
  statusTB.fontSize = 18;
  statusTB.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
  statusPanel.addControl(statusTB);
  statusPanel.isVertical = false;
  statusPanel.heightInPixels = 45;

  var statusOptions: { key: number, value: string }[] = [
    { key: 0, value: 'Active' },
    { key: 1, value: 'Inactive' }
  ];
  var statusDropdown = new (Dropdown as any)(statusPanel, "15px", "100px", "black", "white", "0px", "0px", statusOptions);
  statusOptions.forEach((optionElement: any) => {
    //statusDropdown.addOption(optionElement.key, optionElement.value, 'black', 'white');
  });
  // statusDropdown.top = "50px";
  panel.addControl(statusPanel);

uncommenting the addOption line throws the following error

setting top throws this error

any suggestions on how to properly use dropdown component with react
Thanks

[carolhmj]

Hello! It would be helpful if you can share your code as a Github project or CodeSandbox so we can look at it better