@progress/kendo-react-inputs 15.0.0-develop.2 → 15.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
- package/signature/Signature.js +1 -1
- package/signature/Signature.mjs +129 -131
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-inputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1779275415,version:"15.0.0",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
|
|
|
7
7
|
productName: 'KendoReact',
|
|
8
8
|
productCode: 'KENDOUIREACT',
|
|
9
9
|
productCodes: ['KENDOUIREACT'],
|
|
10
|
-
publishDate:
|
|
11
|
-
version: '15.0.0
|
|
10
|
+
publishDate: 1779275415,
|
|
11
|
+
version: '15.0.0',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-inputs",
|
|
3
|
-
"version": "15.0.0
|
|
3
|
+
"version": "15.0.0",
|
|
4
4
|
"description": "React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
"@progress/kendo-drawing": "^1.21.2",
|
|
29
29
|
"@progress/kendo-inputs-common": "^3.1.0",
|
|
30
30
|
"@progress/kendo-licensing": "^1.7.2",
|
|
31
|
-
"@progress/kendo-react-animation": "15.0.0
|
|
32
|
-
"@progress/kendo-react-buttons": "15.0.0
|
|
33
|
-
"@progress/kendo-react-common": "15.0.0
|
|
34
|
-
"@progress/kendo-react-dialogs": "15.0.0
|
|
35
|
-
"@progress/kendo-react-layout": "15.0.0
|
|
36
|
-
"@progress/kendo-react-intl": "15.0.0
|
|
37
|
-
"@progress/kendo-react-labels": "15.0.0
|
|
38
|
-
"@progress/kendo-react-popup": "15.0.0
|
|
31
|
+
"@progress/kendo-react-animation": "15.0.0",
|
|
32
|
+
"@progress/kendo-react-buttons": "15.0.0",
|
|
33
|
+
"@progress/kendo-react-common": "15.0.0",
|
|
34
|
+
"@progress/kendo-react-dialogs": "15.0.0",
|
|
35
|
+
"@progress/kendo-react-layout": "15.0.0",
|
|
36
|
+
"@progress/kendo-react-intl": "15.0.0",
|
|
37
|
+
"@progress/kendo-react-labels": "15.0.0",
|
|
38
|
+
"@progress/kendo-react-popup": "15.0.0",
|
|
39
39
|
"@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
|
|
40
40
|
"react": "^18.0.0 || ^19.0.0",
|
|
41
41
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"package": {
|
|
83
83
|
"productName": "KendoReact",
|
|
84
84
|
"productCode": "KENDOUIREACT",
|
|
85
|
-
"publishDate":
|
|
85
|
+
"publishDate": 1779275415,
|
|
86
86
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
87
87
|
}
|
|
88
88
|
},
|
package/signature/Signature.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Se=require("@progress/kendo-inputs-common"),D=require("@progress/kendo-react-buttons"),a=require("@progress/kendo-react-common"),ze=require("@progress/kendo-react-dialogs"),Oe=require("@progress/kendo-react-intl"),s=require("prop-types"),Ee=require("react"),m=require("../messages/index.js"),Y=require("../package-metadata.js"),xe=require("./utils/index.js"),_=require("@progress/kendo-svg-icons");function Me(c){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const g in c)if(g!=="default"){const v=Object.getOwnPropertyDescriptor(c,g);Object.defineProperty(k,g,v.get?v:{enumerable:!0,get:()=>c[g]})}}return k.default=c,Object.freeze(k)}const n=Me(Ee),Ie=250,Le=84,ee=3,te=2,Pe="#000000",Re="#ffffff",Z=c=>c!==void 0,ne=a.createPropsContext(),E=n.forwardRef((c,k)=>{const g=!a.validatePackage(Y.packageMetadata,{component:"Signature"}),v=a.getLicenseMessage(Y.packageMetadata),N=a.usePropsContext(ne,c),e=n.useMemo(()=>({strokeWidth:l.strokeWidth,smooth:l.smooth,popupScale:l.popupScale,exportScale:l.exportScale,maximizable:l.maximizable,disabled:l.disabled,required:l.required,validityStyles:l.validityStyles,onChange:l.onChange,onFocus:l.onFocus,onBlur:l.onBlur,onOpen:l.onOpen,onClose:l.onClose,size:l.size,rounded:l.rounded,fillMode:l.fillMode,...N}),[N]),x=Oe.useLocalization(),p=n.useRef(null),y=n.useRef(null),F=n.useRef(null),j=n.useRef(null),M=n.useRef(null),[r,oe]=n.useState(),[h,W]=n.useState(!1),[C,G]=n.useState(),[ae,se]=n.useState(),A=Z(e.value)?e.value:C,[re,ie]=n.useState(!1),b=Z(e.open),f=b?e.open:re,le=e.disabled||e.maximized||!e.maximizable,ce=e.disabled||!e.maximized,ue=!(!(e.value||C)||e.disabled||e.readOnly),de=x.toLanguageString(m.signatureMaximize,m.messages[m.signatureMaximize]),pe=x.toLanguageString(m.signatureMinimize,m.messages[m.signatureMinimize]),me=x.toLanguageString(m.signatureClear,m.messages[m.signatureClear]),I=e.popupScale||ee,L=e.exportScale||te,P=t=>{G(t),e.onChange&&e.onChange({value:t})},ge=t=>{r==null||r.loadImage(t.value),P(t.value)};n.useEffect(()=>{e.value!==C&&(G(e.value),r==null||r.loadImage(e.value))},[e.value]);const fe=()=>{r==null||r.clear(),P()},S=n.useCallback(t=>{b||ie(t)},[b]),ke=t=>{var o,i;X(t),(i=((o=M.current)==null?void 0:o.element)||y.current)==null||i.focus()},R=n.useCallback(()=>{let t=Pe;return!e.color&&typeof document!="undefined"&&p.current&&(t=getComputedStyle(p.current).color),e.color||t},[e.color]),w=n.useCallback(()=>{let t=Re;return!e.backgroundColor&&typeof document!="undefined"&&p.current&&(t=getComputedStyle(p.current).backgroundColor),e.backgroundColor||t},[e.backgroundColor]),V=()=>({scale:e.maximized?e.popupScale:1,color:R(),backgroundColor:w(),strokeWidth:e.strokeWidth,smooth:e.smooth,readonly:e.readOnly||e.disabled}),U=async t=>{const{width:o,height:i}=t;return await(r==null?void 0:r.exportImage({width:o*L,height:i*L}))};n.useEffect(()=>{const t=y.current,o=new Se.SignaturePad(t,V());return A&&o.loadImage(A),oe(o),()=>o.destroy()},[]),n.useEffect(()=>{r==null||r.setOptions({onChange:async()=>P(await U(J()))})},[r]),a.useIsomorphicLayoutEffect(()=>r==null?void 0:r.setOptions(V()),[e.readOnly,e.disabled,e.color,e.backgroundColor,e.strokeWidth,e.smooth]),n.useEffect(()=>{var i,d;const t=(d=(i=F.current)==null?void 0:i.element)==null?void 0:d.querySelector(".k-overlay");if(!t)return;const o=()=>S(!1);return t.addEventListener("click",o),()=>t.removeEventListener("click",o)},[f]),n.useEffect(()=>{if(!f||typeof document=="undefined")return;const t=o=>{var i,d;o.key==="Escape"&&(S(!1),(d=(i=M.current)==null?void 0:i.element)==null||d.focus())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[f]),n.useEffect(()=>{var t,o;e.maximized&&((o=(t=j.current)==null?void 0:t.element)==null||o.focus())},[]);const q=n.useCallback(()=>{var t;return(t=y.current)==null?void 0:t.focus()},[]),z=n.useCallback(()=>e.value,[e.value]),H=n.useCallback(()=>e.name,[e.name]),O=n.useCallback(()=>e.required,[e.required]),T=n.useCallback(()=>{const t=e.validationMessage!==void 0,i=!z(),d=e.valid!==void 0?e.valid:!O()||!i;return{customError:t,valid:d,valueMissing:i}},[e.validationMessage,e.valid,z,O]),B=n.useCallback(()=>e.validityStyles,[e.validityStyles]),$=n.useCallback(()=>e,[e]),u=n.useCallback(()=>{const t={element:p.current,focus:q};return Object.defineProperty(t,"name",{get:H}),Object.defineProperty(t,"value",{get:z}),Object.defineProperty(t,"validity",{get:T}),Object.defineProperty(t,"validityStyles",{get:B}),Object.defineProperty(t,"required",{get:O}),Object.defineProperty(t,"props",{get:$}),Object.defineProperty(t,"color",{get:R}),Object.defineProperty(t,"backgroundColor",{get:w}),t},[H,z,T,B,O,q,$,R,w]);n.useImperativeHandle(k,u);const K=n.useRef(null);n.useImperativeHandle(K,u),a.useWebMcpRegister("signature",K,e,e.webMcp);const be=n.useCallback(t=>{h||e.maximized||(W(!0),a.dispatchEvent(e.onFocus,t,u(),{}))},[h,e.onFocus,u]),ve=n.useCallback(t=>{xe.hasParent(t.relatedTarget,p.current)||(W(!1),a.dispatchEvent(e.onBlur,t,u(),{}))},[h,e.onBlur,u]),ye=n.useCallback(async t=>{se(await U(Q())),S(!0),a.dispatchEvent(e.onOpen,t,u(),{})},[f,b,e.onOpen,e.value,C,u]),X=n.useCallback(t=>{S(!1),a.dispatchEvent(e.onClose,t,u(),{})},[f,b,e.onClose,u]),he=()=>{fe(),q()},J=()=>{var i,d;const t=e.width||((i=p.current)==null?void 0:i.offsetWidth)||Ie,o=e.height||((d=p.current)==null?void 0:d.offsetHeight)||Le;return{width:t,height:o}},Q=()=>{const{width:t,height:o}=J();return{width:t*I,height:o*I}},Ce=!B()||T().valid;return n.createElement("div",{ref:p,dir:e.dir,style:{width:e.width,height:e.height,...e.style},className:a.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${a.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-signature-${e.fillMode}`]:e.fillMode,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${a.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,"k-invalid":!Ce,"k-required":e.required,"k-disabled":e.disabled,"k-focus":h},e.className),onFocus:be,onBlur:ve},n.createElement("div",{className:"k-signature-canvas",ref:y,role:"img",tabIndex:a.getTabIndex(e.tabIndex,e.disabled),id:e.id,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-describedby":e.ariaDescribedBy,style:e.inputStyle}),n.createElement("div",{className:"k-signature-actions k-signature-actions-top"},n.createElement(D.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-maximize",{"k-hidden":le}),ref:M,icon:"hyperlink-open",svgIcon:_.hyperlinkOpenIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:ye,title:de}),n.createElement(D.Button,{type:"button",className:a.classNames("k-signature-action","k-signature-minimize k-flip-h k-flip-v",{"k-hidden":ce}),ref:j,icon:"hyperlink-open",svgIcon:_.hyperlinkOpenIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:X,title:pe})),!e.hideLine&&n.createElement("div",{className:"k-signature-line",style:{zIndex:2,pointerEvents:"none"}}),n.createElement("div",{className:"k-signature-actions k-signature-actions-bottom"},ue&&n.createElement(D.Button,{type:"button",className:"k-signature-action k-signature-clear",icon:"x",svgIcon:_.xIcon,size:e.size,rounded:e.rounded,fillMode:"flat",onClick:he,title:me})),f&&n.createElement(ze.Dialog,{ref:F},n.createElement(E,{...e,...Q(),value:ae,maximized:!0,exportScale:1/I*L,open:!1,onChange:ge,onClose:ke})),g&&n.createElement(a.WatermarkOverlay,{message:v}))});E.propTypes={value:s.string,width:s.number,height:s.number,tabIndex:s.number,dir:s.string,ariaDescribedBy:s.string,ariaLabelledBy:s.string,ariaLabel:s.string,readOnly:s.bool,disabled:s.bool,validationMessage:s.string,required:s.bool,onChange:s.func,onFocus:s.func,onBlur:s.func,onOpen:s.func,onClose:s.func,size:s.oneOf(["small","medium","large"]),rounded:s.oneOf(["small","medium","large","none"]),fillMode:s.oneOf(["solid","flat","outline"])};const l={strokeWidth:1,smooth:!1,popupScale:ee,exportScale:te,maximizable:!0,disabled:!1,required:!1,validityStyles:!0,onChange:c=>a.noop,onFocus:c=>a.noop,onBlur:c=>a.noop,onOpen:c=>a.noop,onClose:c=>a.noop,size:void 0,rounded:void 0,fillMode:void 0};E.displayName="KendoSignature";exports.Signature=E;exports.SignaturePropsContext=ne;
|
package/signature/Signature.mjs
CHANGED
|
@@ -5,92 +5,90 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { SignaturePad as
|
|
8
|
+
import { SignaturePad as Me } from "@progress/kendo-inputs-common";
|
|
9
9
|
import { Button as R } from "@progress/kendo-react-buttons";
|
|
10
|
-
import { validatePackage as
|
|
11
|
-
import { Dialog as
|
|
12
|
-
import { useLocalization as
|
|
10
|
+
import { validatePackage as Le, getLicenseMessage as we, usePropsContext as Ie, noop as f, useIsomorphicLayoutEffect as Pe, useWebMcpRegister as Re, dispatchEvent as C, classNames as T, kendoThemeMaps as J, getTabIndex as Te, WatermarkOverlay as Be, createPropsContext as De } from "@progress/kendo-react-common";
|
|
11
|
+
import { Dialog as Fe } from "@progress/kendo-react-dialogs";
|
|
12
|
+
import { useLocalization as _e } from "@progress/kendo-react-intl";
|
|
13
13
|
import a from "prop-types";
|
|
14
14
|
import * as o from "react";
|
|
15
|
-
import { signatureMaximize as
|
|
16
|
-
import { packageMetadata as
|
|
17
|
-
import { hasParent as
|
|
18
|
-
import { hyperlinkOpenIcon as
|
|
19
|
-
const
|
|
20
|
-
const
|
|
15
|
+
import { signatureMaximize as Q, messages as B, signatureMinimize as Y, signatureClear as Z } from "../messages/index.mjs";
|
|
16
|
+
import { packageMetadata as ee } from "../package-metadata.mjs";
|
|
17
|
+
import { hasParent as We } from "./utils/index.mjs";
|
|
18
|
+
import { hyperlinkOpenIcon as te, xIcon as Ne } from "@progress/kendo-svg-icons";
|
|
19
|
+
const qe = 250, Ge = 84, ne = 3, ae = 2, Ae = "#000000", Ve = "#ffffff", oe = (d) => d !== void 0, je = De(), D = o.forwardRef((d, re) => {
|
|
20
|
+
const ie = !Le(ee, { component: "Signature" }), se = we(ee), F = Ie(je, d), e = o.useMemo(
|
|
21
21
|
() => ({
|
|
22
|
-
strokeWidth:
|
|
23
|
-
smooth:
|
|
24
|
-
popupScale:
|
|
25
|
-
exportScale:
|
|
26
|
-
maximizable:
|
|
27
|
-
disabled:
|
|
28
|
-
required:
|
|
29
|
-
validityStyles:
|
|
30
|
-
onChange:
|
|
31
|
-
onFocus:
|
|
32
|
-
onBlur:
|
|
33
|
-
onOpen:
|
|
34
|
-
onClose:
|
|
35
|
-
size:
|
|
36
|
-
rounded:
|
|
37
|
-
fillMode:
|
|
38
|
-
...
|
|
22
|
+
strokeWidth: s.strokeWidth,
|
|
23
|
+
smooth: s.smooth,
|
|
24
|
+
popupScale: s.popupScale,
|
|
25
|
+
exportScale: s.exportScale,
|
|
26
|
+
maximizable: s.maximizable,
|
|
27
|
+
disabled: s.disabled,
|
|
28
|
+
required: s.required,
|
|
29
|
+
validityStyles: s.validityStyles,
|
|
30
|
+
onChange: s.onChange,
|
|
31
|
+
onFocus: s.onFocus,
|
|
32
|
+
onBlur: s.onBlur,
|
|
33
|
+
onOpen: s.onOpen,
|
|
34
|
+
onClose: s.onClose,
|
|
35
|
+
size: s.size,
|
|
36
|
+
rounded: s.rounded,
|
|
37
|
+
fillMode: s.fillMode,
|
|
38
|
+
...F
|
|
39
39
|
}),
|
|
40
|
-
[
|
|
41
|
-
),
|
|
42
|
-
|
|
43
|
-
},
|
|
44
|
-
r == null || r.loadImage(t.value),
|
|
40
|
+
[F]
|
|
41
|
+
), z = _e(), u = o.useRef(null), g = o.useRef(null), _ = o.useRef(null), W = o.useRef(null), S = o.useRef(null), [r, le] = o.useState(), [k, N] = o.useState(!1), [b, q] = o.useState(), [ce, ue] = o.useState(), G = oe(e.value) ? e.value : b, [de, me] = o.useState(!1), p = oe(e.open), m = p ? e.open : de, pe = e.disabled || e.maximized || !e.maximizable, fe = e.disabled || !e.maximized, ge = !(!(e.value || b) || e.disabled || e.readOnly), ke = z.toLanguageString(Q, B[Q]), be = z.toLanguageString(Y, B[Y]), ve = z.toLanguageString(Z, B[Z]), E = e.popupScale || ne, O = e.exportScale || ae, x = (t) => {
|
|
42
|
+
q(t), e.onChange && e.onChange({ value: t });
|
|
43
|
+
}, ye = (t) => {
|
|
44
|
+
r == null || r.loadImage(t.value), x(t.value);
|
|
45
45
|
};
|
|
46
46
|
o.useEffect(() => {
|
|
47
|
-
e.value !== b && (
|
|
47
|
+
e.value !== b && (q(e.value), r == null || r.loadImage(e.value));
|
|
48
48
|
}, [e.value]);
|
|
49
|
-
const
|
|
50
|
-
r == null || r.clear(),
|
|
49
|
+
const he = () => {
|
|
50
|
+
r == null || r.clear(), x();
|
|
51
51
|
}, v = o.useCallback(
|
|
52
52
|
(t) => {
|
|
53
|
-
p ||
|
|
53
|
+
p || me(t);
|
|
54
54
|
},
|
|
55
55
|
[p]
|
|
56
|
-
),
|
|
57
|
-
var n,
|
|
58
|
-
|
|
59
|
-
},
|
|
60
|
-
let t =
|
|
56
|
+
), Ce = (t) => {
|
|
57
|
+
var n, i;
|
|
58
|
+
$(t), (i = ((n = S.current) == null ? void 0 : n.element) || g.current) == null || i.focus();
|
|
59
|
+
}, M = o.useCallback(() => {
|
|
60
|
+
let t = Ae;
|
|
61
61
|
return !e.color && typeof document != "undefined" && u.current && (t = getComputedStyle(u.current).color), e.color || t;
|
|
62
62
|
}, [e.color]), L = o.useCallback(() => {
|
|
63
|
-
let t =
|
|
63
|
+
let t = Ve;
|
|
64
64
|
return !e.backgroundColor && typeof document != "undefined" && u.current && (t = getComputedStyle(u.current).backgroundColor), e.backgroundColor || t;
|
|
65
|
-
}, [e.backgroundColor]),
|
|
65
|
+
}, [e.backgroundColor]), A = () => ({
|
|
66
66
|
scale: e.maximized ? e.popupScale : 1,
|
|
67
|
-
color:
|
|
67
|
+
color: M(),
|
|
68
68
|
backgroundColor: L(),
|
|
69
69
|
strokeWidth: e.strokeWidth,
|
|
70
70
|
smooth: e.smooth,
|
|
71
|
-
readonly: e.readOnly
|
|
72
|
-
}),
|
|
73
|
-
const { width: n, height:
|
|
71
|
+
readonly: e.readOnly || e.disabled
|
|
72
|
+
}), V = async (t) => {
|
|
73
|
+
const { width: n, height: i } = t;
|
|
74
74
|
return await (r == null ? void 0 : r.exportImage({
|
|
75
|
-
width: n *
|
|
76
|
-
height:
|
|
75
|
+
width: n * O,
|
|
76
|
+
height: i * O
|
|
77
77
|
}));
|
|
78
78
|
};
|
|
79
79
|
o.useEffect(() => {
|
|
80
|
-
const t = g.current, n = new
|
|
81
|
-
return
|
|
80
|
+
const t = g.current, n = new Me(t, A());
|
|
81
|
+
return G && n.loadImage(G), le(n), () => n.destroy();
|
|
82
82
|
}, []), o.useEffect(() => {
|
|
83
83
|
r == null || r.setOptions({
|
|
84
|
-
onChange: async () =>
|
|
85
|
-
onDraw: () => G(!0),
|
|
86
|
-
onDrawEnd: () => G(!1)
|
|
84
|
+
onChange: async () => x(await V(K()))
|
|
87
85
|
});
|
|
88
|
-
}, [r]),
|
|
89
|
-
() => r == null ? void 0 : r.setOptions(
|
|
90
|
-
[e.readOnly, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
|
|
86
|
+
}, [r]), Pe(
|
|
87
|
+
() => r == null ? void 0 : r.setOptions(A()),
|
|
88
|
+
[e.readOnly, e.disabled, e.color, e.backgroundColor, e.strokeWidth, e.smooth]
|
|
91
89
|
), o.useEffect(() => {
|
|
92
|
-
var
|
|
93
|
-
const t = (c = (
|
|
90
|
+
var i, c;
|
|
91
|
+
const t = (c = (i = _.current) == null ? void 0 : i.element) == null ? void 0 : c.querySelector(".k-overlay");
|
|
94
92
|
if (!t)
|
|
95
93
|
return;
|
|
96
94
|
const n = () => v(!1);
|
|
@@ -99,80 +97,80 @@ const Ae = 250, Ve = 84, re = 3, se = 2, je = "#000000", Ue = "#ffffff", ae = (d
|
|
|
99
97
|
if (!m || typeof document == "undefined")
|
|
100
98
|
return;
|
|
101
99
|
const t = (n) => {
|
|
102
|
-
var
|
|
103
|
-
n.key === "Escape" && (v(!1), (c = (
|
|
100
|
+
var i, c;
|
|
101
|
+
n.key === "Escape" && (v(!1), (c = (i = S.current) == null ? void 0 : i.element) == null || c.focus());
|
|
104
102
|
};
|
|
105
103
|
return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
|
|
106
104
|
}, [m]), o.useEffect(() => {
|
|
107
105
|
var t, n;
|
|
108
|
-
e.maximized && ((n = (t =
|
|
106
|
+
e.maximized && ((n = (t = W.current) == null ? void 0 : t.element) == null || n.focus());
|
|
109
107
|
}, []);
|
|
110
|
-
const
|
|
108
|
+
const w = o.useCallback(() => {
|
|
111
109
|
var t;
|
|
112
110
|
return (t = g.current) == null ? void 0 : t.focus();
|
|
113
|
-
}, []), y = o.useCallback(() => e.value, [e.value]),
|
|
114
|
-
const t = e.validationMessage !== void 0,
|
|
111
|
+
}, []), y = o.useCallback(() => e.value, [e.value]), j = o.useCallback(() => e.name, [e.name]), h = o.useCallback(() => e.required, [e.required]), I = o.useCallback(() => {
|
|
112
|
+
const t = e.validationMessage !== void 0, i = !y(), c = e.valid !== void 0 ? e.valid : !h() || !i;
|
|
115
113
|
return {
|
|
116
114
|
customError: t,
|
|
117
115
|
valid: c,
|
|
118
|
-
valueMissing:
|
|
116
|
+
valueMissing: i
|
|
119
117
|
};
|
|
120
|
-
}, [e.validationMessage, e.valid, y,
|
|
118
|
+
}, [e.validationMessage, e.valid, y, h]), P = o.useCallback(() => e.validityStyles, [e.validityStyles]), U = o.useCallback(() => e, [e]), l = o.useCallback(() => {
|
|
121
119
|
const t = {
|
|
122
120
|
element: u.current,
|
|
123
|
-
focus:
|
|
121
|
+
focus: w
|
|
124
122
|
};
|
|
125
|
-
return Object.defineProperty(t, "name", { get:
|
|
123
|
+
return Object.defineProperty(t, "name", { get: j }), Object.defineProperty(t, "value", { get: y }), Object.defineProperty(t, "validity", { get: I }), Object.defineProperty(t, "validityStyles", { get: P }), Object.defineProperty(t, "required", { get: h }), Object.defineProperty(t, "props", { get: U }), Object.defineProperty(t, "color", { get: M }), Object.defineProperty(t, "backgroundColor", { get: L }), t;
|
|
126
124
|
}, [
|
|
127
|
-
|
|
125
|
+
j,
|
|
128
126
|
y,
|
|
129
|
-
P,
|
|
130
|
-
D,
|
|
131
|
-
C,
|
|
132
127
|
I,
|
|
133
|
-
|
|
128
|
+
P,
|
|
129
|
+
h,
|
|
134
130
|
w,
|
|
131
|
+
U,
|
|
132
|
+
M,
|
|
135
133
|
L
|
|
136
134
|
]);
|
|
137
|
-
o.useImperativeHandle(
|
|
138
|
-
const
|
|
139
|
-
o.useImperativeHandle(
|
|
140
|
-
const
|
|
135
|
+
o.useImperativeHandle(re, l);
|
|
136
|
+
const H = o.useRef(null);
|
|
137
|
+
o.useImperativeHandle(H, l), Re("signature", H, e, e.webMcp);
|
|
138
|
+
const ze = o.useCallback(
|
|
141
139
|
(t) => {
|
|
142
|
-
k || e.maximized || (
|
|
140
|
+
k || e.maximized || (N(!0), C(e.onFocus, t, l(), {}));
|
|
143
141
|
},
|
|
144
142
|
[k, e.onFocus, l]
|
|
145
|
-
),
|
|
143
|
+
), Se = o.useCallback(
|
|
146
144
|
(t) => {
|
|
147
|
-
|
|
145
|
+
We(t.relatedTarget, u.current) || (N(!1), C(e.onBlur, t, l(), {}));
|
|
148
146
|
},
|
|
149
147
|
[k, e.onBlur, l]
|
|
150
|
-
),
|
|
148
|
+
), Ee = o.useCallback(
|
|
151
149
|
async (t) => {
|
|
152
|
-
|
|
150
|
+
ue(await V(X())), v(!0), C(e.onOpen, t, l(), {});
|
|
153
151
|
},
|
|
154
152
|
[m, p, e.onOpen, e.value, b, l]
|
|
155
|
-
),
|
|
153
|
+
), $ = o.useCallback(
|
|
156
154
|
(t) => {
|
|
157
|
-
v(!1),
|
|
155
|
+
v(!1), C(e.onClose, t, l(), {});
|
|
158
156
|
},
|
|
159
157
|
[m, p, e.onClose, l]
|
|
160
|
-
),
|
|
161
|
-
|
|
162
|
-
},
|
|
163
|
-
var
|
|
164
|
-
const t = e.width || ((
|
|
158
|
+
), Oe = () => {
|
|
159
|
+
he(), w();
|
|
160
|
+
}, K = () => {
|
|
161
|
+
var i, c;
|
|
162
|
+
const t = e.width || ((i = u.current) == null ? void 0 : i.offsetWidth) || qe, n = e.height || ((c = u.current) == null ? void 0 : c.offsetHeight) || Ge;
|
|
165
163
|
return {
|
|
166
164
|
width: t,
|
|
167
165
|
height: n
|
|
168
166
|
};
|
|
169
|
-
},
|
|
170
|
-
const { width: t, height: n } =
|
|
167
|
+
}, X = () => {
|
|
168
|
+
const { width: t, height: n } = K();
|
|
171
169
|
return {
|
|
172
|
-
width: t *
|
|
173
|
-
height: n *
|
|
170
|
+
width: t * E,
|
|
171
|
+
height: n * E
|
|
174
172
|
};
|
|
175
|
-
},
|
|
173
|
+
}, xe = !P() || I().valid;
|
|
176
174
|
return /* @__PURE__ */ o.createElement(
|
|
177
175
|
"div",
|
|
178
176
|
{
|
|
@@ -184,19 +182,19 @@ const Ae = 250, Ve = 84, re = 3, se = 2, je = "#000000", Ue = "#ffffff", ae = (d
|
|
|
184
182
|
"k-signature",
|
|
185
183
|
{
|
|
186
184
|
"k-signature-maximized": e.maximized,
|
|
187
|
-
[`k-signature-${
|
|
185
|
+
[`k-signature-${J.sizeMap[e.size] || e.size}`]: e.size,
|
|
188
186
|
[`k-signature-${e.fillMode}`]: e.fillMode,
|
|
189
187
|
[`k-input-${e.fillMode}`]: e.fillMode,
|
|
190
|
-
[`k-rounded-${
|
|
191
|
-
"k-invalid": !
|
|
188
|
+
[`k-rounded-${J.roundedMap[e.rounded] || e.rounded}`]: e.rounded,
|
|
189
|
+
"k-invalid": !xe,
|
|
192
190
|
"k-required": e.required,
|
|
193
191
|
"k-disabled": e.disabled,
|
|
194
192
|
"k-focus": k
|
|
195
193
|
},
|
|
196
194
|
e.className
|
|
197
195
|
),
|
|
198
|
-
onFocus:
|
|
199
|
-
onBlur:
|
|
196
|
+
onFocus: ze,
|
|
197
|
+
onBlur: Se
|
|
200
198
|
},
|
|
201
199
|
/* @__PURE__ */ o.createElement(
|
|
202
200
|
"div",
|
|
@@ -204,7 +202,7 @@ const Ae = 250, Ve = 84, re = 3, se = 2, je = "#000000", Ue = "#ffffff", ae = (d
|
|
|
204
202
|
className: "k-signature-canvas",
|
|
205
203
|
ref: g,
|
|
206
204
|
role: "img",
|
|
207
|
-
tabIndex:
|
|
205
|
+
tabIndex: Te(e.tabIndex, e.disabled),
|
|
208
206
|
id: e.id,
|
|
209
207
|
"aria-label": e.ariaLabel,
|
|
210
208
|
"aria-labelledby": e.ariaLabelledBy,
|
|
@@ -217,66 +215,66 @@ const Ae = 250, Ve = 84, re = 3, se = 2, je = "#000000", Ue = "#ffffff", ae = (d
|
|
|
217
215
|
{
|
|
218
216
|
type: "button",
|
|
219
217
|
className: T("k-signature-action", "k-signature-maximize", {
|
|
220
|
-
"k-hidden":
|
|
218
|
+
"k-hidden": pe
|
|
221
219
|
}),
|
|
222
|
-
ref:
|
|
220
|
+
ref: S,
|
|
223
221
|
icon: "hyperlink-open",
|
|
224
|
-
svgIcon:
|
|
222
|
+
svgIcon: te,
|
|
225
223
|
size: e.size,
|
|
226
224
|
rounded: e.rounded,
|
|
227
225
|
fillMode: "flat",
|
|
228
|
-
onClick:
|
|
229
|
-
title:
|
|
226
|
+
onClick: Ee,
|
|
227
|
+
title: ke
|
|
230
228
|
}
|
|
231
229
|
), /* @__PURE__ */ o.createElement(
|
|
232
230
|
R,
|
|
233
231
|
{
|
|
234
232
|
type: "button",
|
|
235
|
-
className: T("k-signature-action", "k-signature-minimize", {
|
|
236
|
-
"k-hidden":
|
|
233
|
+
className: T("k-signature-action", "k-signature-minimize k-flip-h k-flip-v", {
|
|
234
|
+
"k-hidden": fe
|
|
237
235
|
}),
|
|
238
|
-
ref:
|
|
236
|
+
ref: W,
|
|
239
237
|
icon: "hyperlink-open",
|
|
240
|
-
svgIcon:
|
|
238
|
+
svgIcon: te,
|
|
241
239
|
size: e.size,
|
|
242
240
|
rounded: e.rounded,
|
|
243
241
|
fillMode: "flat",
|
|
244
|
-
onClick:
|
|
245
|
-
title:
|
|
242
|
+
onClick: $,
|
|
243
|
+
title: be
|
|
246
244
|
}
|
|
247
245
|
)),
|
|
248
246
|
!e.hideLine && /* @__PURE__ */ o.createElement("div", { className: "k-signature-line", style: { zIndex: 2, pointerEvents: "none" } }),
|
|
249
|
-
/* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" },
|
|
247
|
+
/* @__PURE__ */ o.createElement("div", { className: "k-signature-actions k-signature-actions-bottom" }, ge && /* @__PURE__ */ o.createElement(
|
|
250
248
|
R,
|
|
251
249
|
{
|
|
252
250
|
type: "button",
|
|
253
251
|
className: "k-signature-action k-signature-clear",
|
|
254
252
|
icon: "x",
|
|
255
|
-
svgIcon:
|
|
253
|
+
svgIcon: Ne,
|
|
256
254
|
size: e.size,
|
|
257
255
|
rounded: e.rounded,
|
|
258
256
|
fillMode: "flat",
|
|
259
|
-
onClick:
|
|
260
|
-
title:
|
|
257
|
+
onClick: Oe,
|
|
258
|
+
title: ve
|
|
261
259
|
}
|
|
262
260
|
)),
|
|
263
|
-
m && /* @__PURE__ */ o.createElement(
|
|
264
|
-
|
|
261
|
+
m && /* @__PURE__ */ o.createElement(Fe, { ref: _ }, /* @__PURE__ */ o.createElement(
|
|
262
|
+
D,
|
|
265
263
|
{
|
|
266
264
|
...e,
|
|
267
|
-
...
|
|
268
|
-
value:
|
|
265
|
+
...X(),
|
|
266
|
+
value: ce,
|
|
269
267
|
maximized: !0,
|
|
270
|
-
exportScale: 1 /
|
|
268
|
+
exportScale: 1 / E * O,
|
|
271
269
|
open: !1,
|
|
272
|
-
onChange:
|
|
273
|
-
onClose:
|
|
270
|
+
onChange: ye,
|
|
271
|
+
onClose: Ce
|
|
274
272
|
}
|
|
275
273
|
)),
|
|
276
|
-
|
|
274
|
+
ie && /* @__PURE__ */ o.createElement(Be, { message: se })
|
|
277
275
|
);
|
|
278
276
|
});
|
|
279
|
-
|
|
277
|
+
D.propTypes = {
|
|
280
278
|
value: a.string,
|
|
281
279
|
width: a.number,
|
|
282
280
|
height: a.number,
|
|
@@ -298,11 +296,11 @@ F.propTypes = {
|
|
|
298
296
|
rounded: a.oneOf(["small", "medium", "large", "none"]),
|
|
299
297
|
fillMode: a.oneOf(["solid", "flat", "outline"])
|
|
300
298
|
};
|
|
301
|
-
const
|
|
299
|
+
const s = {
|
|
302
300
|
strokeWidth: 1,
|
|
303
301
|
smooth: !1,
|
|
304
|
-
popupScale:
|
|
305
|
-
exportScale:
|
|
302
|
+
popupScale: ne,
|
|
303
|
+
exportScale: ae,
|
|
306
304
|
maximizable: !0,
|
|
307
305
|
disabled: !1,
|
|
308
306
|
required: !1,
|
|
@@ -316,8 +314,8 @@ const i = {
|
|
|
316
314
|
rounded: void 0,
|
|
317
315
|
fillMode: void 0
|
|
318
316
|
};
|
|
319
|
-
|
|
317
|
+
D.displayName = "KendoSignature";
|
|
320
318
|
export {
|
|
321
|
-
|
|
322
|
-
|
|
319
|
+
D as Signature,
|
|
320
|
+
je as SignaturePropsContext
|
|
323
321
|
};
|