@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
323 lines (322 loc) • 11.2 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { SignaturePad as Le } from "@progress/kendo-inputs-common";
import { Button as T } from "@progress/kendo-react-buttons";
import { createPropsContext as we, validatePackage as Ie, getLicenseMessage as Pe, usePropsContext as De, useIsomorphicLayoutEffect as Te, dispatchEvent as h, classNames as B, kendoThemeMaps as ee, getTabIndex as Be, WatermarkOverlay as Re, noop as f } from "@progress/kendo-react-common";
import { Dialog as Fe } from "@progress/kendo-react-dialogs";
import { useLocalization as _e } from "@progress/kendo-react-intl";
import a from "prop-types";
import * as o from "react";
import { signatureMaximize as te, messages as R, signatureMinimize as oe, signatureClear as ne } from "../messages/index.mjs";
import { packageMetadata as ae } from "../package-metadata.mjs";
import { hasParent as Ne } from "./utils/index.mjs";
import { hyperlinkOpenIcon as re, xIcon as We } from "@progress/kendo-svg-icons";
const qe = 250, Ge = 84, se = 3, le = 2, Ae = "#000000", Ve = "#ffffff", ie = (d) => d !== void 0, je = we(), F = o.forwardRef((d, ce) => {
const ue = !Ie(ae, { component: "Signature" }), de = Pe(ae), _ = De(je, d), e = o.useMemo(
() => ({
strokeWidth: s.strokeWidth,
smooth: s.smooth,
popupScale: s.popupScale,
exportScale: s.exportScale,
maximizable: s.maximizable,
disabled: s.disabled,
required: s.required,
validityStyles: s.validityStyles,
onChange: s.onChange,
onFocus: s.onFocus,
onBlur: s.onBlur,
onOpen: s.onOpen,
onClose: s.onClose,
size: s.size,
rounded: s.rounded,
fillMode: s.fillMode,
..._
}),
[_]
), S = _e(), c = o.useRef(null), g = o.useRef(null), N = o.useRef(null), W = o.useRef(null), z = o.useRef(null), [r, me] = o.useState(), [b, q] = o.useState(!1), [E, G] = o.useState(!1), [k, A] = o.useState(), [pe, fe] = o.useState(), V = ie(e.value) ? e.value : k, [ge, be] = o.useState(!1), p = ie(e.open), m = p ? e.open : ge, ke = e.maximized || E || !e.maximizable || e.disabled, ye = !(e.maximized && !E), ve = !(!(e.value || k) || E || e.readOnly || e.disabled), j = S.toLanguageString(te, R[te]), U = S.toLanguageString(oe, R[oe]), H = S.toLanguageString(ne, R[ne]), O = e.popupScale || se, x = e.exportScale || le, M = (t) => {
A(t), e.onChange && e.onChange({ value: t });
}, Ce = (t) => {
r == null || r.loadImage(t.value), M(t.value);
};
o.useEffect(() => {
e.value !== k && (A(e.value), r == null || r.loadImage(e.value));
}, [e.value]);
const he = () => {
r == null || r.clear(), M();
}, y = o.useCallback(
(t) => {
p || be(t);
},
[p]
), Se = (t) => {
var n, i;
Q(t), (i = ((n = z.current) == null ? void 0 : n.element) || g.current) == null || i.focus();
}, L = o.useCallback(() => {
let t = Ae;
return !e.color && typeof document != "undefined" && c.current && (t = getComputedStyle(c.current).color), e.color || t;
}, [e.color]), w = o.useCallback(() => {
let t = Ve;
return !e.backgroundColor && typeof document != "undefined" && c.current && (t = getComputedStyle(c.current).backgroundColor), e.backgroundColor || t;
}, [e.backgroundColor]), $ = () => ({
scale: e.maximized ? e.popupScale : 1,
color: L(),
backgroundColor: w(),
strokeWidth: e.strokeWidth,
smooth: e.smooth,
readonly: e.readOnly
}), K = async (t) => {
const { width: n, height: i } = t;
return await (r == null ? void 0 : r.exportImage({
width: n * x,
height: i * x
}));
};
o.useEffect(() => {
const t = g.current, n = new Le(t, $());
return V && n.loadImage(V), me(n), () => n.destroy();
}, []), o.useEffect(() => {
r == null || r.setOptions({
onChange: async () => M(await K(Y())),
onDraw: () => G(!0),
onDrawEnd: () => G(!1)
});
}, [r]), Te(
() => r == null ? void 0 : r.setOptions($()),
[e.readOnly, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
), o.useEffect(() => {
var i, l;
const t = (l = (i = N.current) == null ? void 0 : i.element) == null ? void 0 : l.querySelector(".k-overlay");
if (!t)
return;
const n = () => y(!1);
return t.addEventListener("click", n), () => t.removeEventListener("click", n);
}, [m]), o.useEffect(() => {
if (!m || typeof document == "undefined")
return;
const t = (n) => {
var i, l;
n.key === "Escape" && (y(!1), (l = (i = z.current) == null ? void 0 : i.element) == null || l.focus());
};
return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
}, [m]), o.useEffect(() => {
var t, n;
e.maximized && ((n = (t = W.current) == null ? void 0 : t.element) == null || n.focus());
}, []);
const I = o.useCallback(() => {
var t;
return (t = g.current) == null ? void 0 : t.focus();
}, []), v = o.useCallback(() => e.value, [e.value]), X = o.useCallback(() => e.name, [e.name]), C = o.useCallback(() => e.required, [e.required]), P = o.useCallback(() => {
const t = e.validationMessage !== void 0, i = !v(), l = e.valid !== void 0 ? e.valid : !C() || !i;
return {
customError: t,
valid: l,
valueMissing: i
};
}, [e.validationMessage, e.valid, v, C]), D = o.useCallback(() => e.validityStyles, [e.validityStyles]), J = o.useCallback(() => e, [e]), u = o.useCallback(() => {
const t = {
element: c.current,
focus: I
};
return Object.defineProperty(t, "name", { get: X }), Object.defineProperty(t, "value", { get: v }), Object.defineProperty(t, "validity", { get: P }), Object.defineProperty(t, "validityStyles", { get: D }), Object.defineProperty(t, "required", { get: C }), Object.defineProperty(t, "props", { get: J }), Object.defineProperty(t, "color", { get: L }), Object.defineProperty(t, "backgroundColor", { get: w }), t;
}, [
X,
v,
P,
D,
C,
I,
J,
L,
w
]);
o.useImperativeHandle(ce, u);
const ze = o.useCallback(
(t) => {
b || e.maximized || (q(!0), h(e.onFocus, t, u(), {}));
},
[b, e.onFocus, u]
), Ee = o.useCallback(
(t) => {
Ne(t.relatedTarget, c.current) || (q(!1), h(e.onBlur, t, u(), {}));
},
[b, e.onBlur, u]
), Oe = o.useCallback(
async (t) => {
fe(await K(Z())), y(!0), h(e.onOpen, t, u(), {});
},
[m, p, e.onOpen, e.value, k, u]
), Q = o.useCallback(
(t) => {
y(!1), h(e.onClose, t, u(), {});
},
[m, p, e.onClose, u]
), xe = () => {
he(), I();
}, Y = () => {
var i, l;
const t = e.width || ((i = c.current) == null ? void 0 : i.offsetWidth) || qe, n = e.height || ((l = c.current) == null ? void 0 : l.offsetHeight) || Ge;
return {
width: t,
height: n
};
}, Z = () => {
const { width: t, height: n } = Y();
return {
width: t * O,
height: n * O
};
}, Me = !D() || P().valid;
return /* @__PURE__ */ o.createElement(
"div",
{
ref: c,
dir: e.dir,
style: { width: e.width, height: e.height, ...e.style },
className: B(
"k-input",
"k-signature",
{
"k-signature-maximized": e.maximized,
[`k-signature-${ee.sizeMap[e.size] || e.size}`]: e.size,
[`k-signature-${e.fillMode}`]: e.fillMode,
[`k-input-${e.fillMode}`]: e.fillMode,
[`k-rounded-${ee.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
"k-invalid": !Me,
"k-required": e.required,
"k-disabled": e.disabled,
"k-focus": b
},
e.className
),
onFocus: ze,
onBlur: Ee
},
/* @__PURE__ */ o.createElement(
"div",
{
className: "k-signature-canvas",
ref: g,
tabIndex: Be(e.tabIndex, e.disabled),
role: "img",
id: e.id,
"aria-label": e.ariaLabel,
"aria-labelledby": e.ariaLabelledBy,
"aria-describedby": e.ariaDescribedBy,
"aria-disabled": e.disabled ? "true" : void 0,
style: e.inputStyle
}
),
/* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-top" }, /* @__PURE__ */ o.createElement(
T,
{
type: "button",
className: B("k-signature-action", "k-signature-maximize", {
"k-hidden": e.disabled || ke
}),
ref: z,
icon: "hyperlink-open",
svgIcon: re,
fillMode: "flat",
size: e.size,
onClick: Oe,
"aria-label": j,
title: j
}
), /* @__PURE__ */ o.createElement(
T,
{
type: "button",
className: B("k-signature-action", "k-signature-minimize", "k-rotate-180", {
"k-hidden": e.disabled || ye
}),
ref: W,
icon: "hyperlink-open",
svgIcon: re,
fillMode: "flat",
size: e.size,
onClick: Q,
"aria-label": U,
title: U
}
)),
!e.hideLine && /* @__PURE__ */ o.createElement("div", { className: "k-signature-line", style: { zIndex: 2, pointerEvents: "none" } }),
/* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, ve && /* @__PURE__ */ o.createElement(
T,
{
type: "button",
className: "k-signature-action k-signature-clear",
icon: "x",
svgIcon: We,
fillMode: "flat",
size: e.size,
onClick: xe,
"aria-label": H,
title: H
}
)),
m && /* @__PURE__ */ o.createElement(Fe, { ref: N }, /* @__PURE__ */ o.createElement(
F,
{
...e,
...Z(),
value: pe,
maximized: !0,
exportScale: 1 / O * x,
open: !1,
onChange: Ce,
onClose: Se
}
)),
ue && /* @__PURE__ */ o.createElement(Re, { message: de })
);
});
F.propTypes = {
value: a.string,
width: a.number,
height: a.number,
tabIndex: a.number,
dir: a.string,
ariaDescribedBy: a.string,
ariaLabelledBy: a.string,
ariaLabel: a.string,
readOnly: a.bool,
disabled: a.bool,
validationMessage: a.string,
required: a.bool,
onChange: a.func,
onFocus: a.func,
onBlur: a.func,
onOpen: a.func,
onClose: a.func,
size: a.oneOf([null, "small", "medium", "large"]),
rounded: a.oneOf([null, "small", "medium", "large"]),
fillMode: a.oneOf([null, "solid", "flat", "outline"])
};
const s = {
strokeWidth: 1,
smooth: !1,
popupScale: se,
exportScale: le,
maximizable: !0,
disabled: !1,
required: !1,
validityStyles: !0,
onChange: (d) => f,
onFocus: (d) => f,
onBlur: (d) => f,
onOpen: (d) => f,
onClose: (d) => f,
size: "medium",
rounded: "medium",
fillMode: "solid"
};
F.displayName = "KendoSignature";
export {
F as Signature,
je as SignaturePropsContext
};