WIP React experiments

packages/controls/package.json

@@ -78,6 +78,8 @@
     "d3-format": "^0.5.1",
     "jquery": "^3.1.1",
     "jquery-ui": "^1.12.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "underscore": "^1.8.3"
   }
 }

packages/controls/src/dropdown.tsx

@@ -0,0 +1,85 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+    DescriptionView, DescriptionStyleModel
+} from './widget_description';
+
+import {
+    uuid
+} from './utils';
+
+import * as ReactDOM from 'react-dom';
+
+import * as React from 'react';
+
+export
+class DropdownView extends DescriptionView {
+    /**
+     * Called when view is rendered.
+     */
+    render() {
+        super.render();
+
+        this.el.classList.add('jupyter-widgets');
+        this.el.classList.add('widget-inline-hbox');
+        this.el.classList.add('widget-dropdown');
+
+        this.listbox = document.createElement('div');
+        this.label.htmlFor = uuid();
+        this.el.appendChild(this.listbox);
+        this.update();
+    }
+
+    update() {
+        let labels = this.model.get('_options_labels');
+        let selectedIndex = this.model.get('index');
+        let value = selectedIndex === null ? '' : selectedIndex;
+        let props = {
+            disabled: this.model.get('disabled'),
+            labels: this.model.get('_options_labels'),
+            selectedIndex: this.model.get('index'),
+            id: this.label.htmlFor,
+            handleChange: (event) => {
+                this.model.set('index', parseInt(event.target.value, 10));
+                this.touch();
+            }
+        };
+        ReactDOM.render(React.createElement(DropDown, props), this.listbox);
+    }
+
+    listbox: HTMLDivElement;
+}
+
+
+interface IProps {
+    disabled: boolean;
+    labels: string[];
+    id: string;
+    selectedIndex: number;
+    handleChange: (event: Event) => void;
+  }
+
+class DropDown extends React.Component<IProps, {}> {
+    render() {
+        let options = this.props.labels.map((label, index) => {
+            return (
+            <option value={index}>
+                {label.replace(/ /g, '\xa0')}
+            </option>);
+        });
+        let selectedIndex = this.props.selectedIndex;
+        let value = selectedIndex === null ? '' : selectedIndex;
+        return (
+            <select id={this.props.id}
+              value={value}
+              disabled={this.props.disabled}
+              onChange={this.props.handleChange}>
+              <option value='' disabled></option>
+            {options}
+            </select>
+        );
+    }
+
+    props: IProps;
+}

packages/controls/src/index.ts

@@ -18,5 +18,7 @@ export * from './widget_selectioncontainer';
 export * from './widget_string';
 export * from './widget_description';
 
+export * from './dropdown';
+
 export
 const version = (require('../package.json') as any).version;

packages/controls/src/tsconfig.json

@@ -8,7 +8,8 @@
     "module": "commonjs",
     "moduleResolution": "node",
     "target": "ES5",
-    "outDir": "../lib"
+    "outDir": "../lib",
+    "jsx": "react"
   },
   "exclude": ["typedoc.d.ts"]
 }

packages/controls/src/widget_selection.ts

@@ -62,7 +62,7 @@ class DropdownModel extends SelectionModel {
 // For the old code, see commit f68bfbc566f3a78a8f3350b438db8ed523ce3642
 
 export
-class DropdownView extends DescriptionView {
+class DropdownViewOld extends DescriptionView {
     /**
      * Public constructor.
      */