@zh-keyboard/react 0.2.1 → 0.2.2

package/dist/zh-keyboard-react.umd.cjs

@@ -45,5 +45,5 @@ React keys must be passed directly to JSX without using spread:
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
-*/var Fa;function _y(){return Fa||(Fa=1,function(a){(function(){var s={}.hasOwnProperty;function l(){for(var x="",w=0;w<arguments.length;w++){var E=arguments[w];E&&(x=j(x,h(E)))}return x}function h(x){if(typeof x=="string"||typeof x=="number")return x;if(typeof x!="object")return"";if(Array.isArray(x))return l.apply(null,x);if(x.toString!==Object.prototype.toString&&!x.toString.toString().includes("[native code]"))return x.toString();var w="";for(var E in x)s.call(x,E)&&x[E]&&(w=j(w,E));return w}function j(x,w){return w?x?x+" "+w:x+w:x}a.exports?(l.default=l,a.exports=l):window.classNames=l})()}(or)),or.exports}var wy=_y();const qa=Hr(wy);let Ua=null;function xy(a){Ua=a}function yn(){return Ua}function ky(a=!1){const[s,l]=M.useState(!1),[h,j]=M.useState(0);return M.useEffect(()=>{async function x(){const E=yn();if(E)try{l(await E.initialize({onProgress:T=>{j(T)}}))}catch(T){console.error("初始化手写识别服务失败:",T),l(!1)}else console.warn("未注册手写识别服务"),l(!1)}async function w(){const E=yn();if(E&&s)try{await E.close(),l(!1)}catch(T){console.error("关闭手写识别服务失败:",T)}}return a&&x(),()=>{w()}},[a,s]),{recognizerInitialized:s,recognizerProgress:h}}const sr="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M21,11H6.83L10.41,7.41L9,6L3,12L9,18L10.41,16.58L6.83,13H21V11Z'%20/%3e%3c/svg%3e",ur="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19,7V11H5.83L9.41,7.41L8,6L2,12L8,18L9.41,16.58L5.83,13H21V7H19Z'%20/%3e%3c/svg%3e",Va=({candidates:a,onSelect:s})=>{function l(h){s(h)}return A.jsx("div",{className:"zhk-candidate-list",children:a.map(h=>A.jsx("button",{className:"zhk-candidate-list__item",onClick:()=>l(h),children:h},`candidate-${h}`))})},Ey=({recognizerInitialized:a,recognizerProgress:s,onKey:l,onExit:h})=>{const j=M.useRef(null),x=M.useRef(null),w=M.useRef(null),E=M.useRef(!1),[T,q]=M.useState([]),Y=M.useCallback(async()=>{if(!w.current||w.current.getStrokeData().length===0||E.current)return;const re=yn();if(re){E.current=!0;try{const ae=[...w.current.getStrokeData()],he=await re.recognize(ae);q(he)}catch(ae){console.error("识别笔迹失败:",ae)}finally{E.current=!1}}else console.warn("手写识别服务不可用")},[]),U=M.useCallback(()=>{j.current&&(w.current&&w.current.destroy(),w.current=new dy(j.current,{onDrawEnd:Y}))},[Y]),[H,F]=Ka(x);M.useLayoutEffect(()=>{if(F&&a)return U(),()=>{w.current&&w.current.destroy()}},[F,a,U]);function X(){w.current&&w.current.clearCanvas()}function W(re){l({key:re}),q([]),X()}return A.jsxs("div",{className:"handwriting-input",children:[A.jsx(Va,{candidates:T,onSelect:W}),A.jsx("div",{ref:x,className:"handwriting-content",children:F?A.jsxs(A.Fragment,{children:[A.jsxs("div",{className:"handwriting-buttons",children:[A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"。"}),children:"。"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"？"}),children:"？"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"！"}),children:"！"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"、"}),children:"、"})]}),A.jsx("div",{className:"handwriting-canvas-container",children:a?A.jsx("canvas",{ref:j,className:"handwriting-canvas",width:F,height:F}):A.jsxs("div",{className:"handwriting-loading",style:{width:`${F}px`,height:`${F}px`},children:[A.jsx("div",{className:"loading-text",children:"正在加载手写识别..."}),A.jsx("div",{className:"progress-bar",children:A.jsx("div",{className:"progress-fill",style:{width:`${s*100}%`}})}),A.jsxs("div",{className:"progress-text",children:[Math.round(s*100),"%"]})]})}),A.jsxs("div",{className:"handwriting-buttons",children:[A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"delete",isControl:!0}),children:A.jsx("img",{src:sr,alt:"删除"})}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:h,children:"返回"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"，"}),children:"，"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"enter",isControl:!0}),children:A.jsx("img",{src:ur,alt:"回车"})})]})]}):null})]})},Sy="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M6,18H18V16H6M12,8.41L16.59,13L18,11.58L12,5.58L6,11.58L7.41,13L12,8.41Z'%20/%3e%3c/svg%3e",Ha="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M3%2015H5V19H19V15H21V19C21%2020.1%2020.1%2021%2019%2021H5C3.9%2021%203%2020.1%203%2019V15Z'%20/%3e%3c/svg%3e",jy="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'%20/%3e%3c/svg%3e",Oy=({candidates:a,onSelect:s,onClose:l})=>{function h(x){s(x)}function j(){l()}return A.jsxs("div",{className:"zhk-selection",children:[A.jsx("div",{className:"zhk-selection__list",children:a.map(x=>A.jsx("div",{className:"zhk-selection__text",onClick:()=>h(x),children:x},x))}),A.jsx("div",{className:"zhk-selection__func",children:A.jsx("button",{className:"zhk-selection__func-btn",onClick:j,children:"返回"})})]})},Cy=({currentPinyin:a,onInput:s,setCurrentPinyin:l})=>{const h=M.useMemo(()=>new hy,[]),[j,x]=M.useState([]),[w,E]=M.useState(!1);M.useEffect(()=>{async function Y(){x(await h.processInput(a))}Y()},[a,h]);const T=M.useMemo(()=>j.slice(0,30),[j]);function q(Y){h.selectCandidate(Y),s(Y),l(""),E(!1)}return A.jsxs("div",{className:"zhk-candidate",children:[A.jsxs("div",{className:"zhk-candidate__container",children:[a&&A.jsx("div",{className:"zhk-candidate__pinyin",children:a}),A.jsxs("div",{className:"zhk-candidate__bottom-container",children:[j.length>0&&A.jsx(Va,{candidates:T,onSelect:q}),j.length>0&&A.jsx("button",{className:"zhk-candidate__more",onClick:()=>E(!0),children:A.jsx("img",{src:jy,alt:"更多"})})]})]}),w&&A.jsx(Oy,{candidates:j,onSelect:q,onClose:()=>E(!1)})]})},Ty=({enableHandwriting:a,mode:s,onKey:l,setMode:h})=>{const[j,x]=M.useState(!1),[w,E]=M.useState(""),T=M.useMemo(()=>s==="zh",[s]),q=M.useMemo(()=>T?!0:j,[T,j]);function Y(ie,pe=!1){l({key:ie,isControl:pe})}function U(){T?h("hand"):x(!j)}function H(){h("num")}function F(){h("symbol")}const X=["1","2","3","4","5","6","7","8","9","0"],W=[["q","w","e","r","t","y","u","i","o","p"],["a","s","d","f","g","h","j","k","l"],["z","x","c","v","b","n","m"]];function re(){if(s==="zh"&&w){E(w.slice(0,-1));return}Y("delete",!0)}function ae(ie){if(s==="zh"){E(w+ie);return}const pe=j?ie.toUpperCase():ie;Y(pe)}function he(){h(s==="zh"?"en":"zh")}const Ae=M.useMemo(()=>a?"手写":"-",[a]),ge=M.useMemo(()=>!a,[a]);return A.jsxs("div",{className:"zhk-base",children:[A.jsx("div",{className:"zhk-base__row",children:s==="zh"?A.jsx(Cy,{currentPinyin:w,onInput:ie=>Y(ie,!1),onKey:l,setCurrentPinyin:E}):X.map(ie=>A.jsx("button",{className:"zhk-base__key zhk-base__key--letter",onClick:()=>ae(ie),children:ie},`number-${ie}`))}),W.map((ie,pe)=>A.jsxs("div",{className:"zhk-base__row",children:[pe===2&&A.jsx("button",{className:`zhk-base__key zhk-base__key--function zhk-base__key--shift ${!T&&j?"zhk-base__key--active":""} ${T&&ge?"zhk-base__key--disabled":""}`,disabled:T&&ge,onClick:U,children:T?Ae:A.jsx("img",{src:Sy,className:"zhk-base__key-icon",alt:"Shift"})}),ie.map(ce=>A.jsx("button",{className:"zhk-base__key zhk-base__key--letter",onClick:()=>ae(ce),children:q?ce.toUpperCase():ce},ce)),pe===2&&A.jsx("button",{className:"zhk-base__key zhk-base__key--function zhk-base__key--delete",onClick:re,children:A.jsx("img",{src:sr,className:"zhk-base__key-icon",alt:"Delete"})})]},`row-${ie.join("")}`)),A.jsxs("div",{className:"zhk-base__row",children:[A.jsx("button",{className:"zhk-base__key zhk-base__key--function",onClick:F,children:"符"}),A.jsx("button",{className:"zhk-base__key zhk-base__key--function",onClick:H,children:"123"}),A.jsx("button",{className:"zhk-base__key",onClick:()=>Y(","),children:"，"}),A.jsx("button",{className:"zhk-base__key zhk-base__key--space",onClick:()=>Y(" "),children:A.jsx("img",{src:Ha,className:"zhk-base__key-icon",alt:"Space"})}),A.jsx("button",{className:"zhk-base__key",onClick:()=>Y("。"),children:"。"}),A.jsxs("button",{className:"zhk-base__key zhk-base__key--function",onClick:he,children:[A.jsx("span",{className:"zhk-base__toggle-main",children:s==="zh"?"中":"英"}),A.jsxs("span",{className:"zhk-base__toggle-sub",children:["/",s==="zh"?"英":"中"]})]}),A.jsx("button",{className:"zhk-base__key zhk-base__key--function",onClick:()=>Y("enter",!0),children:A.jsx("img",{src:ur,className:"zhk-base__key-icon",alt:"Enter"})})]})]})},Py=({onKey:a,onExit:s})=>{const l=[["1","2","3"],["4","5","6"],["7","8","9"],["back","0","space"]],h=[{key:"delete",icon:sr,text:"",alt:"Delete"},{key:".",icon:"",text:".",alt:"."},{key:"@",icon:"",text:"@",alt:"@"},{key:"enter",icon:ur,text:"",alt:"Enter"}];function j(E){a({key:E})}function x(E,T=!0){a({key:E,isControl:T})}function w(){s()}return A.jsx("div",{className:"num-keyboard",children:A.jsxs("div",{className:"num-keyboard__container",children:[A.jsx("div",{className:"num-keyboard__left",children:A.jsx("div",{className:"num-keyboard__rows",children:l.map(E=>A.jsx("div",{className:"num-keyboard__row",children:E.map(T=>A.jsx("button",{className:`num-keyboard__key ${T==="back"?"num-keyboard__key--back":""} ${T==="space"?"num-keyboard__key--space":""}`,onClick:()=>T==="back"?w():j(T==="space"?" ":T),children:T==="back"?"返回":T==="space"?A.jsx("img",{src:Ha,className:"zhk-base__key-icon",alt:"Space"}):T},`key-${E.join("")}-${T}`))},`row-${E.join("")}`))})}),A.jsx("div",{className:"num-keyboard__right",children:h.map(E=>A.jsx("button",{className:"num-keyboard__key num-keyboard__key--function",onClick:()=>E.key==="."||E.key==="@"?j(E.key):x(E.key),children:E.icon?A.jsx("img",{src:E.icon,className:"num-keyboard__key-icon",alt:E.alt}):A.jsx("span",{children:E.text})},`func-${E.key}`))})]})})},Ay="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M18,20V10H6V20H18M18,8A2,2%200%200,1%2020,10V20A2,2%200%200,1%2018,22H6C4.89,22%204,21.1%204,20V10A2,2%200%200,1%206,8H15V6A3,3%200%200,0%2012,3A3,3%200%200,0%209,6H7A5,5%200%200,1%2012,1A5,5%200%200,1%2017,6V8H18M12,17A2,2%200%200,1%2010,15A2,2%200%200,1%2012,13A2,2%200%200,1%2014,15A2,2%200%200,1%2012,17Z'%20/%3e%3c/svg%3e",Ry="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12,17C10.89,17%2010,16.1%2010,15C10,13.89%2010.89,13%2012,13A2,2%200%200,1%2014,15A2,2%200%200,1%2012,17M18,20V10H6V20H18M18,8A2,2%200%200,1%2020,10V20A2,2%200%200,1%2018,22H6C4.89,22%204,21.1%204,20V10C4,8.89%204.89,8%206,8H7V6A5,5%200%200,1%2012,1A5,5%200%200,1%2017,6V8H18M12,3A3,3%200%200,0%209,6V8H15V6A3,3%200%200,0%2012,3Z'%20/%3e%3c/svg%3e",Dy=({onKey:a,onExit:s})=>{const l="!@#$%^&*(){}[]<>/\\|:;\"',.,?+-=_~`€£¥₹©®™°",h="！＠＃￥％…＆＊（）｛｝［］＜＞／＼｜：；＂＇，。？＋－＝＿～·€£¥₹©®™°",[j,x]=M.useState("en"),w=M.useMemo(()=>j==="zh"?h:l,[j]),[E,T]=M.useState(!1);function q(H){a({key:H}),E||s()}function Y(){s()}function U(){T(!E)}return A.jsx("div",{className:"symbol-keyboard",children:A.jsxs("div",{className:"symbol-keyboard__content",children:[A.jsxs("div",{className:"symbol-keyboard__functions",children:[A.jsxs("div",{className:"symbol-keyboard__lang-selector",children:[A.jsx("button",{type:"button",className:`symbol-keyboard__lang-btn ${j==="zh"?"symbol-keyboard__lang-btn--active":""}`,onClick:()=>x("zh"),children:"中文"}),A.jsx("button",{className:`symbol-keyboard__lang-btn ${j==="en"?"symbol-keyboard__lang-btn--active":""}`,onClick:()=>x("en"),children:"英文"})]}),A.jsxs("div",{className:"symbol-keyboard__control-group",children:[A.jsx("button",{className:`symbol-keyboard__key symbol-keyboard__key--function symbol-keyboard__key--lock ${E?"symbol-keyboard__key--locked":""}`,onClick:U,children:E?A.jsx("img",{src:Ry,alt:"Lock closed"}):A.jsx("img",{src:Ay,alt:"Lock open"})}),A.jsx("button",{className:"symbol-keyboard__key symbol-keyboard__key--function symbol-keyboard__key--back",onClick:Y,children:"返回"})]})]}),A.jsx("div",{className:"symbol-keyboard__symbols-container",children:A.jsx("div",{className:"symbol-keyboard__symbols-grid",children:w.split("").map(H=>A.jsx("button",{className:"symbol-keyboard__key",onClick:()=>q(H),children:H},`key-${H}`))})})]})})},Iy=({defaultMode:a="en",enableHandwriting:s=!1,position:l="static",disableWhenNoFocus:h=!0,onKey:j,className:x,style:w})=>{const[E,T]=M.useState(a),q=M.useRef(a),[Y,U]=M.useState(null),H=M.useRef(null),F=Ru(),[X,W]=Ka(H),{recognizerInitialized:re,recognizerProgress:ae}=ky(s);M.useEffect(()=>{q.current=E},[E]);const[he,Ae]=M.useState(!1),ge=M.useCallback(()=>{if(W){const Ce=vy(F,H.current,l);U(Ce)}setTimeout(()=>{Ae(!0)},0)},[F,l,W]),ie=M.useMemo(()=>l==="static"||Ft(F),[F,l]);M.useLayoutEffect(()=>{ie&&(Ae(!1),ge())},[ie,ge]),M.useLayoutEffect(()=>{if(F&&Ft(F)){const Ce=F.dataset.inputmode;T(_t=>Ce||_t)}},[F]);const pe=M.useMemo(()=>h===!1?!1:!Ft(F),[h,F]);hn("scroll",ge,window,{passive:!0}),hn("resize",ge,window,{passive:!0});const ce=M.useCallback(Ce=>{if(Ce.isControl)switch(Ce.key){case"delete":Ft(F)&&gy(F);break}else F&&Ft(F)&&my(F,Ce.key);j&&j(Ce)},[j,F]),Fe=M.useCallback(()=>{T(q.current)},[]);return A.jsx("div",{ref:H,className:qa("zhk",{"zhk--floating":l==="float","zhk--bottom":l==="bottom","zhk--disabled":pe},x),style:{"--keyboard-height":`${W}px`,...Y,...w,display:ie?void 0:"none",opacity:he?1:0},onMouseDown:Ce=>Ce.preventDefault(),children:pe||!ie||!W?A.jsx("div",{className:qa("zhk__disabled-overlay"),children:A.jsx("span",{children:"请选择输入框以启用键盘"})}):A.jsxs(A.Fragment,{children:[E==="hand"&&A.jsx(Ey,{recognizerInitialized:re,recognizerProgress:ae,onKey:ce,onExit:Fe}),E==="num"&&A.jsx(Py,{onKey:ce,onExit:Fe}),E==="symbol"&&A.jsx(Dy,{onKey:ce,onExit:Fe}),(E==="en"||E==="zh")&&A.jsx(Ty,{mode:E,setMode:T,enableHandwriting:s,onKey:ce})]})})},Ga=a=>{const{position:s="static"}=a,l=A.jsx(Iy,{...a});return s==="static"?l:mt.createPortal(l,document.body)};se.ZhKeyboard=Ga,se.default=Ga,se.getHandwritingRecognizer=yn,se.registerHandwritingRecognizer=xy,Object.defineProperties(se,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+*/var Fa;function _y(){return Fa||(Fa=1,function(a){(function(){var s={}.hasOwnProperty;function l(){for(var x="",w=0;w<arguments.length;w++){var E=arguments[w];E&&(x=j(x,h(E)))}return x}function h(x){if(typeof x=="string"||typeof x=="number")return x;if(typeof x!="object")return"";if(Array.isArray(x))return l.apply(null,x);if(x.toString!==Object.prototype.toString&&!x.toString.toString().includes("[native code]"))return x.toString();var w="";for(var E in x)s.call(x,E)&&x[E]&&(w=j(w,E));return w}function j(x,w){return w?x?x+" "+w:x+w:x}a.exports?(l.default=l,a.exports=l):window.classNames=l})()}(or)),or.exports}var wy=_y();const qa=Hr(wy);let Ua=null;function xy(a){Ua=a}function yn(){return Ua}function ky(a=!1){const[s,l]=M.useState(!1),[h,j]=M.useState(0);return M.useEffect(()=>{async function x(){const E=yn();if(E)try{l(await E.initialize({onProgress:T=>{j(T)}}))}catch(T){console.error("初始化手写识别服务失败:",T),l(!1)}else console.warn("未注册手写识别服务"),l(!1)}async function w(){const E=yn();if(E&&s)try{await E.close(),l(!1)}catch(T){console.error("关闭手写识别服务失败:",T)}}return a&&x(),()=>{w()}},[a,s]),{recognizerInitialized:s,recognizerProgress:h}}const sr="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M21,11H6.83L10.41,7.41L9,6L3,12L9,18L10.41,16.58L6.83,13H21V11Z'%20/%3e%3c/svg%3e",ur="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M19,7V11H5.83L9.41,7.41L8,6L2,12L8,18L9.41,16.58L5.83,13H21V7H19Z'%20/%3e%3c/svg%3e",Va=({candidates:a,onSelect:s})=>{function l(h){s(h)}return A.jsx("div",{className:"zhk-candidate-list",children:a.map(h=>A.jsx("button",{className:"zhk-candidate-list__item",onClick:()=>l(h),children:h},`candidate-${h}`))})},Ey=({recognizerInitialized:a,recognizerProgress:s,onKey:l,onExit:h})=>{const j=M.useRef(null),x=M.useRef(null),w=M.useRef(null),E=M.useRef(!1),[T,q]=M.useState([]),Y=M.useCallback(async()=>{if(!w.current||w.current.getStrokeData().length===0||E.current)return;const re=yn();if(re){E.current=!0;try{const ae=[...w.current.getStrokeData()],he=await re.recognize(ae);q(he)}catch(ae){console.error("识别笔迹失败:",ae)}finally{E.current=!1}}else console.warn("手写识别服务不可用")},[]),U=M.useCallback(()=>{j.current&&(w.current&&w.current.destroy(),w.current=new dy(j.current,{onDrawEnd:Y}))},[Y]),[H,F]=Ka(x);M.useLayoutEffect(()=>{if(F&&a)return U(),()=>{w.current&&w.current.destroy()}},[F,a,U]);function X(){w.current&&w.current.clearCanvas()}function W(re){l({key:re}),q([]),X()}return A.jsxs("div",{className:"handwriting-input",children:[A.jsx(Va,{candidates:T,onSelect:W}),A.jsx("div",{ref:x,className:"handwriting-content",children:F?A.jsxs(A.Fragment,{children:[A.jsxs("div",{className:"handwriting-buttons",children:[A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"。"}),children:"。"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"？"}),children:"？"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"！"}),children:"！"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"、"}),children:"、"})]}),A.jsx("div",{className:"handwriting-canvas-container",children:a?A.jsx("canvas",{ref:j,className:"handwriting-canvas",width:F,height:F}):A.jsxs("div",{className:"handwriting-loading",style:{width:`${F}px`,height:`${F}px`},children:[A.jsx("div",{className:"loading-text",children:"正在加载手写识别..."}),A.jsx("div",{className:"progress-bar",children:A.jsx("div",{className:"progress-fill",style:{width:`${s*100}%`}})}),A.jsxs("div",{className:"progress-text",children:[Math.round(s*100),"%"]})]})}),A.jsxs("div",{className:"handwriting-buttons",children:[A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"delete",isControl:!0}),children:A.jsx("img",{src:sr,alt:"删除"})}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:h,children:"返回"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"，"}),children:"，"}),A.jsx("button",{className:"handwriting-btn handwriting-btn--function",onClick:()=>l({key:"enter",isControl:!0}),children:A.jsx("img",{src:ur,alt:"回车"})})]})]}):null})]})},Sy="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M6,18H18V16H6M12,8.41L16.59,13L18,11.58L12,5.58L6,11.58L7.41,13L12,8.41Z'%20/%3e%3c/svg%3e",Ha="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M3%2015H5V19H19V15H21V19C21%2020.1%2020.1%2021%2019%2021H5C3.9%2021%203%2020.1%203%2019V15Z'%20/%3e%3c/svg%3e",jy="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'%20/%3e%3c/svg%3e",Oy=({candidates:a,onSelect:s,onClose:l})=>{function h(x){s(x)}function j(){l()}return A.jsxs("div",{className:"zhk-selection",children:[A.jsx("div",{className:"zhk-selection__list",children:a.map(x=>A.jsx("div",{className:"zhk-selection__text",onClick:()=>h(x),children:x},x))}),A.jsx("div",{className:"zhk-selection__func",children:A.jsx("button",{className:"zhk-selection__func-btn",onClick:j,children:"返回"})})]})},Cy=({currentPinyin:a,onInput:s,setCurrentPinyin:l})=>{const h=M.useMemo(()=>new hy,[]),[j,x]=M.useState([]),[w,E]=M.useState(!1);M.useEffect(()=>{async function Y(){x(await h.processInput(a))}Y()},[a,h]);const T=M.useMemo(()=>j.slice(0,30),[j]);function q(Y){h.selectCandidate(Y),s(Y),l(""),E(!1)}return A.jsxs("div",{className:"zhk-candidate",children:[A.jsxs("div",{className:"zhk-candidate__container",children:[a&&A.jsx("div",{className:"zhk-candidate__pinyin",children:a}),A.jsxs("div",{className:"zhk-candidate__bottom-container",children:[j.length>0&&A.jsx(Va,{candidates:T,onSelect:q}),j.length>0&&A.jsx("button",{className:"zhk-candidate__more",onClick:()=>E(!0),children:A.jsx("img",{src:jy,alt:"更多"})})]})]}),w&&A.jsx(Oy,{candidates:j,onSelect:q,onClose:()=>E(!1)})]})},Ty=({enableHandwriting:a,mode:s,onKey:l,setMode:h})=>{const[j,x]=M.useState(!1),[w,E]=M.useState(""),T=M.useMemo(()=>s==="zh",[s]),q=M.useMemo(()=>T?!0:j,[T,j]);function Y(ie,pe=!1){l({key:ie,isControl:pe})}function U(){T?h("hand"):x(!j)}function H(){h("num")}function F(){h("symbol")}const X=["1","2","3","4","5","6","7","8","9","0"],W=[["q","w","e","r","t","y","u","i","o","p"],["a","s","d","f","g","h","j","k","l"],["z","x","c","v","b","n","m"]];function re(){if(s==="zh"&&w){E(w.slice(0,-1));return}Y("delete",!0)}function ae(ie){if(s==="zh"){E(w+ie);return}const pe=j?ie.toUpperCase():ie;Y(pe)}function he(){h(s==="zh"?"en":"zh")}const Ae=M.useMemo(()=>a?"手写":"-",[a]),ge=M.useMemo(()=>!a,[a]);return A.jsxs("div",{className:"zhk-base",children:[A.jsx("div",{className:"zhk-base__row",children:s==="zh"?A.jsx(Cy,{currentPinyin:w,onInput:ie=>Y(ie,!1),onKey:l,setCurrentPinyin:E}):X.map(ie=>A.jsx("button",{className:"zhk-base__key zhk-base__key--letter",onClick:()=>ae(ie),children:ie},`number-${ie}`))}),W.map((ie,pe)=>A.jsxs("div",{className:"zhk-base__row",children:[pe===2&&A.jsx("button",{className:`zhk-base__key zhk-base__key--function zhk-base__key--shift ${!T&&j?"zhk-base__key--active":""} ${T&&ge?"zhk-base__key--disabled":""}`,disabled:T&&ge,onClick:U,children:T?Ae:A.jsx("img",{src:Sy,className:"zhk-base__key-icon",alt:"Shift"})}),ie.map(ce=>A.jsx("button",{className:"zhk-base__key zhk-base__key--letter",onClick:()=>ae(ce),children:q?ce.toUpperCase():ce},ce)),pe===2&&A.jsx("button",{className:"zhk-base__key zhk-base__key--function zhk-base__key--delete",onClick:re,children:A.jsx("img",{src:sr,className:"zhk-base__key-icon",alt:"Delete"})})]},`row-${ie.join("")}`)),A.jsxs("div",{className:"zhk-base__row",children:[A.jsx("button",{className:"zhk-base__key zhk-base__key--function",onClick:F,children:"符"}),A.jsx("button",{className:"zhk-base__key zhk-base__key--function",onClick:H,children:"123"}),A.jsx("button",{className:"zhk-base__key",onClick:()=>Y(","),children:"，"}),A.jsx("button",{className:"zhk-base__key zhk-base__key--space",onClick:()=>Y(" "),children:A.jsx("img",{src:Ha,className:"zhk-base__key-icon",alt:"Space"})}),A.jsx("button",{className:"zhk-base__key",onClick:()=>Y("。"),children:"。"}),A.jsxs("button",{className:"zhk-base__key zhk-base__key--function",onClick:he,children:[A.jsx("span",{className:"zhk-base__toggle-main",children:s==="zh"?"中":"英"}),A.jsxs("span",{className:"zhk-base__toggle-sub",children:["/",s==="zh"?"英":"中"]})]}),A.jsx("button",{className:"zhk-base__key zhk-base__key--function",onClick:()=>Y("enter",!0),children:A.jsx("img",{src:ur,className:"zhk-base__key-icon",alt:"Enter"})})]})]})},Py=({onKey:a,onExit:s})=>{const l=[["1","2","3"],["4","5","6"],["7","8","9"],["back","0","space"]],h=[{key:"delete",icon:sr,text:"",alt:"Delete"},{key:".",icon:"",text:".",alt:"."},{key:"@",icon:"",text:"@",alt:"@"},{key:"enter",icon:ur,text:"",alt:"Enter"}];function j(E){a({key:E})}function x(E,T=!0){a({key:E,isControl:T})}function w(){s()}return A.jsx("div",{className:"num-keyboard",children:A.jsxs("div",{className:"num-keyboard__container",children:[A.jsx("div",{className:"num-keyboard__left",children:A.jsx("div",{className:"num-keyboard__rows",children:l.map(E=>A.jsx("div",{className:"num-keyboard__row",children:E.map(T=>A.jsx("button",{className:`num-keyboard__key ${T==="back"?"num-keyboard__key--back":""} ${T==="space"?"num-keyboard__key--space":""}`,onClick:()=>T==="back"?w():j(T==="space"?" ":T),children:T==="back"?"返回":T==="space"?A.jsx("img",{src:Ha,className:"zhk-base__key-icon",alt:"Space"}):T},`key-${E.join("")}-${T}`))},`row-${E.join("")}`))})}),A.jsx("div",{className:"num-keyboard__right",children:h.map(E=>A.jsx("button",{className:"num-keyboard__key num-keyboard__key--function",onClick:()=>E.key==="."||E.key==="@"?j(E.key):x(E.key),children:E.icon?A.jsx("img",{src:E.icon,className:"num-keyboard__key-icon",alt:E.alt}):A.jsx("span",{children:E.text})},`func-${E.key}`))})]})})},Ay="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M18,20V10H6V20H18M18,8A2,2%200%200,1%2020,10V20A2,2%200%200,1%2018,22H6C4.89,22%204,21.1%204,20V10A2,2%200%200,1%206,8H15V6A3,3%200%200,0%2012,3A3,3%200%200,0%209,6H7A5,5%200%200,1%2012,1A5,5%200%200,1%2017,6V8H18M12,17A2,2%200%200,1%2010,15A2,2%200%200,1%2012,13A2,2%200%200,1%2014,15A2,2%200%200,1%2012,17Z'%20/%3e%3c/svg%3e",Ry="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12,17C10.89,17%2010,16.1%2010,15C10,13.89%2010.89,13%2012,13A2,2%200%200,1%2014,15A2,2%200%200,1%2012,17M18,20V10H6V20H18M18,8A2,2%200%200,1%2020,10V20A2,2%200%200,1%2018,22H6C4.89,22%204,21.1%204,20V10C4,8.89%204.89,8%206,8H7V6A5,5%200%200,1%2012,1A5,5%200%200,1%2017,6V8H18M12,3A3,3%200%200,0%209,6V8H15V6A3,3%200%200,0%2012,3Z'%20/%3e%3c/svg%3e",Dy=({onKey:a,onExit:s})=>{const l="!@#$%^&*(){}[]<>/\\|:;\"',.?+-=_~`€£¥₹©®™°",h="！＠＃￥％…＆＊（）｛｝［］＜＞／＼｜：；＂＇，。？＋－＝＿～·€£¥₹©®™°",[j,x]=M.useState("en"),w=M.useMemo(()=>j==="zh"?h:l,[j]),[E,T]=M.useState(!1);function q(H){a({key:H}),E||s()}function Y(){s()}function U(){T(!E)}return A.jsx("div",{className:"symbol-keyboard",children:A.jsxs("div",{className:"symbol-keyboard__content",children:[A.jsxs("div",{className:"symbol-keyboard__functions",children:[A.jsxs("div",{className:"symbol-keyboard__lang-selector",children:[A.jsx("button",{type:"button",className:`symbol-keyboard__lang-btn ${j==="zh"?"symbol-keyboard__lang-btn--active":""}`,onClick:()=>x("zh"),children:"中文"}),A.jsx("button",{className:`symbol-keyboard__lang-btn ${j==="en"?"symbol-keyboard__lang-btn--active":""}`,onClick:()=>x("en"),children:"英文"})]}),A.jsxs("div",{className:"symbol-keyboard__control-group",children:[A.jsx("button",{className:`symbol-keyboard__key symbol-keyboard__key--function symbol-keyboard__key--lock ${E?"symbol-keyboard__key--locked":""}`,onClick:U,children:E?A.jsx("img",{src:Ry,alt:"Lock closed"}):A.jsx("img",{src:Ay,alt:"Lock open"})}),A.jsx("button",{className:"symbol-keyboard__key symbol-keyboard__key--function symbol-keyboard__key--back",onClick:Y,children:"返回"})]})]}),A.jsx("div",{className:"symbol-keyboard__symbols-container",children:A.jsx("div",{className:"symbol-keyboard__symbols-grid",children:w.split("").map(H=>A.jsx("button",{className:"symbol-keyboard__key",onClick:()=>q(H),children:H},`key-${H}`))})})]})})},Iy=({defaultMode:a="en",enableHandwriting:s=!1,position:l="static",disableWhenNoFocus:h=!0,onKey:j,className:x,style:w})=>{const[E,T]=M.useState(a),q=M.useRef(a),[Y,U]=M.useState(null),H=M.useRef(null),F=Ru(),[X,W]=Ka(H),{recognizerInitialized:re,recognizerProgress:ae}=ky(s);M.useEffect(()=>{(E==="en"||E==="zh")&&(q.current=E)},[E]);const[he,Ae]=M.useState(!1),ge=M.useCallback(()=>{if(W){const Ce=vy(F,H.current,l);U(Ce)}setTimeout(()=>{Ae(!0)},0)},[F,l,W]),ie=M.useMemo(()=>l==="static"||Ft(F),[F,l]);M.useLayoutEffect(()=>{ie&&(Ae(!1),ge())},[ie,ge]),M.useLayoutEffect(()=>{if(F&&Ft(F)){const Ce=F.dataset.inputmode;T(_t=>Ce||_t)}},[F]);const pe=M.useMemo(()=>h===!1?!1:!Ft(F),[h,F]);hn("scroll",ge,window,{passive:!0}),hn("resize",ge,window,{passive:!0});const ce=M.useCallback(Ce=>{if(Ce.isControl)switch(Ce.key){case"delete":Ft(F)&&gy(F);break}else F&&Ft(F)&&my(F,Ce.key);j&&j(Ce)},[j,F]),Fe=M.useCallback(()=>{T(q.current)},[]);return A.jsx("div",{ref:H,className:qa("zhk",{"zhk--floating":l==="float","zhk--bottom":l==="bottom","zhk--disabled":pe},x),style:{"--keyboard-height":`${W}px`,...Y,...w,display:ie?void 0:"none",opacity:he?1:0},onMouseDown:Ce=>Ce.preventDefault(),children:pe||!ie||!W?A.jsx("div",{className:qa("zhk__disabled-overlay"),children:A.jsx("span",{children:"请选择输入框以启用键盘"})}):A.jsxs(A.Fragment,{children:[E==="hand"&&A.jsx(Ey,{recognizerInitialized:re,recognizerProgress:ae,onKey:ce,onExit:Fe}),E==="num"&&A.jsx(Py,{onKey:ce,onExit:Fe}),E==="symbol"&&A.jsx(Dy,{onKey:ce,onExit:Fe}),(E==="en"||E==="zh")&&A.jsx(Ty,{mode:E,setMode:T,enableHandwriting:s,onKey:ce})]})})},Ga=a=>{const{position:s="static"}=a,l=A.jsx(Iy,{...a});return s==="static"?l:mt.createPortal(l,document.body)};se.ZhKeyboard=Ga,se.default=Ga,se.getHandwritingRecognizer=yn,se.registerHandwritingRecognizer=xy,Object.defineProperties(se,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=zh-keyboard-react.umd.cjs.map