cosmic-ai-input 1.0.10 → 1.0.12
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/README.md +4 -0
- package/dist/index.cjs.js +6 -6
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +401 -445
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -108,6 +108,8 @@ export default App;
|
|
|
108
108
|
| maxLength | 1 \| 2 \| 3 \| 4 \| undefined | - | 最大行数限制 |
|
|
109
109
|
| defaultRows | number | 3 | 默认显示行数 |
|
|
110
110
|
| disabled | boolean | false | 是否禁用输入框 |
|
|
111
|
+
| defaultFocus | boolean | false | 是否默认获得焦点 |
|
|
112
|
+
| textIndex | number | 0 | 文本缩进距离（单位：像素） |
|
|
111
113
|
| onParse | (parsedValue: string) => void | - | 解析输入值时的回调函数 |
|
|
112
114
|
| onSend | (value: string) => void | - | 发送消息时的回调函数 |
|
|
113
115
|
| onMaxLengthExceeded | (value: string, maxLength: number) => void | - | 超过最大长度时的回调函数 |
|
|
@@ -221,6 +223,8 @@ export interface AiInputProps {
|
|
|
221
223
|
maxLength?: 1 | 2 | 3 | 4;
|
|
222
224
|
defaultRows?: number;
|
|
223
225
|
disabled?: boolean;
|
|
226
|
+
defaultFocus?: boolean;
|
|
227
|
+
textIndex?: number;
|
|
224
228
|
onParse?: (parsedValue: string) => void;
|
|
225
229
|
onSend?: (value: string) => void;
|
|
226
230
|
onMaxLengthExceeded?: (value: string, maxLength: number) => void;
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
// Generated at: 2026-01-
|
|
2
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
3
|
-
`&&(
|
|
4
|
-
`)return[{type:"text",content:"",id:`text-${h++}-${
|
|
5
|
-
`);
|
|
6
|
-
`);
|
|
1
|
+
// Generated at: 2026-01-19T03:04:48.776Z
|
|
2
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),o=require("react"),xe=require("classnames"),Ke=require("react-dom"),we=o.forwardRef(({value:c,position:r,id:l,onChange:f},S)=>{const[w,x]=o.useState(!0),T=o.useRef(null),C=o.useRef(null);o.useEffect(()=>{typeof S=="function"?S(T.current):S&&(S.current=T.current)},[S]);const A=u=>{const m=u.target.value;f==null||f(m,"date-picker")};o.useEffect(()=>{if(C.current)try{setTimeout(()=>{k()},100)}catch{}},[]);const k=()=>{if(C.current)try{C.current.showPicker()}catch{}},E=u=>{u.stopPropagation()};return w?d.jsx("div",{ref:T,id:l,style:{top:(r==null?void 0:r.top)||0,left:(r==null?void 0:r.left)||0},className:"cosmic-ai-input-datePicker",suppressHydrationWarning:!0,children:d.jsx("input",{ref:C,type:"date",value:c||"",onChange:A,onClick:E})}):null});we.displayName="DatePicker";function Z(c){const r=c.textContent||"",l=c.nextSibling;r.length?(l==null||l.setAttribute("style","display: none"),c.style.padding="2px 4px",c.style.borderTopLeftRadius="2px",c.style.borderBottomLeftRadius="2px",c.style.borderTopRightRadius="2px",c.style.borderBottomRightRadius="2px"):(l==null||l.setAttribute("style","display: inline"),c.style.padding="2px 0 2px 4px",c.style.borderTopLeftRadius="2px",c.style.borderBottomLeftRadius="2px",c.style.borderTopRightRadius="0",c.style.borderBottomRightRadius="0")}function L(c){if(c&&c.getAttribute("data-set-type")==="input"){const r=c.children[0];r.setAttribute("contenteditable","true"),requestAnimationFrame(()=>{r.focus()})}}function be(c){c&&c.getAttribute("data-set-type")==="input"&&c.children[0].setAttribute("contenteditable","false")}function P(c){return c&&c.getAttribute("data-set-type")==="input"}const Ce=o.forwardRef(({options:c,value:r,position:l,id:f,height:S=37,onChange:w},x)=>{const[T,C]=o.useState(r||""),A=o.useRef(null);o.useEffect(()=>{typeof x=="function"?x(A.current):x&&(x.current=A.current)},[x]);const k=u=>{const m=T.split(",").filter(q=>q)||[];let R="";m.includes(u)?R=m.filter(q=>q!==u).join(","):m.length?R=`${m.join(",")},${u}`:R=u,C(R),w==null||w(R,"multiple-select")},E=T.split(",")||[];return d.jsx("div",{ref:A,className:"cosmic-ai-input-selectFloatElement",id:f,style:{position:"absolute",top:(l==null?void 0:l.top)||0,left:(l==null?void 0:l.left)||0,zIndex:5e3,maxHeight:`${S}px`},children:c.map((u,m)=>d.jsx("div",{className:`selectOption ${E.includes(u)?"selected":""}`,onClick:()=>k(u),children:u},m))})});Ce.displayName="MultipleSelect";const me=o.forwardRef(({options:c,value:r,position:l,id:f,height:S=120,onChange:w},x)=>{const[T,C]=o.useState(r||""),A=o.useRef(null);o.useEffect(()=>{typeof x=="function"?x(A.current):x&&(x.current=A.current)},[x]);const k=E=>{C(E),w==null||w(E,"select")};return d.jsx("div",{ref:A,className:"cosmic-ai-input-selectFloatElement",id:f,style:{position:"absolute",top:(l==null?void 0:l.top)||0,left:(l==null?void 0:l.left)||0,zIndex:5e3,maxHeight:`${S}px`},children:c.length>0&&c.map((E,u)=>d.jsx("div",{className:`selectOption ${T===E?"selected":""}`,onClick:()=>k(E),children:E},u))})});me.displayName="Select";function Ee(c){const r=c instanceof Element?c:document.getElementById(c);return r&&r.children[0].textContent||""}function Xe(c,r){const l=c instanceof Element?c:document.getElementById(c);l&&(l.children[0].textContent=r)}function W(c){const r=document.createRange(),l=window.getSelection();l&&(!c||!(c instanceof Node)||(r.selectNodeContents(c),r.collapse(!0),l.removeAllRanges(),l.addRange(r)))}function F(c){const r=document.createRange(),l=window.getSelection();l&&(!c||!(c instanceof Node)||(r.selectNodeContents(c),r.collapse(!1),l.removeAllRanges(),l.addRange(r)))}function I(c){const r=window.getSelection();if(!r||r.rangeCount===0)return 0;if(!c||!(c instanceof Node))return;const l=r.getRangeAt(0),f=l.cloneRange();return f.selectNodeContents(c),f.setEnd(l.startContainer,l.startOffset),f.toString().length}function Ue(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const l=c.getRangeAt(0).startContainer;return l.nodeType===Node.TEXT_NODE?l.parentElement:l.nodeType===Node.ELEMENT_NODE?l:null}function Ge(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const r=c.getRangeAt(0),l=r.startContainer,f=r.startOffset;return l.nodeType===Node.TEXT_NODE?f>0?l:l.previousSibling:l.nodeType===Node.ELEMENT_NODE?f>0?l.childNodes[f-1]:l.previousSibling:null}function Je(){const c=window.getSelection();if(!c||c.rangeCount===0)return null;const r=c.getRangeAt(0),l=r.startContainer,f=r.startOffset;return l.nodeType===Node.TEXT_NODE?f<l.length?l:l.nextSibling:l.nodeType===Node.ELEMENT_NODE?f<l.childNodes.length?l.childNodes[f]:l.nextSibling:null}function Qe(c){return c&&!c.getAttribute("data-set-type")}const Re=o.forwardRef((c,r)=>{const{value:l="",varList:f,placeholder:S="",maxLength:w,defaultRows:x=3,disabled:T=!1,defaultFocus:C=!1,textIndex:A=0,onFocus:k,onBlur:E,onChange:u,onClick:m,onSend:R,onParse:q,onKeyDown:M,onKeyUp:O,onMaxLengthExceeded:_}=c,[Ye,Ze]=o.useState(l||""),[v,z]=o.useState(""),[Ie,ee]=o.useState(""),[K,B]=o.useState(!1),[X,U]=o.useState({top:0,left:0}),[te,ne]=o.useState([]),[G,se]=o.useState(""),[D,ce]=o.useState(null),[le,ie]=o.useState(120),[re,oe]=o.useState(C),Se=240,Ae=240,ae=240,de=276,b=o.useRef(null),g=o.useRef(null),$=o.useRef(null),H=()=>{var s,t;let n=((t=(s=b.current)==null?void 0:s.innerText)==null?void 0:t.replace(/\u200B/g,""))||"";return n===`
|
|
3
|
+
`&&(n=""),n},ue=()=>{var s;let n=((s=b.current)==null?void 0:s.innerHTML)||"";return n==="<br>"&&(n=""),n},Ne=n=>{const s=[];let t=0;const i=/\[([^\]]+)\]/g;let a;const p=`${Date.now()}-${Math.random().toString(36).slice(2,9)}`;let h=0;if(n===""||!n||n===`
|
|
4
|
+
`)return[{type:"text",content:"",id:`text-${h++}-${p}`}];const j=new Set((f||[]).map(y=>y.name));for(;(a=i.exec(n))!==null;){if(a.index>t){const N=n.substring(t,a.index).split(`
|
|
5
|
+
`);N.forEach((V,ze)=>{V&&s.push({type:"text",content:V,id:`text-${h++}-${p}`}),ze<N.length-1&&s.push({type:"newline",id:`newline-${h++}-${p}`})})}const y=a[1];if(j.has(y)){const e=f.find(N=>N.name===y);(e==null?void 0:e.type)==="input"?s.push({type:"input",name:e==null?void 0:e.name,content:(e==null?void 0:e.content)||"",placeholder:(e==null?void 0:e.placeholder)||y,id:`input-${h++}-${p}`}):(e==null?void 0:e.type)==="select"?s.push({type:"select",name:e==null?void 0:e.name,content:(e==null?void 0:e.content)||"",placeholder:(e==null?void 0:e.placeholder)||y,options:(e==null?void 0:e.options)||[],id:`select-${h++}-${p}`}):(e==null?void 0:e.type)==="multiple-select"?s.push({type:"multiple-select",name:e==null?void 0:e.name,content:(e==null?void 0:e.content)||"",placeholder:(e==null?void 0:e.placeholder)||y,options:(e==null?void 0:e.options)||[],id:`multiple-select-${h++}-${p}`}):(e==null?void 0:e.type)==="date-picker"&&s.push({type:"date-picker",name:e==null?void 0:e.name,content:(e==null?void 0:e.content)||"",placeholder:(e==null?void 0:e.placeholder)||y,id:`date-picker-${h++}-${p}`})}else s.push({type:"text",content:`[${y}]`,id:`text-${h++}-${p}`});t=i.lastIndex}if(t<n.length){const e=n.substring(t).split(`
|
|
6
|
+
`);e.forEach((N,V)=>{N&&s.push({type:"text",content:N,id:`text-${h++}`}),V<e.length-1&&s.push({type:"newline",id:`newline-${h++}`})})}return s},J=()=>{var n;(n=b.current)==null||n.setAttribute("contenteditable","true"),g.current&&(P(g.current)&&g.current.children[0].setAttribute("contenteditable","false"),g.current=null),F(b.current)},Te=n=>{m==null||m(n)},ke=n=>{J()},fe=n=>{z(H()),ee(ue()),u==null||u(H())},De=n=>{var s;if(n.code==="Enter"&&!n.shiftKey){n.preventDefault();const t=H();if(t.length===0||(s=b.current)!=null&&s.innerHTML.match(/^<span>[\s\u200B]*(<br\s*\/?>[\s\u200B]*)+<\/span>$/))return;w?t.length<=w?R==null||R(t):_==null||_(t,w):R==null||R(t)}},$e=n=>{var t;M==null||M(n);const s=Ue();if(s&&Qe(s)){if(n.code==="ArrowLeft"){const i=s==null?void 0:s.previousElementSibling,a=I(s);i&&a===0&&P(i)&&i.children[0]&&(g.current=i,L(i),requestAnimationFrame(()=>{F(i.children[0])}))}if(n.code==="ArrowRight"){const i=s==null?void 0:s.nextElementSibling,a=I(s);i&&a===((t=s.textContent)==null?void 0:t.length)&&P(i)&&i.children[0]&&(g.current=i,L(i),requestAnimationFrame(()=>{W(i.children[0])}))}n.code==="Backspace"&&(s.innerHTML===""&&n.preventDefault(),s.innerHTML==="<br>"&&(n.preventDefault(),s.innerHTML=""))}if(s&&s.getAttribute("data-set-type")==="container"){if(n.code==="ArrowLeft"){const i=Ge();P(i)&&i.children[0]&&(g.current=i,L(i),requestAnimationFrame(()=>{F(i.children[0])}))}if(n.code==="ArrowRight"){const i=Je();P(i)&&i.children[0]&&(g.current=i,L(i),requestAnimationFrame(()=>{W(i.children[0])}))}}De(n)},je=n=>{O==null||O(n)},Le=n=>{n.preventDefault();const t=window.getSelection().toString();if(!t)return;const i=t,a=t;n.clipboardData.setData("text/plain",i),n.clipboardData.setData("text/html",a)},Fe=n=>{k==null||k(n)},Pe=(n,s)=>{s.stopPropagation()},Me=(n,s)=>{var i;s.stopPropagation(),g.current&&be(g.current),(i=b.current)==null||i.setAttribute("contenteditable","false");const t=document.getElementById(n.id);g.current=t,requestAnimationFrame(()=>{L(t)})},Oe=(n,s)=>{var a,p,h,j,y;M==null||M(s),s.stopPropagation();const t=s.target,i=I(t);if(s.code==="Backspace"&&i===0){const e=(a=t.parentElement)==null?void 0:a.previousElementSibling;e&&(P(e)&&e.children[0]&&((p=e.children[0].textContent)!=null&&p.length)?(g.current=e,L(e),F(e.children[0]),requestAnimationFrame(()=>{Z(e.children[0])})):(J(),F(e)))}if(s.code==="ArrowRight"&&i===((h=t.textContent)==null?void 0:h.length)){const e=(j=t.parentElement)==null?void 0:j.nextElementSibling;e&&(P(e)&&e.children[0]&&((y=e.children[0].textContent)!=null&&y.length)?(g.current=e,L(e),W(e.children[0]),requestAnimationFrame(()=>{Z(e.children[0])})):(J(),W(e)))}},Be=(n,s)=>{O==null||O(s);const t=s.target;Z(t)},He=(n,s)=>{var i;s.stopPropagation(),g.current&&be(g.current),(i=b.current)==null||i.setAttribute("contenteditable","false");const t=document.getElementById(n.id);g.current=t,requestAnimationFrame(()=>{L(t)})},qe=(n,s)=>{z(H()),ee(ue()),u==null||u(H())},Ve=(n,s)=>{};o.useEffect(()=>{if(!K)return;const n=i=>{$.current&&!$.current.contains(i.target)&&B(!1)},s=i=>{$.current&&!$.current.contains(i.target)&&B(!1)},t=()=>{B(!1)};return document.addEventListener("mousedown",n),document.addEventListener("scroll",s,!0),window.addEventListener("resize",t),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("scroll",s,!0),window.removeEventListener("resize",t)}},[K]);const Q=(n,s)=>{if(D&&Xe(D.id,n),s==="select"&&B(!1),s==="multiple-select"||s==="date-picker"){const t=document.getElementById(D.id);t&&t.children[0]&&t.children[1]&&(n.length>0?(t.children[0].setAttribute("style","display: inline"),t.children[0].setAttribute("contenteditable","false"),t.children[1].setAttribute("style","display: none"),t.children[1].setAttribute("contenteditable","true")):(t.children[0].setAttribute("style","display: none"),t.children[0].setAttribute("contenteditable","true"),t.children[1].setAttribute("style","display: inline"),t.children[1].setAttribute("contenteditable","true")))}fe()},pe=(n,s)=>{const i=s.target.getBoundingClientRect();ne(n.options),se(n.value||Ee(n.id)),U({top:-999999,left:-999999999}),ce(n),ie(Ae),B(!0),requestAnimationFrame(()=>{if($.current){const a=$.current.getBoundingClientRect();let p=i.left,h=i.top+i.height;window.innerWidth-i.right<Se&&i.width<a.width&&(p=i.right-a.width),i.top<a.height&&(h=i.top+i.height),U({top:h,left:p}),ie(a.height)}})},We=(n,s)=>{const i=s.target.getBoundingClientRect();let a=i.left,p=i.top-de;window.innerWidth-i.right<ae&&(a=a-ae+i.width),i.top<de&&(p=i.top+i.height),ne(n.options),se(n.value||Ee(n.id)),U({top:p,left:a}),ce(n),B(!0)},[_e,he]=o.useState([]),[Y,ge]=o.useState(!0),ye=o.useCallback(()=>{ge(!1);const n=Ne(l),s=[];return n.forEach(t=>{var i,a,p,h,j,y;if(t.type==="text")s.push(d.jsx("span",{onKeyDown:e=>Ve(),children:t.content},t.id));else if(t.type==="newline")s.push(d.jsx("br",{},t.id));else if(t.type==="input")s.push(d.jsxs("span",{id:t.id,"data-set-type":"input",contentEditable:!1,suppressContentEditableWarning:!0,onInput:e=>qe(),onClick:e=>Pe(t,e),onMouseDown:e=>Me(t,e),"data-cosmic-ai-input-placeholder":t.placeholder,children:[d.jsx("span",{className:"cosmic-ai-input-inputContent",style:{padding:(i=t.content)!=null&&i.length?"2px 4px":"2px 0 2px 4px"},contentEditable:!1,onKeyDown:e=>Oe(t,e),onKeyUp:e=>Be(t,e),children:t.content}),d.jsx("span",{contentEditable:!1,style:{display:(a=t.content)!=null&&a.length?"none":"inline"},className:"cosmic-ai-input-placeholder",onMouseDown:e=>He(t,e),children:t.placeholder})]},t.id));else if(t.type==="select"){const e=t.content||((p=t.options)==null?void 0:p[0])||t.placeholder;s.push(d.jsx("span",{id:t.id,"data-set-type":"select",contentEditable:!1,suppressContentEditableWarning:!0,onClick:N=>pe(t,N),"data-cosmic-ai-input-placeholder":t.placeholder,children:d.jsx("span",{contentEditable:!1,children:e})},t.id))}else if(t.type==="multiple-select"){const e=t.content||((h=t.options)==null?void 0:h[0]);s.push(d.jsxs("span",{id:t.id,"data-set-type":"multiple-select",contentEditable:!1,suppressContentEditableWarning:!0,onClick:N=>pe(t,N),"data-cosmic-ai-input-placeholder":t.placeholder,children:[d.jsx("span",{style:{display:e!=null&&e.length?"inline":"none"},contentEditable:!1,children:e}),d.jsx("span",{style:{display:e!=null&&e.length?"none":"inline"},className:"cosmic-ai-input-selectPlaceholder",contentEditable:!1,children:t.placeholder})]},t.id))}else t.type==="date-picker"&&s.push(d.jsxs("span",{id:t.id,"data-set-type":"date-picker",contentEditable:!1,suppressContentEditableWarning:!0,onClick:e=>We(t,e),"data-cosmic-ai-input-placeholder":t.placeholder,children:[d.jsx("span",{style:{display:(j=t.content)!=null&&j.length?"inline":"none"},contentEditable:!1,children:t.content}),d.jsx("span",{style:{display:(y=t.content)!=null&&y.length?"none":"inline"},className:"cosmic-ai-input-datePickerPlaceholder",contentEditable:!1,children:t.placeholder})]},t.id))}),setTimeout(()=>{ge(!0)},0),s},[l]);o.useEffect(()=>{Y&&setTimeout(()=>{F(b.current)},0)},[Y]),o.useEffect(()=>{l!==v?(he(ye()),z(l),oe(!0)):(l===""||!l)&&he(ye())},[l,v]),o.useEffect(()=>{if(!C&&!re)return;const n=new MutationObserver(()=>{b.current&&document.contains(b.current)&&(requestAnimationFrame(()=>{F(b.current),oe(!1)}),n.disconnect())});return b.current&&n.observe(document.body,{childList:!0,subtree:!0}),()=>n.disconnect()},[C,re]);const ve=()=>{b.current&&requestAnimationFrame(()=>{F(b.current)})};return o.useImperativeHandle(r,()=>({getCurrentValue:H,focus:ve})),d.jsxs("div",{className:xe(`cosmic-ai-input-rows${x}`),style:{textIndent:A+"px"},children:[Y&&d.jsx("div",{"data-set-type":"container","data-cosmic-ai-input-placeholder":S,className:xe("cosmic-ai-input",`cosmic-ai-input-rows${x}`,{"is-disabled":T},{"is-empty":v.length===0}),ref:b,contentEditable:!0,suppressContentEditableWarning:!0,onClick:n=>Te(n),onFocus:n=>{Fe(n)},onBlur:n=>{E==null||E(n)},onMouseDown:n=>ke(),onKeyDown:n=>$e(n),onKeyUp:n=>je(n),onInput:n=>fe(),onCopy:n=>Le(n),children:_e}),K&&Ke.createPortal((D==null?void 0:D.type)==="multiple-select"?d.jsx(Ce,{ref:$,options:te,value:G,position:X,height:le,onChange:Q},"multiple-select"):(D==null?void 0:D.type)==="date-picker"?d.jsx(we,{ref:$,value:G,position:X,onChange:Q},"date-picker"):d.jsx(me,{ref:$,options:te,value:G,position:X,height:le,onChange:Q},"select"),document.body)]})});Re.displayName="AiInput";exports.default=Re;
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ declare interface AiInputProps {
|
|
|
11
11
|
defaultRows?: number;
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
defaultFocus?: boolean;
|
|
14
|
+
textIndex?: number;
|
|
14
15
|
onParse?: (parsedValue: string) => void;
|
|
15
16
|
onSend?: (value: string) => void;
|
|
16
17
|
onMaxLengthExceeded?: (value: string, maxLength: number) => void;
|