/
NewFaceWebcamModal.js
63 lines (59 loc) · 2.17 KB
/
NewFaceWebcamModal.js
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
import React, { Component, PropTypes } from 'react'
import styles from './NewFaceWebcamModal.scss'
import { Modal, Button, Icon, Tooltip } from 'antd'
import WebcamInput from 'components/forms/WebcamInput'
import JsonInput from 'components/forms/JsonInput'
import { isJsonString } from 'support/helpers'
const getSubmitButtonEl = (capturedImage, userData, onSubmit) => {
const validJson = userData === '' || isJsonString(userData)
if (capturedImage && validJson) return <Button type='primary' onClick={onSubmit}>Add Face</Button>
return <Button onClick={onSubmit} disabled type='primary'>Invalid Request</Button>
}
class NewFaceWebcamModal extends Component {
render () {
const { onCaptureClick, visible, capturedImage, onCancel, onOk, onSubmit, onChangeUserData, userData } = this.props
return (
<Modal
title='Add with Webcam'
afterClose={this.afterModalClose}
visible={visible}
className={styles.base}
onCancel={onCancel}
onOk={onOk}
footer={null}
>
<div className={styles.inputs}>
<div className={styles.webcam}>
<label>Camera</label>
<WebcamInput
onCaptureClick={onCaptureClick}
enabled={visible}
viewWidth={240}
viewHeight={180}
/>
</div>
<div className={styles.userData}>
<label>User Data <Tooltip placement='right' title='Max 1KB'><Icon type='info-circle' /></Tooltip></label>
<JsonInput width={235} height={160} showJsonTree={false} onChange={onChangeUserData} content={userData} />
</div>
</div>
<div className={styles.captured}>
<label>Captured Image</label>
<img src={capturedImage} alt='captured image' />
</div>
{getSubmitButtonEl(capturedImage, userData, onSubmit)}
</Modal>
)
}
}
NewFaceWebcamModal.propTypes = {
onCaptureClick: PropTypes.func,
visible: PropTypes.bool,
capturedImage: PropTypes.string,
onCancel: PropTypes.func,
onOk: PropTypes.func,
onSubmit: PropTypes.func,
onChangeUserData: PropTypes.func,
userData: PropTypes.string
}
export default NewFaceWebcamModal