react-true-resizable
Advanced tools
Comparing version 0.2.0 to 0.2.1
@@ -1,6 +0,6 @@ | ||
"use strict";var Rt=Object.defineProperty;var gt=Object.getOwnPropertySymbols;var jt=Object.prototype.hasOwnProperty,zt=Object.prototype.propertyIsEnumerable;var ht=(t,r,e)=>r in t?Rt(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,Q=(t,r)=>{for(var e in r||(r={}))jt.call(r,e)&&ht(t,e,r[e]);if(gt)for(var e of gt(r))zt.call(r,e)&&ht(t,e,r[e]);return t};var s=require("react"),D=require("lodash"),Et=require("react-fast-compare"),St=require("react-dom");function et(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var N=et(s),Ht=et(Et),xt=et(St);const Lt=t=>{const r=s.useRef(null);let e=r;return(t==null?void 0:t.ref)&&"current"in t.ref&&(r.current=t.ref.current,e=t.ref),e},dt=()=>{const[,t]=s.useState({});return()=>t({})},_t=["left","top","right","bottom","width","height"],Z=(t,r)=>{const[e,l]=s.useState(null);return s.useLayoutEffect(()=>{if(!t||typeof t!="object"||!("getBoundingClientRect"in t))return;const n=D.pick(t.getBoundingClientRect(),_t);Ht.default(e,n)||l(n)},r),e};var U={exports:{}},F={};/* | ||
"use strict";var St=Object.defineProperty;var ht=Object.getOwnPropertySymbols;var zt=Object.prototype.hasOwnProperty,Et=Object.prototype.propertyIsEnumerable;var pt=(t,r,e)=>r in t?St(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,Z=(t,r)=>{for(var e in r||(r={}))zt.call(r,e)&&pt(t,e,r[e]);if(ht)for(var e of ht(r))Et.call(r,e)&&pt(t,e,r[e]);return t};var s=require("react"),Ht=require("lodash"),xt=require("react-fast-compare"),Lt=require("react-dom");function rt(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var U=rt(s),_t=rt(xt),jt=rt(Lt);const Ct=t=>{const r=s.useRef(null);let e=r;return(t==null?void 0:t.ref)&&"current"in t.ref&&(r.current=t.ref.current,e=t.ref),e},vt=()=>{const[,t]=s.useState({});return()=>t({})},M=t=>t===void 0?t:JSON.parse(JSON.stringify(t));function F(t,r){for(const e in r)try{r[e].constructor==Object?t[e]=F(t[e],r[e]):t[e]=r[e]}catch{t[e]=r[e]}return t}const It=["left","top","right","bottom","width","height"],P=(t,r)=>{const[e,l]=s.useState(null);return s.useLayoutEffect(()=>{if(!t||typeof t!="object"||!("getBoundingClientRect"in t))return;const n=Ht.pick(t.getBoundingClientRect(),It);_t.default(e,n)||l(n)},r),e};var J={exports:{}},q={};/* | ||
object-assign | ||
(c) Sindre Sorhus | ||
@license MIT | ||
*/var pt=Object.getOwnPropertySymbols,Ct=Object.prototype.hasOwnProperty,It=Object.prototype.propertyIsEnumerable;function qt(t){if(t==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}function Ft(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de",Object.getOwnPropertyNames(t)[0]==="5")return!1;for(var r={},e=0;e<10;e++)r["_"+String.fromCharCode(e)]=e;var l=Object.getOwnPropertyNames(r).map(function(c){return r[c]});if(l.join("")!=="0123456789")return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(c){n[c]=c}),Object.keys(Object.assign({},n)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}Ft();/** @license React v17.0.2 | ||
*/var yt=Object.getOwnPropertySymbols,Ft=Object.prototype.hasOwnProperty,qt=Object.prototype.propertyIsEnumerable;function kt(t){if(t==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}function Tt(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de",Object.getOwnPropertyNames(t)[0]==="5")return!1;for(var r={},e=0;e<10;e++)r["_"+String.fromCharCode(e)]=e;var l=Object.getOwnPropertyNames(r).map(function(a){return r[a]});if(l.join("")!=="0123456789")return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(a){n[a]=a}),Object.keys(Object.assign({},n)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}Tt();/** @license React v17.0.2 | ||
* react-jsx-runtime.production.min.js | ||
@@ -12,2 +12,2 @@ * | ||
* LICENSE file in the root directory of this source tree. | ||
*/var kt=N.default,vt=60103;F.Fragment=60107;if(typeof Symbol=="function"&&Symbol.for){var yt=Symbol.for;vt=yt("react.element"),F.Fragment=yt("react.fragment")}var Tt=kt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Yt=Object.prototype.hasOwnProperty,Bt={key:!0,ref:!0,__self:!0,__source:!0};function bt(t,r,e){var l,n={},c=null,i=null;e!==void 0&&(c=""+e),r.key!==void 0&&(c=""+r.key),r.ref!==void 0&&(i=r.ref);for(l in r)Yt.call(r,l)&&!Bt.hasOwnProperty(l)&&(n[l]=r[l]);if(t&&t.defaultProps)for(l in r=t.defaultProps,r)n[l]===void 0&&(n[l]=r[l]);return{$$typeof:vt,type:t,key:c,ref:i,props:n,_owner:Tt.current}}F.jsx=bt;F.jsxs=bt;U.exports=F;const P=U.exports.jsx,Xt=U.exports.jsxs,Mt=U.exports.Fragment,Nt=N.default.forwardRef(function({nodeRef:r,nodePosition:e,setCalculatedHeight:l,setCalculatedWidth:n,setCalculatedLeft:c,calculatedHeight:i,calculatedWidth:p,setCalculatedTop:m,HandleStyleFn:w,handlesParentPosition:d,handleOptions:v,handlesOptions:L,ResizableProps:y,setEndDraggingOffsetTop:V,setEndDraggingOffsetLeft:_,endDraggingOffsetTop:f,endDraggingOffsetLeft:S,handleStyle:k},rt){var H,x;dt();const[C,A]=s.useState({height:0,width:0}),[b,W]=s.useState({y:0,x:0}),O=(H=v.allowResize.vertical)==null?void 0:H.reverseDrag,j=(x=v.allowResize.horizontal)==null?void 0:x.reverseDrag,[R,z]=s.useState(!1),[T,$]=s.useState(0),E=s.useRef(null),J=Z(E.current),Y=a=>{let o=a.clientY-b.y;return y.grid&&(o-=a.clientY%y.grid-b.y%y.grid),o},B=a=>{let o=a.clientX-b.x;return y.grid&&(o-=a.clientX%y.grid-b.x%y.grid),o},G=a=>{var h,q;z(!0),(h=E.current)==null||h.setPointerCapture(a.pointerId),$(a.pointerId);const o=(q=r==null?void 0:r.current)==null?void 0:q.getBoundingClientRect();A({width:o.width,height:o.height}),W({x:a.clientX,y:a.clientY})},K=a=>{var o;if((o=E.current)==null||o.releasePointerCapture(T),z(!1),O){let h=Y(a)+f;i&&i<0&&(h+=i),V(h)}if(j){let h=B(a)+S;p&&p<0&&(h+=p),_(h)}},I=a=>{if(R){if("vertical"in v.allowResize){const o=O?-1:1;let h=C.height-(b.y-a.clientY)*o;y.grid&&(h-=(a.clientY%y.grid-b.y%y.grid)*o),y.enableRelativeOffset&&o===-1&&h>0&&m(Y(a)+f),l(h)}if("horizontal"in v.allowResize){const o=j?-1:1;let h=C.width-(b.x-a.clientX)*o;y.grid&&(h-=(a.clientX%y.grid-b.x%y.grid)*o),y.enableRelativeOffset&&o===-1&&h>0&&c(B(a)+S),n(h)}}},X=w({nodePosition:e,handlerPos:J,handlesParentPosition:d,handlerSize:v.size,handlesOptions:L});return P("div",{ref:E,style:Q(Q({position:"absolute"},X),k),onPointerMove:I,onPointerDown:G,onPointerUp:K})}),g=(t,r=1)=>{const e=10**r;return Math.round(t*e)/e},wt=(t,r)=>t.filter(e=>!r.includes(e)),Ut=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l,handlesOptions:n})=>{var i,p,m,w,d,v;if(!t||!r||!e)return{};let c=t.top-e.top;return{top:g(c),left:g(t.left-e.left+((p=(i=n.left)==null?void 0:i.size)!=null?p:0)),cursor:"ns-resize",width:g((t==null?void 0:t.width)-((w=(m=n.left)==null?void 0:m.size)!=null?w:0)-((v=(d=n.right)==null?void 0:d.size)!=null?v:0)),height:l}},Vt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l,handlesOptions:n})=>{var i,p,m,w,d,v;if(!t||!r||!e)return{};let c=t.top+t.height-e.top-l;return{top:g(c),left:g(t.left-e.left+((p=(i=n.left)==null?void 0:i.size)!=null?p:0)),cursor:"ns-resize",width:g((t==null?void 0:t.width)-((w=(m=n.left)==null?void 0:m.size)!=null?w:0)-((v=(d=n.right)==null?void 0:d.size)!=null?v:0)),height:l}},At=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:t.top-e.top,left:t.left-e.left,cursor:"ew-resize",height:t==null?void 0:t.height,width:l},Wt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top),left:g(n),cursor:"ew-resize",height:g(t==null?void 0:t.height),width:g(l)}},$t=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top+t.height-l),left:g(n),cursor:"nwse-resize",height:g(l),width:g(l)}},Jt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:t.height+-l+t.top-e.top,left:t.left-e.left,cursor:"nesw-resize",height:l,width:l},Gt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top),left:g(n),cursor:"nesw-resize",height:g(l),width:g(l)}},Kt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:g(t.top-e.top),left:g(t.left-e.left),cursor:"nwse-resize",height:g(l),width:g(l)},tt={top:Ut,left:At,bottom:Vt,right:Wt,bottomRight:$t,bottomLeft:Jt,topRight:Gt,topLeft:Kt},mt=N.default.forwardRef(function(r,e){var q,lt,ft,nt,it,st,ut;let{grid:l,children:n,onResizeEffect:c,enabledHandles:i=Object.keys(tt),handlerOptions:p={},handlersOptions:m={},disableHeightControl:w=!1,disableWidthControl:d=!1,handleStyle:v,handlesStyle:L}=r,y=D.merge(D.cloneDeep(Zt),m),V=D.merge(D.cloneDeep(Qt),p);const _=dt();let f=Lt(n);r.nodeRef&&(f=r.nodeRef),e&&typeof e=="object"&&f&&(e.current=f.current);const S=Z(f.current),k=s.useRef(null),rt=Z(k.current),[C,A]=s.useState(""),[b,W]=s.useState(""),[O,j]=s.useState(void 0),[R,z]=s.useState(void 0),[T,$]=s.useState(0),[E,J]=s.useState(0),[Y,B]=s.useState(0),[G,K]=s.useState(0);let I={};for(const u of i)u in y&&(I[u]=D.merge(D.cloneDeep(V),y[u]));let X={};for(const u of i)X[u]=D.merge(D.cloneDeep(v),(q=L==null?void 0:L[u])!=null?q:{});const H=!d&&!!i.find(u=>u.toLowerCase().includes("left")||u.toLowerCase().includes("right")),x=!w&&!!i.find(u=>u.toLowerCase().includes("top")||u.toLowerCase().includes("bottom"));s.useLayoutEffect(()=>{f.current&&!x&&j(null),f.current&&O&&(f.current.style.height=C)},[x]),s.useLayoutEffect(()=>{f.current&&!H&&z(null),f.current&&R&&(f.current.style.width=b)},[H]),s.useImperativeHandle(r.ResizableRef,()=>({restControl:(u=!0,M=!0)=>{f.current&&u&&(j(null),f.current.style.height=C),f.current&&M&&(z(null),f.current.style.width=b)}})),s.useLayoutEffect(()=>(window.addEventListener("resize",_),()=>{window.removeEventListener("resize",_)}),[]),s.useLayoutEffect(()=>{var u,M,at,ct,ot;if(f.current){let{height:Ot,width:Dt}=(at=(M=(u=f.current)==null?void 0:u.getBoundingClientRect)==null?void 0:M.call(u))!=null?at:{};j(Ot),z(Dt),A((ct=f.current)==null?void 0:ct.style.height),W((ot=f.current)==null?void 0:ot.style.width)}},[f.current]),s.useLayoutEffect(()=>{c&&c(S)},[O,R]);const a=x&&(nt=O!=null?O:(ft=(lt=f==null?void 0:f.current)==null?void 0:lt.style)==null?void 0:ft.height)!=null?nt:void 0,o=H&&(ut=R!=null?R:(st=(it=f==null?void 0:f.current)==null?void 0:it.style)==null?void 0:st.width)!=null?ut:void 0;f!=null&&f.current&&(!w&&!!a&&(f.current.style.height=a+"px",r.enableRelativeOffset&&(f.current.style.top=E+"px")),!d&&!!o&&(f.current.style.width=o+"px",r.enableRelativeOffset&&(f.current.style.left=T+"px"))),s.useEffect(()=>{f!=null&&f.current&&(f.current.style.boxSizing="border-box")},[f.current]),s.useEffect(()=>{_()},[r.enabledHandles,w,d]),w&&(i=wt(i,["top","bottom"])),d&&(i=wt(i,["left","right"]));const h=w&&d;return h&&(i=[]),Xt(Mt,{children:[n&&N.default.cloneElement(n,{ref:f,key:"ResizableNode"},n==null?void 0:n.props.children),f.current&&!h&&xt.default.createPortal(P("div",{style:{position:"absolute"},ref:k,children:S&&i.map(u=>P(Nt,{nodeRef:f,nodePosition:S,setCalculatedHeight:j,setCalculatedWidth:z,calculatedHeight:O,calculatedWidth:R,setCalculatedLeft:$,setCalculatedTop:J,setEndDraggingOffsetTop:B,setEndDraggingOffsetLeft:K,endDraggingOffsetTop:Y,endDraggingOffsetLeft:G,calculatedLeft:T,calculatedTop:E,HandleStyleFn:tt[u],handlesParentPosition:rt,handleOptions:I[u],handlesOptions:I,handleStyle:X[u],ResizableProps:r},u))},"ResizableHandlerParent"),f.current)]})}),Qt={size:10},Zt={top:{allowResize:{vertical:{reverseDrag:!0}}},left:{allowResize:{horizontal:{reverseDrag:!0}}},bottom:{allowResize:{vertical:{reverseDrag:!1}}},right:{allowResize:{horizontal:{reverseDrag:!1}}},bottomRight:{allowResize:{horizontal:{reverseDrag:!1},vertical:{reverseDrag:!1}}},bottomLeft:{allowResize:{horizontal:{reverseDrag:!0},vertical:{reverseDrag:!1}}},topRight:{allowResize:{horizontal:{reverseDrag:!1},vertical:{reverseDrag:!0}}},topLeft:{allowResize:{horizontal:{reverseDrag:!0},vertical:{reverseDrag:!0}}}};mt.defaultProps={enabledHandles:Object.keys(tt)};module.exports=mt; | ||
*/var Nt=U.default,bt=60103;q.Fragment=60107;if(typeof Symbol=="function"&&Symbol.for){var wt=Symbol.for;bt=wt("react.element"),q.Fragment=wt("react.fragment")}var Yt=Nt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Bt=Object.prototype.hasOwnProperty,Xt={key:!0,ref:!0,__self:!0,__source:!0};function mt(t,r,e){var l,n={},a=null,i=null;e!==void 0&&(a=""+e),r.key!==void 0&&(a=""+r.key),r.ref!==void 0&&(i=r.ref);for(l in r)Bt.call(r,l)&&!Xt.hasOwnProperty(l)&&(n[l]=r[l]);if(t&&t.defaultProps)for(l in r=t.defaultProps,r)n[l]===void 0&&(n[l]=r[l]);return{$$typeof:bt,type:t,key:a,ref:i,props:n,_owner:Yt.current}}q.jsx=mt;q.jsxs=mt;J.exports=q;const tt=J.exports.jsx,Mt=J.exports.jsxs,Ut=J.exports.Fragment,Jt=U.default.forwardRef(function({nodeRef:r,nodePosition:e,setCalculatedHeight:l,setCalculatedWidth:n,setCalculatedLeft:a,calculatedHeight:i,calculatedWidth:p,setCalculatedTop:m,HandleStyleFn:w,handlesParentPosition:d,handleOptions:v,handlesOptions:L,ResizableProps:y,setEndDraggingOffsetTop:V,setEndDraggingOffsetLeft:_,endDraggingOffsetTop:f,endDraggingOffsetLeft:E,handleStyle:k},lt){var H,x;vt();const[j,A]=s.useState({height:0,width:0}),[b,W]=s.useState({y:0,x:0}),O=(H=v.allowResize.vertical)==null?void 0:H.reverseDrag,R=(x=v.allowResize.horizontal)==null?void 0:x.reverseDrag,[D,S]=s.useState(!1),[T,$]=s.useState(0),z=s.useRef(null),G=P(z.current),N=c=>{let o=c.clientY-b.y;return y.grid&&(o-=c.clientY%y.grid-b.y%y.grid),o},Y=c=>{let o=c.clientX-b.x;return y.grid&&(o-=c.clientX%y.grid-b.x%y.grid),o},K=c=>{var h,I;S(!0),(h=z.current)==null||h.setPointerCapture(c.pointerId),$(c.pointerId);const o=(I=r==null?void 0:r.current)==null?void 0:I.getBoundingClientRect();A({width:o.width,height:o.height}),W({x:c.clientX,y:c.clientY})},Q=c=>{var o;if((o=z.current)==null||o.releasePointerCapture(T),S(!1),O){let h=N(c)+f;i&&i<0&&(h+=i),V(h)}if(R){let h=Y(c)+E;p&&p<0&&(h+=p),_(h)}},C=c=>{if(D){if("vertical"in v.allowResize){const o=O?-1:1;let h=j.height-(b.y-c.clientY)*o;y.grid&&(h-=(c.clientY%y.grid-b.y%y.grid)*o),y.enableRelativeOffset&&o===-1&&h>0&&m(N(c)+f),l(h)}if("horizontal"in v.allowResize){const o=R?-1:1;let h=j.width-(b.x-c.clientX)*o;y.grid&&(h-=(c.clientX%y.grid-b.x%y.grid)*o),y.enableRelativeOffset&&o===-1&&h>0&&a(Y(c)+E),n(h)}}},B=w({nodePosition:e,handlerPos:G,handlesParentPosition:d,handlerSize:v.size,handlesOptions:L});return tt("div",{ref:z,style:Z(Z({position:"absolute"},B),k),onPointerMove:C,onPointerDown:K,onPointerUp:Q})}),g=(t,r=1)=>{const e=10**r;return Math.round(t*e)/e},dt=(t,r)=>t.filter(e=>!r.includes(e)),Vt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l,handlesOptions:n})=>{var i,p,m,w,d,v;if(!t||!r||!e)return{};let a=t.top-e.top;return{top:g(a),left:g(t.left-e.left+((p=(i=n.left)==null?void 0:i.size)!=null?p:0)),cursor:"ns-resize",width:g((t==null?void 0:t.width)-((w=(m=n.left)==null?void 0:m.size)!=null?w:0)-((v=(d=n.right)==null?void 0:d.size)!=null?v:0)),height:l}},At=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l,handlesOptions:n})=>{var i,p,m,w,d,v;if(!t||!r||!e)return{};let a=t.top+t.height-e.top-l;return{top:g(a),left:g(t.left-e.left+((p=(i=n.left)==null?void 0:i.size)!=null?p:0)),cursor:"ns-resize",width:g((t==null?void 0:t.width)-((w=(m=n.left)==null?void 0:m.size)!=null?w:0)-((v=(d=n.right)==null?void 0:d.size)!=null?v:0)),height:l}},Wt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:t.top-e.top,left:t.left-e.left,cursor:"ew-resize",height:t==null?void 0:t.height,width:l},$t=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top),left:g(n),cursor:"ew-resize",height:g(t==null?void 0:t.height),width:g(l)}},Gt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top+t.height-l),left:g(n),cursor:"nwse-resize",height:g(l),width:g(l)}},Kt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:t.height+-l+t.top-e.top,left:t.left-e.left,cursor:"nesw-resize",height:l,width:l},Qt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>{if(!t||!r||!e)return{};let n=t.width-l-(e.left-t.left);return{top:g(t.top-e.top),left:g(n),cursor:"nesw-resize",height:g(l),width:g(l)}},Zt=({nodePosition:t,handlerPos:r,handlesParentPosition:e,handlerSize:l})=>!t||!r||!e?{}:{top:g(t.top-e.top),left:g(t.left-e.left),cursor:"nwse-resize",height:g(l),width:g(l)},et={top:Vt,left:Wt,bottom:At,right:$t,bottomRight:Gt,bottomLeft:Kt,topRight:Qt,topLeft:Zt},Ot=U.default.forwardRef(function(r,e){var I,ft,nt,it,st,ut,ct;let{grid:l,children:n,onResizeEffect:a,enabledHandles:i=Object.keys(et),handlerOptions:p={},handlersOptions:m={},disableHeightControl:w=!1,disableWidthControl:d=!1,handleStyle:v={},handlesStyle:L={}}=r,y=F(M(te),m),V=F(M(Pt),p);const _=vt();let f=Ct(n);r.nodeRef&&(f=r.nodeRef),e&&typeof e=="object"&&f&&(e.current=f.current);const E=P(f.current),k=s.useRef(null),lt=P(k.current),[j,A]=s.useState(""),[b,W]=s.useState(""),[O,R]=s.useState(void 0),[D,S]=s.useState(void 0),[T,$]=s.useState(0),[z,G]=s.useState(0),[N,Y]=s.useState(0),[K,Q]=s.useState(0);let C={};for(const u of i)u in y&&(C[u]=F(M(V),y[u]));let B={};for(const u of i)B[u]=F(M(v),(I=L==null?void 0:L[u])!=null?I:{});const H=!d&&!!i.find(u=>u.toLowerCase().includes("left")||u.toLowerCase().includes("right")),x=!w&&!!i.find(u=>u.toLowerCase().includes("top")||u.toLowerCase().includes("bottom"));s.useLayoutEffect(()=>{f.current&&!x&&R(null),f.current&&O&&(f.current.style.height=j)},[x]),s.useLayoutEffect(()=>{f.current&&!H&&S(null),f.current&&D&&(f.current.style.width=b)},[H]),s.useImperativeHandle(r.ResizableRef,()=>({restControl:(u=!0,X=!0)=>{f.current&&u&&(R(null),f.current.style.height=j),f.current&&X&&(S(null),f.current.style.width=b)}})),s.useLayoutEffect(()=>(window.addEventListener("resize",_),()=>{window.removeEventListener("resize",_)}),[]),s.useLayoutEffect(()=>{var u,X,at,ot,gt;if(f.current){let{height:Dt,width:Rt}=(at=(X=(u=f.current)==null?void 0:u.getBoundingClientRect)==null?void 0:X.call(u))!=null?at:{};R(Dt),S(Rt),A((ot=f.current)==null?void 0:ot.style.height),W((gt=f.current)==null?void 0:gt.style.width)}},[f.current]),s.useLayoutEffect(()=>{a&&a(E)},[O,D]);const c=x&&(it=O!=null?O:(nt=(ft=f==null?void 0:f.current)==null?void 0:ft.style)==null?void 0:nt.height)!=null?it:void 0,o=H&&(ct=D!=null?D:(ut=(st=f==null?void 0:f.current)==null?void 0:st.style)==null?void 0:ut.width)!=null?ct:void 0;f!=null&&f.current&&(!w&&!!c&&(f.current.style.height=c+"px",r.enableRelativeOffset&&(f.current.style.top=z+"px")),!d&&!!o&&(f.current.style.width=o+"px",r.enableRelativeOffset&&(f.current.style.left=T+"px"))),s.useEffect(()=>{f!=null&&f.current&&(f.current.style.boxSizing="border-box")},[f.current]),s.useEffect(()=>{_()},[r.enabledHandles,w,d]),w&&(i=dt(i,["top","bottom"])),d&&(i=dt(i,["left","right"]));const h=w&&d;return h&&(i=[]),Mt(Ut,{children:[n&&U.default.cloneElement(n,{ref:f,key:"ResizableNode"},n==null?void 0:n.props.children),f.current&&!h&&jt.default.createPortal(tt("div",{style:{position:"absolute"},ref:k,children:E&&i.map(u=>tt(Jt,{nodeRef:f,nodePosition:E,setCalculatedHeight:R,setCalculatedWidth:S,calculatedHeight:O,calculatedWidth:D,setCalculatedLeft:$,setCalculatedTop:G,setEndDraggingOffsetTop:Y,setEndDraggingOffsetLeft:Q,endDraggingOffsetTop:N,endDraggingOffsetLeft:K,calculatedLeft:T,calculatedTop:z,HandleStyleFn:et[u],handlesParentPosition:lt,handleOptions:C[u],handlesOptions:C,handleStyle:B[u],ResizableProps:r},u))},"ResizableHandlerParent"),f.current)]})}),Pt={size:10},te={top:{allowResize:{vertical:{reverseDrag:!0}}},left:{allowResize:{horizontal:{reverseDrag:!0}}},bottom:{allowResize:{vertical:{reverseDrag:!1}}},right:{allowResize:{horizontal:{reverseDrag:!1}}},bottomRight:{allowResize:{horizontal:{reverseDrag:!1},vertical:{reverseDrag:!1}}},bottomLeft:{allowResize:{horizontal:{reverseDrag:!0},vertical:{reverseDrag:!1}}},topRight:{allowResize:{horizontal:{reverseDrag:!1},vertical:{reverseDrag:!0}}},topLeft:{allowResize:{horizontal:{reverseDrag:!0},vertical:{reverseDrag:!0}}}};Ot.defaultProps={enabledHandles:Object.keys(et)};module.exports=Ot; |
@@ -18,3 +18,3 @@ var __defProp = Object.defineProperty; | ||
import React, { useRef, useState, useLayoutEffect, useImperativeHandle, useEffect } from "react"; | ||
import { pick, merge, cloneDeep } from "lodash"; | ||
import { pick } from "lodash"; | ||
import isEqual from "react-fast-compare"; | ||
@@ -35,2 +35,21 @@ import ReactDOM from "react-dom"; | ||
}; | ||
const cloneDeepNoFunction = (obj) => { | ||
if (obj === void 0) | ||
return obj; | ||
return JSON.parse(JSON.stringify(obj)); | ||
}; | ||
function mergeRecursive(obj1, obj2) { | ||
for (const p2 in obj2) { | ||
try { | ||
if (obj2[p2].constructor == Object) { | ||
obj1[p2] = mergeRecursive(obj1[p2], obj2[p2]); | ||
} else { | ||
obj1[p2] = obj2[p2]; | ||
} | ||
} catch (e) { | ||
obj1[p2] = obj2[p2]; | ||
} | ||
} | ||
return obj1; | ||
} | ||
const posAttrs = ["left", "top", "right", "bottom", "width", "height"]; | ||
@@ -443,7 +462,7 @@ const usePosition = (elementRef, dependencies) => { | ||
disableWidthControl = false, | ||
handleStyle, | ||
handlesStyle | ||
handleStyle = {}, | ||
handlesStyle = {} | ||
} = props; | ||
let mergedHandlersOptions = merge(cloneDeep(defaultHandlersOptions), handlersOptions); | ||
let mergedHandlerOptions = merge(cloneDeep(defaultHandlerOptions), handlerOptions); | ||
let mergedHandlersOptions = mergeRecursive(cloneDeepNoFunction(defaultHandlersOptions), handlersOptions); | ||
let mergedHandlerOptions = mergeRecursive(cloneDeepNoFunction(defaultHandlerOptions), handlerOptions); | ||
const render = useRerender(); | ||
@@ -469,3 +488,3 @@ let nodeRef = usePassRef(children); | ||
if (handle in mergedHandlersOptions) { | ||
finalHandlesOptions[handle] = merge(cloneDeep(mergedHandlerOptions), mergedHandlersOptions[handle]); | ||
finalHandlesOptions[handle] = mergeRecursive(cloneDeepNoFunction(mergedHandlerOptions), mergedHandlersOptions[handle]); | ||
} | ||
@@ -475,3 +494,3 @@ } | ||
for (const handle of enabledHandles) { | ||
finalHandlesStyle[handle] = merge(cloneDeep(handleStyle), (_a = handlesStyle == null ? void 0 : handlesStyle[handle]) != null ? _a : {}); | ||
finalHandlesStyle[handle] = mergeRecursive(cloneDeepNoFunction(handleStyle), (_a = handlesStyle == null ? void 0 : handlesStyle[handle]) != null ? _a : {}); | ||
} | ||
@@ -478,0 +497,0 @@ const enableHorizontal = !disableWidthControl && !!enabledHandles.find((h) => h.toLowerCase().includes("left") || h.toLowerCase().includes("right")); |
{ | ||
"name": "react-true-resizable", | ||
"version": "0.2.0", | ||
"version": "0.2.1", | ||
"description": "", | ||
@@ -17,3 +17,2 @@ "main": "dist/react-true-resizable.cjs.js", | ||
"dependencies": { | ||
"lodash": "^4.17.21", | ||
"react-fast-compare": "^3.2.0" | ||
@@ -20,0 +19,0 @@ }, |
@@ -6,6 +6,11 @@ # react-true-resizable | ||
# Docs | ||
# Docs Site | ||
for documentation please refer to site: https://eliav2.github.io/react-true-resizable/ | ||
## Other links | ||
npm package: https://www.npmjs.com/package/react-true-resizable | ||
github repo: https://github.com/Eliav2/react-true-resizable | ||
## install | ||
@@ -20,1 +25,2 @@ | ||
``` | ||
Sorry, the diff of this file is not supported yet
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
52436
3
22
983
25
0
1
- Removedlodash@^4.17.21
- Removedlodash@4.17.21(transitive)