use-caret-position
Version:
A custom React hook for grabbing the caret position in an input field
2 lines (1 loc) • 2.91 kB
JavaScript
;var t=require("react");function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=t[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!e||r.length!==e);n=!0);}catch(t){o=!0,a=t}finally{try{n||null==u.return||u.return()}finally{if(o)throw a}}return r}(t,e)||r(t,e)||function(){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 r(t,e){if(t){if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(t,e):void 0}}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function o(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=r(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var o=0,a=function(){};return{s:a,n:function(){return o>=t.length?{done:!0}:{done:!1,value:t[o++]}},e:function(t){throw t},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,u=!0,l=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return u=t.done,t},e:function(t){l=!0,i=t},f:function(){try{u||null==n.return||n.return()}finally{if(l)throw i}}}}var a=function(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"selectionStart",n=t.scrollLeft,a=t.scrollTop,i=t[r]||t.selectionStart,u=t.getBoundingClientRect(),l=u.height,c=u.width,f=u.left,s=u.top,y=document.createElement("div"),d=getComputedStyle(t),v=o(d);try{for(v.s();!(e=v.n()).done;){var m=e.value;y.style[m]=d[m]}}catch(t){v.e(t)}finally{v.f()}var h=".",p="INPUT"===t.tagName?t.value.replace(/ /g,h):t.value,b=p.substr(0,i);y.textContent=b,"TEXTAREA"===t.tagName&&(y.style.height="auto"),"INPUT"===t.tagName&&(y.style.width="auto"),y.style.position="absolute";var g=document.createElement("span");g.textContent=p.substr(i)||".",y.appendChild(g),document.body.appendChild(y);var S=g.offsetLeft,w=g.offsetTop;document.body.removeChild(y);var x=f+S,A=s+w,I=d.lineHeight,C=d.paddingRight;return{x:x=Math.min(x-n,f+c-parseInt(C,10)),y:A=Math.min(A-a,s+l-parseInt(I,10))+window.scrollY}};module.exports=function(r){var n=e(t.useState(null),2),o=n[0],i=n[1],u=e(t.useState(null),2),l=u[0],c=u[1];return{x:o,y:l,getPosition:function(t){if(t.current){var e=a(t.current),r=e.x,n=e.y;i(r),c(n)}},getSelection:function(t){if(t.current){var e=(n=t.current,o=a(n,"selectionStart"),u=o.y,{x:(l=o.x)+(a(n,"selectionEnd").x-l)/2,y:u}),r=e.y;i(e.x),c(r)}var n,o,u,l}}};