react-split-pane
Version:
React split-pane component with hooks and TypeScript
3 lines (2 loc) • 2.26 kB
JavaScript
import{useRef as e,useCallback as t}from"react";function n(e,t,n){return Math.min(Math.max(e,t),n)}function r(e,t="polite"){if("undefined"==typeof document)return;const n=document.createElement("div");n.setAttribute("role","status"),n.setAttribute("aria-live",t),n.setAttribute("aria-atomic","true"),n.style.position="absolute",n.style.left="-10000px",n.style.width="1px",n.style.height="1px",n.style.overflow="hidden",n.textContent=e,document.body.appendChild(n),setTimeout(()=>{document.body.removeChild(n)},1e3)}function o(e){return 1e3>e?Math.round(e)+" pixels":Math.round(e/10)/100+" thousand pixels"}const i=10,s=50;function a(a){const{direction:c,sizes:u,minSizes:l,maxSizes:d,step:m=i,largeStep:h=s,onResize:f,onResizeEnd:y}=a,p=e(null);return{handleKeyDown:t(e=>t=>{if(!("horizontal"===c?["ArrowLeft","ArrowRight"]:["ArrowUp","ArrowDown"]).includes(t.key)&&"Home"!==t.key&&"End"!==t.key&&"Escape"!==t.key)return;if(t.preventDefault(),"Escape"===t.key){if(p.current){const e=p.current;p.current=null,f&&f(e,{sizes:e,source:"keyboard",originalEvent:t.nativeEvent}),y&&y(e,{sizes:e,source:"keyboard",originalEvent:t.nativeEvent}),r("Pane sizes restored")}return}null===p.current&&(p.current=[...u]);let i=0,s=[...u],a="arrow";switch(t.key){case"ArrowLeft":case"ArrowUp":i=-(t.shiftKey?h:m);break;case"ArrowRight":case"ArrowDown":i=t.shiftKey?h:m;break;case"Home":{a="home";const t=e+1,n=l[e]??0,r=(u[e]??0)+(u[t]??0);s[e]=n,s[t]=r-n;break}case"End":{a="end";const t=e,n=e+1,r=(u[t]??0)+(u[n]??0);s[t]=Math.min(d[t]??1/0,r-(l[n]??0)),s[n]=r-s[t];break}}if(0!==i&&(s=function(e,t,r,o,i){const s=[...e],a=e[t]??0,c=e[t+1]??0,u=o[t+1]??0,l=i[t+1]??1/0;let d=n(a+r,o[t]??0,i[t]??1/0),m=n(c-r,u,l);const h=c-m,f=Math.min(Math.abs(d-a),Math.abs(h));return r>0?(d=a+f,m=c-f):(d=a-f,m=c+f),s[t]=d,s[t+1]=m,s}(u,e,i,l,d)),s=s.map((e,t)=>n(e,l[t]??0,d[t]??1/0)),f&&f(s,{sizes:s,source:"keyboard",originalEvent:t.nativeEvent}),y&&y(s,{sizes:s,source:"keyboard",originalEvent:t.nativeEvent}),"home"===a)r(`Pane ${e+1} minimized to ${o(s[e]??0)}`);else if("end"===a)r(`Pane ${e+1} maximized to ${o(s[e]??0)}`);else{const t=i>0?e:e+1;r(`Pane ${t+1} resized to ${o(s[t]??0)}`)}},[c,u,l,d,m,h,f,y])}}export{a as useKeyboardResize};
//# sourceMappingURL=keyboard.js.map