@progress/kendo-react-inputs/signature/Signature.js

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ce=require("@progress/kendo-inputs-common"),_=require("@progress/kendo-react-buttons"),r=require("@progress/kendo-react-common"),Se=require("@progress/kendo-react-dialogs"),ze=require("@progress/kendo-react-intl"),a=require("prop-types"),Oe=require("react"),p=require("../messages/index.js"),Ee=require("../package-metadata.js"),xe=require("./utils/index.js"),N=require("@progress/kendo-svg-icons");function Me(c){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const f in c)if(f!=="default"){const b=Object.getOwnPropertyDescriptor(c,f);Object.defineProperty(k,f,b.get?b:{enumerable:!0,get:()=>c[f]})}}return k.default=c,Object.freeze(k)}const n=Me(Oe),we=250,Ie=84,ne=3,oe=2,Le="#000000",Pe="#ffffff",te=c=>c!==void 0,ae=r.createPropsContext(),E=n.forwardRef((c,k)=>{const f=!r.validatePackage(Ee.packageMetadata,{component:"Signature"}),b=r.usePropsContext(ae,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,...b}),[b]),x=ze.useLocalization(),d=n.useRef(null),v=n.useRef(null),F=n.useRef(null),j=n.useRef(null),M=n.useRef(null),[s,re]=n.useState(),[h,W]=n.useState(!1),[w,G]=n.useState(!1),[C,A]=n.useState(),[se,ie]=n.useState(),V=te(e.value)?e.value:C,[le,ce]=n.useState(!1),y=te(e.open),g=y?e.open:le,ue=e.maximized||w||!e.maximizable||e.disabled,de=!(e.maximized&&!w),me=!(!(e.value||C)||w||e.readOnly||e.disabled),U=x.toLanguageString(p.signatureMaximize,p.messages[p.signatureMaximize]),H=x.toLanguageString(p.signatureMinimize,p.messages[p.signatureMinimize]),$=x.toLanguageString(p.signatureClear,p.messages[p.signatureClear]),I=e.popupScale||ne,L=e.exportScale||oe,P=t=>{A(t),e.onChange&&e.onChange({value:t})},pe=t=>{s==null||s.loadImage(t.value),P(t.value)};n.useEffect(()=>{e.value!==C&&(A(e.value),s==null||s.loadImage(e.value))},[e.value]);const fe=()=>{s==null||s.clear(),P()},S=n.useCallback(t=>{y||ce(t)},[y]),ge=t=>{var o,i;Y(t),(i=((o=M.current)==null?void 0:o.element)||v.current)==null||i.focus()},q=n.useCallback(()=>{let t=Le;return!e.color&&typeof document!="undefined"&&d.current&&(t=getComputedStyle(d.current).color),e.color||t},[e.color]),D=n.useCallback(()=>{let t=Pe;return!e.backgroundColor&&typeof document!="undefined"&&d.current&&(t=getComputedStyle(d.current).backgroundColor),e.backgroundColor||t},[e.backgroundColor]),K=()=>({scale:e.maximized?e.popupScale:1,color:q(),backgroundColor:D(),strokeWidth:e.strokeWidth,smooth:e.smooth,readonly:e.readOnly}),X=async t=>{const{width:o,height:i}=t;return await(s==null?void 0:s.exportImage({width:o*L,height:i*L}))};n.useEffect(()=>{const t=v.current,o=new Ce.SignaturePad(t,K());return V&&o.loadImage(V),re(o),()=>o.destroy()},[]),n.useEffect(()=>{s==null||s.setOptions({onChange:async()=>P(await X(Z())),onDraw:()=>G(!0),onDrawEnd:()=>G(!1)})},[s]),r.useIsomorphicLayoutEffect(()=>s==null?void 0:s.setOptions(K()),[e.readOnly,e.color,e.backgroundColor,e.strokeWidth,e.smooth]),n.useEffect(()=>{var i,u;const t=(u=(i=F.current)==null?void 0:i.element)==null?void 0:u.querySelector(".k-overlay");if(!t)return;const o=()=>S(!1);return t.addEventListener("click",o),()=>t.removeEventListener("click",o)},[g]),n.useEffect(()=>{if(!g||typeof document=="undefined")return;const t=o=>{var i,u;o.key==="Escape"&&(S(!1),(u=(i=M.current)==null?void 0:i.element)==null||u.focus())};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[g]),n.useEffect(()=>{var t,o;e.maximized&&((o=(t=j.current)==null?void 0:t.element)==null||o.focus())},[]);const R=n.useCallback(()=>{var t;return(t=v.current)==null?void 0:t.focus()},[]),z=n.useCallback(()=>e.value,[e.value]),J=n.useCallback(()=>e.name,[e.name]),O=n.useCallback(()=>e.required,[e.required]),T=n.useCallback(()=>{const t=e.validationMessage!==void 0,i=!z(),u=e.valid!==void 0?e.valid:!O()||!i;return{customError:t,valid:u,valueMissing:i}},[e.validationMessage,e.valid,z,O]),B=n.useCallback(()=>e.validityStyles,[e.validityStyles]),Q=n.useCallback(()=>e,[e]),m=n.useCallback(()=>{const t={element:d.current,focus:R};return Object.defineProperty(t,"name",{get:J}),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:Q}),Object.defineProperty(t,"color",{get:q}),Object.defineProperty(t,"backgroundColor",{get:D}),t},[J,z,T,B,O,R,Q,q,D]);n.useImperativeHandle(k,m);const ke=n.useCallback(t=>{h||e.maximized||(W(!0),r.dispatchEvent(e.onFocus,t,m(),{}))},[h,e.onFocus,m]),be=n.useCallback(t=>{xe.hasParent(t.relatedTarget,d.current)||(W(!1),r.dispatchEvent(e.onBlur,t,m(),{}))},[h,e.onBlur,m]),ye=n.useCallback(async t=>{ie(await X(ee())),S(!0),r.dispatchEvent(e.onOpen,t,m(),{})},[g,y,e.onOpen,e.value,C,m]),Y=n.useCallback(t=>{S(!1),r.dispatchEvent(e.onClose,t,m(),{})},[g,y,e.onClose,m]),ve=()=>{fe(),R()},Z=()=>{var i,u;const t=e.width||((i=d.current)==null?void 0:i.offsetWidth)||we,o=e.height||((u=d.current)==null?void 0:u.offsetHeight)||Ie;return{width:t,height:o}},ee=()=>{const{width:t,height:o}=Z();return{width:t*I,height:o*I}},he=!B()||T().valid;return n.createElement("div",{ref:d,dir:e.dir,style:{width:e.width,height:e.height,...e.style},className:r.classNames("k-input","k-signature",{"k-signature-maximized":e.maximized,[`k-signature-${r.kendoThemeMaps.sizeMap[e.size]||e.size}`]:e.size,[`k-signature-${e.fillMode}`]:e.fillMode,[`k-input-${e.fillMode}`]:e.fillMode,[`k-rounded-${r.kendoThemeMaps.roundedMap[e.rounded]||e.rounded}`]:e.rounded,"k-invalid":!he,"k-required":e.required,"k-disabled":e.disabled,"k-focus":h},e.className),onFocus:ke,onBlur:be},n.createElement("div",{className:"k-signature-canvas",ref:v,tabIndex:r.getTabIndex(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}),n.createElement("div",{className:"k-signature-actions k-signature-actions-top"},n.createElement(_.Button,{type:"button",className:r.classNames("k-signature-action","k-signature-maximize",{"k-hidden":e.disabled||ue}),ref:M,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:ye,"aria-label":U,title:U}),n.createElement(_.Button,{type:"button",className:r.classNames("k-signature-action","k-signature-minimize","k-rotate-180",{"k-hidden":e.disabled||de}),ref:j,icon:"hyperlink-open",svgIcon:N.hyperlinkOpenIcon,fillMode:"flat",size:e.size,onClick:Y,"aria-label":H,title:H})),!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"},me&&n.createElement(_.Button,{type:"button",className:"k-signature-action k-signature-clear",icon:"x",svgIcon:N.xIcon,fillMode:"flat",size:e.size,onClick:ve,"aria-label":$,title:$})),g&&n.createElement(Se.Dialog,{ref:F},n.createElement(E,{...e,...ee(),value:se,maximized:!0,exportScale:1/I*L,open:!1,onChange:pe,onClose:ge})),f&&n.createElement(r.WatermarkOverlay,null))});E.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 l={strokeWidth:1,smooth:!1,popupScale:ne,exportScale:oe,maximizable:!0,disabled:!1,required:!1,validityStyles:!0,onChange:c=>r.noop,onFocus:c=>r.noop,onBlur:c=>r.noop,onOpen:c=>r.noop,onClose:c=>r.noop,size:"medium",rounded:"medium",fillMode:"solid"};E.displayName="KendoSignature";exports.Signature=E;exports.SignaturePropsContext=ae;