Workiva · greglittlefield-wf · Apr 3, 2019 · Dec 29, 2016 · Dec 29, 2016 · Dec 30, 2016
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ pubspec.lock
 .packages
 node_modules/
 .dart_tool
+.vscode
diff --git a/example/index.html b/example/index.html
@@ -49,6 +49,9 @@ <h2 class="display-5">Use Case / Test Examples</h2>
         <li>
           <a href="test/unmount_test.html"><code>unmountComponentAtNode</code> test</a>
         </li>
+        <li>
+          <a href="js_components/index.html"><code>JsComponents</code> Example</a>
+        </li>
       </ul>
 
     </div>

diff --git a/example/js_components/index.html b/example/js_components/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>JS Components - react-dart Examples</title>
+    <style>
+        #content {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <em>See Dart source for more info</em>
+
+    <div id="content"></div>
+
+    <script src="packages/react/react.js"></script>
+    <script src="packages/react/react_dom.js"></script>
+    <script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+
+    <!-- This Babel script could be replaced with a webpack or some other build process -->
+    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
+
+    <!-- Where the JS React components are declared. -->
+    <script type="text/babel" src="js_components.js"></script>
+    <script defer src="js_components.dart.js"></script>
+
+</body>
+</html>
diff --git a/example/js_components/js_components.dart b/example/js_components/js_components.dart
@@ -0,0 +1,155 @@
+@JS()
+library js_components;
+
+import 'dart:html';
+
+import 'package:js/js.dart';
+import 'package:react/react.dart' as react;
+import 'package:react/react_client.dart';
+import 'package:react/react_client/react_interop.dart';
+import 'package:react/react_dom.dart' as react_dom;
+
+var fooRef;
+
+main() {
+  setClientConfiguration();
+
+  var content = IndexComponent({});
+
+  react_dom.render(content, querySelector('#content'));
+}
+
+var IndexComponent = react.registerComponent(() => new _IndexComponent());
+
+class _IndexComponent extends react.Component2 {
+  getInitialState() => {
+        'open': false,
+      };
+
+  handleClose(_) {
+    this.setState({
+      'open': false,
+    });
+  }
+
+  handleClick(_) {
+    this.setState({
+      'open': true,
+    });
+    print((simpleRef as SimpleCustomComponent).getFoo());
+  }
+
+  SimpleCustomComponent simpleRef;
+
+  render() {
+    return MuiThemeProvider({
+      'theme': theme
+    }, [
+      react.div({}, [
+        SimpleCustom({
+          'foo': 'Foo Prop from dart... IN A JAVASCRIPT COMPONENT!',
+          'ref': (ref) {
+            simpleRef = ref;
+          }
+        }),
+        CssBaseline({}),
+        Dialog({
+          'open': state['open'],
+          'onClose': handleClose
+        }, [
+          DialogTitle({}, ['Super Secret Password']),
+          DialogContent({}, [
+            DialogContentText({}, '1-2-3-4-5'),
+          ]),
+          DialogActions({}, [
+            Button({
+              'color': "primary",
+              'onClick': handleClose
+            }, [
+              'OK',
+            ]),
+          ])
+        ]),
+        Typography({
+          'variant': "h4",
+          'gutterBottom': true
+        }, [
+          'Material-UI',
+        ]),
+        Typography({
+          'variant': "subtitle1",
+          'gutterBottom': true
+        }, [
+          'example project',
+        ]),
+        Button({
+          'variant': "contained",
+          'color': "secondary",
+          'onClick': handleClick
+        }, [
+          Icon({}, ['fingerprint']),
+          'Super Secret Password',
+        ]),
+      ])
+    ]);
+  }
+}
+
+/// The JS component class.
+///
+/// Private since [SimpleCustomComponent] will be used instead.
+///
+/// Accessible via `SimpleCustomComponent.type`.
+@JS()
+external ReactClass get _SimpleCustomComponent;
+
+/// A factory for the "_SimpleJsModalContent" JS components class that allows it
+/// to be used via Dart code.
+///
+/// Use this to render instances of the component from within Dart code.
+///
+/// This converts the Dart props [Map] passed into it in the
+/// the same way props are converted for DOM components.
+final SimpleCustom = new ReactJsComponentFactoryProxy(_SimpleCustomComponent);
+
+/// JS interop wrapper class for the component,
+/// allowing us to interact with component instances
+/// made available via refs or [react_dom.render] calls.
+///
+/// This is optional, as you won't always need to access the component's API.
+@JS('_SimpleCustomComponent')
+class SimpleCustomComponent {
+  external String getFoo();
+}
+
+/// JS interop wrapper class for Material UI
+/// getting us access to the react classes
+@JS('material-ui')
+class MaterialUI {
+  external static ReactClass get Button;
+  external static ReactClass get CssBaseline;
+  external static ReactClass get Dialog;
+  external static ReactClass get DialogActions;
+  external static ReactClass get DialogContent;
+  external static ReactClass get DialogContentText;
+  external static ReactClass get DialogTitle;
+  external static ReactClass get Icon;
+  external static ReactClass get MuiThemeProvider;
+  external static ReactClass get Typography;
+}
+
+/// JS Interop to get theme config we setup in JS
+@JS()
+external Map get theme;
+
+// All the Material UI components converted to dart Components
+final Button = new ReactJsComponentFactoryProxy(MaterialUI.Button);
+final CssBaseline = new ReactJsComponentFactoryProxy(MaterialUI.CssBaseline);
+final Dialog = new ReactJsComponentFactoryProxy(MaterialUI.Dialog);
+final DialogActions = new ReactJsComponentFactoryProxy(MaterialUI.DialogActions);
+final DialogContent = new ReactJsComponentFactoryProxy(MaterialUI.DialogContent);
+final DialogContentText = new ReactJsComponentFactoryProxy(MaterialUI.DialogContentText);
+final DialogTitle = new ReactJsComponentFactoryProxy(MaterialUI.DialogTitle);
+final Icon = new ReactJsComponentFactoryProxy(MaterialUI.Icon);
+final MuiThemeProvider = new ReactJsComponentFactoryProxy(MaterialUI.MuiThemeProvider);
+final Typography = new ReactJsComponentFactoryProxy(MaterialUI.Typography);
diff --git a/example/js_components/js_components.js b/example/js_components/js_components.js
@@ -0,0 +1,33 @@
+const {createMuiTheme, colors} = window['material-ui'];
+
+const theme = createMuiTheme({
+  palette: {
+    primary: {
+      light: colors.purple[300],
+      main: colors.purple[500],
+      dark: colors.purple[700],
+    },
+    secondary: {
+      light: colors.green[300],
+      main: colors.green[500],
+      dark: colors.green[700],
+    },
+  },
+  typography: {
+    useNextVariants: true,
+  },
+});
+
+class _SimpleCustomComponent extends React.Component {
+  render() {
+    return (
+      [
+        'This is some content to show that custom JS components also work!',
+      ]
+    );
+  }
+
+  getFoo() {
+    return this.props.foo;
+  }
+}
diff --git a/example/test/context_test.dart b/example/test/context_test.dart
@@ -1,5 +1,6 @@
 import 'dart:html';
 
+import 'package:react/react.dart' as react;
 import 'package:react/react_dom.dart' as react_dom;
 import 'package:react/react_client.dart';
 
@@ -9,23 +10,27 @@ void main() {
   setClientConfiguration();
 
   react_dom.render(
-      contextComponent({}, [
-        contextConsumerComponent({'key': 'consumerComponent'}),
-      ]),
-      querySelector('#content'));
-
-  react_dom.render(
-      contextComponent({}, [
-        contextConsumerComponent({'key': 'consumerComponent'}),
-      ]),
-      querySelector('#content'));
-
-  react_dom.render(
-      contextComponent({}, [
-        contextConsumerComponent({
-          'key': 'consumerComponent'
+      react.div({}, [
+        react.h1({}, ['React Legacy Context API']),
+        legacyContextComponent({}, [
+          legacyContextConsumerComponent({
+            'key': 'consumerComponent'
+          }, [
+            grandchildLegacyContextConsumerComponent({'key': 'legacyConsumerGrandchildComponent'})
+          ]),
+        ]),
+        react.h1({'key': 'h1'}, ['React New Context API']),
+        newContextProviderComponent({
+          'key': 'newProviderComponent'
         }, [
-          grandchildContextConsumerComponent({'key': 'consumerGrandchildComponent'})
+          newContextConsumerComponent({
+            'key': 'newConsumerComponent',
+          }),
+          newContextConsumerObservedBitsComponent({
+            'key': 'newConsumerObservedBitsComponent',
+            'unstable_observedBits': (1 << 2),
+          }),
+          newContextTypeConsumerComponentComponent({'key': 'newContextTypeConsumerComponent'}, []),
         ]),
       ]),
       querySelector('#content'));
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,6 +49,9 @@ <h2 class="display-5">Use Case / Test Examples</h2> @@
             <li>
               <a href="test/unmount_test.html"><code>unmountComponentAtNode</code> test</a>
             </li>
+            <li>
+              <a href="js_components/index.html"><code>JsComponents</code> Example</a>
+            </li>
           </ul>
         </div>
@@ Expand Down @@