intial approach for style hierarchy fix

raphamorim · raphamorim · commit d01f06b8543a · 2022-06-22T06:54:50.000+02:00
diff --git a/packages/app/src/App.js b/packages/app/src/App.js
@@ -55,14 +55,35 @@ class App extends Component {
       return null;
     }
 
+    // First problem: Text style hierarchy doesn't work (it should render in orange)
+    // Second problem: View positions aren't correctly geometrically
+    // Third problem: View backgroundColor isn't correct, 2nd View should have same bgc as 1st
+    //   and also 4th should have same as 3rd
     return (
-      <View style={styles.surface}>
-        <Clock />
-        <Sidebar />
-        <Slideshow />
-        <Grid />
+      <View style={{width: 80, height: 80, backgroundColor: 'grey', color: 'orange'}}>
+        <View>
+          <View style={{width: 80, height: 80, backgroundColor: 'powderblue'}}>
+            <View
+              style={{
+                width: 30,
+                height: 30
+              }}
+            >
+              <Text>should be in orange</Text>
+            </View>
+          </View>
+        </View>
       </View>
     );
+
+    // return (
+      // <View style={styles.surface}>
+      //   <Clock />
+      //   <Sidebar />
+      //   <Slideshow />
+      //   <Grid />
+      // </View>
+    // );
   }
 }
 
diff --git a/packages/app/src/Sidebar.js b/packages/app/src/Sidebar.js
@@ -63,8 +63,11 @@ class Sidebar extends Component {
           text="Rio de Janeiro"
           idx={120}
         />
-        <FocusableItem focusKey="sidebar-item-2" text="Kyoto" idx={160} />
+        <FocusableItem focusKey="sidebar-item-2" text="京都" idx={160} />
         <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
+        <FocusableItem focusKey="sidebar-item-4" text="Phoenix" idx={240} />
+        <FocusableItem focusKey="sidebar-item-5" text="नई दिल्ली" idx={280} />
+        <FocusableItem focusKey="sidebar-item-6" text="Cusco" idx={320} />
         {/*</View>*/}
       </View>
     );
diff --git a/packages/react-ape/__tests__/layout-test.js b/packages/react-ape/__tests__/layout-test.js
@@ -3,7 +3,7 @@ import {render, View} from '../reactApeEntry';
 import testCanvasSnapshot from '../../../tests/testCanvasSnapshot';
 
 describe('Layout test', () => {
-  describe('Test "relative" and "absolute" <Views/>', () => {
+  describe('Test "relative" and "absolute" Views', () => {
     test('Test 5 views with different positions (4 relative and 1 absolute)', () => {
       const canvas = document.createElement('canvas');
       canvas.height = 600;
@@ -68,6 +68,8 @@ describe('Layout test', () => {
 
       render(<Layout />, canvas, () => testCanvasSnapshot(expect, canvas));
     });
+  });
+  describe('BorderRadius', () => {
     test('Test 2 View with BorderRadius', () => {
       const canvas = document.createElement('canvas');
       canvas.height = 600;
diff --git a/packages/react-ape/renderer/core/render.js b/packages/react-ape/renderer/core/render.js
@@ -23,17 +23,16 @@ function renderApeQueue(
 ) {
   if (apeContextGlobal && apeContextGlobal.renderQueue.length) {
     const queue = apeContextGlobal.renderQueue;
-    let req;
 
+    let reqId;
     const frame = () => {
-      req = requestAnimationFrame(frame);
-      const element = queue.shift();
-      element.render(apeContextGlobal, element.parentLayout);
+      if (queue.length) {
+        const element = queue.shift();
+        element.render(apeContextGlobal, element.parentLayout);
 
-      requestAnimationFrame(frame);
-
-      if (!queue.length) {
-        cancelAnimationFrame(req);
+        reqId = requestAnimationFrame(frame);
+      } else {
+        cancelAnimationFrame(reqId);
         onFinish();
       }
     };
diff --git a/tests/setup.js b/tests/setup.js
@@ -6,6 +6,8 @@ const jsdom = new JSDOM('<!doctype html><html><body></body></html>', {
   url: 'http://localhost/',
 });
 const { window } = jsdom;
+window.requestAnimationFrame = (cb) => window.setTimeout(cb, 1000 / 60);
+window.cancelAnimationFrame = () => null;
 
 function copyProps(src, target) {
   const props = Object.getOwnPropertyNames(src)
