feat: Remove ScrollReveal for window scope

myxvisual · Aug 8, 2017 · 45c6c98 · 45c6c98
1 parent e538f3a
commit 45c6c98
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 112 deletions.
diff --git a/docs/src/routes/Home/index.tsx b/docs/src/routes/Home/index.tsx
@@ -37,9 +37,9 @@ export default class Home extends React.Component<HomeProps, HomeState> {
   };
 
   componentDidMount() {
-    if (!newWindow.__REACT_UWP__.showedToast) {
+    if (!newWindow.__REACT_UWP__showedToast) {
       this.showToastTimer = setTimeout(() => {
-        newWindow.__REACT_UWP__.showedToast = true;
+        newWindow.__REACT_UWP__showedToast = true;
         this.setState({ showToast: true });
 
         this.showToastTimer = setTimeout(() => {

diff --git a/docs/tsconfig.build.json b/docs/tsconfig.build.json
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "tslint": "^5.2.0",
     "tslint-eslint-rules": "^4.1.1",
     "tslint-no-circular-imports": "^0.1.0",
-    "typescript": "^2.3.4"
+    "typescript": "^2.4.1"
   },
   "dependencies": {
     "@types/core-js": "^0.9.41",

diff --git a/src/ScrollReveal/index.tsx b/src/ScrollReveal/index.tsx
@@ -65,21 +65,13 @@ export class ScrollReveal extends React.Component<ScrollRevealProps> {
   animated: boolean = false;
 
   componentDidMount() {
-    const newWindow = window as ReactUWP.Window;
-    if (!newWindow.__REACT_UWP__) {
-      newWindow.__REACT_UWP__ = {};
-    }
-    if (!newWindow.__REACT_UWP__.scrollReveals) {
-      newWindow.__REACT_UWP__.scrollReveals = [];
-    }
-
-    this.rootElm = findDOMNode(this) as HTMLElement;
-    newWindow.__REACT_UWP__.scrollReveals.push(this as any);
+    this.rootElm = findDOMNode(this);
+    this.context.theme.scrollReveals.push(this as any);
   }
 
   componentWillUnmount() {
-    const newWindow = window as ReactUWP.Window;
-    newWindow.__REACT_UWP__.scrollReveals.splice(newWindow.__REACT_UWP__.scrollReveals.indexOf(this as any), 1);
+    const { scrollReveals } = this.context.theme;
+    scrollReveals.splice(scrollReveals.indexOf(this as any), 1);
   }
 
   setEnterStyle = () => {

diff --git a/src/Theme/index.tsx b/src/Theme/index.tsx
@@ -194,6 +194,7 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
       addToast: this.addToast,
       updateToast: this.updateToast,
       deleteToast: this.deleteToast,
+      scrollRevealListener: this.handleScrollReveal,
       generateAcrylicTextures: this.generateAcrylicTextures,
       forceUpdateTheme: this.forceUpdateTheme,
       styleManager
@@ -217,12 +218,6 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
   }
 
   componentDidMount() {
-    const newWindow = window as ReactUWP.Window;
-    if (!newWindow.__REACT_UWP__) newWindow.__REACT_UWP__ = {};
-    if (!newWindow.__REACT_UWP__.scrollReveals) {
-      newWindow.__REACT_UWP__.scrollReveals = [];
-    }
-
     const { currTheme } = this.state;
 
     if (IS_NODE_ENV && this.props.autoSaveTheme) {
@@ -369,38 +364,37 @@ export class Theme extends React.Component<ThemeProps, ThemeState> {
   }
 
   handleScrollReveal = (e?: Event) => {
-    const newWindow = window as ReactUWP.Window;
-    if (newWindow.__REACT_UWP__ && newWindow.__REACT_UWP__.scrollReveals) {
-      for (const scrollReveal of newWindow.__REACT_UWP__.scrollReveals) {
-        const {
-          rootElm,
-          animated,
-          setEnterStyle,
-          setLeaveStyle,
-          props: {
-            topOffset,
-            bottomOffset
-          }
-        } = scrollReveal;
-        const { top, height } = rootElm.getBoundingClientRect();
-        const { innerHeight } = window;
-
-        let isIn = false;
-        if (height > innerHeight) {
-          isIn = top < innerHeight - height * height && top > - height * 0.5;
-        } else {
-          isIn = top > 0 + topOffset && top + height + bottomOffset < innerHeight;
+    const { currTheme } = this.state;
+    for (const scrollReveal of currTheme.scrollReveals) {
+      const {
+        rootElm,
+        animated,
+        setEnterStyle,
+        setLeaveStyle,
+        props: {
+          topOffset,
+          bottomOffset
         }
-        if (isIn) {
-          if (!animated) {
-            setEnterStyle();
-            scrollReveal.animated = true;
-          }
-        } else {
-          if (animated) {
-            setLeaveStyle();
-            scrollReveal.animated = false;
-          }
+      } = scrollReveal;
+      if (!rootElm) return;
+      const { top, height } = rootElm.getBoundingClientRect();
+      const { innerHeight } = window;
+
+      let isIn = false;
+      if (height > innerHeight) {
+        isIn = top < innerHeight - height * height && top > - height * 0.5;
+      } else {
+        isIn = top > 0 + topOffset && top + height + bottomOffset < innerHeight;
+      }
+      if (isIn) {
+        if (!animated) {
+          setEnterStyle();
+          scrollReveal.animated = true;
+        }
+      } else {
+        if (animated) {
+          setLeaveStyle();
+          scrollReveal.animated = false;
         }
       }
     }

diff --git a/src/styles/getTheme.ts b/src/styles/getTheme.ts
@@ -82,6 +82,9 @@ export default function getTheme(themeConfig?: ThemeConfig): ReactUWP.ThemeType
       background: altMediumHigh
     },
 
+    scrollReveals: [],
+    scrollRevealListener: void 0,
+
     accent,
     accentLighter1: lighten(accentColor.toHexString(), 0.5),
     accentLighter2: lighten(accentColor.toHexString(), 0.7),

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -9,26 +9,18 @@
 
 export as namespace ReactUWP;
 
-export interface Window {
-  __REACT_UWP__?: {
-    baseCSSRequired?: boolean;
-    version?: string;
-    docRootPath?: string;
-    scrollReveals?: {
-      rootElm?: HTMLElement;
-      animated?: boolean;
-      setEnterStyle?: () => void;
-      setLeaveStyle: () => void;
-      props: {
-        speed?: number;
-        style?: React.CSSProperties;
-        animatedStyle?: React.CSSProperties;
-        children?: React.ReactElement<any>;
-        topOffset?: number;
-        bottomOffset?: number;
-      }
-    }[];
-    scrollRevealListener?: (e?: Event) => void;
+export interface ScrollReveal {
+  rootElm?: HTMLElement;
+  animated?: boolean;
+  setEnterStyle?: () => void;
+  setLeaveStyle: () => void;
+  props: {
+    speed?: number;
+    style?: React.CSSProperties;
+    animatedStyle?: React.CSSProperties;
+    children?: React.ReactElement<any>;
+    topOffset?: number;
+    bottomOffset?: number;
   }
 }
 
@@ -40,13 +32,16 @@ export interface AcrylicTexture {
   noiseOpacity?: number;
   background?: string;
 }
+
 export interface ThemeType {
   themeName?: "dark" | "light";
   fonts?: {
     sansSerifFonts?: string;
     segoeMDL2Assets?: string;
   };
   styleManager?: any;
+  scrollReveals?: ScrollReveal[];
+  scrollRevealListener?: (e?: Event) => void;
 
   useFluentDesign?: boolean;
   desktopBackgroundImage?: string;