@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.
- package/dist/hooks/esm/index.css +24 -24
- package/dist/hooks/esm/src/core/hooks/useResize.js +1 -1
- package/dist/hooks/esm/src/core/hooks/useResize.js.map +1 -1
- package/dist/hooks/index.css +24 -24
- package/dist/hooks/src/core/hooks/useResize.js +1 -1
- package/dist/hooks/src/core/hooks/useResize.js.map +1 -1
- package/dist/lib/cjs/src/core/hooks/useResize.js +1 -1
- package/dist/lib/cjs/src/core/hooks/useResize.js.map +1 -1
- package/dist/lib/cjs/src/core/ui/components/container/ResizableContainer.js +1 -1
- package/dist/lib/cjs/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/lib/esm/src/core/hooks/useResize.js +1 -1
- package/dist/lib/esm/src/core/hooks/useResize.js.map +1 -1
- package/dist/lib/esm/src/core/ui/components/container/ResizableContainer.js +1 -1
- package/dist/lib/esm/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/lib/src/core/hooks/useResize.js +6 -6
- package/dist/lib/src/core/hooks/useResize.js.map +1 -1
- package/dist/lib/src/core/ui/components/container/ResizableContainer.js +8 -5
- package/dist/lib/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/types/src/core/hooks/useResize.d.ts +3 -2
- package/dist/types/src/core/hooks/useResize.d.ts.map +1 -1
- package/dist/types/src/core/ui/components/container/ResizableContainer.d.ts +3 -1
- package/dist/types/src/core/ui/components/container/ResizableContainer.d.ts.map +1 -1
- package/dist/ui/esm/src/core/ui/components/container/ResizableContainer.js +1 -1
- package/dist/ui/esm/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/ui/src/core/ui/components/container/ResizableContainer.js +1 -1
- package/dist/ui/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/utils/esm/index.css +24 -24
- package/dist/utils/index.css +24 -24
- package/package.json +1 -1
package/dist/hooks/esm/index.css
CHANGED
|
@@ -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}),
|
|
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\
|
|
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"}
|
package/dist/hooks/index.css
CHANGED
|
@@ -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}),
|
|
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\
|
|
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}),
|
|
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\
|
|
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"),
|
|
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,
|
|
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}),
|
|
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\
|
|
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
|
|
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,
|
|
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
|
-
|
|
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), [
|
|
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;
|
|
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,
|
|
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
|
-
},
|
|
36
|
-
|
|
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":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ResizableContainer.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"names":[],"mappings":"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"}
|