Sync changes v29.0.0 from IceHrmPro (https://icehrm.com/purchase-icehrmpro)

web/components/IceSignature.js

@@ -0,0 +1,83 @@
+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;