@open-formulieren/formio-builder/lib/esm/registry/signature/preview.js

An opinionated Formio webform builder for Open Forms

import { jsxs as p, jsx as i } from "react/jsx-runtime";
import { useFormikContext as y } from "formik";
import { debounce as z } from "lodash";
import { useRef as h, useLayoutEffect as U } from "react";
import E from "react-signature-canvas";
import "../../components/formio/tabs.js";
import N from "../../components/formio/component.js";
import W from "../../components/formio/description.js";
import "@floating-ui/react";
import "clsx";
import "../../context.js";
import "react-intl";
import "@formio/vanilla-text-mask";
import "formiojs";
/* empty css                                           */
/* empty css                                 */
import "react-select";
import "dompurify";
import "../../components/formio/datagrid.js";
const F = "rgb(245,245,235)", Y = ({
  component: c
}) => {
  const {
    getFieldProps: v,
    getFieldHelpers: g
  } = y(), {
    key: a,
    label: C,
    description: l,
    tooltip: b,
    validate: w = {},
    footer: R = ""
  } = c, {
    setValue: m
  } = g(a), {
    required: L = !1
  } = w, d = h(null), t = h(null), {
    value: f
  } = v(a);
  U(() => {
    const e = () => {
      const n = d.current, o = t.current;
      if (!n || !o) return;
      const u = o.toDataURL(), k = n.offsetWidth, s = o.getCanvas();
      s.width = k, o.clear(), u && o.fromDataURL(u, {
        ratio: 1,
        width: s.width,
        height: s.height
      });
    }, r = z(e, 100);
    if (window.addEventListener("resize", r), e(), f && t.current) {
      const n = t.current.getCanvas();
      t.current.fromDataURL(f, {
        ratio: 1,
        width: n.width,
        height: n.height
      });
    }
    return () => {
      window.removeEventListener("resize", r);
    };
  }, []);
  const D = () => {
    const e = t.current;
    if (e === null) return;
    const r = e.toDataURL();
    m(r);
  }, x = (e) => {
    e.preventDefault();
    const r = t.current;
    r !== null && (r.clear(), m(""));
  };
  return /* @__PURE__ */ p(N, { type: c.type, field: a, required: L, htmlId: `editform-${a}`, label: C, tooltip: b, children: [
    /* @__PURE__ */ p("div", { ref: d, className: "signature-pad-body", children: [
      /* @__PURE__ */ i("a", { className: "btn btn-sm btn-light signature-pad-refresh", onClick: x, children: /* @__PURE__ */ i("i", { className: "fa fa-refresh", "aria-label": "Clear" }) }),
      /* @__PURE__ */ i(E, { ref: t, onEnd: D, minWidth: 0.5, maxWidth: 2.5, penColor: "black", backgroundColor: F, clearOnResize: !1 }),
      /* @__PURE__ */ i("div", { className: "signature-pad-footer", children: R })
    ] }),
    l && /* @__PURE__ */ i(W, { text: l })
  ] });
};
export {
  Y as default
};