@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
77 lines (76 loc) • 3.61 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormikContext } from 'formik';
import { debounce } from 'lodash';
import { useLayoutEffect, useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import { Component, Description } from '../../components/formio';
const BG_COLOR = 'rgb(245,245,235)';
/**
* Show a formio signature component preview.
*
* NOTE: for the time being, this is rendered in the default Formio bootstrap style,
* however at some point this should use the components of
* @open-formulieren/formio-renderer instead for a more accurate preview.
*/
const Preview = ({ component }) => {
const { getFieldProps, getFieldHelpers } = useFormikContext();
const { key, label, description, tooltip, validate = {}, footer = '' } = component;
const { setValue } = getFieldHelpers(key);
const { required = false } = validate;
const containerRef = useRef(null);
const padRef = useRef(null);
const { value: currentValue } = getFieldProps(key);
useLayoutEffect(() => {
const resizeHandler = () => {
const containerDiv = containerRef.current;
const instance = padRef.current;
if (!containerDiv || !instance)
return;
const value = instance.toDataURL();
const containerWidth = containerDiv.offsetWidth;
const canvas = instance.getCanvas();
canvas.width = containerWidth;
// changing dimensions requires redrawing, which is done through the clear() method
instance.clear();
if (value) {
instance.fromDataURL(value, {
ratio: 1,
width: canvas.width,
height: canvas.height,
});
}
};
const onResize = debounce(resizeHandler, 100);
window.addEventListener('resize', onResize);
resizeHandler();
// if there's a current value from form state, set it
if (currentValue && padRef.current) {
const canvas = padRef.current.getCanvas();
padRef.current.fromDataURL(currentValue, {
ratio: 1,
width: canvas.width,
height: canvas.height,
});
}
return () => {
window.removeEventListener('resize', onResize);
};
}, []);
const onEnd = () => {
const instance = padRef.current;
if (instance === null)
return;
const dataUrl = instance.toDataURL();
setValue(dataUrl);
};
const onClear = (event) => {
event.preventDefault();
const instance = padRef.current;
if (instance === null)
return;
instance.clear();
setValue('');
};
return (_jsxs(Component, Object.assign({ type: component.type, field: key, required: required, htmlId: `editform-${key}`, label: label, tooltip: tooltip }, { children: [_jsxs("div", Object.assign({ ref: containerRef, className: "signature-pad-body" }, { children: [_jsx("a", Object.assign({ className: "btn btn-sm btn-light signature-pad-refresh", onClick: onClear }, { children: _jsx("i", { className: "fa fa-refresh", "aria-label": "Clear" }) })), _jsx(SignatureCanvas, { ref: padRef, onEnd: onEnd, minWidth: 0.5, maxWidth: 2.5, penColor: "black", backgroundColor: BG_COLOR, clearOnResize: false }), _jsx("div", Object.assign({ className: "signature-pad-footer" }, { children: footer }))] })), description && _jsx(Description, { text: description })] })));
};
export default Preview;