remove onClick from the Button render

Author: hayanisaid

packages/app/src/Clock.js

@@ -51,7 +51,7 @@ class Clock extends React.Component {
         <Text style={styles.time}>
           {this.state.time}
         </Text>
-       
+
         {/*<Text style={styles.time}>
           {this.state.time}
         </Text>

packages/app/src/Sidebar.js

@@ -28,7 +28,6 @@ const styles = StyleSheet.create({
     lineHeight: 40,
     backgroundColor: 'orange',
   },
-
 });
 
 class Item extends React.Component {
@@ -61,19 +60,21 @@ class Sidebar extends Component {
       <View style={styles.sidebar}>
         {/*<View style={styles.container}>*/}
         <Button
-          color={"#000"}
-         title="Click Me 🚀"
-         onClick = {()=>{alert('hi')}}
+          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/react-ape/renderer/elements/Button.js

@@ -6,15 +6,16 @@
  */
 
 import {ButtonDefaults} from '../constants';
-import {trackMousePosition,isMouseInside} from '../utils'
-import type {CanvasComponentContext} from '../types'
+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,
   /**
@@ -60,54 +61,58 @@ type ButtonProps = {|
     * 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) {
+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)
+  console.log('[PROPS]', props);
   const {title, color} = props;
-  if(!title){
-    throw Error("Title required!")
+  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 width = textWidth * 1.5;
   let height = ButtonDefaults.containerStyle.height;
   let globalStyle = {
     width: width,
     height: height,
     color: color,
     borderRadius: borderRadius,
-    backgroundColor:color,
+    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);
   };
+  // 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.fillStyle = color || ButtonDefaults.containerStyle.backgroundColor;
   ctx.moveTo(x, y);
   /**
 *  Top Right Radius
@@ -139,40 +144,40 @@ function renderButton(props: ButtonProps, apeContext:CanvasComponentContext, par
   ctx.lineWidth = globalStyle.lineWidth;
   ctx.strokeStyle = globalStyle.borderColor;
   ctx.stroke();
-  ctx.fillStyle =  ButtonDefaults.textStyle.color;
+  ctx.fillStyle = ButtonDefaults.textStyle.color;
 
   //set the fontSize
-const fontArgs = ctx.font.split(' ');
-const newSize =` ${ButtonDefaults.textStyle.fontSize}px`;
+  const fontArgs = ctx.font.split(' ');
+  const newSize = ` ${ButtonDefaults.textStyle.fontSize}px`;
   ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1];
 
-// ctx.textAlign = 'center';
+  // ctx.textAlign = 'center';
 
-// ctx.fillText(title,  400 / 2, y + height / 2,textWidth);
-ctx.fillText(title , (x + textWidth /2.5), y + height /2);
+  // ctx.fillText(title,  400 / 2, y + height / 2,textWidth);
+  ctx.fillText(title, x + textWidth / 2.5, y + height / 2);
   ctx.closePath();
-
-  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:  
-/**
+  // 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.
@@ -181,15 +186,11 @@ 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);
-
- 
+  // 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',

packages/react-ape/renderer/reactApeComponent.js

@@ -11,6 +11,7 @@ import Text from './elements/Text';
 import View from './elements/View';
 import Button from './elements/Button';
 import {CustomComponents} from '../modules/Register';
+import {trackMousePosition, isMouseInside} from './utils';
 
 const CHILDREN = 'children';
 const STYLE = 'style';
@@ -32,6 +33,37 @@ const ReactApeComponent = {
       );
     });
 
+    const tag = '[CREATE_ELEMENT]';
+
+    if (type === 'Button') {
+      const {ctx} = apeContextGlobal;
+      ctx.canvas.addEventListener(
+        'click',
+        event => {
+          props.onClick(event);
+        },
+        false
+      );
+    }
+    /**
+     *  Handling click button event
+     * @param {*} event 
+     */
+    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);
+        }
+      }
+    };
     const COMPONENTS = {
       ...customDict,
       Image: Image(props),

packages/react-ape/renderer/reactApeRenderer.js

@@ -116,7 +116,7 @@ const ReactApeFiber = reconciler({
 
       if (diff) {
         const parentLayout = element.parentLayout || element.getParentLayout();
-        if (type === 'Text' ) {
+        if (type === 'Text') {
           parentLayout.resetLayout(); // View needs to be reset on text updates
         }
 

packages/react-ape/renderer/utils.js

@@ -6,21 +6,21 @@
 export function unsafeCreateUniqueId(): string {
   return (Math.random() * 10e18 + Date.now()).toString(36);
 }
-type MouseEventType={|
-   x:number,
-   y:number
-  |}
-export function trackMousePosition(canvas, event):MouseEventType {
+type MouseEventType = {|
+  x: number,
+  y: number,
+|};
+export function trackMousePosition(canvas, event): MouseEventType {
   return {
     x: event.clientX - canvas.offsetLeft,
     y: event.clientY - canvas.offsetTop,
   };
 }
-export const isMouseInside = (pos, rect):boolean => {
+export const isMouseInside = (pos, rect): boolean => {
   return (
     pos.x > rect.x &&
     pos.x < rect.x + rect.width &&
     pos.y < rect.y + rect.height &&
     pos.y > rect.y
   );
-};
+};