@e1011/es-kit 1.0.42 → 1.0.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/hooks/esm/index.css +24 -24
  2. package/dist/hooks/esm/src/core/hooks/useResize.js +1 -1
  3. package/dist/hooks/esm/src/core/hooks/useResize.js.map +1 -1
  4. package/dist/hooks/index.css +24 -24
  5. package/dist/hooks/src/core/hooks/useResize.js +1 -1
  6. package/dist/hooks/src/core/hooks/useResize.js.map +1 -1
  7. package/dist/lib/cjs/src/core/hooks/useResize.js +1 -1
  8. package/dist/lib/cjs/src/core/hooks/useResize.js.map +1 -1
  9. package/dist/lib/cjs/src/core/ui/components/container/ResizableContainer.js +1 -1
  10. package/dist/lib/cjs/src/core/ui/components/container/ResizableContainer.js.map +1 -1
  11. package/dist/lib/esm/src/core/hooks/useResize.js +1 -1
  12. package/dist/lib/esm/src/core/hooks/useResize.js.map +1 -1
  13. package/dist/lib/esm/src/core/ui/components/container/ResizableContainer.js +1 -1
  14. package/dist/lib/esm/src/core/ui/components/container/ResizableContainer.js.map +1 -1
  15. package/dist/lib/src/core/hooks/useResize.js +6 -6
  16. package/dist/lib/src/core/hooks/useResize.js.map +1 -1
  17. package/dist/lib/src/core/ui/components/container/ResizableContainer.js +8 -5
  18. package/dist/lib/src/core/ui/components/container/ResizableContainer.js.map +1 -1
  19. package/dist/lib/tsconfig.tsbuildinfo +1 -1
  20. package/dist/types/src/core/hooks/useResize.d.ts +3 -2
  21. package/dist/types/src/core/hooks/useResize.d.ts.map +1 -1
  22. package/dist/types/src/core/ui/components/container/ResizableContainer.d.ts +3 -1
  23. package/dist/types/src/core/ui/components/container/ResizableContainer.d.ts.map +1 -1
  24. package/dist/ui/esm/src/core/ui/components/container/ResizableContainer.js +1 -1
  25. package/dist/ui/esm/src/core/ui/components/container/ResizableContainer.js.map +1 -1
  26. package/dist/ui/src/core/ui/components/container/ResizableContainer.js +1 -1
  27. package/dist/ui/src/core/ui/components/container/ResizableContainer.js.map +1 -1
  28. package/dist/utils/esm/index.css +24 -24
  29. package/dist/utils/index.css +24 -24
  30. package/package.json +1 -1
@@ -1,3 +1,27 @@
1
+ .fbox-module_flexible-box__rLJ93 {
2
+ display: flex;
3
+ position: relative;
4
+ flex-direction: row;
5
+ flex: 0;
6
+ flex-grow: 0;
7
+ flex-shrink: 0;
8
+ flex-basis: auto;
9
+ flex-wrap: nowrap;
10
+ gap: 0;
11
+ text-align: left;
12
+ justify-content: flex-start;
13
+ align-items: flex-start;
14
+ align-self: auto;
15
+ margin: 0;
16
+ padding: 0;
17
+ width: auto;
18
+ height: auto;
19
+ max-width: none;
20
+ max-height: none;
21
+ min-width: 0;
22
+ min-height: 0;
23
+ border-radius: initial;
24
+ }
1
25
  .divider-module_divider-line__6CesR {
2
26
  position: relative;
3
27
  display: block;
@@ -46,28 +70,4 @@
46
70
  fill: var(--icon-content-color);
47
71
  width: var(--height);
48
72
  height: var(--width);
49
- }
50
- .fbox-module_flexible-box__rLJ93 {
51
- display: flex;
52
- position: relative;
53
- flex-direction: row;
54
- flex: 0;
55
- flex-grow: 0;
56
- flex-shrink: 0;
57
- flex-basis: auto;
58
- flex-wrap: nowrap;
59
- gap: 0;
60
- text-align: left;
61
- justify-content: flex-start;
62
- align-items: flex-start;
63
- align-self: auto;
64
- margin: 0;
65
- padding: 0;
66
- width: auto;
67
- height: auto;
68
- max-width: none;
69
- max-height: none;
70
- min-width: 0;
71
- min-height: 0;
72
- border-radius: initial;
73
73
  }
@@ -1,2 +1,2 @@
1
- import{slicedToArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useMemo as n,useLayoutEffect as r}from"react";import l from"../../../node_modules/lodash-es/debounce.js";var o=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,u=e({width:void 0,height:void 0}),d=t(u,2),c=d[0],v=d[1],h=i({width:0,height:0}),a=i(),s=i(),g=n((function(){return l((function(t){var e,i,n,r,l=t[0].contentRect.width,o=t[0].contentRect.height;(null===(e=h.current)||void 0===e?void 0:e.width)===l&&(null===(i=h.current)||void 0===i?void 0:i.height)===o||(h.current={width:l,height:o},v({width:null==a||null===(n=a.current)||void 0===n?void 0:n.clientWidth,height:null==a||null===(r=a.current)||void 0===r?void 0:r.clientHeight}))}),o)}),[a,o]);return r((function(){var t,e,i,n;null!=a&&a.current&&(e=null==a?void 0:a.current,(t=new ResizeObserver(g)).observe(e),v({width:null==a||null===(i=a.current)||void 0===i?void 0:i.clientWidth,height:null==a||null===(n=a.current)||void 0===n?void 0:n.clientHeight}));var r=function(){var i,n;null===(i=t)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,e)};return s.current=r,r}),[g,a]),[a,c,s.current]};export{o as useResize};
1
+ import{slicedToArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useMemo as n,useLayoutEffect as r}from"react";import l from"../../../node_modules/lodash-es/debounce.js";var o=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,u=arguments.length>1?arguments[1]:void 0,d=e({width:void 0,height:void 0}),v=t(d,2),c=v[0],h=v[1],a=i({width:0,height:0}),g=i(),s=i(),f=n((function(){return l((function(t){var e,i,n,r,l=t[0].contentRect.width,o=t[0].contentRect.height;(null===(e=a.current)||void 0===e?void 0:e.width)===l&&(null===(i=a.current)||void 0===i?void 0:i.height)===o||(a.current={width:l,height:o},(u||h)({width:null==g||null===(n=g.current)||void 0===n?void 0:n.clientWidth,height:null==g||null===(r=g.current)||void 0===r?void 0:r.clientHeight}))}),o)}),[u,o]);return r((function(){var t,e,i,n;null!=g&&g.current&&(e=null==g?void 0:g.current,(t=new ResizeObserver(f)).observe(e),(u||h)({width:null==g||null===(i=g.current)||void 0===i?void 0:i.clientWidth,height:null==g||null===(n=g.current)||void 0===n?void 0:n.clientHeight}));var r=function(){var i,n;null===(i=t)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,e)};return s.current=r,r}),[f,g,u]),[g,c,s.current]};export{o as useResize};
2
2
  //# sourceMappingURL=useResize.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useResize.js","sources":["../../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\n// const DefaultUnobserver = () => null\n\ntype Unobserver = () => (null | void)\n\nexport const useResize = (debounceDelay = 250): [\n MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n\n // const [unobserver, setUnobserver] = useState<Unobserver>(DefaultUnobserver)\n const unobserverRef = useRef<Unobserver>()\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [containerRef, debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n const unobserver = () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n\n // setUnobserver(unobserver)\n unobserverRef.current = unobserver\n\n return unobserver\n }, [debouncedResizeWrapper, containerRef])\n\n return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["useResize","debounceDelay","arguments","length","undefined","_useState","useState","width","height","_useState2","_slicedToArray","containerSize","setContainerSize","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"6NASaA,EAAY,WACmE,IADlEC,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAExCG,EACEC,EAAsB,CAAEC,WAAOH,EAAWI,YAAQJ,IAAYK,EAAAC,EAAAL,EAAA,GADzDM,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAqBC,EAAoB,CAAEP,MAAO,EAAGC,OAAQ,IAC7DO,EAAiED,IAGjEE,EAAgBF,IAEhBG,EAAyBC,GAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYnB,MACxCoB,EAAkBP,EAAQ,GAAGM,YAAYlB,QAEjBa,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bd,SAAUkB,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bd,UAAWmB,IAG5Cd,EAAmBe,QAAU,CAAErB,MAAOkB,EAAgBjB,OAAQmB,GAE9Df,EAAiB,CACfL,MAAOQ,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BrB,OAAQO,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE7B,EAAc,GAAE,CAACc,EAAcd,IA0BlC,OAxBA8B,GAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,GAEvBrB,EAAiB,CACfL,MAAOQ,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BrB,OAAQO,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,IAAMQ,EAAa,WAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,IAM9B,OAFAjB,EAAcY,QAAUU,EAEjBA,CACT,GAAG,CAACrB,EAAwBF,IAErB,CAACA,EAAcJ,EAAeK,EAAcY,QACrD"}
1
+ {"version":3,"file":"useResize.js","sources":["../../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nexport type WrapperSize = {width: undefined | number; height: undefined | number}\n\n// const DefaultUnobserver = () => null\n\ntype Unobserver = () => (null | void)\n\nexport type UseResizeCallBack = (wrapperSize: WrapperSize) => void\n\n// eslint-disable-next-line default-param-last\nexport const useResize = (debounceDelay = 250, callBack?: UseResizeCallBack): [\n MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n const unobserverRef = useRef<Unobserver>()\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n // eslint-disable-next-line semi-style\n ;(callBack || setContainerSize)({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [callBack, debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n // eslint-disable-next-line semi-style\n ;(callBack || setContainerSize)({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n const unobserver = () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n\n // setUnobserver(unobserver)\n unobserverRef.current = unobserver\n\n return unobserver\n }, [debouncedResizeWrapper, containerRef, callBack])\n\n return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["useResize","debounceDelay","arguments","length","undefined","callBack","_useState","useState","width","height","_useState2","_slicedToArray","containerSize","setContainerSize","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"6NAYaA,EAAY,WACmE,IADlEC,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAAKG,EAA4BH,UAAAC,OAAAD,EAAAA,kBAAAE,EAEzEE,EACIC,EAAsB,CAAEC,WAAOJ,EAAWK,YAAQL,IAAYM,EAAAC,EAAAL,EAAA,GAD3DM,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAqBC,EAAoB,CAAEP,MAAO,EAAGC,OAAQ,IAC7DO,EAAiED,IACjEE,EAAgBF,IAEhBG,EAAyBC,GAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYnB,MACxCoB,EAAkBP,EAAQ,GAAGM,YAAYlB,QAEjBa,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bd,SAAUkB,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bd,UAAWmB,IAG5Cd,EAAmBe,QAAU,CAAErB,MAAOkB,EAAgBjB,OAAQmB,IAG5DvB,GAAYQ,GAAkB,CAC9BL,MAAOQ,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BrB,OAAQO,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE9B,EAAc,GAAE,CAACI,EAAUJ,IA2B9B,OAzBA+B,GAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,IAGrB7B,GAAYQ,GAAkB,CAC9BL,MAAOQ,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BrB,OAAQO,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,IAAMQ,EAAa,WAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,IAM9B,OAFAjB,EAAcY,QAAUU,EAEjBA,CACR,GAAE,CAACrB,EAAwBF,EAAcX,IAEnC,CAACW,EAAcJ,EAAeK,EAAcY,QACrD"}
@@ -1,3 +1,27 @@
1
+ .fbox-module_flexible-box__rLJ93 {
2
+ display: flex;
3
+ position: relative;
4
+ flex-direction: row;
5
+ flex: 0;
6
+ flex-grow: 0;
7
+ flex-shrink: 0;
8
+ flex-basis: auto;
9
+ flex-wrap: nowrap;
10
+ gap: 0;
11
+ text-align: left;
12
+ justify-content: flex-start;
13
+ align-items: flex-start;
14
+ align-self: auto;
15
+ margin: 0;
16
+ padding: 0;
17
+ width: auto;
18
+ height: auto;
19
+ max-width: none;
20
+ max-height: none;
21
+ min-width: 0;
22
+ min-height: 0;
23
+ border-radius: initial;
24
+ }
1
25
  .divider-module_divider-line__6CesR {
2
26
  position: relative;
3
27
  display: block;
@@ -46,28 +70,4 @@
46
70
  fill: var(--icon-content-color);
47
71
  width: var(--height);
48
72
  height: var(--width);
49
- }
50
- .fbox-module_flexible-box__rLJ93 {
51
- display: flex;
52
- position: relative;
53
- flex-direction: row;
54
- flex: 0;
55
- flex-grow: 0;
56
- flex-shrink: 0;
57
- flex-basis: auto;
58
- flex-wrap: nowrap;
59
- gap: 0;
60
- text-align: left;
61
- justify-content: flex-start;
62
- align-items: flex-start;
63
- align-self: auto;
64
- margin: 0;
65
- padding: 0;
66
- width: auto;
67
- height: auto;
68
- max-width: none;
69
- max-height: none;
70
- min-width: 0;
71
- min-height: 0;
72
- border-radius: initial;
73
73
  }
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=require("../../../node_modules/lodash-es/debounce.js");exports.useResize=function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,n=t.useState({width:void 0,height:void 0}),u=e.slicedToArray(n,2),l=u[0],o=u[1],d=t.useRef({width:0,height:0}),c=t.useRef(),v=t.useRef(),h=t.useMemo((function(){return i((function(e){var t,i,r,n,u=e[0].contentRect.width,l=e[0].contentRect.height;(null===(t=d.current)||void 0===t?void 0:t.width)===u&&(null===(i=d.current)||void 0===i?void 0:i.height)===l||(d.current={width:u,height:l},o({width:null==c||null===(r=c.current)||void 0===r?void 0:r.clientWidth,height:null==c||null===(n=c.current)||void 0===n?void 0:n.clientHeight}))}),r)}),[c,r]);return t.useLayoutEffect((function(){var e,t,i,r;null!=c&&c.current&&(t=null==c?void 0:c.current,(e=new ResizeObserver(h)).observe(t),o({width:null==c||null===(i=c.current)||void 0===i?void 0:i.clientWidth,height:null==c||null===(r=c.current)||void 0===r?void 0:r.clientHeight}));var n=function(){var i,r;null===(i=e)||void 0===i||null===(r=i.unobserve)||void 0===r||r.call(i,t)};return v.current=n,n}),[h,c]),[c,l,v.current]};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=require("../../../node_modules/lodash-es/debounce.js");exports.useResize=function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,n=arguments.length>1?arguments[1]:void 0,u=t.useState({width:void 0,height:void 0}),l=e.slicedToArray(u,2),o=l[0],d=l[1],c=t.useRef({width:0,height:0}),v=t.useRef(),h=t.useRef(),s=t.useMemo((function(){return i((function(e){var t,i,r,u,l=e[0].contentRect.width,o=e[0].contentRect.height;(null===(t=c.current)||void 0===t?void 0:t.width)===l&&(null===(i=c.current)||void 0===i?void 0:i.height)===o||(c.current={width:l,height:o},(n||d)({width:null==v||null===(r=v.current)||void 0===r?void 0:r.clientWidth,height:null==v||null===(u=v.current)||void 0===u?void 0:u.clientHeight}))}),r)}),[n,r]);return t.useLayoutEffect((function(){var e,t,i,r;null!=v&&v.current&&(t=null==v?void 0:v.current,(e=new ResizeObserver(s)).observe(t),(n||d)({width:null==v||null===(i=v.current)||void 0===i?void 0:i.clientWidth,height:null==v||null===(r=v.current)||void 0===r?void 0:r.clientHeight}));var u=function(){var i,r;null===(i=e)||void 0===i||null===(r=i.unobserve)||void 0===r||r.call(i,t)};return h.current=u,u}),[s,v,n]),[v,o,h.current]};
2
2
  //# sourceMappingURL=useResize.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useResize.js","sources":["../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\n// const DefaultUnobserver = () => null\n\ntype Unobserver = () => (null | void)\n\nexport const useResize = (debounceDelay = 250): [\n MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n\n // const [unobserver, setUnobserver] = useState<Unobserver>(DefaultUnobserver)\n const unobserverRef = useRef<Unobserver>()\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [containerRef, debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n const unobserver = () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n\n // setUnobserver(unobserver)\n unobserverRef.current = unobserver\n\n return unobserver\n }, [debouncedResizeWrapper, containerRef])\n\n return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["debounceDelay","arguments","length","undefined","_useState","useState","width","height","_useState2","_slicedToArray","containerSize","setContainerSize","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"kOASyB,WACmE,IADlEA,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAExCG,EACEC,EAAAA,SAAsB,CAAEC,WAAOH,EAAWI,YAAQJ,IAAYK,EAAAC,EAAAA,cAAAL,EAAA,GADzDM,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAqBC,EAAAA,OAAoB,CAAEP,MAAO,EAAGC,OAAQ,IAC7DO,EAAiED,EAAAA,SAGjEE,EAAgBF,EAAAA,SAEhBG,EAAyBC,EAAAA,SAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYnB,MACxCoB,EAAkBP,EAAQ,GAAGM,YAAYlB,QAEjBa,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bd,SAAUkB,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bd,UAAWmB,IAG5Cd,EAAmBe,QAAU,CAAErB,MAAOkB,EAAgBjB,OAAQmB,GAE9Df,EAAiB,CACfL,MAAOQ,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BrB,OAAQO,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE7B,EAAc,GAAE,CAACc,EAAcd,IA0BlC,OAxBA8B,EAAAA,iBAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,GAEvBrB,EAAiB,CACfL,MAAOQ,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BrB,OAAQO,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,IAAMQ,EAAa,WAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,IAM9B,OAFAjB,EAAcY,QAAUU,EAEjBA,CACT,GAAG,CAACrB,EAAwBF,IAErB,CAACA,EAAcJ,EAAeK,EAAcY,QACrD"}
1
+ {"version":3,"file":"useResize.js","sources":["../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nexport type WrapperSize = {width: undefined | number; height: undefined | number}\n\n// const DefaultUnobserver = () => null\n\ntype Unobserver = () => (null | void)\n\nexport type UseResizeCallBack = (wrapperSize: WrapperSize) => void\n\n// eslint-disable-next-line default-param-last\nexport const useResize = (debounceDelay = 250, callBack?: UseResizeCallBack): [\n MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n const unobserverRef = useRef<Unobserver>()\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n // eslint-disable-next-line semi-style\n ;(callBack || setContainerSize)({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [callBack, debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n // eslint-disable-next-line semi-style\n ;(callBack || setContainerSize)({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n const unobserver = () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n\n // setUnobserver(unobserver)\n unobserverRef.current = unobserver\n\n return unobserver\n }, [debouncedResizeWrapper, containerRef, callBack])\n\n return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["debounceDelay","arguments","length","undefined","callBack","_useState","useState","width","height","_useState2","_slicedToArray","containerSize","setContainerSize","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"kOAYyB,WACmE,IADlEA,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAAKG,EAA4BH,UAAAC,OAAAD,EAAAA,kBAAAE,EAEzEE,EACIC,EAAAA,SAAsB,CAAEC,WAAOJ,EAAWK,YAAQL,IAAYM,EAAAC,EAAAA,cAAAL,EAAA,GAD3DM,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAqBC,EAAAA,OAAoB,CAAEP,MAAO,EAAGC,OAAQ,IAC7DO,EAAiED,EAAAA,SACjEE,EAAgBF,EAAAA,SAEhBG,EAAyBC,EAAAA,SAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYnB,MACxCoB,EAAkBP,EAAQ,GAAGM,YAAYlB,QAEjBa,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bd,SAAUkB,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bd,UAAWmB,IAG5Cd,EAAmBe,QAAU,CAAErB,MAAOkB,EAAgBjB,OAAQmB,IAG5DvB,GAAYQ,GAAkB,CAC9BL,MAAOQ,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BrB,OAAQO,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE9B,EAAc,GAAE,CAACI,EAAUJ,IA2B9B,OAzBA+B,EAAAA,iBAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,IAGrB7B,GAAYQ,GAAkB,CAC9BL,MAAOQ,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BrB,OAAQO,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,IAAMQ,EAAa,WAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,IAM9B,OAFAjB,EAAcY,QAAUU,EAEjBA,CACR,GAAE,CAACrB,EAAwBF,EAAcX,IAEnC,CAACW,EAAcJ,EAAeK,EAAcY,QACrD"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=require("../../../node_modules/lodash-es/debounce.js");exports.useResize=function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,n=t.useState({width:void 0,height:void 0}),u=e.slicedToArray(n,2),l=u[0],o=u[1],d=t.useRef({width:0,height:0}),c=t.useRef(),v=t.useRef(),h=t.useMemo((function(){return i((function(e){var t,i,r,n,u=e[0].contentRect.width,l=e[0].contentRect.height;(null===(t=d.current)||void 0===t?void 0:t.width)===u&&(null===(i=d.current)||void 0===i?void 0:i.height)===l||(d.current={width:u,height:l},o({width:null==c||null===(r=c.current)||void 0===r?void 0:r.clientWidth,height:null==c||null===(n=c.current)||void 0===n?void 0:n.clientHeight}))}),r)}),[c,r]);return t.useLayoutEffect((function(){var e,t,i,r;null!=c&&c.current&&(t=null==c?void 0:c.current,(e=new ResizeObserver(h)).observe(t),o({width:null==c||null===(i=c.current)||void 0===i?void 0:i.clientWidth,height:null==c||null===(r=c.current)||void 0===r?void 0:r.clientHeight}));var n=function(){var i,r;null===(i=e)||void 0===i||null===(r=i.unobserve)||void 0===r||r.call(i,t)};return v.current=n,n}),[h,c]),[c,l,v.current]};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=require("../../../node_modules/lodash-es/debounce.js");exports.useResize=function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,n=arguments.length>1?arguments[1]:void 0,u=t.useState({width:void 0,height:void 0}),l=e.slicedToArray(u,2),o=l[0],d=l[1],c=t.useRef({width:0,height:0}),v=t.useRef(),h=t.useRef(),s=t.useMemo((function(){return i((function(e){var t,i,r,u,l=e[0].contentRect.width,o=e[0].contentRect.height;(null===(t=c.current)||void 0===t?void 0:t.width)===l&&(null===(i=c.current)||void 0===i?void 0:i.height)===o||(c.current={width:l,height:o},(n||d)({width:null==v||null===(r=v.current)||void 0===r?void 0:r.clientWidth,height:null==v||null===(u=v.current)||void 0===u?void 0:u.clientHeight}))}),r)}),[n,r]);return t.useLayoutEffect((function(){var e,t,i,r;null!=v&&v.current&&(t=null==v?void 0:v.current,(e=new ResizeObserver(s)).observe(t),(n||d)({width:null==v||null===(i=v.current)||void 0===i?void 0:i.clientWidth,height:null==v||null===(r=v.current)||void 0===r?void 0:r.clientHeight}));var u=function(){var i,r;null===(i=e)||void 0===i||null===(r=i.unobserve)||void 0===r||r.call(i,t)};return h.current=u,u}),[s,v,n]),[v,o,h.current]};
2
2
  //# sourceMappingURL=useResize.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useResize.js","sources":["../../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\n// const DefaultUnobserver = () => null\n\ntype Unobserver = () => (null | void)\n\nexport const useResize = (debounceDelay = 250): [\n MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n\n // const [unobserver, setUnobserver] = useState<Unobserver>(DefaultUnobserver)\n const unobserverRef = useRef<Unobserver>()\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [containerRef, debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n const unobserver = () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n\n // setUnobserver(unobserver)\n unobserverRef.current = unobserver\n\n return unobserver\n }, [debouncedResizeWrapper, containerRef])\n\n return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["debounceDelay","arguments","length","undefined","_useState","useState","width","height","_useState2","_slicedToArray","containerSize","setContainerSize","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"kOASyB,WACmE,IADlEA,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAExCG,EACEC,EAAAA,SAAsB,CAAEC,WAAOH,EAAWI,YAAQJ,IAAYK,EAAAC,EAAAA,cAAAL,EAAA,GADzDM,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAqBC,EAAAA,OAAoB,CAAEP,MAAO,EAAGC,OAAQ,IAC7DO,EAAiED,EAAAA,SAGjEE,EAAgBF,EAAAA,SAEhBG,EAAyBC,EAAAA,SAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYnB,MACxCoB,EAAkBP,EAAQ,GAAGM,YAAYlB,QAEjBa,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bd,SAAUkB,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bd,UAAWmB,IAG5Cd,EAAmBe,QAAU,CAAErB,MAAOkB,EAAgBjB,OAAQmB,GAE9Df,EAAiB,CACfL,MAAOQ,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BrB,OAAQO,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE7B,EAAc,GAAE,CAACc,EAAcd,IA0BlC,OAxBA8B,EAAAA,iBAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,GAEvBrB,EAAiB,CACfL,MAAOQ,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BrB,OAAQO,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,IAAMQ,EAAa,WAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,IAM9B,OAFAjB,EAAcY,QAAUU,EAEjBA,CACT,GAAG,CAACrB,EAAwBF,IAErB,CAACA,EAAcJ,EAAeK,EAAcY,QACrD"}
1
+ {"version":3,"file":"useResize.js","sources":["../../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nexport type WrapperSize = {width: undefined | number; height: undefined | number}\n\n// const DefaultUnobserver = () => null\n\ntype Unobserver = () => (null | void)\n\nexport type UseResizeCallBack = (wrapperSize: WrapperSize) => void\n\n// eslint-disable-next-line default-param-last\nexport const useResize = (debounceDelay = 250, callBack?: UseResizeCallBack): [\n MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n const unobserverRef = useRef<Unobserver>()\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n // eslint-disable-next-line semi-style\n ;(callBack || setContainerSize)({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [callBack, debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n // eslint-disable-next-line semi-style\n ;(callBack || setContainerSize)({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n const unobserver = () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n\n // setUnobserver(unobserver)\n unobserverRef.current = unobserver\n\n return unobserver\n }, [debouncedResizeWrapper, containerRef, callBack])\n\n return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["debounceDelay","arguments","length","undefined","callBack","_useState","useState","width","height","_useState2","_slicedToArray","containerSize","setContainerSize","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"kOAYyB,WACmE,IADlEA,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAAKG,EAA4BH,UAAAC,OAAAD,EAAAA,kBAAAE,EAEzEE,EACIC,EAAAA,SAAsB,CAAEC,WAAOJ,EAAWK,YAAQL,IAAYM,EAAAC,EAAAA,cAAAL,EAAA,GAD3DM,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAqBC,EAAAA,OAAoB,CAAEP,MAAO,EAAGC,OAAQ,IAC7DO,EAAiED,EAAAA,SACjEE,EAAgBF,EAAAA,SAEhBG,EAAyBC,EAAAA,SAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYnB,MACxCoB,EAAkBP,EAAQ,GAAGM,YAAYlB,QAEjBa,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bd,SAAUkB,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bd,UAAWmB,IAG5Cd,EAAmBe,QAAU,CAAErB,MAAOkB,EAAgBjB,OAAQmB,IAG5DvB,GAAYQ,GAAkB,CAC9BL,MAAOQ,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BrB,OAAQO,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE9B,EAAc,GAAE,CAACI,EAAUJ,IA2B9B,OAzBA+B,EAAAA,iBAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,IAGrB7B,GAAYQ,GAAkB,CAC9BL,MAAOQ,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BrB,OAAQO,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,IAAMQ,EAAa,WAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,IAM9B,OAFAjB,EAAcY,QAAUU,EAEjBA,CACR,GAAE,CAACrB,EAAwBF,EAAcX,IAEnC,CAACW,EAAcJ,EAAeK,EAAcY,QACrD"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=require("../../../../../node_modules/lodash-es/debounce.js"),n=require("./FBox.js"),r=["children"],l={main:{position:"absolute",zIndex:111,left:0,pointerEvents:"none"},empty:{pointerEvents:"none"}},o=t.memo((function(o){var u=o.children,c=e.objectWithoutProperties(o,r),h=t.useRef(),d=t.useRef({width:0,height:0}),a=t.useState({width:void 0,height:void 0}),s=e.slicedToArray(a,2),v=s[0],g=s[1],m=t.useMemo((function(){return i((function(e){var t,i,n,r,l=e[0].contentRect.width,o=e[0].contentRect.height;(null===(t=d.current)||void 0===t?void 0:t.width)===l&&(null===(i=d.current)||void 0===i?void 0:i.height)===o||(d.current={width:l,height:o},g({width:null==h||null===(n=h.current)||void 0===n?void 0:n.clientWidth,height:null==h||null===(r=h.current)||void 0===r?void 0:r.clientHeight}))}),250)}),[]);return t.useEffect((function(){var e,t;return null!=h&&h.current&&(t=null==h?void 0:h.current,(e=new ResizeObserver(m)).observe(t)),function(){var i,n;null===(i=e)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,t)}}),[m,h]),React.createElement(n.FBox,e.extends({width:"100%",height:"100%",justify:"center",align:"center",direction:"column"},c),React.createElement(n.FBox,{style:l.main,width:"100%",height:"100%",ref:h}),!u&&React.createElement(n.FBox,{width:"".concat(Math.max((null==v?void 0:v.width)||200,200)||200,"px"),height:"".concat(Math.max((null==v?void 0:v.height)||200,200)||200,"px"),style:l.empty}),u&&(null==u?void 0:u({height:"".concat((null==v?void 0:v.height)||200,"px"),width:"".concat((null==v?void 0:v.width)||200,"px"),measured:!(null==v||!v.height)})))}));o.displayName="ResizableContainer",exports.ResizableContainer=o;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),i=require("../../../../../node_modules/lodash-es/debounce.js"),n=require("./FBox.js"),l=["children","debounceDelay"],o={main:{position:"absolute",zIndex:111,left:0,pointerEvents:"none"},empty:{pointerEvents:"none"}},r=t.memo((function(r){var u=r.children,d=r.debounceDelay,c=void 0===d?250:d,h=e.objectWithoutProperties(r,l),a=t.useRef(),s=t.useRef({width:0,height:0}),v=t.useState({width:void 0,height:void 0}),g=e.slicedToArray(v,2),m=g[0],p=g[1],w=t.useMemo((function(){return i((function(e){var t,i,n,l,o=e[0].contentRect.width,r=e[0].contentRect.height;(null===(t=s.current)||void 0===t?void 0:t.width)===o&&(null===(i=s.current)||void 0===i?void 0:i.height)===r||(s.current={width:o,height:r},p({width:null==a||null===(n=a.current)||void 0===n?void 0:n.clientWidth,height:null==a||null===(l=a.current)||void 0===l?void 0:l.clientHeight}))}),c)}),[c]);return t.useLayoutEffect((function(){var e,t,i,n;null!=a&&a.current&&(t=null==a?void 0:a.current,(e=new ResizeObserver(w)).observe(t),p({width:null==a||null===(i=a.current)||void 0===i?void 0:i.clientWidth,height:null==a||null===(n=a.current)||void 0===n?void 0:n.clientHeight}));return function(){var i,n;null===(i=e)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,t)}}),[w,a]),React.createElement(n.FBox,e.extends({width:"100%",height:"100%",justify:"center",align:"center",direction:"column"},h),React.createElement(n.FBox,{style:o.main,width:"100%",height:"100%",ref:a}),!u&&React.createElement(n.FBox,{width:"".concat(Math.max((null==m?void 0:m.width)||200,200)||200,"px"),height:"".concat(Math.max((null==m?void 0:m.height)||200,200)||200,"px"),style:o.empty}),u&&(null==u?void 0:u({height:"".concat((null==m?void 0:m.height)||200,"px"),width:"".concat((null==m?void 0:m.width)||200,"px"),measured:!(null==m||!m.height)})))}));r.displayName="ResizableContainer",exports.ResizableContainer=r;
2
2
  //# sourceMappingURL=ResizableContainer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, useState, useRef, useMemo, useEffect, RefObject, PropsWithChildren } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nimport { FBox, FBoxProps } from './FBox'\n\n\n\n\nexport type ResizableContainerProps = FBoxProps & PropsWithChildren<any>\n\nexport type ResizableContainerRenderProps = {\n width: number | string\n height: number | string\n measured: boolean\n}\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 111,\n left: 0,\n pointerEvents: 'none',\n // backgroundColor: '#FF000040',\n },\n empty: {\n pointerEvents: 'none',\n // background: '#FF000040',\n // border: '1px solid #0000FF40',\n },\n}\n\nexport const ResizableContainer = memo<ResizableContainerProps>(\n ({ children, ...props }: ResizableContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n\n const lastResizeWidthRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })\n\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, 250), [])\n\n useEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n }\n return () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n }, [debouncedResizeWrapper, containerRef])\n\n // END RESIZING\n\n console.log('containerSize', containerSize)\n\n return (\n <FBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <FBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (<FBox\n width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n style={styles.empty}\n />)}\n {children && children?.({\n height: `${containerSize?.height || 200}px`,\n width: `${containerSize?.width || 200}px`,\n measured: !!containerSize?.height,\n } as ResizableContainerRenderProps)}\n </FBox>\n )\n },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","lastResizeWidthRef","width","height","_useState","useState","undefined","_useState2","_slicedToArray","containerSize","setContainerSize","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useEffect","resizeObserver","containerElement","ResizeObserver","observe","_resizeObserver","_resizeObserver$unobs","unobserve","call","React","createElement","FBox","_extends","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"kQAkBMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,IACRC,KAAM,EACNC,cAAe,QAGjBC,MAAO,CACLD,cAAe,SAMNE,EAAqBC,EAAAA,MAChC,SAAAC,GAAqD,IAAlDC,EAAQD,EAARC,SAAaC,EAAKC,EAAAC,wBAAAJ,EAAAK,GACbC,EAAeC,EAAAA,SAEfC,EAAqBD,EAAAA,OAA0C,CAAEE,MAAO,EAAGC,OAAQ,IAEzFC,EACEC,EAAAA,SAAsB,CAAEH,WAAOI,EAAWH,YAAQG,IAAYC,EAAAC,EAAAA,cAAAJ,EAAA,GADzDK,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAyBC,EAAAA,SAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYlB,MACxCmB,EAAkBP,EAAQ,GAAGM,YAAYjB,QAEjBY,QAA1BA,EAAAd,EAAmBqB,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bb,SAAUiB,IACb,QAA1BH,EAAAf,EAAmBqB,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bb,UAAWkB,IAG1CpB,EAAmBqB,QAAU,CAAEpB,MAAOiB,EAAgBhB,OAAQkB,GAE9DX,EAAiB,CACfR,MAAOH,SAAqBkB,QAATA,EAAZlB,EAAcuB,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BpB,OAAQJ,SAAqB,QAATmB,EAAZnB,EAAcuB,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE,IAAI,GAAE,IAoBT,OAlBAC,EAAAA,WAAU,WACR,IAAIC,EACAC,EAOJ,OALI5B,SAAAA,EAAcuB,UAChBK,EAAmB5B,aAAAA,EAAAA,EAAcuB,SACjCI,EAAiB,IAAIE,eAAejB,IACrBkB,QAAQF,IAElB,WAAM,IAAAG,EAAAC,EACG,QAAdD,EAAAJ,SAAcK,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BH,GAEhC,GAAG,CAAChB,EAAwBZ,IAO1BmC,MAAAC,cAACC,EAAIA,KAAAC,UAAA,CACHnC,MAAM,OACNC,OAAO,OACPmC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACN7C,GAEJuC,MAAAC,cAACC,EAAAA,KAAI,CACHK,MAAOzD,EAAOC,KACdiB,MAAM,OACNC,OAAO,OACPuC,IAAK3C,KAELL,GAAawC,MAAAC,cAACC,EAAAA,KAAI,CAClBlC,MAAK,GAAAyC,OAAKC,KAAKC,KAAIpC,eAAAA,EAAeP,QAAS,IAAK,MAAQ,IAAQ,MAChEC,OAAM,GAAAwC,OAAKC,KAAKC,KAAIpC,eAAAA,EAAeN,SAAU,IAAK,MAAQ,IAAQ,MAClEsC,MAAOzD,EAAOM,QAEfI,IAAYA,aAAQ,EAARA,EAAW,CACtBS,OAAMwC,GAAAA,QAAKlC,aAAa,EAAbA,EAAeN,SAAU,IAAO,MAC3CD,MAAKyC,GAAAA,QAAKlC,aAAa,EAAbA,EAAeP,QAAS,IAAO,MACzC4C,WAAYrC,UAAAA,EAAeN,WAInC,IAGFZ,EAAmBwD,YAAc"}
1
+ {"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, useState, useRef, useMemo, useLayoutEffect, RefObject, PropsWithChildren } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nimport { FBox, FBoxProps } from './FBox'\n\n\nexport type ResizableContainerProps = FBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n}\n\nexport type ResizableContainerRenderProps = {\n width: number | string\n height: number | string\n measured: boolean\n}\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 111,\n left: 0,\n pointerEvents: 'none',\n // backgroundColor: '#FF000040',\n },\n empty: {\n pointerEvents: 'none',\n // background: '#FF000040',\n // border: '1px solid #0000FF40',\n },\n}\n\nexport const ResizableContainer = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n\n const lastResizeWidthRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })\n\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n return () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n }, [debouncedResizeWrapper, containerRef])\n\n // END RESIZING\n\n return (\n <FBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <FBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (<FBox\n width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n style={styles.empty}\n />)}\n {children && children?.({\n height: `${containerSize?.height || 200}px`,\n width: `${containerSize?.width || 200}px`,\n measured: !!containerSize?.height,\n } as ResizableContainerRenderProps)}\n </FBox>\n )\n },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","_ref$debounceDelay","debounceDelay","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","lastResizeWidthRef","width","height","_useState","useState","undefined","_useState2","_slicedToArray","containerSize","setContainerSize","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","_resizeObserver","_resizeObserver$unobs","unobserve","call","React","createElement","FBox","_extends","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"kRAkBMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,IACRC,KAAM,EACNC,cAAe,QAGjBC,MAAO,CACLD,cAAe,SAMNE,EAAqBC,EAAAA,MAChC,SAAAC,GAA0E,IAAvEC,EAAQD,EAARC,SAAQC,EAAAF,EAAEG,cAAAA,OAAgB,IAAHD,EAAG,IAAGA,EAAKE,EAAKC,EAAAC,wBAAAN,EAAAO,GAClCC,EAAeC,EAAAA,SAEfC,EAAqBD,EAAAA,OAA0C,CAAEE,MAAO,EAAGC,OAAQ,IAEzFC,EACEC,EAAAA,SAAsB,CAAEH,WAAOI,EAAWH,YAAQG,IAAYC,EAAAC,EAAAA,cAAAJ,EAAA,GADzDK,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAyBC,EAAAA,SAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYlB,MACxCmB,EAAkBP,EAAQ,GAAGM,YAAYjB,QAEjBY,QAA1BA,EAAAd,EAAmBqB,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bb,SAAUiB,IACb,QAA1BH,EAAAf,EAAmBqB,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bb,UAAWkB,IAG1CpB,EAAmBqB,QAAU,CAAEpB,MAAOiB,EAAgBhB,OAAQkB,GAE9DX,EAAiB,CACfR,MAAOH,SAAqBkB,QAATA,EAAZlB,EAAcuB,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BpB,OAAQJ,SAAqB,QAATmB,EAAZnB,EAAcuB,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE9B,KAAgB,CAACA,IAuBpB,OArBA+B,EAAAA,iBAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvB9B,SAAAA,EAAcuB,UAChBK,EAAmB5B,aAAAA,EAAAA,EAAcuB,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,GAEvBjB,EAAiB,CACfR,MAAOH,SAAqB6B,QAATA,EAAZ7B,EAAcuB,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BpB,OAAQJ,SAAqB,QAAT8B,EAAZ9B,EAAcuB,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,OAAO,WAAM,IAAAQ,EAAAC,EACG,QAAdD,EAAAN,SAAcO,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BL,GAEhC,GAAG,CAAChB,EAAwBZ,IAK1BqC,MAAAC,cAACC,EAAIA,KAAAC,UAAA,CACHrC,MAAM,OACNC,OAAO,OACPqC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACN/C,GAEJyC,MAAAC,cAACC,EAAAA,KAAI,CACHK,MAAO7D,EAAOC,KACdmB,MAAM,OACNC,OAAO,OACPyC,IAAK7C,KAELP,GAAa4C,MAAAC,cAACC,EAAAA,KAAI,CAClBpC,MAAK,GAAA2C,OAAKC,KAAKC,KAAItC,eAAAA,EAAeP,QAAS,IAAK,MAAQ,IAAQ,MAChEC,OAAM,GAAA0C,OAAKC,KAAKC,KAAItC,eAAAA,EAAeN,SAAU,IAAK,MAAQ,IAAQ,MAClEwC,MAAO7D,EAAOM,QAEfI,IAAYA,aAAQ,EAARA,EAAW,CACtBW,OAAM0C,GAAAA,QAAKpC,aAAa,EAAbA,EAAeN,SAAU,IAAO,MAC3CD,MAAK2C,GAAAA,QAAKpC,aAAa,EAAbA,EAAeP,QAAS,IAAO,MACzC8C,WAAYvC,UAAAA,EAAeN,WAInC,IAGFd,EAAmB4D,YAAc"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useMemo as n,useLayoutEffect as r}from"react";import l from"../../../node_modules/lodash-es/debounce.js";var o=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,u=e({width:void 0,height:void 0}),d=t(u,2),c=d[0],v=d[1],h=i({width:0,height:0}),a=i(),s=i(),g=n((function(){return l((function(t){var e,i,n,r,l=t[0].contentRect.width,o=t[0].contentRect.height;(null===(e=h.current)||void 0===e?void 0:e.width)===l&&(null===(i=h.current)||void 0===i?void 0:i.height)===o||(h.current={width:l,height:o},v({width:null==a||null===(n=a.current)||void 0===n?void 0:n.clientWidth,height:null==a||null===(r=a.current)||void 0===r?void 0:r.clientHeight}))}),o)}),[a,o]);return r((function(){var t,e,i,n;null!=a&&a.current&&(e=null==a?void 0:a.current,(t=new ResizeObserver(g)).observe(e),v({width:null==a||null===(i=a.current)||void 0===i?void 0:i.clientWidth,height:null==a||null===(n=a.current)||void 0===n?void 0:n.clientHeight}));var r=function(){var i,n;null===(i=t)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,e)};return s.current=r,r}),[g,a]),[a,c,s.current]};export{o as useResize};
1
+ import{slicedToArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{useState as e,useRef as i,useMemo as n,useLayoutEffect as r}from"react";import l from"../../../node_modules/lodash-es/debounce.js";var o=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:250,u=arguments.length>1?arguments[1]:void 0,d=e({width:void 0,height:void 0}),v=t(d,2),c=v[0],h=v[1],a=i({width:0,height:0}),g=i(),s=i(),f=n((function(){return l((function(t){var e,i,n,r,l=t[0].contentRect.width,o=t[0].contentRect.height;(null===(e=a.current)||void 0===e?void 0:e.width)===l&&(null===(i=a.current)||void 0===i?void 0:i.height)===o||(a.current={width:l,height:o},(u||h)({width:null==g||null===(n=g.current)||void 0===n?void 0:n.clientWidth,height:null==g||null===(r=g.current)||void 0===r?void 0:r.clientHeight}))}),o)}),[u,o]);return r((function(){var t,e,i,n;null!=g&&g.current&&(e=null==g?void 0:g.current,(t=new ResizeObserver(f)).observe(e),(u||h)({width:null==g||null===(i=g.current)||void 0===i?void 0:i.clientWidth,height:null==g||null===(n=g.current)||void 0===n?void 0:n.clientHeight}));var r=function(){var i,n;null===(i=t)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,e)};return s.current=r,r}),[f,g,u]),[g,c,s.current]};export{o as useResize};
2
2
  //# sourceMappingURL=useResize.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useResize.js","sources":["../../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\n// const DefaultUnobserver = () => null\n\ntype Unobserver = () => (null | void)\n\nexport const useResize = (debounceDelay = 250): [\n MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n\n // const [unobserver, setUnobserver] = useState<Unobserver>(DefaultUnobserver)\n const unobserverRef = useRef<Unobserver>()\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [containerRef, debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n const unobserver = () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n\n // setUnobserver(unobserver)\n unobserverRef.current = unobserver\n\n return unobserver\n }, [debouncedResizeWrapper, containerRef])\n\n return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["useResize","debounceDelay","arguments","length","undefined","_useState","useState","width","height","_useState2","_slicedToArray","containerSize","setContainerSize","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"6NASaA,EAAY,WACmE,IADlEC,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAExCG,EACEC,EAAsB,CAAEC,WAAOH,EAAWI,YAAQJ,IAAYK,EAAAC,EAAAL,EAAA,GADzDM,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAqBC,EAAoB,CAAEP,MAAO,EAAGC,OAAQ,IAC7DO,EAAiED,IAGjEE,EAAgBF,IAEhBG,EAAyBC,GAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYnB,MACxCoB,EAAkBP,EAAQ,GAAGM,YAAYlB,QAEjBa,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bd,SAAUkB,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bd,UAAWmB,IAG5Cd,EAAmBe,QAAU,CAAErB,MAAOkB,EAAgBjB,OAAQmB,GAE9Df,EAAiB,CACfL,MAAOQ,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BrB,OAAQO,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE7B,EAAc,GAAE,CAACc,EAAcd,IA0BlC,OAxBA8B,GAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,GAEvBrB,EAAiB,CACfL,MAAOQ,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BrB,OAAQO,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,IAAMQ,EAAa,WAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,IAM9B,OAFAjB,EAAcY,QAAUU,EAEjBA,CACT,GAAG,CAACrB,EAAwBF,IAErB,CAACA,EAAcJ,EAAeK,EAAcY,QACrD"}
1
+ {"version":3,"file":"useResize.js","sources":["../../../../../../src/core/hooks/useResize.ts"],"sourcesContent":["import { MutableRefObject, useLayoutEffect, useMemo, useState, useRef } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nexport type WrapperSize = {width: undefined | number; height: undefined | number}\n\n// const DefaultUnobserver = () => null\n\ntype Unobserver = () => (null | void)\n\nexport type UseResizeCallBack = (wrapperSize: WrapperSize) => void\n\n// eslint-disable-next-line default-param-last\nexport const useResize = (debounceDelay = 250, callBack?: UseResizeCallBack): [\n MutableRefObject<HTMLElement | null | undefined>, WrapperSize, Unobserver | undefined] => {\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const lastResizeWidthRef = useRef<WrapperSize>({ width: 0, height: 0 })\n const containerRef: MutableRefObject<HTMLElement | undefined | null> = useRef<HTMLElement | undefined | null>()\n const unobserverRef = useRef<Unobserver>()\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n // eslint-disable-next-line semi-style\n ;(callBack || setContainerSize)({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [callBack, debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n // eslint-disable-next-line semi-style\n ;(callBack || setContainerSize)({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n const unobserver = () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n\n // setUnobserver(unobserver)\n unobserverRef.current = unobserver\n\n return unobserver\n }, [debouncedResizeWrapper, containerRef, callBack])\n\n return [containerRef, containerSize, unobserverRef.current]\n}\n"],"names":["useResize","debounceDelay","arguments","length","undefined","callBack","_useState","useState","width","height","_useState2","_slicedToArray","containerSize","setContainerSize","lastResizeWidthRef","useRef","containerRef","unobserverRef","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","unobserver","_resizeObserver","_resizeObserver$unobs","unobserve","call"],"mappings":"6NAYaA,EAAY,WACmE,IADlEC,EAAaC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,IAAKG,EAA4BH,UAAAC,OAAAD,EAAAA,kBAAAE,EAEzEE,EACIC,EAAsB,CAAEC,WAAOJ,EAAWK,YAAQL,IAAYM,EAAAC,EAAAL,EAAA,GAD3DM,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAqBC,EAAoB,CAAEP,MAAO,EAAGC,OAAQ,IAC7DO,EAAiED,IACjEE,EAAgBF,IAEhBG,EAAyBC,GAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYnB,MACxCoB,EAAkBP,EAAQ,GAAGM,YAAYlB,QAEjBa,QAA1BA,EAAAR,EAAmBe,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bd,SAAUkB,IACX,QAA1BH,EAAAT,EAAmBe,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bd,UAAWmB,IAG5Cd,EAAmBe,QAAU,CAAErB,MAAOkB,EAAgBjB,OAAQmB,IAG5DvB,GAAYQ,GAAkB,CAC9BL,MAAOQ,SAAqBQ,QAATA,EAAZR,EAAca,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BrB,OAAQO,SAAqB,QAATS,EAAZT,EAAca,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE9B,EAAc,GAAE,CAACI,EAAUJ,IA2B9B,OAzBA+B,GAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvBpB,SAAAA,EAAca,UAChBK,EAAmBlB,aAAAA,EAAAA,EAAca,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,IAGrB7B,GAAYQ,GAAkB,CAC9BL,MAAOQ,SAAqBmB,QAATA,EAAZnB,EAAca,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BrB,OAAQO,SAAqB,QAAToB,EAAZpB,EAAca,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,IAAMQ,EAAa,WAAM,IAAAC,EAAAC,EACT,QAAdD,EAAAP,SAAcQ,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BN,IAM9B,OAFAjB,EAAcY,QAAUU,EAEjBA,CACR,GAAE,CAACrB,EAAwBF,EAAcX,IAEnC,CAACW,EAAcJ,EAAeK,EAAcY,QACrD"}
@@ -1,2 +1,2 @@
1
- import{objectWithoutProperties as e,slicedToArray as t,extends as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as n,useRef as o,useState as r,useMemo as l,useEffect as h}from"react";import c from"../../../../../node_modules/lodash-es/debounce.js";import{FBox as d}from"./FBox.js";var u=["children"],a={main:{position:"absolute",zIndex:111,left:0,pointerEvents:"none"},empty:{pointerEvents:"none"}},v=n((function(n){var v=n.children,s=e(n,u),m=o(),p=o({width:0,height:0}),g=r({width:void 0,height:void 0}),w=t(g,2),f=w[0],x=w[1],b=l((function(){return c((function(e){var t,i,n,o,r=e[0].contentRect.width,l=e[0].contentRect.height;(null===(t=p.current)||void 0===t?void 0:t.width)===r&&(null===(i=p.current)||void 0===i?void 0:i.height)===l||(p.current={width:r,height:l},x({width:null==m||null===(n=m.current)||void 0===n?void 0:n.clientWidth,height:null==m||null===(o=m.current)||void 0===o?void 0:o.clientHeight}))}),250)}),[]);return h((function(){var e,t;return null!=m&&m.current&&(t=null==m?void 0:m.current,(e=new ResizeObserver(b)).observe(t)),function(){var i,n;null===(i=e)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,t)}}),[b,m]),React.createElement(d,i({width:"100%",height:"100%",justify:"center",align:"center",direction:"column"},s),React.createElement(d,{style:a.main,width:"100%",height:"100%",ref:m}),!v&&React.createElement(d,{width:"".concat(Math.max((null==f?void 0:f.width)||200,200)||200,"px"),height:"".concat(Math.max((null==f?void 0:f.height)||200,200)||200,"px"),style:a.empty}),v&&(null==v?void 0:v({height:"".concat((null==f?void 0:f.height)||200,"px"),width:"".concat((null==f?void 0:f.width)||200,"px"),measured:!(null==f||!f.height)})))}));v.displayName="ResizableContainer";export{v as ResizableContainer};
1
+ import{objectWithoutProperties as e,slicedToArray as t,extends as i}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as n,useRef as l,useState as o,useMemo as r,useLayoutEffect as d}from"react";import h from"../../../../../node_modules/lodash-es/debounce.js";import{FBox as u}from"./FBox.js";var c=["children","debounceDelay"],a={main:{position:"absolute",zIndex:111,left:0,pointerEvents:"none"},empty:{pointerEvents:"none"}},v=n((function(n){var v=n.children,s=n.debounceDelay,m=void 0===s?250:s,g=e(n,c),p=l(),w=l({width:0,height:0}),f=o({width:void 0,height:void 0}),b=t(f,2),x=b[0],y=b[1],R=r((function(){return h((function(e){var t,i,n,l,o=e[0].contentRect.width,r=e[0].contentRect.height;(null===(t=w.current)||void 0===t?void 0:t.width)===o&&(null===(i=w.current)||void 0===i?void 0:i.height)===r||(w.current={width:o,height:r},y({width:null==p||null===(n=p.current)||void 0===n?void 0:n.clientWidth,height:null==p||null===(l=p.current)||void 0===l?void 0:l.clientHeight}))}),m)}),[m]);return d((function(){var e,t,i,n;null!=p&&p.current&&(t=null==p?void 0:p.current,(e=new ResizeObserver(R)).observe(t),y({width:null==p||null===(i=p.current)||void 0===i?void 0:i.clientWidth,height:null==p||null===(n=p.current)||void 0===n?void 0:n.clientHeight}));return function(){var i,n;null===(i=e)||void 0===i||null===(n=i.unobserve)||void 0===n||n.call(i,t)}}),[R,p]),React.createElement(u,i({width:"100%",height:"100%",justify:"center",align:"center",direction:"column"},g),React.createElement(u,{style:a.main,width:"100%",height:"100%",ref:p}),!v&&React.createElement(u,{width:"".concat(Math.max((null==x?void 0:x.width)||200,200)||200,"px"),height:"".concat(Math.max((null==x?void 0:x.height)||200,200)||200,"px"),style:a.empty}),v&&(null==v?void 0:v({height:"".concat((null==x?void 0:x.height)||200,"px"),width:"".concat((null==x?void 0:x.width)||200,"px"),measured:!(null==x||!x.height)})))}));v.displayName="ResizableContainer";export{v as ResizableContainer};
2
2
  //# sourceMappingURL=ResizableContainer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, useState, useRef, useMemo, useEffect, RefObject, PropsWithChildren } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nimport { FBox, FBoxProps } from './FBox'\n\n\n\n\nexport type ResizableContainerProps = FBoxProps & PropsWithChildren<any>\n\nexport type ResizableContainerRenderProps = {\n width: number | string\n height: number | string\n measured: boolean\n}\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 111,\n left: 0,\n pointerEvents: 'none',\n // backgroundColor: '#FF000040',\n },\n empty: {\n pointerEvents: 'none',\n // background: '#FF000040',\n // border: '1px solid #0000FF40',\n },\n}\n\nexport const ResizableContainer = memo<ResizableContainerProps>(\n ({ children, ...props }: ResizableContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n\n const lastResizeWidthRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })\n\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, 250), [])\n\n useEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n }\n return () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n }, [debouncedResizeWrapper, containerRef])\n\n // END RESIZING\n\n console.log('containerSize', containerSize)\n\n return (\n <FBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <FBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (<FBox\n width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n style={styles.empty}\n />)}\n {children && children?.({\n height: `${containerSize?.height || 200}px`,\n width: `${containerSize?.width || 200}px`,\n measured: !!containerSize?.height,\n } as ResizableContainerRenderProps)}\n </FBox>\n )\n },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","props","_objectWithoutProperties","_excluded","containerRef","useRef","lastResizeWidthRef","width","height","_useState","useState","undefined","_useState2","_slicedToArray","containerSize","setContainerSize","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useEffect","resizeObserver","containerElement","ResizeObserver","observe","_resizeObserver","_resizeObserver$unobs","unobserve","call","React","createElement","FBox","_extends","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"uUAkBMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,IACRC,KAAM,EACNC,cAAe,QAGjBC,MAAO,CACLD,cAAe,SAMNE,EAAqBC,GAChC,SAAAC,GAAqD,IAAlDC,EAAQD,EAARC,SAAaC,EAAKC,EAAAH,EAAAI,GACbC,EAAeC,IAEfC,EAAqBD,EAA0C,CAAEE,MAAO,EAAGC,OAAQ,IAEzFC,EACEC,EAAsB,CAAEH,WAAOI,EAAWH,YAAQG,IAAYC,EAAAC,EAAAJ,EAAA,GADzDK,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAyBC,GAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYlB,MACxCmB,EAAkBP,EAAQ,GAAGM,YAAYjB,QAEjBY,QAA1BA,EAAAd,EAAmBqB,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bb,SAAUiB,IACb,QAA1BH,EAAAf,EAAmBqB,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bb,UAAWkB,IAG1CpB,EAAmBqB,QAAU,CAAEpB,MAAOiB,EAAgBhB,OAAQkB,GAE9DX,EAAiB,CACfR,MAAOH,SAAqBkB,QAATA,EAAZlB,EAAcuB,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BpB,OAAQJ,SAAqB,QAATmB,EAAZnB,EAAcuB,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE,IAAI,GAAE,IAoBT,OAlBAC,GAAU,WACR,IAAIC,EACAC,EAOJ,OALI5B,SAAAA,EAAcuB,UAChBK,EAAmB5B,aAAAA,EAAAA,EAAcuB,SACjCI,EAAiB,IAAIE,eAAejB,IACrBkB,QAAQF,IAElB,WAAM,IAAAG,EAAAC,EACG,QAAdD,EAAAJ,SAAcK,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BH,GAEhC,GAAG,CAAChB,EAAwBZ,IAO1BmC,MAAAC,cAACC,EAAIC,EAAA,CACHnC,MAAM,OACNC,OAAO,OACPmC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACN5C,GAEJsC,MAAAC,cAACC,EAAI,CACHK,MAAOxD,EAAOC,KACdgB,MAAM,OACNC,OAAO,OACPuC,IAAK3C,KAELJ,GAAauC,MAAAC,cAACC,EAAI,CAClBlC,MAAK,GAAAyC,OAAKC,KAAKC,KAAIpC,eAAAA,EAAeP,QAAS,IAAK,MAAQ,IAAQ,MAChEC,OAAM,GAAAwC,OAAKC,KAAKC,KAAIpC,eAAAA,EAAeN,SAAU,IAAK,MAAQ,IAAQ,MAClEsC,MAAOxD,EAAOM,QAEfI,IAAYA,aAAQ,EAARA,EAAW,CACtBQ,OAAMwC,GAAAA,QAAKlC,aAAa,EAAbA,EAAeN,SAAU,IAAO,MAC3CD,MAAKyC,GAAAA,QAAKlC,aAAa,EAAbA,EAAeP,QAAS,IAAO,MACzC4C,WAAYrC,UAAAA,EAAeN,WAInC,IAGFX,EAAmBuD,YAAc"}
1
+ {"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, useState, useRef, useMemo, useLayoutEffect, RefObject, PropsWithChildren } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nimport { FBox, FBoxProps } from './FBox'\n\n\nexport type ResizableContainerProps = FBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n}\n\nexport type ResizableContainerRenderProps = {\n width: number | string\n height: number | string\n measured: boolean\n}\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 111,\n left: 0,\n pointerEvents: 'none',\n // backgroundColor: '#FF000040',\n },\n empty: {\n pointerEvents: 'none',\n // background: '#FF000040',\n // border: '1px solid #0000FF40',\n },\n}\n\nexport const ResizableContainer = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n\n const lastResizeWidthRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })\n\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n return () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n }, [debouncedResizeWrapper, containerRef])\n\n // END RESIZING\n\n return (\n <FBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <FBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (<FBox\n width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n style={styles.empty}\n />)}\n {children && children?.({\n height: `${containerSize?.height || 200}px`,\n width: `${containerSize?.width || 200}px`,\n measured: !!containerSize?.height,\n } as ResizableContainerRenderProps)}\n </FBox>\n )\n },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","_ref$debounceDelay","debounceDelay","props","_objectWithoutProperties","_excluded","containerRef","useRef","lastResizeWidthRef","width","height","_useState","useState","undefined","_useState2","_slicedToArray","containerSize","setContainerSize","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","_resizeObserver","_resizeObserver$unobs","unobserve","call","React","createElement","FBox","_extends","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"6VAkBMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,IACRC,KAAM,EACNC,cAAe,QAGjBC,MAAO,CACLD,cAAe,SAMNE,EAAqBC,GAChC,SAAAC,GAA0E,IAAvEC,EAAQD,EAARC,SAAQC,EAAAF,EAAEG,cAAAA,OAAgB,IAAHD,EAAG,IAAGA,EAAKE,EAAKC,EAAAL,EAAAM,GAClCC,EAAeC,IAEfC,EAAqBD,EAA0C,CAAEE,MAAO,EAAGC,OAAQ,IAEzFC,EACEC,EAAsB,CAAEH,WAAOI,EAAWH,YAAQG,IAAYC,EAAAC,EAAAJ,EAAA,GADzDK,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAyBC,GAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYlB,MACxCmB,EAAkBP,EAAQ,GAAGM,YAAYjB,QAEjBY,QAA1BA,EAAAd,EAAmBqB,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bb,SAAUiB,IACb,QAA1BH,EAAAf,EAAmBqB,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bb,UAAWkB,IAG1CpB,EAAmBqB,QAAU,CAAEpB,MAAOiB,EAAgBhB,OAAQkB,GAE9DX,EAAiB,CACfR,MAAOH,SAAqBkB,QAATA,EAAZlB,EAAcuB,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BpB,OAAQJ,SAAqB,QAATmB,EAAZnB,EAAcuB,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE7B,KAAgB,CAACA,IAuBpB,OArBA8B,GAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvB9B,SAAAA,EAAcuB,UAChBK,EAAmB5B,aAAAA,EAAAA,EAAcuB,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,GAEvBjB,EAAiB,CACfR,MAAOH,SAAqB6B,QAATA,EAAZ7B,EAAcuB,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BpB,OAAQJ,SAAqB,QAAT8B,EAAZ9B,EAAcuB,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,OAAO,WAAM,IAAAQ,EAAAC,EACG,QAAdD,EAAAN,SAAcO,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BL,GAEhC,GAAG,CAAChB,EAAwBZ,IAK1BqC,MAAAC,cAACC,EAAIC,EAAA,CACHrC,MAAM,OACNC,OAAO,OACPqC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACN9C,GAEJwC,MAAAC,cAACC,EAAI,CACHK,MAAO5D,EAAOC,KACdkB,MAAM,OACNC,OAAO,OACPyC,IAAK7C,KAELN,GAAa2C,MAAAC,cAACC,EAAI,CAClBpC,MAAK,GAAA2C,OAAKC,KAAKC,KAAItC,eAAAA,EAAeP,QAAS,IAAK,MAAQ,IAAQ,MAChEC,OAAM,GAAA0C,OAAKC,KAAKC,KAAItC,eAAAA,EAAeN,SAAU,IAAK,MAAQ,IAAQ,MAClEwC,MAAO5D,EAAOM,QAEfI,IAAYA,aAAQ,EAARA,EAAW,CACtBU,OAAM0C,GAAAA,QAAKpC,aAAa,EAAbA,EAAeN,SAAU,IAAO,MAC3CD,MAAK2C,GAAAA,QAAKpC,aAAa,EAAbA,EAAeP,QAAS,IAAO,MACzC8C,WAAYvC,UAAAA,EAAeN,WAInC,IAGFb,EAAmB2D,YAAc"}
@@ -1,10 +1,10 @@
1
1
  import { useLayoutEffect, useMemo, useState, useRef } from 'react';
2
2
  import debounce from 'lodash-es/debounce';
3
- export const useResize = (debounceDelay = 250) => {
3
+ // eslint-disable-next-line default-param-last
4
+ export const useResize = (debounceDelay = 250, callBack) => {
4
5
  const [containerSize, setContainerSize] = useState({ width: undefined, height: undefined });
5
6
  const lastResizeWidthRef = useRef({ width: 0, height: 0 });
6
7
  const containerRef = useRef();
7
- // const [unobserver, setUnobserver] = useState<Unobserver>(DefaultUnobserver)
8
8
  const unobserverRef = useRef();
9
9
  const debouncedResizeWrapper = useMemo(() => debounce((entries) => {
10
10
  const newResizeWidth = entries[0].contentRect.width;
@@ -14,11 +14,11 @@ export const useResize = (debounceDelay = 250) => {
14
14
  return;
15
15
  }
16
16
  lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight };
17
- setContainerSize({
17
+ (callBack || setContainerSize)({
18
18
  width: containerRef?.current?.clientWidth,
19
19
  height: containerRef?.current?.clientHeight,
20
20
  });
21
- }, debounceDelay), [containerRef, debounceDelay]);
21
+ }, debounceDelay), [callBack, debounceDelay]);
22
22
  useLayoutEffect(() => {
23
23
  let resizeObserver;
24
24
  let containerElement;
@@ -26,7 +26,7 @@ export const useResize = (debounceDelay = 250) => {
26
26
  containerElement = containerRef?.current;
27
27
  resizeObserver = new ResizeObserver(debouncedResizeWrapper);
28
28
  resizeObserver.observe(containerElement);
29
- setContainerSize({
29
+ (callBack || setContainerSize)({
30
30
  width: containerRef?.current?.clientWidth,
31
31
  height: containerRef?.current?.clientHeight,
32
32
  });
@@ -37,7 +37,7 @@ export const useResize = (debounceDelay = 250) => {
37
37
  // setUnobserver(unobserver)
38
38
  unobserverRef.current = unobserver;
39
39
  return unobserver;
40
- }, [debouncedResizeWrapper, containerRef]);
40
+ }, [debouncedResizeWrapper, containerRef, callBack]);
41
41
  return [containerRef, containerSize, unobserverRef.current];
42
42
  };
43
43
  //# sourceMappingURL=useResize.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useResize.js","sourceRoot":"","sources":["../../../../../src/core/hooks/useResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACpF,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAQzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,aAAa,GAAG,GAAG,EAC4C,EAAE;IACzF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,QAAQ,CAAc,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAA;IAEhE,MAAM,kBAAkB,GAAG,MAAM,CAAc,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAA;IACvE,MAAM,YAAY,GAAqD,MAAM,EAAkC,CAAA;IAE/G,8EAA8E;IAC9E,MAAM,aAAa,GAAG,MAAM,EAAc,CAAA;IAE1C,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE;QAChE,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAA;QACnD,MAAM,eAAe,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAA;QAErD,IAAI,kBAAkB,CAAC,OAAO,EAAE,KAAK,KAAK,cAAc;eACnD,kBAAkB,CAAC,OAAO,EAAE,MAAM,KAAK,eAAe,EAAE;YAC3D,OAAM;SACP;QACD,kBAAkB,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,CAAA;QAE/E,gBAAgB,CAAC;YACf,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW;YACzC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY;SAC5C,CAAC,CAAA;IACJ,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAA;IAEjD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,cAA8B,CAAA;QAClC,IAAI,gBAA6B,CAAA;QAEjC,IAAI,YAAY,EAAE,OAAO,EAAE;YACzB,gBAAgB,GAAG,YAAY,EAAE,OAAO,CAAA;YACxC,cAAc,GAAG,IAAI,cAAc,CAAC,sBAAsB,CAAC,CAAA;YAC3D,cAAc,CAAC,OAAO,CAAC,gBAA2B,CAAC,CAAA;YAEnD,gBAAgB,CAAC;gBACf,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW;gBACzC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY;aAC5C,CAAC,CAAA;SACH;QACD,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,cAAc,EAAE,SAAS,EAAE,CAAC,gBAA2B,CAAC,CAAA;QAC1D,CAAC,CAAA;QAED,4BAA4B;QAC5B,aAAa,CAAC,OAAO,GAAG,UAAU,CAAA;QAElC,OAAO,UAAU,CAAA;IACnB,CAAC,EAAE,CAAC,sBAAsB,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1C,OAAO,CAAC,YAAY,EAAE,aAAa,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;AAC7D,CAAC,CAAA"}
1
+ {"version":3,"file":"useResize.js","sourceRoot":"","sources":["../../../../../src/core/hooks/useResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACpF,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AAUzC,8CAA8C;AAC9C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,aAAa,GAAG,GAAG,EAAE,QAA4B,EACc,EAAE;IACzF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACnC,QAAQ,CAAc,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAA;IAElE,MAAM,kBAAkB,GAAG,MAAM,CAAc,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAA;IACvE,MAAM,YAAY,GAAqD,MAAM,EAAkC,CAAA;IAC/G,MAAM,aAAa,GAAG,MAAM,EAAc,CAAA;IAE1C,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE;QAChE,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAA;QACnD,MAAM,eAAe,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAA;QAErD,IAAI,kBAAkB,CAAC,OAAO,EAAE,KAAK,KAAK,cAAc;eACnD,kBAAkB,CAAC,OAAO,EAAE,MAAM,KAAK,eAAe,EAAE;YAC3D,OAAM;SACP;QACD,kBAAkB,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,CAG9E;QAAA,CAAC,QAAQ,IAAI,gBAAgB,CAAC,CAAC;YAC9B,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW;YACzC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY;SAC5C,CAAC,CAAA;IACJ,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAA;IAE7C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,cAA8B,CAAA;QAClC,IAAI,gBAA6B,CAAA;QAEjC,IAAI,YAAY,EAAE,OAAO,EAAE;YACzB,gBAAgB,GAAG,YAAY,EAAE,OAAO,CAAA;YACxC,cAAc,GAAG,IAAI,cAAc,CAAC,sBAAsB,CAAC,CAAA;YAC3D,cAAc,CAAC,OAAO,CAAC,gBAA2B,CAAC,CAGlD;YAAA,CAAC,QAAQ,IAAI,gBAAgB,CAAC,CAAC;gBAC9B,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW;gBACzC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY;aAC5C,CAAC,CAAA;SACH;QACD,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,cAAc,EAAE,SAAS,EAAE,CAAC,gBAA2B,CAAC,CAAA;QAC1D,CAAC,CAAA;QAED,4BAA4B;QAC5B,aAAa,CAAC,OAAO,GAAG,UAAU,CAAA;QAElC,OAAO,UAAU,CAAA;IACnB,CAAC,EAAE,CAAC,sBAAsB,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEpD,OAAO,CAAC,YAAY,EAAE,aAAa,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;AAC7D,CAAC,CAAA"}
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { memo, useState, useRef, useMemo, useEffect } from 'react';
2
+ import { memo, useState, useRef, useMemo, useLayoutEffect } from 'react';
3
3
  import debounce from 'lodash-es/debounce';
4
4
  import { FBox } from './FBox';
5
5
  const styles = {
@@ -16,7 +16,7 @@ const styles = {
16
16
  // border: '1px solid #0000FF40',
17
17
  },
18
18
  };
19
- export const ResizableContainer = memo(({ children, ...props }) => {
19
+ export const ResizableContainer = memo(({ children, debounceDelay = 250, ...props }) => {
20
20
  const containerRef = useRef();
21
21
  const lastResizeWidthRef = useRef({ width: 0, height: 0 });
22
22
  const [containerSize, setContainerSize] = useState({ width: undefined, height: undefined });
@@ -32,21 +32,24 @@ export const ResizableContainer = memo(({ children, ...props }) => {
32
32
  width: containerRef?.current?.clientWidth,
33
33
  height: containerRef?.current?.clientHeight,
34
34
  });
35
- }, 250), []);
36
- useEffect(() => {
35
+ }, debounceDelay), [debounceDelay]);
36
+ useLayoutEffect(() => {
37
37
  let resizeObserver;
38
38
  let containerElement;
39
39
  if (containerRef?.current) {
40
40
  containerElement = containerRef?.current;
41
41
  resizeObserver = new ResizeObserver(debouncedResizeWrapper);
42
42
  resizeObserver.observe(containerElement);
43
+ setContainerSize({
44
+ width: containerRef?.current?.clientWidth,
45
+ height: containerRef?.current?.clientHeight,
46
+ });
43
47
  }
44
48
  return () => {
45
49
  resizeObserver?.unobserve?.(containerElement);
46
50
  };
47
51
  }, [debouncedResizeWrapper, containerRef]);
48
52
  // END RESIZING
49
- console.log('containerSize', containerSize);
50
53
  return (_jsxs(FBox, { width: '100%', height: '100%', justify: 'center', align: 'center', direction: 'column', ...props, children: [_jsx(FBox, { style: styles.main, width: '100%', height: '100%', ref: containerRef }), !children && (_jsx(FBox, { width: `${Math.max(containerSize?.width || 200, 200) || 200}px`, height: `${Math.max(containerSize?.height || 200, 200) || 200}px`, style: styles.empty })), children && children?.({
51
54
  height: `${containerSize?.height || 200}px`,
52
55
  width: `${containerSize?.width || 200}px`,
@@ -1 +1 @@
1
- {"version":3,"file":"ResizableContainer.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ResizableContainer.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"names":[],"mappings":"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"}