84 lines
2.0 KiB
JavaScript
84 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import SignatureCanvas from 'react-signature-canvas';
|
|
import { Button, Modal, Tag } from 'antd';
|
|
import { VerifiedOutlined } from '@ant-design/icons';
|
|
|
|
class IceSignature extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.onChange = props.onChange;
|
|
this.state = {
|
|
visible: false,
|
|
};
|
|
this.signature = React.createRef();
|
|
}
|
|
|
|
componentDidMount() {
|
|
}
|
|
|
|
show() {
|
|
this.setState({ visible: true });
|
|
}
|
|
|
|
setSignature(ref) {
|
|
if (ref == null) {
|
|
return;
|
|
}
|
|
const { value } = this.props;
|
|
if (value != null && value.length > 10) {
|
|
ref.fromDataURL(value);
|
|
}
|
|
}
|
|
|
|
hide() {
|
|
this.setState({ visible: false });
|
|
}
|
|
|
|
clear() {
|
|
this.signature.clear();
|
|
}
|
|
|
|
save() {
|
|
const data = this.signature.toDataURL('image/png');
|
|
this.onChange(data);
|
|
this.setState({ visible: false });
|
|
}
|
|
|
|
render() {
|
|
const { readOnly } = this.props;
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
visible={this.state.visible}
|
|
title="Signature"
|
|
maskClosable={false}
|
|
centered
|
|
width={300}
|
|
onCancel={() => { this.hide(); }}
|
|
footer={[
|
|
<Button key="cancel" onClick={() => { this.hide(); }}>
|
|
Cancel
|
|
</Button>,
|
|
<Button key="clear" disabled={readOnly} type="dashed" onClick={() => { if (!readOnly) { this.clear(); } }}>
|
|
Clear
|
|
</Button>,
|
|
<Button key="ok" disabled={readOnly} type="primary" onClick={() => { if (!readOnly) { this.save(); } }}>
|
|
Submit
|
|
</Button>,
|
|
]}
|
|
>
|
|
<SignatureCanvas ref={(ref) => { this.signature = ref; this.setSignature(ref); }} canvasProps={{ width: 250, height: 200, className: 'sigCanvas', ...( readOnly ? { readOnly } : {}), }} />
|
|
</Modal>
|
|
<Tag color="blue" style={{ cursor: 'pointer' }} onClick={() => { this.show(); }}>
|
|
<VerifiedOutlined />
|
|
{' '}
|
|
Sign
|
|
</Tag>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default IceSignature;
|