@byeolnaerim/flex-layout 0.0.2

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 (10) hide show
  1. package/LICENSE +201 -0
  2. package/dist/index.cjs +865 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.css +471 -0
  5. package/dist/index.css.map +1 -0
  6. package/dist/index.d.cts +287 -0
  7. package/dist/index.d.ts +287 -0
  8. package/dist/index.js +816 -0
  9. package/dist/index.js.map +1 -0
  10. package/package.json +87 -0
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/flex-layout/styles/FlexLayout.module.css","../src/flex-layout/styles/listScroll.module.css"],"sourcesContent":[".flex-layout {\n display: flex;\n height: 100%;\n width: 100%;\n overflow: auto;\n overflow-wrap: revert;\n position: relative;\n /* -ms-overflow-style: none;\n scrollbar-width: none; */\n /* &::-webkit-scrollbar {\n display: none;\n } */\n &[data-direction='column'] {\n flex-direction: column;\n & > .flex-resize-panel {\n height: 4px;\n width: auto;\n cursor: ns-resize;\n &:hover > .hover,\n &:hover > .hover[data-is_hover],\n &:active > .hover {\n height: 3px;\n width: 100%;\n }\n }\n & > .flex-container > .flex-content-fit-wrapper {\n width: 100%;\n height: fit-content;\n & > * {\n width: 100%;\n height: fit-content;\n }\n }\n }\n\n &[data-direction='row'] {\n flex-direction: row;\n & > .flex-resize-panel {\n width: 4px;\n height: auto;\n cursor: ew-resize;\n &:hover > .hover,\n &:hover > .hover[data-is_hover],\n &:active > .hover {\n width: 3px;\n height: 100%;\n }\n }\n & > .flex-container > .flex-content-fit-wrapper {\n width: fit-content;\n height: 100%;\n & > * {\n width: fit-content;\n height: 100%;\n }\n }\n }\n & > .flex-container {\n overflow: hidden;\n box-sizing: border-box;\n &[data-is_resize_panel='true'] {\n flex: 1 1 0%;\n }\n &[data-is_resize_panel='false'] {\n flex: 0 0 0%;\n }\n & > *:not(.flex-content-fit-wrapper) {\n width: 100%;\n height: 100%;\n }\n }\n & .flex-resize-panel {\n background-color: rgb(115 115 115);\n z-index: 1001;\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 0 0 0.1%;\n position: relative;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n right: 0;\n bottom: 0;\n\n &:hover,\n &:active {\n animation-name: drag-panel-hover;\n animation-fill-mode: forwards;\n animation-direction: normal;\n animation-duration: 0.3s;\n animation-iteration-count: 1;\n animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);\n }\n\n &:hover > .hover,\n &:hover > .hover[data-is_hover],\n &:active > .hover {\n background-color: #0066ffb5;\n z-index: 3002;\n position: absolute;\n display: block;\n opacity: 1;\n visibility: inherit;\n transition: all 1s;\n animation-name: drag-panel-hover-highlight;\n animation-fill-mode: forwards;\n animation-direction: normal;\n animation-duration: 0.3s;\n animation-iteration-count: 1;\n animation-timing-function: cubic-bezier(1, -0.37, 0.73, 0.8);\n }\n\n & > .hover {\n opacity: 0;\n visibility: hidden;\n transition: all 1s;\n }\n &.bottom-cylinder {\n &::after {\n border-bottom-left-radius: 15px;\n border-bottom-right-radius: 15px;\n bottom: 100%;\n }\n }\n &.bottom-cylinder-reverse {\n &::after {\n border-top-left-radius: 15px;\n border-top-right-radius: 15px;\n bottom: 100%;\n }\n }\n &.top-cylinder {\n border-bottom-left-radius: 15px;\n border-bottom-right-radius: 15px;\n }\n &.right-cylinder {\n &::after {\n border-top-right-radius: 15px;\n border-bottom-right-radius: 15px;\n left: 100%;\n }\n }\n &.left-cylinder {\n &::after {\n right: 100%;\n }\n }\n &.bottom-cylinder,\n &.bottom-cylinder-reverse,\n &.top-cylinder,\n &.left-cylinder,\n &.right-cylinder {\n &::after {\n background-color: hsla(0, 0%, 54%, 0.32);\n content: ' ';\n position: absolute;\n z-index: 3002;\n }\n &:hover,\n &:hover::after,\n &:active,\n &:active::after {\n background-color: rgb(0 102 255 / 45%);\n transition: background-color 1s;\n }\n }\n &.bottom-cylinder,\n &.top-cylinder,\n &.bottom-cylinder-reverse {\n &::after {\n height: 1.1rem;\n width: 60%;\n }\n &:not(.bottom-cylinder-reverse)::after {\n top: 0;\n }\n }\n &.left-cylinder,\n &.right-cylinder {\n &::after {\n width: 1.1rem;\n height: 60%;\n }\n }\n }\n}\n\n@keyframes drag-panel-hover {\n 0% {\n background-color: #b1b1b1d6;\n }\n\n 10% {\n background-color: #b1b1b1ba;\n }\n\n 20% {\n background-color: #b1b1b194;\n }\n\n 40% {\n background-color: #b1b1b17d;\n }\n\n 60% {\n background-color: #b1b1b152;\n }\n\n 80% {\n background-color: #b1b1b130;\n }\n\n 100% {\n background-color: #b1b1b100;\n animation-play-state: paused;\n }\n}\n\n@keyframes drag-panel-hover-highlight {\n 0% {\n opacity: 0;\n }\n\n 10% {\n opacity: 0.1;\n }\n\n 20% {\n opacity: 0.2;\n }\n\n 40% {\n opacity: 0.4;\n }\n\n 60% {\n opacity: 0.6;\n }\n\n 80% {\n opacity: 0.8;\n }\n\n 100% {\n opacity: 1;\n animation-play-state: paused;\n }\n}\n\n.flex-split-screen {\n width: 100%;\n height: 100%;\n position: relative;\n & .flex-split-screen-boundary-container {\n position: absolute;\n font-family: Arial, sans-serif;\n transition:\n background-color 0.3s,\n border-color 0.3s;\n color: #00acc1;\n border: 2px dashed #00acc1;\n border-radius: 10px;\n background-color: #0014ff17;\n font-size: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n z-index: 9001;\n }\n & .flex-split-screen-drag-box-title-wrapper-sticky {\n position: sticky;\n top: 0;\n z-index: 2001;\n background: #f0f0f0;\n }\n & .flex-split-screen-drag-box-title-wrapper {\n html[data-color-scheme='dark'] & {\n background: #3c3c3c;\n box-shadow: 0px 1px 20px 0px #1e1e1e;\n }\n html[data-color-scheme='light'] & {\n background: #edf1f5;\n box-shadow: 0px 1px 20px 0px #e5e5e5;\n }\n scrollbar-width: initial;\n scrollbar-color: initial;\n display: flex;\n justify-content: space-between;\n transition:\n background 0.3s,\n color 0.3s,\n box-shadow 0.3s;\n position: relative;\n border-bottom: 1px solid #e5e5e5;\n & .flex-split-screen-drag-box-title-container {\n display: flex;\n width: 100%;\n background: inherit;\n }\n }\n}\n.flex-split-screen-drag-box-title-item {\n display: flex;\n align-items: baseline;\n padding-right: 0.5rem;\n padding-left: 0.1rem;\n &:last-child:not(:first-child) {\n border-right: 2px solid #00000012;\n }\n &:not(.active) {\n box-shadow: inset 0 0 20px 20px #00000000;\n border-bottom: 1px solid #007fff40;\n }\n &:hover {\n html[data-color-scheme='dark'] & {\n background: #494949;\n }\n html[data-color-scheme='light'] & {\n background: #e0e0e0;\n }\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n &:active {\n box-shadow: inset 0px 0px 17px 0px #00000029;\n transform: scale(0.97);\n }\n & button {\n background: none;\n border: none;\n color: #bbbbbb;\n font-weight: bold;\n font-family: none;\n font-size: 0.9rem;\n cursor: pointer;\n padding: 0 0.25rem;\n }\n &.active {\n html[data-color-scheme='dark'] & {\n color: #b9af3a;\n }\n html[data-color-scheme='light'] & {\n color: #494300;\n }\n font-weight: bold;\n box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);\n & button {\n color: #5f5f5f;\n }\n }\n}\n.flex-split-screen-drag-box-title-more {\n display: flex;\n flex-direction: column;\n line-height: 0.3;\n padding: 0rem 0.65rem 0.5rem;\n font-size: 1.2rem;\n font-weight: bold;\n border: none;\n background: none;\n color: black;\n justify-content: space-evenly;\n cursor: pointer;\n background: inherit;\n &:hover {\n background: #797979;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n &:active {\n box-shadow: inset 0px 0px 17px 0px #00000029;\n transform: scale(0.97);\n }\n}\n.flex-split-screen-drag-box {\n align-self: center;\n -webkit-touch-callout: none; /* iOS */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror */\n -moz-user-select: none; /* Firefox */\n -ms-user-select: none; /* IE 10+ */\n user-select: none; /* Standard syntax */\n /* pointer-events: none; */\n -webkit-tap-highlight-color: transparent;\n /* touch-action: none; */\n -webkit-touch-callout: none;\n}\n.flex-split-screen-drag-box-clone {\n -webkit-touch-callout: none; /* iOS */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror */\n -moz-user-select: none; /* Firefox */\n -ms-user-select: none; /* IE 10+ */\n user-select: none; /* Standard syntax */\n /* pointer-events: none; */\n -webkit-tap-highlight-color: transparent;\n /* touch-action: none; */\n -webkit-touch-callout: none;\n\n display: flex;\n background-color: #adadad;\n flex-direction: column;\n padding: 0.2rem 0.4rem;\n border-radius: 7px;\n line-height: 99%;\n z-index: 9001;\n & span:first-child {\n font-weight: bold;\n font-size: 0.85rem;\n }\n & span:last-child {\n font-size: 0.75rem;\n }\n}\n",".default-scroll {\r\n overflow: auto;\r\n}\r\n.list-scroll {\r\n position: relative;\r\n flex-wrap: nowrap;\r\n text-wrap: nowrap;\r\n white-space: nowrap;\r\n scroll-snap-type: x mandatory;\r\n scroll-behavior: smooth;\r\n scrollbar-gutter: stable both-edges;\r\n &.y {\r\n overflow-y: scroll;\r\n overflow-x: clip;\r\n padding-left: 0.15rem;\r\n padding-right: 0.4rem;\r\n &:not(:hover) {\r\n padding-right: 0.4rem;\r\n padding-top: 0.4rem;\r\n }\r\n &:hover {\r\n padding-right: 0;\r\n padding-left: top;\r\n }\r\n }\r\n\r\n &.x {\r\n overflow-y: clip;\r\n overflow-x: scroll;\r\n padding-top: 0.15rem;\r\n padding-bottom: 0.4rem;\r\n &:not(:hover) {\r\n padding-bottom: 0.4rem;\r\n padding-left: 0.4rem;\r\n }\r\n &:hover {\r\n padding-bottom: 0;\r\n padding-left: 0;\r\n }\r\n }\r\n\r\n &.none {\r\n scrollbar-width: none !important;\r\n\r\n &::-webkit-scrollbar {\r\n display: none !important;\r\n }\r\n }\r\n\r\n &::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n &.show-scroll::-webkit-scrollbar,\r\n &:hover::-webkit-scrollbar {\r\n scrollbar-width: thin;\r\n display: initial;\r\n width: 0.45rem;\r\n height: 0.45rem;\r\n }\r\n\r\n &.show-scroll::-webkit-scrollbar-thumb,\r\n &:hover::-webkit-scrollbar-thumb {\r\n background: #222; /* 스크롤 위치 */\r\n border-radius: 6px;\r\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); /* 입체감 있는 그림자 */\r\n transition:\r\n background 0.3s ease,\r\n box-shadow 0.3s ease;\r\n }\r\n\r\n &.show-scroll::-webkit-scrollbar-thumb:hover,\r\n &.show-scroll::-webkit-scrollbar-thumb:active,\r\n &:hover::-webkit-scrollbar-thumb:hover {\r\n background: linear-gradient(145deg, #ffecec, #f1f1f1);\r\n /* 호버 시 밝아지는 효과 */\r\n }\r\n\r\n &.show-scroll::-webkit-scrollbar-track,\r\n &:hover::-webkit-scrollbar-track {\r\n background: linear-gradient(145deg, #989898, #7c7c7c);\r\n border-radius: 6px;\r\n box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* 트랙 내부에 부드러운 그림자 */\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,287 @@
1
+ import * as React$1 from 'react';
2
+ import { HTMLAttributes, MouseEvent, TouchEvent, CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
3
+ import * as rxjs from 'rxjs';
4
+ import { Subject, BehaviorSubject } from 'rxjs';
5
+
6
+ interface FlexLayoutSplitScreenDragBoxProps<E extends HTMLElement = HTMLElement> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
7
+ onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
8
+ onTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;
9
+ dropEndCallback?: ({ x, y, containerName, }: {
10
+ x: number;
11
+ y: number;
12
+ containerName: string;
13
+ }) => void;
14
+ style?: CSSProperties;
15
+ navigationTitle?: string;
16
+ targetComponent?: ReactElement;
17
+ dropDocumentOutsideOption?: DropDocumentOutsideOption;
18
+ children: ReactNode;
19
+ containerName: string;
20
+ screenKey?: string;
21
+ isBlockingActiveInput?: boolean;
22
+ customData?: Record<string, string | number | boolean | undefined>;
23
+ scrollTargetRef?: RefObject<E>;
24
+ }
25
+ interface DropDocumentOutsideOption {
26
+ openUrl: string;
27
+ widthRatio?: number;
28
+ heightRatio?: number;
29
+ isNewTap?: boolean;
30
+ }
31
+
32
+ type FlexLayoutSplitScreenProps = {
33
+ layoutName: string;
34
+ containerName: string;
35
+ children: ReactElement;
36
+ navigationTitle: string;
37
+ dropDocumentOutsideOption?: DropDocumentOutsideOption;
38
+ screenKey?: string;
39
+ };
40
+
41
+ interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {
42
+ keyName: string;
43
+ className?: string;
44
+ direction?: "x" | "y";
45
+ isDefaultScrollStyle?: boolean;
46
+ }
47
+
48
+ type SubjectMap<T> = Record<string, Subject<T>>;
49
+ interface ContainerStateRequest {
50
+ mode: "toggle" | "open" | "close";
51
+ initOpenState?: boolean;
52
+ onOpen?: () => void;
53
+ onClose?: () => void;
54
+ openOption?: {
55
+ isPrevSizeOpen?: boolean;
56
+ isResize?: boolean;
57
+ openGrowImportant?: number;
58
+ };
59
+ closeOption?: {
60
+ isResize?: boolean;
61
+ isDsiabledResizePanel?: boolean;
62
+ };
63
+ }
64
+ interface ContainerState {
65
+ isOpen: boolean;
66
+ targetContainer: HTMLElement;
67
+ grow: number;
68
+ }
69
+ declare const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest>;
70
+ declare const containerSpreadSubjectMap: SubjectMap<ContainerState>;
71
+ declare const ContainerOpenCloseProvider: ({ layoutName, containerName, sizeName, }: {
72
+ layoutName: string;
73
+ containerName: string;
74
+ sizeName: "width" | "height";
75
+ }) => null;
76
+ declare const useContainers: (layoutName: string) => HTMLElement[];
77
+ declare const useLayoutName: (containerName: string) => string | undefined;
78
+ declare const useDecompositionLayout: ({ layoutName: initialLayoutName, containerName, }: {
79
+ layoutName?: string;
80
+ containerName: string;
81
+ }) => {
82
+ layout: HTMLElement[];
83
+ container: HTMLElement | undefined;
84
+ resizePanel: HTMLElement | undefined;
85
+ };
86
+ declare const useContainerSize: (containerName: string) => {
87
+ size: {
88
+ width: number;
89
+ height: number;
90
+ } | undefined;
91
+ };
92
+ declare const useDoubleClick: (containerName: string, opt: ContainerStateRequest) => {
93
+ isOpen: boolean | undefined;
94
+ isDoubleClick: boolean | undefined;
95
+ setIsDoubleClick: React$1.Dispatch<React$1.SetStateAction<boolean | undefined>>;
96
+ };
97
+
98
+ interface DragStateType {
99
+ isDragging: boolean;
100
+ isDrop: boolean;
101
+ navigationTitle?: string;
102
+ children?: ReactElement;
103
+ containerName: string;
104
+ x: number;
105
+ y: number;
106
+ dropDocumentOutsideOption?: DropDocumentOutsideOption;
107
+ dropEndCallback?: ({ x, y, containerName, }: {
108
+ x: number;
109
+ y: number;
110
+ containerName: string;
111
+ }) => void;
112
+ screenKey?: string;
113
+ customData?: Record<string, string | number | boolean | undefined>;
114
+ }
115
+ type PositionName = "centerBoundary" | "leftBoundary" | "rightBoundary" | "topBoundary" | "bottomBoundary";
116
+ interface DragStateResultType extends DragStateType {
117
+ positionName: PositionName;
118
+ isOver: boolean;
119
+ }
120
+ declare const dragState: Subject<DragStateType>;
121
+ declare const useDragCapture: (targetRef: RefObject<HTMLElement | null>) => DragStateResultType | null;
122
+ interface DropTargetComponent {
123
+ containerName: string;
124
+ component: ReactElement;
125
+ navigationTitle?: string;
126
+ dropDocumentOutsideOption?: DropDocumentOutsideOption;
127
+ screenKey: string;
128
+ }
129
+ type DropPositionOrderName = "before" | "center" | "after";
130
+ interface DropMovementEventType {
131
+ state: "remove" | "append" | "change";
132
+ targetParentLayoutName: string;
133
+ targetLayoutName: string;
134
+ targetContainerName: string;
135
+ targetComponent?: ReactElement;
136
+ nextContainerName?: string;
137
+ parentOrderName?: DropPositionOrderName;
138
+ orderName?: DropPositionOrderName;
139
+ x?: number;
140
+ y?: number;
141
+ dropEndCallback?: ({ x, y, containerName, }: {
142
+ x: number;
143
+ y: number;
144
+ containerName: string;
145
+ }) => void;
146
+ dropTargetComponentEvent?: DropTargetComponentEvent;
147
+ }
148
+ interface DropTargetComponentEvent extends Omit<DropTargetComponent, "containerName" | "component"> {
149
+ direction: "row" | "column";
150
+ }
151
+ declare const dropMovementEventSubject: Subject<DropMovementEventType>;
152
+ declare const allSplitScreenCount: BehaviorSubject<number>;
153
+ declare const useDragEvents: ({ isBlockingActiveInput, }: {
154
+ isBlockingActiveInput?: boolean;
155
+ }) => {
156
+ handleStart: ({ event: _event, dragStartCallback, }: {
157
+ event: React.MouseEvent | React.TouchEvent | Event;
158
+ dragStartCallback: ({ x, y }: {
159
+ x: number;
160
+ y: number;
161
+ }) => void;
162
+ }) => void;
163
+ handleMove: ({ event: _event, notDragCallback, dragStartCallback, moveingCallback, }: {
164
+ event: React.MouseEvent | React.TouchEvent | Event;
165
+ notDragCallback?: ({ x, y }: {
166
+ x: number;
167
+ y: number;
168
+ }) => void;
169
+ dragStartCallback: ({ x, y }: {
170
+ x: number;
171
+ y: number;
172
+ }) => void;
173
+ moveingCallback: ({ x, y }: {
174
+ x: number;
175
+ y: number;
176
+ }) => void;
177
+ }) => void;
178
+ handleEnd: ({ event: _event, dragEndCallback, }: {
179
+ event: React.MouseEvent | React.TouchEvent | Event;
180
+ dragEndCallback: ({ x, y }: {
181
+ x: number;
182
+ y: number;
183
+ }) => void;
184
+ }) => void;
185
+ };
186
+ type FolderEventType = {
187
+ type: "new" | "sort" | "title" | "delete" | "insert" | "update" | "next";
188
+ isFolder: boolean;
189
+ title: string;
190
+ sort?: number;
191
+ parentId?: string;
192
+ id?: string;
193
+ newData?: any;
194
+ };
195
+ declare const folderEventSubject: Subject<FolderEventType>;
196
+ declare const setFolderEvent: (newValue: FolderEventType) => void;
197
+ declare const useFolderEvent: () => {
198
+ folderEvent: FolderEventType | null;
199
+ };
200
+
201
+ interface ScrollPosition {
202
+ x: number;
203
+ y: number;
204
+ }
205
+ declare const scrollPositions: Record<string, ScrollPosition>;
206
+ /**
207
+ * 스크롤 위치 업데이트 함수
208
+ *
209
+ * 기존: 항상 store.next()가 호출됨 → 바뀌지 않았다면 건너뛰도록 변경
210
+ */
211
+ declare const setScrollPosition: (layoutName: string, position: ScrollPosition) => void;
212
+ /**
213
+ * 스크롤 위치 구독
214
+ */
215
+ declare const getScrollPosition: (layoutName: string) => rxjs.Observable<ScrollPosition>;
216
+ declare const removeScrollPosition: (layoutName: string) => void;
217
+ type SplitScreenComponents = {
218
+ afterDropTargetComponent: DropTargetComponent[];
219
+ beforeDropTargetComponent: DropTargetComponent[];
220
+ centerDropTargetComponent: DropTargetComponent[];
221
+ direction: "row" | "column";
222
+ };
223
+ type LayoutSplitScreenState = Record<string, Record<string, SplitScreenComponents>>;
224
+ declare const layoutSplitScreenStore: BehaviorSubject<LayoutSplitScreenState>;
225
+ declare const setSplitScreen: (rootName: string, layoutName: string, newComponents: SplitScreenComponents) => void;
226
+ declare const resetRootSplitScreen: (rootName: string) => void;
227
+ declare const removeSplitScreenChild: (rootName: string, layoutName: string) => void;
228
+ declare const getCurrentSplitScreenComponents: (rootName: string, layoutName: string) => SplitScreenComponents | undefined;
229
+ declare const getSplitScreen: (rootName: string, layoutName: string) => rxjs.Observable<SplitScreenComponents>;
230
+ type RefStore = {
231
+ [layoutName: string]: {
232
+ [containerName: string]: RefObject<HTMLElement | null>;
233
+ };
234
+ };
235
+ declare const flexContainerStore: BehaviorSubject<RefStore>;
236
+ declare const flexResizePanelStore: BehaviorSubject<RefStore>;
237
+ /**
238
+ * ref를 업데이트하는 함수
239
+ * - 기존: 무조건 next() → 새/이전 상태 비교 후 다를 경우에만 next()
240
+ */
241
+ declare const setContainerRef: <T extends HTMLElement>(layoutName: string, containerName: string, ref: React.RefObject<T | null> | null) => void;
242
+ declare const setResizePanelRef: <T extends HTMLElement>(layoutName: string, containerName: string, ref: React.RefObject<T | null> | null) => void;
243
+ declare const getLayoutInfos: (layoutName: string) => rxjs.Observable<{
244
+ container: {
245
+ [containerName: string]: RefObject<HTMLElement | null>;
246
+ };
247
+ resizePanel: {
248
+ [containerName: string]: RefObject<HTMLElement | null>;
249
+ };
250
+ }>;
251
+ declare const getContainerRef: ({ containerName, layoutName, }: {
252
+ containerName: string;
253
+ layoutName?: string;
254
+ }) => rxjs.Observable<RefObject<HTMLElement | null> | undefined>;
255
+ declare const getResizePanelRef: ({ containerName, layoutName, }: {
256
+ containerName: string;
257
+ layoutName?: string;
258
+ }) => rxjs.Observable<RefObject<HTMLElement | null> | undefined>;
259
+
260
+ declare function isDocumentOut({ x, y }: {
261
+ x: number;
262
+ y: number;
263
+ }): boolean | undefined;
264
+ declare function getClientXy(event: Event): {
265
+ clientX: number;
266
+ clientY: number;
267
+ } | undefined;
268
+ declare function isOverMove(elementSize: number, elementMinSize: number): boolean;
269
+ declare function findNotCloseFlexContent(target: HTMLElement | Element | null, direction: 'previousElementSibling' | 'nextElementSibling'): HTMLElement | null;
270
+ declare function remain(flexContainerList: Array<HTMLElement>): Promise<unknown>;
271
+ declare function resize(list: Array<HTMLElement>, totalGrow: number): Promise<unknown>;
272
+ declare function mathWeight(totalCount: number, totalGrow: number): number;
273
+ declare function mathGrow(childSize: number, parentSize: number, containerCount: number): number;
274
+ declare function getGrow(growTarget: HTMLElement | Element): number;
275
+ declare function closeFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isResize, isDsiabledResizePanel, sizeName, }: {
276
+ isResize?: boolean;
277
+ isDsiabledResizePanel?: boolean;
278
+ sizeName: 'width' | 'height';
279
+ }): Promise<unknown>;
280
+ declare function openFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isPrevSizeOpen, isResize, openGrowImportant, sizeName, }: {
281
+ isPrevSizeOpen?: boolean;
282
+ isResize?: boolean;
283
+ openGrowImportant?: number;
284
+ sizeName?: 'width' | 'height';
285
+ }): Promise<unknown>;
286
+
287
+ export { ContainerOpenCloseProvider, type DragStateResultType, type DragStateType, type DropDocumentOutsideOption, type DropMovementEventType, type DropPositionOrderName, type DropTargetComponent, type DropTargetComponentEvent, type FlexLayoutSplitScreenDragBoxProps, type FlexLayoutSplitScreenProps, type FlexLayoutSplitScreenScrollBoxProps, type FolderEventType, type LayoutSplitScreenState, type PositionName, type ScrollPosition, type SplitScreenComponents, type SubjectMap, allSplitScreenCount, closeFlex, containerOpenCloseSubjectMap, containerSpreadSubjectMap, dragState, dropMovementEventSubject, findNotCloseFlexContent, flexContainerStore, flexResizePanelStore, folderEventSubject, getClientXy, getContainerRef, getCurrentSplitScreenComponents, getGrow, getLayoutInfos, getResizePanelRef, getScrollPosition, getSplitScreen, isDocumentOut, isOverMove, layoutSplitScreenStore, mathGrow, mathWeight, openFlex, remain, removeScrollPosition, removeSplitScreenChild, resetRootSplitScreen, resize, scrollPositions, setContainerRef, setFolderEvent, setResizePanelRef, setScrollPosition, setSplitScreen, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useDragCapture, useDragEvents, useFolderEvent, useLayoutName };
package/dist/index.d.ts ADDED
@@ -0,0 +1,287 @@
1
+ import * as React$1 from 'react';
2
+ import { HTMLAttributes, MouseEvent, TouchEvent, CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
3
+ import * as rxjs from 'rxjs';
4
+ import { Subject, BehaviorSubject } from 'rxjs';
5
+
6
+ interface FlexLayoutSplitScreenDragBoxProps<E extends HTMLElement = HTMLElement> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
7
+ onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
8
+ onTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;
9
+ dropEndCallback?: ({ x, y, containerName, }: {
10
+ x: number;
11
+ y: number;
12
+ containerName: string;
13
+ }) => void;
14
+ style?: CSSProperties;
15
+ navigationTitle?: string;
16
+ targetComponent?: ReactElement;
17
+ dropDocumentOutsideOption?: DropDocumentOutsideOption;
18
+ children: ReactNode;
19
+ containerName: string;
20
+ screenKey?: string;
21
+ isBlockingActiveInput?: boolean;
22
+ customData?: Record<string, string | number | boolean | undefined>;
23
+ scrollTargetRef?: RefObject<E>;
24
+ }
25
+ interface DropDocumentOutsideOption {
26
+ openUrl: string;
27
+ widthRatio?: number;
28
+ heightRatio?: number;
29
+ isNewTap?: boolean;
30
+ }
31
+
32
+ type FlexLayoutSplitScreenProps = {
33
+ layoutName: string;
34
+ containerName: string;
35
+ children: ReactElement;
36
+ navigationTitle: string;
37
+ dropDocumentOutsideOption?: DropDocumentOutsideOption;
38
+ screenKey?: string;
39
+ };
40
+
41
+ interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {
42
+ keyName: string;
43
+ className?: string;
44
+ direction?: "x" | "y";
45
+ isDefaultScrollStyle?: boolean;
46
+ }
47
+
48
+ type SubjectMap<T> = Record<string, Subject<T>>;
49
+ interface ContainerStateRequest {
50
+ mode: "toggle" | "open" | "close";
51
+ initOpenState?: boolean;
52
+ onOpen?: () => void;
53
+ onClose?: () => void;
54
+ openOption?: {
55
+ isPrevSizeOpen?: boolean;
56
+ isResize?: boolean;
57
+ openGrowImportant?: number;
58
+ };
59
+ closeOption?: {
60
+ isResize?: boolean;
61
+ isDsiabledResizePanel?: boolean;
62
+ };
63
+ }
64
+ interface ContainerState {
65
+ isOpen: boolean;
66
+ targetContainer: HTMLElement;
67
+ grow: number;
68
+ }
69
+ declare const containerOpenCloseSubjectMap: SubjectMap<ContainerStateRequest>;
70
+ declare const containerSpreadSubjectMap: SubjectMap<ContainerState>;
71
+ declare const ContainerOpenCloseProvider: ({ layoutName, containerName, sizeName, }: {
72
+ layoutName: string;
73
+ containerName: string;
74
+ sizeName: "width" | "height";
75
+ }) => null;
76
+ declare const useContainers: (layoutName: string) => HTMLElement[];
77
+ declare const useLayoutName: (containerName: string) => string | undefined;
78
+ declare const useDecompositionLayout: ({ layoutName: initialLayoutName, containerName, }: {
79
+ layoutName?: string;
80
+ containerName: string;
81
+ }) => {
82
+ layout: HTMLElement[];
83
+ container: HTMLElement | undefined;
84
+ resizePanel: HTMLElement | undefined;
85
+ };
86
+ declare const useContainerSize: (containerName: string) => {
87
+ size: {
88
+ width: number;
89
+ height: number;
90
+ } | undefined;
91
+ };
92
+ declare const useDoubleClick: (containerName: string, opt: ContainerStateRequest) => {
93
+ isOpen: boolean | undefined;
94
+ isDoubleClick: boolean | undefined;
95
+ setIsDoubleClick: React$1.Dispatch<React$1.SetStateAction<boolean | undefined>>;
96
+ };
97
+
98
+ interface DragStateType {
99
+ isDragging: boolean;
100
+ isDrop: boolean;
101
+ navigationTitle?: string;
102
+ children?: ReactElement;
103
+ containerName: string;
104
+ x: number;
105
+ y: number;
106
+ dropDocumentOutsideOption?: DropDocumentOutsideOption;
107
+ dropEndCallback?: ({ x, y, containerName, }: {
108
+ x: number;
109
+ y: number;
110
+ containerName: string;
111
+ }) => void;
112
+ screenKey?: string;
113
+ customData?: Record<string, string | number | boolean | undefined>;
114
+ }
115
+ type PositionName = "centerBoundary" | "leftBoundary" | "rightBoundary" | "topBoundary" | "bottomBoundary";
116
+ interface DragStateResultType extends DragStateType {
117
+ positionName: PositionName;
118
+ isOver: boolean;
119
+ }
120
+ declare const dragState: Subject<DragStateType>;
121
+ declare const useDragCapture: (targetRef: RefObject<HTMLElement | null>) => DragStateResultType | null;
122
+ interface DropTargetComponent {
123
+ containerName: string;
124
+ component: ReactElement;
125
+ navigationTitle?: string;
126
+ dropDocumentOutsideOption?: DropDocumentOutsideOption;
127
+ screenKey: string;
128
+ }
129
+ type DropPositionOrderName = "before" | "center" | "after";
130
+ interface DropMovementEventType {
131
+ state: "remove" | "append" | "change";
132
+ targetParentLayoutName: string;
133
+ targetLayoutName: string;
134
+ targetContainerName: string;
135
+ targetComponent?: ReactElement;
136
+ nextContainerName?: string;
137
+ parentOrderName?: DropPositionOrderName;
138
+ orderName?: DropPositionOrderName;
139
+ x?: number;
140
+ y?: number;
141
+ dropEndCallback?: ({ x, y, containerName, }: {
142
+ x: number;
143
+ y: number;
144
+ containerName: string;
145
+ }) => void;
146
+ dropTargetComponentEvent?: DropTargetComponentEvent;
147
+ }
148
+ interface DropTargetComponentEvent extends Omit<DropTargetComponent, "containerName" | "component"> {
149
+ direction: "row" | "column";
150
+ }
151
+ declare const dropMovementEventSubject: Subject<DropMovementEventType>;
152
+ declare const allSplitScreenCount: BehaviorSubject<number>;
153
+ declare const useDragEvents: ({ isBlockingActiveInput, }: {
154
+ isBlockingActiveInput?: boolean;
155
+ }) => {
156
+ handleStart: ({ event: _event, dragStartCallback, }: {
157
+ event: React.MouseEvent | React.TouchEvent | Event;
158
+ dragStartCallback: ({ x, y }: {
159
+ x: number;
160
+ y: number;
161
+ }) => void;
162
+ }) => void;
163
+ handleMove: ({ event: _event, notDragCallback, dragStartCallback, moveingCallback, }: {
164
+ event: React.MouseEvent | React.TouchEvent | Event;
165
+ notDragCallback?: ({ x, y }: {
166
+ x: number;
167
+ y: number;
168
+ }) => void;
169
+ dragStartCallback: ({ x, y }: {
170
+ x: number;
171
+ y: number;
172
+ }) => void;
173
+ moveingCallback: ({ x, y }: {
174
+ x: number;
175
+ y: number;
176
+ }) => void;
177
+ }) => void;
178
+ handleEnd: ({ event: _event, dragEndCallback, }: {
179
+ event: React.MouseEvent | React.TouchEvent | Event;
180
+ dragEndCallback: ({ x, y }: {
181
+ x: number;
182
+ y: number;
183
+ }) => void;
184
+ }) => void;
185
+ };
186
+ type FolderEventType = {
187
+ type: "new" | "sort" | "title" | "delete" | "insert" | "update" | "next";
188
+ isFolder: boolean;
189
+ title: string;
190
+ sort?: number;
191
+ parentId?: string;
192
+ id?: string;
193
+ newData?: any;
194
+ };
195
+ declare const folderEventSubject: Subject<FolderEventType>;
196
+ declare const setFolderEvent: (newValue: FolderEventType) => void;
197
+ declare const useFolderEvent: () => {
198
+ folderEvent: FolderEventType | null;
199
+ };
200
+
201
+ interface ScrollPosition {
202
+ x: number;
203
+ y: number;
204
+ }
205
+ declare const scrollPositions: Record<string, ScrollPosition>;
206
+ /**
207
+ * 스크롤 위치 업데이트 함수
208
+ *
209
+ * 기존: 항상 store.next()가 호출됨 → 바뀌지 않았다면 건너뛰도록 변경
210
+ */
211
+ declare const setScrollPosition: (layoutName: string, position: ScrollPosition) => void;
212
+ /**
213
+ * 스크롤 위치 구독
214
+ */
215
+ declare const getScrollPosition: (layoutName: string) => rxjs.Observable<ScrollPosition>;
216
+ declare const removeScrollPosition: (layoutName: string) => void;
217
+ type SplitScreenComponents = {
218
+ afterDropTargetComponent: DropTargetComponent[];
219
+ beforeDropTargetComponent: DropTargetComponent[];
220
+ centerDropTargetComponent: DropTargetComponent[];
221
+ direction: "row" | "column";
222
+ };
223
+ type LayoutSplitScreenState = Record<string, Record<string, SplitScreenComponents>>;
224
+ declare const layoutSplitScreenStore: BehaviorSubject<LayoutSplitScreenState>;
225
+ declare const setSplitScreen: (rootName: string, layoutName: string, newComponents: SplitScreenComponents) => void;
226
+ declare const resetRootSplitScreen: (rootName: string) => void;
227
+ declare const removeSplitScreenChild: (rootName: string, layoutName: string) => void;
228
+ declare const getCurrentSplitScreenComponents: (rootName: string, layoutName: string) => SplitScreenComponents | undefined;
229
+ declare const getSplitScreen: (rootName: string, layoutName: string) => rxjs.Observable<SplitScreenComponents>;
230
+ type RefStore = {
231
+ [layoutName: string]: {
232
+ [containerName: string]: RefObject<HTMLElement | null>;
233
+ };
234
+ };
235
+ declare const flexContainerStore: BehaviorSubject<RefStore>;
236
+ declare const flexResizePanelStore: BehaviorSubject<RefStore>;
237
+ /**
238
+ * ref를 업데이트하는 함수
239
+ * - 기존: 무조건 next() → 새/이전 상태 비교 후 다를 경우에만 next()
240
+ */
241
+ declare const setContainerRef: <T extends HTMLElement>(layoutName: string, containerName: string, ref: React.RefObject<T | null> | null) => void;
242
+ declare const setResizePanelRef: <T extends HTMLElement>(layoutName: string, containerName: string, ref: React.RefObject<T | null> | null) => void;
243
+ declare const getLayoutInfos: (layoutName: string) => rxjs.Observable<{
244
+ container: {
245
+ [containerName: string]: RefObject<HTMLElement | null>;
246
+ };
247
+ resizePanel: {
248
+ [containerName: string]: RefObject<HTMLElement | null>;
249
+ };
250
+ }>;
251
+ declare const getContainerRef: ({ containerName, layoutName, }: {
252
+ containerName: string;
253
+ layoutName?: string;
254
+ }) => rxjs.Observable<RefObject<HTMLElement | null> | undefined>;
255
+ declare const getResizePanelRef: ({ containerName, layoutName, }: {
256
+ containerName: string;
257
+ layoutName?: string;
258
+ }) => rxjs.Observable<RefObject<HTMLElement | null> | undefined>;
259
+
260
+ declare function isDocumentOut({ x, y }: {
261
+ x: number;
262
+ y: number;
263
+ }): boolean | undefined;
264
+ declare function getClientXy(event: Event): {
265
+ clientX: number;
266
+ clientY: number;
267
+ } | undefined;
268
+ declare function isOverMove(elementSize: number, elementMinSize: number): boolean;
269
+ declare function findNotCloseFlexContent(target: HTMLElement | Element | null, direction: 'previousElementSibling' | 'nextElementSibling'): HTMLElement | null;
270
+ declare function remain(flexContainerList: Array<HTMLElement>): Promise<unknown>;
271
+ declare function resize(list: Array<HTMLElement>, totalGrow: number): Promise<unknown>;
272
+ declare function mathWeight(totalCount: number, totalGrow: number): number;
273
+ declare function mathGrow(childSize: number, parentSize: number, containerCount: number): number;
274
+ declare function getGrow(growTarget: HTMLElement | Element): number;
275
+ declare function closeFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isResize, isDsiabledResizePanel, sizeName, }: {
276
+ isResize?: boolean;
277
+ isDsiabledResizePanel?: boolean;
278
+ sizeName: 'width' | 'height';
279
+ }): Promise<unknown>;
280
+ declare function openFlex(resizeTarget: HTMLElement, containers: HTMLElement[], { isPrevSizeOpen, isResize, openGrowImportant, sizeName, }: {
281
+ isPrevSizeOpen?: boolean;
282
+ isResize?: boolean;
283
+ openGrowImportant?: number;
284
+ sizeName?: 'width' | 'height';
285
+ }): Promise<unknown>;
286
+
287
+ export { ContainerOpenCloseProvider, type DragStateResultType, type DragStateType, type DropDocumentOutsideOption, type DropMovementEventType, type DropPositionOrderName, type DropTargetComponent, type DropTargetComponentEvent, type FlexLayoutSplitScreenDragBoxProps, type FlexLayoutSplitScreenProps, type FlexLayoutSplitScreenScrollBoxProps, type FolderEventType, type LayoutSplitScreenState, type PositionName, type ScrollPosition, type SplitScreenComponents, type SubjectMap, allSplitScreenCount, closeFlex, containerOpenCloseSubjectMap, containerSpreadSubjectMap, dragState, dropMovementEventSubject, findNotCloseFlexContent, flexContainerStore, flexResizePanelStore, folderEventSubject, getClientXy, getContainerRef, getCurrentSplitScreenComponents, getGrow, getLayoutInfos, getResizePanelRef, getScrollPosition, getSplitScreen, isDocumentOut, isOverMove, layoutSplitScreenStore, mathGrow, mathWeight, openFlex, remain, removeScrollPosition, removeSplitScreenChild, resetRootSplitScreen, resize, scrollPositions, setContainerRef, setFolderEvent, setResizePanelRef, setScrollPosition, setSplitScreen, useContainerSize, useContainers, useDecompositionLayout, useDoubleClick, useDragCapture, useDragEvents, useFolderEvent, useLayoutName };