@byeolnaerim/flex-layout 0.0.8 → 0.0.10

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 (125) hide show
  1. package/dist/flex-layout/components/FlexLayout.cjs +1 -76
  2. package/dist/flex-layout/components/FlexLayout.js +1 -70
  3. package/dist/flex-layout/components/FlexLayoutContainer.cjs +1 -196
  4. package/dist/flex-layout/components/FlexLayoutContainer.js +1 -189
  5. package/dist/flex-layout/components/FlexLayoutIFramePane.cjs +1 -0
  6. package/dist/flex-layout/components/FlexLayoutIFramePane.d.ts +4 -0
  7. package/dist/flex-layout/components/FlexLayoutIFramePane.js +1 -0
  8. package/dist/flex-layout/components/FlexLayoutResizePanel.cjs +1 -192
  9. package/dist/flex-layout/components/FlexLayoutResizePanel.d.ts +1 -1
  10. package/dist/flex-layout/components/FlexLayoutResizePanel.js +1 -186
  11. package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs +1 -1211
  12. package/dist/flex-layout/components/FlexLayoutSplitScreen.js +1 -1197
  13. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs +1 -339
  14. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.d.ts +1 -1
  15. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.js +1 -333
  16. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.cjs +1 -32
  17. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js +1 -25
  18. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.cjs +1 -40
  19. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.js +1 -34
  20. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.cjs +1 -30
  21. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.js +1 -24
  22. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.cjs +1 -109
  23. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js +1 -103
  24. package/dist/flex-layout/components/FlexLayoutStickyBox.cjs +1 -226
  25. package/dist/flex-layout/components/FlexLayoutStickyBox.d.ts +1 -0
  26. package/dist/flex-layout/components/FlexLayoutStickyBox.js +1 -224
  27. package/dist/flex-layout/components/index.cjs +1 -52
  28. package/dist/flex-layout/components/index.js +1 -9
  29. package/dist/flex-layout/hooks/index.cjs +1 -21
  30. package/dist/flex-layout/hooks/index.js +1 -4
  31. package/dist/flex-layout/hooks/useDrag.cjs +1 -232
  32. package/dist/flex-layout/hooks/useDrag.d.ts +20 -0
  33. package/dist/flex-layout/hooks/useDrag.js +1 -219
  34. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs +1 -118
  35. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js +1 -116
  36. package/dist/flex-layout/hooks/useListPaging.cjs +1 -179
  37. package/dist/flex-layout/hooks/useListPaging.js +1 -175
  38. package/dist/flex-layout/hooks/useSizes.cjs +1 -104
  39. package/dist/flex-layout/hooks/useSizes.js +1 -101
  40. package/dist/flex-layout/index.cjs +1 -42
  41. package/dist/flex-layout/index.js +1 -7
  42. package/dist/flex-layout/providers/FlexLayoutContext.cjs +1 -26
  43. package/dist/flex-layout/providers/FlexLayoutContext.js +1 -23
  44. package/dist/flex-layout/providers/FlexLayoutHooks.cjs +1 -247
  45. package/dist/flex-layout/providers/FlexLayoutHooks.d.ts +5 -1
  46. package/dist/flex-layout/providers/FlexLayoutHooks.js +1 -238
  47. package/dist/flex-layout/providers/index.cjs +1 -14
  48. package/dist/flex-layout/providers/index.js +1 -3
  49. package/dist/flex-layout/store/FlexLayoutContainerStore.cjs +1 -203
  50. package/dist/flex-layout/store/FlexLayoutContainerStore.d.ts +1 -0
  51. package/dist/flex-layout/store/FlexLayoutContainerStore.js +1 -181
  52. package/dist/flex-layout/store/index.cjs +1 -14
  53. package/dist/flex-layout/store/index.js +1 -3
  54. package/dist/flex-layout/styles/FlexLayout.module.css +473 -416
  55. package/dist/flex-layout/types/FlexDirectionTypes.cjs +1 -4
  56. package/dist/flex-layout/types/FlexDirectionTypes.js +0 -3
  57. package/dist/flex-layout/types/FlexLayoutTypes.cjs +1 -4
  58. package/dist/flex-layout/types/FlexLayoutTypes.d.ts +1 -3
  59. package/dist/flex-layout/types/FlexLayoutTypes.js +0 -3
  60. package/dist/flex-layout/utils/FlexLayoutUtils.cjs +1 -208
  61. package/dist/flex-layout/utils/FlexLayoutUtils.d.ts +4 -4
  62. package/dist/flex-layout/utils/FlexLayoutUtils.js +1 -196
  63. package/dist/flex-layout/utils/index.cjs +1 -14
  64. package/dist/flex-layout/utils/index.js +1 -3
  65. package/dist/index.cjs +1 -14
  66. package/dist/index.js +1 -3
  67. package/dist/types/css.d.cjs +1 -4
  68. package/dist/types/css.d.js +0 -3
  69. package/package.json +116 -109
  70. package/dist/flex-layout/components/FlexLayout.cjs.map +0 -1
  71. package/dist/flex-layout/components/FlexLayout.js.map +0 -1
  72. package/dist/flex-layout/components/FlexLayoutContainer.cjs.map +0 -1
  73. package/dist/flex-layout/components/FlexLayoutContainer.js.map +0 -1
  74. package/dist/flex-layout/components/FlexLayoutResizePanel.cjs.map +0 -1
  75. package/dist/flex-layout/components/FlexLayoutResizePanel.js.map +0 -1
  76. package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs.map +0 -1
  77. package/dist/flex-layout/components/FlexLayoutSplitScreen.js.map +0 -1
  78. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs.map +0 -1
  79. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.js.map +0 -1
  80. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.cjs.map +0 -1
  81. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js.map +0 -1
  82. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.cjs.map +0 -1
  83. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.js.map +0 -1
  84. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.cjs.map +0 -1
  85. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.js.map +0 -1
  86. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.cjs.map +0 -1
  87. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js.map +0 -1
  88. package/dist/flex-layout/components/FlexLayoutStickyBox.cjs.map +0 -1
  89. package/dist/flex-layout/components/FlexLayoutStickyBox.js.map +0 -1
  90. package/dist/flex-layout/components/index.cjs.map +0 -1
  91. package/dist/flex-layout/components/index.js.map +0 -1
  92. package/dist/flex-layout/hooks/index.cjs.map +0 -1
  93. package/dist/flex-layout/hooks/index.js.map +0 -1
  94. package/dist/flex-layout/hooks/useDrag.cjs.map +0 -1
  95. package/dist/flex-layout/hooks/useDrag.js.map +0 -1
  96. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs.map +0 -1
  97. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js.map +0 -1
  98. package/dist/flex-layout/hooks/useListPaging.cjs.map +0 -1
  99. package/dist/flex-layout/hooks/useListPaging.js.map +0 -1
  100. package/dist/flex-layout/hooks/useSizes.cjs.map +0 -1
  101. package/dist/flex-layout/hooks/useSizes.js.map +0 -1
  102. package/dist/flex-layout/index.cjs.map +0 -1
  103. package/dist/flex-layout/index.js.map +0 -1
  104. package/dist/flex-layout/providers/FlexLayoutContext.cjs.map +0 -1
  105. package/dist/flex-layout/providers/FlexLayoutContext.js.map +0 -1
  106. package/dist/flex-layout/providers/FlexLayoutHooks.cjs.map +0 -1
  107. package/dist/flex-layout/providers/FlexLayoutHooks.js.map +0 -1
  108. package/dist/flex-layout/providers/index.cjs.map +0 -1
  109. package/dist/flex-layout/providers/index.js.map +0 -1
  110. package/dist/flex-layout/store/FlexLayoutContainerStore.cjs.map +0 -1
  111. package/dist/flex-layout/store/FlexLayoutContainerStore.js.map +0 -1
  112. package/dist/flex-layout/store/index.cjs.map +0 -1
  113. package/dist/flex-layout/store/index.js.map +0 -1
  114. package/dist/flex-layout/types/FlexDirectionTypes.cjs.map +0 -1
  115. package/dist/flex-layout/types/FlexDirectionTypes.js.map +0 -1
  116. package/dist/flex-layout/types/FlexLayoutTypes.cjs.map +0 -1
  117. package/dist/flex-layout/types/FlexLayoutTypes.js.map +0 -1
  118. package/dist/flex-layout/utils/FlexLayoutUtils.cjs.map +0 -1
  119. package/dist/flex-layout/utils/FlexLayoutUtils.js.map +0 -1
  120. package/dist/flex-layout/utils/index.cjs.map +0 -1
  121. package/dist/flex-layout/utils/index.js.map +0 -1
  122. package/dist/index.cjs.map +0 -1
  123. package/dist/index.js.map +0 -1
  124. package/dist/types/css.d.cjs.map +0 -1
  125. package/dist/types/css.d.js.map +0 -1
@@ -1,116 +1 @@
1
- import { useState, useRef, useEffect } from 'react';
2
- import { useDragCapture, dropMovementEventSubject } from './useDrag';
3
-
4
- function useFlexLayoutSplitScreen({
5
- isSplitInitial = false,
6
- parentDirection,
7
- directionInitial = "row",
8
- selfContainerName,
9
- parentLayoutName,
10
- layoutName
11
- }) {
12
- const [direction, setDirection] = useState(
13
- directionInitial
14
- );
15
- const [isSplit, setIsSplit] = useState(isSplitInitial);
16
- const [boundaryContainerSize, setBoundaryContainerSize] = useState(null);
17
- const [centerDropTargetComponent, setCenterDropTargetComponent] = useState([]);
18
- const [afterDropTargetComponent, setAfterDropTargetComponent] = useState([]);
19
- const [beforeDropTargetComponent, setBeforeDropTargetComponent] = useState([]);
20
- const layoutRef = useRef(null);
21
- const dragState = useDragCapture(layoutRef);
22
- useEffect(() => {
23
- if (!dragState) {
24
- setBoundaryContainerSize(null);
25
- return;
26
- }
27
- const {
28
- isDrop,
29
- isDragging,
30
- positionName,
31
- containerName,
32
- children: dropComponent,
33
- isOver,
34
- navigationTitle,
35
- dropEndCallback,
36
- x,
37
- y,
38
- screenKey
39
- } = dragState;
40
- const orderName = positionName === "leftBoundary" || positionName === "topBoundary" ? "before" : positionName === "rightBoundary" || positionName === "bottomBoundary" ? "after" : "center";
41
- if ((isOver || isDrop) && boundaryContainerSize) {
42
- setBoundaryContainerSize(null);
43
- }
44
- if (selfContainerName.startsWith(containerName)) {
45
- return;
46
- }
47
- if (isDrop && screenKey) {
48
- const dropDirection = positionName === "leftBoundary" || positionName === "rightBoundary" ? "row" : "column";
49
- if (!isSplit && !isOver) {
50
- if (positionName !== "centerBoundary" && dropDirection !== parentDirection) {
51
- setIsSplit(true);
52
- setDirection(dropDirection);
53
- }
54
- dropMovementEventSubject.next({
55
- state: "append",
56
- targetContainerName: containerName,
57
- targetParentLayoutName: parentLayoutName,
58
- targetLayoutName: layoutName,
59
- targetComponent: dropComponent,
60
- orderName,
61
- x,
62
- y,
63
- dropEndCallback,
64
- dropTargetComponentEvent: {
65
- navigationTitle,
66
- dropDocumentOutsideOption: dragState?.dropDocumentOutsideOption,
67
- direction: dropDirection,
68
- screenKey
69
- }
70
- });
71
- }
72
- }
73
- if (isDragging && !isSplit && !isOver) {
74
- const newSize = {
75
- left: positionName === "rightBoundary" ? "50%" : "0",
76
- top: positionName === "bottomBoundary" ? "50%" : "0",
77
- width: positionName === "leftBoundary" || positionName === "rightBoundary" ? "50%" : "100%",
78
- height: positionName === "topBoundary" || positionName === "bottomBoundary" ? "50%" : "100%"
79
- };
80
- if (JSON.stringify(boundaryContainerSize) !== JSON.stringify(newSize)) {
81
- setBoundaryContainerSize(newSize);
82
- }
83
- }
84
- }, [
85
- dragState,
86
- isSplit,
87
- boundaryContainerSize,
88
- parentLayoutName,
89
- layoutName,
90
- selfContainerName,
91
- direction
92
- ]);
93
- return {
94
- direction,
95
- setDirection,
96
- isSplit,
97
- setIsSplit,
98
- boundaryContainerSize,
99
- //setBoundaryContainerSize,
100
- centerDropTargetComponent,
101
- afterDropTargetComponent,
102
- beforeDropTargetComponent,
103
- setAfterDropTargetComponent,
104
- setBeforeDropTargetComponent,
105
- setCenterDropTargetComponent,
106
- //dropTargetComponent,
107
- //setDropTargetComponent,
108
- //setDropPosition,
109
- isOver: dragState?.isOver,
110
- layoutRef
111
- };
112
- }
113
-
114
- export { useFlexLayoutSplitScreen };
115
- //# sourceMappingURL=useFlexLayoutSplitScreen.js.map
116
- //# sourceMappingURL=useFlexLayoutSplitScreen.js.map
1
+ import{useEffect as M,useRef as R,useState as e}from"react";import{dropMovementEventSubject as j,useDragCapture as k}from"./useDrag";function K({isSplitInitial:C=!1,parentDirection:B,directionInitial:S="row",selfContainerName:a,parentLayoutName:g,layoutName:l}){const[c,d]=e(S),[r,m]=e(C),[i,p]=e(null),[T,h]=e([]),[b,O]=e([]),[v,w]=e([]),f=R(null),n=k(f);return M(()=>{if(!n){p(null);return}const{isDrop:y,isDragging:N,positionName:t,containerName:s,children:E,isOver:u,navigationTitle:x,dropEndCallback:L,x:z,y:I,screenKey:D}=n,J=t==="leftBoundary"||t==="topBoundary"?"before":t==="rightBoundary"||t==="bottomBoundary"?"after":"center";if((u||y)&&i&&p(null),!(a===s||a.startsWith(s+"_"))){if(y&&D){const o=t==="leftBoundary"||t==="rightBoundary"?"row":"column";!r&&!u&&(t!=="centerBoundary"&&o!==B&&(m(!0),d(o)),j.next({state:"append",targetContainerName:s,targetParentLayoutName:g,targetLayoutName:l,targetComponent:E,orderName:J,x:z,y:I,dropEndCallback:L,dropTargetComponentEvent:{navigationTitle:x,dropDocumentOutsideOption:n?.dropDocumentOutsideOption,direction:o,screenKey:D}}))}if(N&&!r&&!u){const o={left:t==="rightBoundary"?"50%":"0",top:t==="bottomBoundary"?"50%":"0",width:t==="leftBoundary"||t==="rightBoundary"?"50%":"100%",height:t==="topBoundary"||t==="bottomBoundary"?"50%":"100%"};JSON.stringify(i)!==JSON.stringify(o)&&p(o)}}},[n,r,i,g,l,a,c]),{direction:c,setDirection:d,isSplit:r,setIsSplit:m,boundaryContainerSize:i,centerDropTargetComponent:T,afterDropTargetComponent:b,beforeDropTargetComponent:v,setAfterDropTargetComponent:O,setBeforeDropTargetComponent:w,setCenterDropTargetComponent:h,isOver:n?.isOver,layoutRef:f}}export{K as useFlexLayoutSplitScreen};
@@ -1,179 +1 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
-
5
- const useListPagingForSentinel = ({
6
- //initPageNumber,
7
- //initPageSize,
8
- onReachTerminal
9
- }) => {
10
- const [firstChildNode, setFirstChildNode] = react.useState(null);
11
- const [lastChildNode, setLastChildNode] = react.useState(null);
12
- const observerRef = react.useRef(null);
13
- const firstChildRef = react.useCallback((node) => {
14
- setFirstChildNode(node);
15
- }, []);
16
- const lastChildRef = react.useCallback((node) => {
17
- setLastChildNode(node);
18
- }, []);
19
- react.useEffect(() => {
20
- if (firstChildNode && observerRef.current)
21
- observerRef.current.unobserve(firstChildNode);
22
- if (lastChildNode && observerRef.current)
23
- observerRef.current.unobserve(lastChildNode);
24
- const handleIntersect = (entries, observer2) => {
25
- entries.forEach((entry) => {
26
- if (entry.isIntersecting) {
27
- if (entry.target === firstChildNode) {
28
- if (onReachTerminal)
29
- onReachTerminal({
30
- isFirst: true,
31
- isLast: false,
32
- observer: observer2
33
- });
34
- }
35
- if (entry.target === lastChildNode) {
36
- if (onReachTerminal)
37
- onReachTerminal({
38
- isFirst: false,
39
- isLast: true,
40
- observer: observer2
41
- });
42
- }
43
- }
44
- });
45
- };
46
- const observer = new IntersectionObserver(handleIntersect, {
47
- threshold: 0.1
48
- });
49
- observerRef.current = observer;
50
- if (firstChildNode) observer.observe(firstChildNode);
51
- if (lastChildNode) observer.observe(lastChildNode);
52
- return () => {
53
- if (observerRef.current) {
54
- observerRef.current.disconnect();
55
- }
56
- };
57
- }, [firstChildNode, lastChildNode]);
58
- return {
59
- firstChildRef,
60
- lastChildRef
61
- };
62
- };
63
- const usePaginationViewNumber = ({
64
- initPageNumber
65
- }) => {
66
- const [showCurrentPageNumber, setShowCurrentPageNumber] = react.useState(initPageNumber);
67
- const observerRef = react.useRef(null);
68
- const showCurrentPageObserveTarget = react.useCallback(
69
- (node) => {
70
- if (!node) return;
71
- if (!observerRef.current) {
72
- observerRef.current = new IntersectionObserver(
73
- (entries) => {
74
- entries.forEach((entry) => {
75
- if (entry.isIntersecting) {
76
- const pageIndexAttr = entry.target.getAttribute(
77
- "data-page-index"
78
- );
79
- if (!pageIndexAttr) return;
80
- const pageIndex = parseInt(pageIndexAttr, 10);
81
- setShowCurrentPageNumber(pageIndex);
82
- }
83
- });
84
- },
85
- {
86
- threshold: 0.1
87
- // 예: 10% 이상 보여야 intersect로 판단
88
- }
89
- );
90
- }
91
- observerRef.current.observe(node);
92
- },
93
- []
94
- );
95
- react.useEffect(() => {
96
- const currentObserver = observerRef.current;
97
- return () => {
98
- if (currentObserver) {
99
- currentObserver.disconnect();
100
- }
101
- };
102
- }, []);
103
- return {
104
- showCurrentPageNumber,
105
- showCurrentPageObserveTarget
106
- };
107
- };
108
- const usePagingHandler = ({
109
- lastCallPageNumber,
110
- dataListRef
111
- }) => {
112
- const jumpingPageNumberRef = react.useRef(lastCallPageNumber);
113
- react.useEffect(() => {
114
- if (jumpingPageNumberRef.current) {
115
- setTimeout(() => {
116
- jumpingPageNumberRef.current = null;
117
- }, 1e3);
118
- }
119
- }, [jumpingPageNumberRef]);
120
- const paginationScrollIntoViewTarget = react.useRef({});
121
- const pageNumberRef = react.useRef(lastCallPageNumber);
122
- const setPaginationRef = react.useCallback(
123
- (i) => (node) => {
124
- if (!node) return;
125
- paginationScrollIntoViewTarget.current[i] = node;
126
- if (jumpingPageNumberRef.current !== null && i === jumpingPageNumberRef.current) {
127
- node.scrollIntoView({
128
- behavior: "instant",
129
- // 필요한 경우 'smooth' 등으로 수정 가능
130
- block: "start"
131
- });
132
- jumpingPageNumberRef.current = null;
133
- }
134
- },
135
- []
136
- );
137
- const handleReachTerminal = ({ isFirst, isLast, observer }, dataCallFetch) => {
138
- if (dataListRef.current.length === 0) return;
139
- if (jumpingPageNumberRef.current != null) return;
140
- if (!isFirst && !isLast) return;
141
- const callPageNumber = isFirst ? Math.max(pageNumberRef.current - 1, 0) : pageNumberRef.current + 1;
142
- if (dataListRef.current[callPageNumber] != null && (dataListRef.current[callPageNumber]?.length || 0) > 0)
143
- return;
144
- jumpingPageNumberRef.current = callPageNumber;
145
- setTimeout(() => {
146
- jumpingPageNumberRef.current = null;
147
- }, 1e3);
148
- dataCallFetch(callPageNumber);
149
- };
150
- const handleClickPageChange = (page, dataCallFetch) => {
151
- const pageData = dataListRef.current[page];
152
- if (pageData != null && Array.isArray(pageData) && pageData.length > 0) {
153
- paginationScrollIntoViewTarget.current[page]?.scrollIntoView({
154
- behavior: "smooth",
155
- block: "start"
156
- });
157
- return;
158
- }
159
- jumpingPageNumberRef.current = page;
160
- setTimeout(() => {
161
- jumpingPageNumberRef.current = null;
162
- }, 1e3);
163
- dataCallFetch(page);
164
- };
165
- return {
166
- jumpingPageNumberRef,
167
- paginationScrollIntoViewTarget,
168
- pageNumberRef,
169
- setPaginationRef,
170
- handleReachTerminal,
171
- handleClickPageChange
172
- };
173
- };
174
-
175
- exports.useListPagingForSentinel = useListPagingForSentinel;
176
- exports.usePaginationViewNumber = usePaginationViewNumber;
177
- exports.usePagingHandler = usePagingHandler;
178
- //# sourceMappingURL=useListPaging.cjs.map
179
- //# sourceMappingURL=useListPaging.cjs.map
1
+ "use strict";var h=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var I=(u,e)=>{for(var l in e)h(u,l,{get:e[l],enumerable:!0})},P=(u,e,l,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!R.call(u,s)&&s!==l&&h(u,s,{get:()=>e[s],enumerable:!(t=T(e,s))||t.enumerable});return u};var C=u=>P(h({},"__esModule",{value:!0}),u);var O={};I(O,{useListPagingForSentinel:()=>E,usePaginationViewNumber:()=>w,usePagingHandler:()=>N});module.exports=C(O);var r=require("react");const E=({onReachTerminal:u})=>{const[e,l]=(0,r.useState)(null),[t,s]=(0,r.useState)(null),n=(0,r.useRef)(null),a=(0,r.useCallback)(o=>{l(o)},[]),b=(0,r.useCallback)(o=>{s(o)},[]);return(0,r.useEffect)(()=>{e&&n.current&&n.current.unobserve(e),t&&n.current&&n.current.unobserve(t);const o=(d,i)=>{d.forEach(c=>{c.isIntersecting&&(c.target===e&&u&&u({isFirst:!0,isLast:!1,observer:i}),c.target===t&&u&&u({isFirst:!1,isLast:!0,observer:i}))})},f=new IntersectionObserver(o,{threshold:.1});return n.current=f,e&&f.observe(e),t&&f.observe(t),()=>{n.current&&n.current.disconnect()}},[e,t]),{firstChildRef:a,lastChildRef:b}},w=({initPageNumber:u})=>{const[e,l]=(0,r.useState)(u),t=(0,r.useRef)(null),s=(0,r.useCallback)(n=>{n&&(t.current||(t.current=new IntersectionObserver(a=>{a.forEach(b=>{if(b.isIntersecting){const o=b.target.getAttribute("data-page-index");if(!o)return;const f=parseInt(o,10);l(f)}})},{threshold:.1})),t.current.observe(n))},[]);return(0,r.useEffect)(()=>{const n=t.current;return()=>{n&&n.disconnect()}},[]),{showCurrentPageNumber:e,showCurrentPageObserveTarget:s}},N=({lastCallPageNumber:u,dataListRef:e})=>{const l=(0,r.useRef)(u),t=(0,r.useRef)({}),s=(0,r.useRef)(u),n=(0,r.useRef)(null),a=(0,r.useCallback)(()=>{n.current!==null&&(window.clearTimeout(n.current),n.current=null)},[]),b=(0,r.useCallback)(()=>{a(),n.current=window.setTimeout(()=>{l.current=null,n.current=null},1e3)},[a]);(0,r.useEffect)(()=>()=>{a()},[a]);const o=(0,r.useCallback)(i=>c=>{c&&(t.current[i]=c,l.current!==null&&i===l.current&&(c.scrollIntoView({behavior:"instant",block:"start"}),l.current=null))},[]);return{jumpingPageNumberRef:l,paginationScrollIntoViewTarget:t,pageNumberRef:s,setPaginationRef:o,handleReachTerminal:({isFirst:i,isLast:c,observer:m},v)=>{if(e.current.length===0||l.current!=null||!i&&!c)return;const g=i?Math.max(s.current-1,0):s.current+1;e.current[g]!=null&&(e.current[g]?.length||0)>0||(l.current=g,b(),v(g))},handleClickPageChange:(i,c)=>{const m=e.current[i];if(m!=null&&Array.isArray(m)&&m.length>0){t.current[i]?.scrollIntoView({behavior:"smooth",block:"start"});return}l.current=i,b(),c(i)}}};0&&(module.exports={useListPagingForSentinel,usePaginationViewNumber,usePagingHandler});
@@ -1,175 +1 @@
1
- import { useState, useRef, useCallback, useEffect } from 'react';
2
-
3
- const useListPagingForSentinel = ({
4
- //initPageNumber,
5
- //initPageSize,
6
- onReachTerminal
7
- }) => {
8
- const [firstChildNode, setFirstChildNode] = useState(null);
9
- const [lastChildNode, setLastChildNode] = useState(null);
10
- const observerRef = useRef(null);
11
- const firstChildRef = useCallback((node) => {
12
- setFirstChildNode(node);
13
- }, []);
14
- const lastChildRef = useCallback((node) => {
15
- setLastChildNode(node);
16
- }, []);
17
- useEffect(() => {
18
- if (firstChildNode && observerRef.current)
19
- observerRef.current.unobserve(firstChildNode);
20
- if (lastChildNode && observerRef.current)
21
- observerRef.current.unobserve(lastChildNode);
22
- const handleIntersect = (entries, observer2) => {
23
- entries.forEach((entry) => {
24
- if (entry.isIntersecting) {
25
- if (entry.target === firstChildNode) {
26
- if (onReachTerminal)
27
- onReachTerminal({
28
- isFirst: true,
29
- isLast: false,
30
- observer: observer2
31
- });
32
- }
33
- if (entry.target === lastChildNode) {
34
- if (onReachTerminal)
35
- onReachTerminal({
36
- isFirst: false,
37
- isLast: true,
38
- observer: observer2
39
- });
40
- }
41
- }
42
- });
43
- };
44
- const observer = new IntersectionObserver(handleIntersect, {
45
- threshold: 0.1
46
- });
47
- observerRef.current = observer;
48
- if (firstChildNode) observer.observe(firstChildNode);
49
- if (lastChildNode) observer.observe(lastChildNode);
50
- return () => {
51
- if (observerRef.current) {
52
- observerRef.current.disconnect();
53
- }
54
- };
55
- }, [firstChildNode, lastChildNode]);
56
- return {
57
- firstChildRef,
58
- lastChildRef
59
- };
60
- };
61
- const usePaginationViewNumber = ({
62
- initPageNumber
63
- }) => {
64
- const [showCurrentPageNumber, setShowCurrentPageNumber] = useState(initPageNumber);
65
- const observerRef = useRef(null);
66
- const showCurrentPageObserveTarget = useCallback(
67
- (node) => {
68
- if (!node) return;
69
- if (!observerRef.current) {
70
- observerRef.current = new IntersectionObserver(
71
- (entries) => {
72
- entries.forEach((entry) => {
73
- if (entry.isIntersecting) {
74
- const pageIndexAttr = entry.target.getAttribute(
75
- "data-page-index"
76
- );
77
- if (!pageIndexAttr) return;
78
- const pageIndex = parseInt(pageIndexAttr, 10);
79
- setShowCurrentPageNumber(pageIndex);
80
- }
81
- });
82
- },
83
- {
84
- threshold: 0.1
85
- // 예: 10% 이상 보여야 intersect로 판단
86
- }
87
- );
88
- }
89
- observerRef.current.observe(node);
90
- },
91
- []
92
- );
93
- useEffect(() => {
94
- const currentObserver = observerRef.current;
95
- return () => {
96
- if (currentObserver) {
97
- currentObserver.disconnect();
98
- }
99
- };
100
- }, []);
101
- return {
102
- showCurrentPageNumber,
103
- showCurrentPageObserveTarget
104
- };
105
- };
106
- const usePagingHandler = ({
107
- lastCallPageNumber,
108
- dataListRef
109
- }) => {
110
- const jumpingPageNumberRef = useRef(lastCallPageNumber);
111
- useEffect(() => {
112
- if (jumpingPageNumberRef.current) {
113
- setTimeout(() => {
114
- jumpingPageNumberRef.current = null;
115
- }, 1e3);
116
- }
117
- }, [jumpingPageNumberRef]);
118
- const paginationScrollIntoViewTarget = useRef({});
119
- const pageNumberRef = useRef(lastCallPageNumber);
120
- const setPaginationRef = useCallback(
121
- (i) => (node) => {
122
- if (!node) return;
123
- paginationScrollIntoViewTarget.current[i] = node;
124
- if (jumpingPageNumberRef.current !== null && i === jumpingPageNumberRef.current) {
125
- node.scrollIntoView({
126
- behavior: "instant",
127
- // 필요한 경우 'smooth' 등으로 수정 가능
128
- block: "start"
129
- });
130
- jumpingPageNumberRef.current = null;
131
- }
132
- },
133
- []
134
- );
135
- const handleReachTerminal = ({ isFirst, isLast, observer }, dataCallFetch) => {
136
- if (dataListRef.current.length === 0) return;
137
- if (jumpingPageNumberRef.current != null) return;
138
- if (!isFirst && !isLast) return;
139
- const callPageNumber = isFirst ? Math.max(pageNumberRef.current - 1, 0) : pageNumberRef.current + 1;
140
- if (dataListRef.current[callPageNumber] != null && (dataListRef.current[callPageNumber]?.length || 0) > 0)
141
- return;
142
- jumpingPageNumberRef.current = callPageNumber;
143
- setTimeout(() => {
144
- jumpingPageNumberRef.current = null;
145
- }, 1e3);
146
- dataCallFetch(callPageNumber);
147
- };
148
- const handleClickPageChange = (page, dataCallFetch) => {
149
- const pageData = dataListRef.current[page];
150
- if (pageData != null && Array.isArray(pageData) && pageData.length > 0) {
151
- paginationScrollIntoViewTarget.current[page]?.scrollIntoView({
152
- behavior: "smooth",
153
- block: "start"
154
- });
155
- return;
156
- }
157
- jumpingPageNumberRef.current = page;
158
- setTimeout(() => {
159
- jumpingPageNumberRef.current = null;
160
- }, 1e3);
161
- dataCallFetch(page);
162
- };
163
- return {
164
- jumpingPageNumberRef,
165
- paginationScrollIntoViewTarget,
166
- pageNumberRef,
167
- setPaginationRef,
168
- handleReachTerminal,
169
- handleClickPageChange
170
- };
171
- };
172
-
173
- export { useListPagingForSentinel, usePaginationViewNumber, usePagingHandler };
174
- //# sourceMappingURL=useListPaging.js.map
175
- //# sourceMappingURL=useListPaging.js.map
1
+ import{useCallback as f,useEffect as d,useRef as m,useState as v}from"react";const P=({onReachTerminal:i})=>{const[n,u]=v(null),[r,o]=v(null),e=m(null),c=f(s=>{u(s)},[]),a=f(s=>{o(s)},[]);return d(()=>{n&&e.current&&e.current.unobserve(n),r&&e.current&&e.current.unobserve(r);const s=(T,t)=>{T.forEach(l=>{l.isIntersecting&&(l.target===n&&i&&i({isFirst:!0,isLast:!1,observer:t}),l.target===r&&i&&i({isFirst:!1,isLast:!0,observer:t}))})},b=new IntersectionObserver(s,{threshold:.1});return e.current=b,n&&b.observe(n),r&&b.observe(r),()=>{e.current&&e.current.disconnect()}},[n,r]),{firstChildRef:c,lastChildRef:a}},C=({initPageNumber:i})=>{const[n,u]=v(i),r=m(null),o=f(e=>{e&&(r.current||(r.current=new IntersectionObserver(c=>{c.forEach(a=>{if(a.isIntersecting){const s=a.target.getAttribute("data-page-index");if(!s)return;const b=parseInt(s,10);u(b)}})},{threshold:.1})),r.current.observe(e))},[]);return d(()=>{const e=r.current;return()=>{e&&e.disconnect()}},[]),{showCurrentPageNumber:n,showCurrentPageObserveTarget:o}},E=({lastCallPageNumber:i,dataListRef:n})=>{const u=m(i),r=m({}),o=m(i),e=m(null),c=f(()=>{e.current!==null&&(window.clearTimeout(e.current),e.current=null)},[]),a=f(()=>{c(),e.current=window.setTimeout(()=>{u.current=null,e.current=null},1e3)},[c]);d(()=>()=>{c()},[c]);const s=f(t=>l=>{l&&(r.current[t]=l,u.current!==null&&t===u.current&&(l.scrollIntoView({behavior:"instant",block:"start"}),u.current=null))},[]);return{jumpingPageNumberRef:u,paginationScrollIntoViewTarget:r,pageNumberRef:o,setPaginationRef:s,handleReachTerminal:({isFirst:t,isLast:l,observer:g},p)=>{if(n.current.length===0||u.current!=null||!t&&!l)return;const h=t?Math.max(o.current-1,0):o.current+1;n.current[h]!=null&&(n.current[h]?.length||0)>0||(u.current=h,a(),p(h))},handleClickPageChange:(t,l)=>{const g=n.current[t];if(g!=null&&Array.isArray(g)&&g.length>0){r.current[t]?.scrollIntoView({behavior:"smooth",block:"start"});return}u.current=t,a(),l(t)}}};export{P as useListPagingForSentinel,C as usePaginationViewNumber,E as usePagingHandler};
@@ -1,104 +1 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
- var rxjs = require('rxjs');
5
-
6
- const useSize = (sizeName) => {
7
- const ref = react.useRef(null);
8
- const [size, setSize] = react.useState(void 0);
9
- react.useLayoutEffect(() => {
10
- if (!ref.current) return;
11
- const handleResize = () => {
12
- if (ref.current) {
13
- const newSize = ref.current.getBoundingClientRect()[sizeName];
14
- setSize(newSize);
15
- }
16
- };
17
- handleResize();
18
- const resizeObserver = new ResizeObserver(() => {
19
- handleResize();
20
- });
21
- resizeObserver.observe(ref.current);
22
- window.addEventListener("resize", handleResize);
23
- return () => {
24
- resizeObserver.disconnect();
25
- window.removeEventListener("resize", handleResize);
26
- };
27
- }, [sizeName]);
28
- return { ref, size };
29
- };
30
- const useFirstChildSize = (sizeName) => {
31
- const ref = react.useRef(null);
32
- const [sizes, setSizes] = react.useState();
33
- react.useEffect(() => {
34
- if (!ref.current || !ref.current.children[0]) return;
35
- if (!sizes || sizes.length === 0) {
36
- setSizes([
37
- ref.current.getBoundingClientRect()[sizeName],
38
- ref.current.children[0].getBoundingClientRect()[sizeName]
39
- ]);
40
- }
41
- }, []);
42
- react.useEffect(() => {
43
- if (!ref.current || !ref.current.children[0]) return;
44
- const childrenChangeObserver = new MutationObserver(
45
- (mutationList, observer) => {
46
- mutationList.forEach((mutation) => {
47
- if (!ref.current || !sizes || !ref.current.children[0])
48
- return;
49
- const newSize = ref.current.getBoundingClientRect()[sizeName];
50
- setSizes([
51
- newSize,
52
- ref.current.children[0].getBoundingClientRect()[sizeName]
53
- ]);
54
- });
55
- }
56
- );
57
- childrenChangeObserver.observe(ref.current, {
58
- childList: true,
59
- subtree: true
60
- });
61
- let isFocus = false;
62
- const windowResizeSubscribe = rxjs.fromEvent(window, "resize").pipe(
63
- rxjs.distinctUntilChanged(),
64
- rxjs.filter(
65
- () => document.activeElement?.tagName !== "INPUT" && !isFocus
66
- )
67
- ).subscribe((ev) => {
68
- if (!ref.current || !ref.current.children[0]) return;
69
- setSizes([
70
- ref.current.getBoundingClientRect()[sizeName],
71
- ref.current.children[0].getBoundingClientRect()[sizeName]
72
- ]);
73
- });
74
- const documentFocusoutSubscribe = rxjs.fromEvent(
75
- document,
76
- "focusout"
77
- ).pipe(
78
- rxjs.auditTime(1e3),
79
- rxjs.filter((ev) => document.activeElement?.tagName !== "INPUT")
80
- ).subscribe({
81
- next: () => {
82
- if (isFocus) isFocus = false;
83
- }
84
- });
85
- const documentFocusinSubscribe = rxjs.fromEvent(
86
- document,
87
- "focusin"
88
- ).subscribe({
89
- next: (ev) => isFocus = ev.target.tagName === "INPUT"
90
- });
91
- return () => {
92
- windowResizeSubscribe.unsubscribe();
93
- documentFocusoutSubscribe.unsubscribe();
94
- documentFocusinSubscribe.unsubscribe();
95
- childrenChangeObserver.disconnect();
96
- };
97
- }, [sizeName, sizes]);
98
- return { ref, sizes };
99
- };
100
-
101
- exports.useFirstChildSize = useFirstChildSize;
102
- exports.useSize = useSize;
103
- //# sourceMappingURL=useSizes.cjs.map
104
- //# sourceMappingURL=useSizes.cjs.map
1
+ "use strict";var b=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var h=(n,e)=>{for(var r in e)b(n,r,{get:e[r],enumerable:!0})},R=(n,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!v.call(n,t)&&t!==r&&b(n,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return n};var E=n=>R(b({},"__esModule",{value:!0}),n);var C={};h(C,{useFirstChildSize:()=>O,useSize:()=>w});module.exports=E(C);var u=require("react"),c=require("rxjs");const w=n=>{const e=(0,u.useRef)(null),[r,i]=(0,u.useState)(void 0);return(0,u.useLayoutEffect)(()=>{if(!e.current)return;const t=()=>{if(e.current){const d=e.current.getBoundingClientRect()[n];i(d)}};t();const s=new ResizeObserver(()=>{t()});return s.observe(e.current),window.addEventListener("resize",t),()=>{s.disconnect(),window.removeEventListener("resize",t)}},[n]),{ref:e,size:r}},O=n=>{const e=(0,u.useRef)(null),[r,i]=(0,u.useState)();return(0,u.useEffect)(()=>{!e.current||!e.current.children[0]||(!r||r.length===0)&&i([e.current.getBoundingClientRect()[n],e.current.children[0].getBoundingClientRect()[n]])},[]),(0,u.useEffect)(()=>{if(!e.current||!e.current.children[0])return;const t=new MutationObserver((o,M)=>{o.forEach(S=>{if(!e.current||!r||!e.current.children[0])return;const a=e.current.getBoundingClientRect()[n];i([a,e.current.children[0].getBoundingClientRect()[n]])})});t.observe(e.current,{childList:!0,subtree:!0});let s=!1;const d=(0,c.fromEvent)(window,"resize").pipe((0,c.distinctUntilChanged)(),(0,c.filter)(()=>document.activeElement?.tagName!=="INPUT"&&!s)).subscribe(o=>{!e.current||!e.current.children[0]||i([e.current.getBoundingClientRect()[n],e.current.children[0].getBoundingClientRect()[n]])}),f=(0,c.fromEvent)(document,"focusout").pipe((0,c.auditTime)(1e3),(0,c.filter)(o=>document.activeElement?.tagName!=="INPUT")).subscribe({next:()=>{s&&(s=!1)}}),l=(0,c.fromEvent)(document,"focusin").subscribe({next:o=>s=o.target.tagName==="INPUT"});return()=>{d.unsubscribe(),f.unsubscribe(),l.unsubscribe(),t.disconnect()}},[n,r]),{ref:e,sizes:r}};0&&(module.exports={useFirstChildSize,useSize});