|
|
|
import React, { Component } from 'react';
|
|
|
|
import domtoimage from 'dom-to-image';
|
|
|
|
import { Form, Input } from 'semantic-ui-react'
|
|
|
|
import './App.css';
|
|
|
|
|
|
|
|
|
|
|
|
class App extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.sticker = React.createRef();
|
|
|
|
this.appBody = React.createRef();
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
messageText: 'What should I say?',
|
|
|
|
messageTime: '12:34 PM',
|
|
|
|
canvas: []
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
domtoimage.toPng(this.sticker.current).then(dataUrl => {
|
|
|
|
let img = new Image();
|
|
|
|
img.src = dataUrl;
|
|
|
|
this.appBody.current.appendChild(img);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div className='App' ref={this.appBody}>
|
|
|
|
<section className='chat__body'>
|
|
|
|
<div className='sticker' ref={this.sticker}>
|
|
|
|
<div className='chathead' />
|
|
|
|
<div className='messages'>
|
|
|
|
|
|
|
|
<div className='message droplet'>
|
|
|
|
<div className='message__text'>
|
|
|
|
<div className='message__text__content'>{this.state.messageText}
|
|
|
|
<div className='message__time'>{this.state.messageTime}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<Form>
|
|
|
|
<Form.Group widths='equal'>
|
|
|
|
<Form.Field control={Input} label='First name' placeholder='First name' />
|
|
|
|
<Form.Field control={Input} label='Last name' placeholder='Last name' />
|
|
|
|
</Form.Group>
|
|
|
|
</Form>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|