-
Notifications
You must be signed in to change notification settings - Fork 0
/
Form.jsx
74 lines (66 loc) · 1.87 KB
/
Form.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from 'react';
import PropTypes from 'prop-types';
export default class Form extends React.Component {
constructor(props) {
super(props);
this.form = React.createRef();
this.field = React.createRef();
this.submit = React.createRef();
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.form.current.addEventListener('submit', this.handleSubmit);
this.submit.current.addEventListener('select', this.handleSubmit);
}
componentWillUnmount() {
this.form.current.removeEventListener('submit', this.handleSubmit);
this.submit.current.removeEventListener('select', this.handleSubmit);
}
handleSubmit(event) {
console.log('handleSubmit', event);
const keyboard = this.field.current.getFeature('Keyboard');
const { onSubmit } = this.props;
onSubmit({
value: keyboard.text,
});
navigationDocument.removeDocument(event.target.ownerDocument);
}
render() {
const { image, description, value } = this.props;
return (
<formTemplate ref={this.form}>
<banner>
<img src={image.src} width={image.width} height={image.height} alt={image.alt} />
<description>{description}</description>
</banner>
<textField ref={this.field}>{value}</textField>
<footer>
<button ref={this.submit}>
<text>Submit</text>
</button>
</footer>
</formTemplate>
);
}
}
Form.defaultProps = {
image: {
src: '',
width: 0,
height: 0,
alt: '',
},
description: '',
value: '',
};
Form.propTypes = {
image: PropTypes.shape({
src: PropTypes.string.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
alt: PropTypes.string.isRequired,
}),
description: PropTypes.string,
value: PropTypes.string,
onSubmit: PropTypes.func.isRequired,
};