码桶
发现社区成员的开源项目
textarea-BIzdQNE8.js16.2 KB
import{aS as J,Z as Q,aa as c,as as C,_ as H,$ as P,bo as ee,R as d,ac as te,bh as $,a5 as S,aG as ie,az as ne,a1 as j,a0 as se,bp as ae,aO as w,a8 as l}from"./index-GWuvg2UH.js";let m=null;const M={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0"},W=u=>{Object.keys(M).forEach(e=>{u.style.setProperty(e,M[e],"important")})},B=(u,e)=>{const t=u.scrollHeight;return e.sizingStyle.boxSizing==="border-box"?t+e.borderSize:t-e.paddingSize};function oe(u,e){let t=arguments.length>2&&arguments[2]!==void 0?arguments[2]:1,i=arguments.length>3&&arguments[3]!==void 0?arguments[3]:1/0;m||(m=document.createElement("textarea"),m.setAttribute("tab-index","-1"),m.setAttribute("aria-hidden","true"),W(m)),m.parentNode===null&&document.body.appendChild(m);const{paddingSize:n,borderSize:s,sizingStyle:a}=u,{boxSizing:o}=a;Object.keys(a).forEach(x=>{m.style[x]=a[x]}),W(m),m.value=e;let r=B(m,u);m.value="x";const g=B(m,u)-n-s;let p=g*t;o==="border-box"&&(p=p+n+s),r=Math.max(p,r);let b=g*i;return o==="border-box"&&(b=b+n+s),r=Math.min(b,r),r}const re=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","boxSizing","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","paddingBottom","paddingLeft","paddingRight","paddingTop","tabSize","textIndent","textRendering","textTransform","width"],le=u=>{const e=window.getComputedStyle(u);if(e===null)return null;const t=J(e,re),{boxSizing:i}=t;if(i==="")return null;const n=parseFloat(t.paddingBottom)+parseFloat(t.paddingTop),s=parseFloat(t.borderBottomWidth)+parseFloat(t.borderTopWidth);return{sizingStyle:t,paddingSize:n,borderSize:s}};class E extends Q{static get textAreaDefaultAdapter(){return{notifyChange:c,setValue:c,toggleFocusing:c,toggleHovering:c,notifyFocus:c,notifyBlur:c,notifyKeyDown:c,notifyEnterPress:c}}constructor(e){super(Object.assign(Object.assign({},E.textAreaDefaultAdapter),e)),this.compositionEnter=!1,this._changeValue=(t,i)=>{this._isControlledComponent()?this._adapter.notifyChange(t,i):(this._adapter.setValue(t),this._adapter.notifyChange(t,i))},this.getNextValue=t=>{const{maxLength:i,minLength:n,getValueLength:s}=this._adapter.getProps();return C(s)?i?this.handleVisibleMaxLength(t):(n&&this.handleVisibleMinLength(t),t):t},this.handleCompositionStart=t=>{this.compositionEnter=!0,this._adapter.notifyCompositionStart(t)},this.handleCompositionEnd=t=>{const{composition:i}=this._adapter.getProps(),n=t.target.value;if(this.compositionEnter=!1,this._adapter.notifyCompositionEnd(t),i){const r=this.getNextValue(n);this._changeValue(r,t);return}const{getValueLength:s,maxLength:a,minLength:o}=this.getProps();if(C(s)){if(a){const r=this.handleVisibleMaxLength(n);r!==n&&this._changeValue(r,t)}o&&this.handleVisibleMinLength(n)}},this.handleCompositionUpdate=t=>{this._adapter.notifyCompositionUpdate(t)},this.resizeTextarea=()=>{var t;const{height:i}=this.getStates(),{rows:n,autosize:s}=this.getProps(),a=this._adapter.getRef(),o=le(a);if(!o)return;const[r,g]=s!==null&&typeof s=="object"?[(t=s==null?void 0:s.minRows)!==null&&t!==void 0?t:n,s==null?void 0:s.maxRows]:[n],p=oe(o,a.value||a.placeholder||"x",r,g);if(i!==p){this._adapter.notifyHeightUpdate(p),a.style.height=`${p}px`;return}}}destroy(){}handleValueChange(e){this._adapter.setValue(e)}handleChange(e,t){const{composition:i}=this._adapter.getProps();let n=e;if(i&&this.compositionEnter){this._adapter.setValue(n);return}this.compositionEnter||(n=this.getNextValue(n)),this._changeValue(n,t)}handleVisibleMinLength(e){const{minLength:t,getValueLength:i}=this._adapter.getProps(),{minLength:n}=this._adapter.getStates();if(H(t)&&t>=0&&C(i)&&P(e)){const s=i(e);if(s<t){const a=e.length+(t-s);a!==n&&this._adapter.setMinLength(a)}else n!==t&&this._adapter.setMinLength(t)}}handleVisibleMaxLength(e){const{maxLength:t,getValueLength:i}=this._adapter.getProps();if(H(t)&&t>=0&&P(e)){if(C(i)){if(i(e)>t)return console.warn("[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit"),this.handleTruncateValue(e,t)}else if(e.length>t)return console.warn("[Semi TextArea] The input character is truncated because the input length exceeds the maximum length limit"),e.slice(0,t);return e}}handleTruncateValue(e,t){const{getValueLength:i}=this._adapter.getProps();return ee({value:e,maxLength:t,getValueLength:i})}handleFocus(e){const{value:t}=this.getStates();this._adapter.toggleFocusing(!0),this._adapter.notifyFocus(t,e)}handleBlur(e){const{value:t}=this.getStates(),{maxLength:i}=this.getProps();let n=t;i&&(n=this.handleVisibleMaxLength(t),n!==t&&(this._isControlledComponent()||this._adapter.setValue(n),this._adapter.notifyChange(n,e))),this._adapter.toggleFocusing(!1),this._adapter.notifyBlur(n,e)}handleKeyDown(e){const{disabledEnterStartNewLine:t}=this.getProps();t&&e.key==="Enter"&&!e.shiftKey&&e.preventDefault(),this._adapter.notifyKeyDown(e),e.keyCode===13&&this._adapter.notifyPressEnter(e)}handleMouseEnter(e){this._adapter.toggleHovering(!0)}handleMouseLeave(e){this._adapter.toggleHovering(!1)}isAllowClear(){const{value:e,isFocus:t,isHover:i}=this._adapter.getStates(),{showClear:n,disabled:s,readonly:a}=this._adapter.getProps();return e&&n&&!s&&(t||i)&&!a}handleClear(e){const{isFocus:t}=this.getStates();this._isControlledComponent("value")?this._adapter.setState({isFocus:!1}):this._adapter.setState({value:"",isFocus:!1}),t&&this._adapter.notifyBlur("",e),this._adapter.notifyChange("",e),this._adapter.notifyClear(e),this.stopPropagation(e)}handleClick(e){const{disabled:t,readonly:i}=this._adapter.getProps(),{isFocus:n}=this._adapter.getStates();t||i||n||this._adapter.isEventTarget(e)&&(this._adapter.focusInput(),this._adapter.toggleFocusing(!0))}handleCounterClick(e){const{disabled:t,readonly:i}=this._adapter.getProps(),{isFocus:n}=this._adapter.getStates();t||i||n||(this._adapter.focusInput(),this._adapter.toggleFocusing(!0))}}var he=function(u,e){var t={};for(var i in u)Object.prototype.hasOwnProperty.call(u,i)&&e.indexOf(i)<0&&(t[i]=u[i]);if(u!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,i=Object.getOwnPropertySymbols(u);n<i.length;n++)e.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(u,i[n])&&(t[i[n]]=u[i[n]]);return t};const h=ie.PREFIX;class O extends te{constructor(e){super(e),this.handleNativeResize=i=>{var n,s;if(this.props.autosize)return;const a=i&&i[0],o=a&&a.contentRect;if(!o)return;const r=o.width,g=o.height;if(!this.nativeResizeObservedOnce){this.nativeResizeObservedOnce=!0,this.lastNativeSize={width:r,height:g};return}const p=this.lastNativeSize;p&&p.width===r&&p.height===g||(this.lastNativeSize={width:r,height:g},(s=(n=this.props).onResize)===null||s===void 0||s.call(n,{height:g,width:r}))},this.handleClear=i=>{this.foundation.handleClear(i)},this.handleClick=i=>{this.foundation.handleClick(i)},this.handleCounterClick=i=>{this.foundation.handleCounterClick(i)},this.setRef=i=>{this.libRef.current=i;const{forwardRef:n}=this.props;typeof n=="function"?n(i):n&&typeof n=="object"&&(n.current=i)},this.handleTextAreaScroll=i=>{const{showLineNumber:n}=this.props;n&&this.lineNumberRef.current&&requestAnimationFrame(()=>{const s=this.lineNumberRef.current;s&&(s.scrollTop=i.target.scrollTop)})},this.getTextareaLineHeightPx=i=>{const n=window.getComputedStyle(i),s=n.lineHeight,a=parseFloat(n.fontSize)||14;if(!s||s==="normal")return a*1.5;const o=parseFloat(s);return Number.isFinite(o)&&o>0?o:a*1.5},this.calculateWrappedLines=(i,n)=>{if(!i)return 1;const s=window.getComputedStyle(n),o=document.createElement("canvas").getContext("2d");if(!o)return 1;const r=s.fontSize,g=s.fontFamily;o.font=`${r} ${g}`;const p=parseFloat(s.paddingLeft)||0,b=parseFloat(s.paddingRight)||0,x=n.clientWidth-p-b;if(x<=0)return 1;const v=o.measureText(i).width,R=Math.ceil(v/x);return Math.max(1,R)};const t="value"in e?e.value:e.defaultValue;this.state={value:t,isFocus:!1,isHover:!1,height:0,minLength:e.minLength,cachedValue:e.value,textareaWidth:0,textareaHeight:0},this.focusing=!1,this.foundation=new E(this.adapter),this.lineNumberResizeObserver=null,this.libRef=d.createRef(),this.lineNumberRef=d.createRef(),this.throttledResizeTextarea=$(this.foundation.resizeTextarea,10),this.throttledNotifyNativeResize=$(this.handleNativeResize,10),this.nativeResizeObservedOnce=!1,this.lastNativeSize=null}get adapter(){return Object.assign(Object.assign({},super.adapter),{setValue:e=>this.setState({value:e},()=>{this.props.autosize&&this.foundation.resizeTextarea()}),getRef:()=>this.libRef.current,toggleFocusing:e=>this.setState({isFocus:e}),toggleHovering:e=>this.setState({isHover:e}),notifyChange:(e,t)=>{this.props.onChange(e,t)},notifyClear:e=>this.props.onClear(e),notifyBlur:(e,t)=>this.props.onBlur(t),notifyFocus:(e,t)=>this.props.onFocus(t),notifyKeyDown:e=>{this.props.onKeyDown(e)},notifyHeightUpdate:e=>{this.setState({height:e}),this.props.onResize({height:e})},notifyPressEnter:e=>{this.props.onEnterPress&&this.props.onEnterPress(e)},notifyCompositionStart:e=>this.props.onCompositionStart(e),notifyCompositionEnd:e=>this.props.onCompositionEnd(e),notifyCompositionUpdate:e=>this.props.onCompositionUpdate(e),setMinLength:e=>this.setState({minLength:e}),focusInput:()=>{const e=this.libRef&&this.libRef.current;e&&e.focus()},isEventTarget:e=>e&&e.target===e.currentTarget})}static getDerivedStateFromProps(e,t){const i={};return e.value!==t.cachedValue&&(i.value=e.value,i.cachedValue=e.value),i}componentDidMount(){if(this.props.showLineNumber&&this.libRef.current&&typeof globalThis.ResizeObserver<"u"){const e=this.libRef.current;this.setState({textareaWidth:e.clientWidth,textareaHeight:e.clientHeight}),this.lineNumberResizeObserver=new globalThis.ResizeObserver(t=>{for(const i of t){const n=i.contentRect.width,s=i.contentRect.height;this.setState({textareaWidth:n,textareaHeight:s})}}),this.lineNumberResizeObserver.observe(e)}}componentWillUnmount(){var e,t,i,n;this.throttledResizeTextarea&&((t=(e=this.throttledResizeTextarea)===null||e===void 0?void 0:e.cancel)===null||t===void 0||t.call(e),this.throttledResizeTextarea=null),this.throttledNotifyNativeResize&&((n=(i=this.throttledNotifyNativeResize)===null||i===void 0?void 0:i.cancel)===null||n===void 0||n.call(i),this.throttledNotifyNativeResize=null),this.lineNumberResizeObserver&&(this.lineNumberResizeObserver.disconnect(),this.lineNumberResizeObserver=null)}componentDidUpdate(e,t){if((this.props.value!==e.value||this.props.placeholder!==e.placeholder)&&this.props.autosize&&this.foundation.resizeTextarea(),this.props.showLineNumber!==e.showLineNumber)if(this.props.showLineNumber&&this.libRef.current&&typeof globalThis.ResizeObserver<"u"){const i=this.libRef.current;this.setState({textareaWidth:i.clientWidth,textareaHeight:i.clientHeight}),this.lineNumberResizeObserver||(this.lineNumberResizeObserver=new globalThis.ResizeObserver(n=>{for(const s of n){const a=s.contentRect.width,o=s.contentRect.height;this.setState({textareaWidth:a,textareaHeight:o})}})),this.lineNumberResizeObserver.observe(i)}else this.lineNumberResizeObserver&&(this.lineNumberResizeObserver.disconnect(),this.lineNumberResizeObserver=null)}renderClearBtn(){const{showClear:e}=this.props,t=this.foundation.isAllowClear(),i=S(`${h}-clearbtn`,{[`${h}-clearbtn-hidden`]:!t});return e?d.createElement("div",{className:i,onClick:this.handleClear},d.createElement(ne,null)):null}renderCounter(){let e,t,i,n;const{showCounter:s,maxCount:a,getValueLength:o}=this.props;if(s||a){const{value:r}=this.state;t=r?C(o)?o(r):r.length:0,i=a||null,n=S(`${h}-textarea-counter`,{[`${h}-textarea-counter-exceed`]:t>i}),e=d.createElement("div",{className:n,onClick:this.handleCounterClick},t,i?"/":null,i)}else e=null;return e}renderLineNumbers(){const{showLineNumber:e,lineNumberStart:t=1,lineNumberClassName:i,lineNumberStyle:n}=this.props;if(!e)return null;const{value:s,textareaWidth:a,textareaHeight:o}=this.state,r=this.libRef.current,g=s?s.split(`
`):[""],p=S(`${h}-textarea-lineNumber`,i),b=r?this.getTextareaLineHeightPx(r):21,x=Object.assign(Object.assign({},n||{}),{height:o?`${o}px`:void 0,maxHeight:o?`${o}px`:void 0});return d.createElement("div",{ref:this.lineNumberRef,className:p,style:x},g.map((N,v)=>{const R=r?this.calculateWrappedLines(N,r):1;return d.createElement("div",{key:v,className:`${h}-textarea-lineNumber-item`,style:{minHeight:`${R*b}px`,lineHeight:`${b}px`}},t+v)}))}render(){const e=this.props,{autosize:t,placeholder:i,onEnterPress:n,onResize:s,resize:a,disabled:o,readonly:r,className:g,showCounter:p,validateStatus:b,maxCount:x,defaultValue:N,style:v,textareaStyle:R,forwardRef:de,getValueLength:k,maxLength:A,minLength:ue,showClear:D,borderless:U,autoFocus:I,showLineNumber:V,lineNumberStart:ce,lineNumberClassName:pe,lineNumberStyle:ge,composition:fe}=e,K=he(e,["autosize","placeholder","onEnterPress","onResize","resize","disabled","readonly","className","showCounter","validateStatus","maxCount","defaultValue","style","textareaStyle","forwardRef","getValueLength","maxLength","minLength","showClear","borderless","autoFocus","showLineNumber","lineNumberStart","lineNumberClassName","lineNumberStyle","composition"]),{isFocus:X,value:L,minLength:T}=this.state,z=!j(a),Y=!t&&z&&["horizontal","both","inline"].includes(a),G=!t&&z&&["vertical","both","block"].includes(a),Z=S(g,`${h}-textarea-wrapper`,{[`${h}-textarea-borderless`]:U,[`${h}-textarea-wrapper-disabled`]:o,[`${h}-textarea-wrapper-readonly`]:r,[`${h}-textarea-wrapper-${b}`]:!!b,[`${h}-textarea-wrapper-focus`]:X,[`${h}-textarea-wrapper-withLineNumber`]:V,[`${h}-textarea-wrapper-resizeX`]:Y,[`${h}-textarea-wrapper-resizeY`]:G}),q=S(`${h}-textarea`,{[`${h}-textarea-disabled`]:o,[`${h}-textarea-readonly`]:r,[`${h}-textarea-autosize`]:se(t)?j(t==null?void 0:t.maxRows):t,[`${h}-textarea-showClear`]:D}),_=Object.assign({},R||{});t?_.resize="none":z&&(_.resize=a);const F=!t&&z&&a&&a!=="none",y=Object.assign(Object.assign({},ae(K,"insetLabel","insetLabelId","getValueLength","onClear","showClear","disabledEnterStartNewLine","composition")),{style:_,autoFocus:I||this.props.autofocus,className:q,disabled:o,readOnly:r,placeholder:i||null,onChange:f=>this.foundation.handleChange(f.target.value,f),onFocus:f=>this.foundation.handleFocus(f),onBlur:f=>this.foundation.handleBlur(f.nativeEvent),onKeyDown:f=>this.foundation.handleKeyDown(f),onScroll:this.handleTextAreaScroll,value:L??"",onCompositionStart:this.foundation.handleCompositionStart,onCompositionEnd:this.foundation.handleCompositionEnd,onCompositionUpdate:this.foundation.handleCompositionUpdate});return C(k)||(y.maxLength=A),T&&(y.minLength=T),d.createElement("div",{className:Z,style:v,onMouseEnter:f=>this.foundation.handleMouseEnter(f),onMouseLeave:f=>this.foundation.handleMouseLeave(f),onClick:f=>this.handleClick(f)},this.renderLineNumbers(),V?d.createElement("div",{className:`${h}-textarea-content`},t?d.createElement(w,{onResize:this.throttledResizeTextarea},d.createElement("textarea",Object.assign({},y,{ref:this.setRef}))):F?d.createElement(w,{onResize:this.throttledNotifyNativeResize},d.createElement("textarea",Object.assign({},y,{ref:this.setRef}))):d.createElement("textarea",Object.assign({},y,{ref:this.setRef}))):t?d.createElement(w,{onResize:this.throttledResizeTextarea},d.createElement("textarea",Object.assign({},y,{ref:this.setRef}))):F?d.createElement(w,{onResize:this.throttledNotifyNativeResize},d.createElement("textarea",Object.assign({},y,{ref:this.setRef}))):d.createElement("textarea",Object.assign({},y,{ref:this.setRef})),this.renderClearBtn(),this.renderCounter())}}O.propTypes={autosize:l.oneOfType([l.bool,l.object]),borderless:l.bool,placeholder:l.string,value:l.string,rows:l.number,cols:l.number,maxCount:l.number,onEnterPress:l.func,validateStatus:l.string,className:l.string,style:l.object,textareaStyle:l.object,showClear:l.bool,onClear:l.func,onResize:l.func,onCompositionStart:l.func,onCompositionEnd:l.func,onCompositionUpdate:l.func,getValueLength:l.func,disabledEnterStartNewLine:l.bool,composition:l.bool,showLineNumber:l.bool,lineNumberStart:l.number,lineNumberClassName:l.string,lineNumberStyle:l.object,resize:l.oneOf(["none","both","horizontal","vertical","block","inline"])};O.defaultProps={autosize:!1,borderless:!1,rows:4,cols:20,showCounter:!1,showClear:!1,onEnterPress:c,onChange:c,onBlur:c,onFocus:c,onKeyDown:c,onResize:c,onClear:c,onCompositionStart:c,onCompositionEnd:c,onCompositionUpdate:c,composition:!1,showLineNumber:!1,lineNumberStart:1};const be=d.forwardRef((u,e)=>d.createElement(O,Object.assign({},u,{forwardRef:e})));export{be as F};