@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
82 lines (81 loc) • 4.04 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const formik_1 = require("formik");
const lodash_1 = require("lodash");
const react_1 = require("react");
const react_signature_canvas_1 = __importDefault(require("react-signature-canvas"));
const formio_1 = require("../../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 } = (0, formik_1.useFormikContext)();
const { key, label, description, tooltip, validate = {}, footer = '' } = component;
const { setValue } = getFieldHelpers(key);
const { required = false } = validate;
const containerRef = (0, react_1.useRef)(null);
const padRef = (0, react_1.useRef)(null);
const { value: currentValue } = getFieldProps(key);
(0, react_1.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 = (0, lodash_1.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 ((0, jsx_runtime_1.jsxs)(formio_1.Component, Object.assign({ type: component.type, field: key, required: required, htmlId: `editform-${key}`, label: label, tooltip: tooltip }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: containerRef, className: "signature-pad-body" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ className: "btn btn-sm btn-light signature-pad-refresh", onClick: onClear }, { children: (0, jsx_runtime_1.jsx)("i", { className: "fa fa-refresh", "aria-label": "Clear" }) })), (0, jsx_runtime_1.jsx)(react_signature_canvas_1.default, { ref: padRef, onEnd: onEnd, minWidth: 0.5, maxWidth: 2.5, penColor: "black", backgroundColor: BG_COLOR, clearOnResize: false }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "signature-pad-footer" }, { children: footer }))] })), description && (0, jsx_runtime_1.jsx)(formio_1.Description, { text: description })] })));
};
exports.default = Preview;