Button component #125
Button component #125
Conversation
hayanisaid
commented
Jun 22, 2022
hayanisaid
commented
- Created Button component
- Add onClick event
| ); | ||
| }; | ||
|
|
||
| ctx.canvas.addEventListener('click', onClick, false); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Working on this!
Question! how to connect the component to the spatialGeometry context?
There was a problem hiding this comment.
I believe this property will need to be coming from parent View instead of itself. Btw, if you want to join the discord to talk, there's a link here https://medium.com/@raphamorim/bet-on-canvas-for-a-high-performant-tv-application-with-react-ape-cdf8c0b77c21
There was a problem hiding this comment.
Invalid Discord link invite!
There was a problem hiding this comment.
oops, try this link https://discord.gg/njHHfRzJ42
|
@hayanisaid other two points would be good to have in this PR:
|
|
@raphamorim Thanks for the feedback, working on applying those changes. |
hayanisaid
force-pushed
the
button-component
branch
from
9cc4a45
to
7b161c6
Compare
| import React from "react"; | ||
| import { Button, View, render } from "react-ape"; | ||
|
|
||
| class ImageExample extends React.Component { |
There was a problem hiding this comment.
Shouldn't this be ButtonExample?
| title: string, | ||
| onPress: (event?: PressEvent) => mixed, | ||
| onClick: (event?: SyntheticMouseEvent<HTMLButtonElement>) => mixed, | ||
| //handleOnClick:(event?:SyntheticMouseEvent<HTMLButtonElement>)=>mixed, |
| import {trackMousePosition, isMouseInside} from '../utils'; | ||
| import type {CanvasComponentContext} from '../types'; | ||
|
|
||
| //TODO adjust Opacity when focus, Blur |
There was a problem hiding this comment.
is there a ticket for this TODO?
|
|
||
| // If is relative and x and y haven't be processed, don't render | ||
| // start drawing the canvas | ||
| console.log('[PROPS]', props); |
| const resetStyle = newStyle => { | ||
| globalStyle = {...globalStyle, newStyle}; | ||
| }; | ||
| // const redrawButton = ctx => { |
There was a problem hiding this comment.
can this be removed if commented out?
| const newSize = `${ButtonDefaults.textStyle.fontSize}px`; | ||
| ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1]; | ||
|
|
||
| // ctx.textAlign = 'center'; |
There was a problem hiding this comment.
can this be removed if commented out?
|
|
||
| // ctx.textAlign = 'center'; | ||
|
|
||
| // ctx.fillText(title, 400 / 2, y + height / 2,textWidth); |
There was a problem hiding this comment.
can this be removed if commented out?
| // ctx.fillText(title, 400 / 2, y + height / 2,textWidth); | ||
| ctx.fillText(title, x + textWidth / 2.5, y + height / 2); | ||
| ctx.closePath(); | ||
| // if(props.handleOnClick){ |
There was a problem hiding this comment.
can this be removed if commented out? This stretches all the way down to line 192
| * Handling click button event | ||
| * @param {*} event | ||
| */ | ||
| // const onClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => { |
There was a problem hiding this comment.
can this be removed if commented out?
