[refactored] ParallaxDemo to use JSS instead of AttachStreams

Reviewers: O2 Material Motion, O3 Material JavaScript platform reviewers, #material_motion Tags: #material_motion Differential Revision: http://codereview.cc/D3489
material-motion · Nov 30, 2018 · 18e9d60 · 18e9d60
1 parent ae27dad
commit 18e9d60
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 186 deletions.
diff --git a/packages/demos-react/src/JSSDemo.tsx b/packages/demos-react/src/JSSDemo.tsx
diff --git a/packages/demos-react/src/ParallaxDemo.tsx b/packages/demos-react/src/ParallaxDemo.tsx
@@ -16,6 +16,9 @@
 
 import * as React from 'react';
 
+import { create as createJSS, StyleSheet } from 'jss';
+import createDefaultJSSPreset from 'jss-preset-default';
+
 import {
   Axis,
   Draggable,
@@ -35,18 +38,22 @@ import {
   viewportDimensions$,
 } from 'material-motion';
 
-import {
-  AttachStreams,
-} from './AttachStreams';
-
-import {
-  TransformTarget,
-} from './TransformTarget';
+const jss = createJSS(createDefaultJSSPreset());
 
 export class ParallaxDemo extends React.Component<{}, {}> {
   foregroundStyle$ = createProperty({ initialValue: {} });
   backgroundStyle$ = createProperty({ initialValue: {} });
 
+  styleSheet = jss.createStyleSheet(
+    {
+      foreground: this.foregroundStyle$,
+      background: this.backgroundStyle$,
+    },
+    {
+      link: true,
+    },
+  ).attach();
+
   attachInteractions = (element: HTMLElement | null) => {
     if (element) {
       const {
@@ -80,9 +87,8 @@ export class ParallaxDemo extends React.Component<{}, {}> {
 
   render() {
     const {
-      backgroundStyle$,
-      foregroundStyle$,
-    } = this;
+      classes,
+    } = this.styleSheet;
 
     return (
       <div
@@ -97,25 +103,14 @@ export class ParallaxDemo extends React.Component<{}, {}> {
           }
         }
       >
-        <AttachStreams
-          style = { backgroundStyle$ }
-        >
-          <TransformTarget>
-            <RandomClouds
-              scale = { 3 }
-            />
-          </TransformTarget>
-        </AttachStreams>
-
-        <AttachStreams
-          style = { foregroundStyle$ }
-        >
-          <TransformTarget>
-            <RandomClouds
-              scale = { 5 }
-            />
-          </TransformTarget>
-        </AttachStreams>
+        <RandomClouds
+          className = { classes.background }
+          scale = { 3 }
+        />
+        <RandomClouds
+          className = { classes.foreground }
+          scale = { 5 }
+        />
       </div>
     );
   }
@@ -129,11 +124,13 @@ class RandomClouds extends React.Component<{ scale: number }, {}> {
 
   render() {
     const {
+      className,
       scale,
     } = this.props;
 
     return (
       <div
+        className = { className }
         style = {
           {
             position: 'relative',

diff --git a/packages/demos-react/src/routes.tsx b/packages/demos-react/src/routes.tsx
@@ -23,7 +23,6 @@ import Router from 'react-router/BrowserRouter';
 
 // import ExampleMain from './example/components/ExampleMain';
 import ArticulableFinger from './ArticulableFinger';
-import JSSDemo from './JSSDemo';
 import ParallaxDemo from './ParallaxDemo';
 import QuickiePointerEventTest from './QuickiePointerEventTest';
 import SwipeableDemo from './SwipeableDemo';
@@ -57,11 +56,6 @@ const links = [
     name: 'ParallaxDemo',
     component: ParallaxDemo,
   },
-  {
-    href: '/parallax-jss/',
-    name: 'JSSDemo',
-    component: JSSDemo,
-  },
   {
     href: '/pointer-events/',
     name: 'QuickiePointerEventTest',