border-radius as prop for View #117 (#122)

* add ListView docs

* Add borderRadius prop for View

* update Sidebar.js

* remove ListView and SectionList components from docs

Author: hayanisaid

packages/app/src/Sidebar.js

@@ -23,6 +23,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 40,
     top: 100,
+    borderRadius: 10,
     lineHeight: 40,
   },
 });

packages/docs/components-sectionlist.md

@@ -66,6 +66,31 @@ describe('Layout test', () => {
         }
       }
 
+      render(<Layout />, canvas, () => testCanvasSnapshot(expect, canvas));
+    });
+    test('Test 2 View with BorderRadius', () => {
+      const canvas = document.createElement('canvas');
+      canvas.height = 600;
+      canvas.width = 600;
+      class Layout extends React.Component {
+        render() {
+          return (
+            <View>
+              <View
+                style={{
+                  width: 60,
+                  left: 100,
+                  top: 0,
+                  height: 60,
+                  borderRadius: 8,
+                  backgroundColor: 'white',
+                }}
+              />
+            </View>
+          );
+        }
+      }
+
       render(<Layout />, canvas, () => testCanvasSnapshot(expect, canvas));
     });
   });

packages/react-ape/__tests__/layout-test.js

@@ -69,8 +69,33 @@ class View {
     if (this.previousRect) {
       const previousStroke = ctx.strokeStyle;
       ctx.beginPath();
-      const {x, y, width, height} = this.previousRect;
-      ctx.rect(x, y, width, height);
+      const {x, y, width, height, cornerRadius} = this.previousRect;
+      // ctx.rect(x, y, width, height);
+      // Ref: https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-using-html-canvas
+      ctx.moveTo(x, y);
+      /**
+        *  Top Right Radius
+        */
+      ctx.lineTo(x + width - cornerRadius, y);
+      ctx.quadraticCurveTo(x + width, y, x + width, y + cornerRadius);
+      /**
+        *  Bottom right Radius
+        */
+      ctx.lineTo(x + width, y + height - cornerRadius);
+      ctx.quadraticCurveTo(
+        x + width,
+        y + height,
+        x + width - cornerRadius,
+        y + height
+      );
+      /**
+        *  Bottom Left Radius
+        */
+      ctx.lineTo(x + cornerRadius, y + height);
+      ctx.quadraticCurveTo(x, y + height, x, y + height - cornerRadius);
+      /** Top left Radius */
+      ctx.lineTo(x, y + cornerRadius);
+      ctx.quadraticCurveTo(x, y, x + cornerRadius, y);
       ctx.strokeStyle = style.backgroundColor || 'transparent';
       ctx.fillStyle = style.backgroundColor || 'transparent';
       ctx.fill();
@@ -89,6 +114,9 @@ class View {
     const width = style.width || ViewDefaults.size;
     const height = style.height || ViewDefaults.size;
 
+    // Draw borderRadius
+    const cornerRadius = style.borderRadius || 0;
+
     if (!style.position || style.position === 'relative') {
       const surfaceHeight = getSurfaceHeight();
       y = surfaceHeight;
@@ -97,8 +125,33 @@ class View {
 
     ctx.globalCompositeOperation = 'destination-over';
     ctx.beginPath();
-    ctx.rect(x, y, width, height);
-    this.previousRect = {x, y, width, height};
+    // ctx.rect(x, y, width, height);
+    // Ref: https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-using-html-canvas
+    ctx.moveTo(x, y);
+    /**
+          *  Top Right Radius
+          */
+    ctx.lineTo(x + width - cornerRadius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + cornerRadius);
+    /**
+          *  Bottom right Radius
+          */
+    ctx.lineTo(x + width, y + height - cornerRadius);
+    ctx.quadraticCurveTo(
+      x + width,
+      y + height,
+      x + width - cornerRadius,
+      y + height
+    );
+    /**
+          *  Bottom Left Radius
+          */
+    ctx.lineTo(x + cornerRadius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - cornerRadius);
+    /** Top left Radius */
+    ctx.lineTo(x, y + cornerRadius);
+    ctx.quadraticCurveTo(x, y, x + cornerRadius, y);
+    this.previousRect = {x, y, width, height, cornerRadius};
     ctx.strokeStyle = style.borderColor || 'transparent';
     ctx.fillStyle = style.backgroundColor || 'transparent';
     ctx.fill();

packages/react-ape/renderer/elements/View.js

@@ -9,6 +9,7 @@ describe('View', () => {
       top: 10,
       left: 100,
       position: 'absolute',
+      borderRadius: 10,
       backgroundColor: 'green',
     };
     const props = {style, children: 'My Amazing Text'};
@@ -33,6 +34,9 @@ describe('View', () => {
         stroke: jest.fn(),
         rect: jest.fn(),
         closePath: jest.fn(),
+        moveTo: jest.fn(),
+        lineTo: jest.fn(),
+        quadraticCurveTo: jest.fn(),
       },
       getSurfaceHeight: () => 0,
       setSurfaceHeight: () => {},
@@ -63,6 +67,7 @@ describe('View', () => {
       style: {
         backgroundColor: 'green',
         borderColor: 'white',
+        borderRadius: 10,
         left: 100,
         lineHeight: 24,
         position: 'absolute',
@@ -98,6 +103,9 @@ describe('View', () => {
         stroke: jest.fn(),
         rect: jest.fn(),
         closePath: jest.fn(),
+        moveTo: jest.fn(),
+        lineTo: jest.fn(),
+        quadraticCurveTo: jest.fn(),
       },
       getSurfaceHeight: () => 0,
       setSurfaceHeight: () => {},
@@ -110,11 +118,17 @@ describe('View', () => {
       beginPath,
       closePath,
       fillStyle,
+      moveTo,
+      lineTo,
+      quadraticCurveTo,
       globalCompositeOperation,
     } = apeContext.ctx;
 
     expect(beginPath.mock.calls.length).toBe(1);
     expect(closePath.mock.calls.length).toBe(1);
+    expect(moveTo.mock.calls.length).toBe(1);
+    expect(lineTo.mock.calls.length).toBe(4);
+    expect(quadraticCurveTo.mock.calls.length).toBe(4);
     expect(beginPath).toBeCalledWith();
     expect(closePath).toBeCalledWith();
 

packages/react-ape/renderer/elements/__tests__/View-test.js

@@ -16,8 +16,7 @@
     "Components": [
       "components-image",
       "components-text",
-      "components-view",
-      "components-sectionlist"
+      "components-view"
     ],
     "APIs": [
       "apis-dimensions",