primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 10.1 kB
JavaScript
import*as e from"react";import t from"primereact/api";import{CSSTransition as n}from"primereact/csstransition";import{useOverlayListener as r,useUpdateEffect as i,useUnmountEffect as l}from"primereact/hooks";import{Tooltip as o}from"primereact/tooltip";import{ObjectUtils as u,classNames as a,DomHandler as s,ZIndexUtils as c}from"primereact/utils";import{OverlayService as p}from"primereact/overlayservice";import{Portal as f}from"primereact/portal";import{Ripple as g}from"primereact/ripple";function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(this,arguments)}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e){if(Array.isArray(e))return e}function y(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,l=[],o=!0,u=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);o=!0);}catch(e){u=!0,i=e}finally{try{o||null==n.return||n.return()}finally{if(u)throw i}}return l}}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function b(e,t){if(e){if("string"==typeof e)return v(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?v(e,t):void 0}}function x(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function E(e,t){return h(e)||y(e,t)||b(e,t)||x()}var w=e.memo(e.forwardRef((function(t,n){var r=e.useRef(n),i=e.useRef(0),l=function(e){var t=r.current;t&&s.isVisible(t)&&(i.current||(i.current=t.scrollHeight,t.style.overflow="hidden"),(i.current!==t.scrollHeight||e)&&(t.style.height="",t.style.height=t.scrollHeight+"px",parseFloat(t.style.height)>=parseFloat(t.style.maxHeight)?(t.style.overflowY="scroll",t.style.height=t.style.maxHeight):t.style.overflow="hidden",i.current=t.scrollHeight))},c=r.current&&r.current.value,p=e.useMemo((function(){return u.isNotEmpty(t.value)||u.isNotEmpty(t.defaultValue)||u.isNotEmpty(c)}),[t.value,t.defaultValue,c]);e.useEffect((function(){u.combinedRefs(r,n)}),[r,n]),e.useEffect((function(){t.autoResize&&l(!0)}),[t.autoResize]);var f=u.isNotEmpty(t.tooltip),g=u.findDiffKeys(t,w.defaultProps),d=a("p-inputtextarea p-inputtext p-component",{"p-disabled":t.disabled,"p-filled":p,"p-inputtextarea-resizable":t.autoResize},t.className);return e.createElement(e.Fragment,null,e.createElement("textarea",m({ref:r},g,{className:d,onFocus:function(e){t.autoResize&&l(),t.onFocus&&t.onFocus(e)},onBlur:function(e){t.autoResize&&l(),t.onBlur&&t.onBlur(e)},onKeyUp:function(e){t.autoResize&&l(),t.onKeyUp&&t.onKeyUp(e)},onInput:function(e){t.autoResize&&l(),t.onInput&&t.onInput(e);var n=e.target;u.isNotEmpty(n.value)?s.addClass(n,"p-filled"):s.removeClass(n,"p-filled")}})),f&&e.createElement(o,m({target:r,content:t.tooltip},t.tooltipOptions)))})));function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function S(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}w.displayName="InputTextarea",w.defaultProps={__TYPE:"InputTextarea",autoResize:!1,tooltip:null,tooltipOptions:null,onInput:null};var C=e.memo(e.forwardRef((function(o,d){var h=E(e.useState(!1),2),y=h[0],v=h[1],b=E(e.useState(!1),2),x=b[0],O=b[1],I=E(e.useState(!1),2),R=I[0],N=I[1],k=E(e.useState(null),2),j=k[0],P=k[1],H=e.useRef(null),T=e.useRef(null),A=e.useRef(o.inputRef),D=e.useRef(null),F=e.useRef(null),z=E(r({target:H,overlay:T,listener:function(e,t){t.valid&&M()},when:y}),2),B=z[0],K=z[1],V=function(){v(!0)},M=function(){v(!1),N(!1),P(null)},U=function(){c.set("overlay",T.current,t.autoZIndex,t.zIndex.overlay),q()},_=function(){o.autoHighlight&&o.suggestions&&o.suggestions.length&&s.addClass(D.current.firstChild,"p-highlight")},J=function(){B(),o.onShow&&o.onShow()},X=function(){K()},Y=function(){c.clear(T.current),o.onHide&&o.onHide()},q=function(){var e=j.key,t=j.index,n=A.current.value,r=s.getCursorOffset(A.current,n.substring(0,t-1),n.substring(t),e);T.current.style.transformOrigin="top",T.current.style.left="calc(".concat(r.left,"px + 1rem)"),T.current.style.top="calc(".concat(r.top,"px + 1.2rem)")},Z=function(e){p.emit("overlay-click",{originalEvent:e,target:H.current})},$=function(e,t,n){if(!j){var r=Array.isArray(o.trigger)?o.trigger.find((function(e){return e===t})):o.trigger===t?o.trigger:null;if(r)return{key:r,index:n};var i=e.substring(0,n).lastIndexOf(" "),l=G(e,n);if(l.index>i)return l}return j},G=function(e,t){if(Array.isArray(o.trigger)){var n={};return o.trigger.forEach((function(r){var i=e.substring(0,t).lastIndexOf(r);-1!==i&&(i>n.index||!n.index)&&(n={key:r,index:-1!==i?i+1:-1})})),n}var r=e.substring(0,t).lastIndexOf(o.trigger);return{key:o.trigger,index:-1!==r?r+1:-1}},L=function(e){F.current&&clearTimeout(F.current);var t=e.target,n=t.value,r=t.selectionStart,i=n.substring(r-1,r);if(" "!==i){var l=$(n,i,r);if(l&&l.index>-1){var u=n.substring(l.index,r);F.current=setTimeout((function(){Q(e,u,l)}),o.delay)}}else M()},Q=function(e,t,n){o.onSearch&&(N(!0),P(n),o.onSearch({originalEvent:e,trigger:n.key,query:t}))},W=function(e,t){var n=A.current.value,r=e.target.selectionStart,i=n.indexOf(" ",j.index),l=n.substring(j.index,i>-1?i:r),u=ee(t).replace(/\s+/g,"");if(l.trim()!==u){for(var a=0;a<u.length;){var s=u.charAt(a),c=l.charAt(a);if(s!==c&&" "!==c)break;a++}var p=n.substring(0,j.index),f=n.substring(j.index+a);A.current.value="".concat(p).concat(u," ").concat(f),o.onChange&&o.onChange(e)}var g=j.index+u.length+1;A.current.setSelectionRange(g,g),M(),o.onSelect&&o.onSelect({originalEvent:e,suggestion:t})},ee=function(e){if(e){var t=Array.isArray(o.field)?o.field[o.trigger.findIndex((function(e){return e===j.key}))]:o.field;return t?u.resolveFieldData(e,t):e}return""},te=function(e,t){s.focus(A.current),W(e,t)},ne=A.current&&A.current.value,re=e.useMemo((function(){return u.isNotEmpty(o.value)||u.isNotEmpty(o.defaultValue)||u.isNotEmpty(ne)}),[o.value,o.defaultValue,ne]);e.useImperativeHandle(d,(function(){return{props:o,show:V,hide:M,getElement:function(){return H.current},getOverlay:function(){return T.current},getInput:function(){return A.current}}})),e.useEffect((function(){u.combinedRefs(A,o.inputRef)}),[A,o.inputRef]),i((function(){R&&(o.suggestions&&o.suggestions.length?V():M(),y&&q(),N(!1))}),[o.suggestions]),i((function(){!re&&s.hasClass(H.current,"p-inputwrapper-filled")&&s.removeClass(H.current,"p-inputwrapper-filled")}),[re]),l((function(){c.clear(T.current)}));var ie,le,oe,ue,ae,se=function(t,n){var r=n+"_item",i=o.itemTemplate?u.getJSXElement(o.itemTemplate,t,{trigger:j?j.key:"",index:n}):ee(t);return e.createElement("li",{key:r,className:"p-mention-item",onClick:function(e){return te(e,t)}},i,e.createElement(g,null))},ce=function(){if(o.suggestions){var t=o.suggestions.map(se);return e.createElement("ul",{ref:D,className:"p-mention-items"},t)}return null},pe=a("p-mention p-component p-inputwrapper",{"p-inputwrapper-filled":re,"p-inputwrapper-focus":x},o.className),fe=a("p-mention-input",o.inputClassName),ge=u.findDiffKeys(o,C.defaultProps),me=(ie=a("p-mention-panel p-component",o.panelClassName),le=S({maxHeight:o.scrollHeight},o.panelStyle),oe=u.getJSXElement(o.headerTemplate,o),ue=u.getJSXElement(o.footerTemplate,o),ae=ce(),e.createElement(f,{element:e.createElement(n,{nodeRef:T,classNames:"p-connected-overlay",in:y,timeout:{enter:120,exit:100},options:o.transitionOptions,unmountOnExit:!0,onEnter:U,onEntering:_,onEntered:J,onExit:X,onExited:Y},e.createElement("div",{ref:T,className:ie,style:le,onClick:Z},oe,ae,ue)),appendTo:"self"}));return e.createElement("div",{ref:H,id:o.id,className:pe,style:o.style},e.createElement(w,m({ref:A,id:o.inputId,className:fe,style:o.inputStyle},ge,{onFocus:function(e){O(!0),o.onFocus&&o.onFocus(e)},onBlur:function(e){O(!1),o.onBlur&&o.onBlur(e)},onKeyDown:function(e){if(y){var t=s.findSingle(T.current,"li.p-highlight");switch(e.which){case 40:if(t){var n=t.nextElementSibling;n&&(s.addClass(n,"p-highlight"),s.removeClass(t,"p-highlight"),s.scrollInView(T.current,n))}else(t=s.findSingle(T.current,"li"))&&s.addClass(t,"p-highlight");e.preventDefault();break;case 38:if(t){var r=t.previousElementSibling;r&&(s.addClass(r,"p-highlight"),s.removeClass(t,"p-highlight"),s.scrollInView(T.current,r))}e.preventDefault();break;case 8:var i=e.target,l=i.selectionStart;i.value.substring(l-1,l)===j.key&&M();break;case 13:t&&W(e,o.suggestions[s.index(t)]),e.preventDefault();break;case 27:M(),e.preventDefault()}}},onInput:function(e){o.onInput&&o.onInput(e),e.target.value.length>0?s.addClass(H.current,"p-inputwrapper-filled"):s.removeClass(H.current,"p-inputwrapper-filled")},onKeyUp:function(e){37!==e.which&&39!==e.which||L(e)},onChange:function(e){o.onChange&&o.onChange(e),L(e)}})),me)})));C.displayName="Mention",C.defaultProps={__TYPE:"Mention",autoHighlight:!0,className:null,delay:0,field:null,footerTemplate:null,headerTemplate:null,id:null,inputClassName:null,inputId:null,inputRef:null,inputStyle:null,itemTemplate:null,panelClassName:null,panelStyle:null,scrollHeight:"200px",style:null,suggestions:null,transitionOptions:null,trigger:"@",onBlur:null,onChange:null,onFocus:null,onHide:null,onInput:null,onSearch:null,onSelect:null,onShow:null};export{C as Mention};