Button component

packages/app/src/Sidebar.js

@@ -4,6 +4,7 @@ import {
   View,
   Dimensions,
   StyleSheet,
+  Button,
   registerComponent,
   withFocus,
 } from '../../react-ape/reactApeEntry';
@@ -58,13 +59,22 @@ class Sidebar extends Component {
     return (
       <View style={styles.sidebar}>
         {/*<View style={styles.container}>*/}
+        <Button
+          color={'#000'}
+          title="Click Me 🚀"
+          onClick={() => {
+            alert('hi');
+          }}
+        />
+
         <FocusableItem
           focusKey="sidebar-item-1"
           text="Rio de Janeiro"
           idx={120}
         />
         <FocusableItem focusKey="sidebar-item-2" text="Kyoto" idx={160} />
         <FocusableItem focusKey="sidebar-item-3" text="Stockholm" idx={200} />
+
         {/*</View>*/}
       </View>
     );

packages/docs/components-button.md

@@ -0,0 +1,29 @@
+---
+id: components-button
+title: Button
+sidebar_label: Button
+---
+
+
+A component for creating a Button.
+
+The following example shows how to render a Button.
+```JS
+import React from "react";
+import { Button, View, render } from "react-ape";
+
+class ImageExample extends React.Component {
+  render() {
+    return (
+      <View>
+        <Button
+         title="Click Me"
+         color="#2196F3'"
+         onClick ={()=>{}}
+        />
+      </View>
+    );
+  }
+}
+```
+<iframe src="https://codesandbox.io/embed/24zmzm07my?hidenavigation=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

packages/react-ape/reactApeEntry.js

@@ -25,6 +25,7 @@ export const render = ReactApeRenderer.render;
 export const Image = 'Image';
 export const View = 'View';
 export const Text = 'Text';
+export const Button = 'Button';
 
 export const StyleSheet = StyleSheetModule;
 export const Dimensions = DimensionsModule;

packages/react-ape/renderer/constants/index.js

@@ -12,6 +12,28 @@ export const ViewDefaults = {
   size: 200, // 200x200
   lineHeight: 24,
 };
+export const ButtonDefaults = {
+  containerStyle: {
+    width: 85,
+    elevation: 4,
+    height: 30,
+    backgroundColor: '#2196F3',
+    borderRadius: 2,
+  },
+  textStyle: {
+    textAlign: 'center',
+    margin: 8,
+    color: 'white',
+    fontSize: 18,
+  },
+  buttonDisabled: {
+    elevation: 0,
+    backgroundColor: '#dfdfdf',
+  },
+  textDisabled: {
+    color: '#cdcdcd',
+  },
+};
 
 // ReactApe Internal Constants
 export const _SectionBlockSize: number = 80; // 80x80

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

@@ -0,0 +1,199 @@
+/**
+ * @https://github.com/facebook/react-native/blob/main/Libraries/Components/Button.js
+ *
+ * @flow
+ *
+ */
+
+import {ButtonDefaults} from '../constants';
+import {trackMousePosition, isMouseInside} from '../utils';
+import type {CanvasComponentContext} from '../types';
+
+//TODO adjust Opacity when focus, Blur
+type PressEvent = {||};
+type ButtonProps = {|
+  title: string,
+  onPress: (event?: PressEvent) => mixed,
+  onClick: (event?: SyntheticMouseEvent<HTMLButtonElement>) => mixed,
+  //handleOnClick:(event?:SyntheticMouseEvent<HTMLButtonElement>)=>mixed,
+  touchSoundDisabled?: ?boolean,
+  color?: ?string,
+  /**
+   * TV next focus down (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusDown?: ?number,
+  /**
+   * TV next focus forward (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusForward?: ?number,
+
+  /**
+   * TV next focus left (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusLeft?: ?number,
+
+  /**
+    * TV next focus right (see documentation for the View component).
+    *
+    * @platform android
+    */
+  nextFocusRight?: ?number,
+
+  /**
+    * TV next focus up (see documentation for the View component).
+    *
+    * @platform android
+    */
+  nextFocusUp?: ?number,
+
+  /**
+    * Text to display for blindness accessibility features
+    */
+  accessibilityLabel?: ?string,
+
+  /**
+    * If true, disable all interactions for this component.
+    */
+  disabled?: ?boolean,
+  getDimension?: () => mixed,
+  /**
+    * Used to locate this view in end-to-end tests.
+    */
+  testID?: ?string,
+|};
+
+function renderButton(
+  props: ButtonProps,
+  apeContext: CanvasComponentContext,
+  parentLayout
+) {
+  const {ctx} = apeContext;
+
+  // If is relative and x and y haven't be processed, don't render
+  // start drawing the canvas
+  console.log('[PROPS]', props);
+  const {title, color} = props;
+  if (!title) {
+    throw Error('Title required!');
+  }
+  const borderRadius = ButtonDefaults.containerStyle.borderRadius;
+  const backgroundColor = ButtonDefaults.containerStyle.backgroundColor;
+  let x = 40;
+  let y = 300;
+
+  const textWidth = ctx.measureText(title).width;
+  let width = textWidth * 1.5;
+  let height = ButtonDefaults.containerStyle.height;
+  let globalStyle = {
+    width: width,
+    height: height,
+    color: color,
+    borderRadius: borderRadius,
+    backgroundColor: color,
+    lineWidth: 0,
+    borderColor: 'transparent',
+  };
+  const resetStyle = newStyle => {
+    globalStyle = {...globalStyle, newStyle};
+  };
+  // const redrawButton = ctx => {
+  //   // TODO reset Style on focus
+  //   let newStyle = {
+  //     lineWidth: 2,
+  //     borderColor: '#ccc',
+  //   };
+  //   resetStyle(newStyle);
+  // };
+
+  ctx.beginPath();
+  ctx.fillStyle = color || ButtonDefaults.containerStyle.backgroundColor;
+  ctx.moveTo(x, y);
+  /**
+*  Top Right Radius
+*/
+  ctx.lineTo(x + width - borderRadius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
+  /**
+*  Bottom right Radius
+*/
+
+  ctx.lineTo(x + width, y + height - borderRadius);
+  ctx.quadraticCurveTo(
+    x + width,
+    y + height,
+    x + width - borderRadius,
+    y + height
+  );
+
+  /**
+*  Bottom Left Radius
+*/
+  ctx.lineTo(x + borderRadius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
+  /** Top left Radius */
+  ctx.lineTo(x, y + borderRadius);
+  ctx.quadraticCurveTo(x, y, x + borderRadius, y);
+
+  ctx.fill();
+  ctx.lineWidth = globalStyle.lineWidth;
+  ctx.strokeStyle = globalStyle.borderColor;
+  ctx.stroke();
+  ctx.fillStyle = ButtonDefaults.textStyle.color;
+
+  //set the fontSize
+  const fontArgs = ctx.font.split(' ');
+  const newSize = `${ButtonDefaults.textStyle.fontSize}px`;
+  ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1];
+
+  // ctx.textAlign = 'center';
+
+  // ctx.fillText(title,  400 / 2, y + height / 2,textWidth);
+  ctx.fillText(title, x + textWidth / 2.5, y + height / 2);
+  ctx.closePath();
+  // if(props.handleOnClick){
+  // onClick()
+  // }
+
+  // const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+  //   const rect = {
+  //     x,
+  //     y,
+  //     height,
+  //     width,
+  //   };
+  //   const mousePosition = trackMousePosition(ctx.canvas, event);
+  //   if (isMouseInside(mousePosition, rect)) {
+  //     redrawButton(ctx);
+  //     if (props.onClick && typeof props.onClick === 'function') {
+  //       props.onClick(event);
+  //     }
+  //   }
+  // };
+
+  // TODO:
+  /**
+ * We need to remove addEventListeners from the renderButton 
+ * function because this function runs for each state/prop update.
+ *  It will keep creating/refreshing listeners for every render.
+
+We can keep this way, if we run this addEventListener 
+once by checking if the listener already exist. 
+Note onClick will need to share scope with this function to work properly.
+ */
+  // ctx.canvas.addEventListener('click', onClick, false);
+  // ctx.canvas.addEventListener('focus', redrawButton);
+  // ctx.canvas.addEventListener('blur', redrawButton);
+}
+
+export default function createButtonInstance(props: ButtonProps): mixed {
+  return {
+    type: 'Button',
+    render: renderButton.bind(this, props),
+  };
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {ButtonDefaults} from '../../constants';
+import CreateButtonInstance from '../Button';
+
+describe('Button', () => {
+  describe('Call the button with Props', () => {
+    it('Should render properly', () => {
+      const title = 'Press Me';
+      const color = '#f8a978';
+      const x = 40;
+      const y = 300;
+      const width = x + y;
+      const height = ButtonDefaults.containerStyle.height;
+      const props = {title, color};
+      const apeContext = {
+        ctx: {
+          beginPath: jest.fn(),
+          fillStyle: jest.fn(),
+          moveTo: jest.fn(),
+          fillText: jest.fn(),
+          fill: jest.fn(),
+          stroke: jest.fn(),
+          closePath: jest.fn(),
+          lineTo: jest.fn(),
+          quadraticCurveTo: jest.fn(),
+          font: 'Helvetica',
+          measureText: jest.fn(() => {
+            return {
+              width: 100,
+            };
+          }),
+          canvas: {
+            addEventListener: jest.fn(),
+          },
+        },
+      };
+
+      const Button = CreateButtonInstance(props);
+      Button.render(apeContext, {spatialGeometry: {x, y}});
+      const {
+        beginPath,
+        fillStyle,
+        moveTo,
+        fillText,
+        fill,
+        stroke,
+        closePath,
+        lineTo,
+        quadraticCurveTo,
+        font,
+      } = apeContext.ctx;
+      expect(beginPath.mock.calls.length).toBe(1);
+      expect(beginPath).toBeCalledWith();
+      expect(closePath).toBeCalledWith();
+      expect(stroke).toBeCalledWith();
+      expect(moveTo).toBeCalledWith(x, y);
+      expect(lineTo.mock.calls.length).toEqual(4);
+      expect(fill.mock.calls.length).toBe(1);
+      expect(fillText.mock.calls.length).toBe(1);
+      expect(fillText.mock.calls.length).toBe(1);
+      expect(font).toEqual(`${ButtonDefaults.textStyle.fontSize}px Helvetica`);
+      expect(quadraticCurveTo.mock.calls.length).toEqual(4);
+      expect(fillStyle).toEqual('white');
+      expect(Button).toMatchSnapshot();
+    });
+  });
+});

packages/react-ape/renderer/elements/__tests__/__snapshots__/Button-test.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Call the button with Props Should render properly 1`] = `
+Object {
+  "render": [Function],
+  "type": "Button",
+}
+`;