@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
120 lines • 4.47 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _Icon;
var _excluded = ["variant", "label", "error", "errorVariant", "errorMessage"];
import React, { useCallback } from 'react';
import { Icon } from '@iconify/react';
import SignaturePad from 'react-signature-pad-wrapper';
import { Root, SignatureInputBody, FixedElement, WrapperSiganture } from './styled';
import { IconButtonComponent } from '../IconButtonComponent/index';
import { InputLabel, ErrorAlert } from '../../base';
import { dataURLtoFile } from './utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var SignatureInput = function SignatureInput(_ref) {
var _ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'divider' : _ref$variant,
label = _ref.label,
error = _ref.error,
errorVariant = _ref.errorVariant,
errorMessage = _ref.errorMessage,
props = _objectWithoutProperties(_ref, _excluded);
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
signature = _React$useState2[0],
setSignature = _React$useState2[1];
var signaturePad = React.useRef(null);
var handleClear = useCallback(function () {
var ref = signaturePad.current;
if (ref) {
ref.clear();
setSignature(null);
}
}, [signaturePad]);
var handleToData = useCallback(function () {
var ref = signaturePad.current;
if (ref) {
var isEmpty = ref.isEmpty();
if (!isEmpty) {
var data = ref.toDataURL('image/png');
var file = dataURLtoFile(data, 'signature.png');
setSignature(file);
} else {
setSignature(null);
}
}
}, [signaturePad]);
var resizeCanvas = useCallback(function () {
var ref = signaturePad.current;
if (ref) {
var _canvas;
var ratio = Math.max(window.devicePixelRatio || 1, 1);
var canvas = (_canvas = ref.canvas) == null ? void 0 : _canvas.current;
if (canvas) {
var _getContext;
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
(_getContext = canvas.getContext('2d')) == null || _getContext.scale(ratio, ratio);
ref.clear();
}
}
}, [signaturePad]);
React.useEffect(function () {
window.onresize = resizeCanvas;
resizeCanvas();
}, []);
React.useEffect(function () {
if (signaturePad) {
var _signaturePad$current;
var instance = signaturePad == null || (_signaturePad$current = signaturePad.current) == null ? void 0 : _signaturePad$current.instance;
instance == null || instance.addEventListener('endStroke', handleToData);
}
return function () {
var _signaturePad$current2;
var instance = signaturePad == null || (_signaturePad$current2 = signaturePad.current) == null ? void 0 : _signaturePad$current2.instance;
instance == null || instance.removeEventListener('endStroke', null);
};
}, []);
React.useEffect(function () {
if (props.getSignature) props.getSignature(signature);
}, [signature]);
return /*#__PURE__*/_jsxs(Root, {
children: [variant === 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, {
variant: variant,
children: label
}), /*#__PURE__*/_jsxs(WrapperSiganture, {
variant: variant,
error: error,
size: "auto",
backgroundColor: props.backgroundColor,
children: [variant !== 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, {
variant: variant,
children: label
}), /*#__PURE__*/_jsxs(SignatureInputBody, {
children: [/*#__PURE__*/_jsx(FixedElement, {
children: /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
size: 'small',
onClick: handleClear
},
children: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
icon: "ic:round-clear",
color: "#455266"
}))
})
}), /*#__PURE__*/_jsx(SignaturePad, {
redrawOnResize: true,
ref: signaturePad,
height: 164,
debounceInterval: 500,
options: {
// penColor: 'rgb(18, 18, 18)',
}
})]
})]
}), error && /*#__PURE__*/_jsx(ErrorAlert, {
variant: errorVariant,
children: errorMessage
})]
});
};
export default SignatureInput;