I would like to know how to add an ID to an element and retrieve it similarly to e.target.getAttribute("id") for DOM elements. One thing to note is that the elements are based on an array that is part of the parent component. In order for the elements to render based on the parent's array, I added the and at parent component while and are at the child's. In short, it is structured this way.
Parent Class:
<div class="designScreen" onMouseDown={this.activateRouteTrigger} onMouseUp={this.deactivateRouteTrigger} onMouseMove={this.updateRoutePosition} >
<Stage
width={900}
height={700}>
<Layer>
{
this.state.trends.map((el) => {
return <Content id={el.id}
element={el.element}
color={el.color}
title={el.title}
type={el.type}
visibilityStatus={el.visibilityStatus}
selectType={this.selectType}
parentCallback = {this.selectDestinations}
selectedDestinationID = {this.state.selectedDestinationID}
destinations={this.state.destinations}
parentCallbackColor = {this.changeColorSelector}
timerString={this.state.timerString}
/>
})
}
</Layer>
</Stage>
</div>
Child Class:
render(){
const ex1= <Group >
<Rect name="name" onClick={this.selectedRouteID} width={10} height={10} draggable={true} fill="green"></Rect>
<Arrow id={`${this.props.element} content`} onClick={this.selectedRouteID} points={[700,300,200,300]} pointerLength={20} zIndex={5} draggable="true"
pointerWidth={20} fill={`${this.props.color}`} stroke={`${this.props.color}`} strokeWidth={4} />
</Group>
const ex2=
<Arrow points={[100,300,600,300]} pointerLength={20} zIndex={5} draggable="true"
pointerWidth={20} fill={`${this.props.color}`} stroke={`${this.props.color}`} strokeWidth={4} />
return(
this.props.element==="line" ? ex1 : ex2
)
}
}
I solved it, use e.target.getAttrs().fill, to get fill and replace it for other attributes
Related
This package can return the base64 string with prop renderThumbnailHtml={false}
<VideoImageThumbnail
videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
thumbnailHandler={(thumbnail) => console.log(thumbnail)}
width={120}
height={80}
alt="my test video"
/>
but when I place it into img
<img src={`${(
<VideoImageThumbnail
videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
thumbnailHandler={(thumbnail) => console.log(thumbnail)}
renderThumbnailHtml={false}
width={120}
height={80}
alt="my test video"
/>
)}`}
alt="test"
/>
it just return [Object object] instead of the base64 string.
I stuck on this 3 days already...and don't know what keyword I can google for these kind of issue.
here is the codeSandBox showing the issue:
https://codesandbox.io/s/vigilant-joliot-2yqvv6?file=/src/App.js
Thanks a lot
You can use the state variable for your thumbnail and update it when the VideoImageThumbnail is rendered. Something like this.
const [thumbnail, setThumbnail] = useState("");
return (
<div className="App">
<h2>DirectOutput</h2>
<VideoImageThumbnail
videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
thumbnailHandler={(t) => {
setThumbnail(t);
}}
width={120}
height={80}
alt="my test video"
/>
<h2>Use as an img src</h2>
<img src={thumbnail} alt="test" />
</div>
);
I have a common grid component where I define the structure of the grid and also structure of a button bar that goes on top of the grid.
Common-grid.js
<Box height='100%' width='100%' position='absolute'>
<div className="common-grid">
<div className="button-bar">
</div>
<div className="ag-grid">
</div>
</div>
</Box>
I pass data to the grid from my other component based to fill in the grid.
MyComponent.js
{gridData.length > 0 && <Grid tableData={gridData} columnData={activeListColumnDef} {...props}/>}
Along with the data, I would also like to pass icon buttons that I would like to see in button bar.
<IconButton
icon={<AddIcon />}
onClick={onClickOpenActiveListEditor}
/>
<IconButton
icon={<EditIcon />}
/>
I do not want to define icon buttons in the common component but pass it as props. Is it possible to pass such html elements along with its event listeners as props? Please help!
Sure, it's called a render prop. Just directly pass the node like this:
// in the parent component
<Grid
tableData={gridData}
columnData={activeListColumnDef}
icon={<AddIcon onClick={onClickOpenActiveListEditor} />}
{...props}
/>
// in the Grid component
function Grid({tableData, columnData, icon}){
return (
<>
// grid stuff
{icon && icon}
</>
)
}
If you need typescript support, the node would typed as such:
interface GridProps{
// stuff
icon?: React.ReactNode;
}
You could do something like:
const renderIcon = (onClick) => {
return <Icon onClick={onClick} />
}
...
<IconButton renderIcon={renderIcon} />
Then, inside IconButton:
{renderIcon()}
Need to test the React.createRef() part, but that is passed as a prop to the child component.
return (
<div id="excel">
<BuilderWrapper className="builderWrapper">
<Header name={name} desc={description} exportHandler={this.exportHandler} showData={this.showData} />
<BuilderNotification>
<Message infoMessage={cmsContent.messageOnExcelSheet} />
</BuilderNotification>
<BuilderSpreadsheet>
**<HotTable ref={this.hotTableComponent} {...this.setting} className={headerBoldCustom} />**
</BuilderSpreadsheet>
<HotFooter dimensions={dimensions} />
</BuilderWrapper>
</div>
);
I'm trying to do a filter in my app, where the content of the table to filter is defined in the reducer and comes as a state to the component. To do this i'm adding a filter to the mapping of the array.
{tilesData
.map((tile, i) => (
<GridListTile key={i}>
<img src={projectA} style={style.img} alt={tile.title} />
<GridListTileBar
title={<span>{tile.title}</span>}
subtitle={<span>{tile.address}, {tile.state} </span>}
actionIcon={
<Link to = 'project'>
<IconButton onClick={goToProject(i)} color='contrast'>
<VisibilityIcon />
</IconButton>
</Link>
}
/>
</GridListTile>
))
.filter(tilesData.title === project)
}
After doing this, it throws the following error:
TypeError: false is not a function
I want to change tab without clicking on the NavItem evtKey="x"
If I have a TabContainer like this :
<Tab.Container id="tabcontainer" defaultActiveKey="a">
<Tab.Content animation>
<Tab.Pane eventKey="a">
<ComponentA />
</Tab.Pane>
<Tab.Pane eventKey="b">
<Componentb />
</Tab.Pane>
</Tab.Content>
<Nav stacked bsStyle="pills" pullLeft>
... NavItems ...
</Nav>
<Tab.Container>
I want to know how I can do this :
eventHandler(){
changeToTab("b")
}
inside ComponentA.
The tab container, replaced defaultKey with activeKey={this.state.key}, and managed the state of the parent with a function, passed as a prop to ComponentA.
on the parent of the Tab.Container
handleSelect(key){
this.setState({ key : key })
}
render() {
... render stuff ...
return (
<Tab.Container id="tabcontainer" activeKey={this.state.key}>
<Tab.Content animation>
<Tab.Pane eventKey="a">
<ComponentA changeTab={this.handleSelect}/>
</Tab.Pane>
<Tab.Pane eventKey="b">
<ComponentB />
</Tab.Pane>
</Tab.Content>
<Nav stacked bsStyle="pills" pullLeft>
... NavItems ...
</Nav>
<Tab.Container>
)
}
And on the Component A
eventHandler(){
this.props.changeTab("b")
}