@byeolnaerim/flex-layout 0.0.7 → 0.0.9

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 (127) hide show
  1. package/dist/flex-layout/components/FlexLayout.cjs +62 -28
  2. package/dist/flex-layout/components/FlexLayout.cjs.map +1 -1
  3. package/dist/flex-layout/components/FlexLayout.js +26 -11
  4. package/dist/flex-layout/components/FlexLayout.js.map +1 -1
  5. package/dist/flex-layout/components/FlexLayoutContainer.cjs +121 -55
  6. package/dist/flex-layout/components/FlexLayoutContainer.cjs.map +1 -1
  7. package/dist/flex-layout/components/FlexLayoutContainer.js +68 -25
  8. package/dist/flex-layout/components/FlexLayoutContainer.js.map +1 -1
  9. package/dist/flex-layout/components/FlexLayoutIFramePane.cjs +68 -0
  10. package/dist/flex-layout/components/FlexLayoutIFramePane.cjs.map +1 -0
  11. package/dist/flex-layout/components/FlexLayoutIFramePane.d.ts +4 -0
  12. package/dist/flex-layout/components/FlexLayoutIFramePane.js +44 -0
  13. package/dist/flex-layout/components/FlexLayoutIFramePane.js.map +1 -0
  14. package/dist/flex-layout/components/FlexLayoutResizePanel.cjs +111 -46
  15. package/dist/flex-layout/components/FlexLayoutResizePanel.cjs.map +1 -1
  16. package/dist/flex-layout/components/FlexLayoutResizePanel.d.ts +1 -1
  17. package/dist/flex-layout/components/FlexLayoutResizePanel.js +68 -27
  18. package/dist/flex-layout/components/FlexLayoutResizePanel.js.map +1 -1
  19. package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs +184 -143
  20. package/dist/flex-layout/components/FlexLayoutSplitScreen.cjs.map +1 -1
  21. package/dist/flex-layout/components/FlexLayoutSplitScreen.js +71 -32
  22. package/dist/flex-layout/components/FlexLayoutSplitScreen.js.map +1 -1
  23. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs +253 -60
  24. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.cjs.map +1 -1
  25. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.d.ts +1 -1
  26. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.js +215 -39
  27. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBox.js.map +1 -1
  28. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.cjs +40 -17
  29. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.cjs.map +1 -1
  30. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js +7 -7
  31. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.js.map +1 -1
  32. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.cjs +44 -21
  33. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.cjs.map +1 -1
  34. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.js +7 -8
  35. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.js.map +1 -1
  36. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.cjs +40 -17
  37. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.cjs.map +1 -1
  38. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.js +5 -6
  39. package/dist/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.js.map +1 -1
  40. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.cjs +53 -29
  41. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.cjs.map +1 -1
  42. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js +14 -10
  43. package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js.map +1 -1
  44. package/dist/flex-layout/components/FlexLayoutStickyBox.cjs +46 -27
  45. package/dist/flex-layout/components/FlexLayoutStickyBox.cjs.map +1 -1
  46. package/dist/flex-layout/components/FlexLayoutStickyBox.d.ts +1 -0
  47. package/dist/flex-layout/components/FlexLayoutStickyBox.js +13 -8
  48. package/dist/flex-layout/components/FlexLayoutStickyBox.js.map +1 -1
  49. package/dist/flex-layout/components/index.cjs +54 -49
  50. package/dist/flex-layout/components/index.cjs.map +1 -1
  51. package/dist/flex-layout/components/index.js +16 -8
  52. package/dist/flex-layout/components/index.js.map +1 -1
  53. package/dist/flex-layout/hooks/index.cjs +23 -19
  54. package/dist/flex-layout/hooks/index.cjs.map +1 -1
  55. package/dist/flex-layout/hooks/index.js +2 -3
  56. package/dist/flex-layout/hooks/index.js.map +1 -1
  57. package/dist/flex-layout/hooks/useDrag.cjs +136 -79
  58. package/dist/flex-layout/hooks/useDrag.cjs.map +1 -1
  59. package/dist/flex-layout/hooks/useDrag.d.ts +5 -0
  60. package/dist/flex-layout/hooks/useDrag.js +86 -47
  61. package/dist/flex-layout/hooks/useDrag.js.map +1 -1
  62. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs +40 -19
  63. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.cjs.map +1 -1
  64. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js +9 -7
  65. package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js.map +1 -1
  66. package/dist/flex-layout/hooks/useListPaging.cjs +68 -35
  67. package/dist/flex-layout/hooks/useListPaging.cjs.map +1 -1
  68. package/dist/flex-layout/hooks/useListPaging.js +34 -18
  69. package/dist/flex-layout/hooks/useListPaging.js.map +1 -1
  70. package/dist/flex-layout/hooks/useSizes.cjs +45 -23
  71. package/dist/flex-layout/hooks/useSizes.cjs.map +1 -1
  72. package/dist/flex-layout/hooks/useSizes.js +6 -6
  73. package/dist/flex-layout/hooks/useSizes.js.map +1 -1
  74. package/dist/flex-layout/index.cjs +29 -40
  75. package/dist/flex-layout/index.cjs.map +1 -1
  76. package/dist/flex-layout/index.js +5 -6
  77. package/dist/flex-layout/index.js.map +1 -1
  78. package/dist/flex-layout/providers/FlexLayoutContext.cjs +35 -12
  79. package/dist/flex-layout/providers/FlexLayoutContext.cjs.map +1 -1
  80. package/dist/flex-layout/providers/FlexLayoutContext.js +7 -6
  81. package/dist/flex-layout/providers/FlexLayoutContext.js.map +1 -1
  82. package/dist/flex-layout/providers/FlexLayoutHooks.cjs +82 -53
  83. package/dist/flex-layout/providers/FlexLayoutHooks.cjs.map +1 -1
  84. package/dist/flex-layout/providers/FlexLayoutHooks.js +33 -8
  85. package/dist/flex-layout/providers/FlexLayoutHooks.js.map +1 -1
  86. package/dist/flex-layout/providers/index.cjs +21 -12
  87. package/dist/flex-layout/providers/index.cjs.map +1 -1
  88. package/dist/flex-layout/providers/index.js +1 -2
  89. package/dist/flex-layout/providers/index.js.map +1 -1
  90. package/dist/flex-layout/store/FlexLayoutContainerStore.cjs +130 -76
  91. package/dist/flex-layout/store/FlexLayoutContainerStore.cjs.map +1 -1
  92. package/dist/flex-layout/store/FlexLayoutContainerStore.d.ts +1 -0
  93. package/dist/flex-layout/store/FlexLayoutContainerStore.js +63 -38
  94. package/dist/flex-layout/store/FlexLayoutContainerStore.js.map +1 -1
  95. package/dist/flex-layout/store/index.cjs +21 -12
  96. package/dist/flex-layout/store/index.cjs.map +1 -1
  97. package/dist/flex-layout/store/index.js +1 -2
  98. package/dist/flex-layout/store/index.js.map +1 -1
  99. package/dist/flex-layout/types/FlexDirectionTypes.cjs +16 -3
  100. package/dist/flex-layout/types/FlexDirectionTypes.cjs.map +1 -1
  101. package/dist/flex-layout/types/FlexDirectionTypes.js +0 -2
  102. package/dist/flex-layout/types/FlexDirectionTypes.js.map +1 -1
  103. package/dist/flex-layout/types/FlexLayoutTypes.cjs +16 -3
  104. package/dist/flex-layout/types/FlexLayoutTypes.cjs.map +1 -1
  105. package/dist/flex-layout/types/FlexLayoutTypes.d.ts +1 -3
  106. package/dist/flex-layout/types/FlexLayoutTypes.js +0 -2
  107. package/dist/flex-layout/types/FlexLayoutTypes.js.map +1 -1
  108. package/dist/flex-layout/utils/FlexLayoutUtils.cjs +57 -20
  109. package/dist/flex-layout/utils/FlexLayoutUtils.cjs.map +1 -1
  110. package/dist/flex-layout/utils/FlexLayoutUtils.d.ts +4 -4
  111. package/dist/flex-layout/utils/FlexLayoutUtils.js +23 -8
  112. package/dist/flex-layout/utils/FlexLayoutUtils.js.map +1 -1
  113. package/dist/flex-layout/utils/index.cjs +21 -12
  114. package/dist/flex-layout/utils/index.cjs.map +1 -1
  115. package/dist/flex-layout/utils/index.js +1 -2
  116. package/dist/flex-layout/utils/index.js.map +1 -1
  117. package/dist/index.cjs +21 -12
  118. package/dist/index.cjs.map +1 -1
  119. package/dist/index.js +1 -2
  120. package/dist/index.js.map +1 -1
  121. package/dist/metafile-cjs.json +1 -0
  122. package/dist/metafile-esm.json +1 -0
  123. package/dist/types/css.d.cjs +1 -3
  124. package/dist/types/css.d.cjs.map +1 -1
  125. package/dist/types/css.d.js +0 -2
  126. package/dist/types/css.d.js.map +1 -1
  127. package/package.json +5 -1
@@ -1,40 +1,63 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var useDrag = require('../hooks/useDrag');
6
- var styles = require('../styles/FlexLayout.module.css');
7
-
8
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
9
-
10
- var styles__default = /*#__PURE__*/_interopDefault(styles);
11
-
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var FlexLayoutSplitScreenDragBoxItem_exports = {};
30
+ __export(FlexLayoutSplitScreenDragBoxItem_exports, {
31
+ default: () => FlexLayoutSplitScreenDragBoxItem
32
+ });
33
+ module.exports = __toCommonJS(FlexLayoutSplitScreenDragBoxItem_exports);
34
+ var import_jsx_runtime = require("react/jsx-runtime");
35
+ var import_react = require("react");
36
+ var import_useDrag = require("../hooks/useDrag");
37
+ var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
12
38
  function FlexLayoutSplitScreenDragBoxItem({
13
39
  children,
14
40
  onClose,
15
41
  isActive,
16
42
  ...props
17
43
  }) {
18
- react.useEffect(() => {
19
- useDrag.allSplitScreenCount.next(useDrag.allSplitScreenCount.value + 1);
44
+ (0, import_react.useEffect)(() => {
45
+ import_useDrag.allSplitScreenCount.next(import_useDrag.allSplitScreenCount.value + 1);
20
46
  return () => {
21
- if (useDrag.allSplitScreenCount.value <= 1) return;
22
- useDrag.allSplitScreenCount.next(useDrag.allSplitScreenCount.value - 1);
47
+ if (import_useDrag.allSplitScreenCount.value <= 1) return;
48
+ import_useDrag.allSplitScreenCount.next(import_useDrag.allSplitScreenCount.value - 1);
23
49
  };
24
50
  }, []);
25
- return /* @__PURE__ */ jsxRuntime.jsxs(
51
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
26
52
  "div",
27
53
  {
28
- className: `${styles__default.default["flex-split-screen-drag-box-title-item"]} ${isActive ? styles__default.default["active"] : ""}`,
54
+ className: `${import_FlexLayout.default["flex-split-screen-drag-box-title-item"]} ${isActive ? import_FlexLayout.default["active"] : ""}`,
29
55
  ...props,
30
56
  children: [
31
57
  children,
32
- /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
58
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
33
59
  ]
34
60
  }
35
61
  );
36
62
  }
37
-
38
- module.exports = FlexLayoutSplitScreenDragBoxItem;
39
- //# sourceMappingURL=FlexLayoutSplitScreenDragBoxItem.cjs.map
40
63
  //# sourceMappingURL=FlexLayoutSplitScreenDragBoxItem.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.tsx"],"names":["useEffect","allSplitScreenCount","jsxs","styles","jsx"],"mappings":";;;;;;;;;;;AASe,SAAR,gCAAA,CAAkD;AAAA,EACxD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA0C;AACzC,EAAAA,eAAA,CAAU,MAAM;AACf,IAAAC,2BAAA,CAAoB,IAAA,CAAKA,2BAAA,CAAoB,KAAA,GAAQ,CAAC,CAAA;AACtD,IAAA,OAAO,MAAM;AACZ,MAAA,IAAIA,2BAAA,CAAoB,SAAS,CAAA,EAAG;AACpC,MAAAA,2BAAA,CAAoB,IAAA,CAAKA,2BAAA,CAAoB,KAAA,GAAQ,CAAC,CAAA;AAAA,IACvD,CAAA;AAAA,EACD,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,uBACCC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,CAAA,EAAGC,uBAAA,CAAO,uCAAuC,CAAC,IAAI,QAAA,GAAWA,uBAAA,CAAO,QAAQ,CAAA,GAAI,EAAE,CAAA,CAAA;AAAA,MAChG,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACDC,cAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,OAAA,EAAS,CAAC,EAAA,KAAO,OAAA,CAAQ,EAAE,CAAA,EAAG,QAAA,EAAA,GAAA,EAEpD;AAAA;AAAA;AAAA,GACD;AAEF","file":"FlexLayoutSplitScreenDragBoxItem.cjs","sourcesContent":["import { MouseEvent, ReactElement, useEffect } from \"react\";\r\nimport { allSplitScreenCount } from \"../hooks/useDrag\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexLayoutSplitScreenDragBoxProps } from \"./FlexLayoutSplitScreenDragBox\";\r\nexport interface FlexLayoutSplitScreenDragBoxItemProps {\r\n\tchildren: ReactElement<FlexLayoutSplitScreenDragBoxProps>;\r\n\tonClose: (event: MouseEvent<HTMLButtonElement>) => void;\r\n\tisActive: boolean;\r\n}\r\nexport default function FlexLayoutSplitScreenDragBoxItem({\r\n\tchildren,\r\n\tonClose,\r\n\tisActive,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxItemProps) {\r\n\tuseEffect(() => {\r\n\t\tallSplitScreenCount.next(allSplitScreenCount.value + 1);\r\n\t\treturn () => {\r\n\t\t\tif (allSplitScreenCount.value <= 1) return;\r\n\t\t\tallSplitScreenCount.next(allSplitScreenCount.value - 1);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-item\"]} ${isActive ? styles[\"active\"] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\t<button type=\"button\" onClick={(ev) => onClose(ev)}>\r\n\t\t\t\tX\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n"]}
1
+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.tsx"],"sourcesContent":["import { MouseEvent, ReactElement, useEffect } from \"react\";\r\nimport { allSplitScreenCount } from \"../hooks/useDrag\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexLayoutSplitScreenDragBoxProps } from \"./FlexLayoutSplitScreenDragBox\";\r\nexport interface FlexLayoutSplitScreenDragBoxItemProps {\r\n\tchildren: ReactElement<FlexLayoutSplitScreenDragBoxProps>;\r\n\tonClose: (event: MouseEvent<HTMLButtonElement>) => void;\r\n\tisActive: boolean;\r\n}\r\nexport default function FlexLayoutSplitScreenDragBoxItem({\r\n\tchildren,\r\n\tonClose,\r\n\tisActive,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxItemProps) {\r\n\tuseEffect(() => {\r\n\t\tallSplitScreenCount.next(allSplitScreenCount.value + 1);\r\n\t\treturn () => {\r\n\t\t\tif (allSplitScreenCount.value <= 1) return;\r\n\t\t\tallSplitScreenCount.next(allSplitScreenCount.value - 1);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-item\"]} ${isActive ? styles[\"active\"] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\t<button type=\"button\" onClick={(ev) => onClose(ev)}>\r\n\t\t\t\tX\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBE;AAvBF,mBAAoD;AACpD,qBAAoC;AACpC,wBAAmB;AAOJ,SAAR,iCAAkD;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA0C;AACzC,8BAAU,MAAM;AACf,uCAAoB,KAAK,mCAAoB,QAAQ,CAAC;AACtD,WAAO,MAAM;AACZ,UAAI,mCAAoB,SAAS,EAAG;AACpC,yCAAoB,KAAK,mCAAoB,QAAQ,CAAC;AAAA,IACvD;AAAA,EACD,GAAG,CAAC,CAAC;AACL,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,GAAG,kBAAAA,QAAO,uCAAuC,CAAC,IAAI,WAAW,kBAAAA,QAAO,QAAQ,IAAI,EAAE;AAAA,MAChG,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,4CAAC,YAAO,MAAK,UAAS,SAAS,CAAC,OAAO,QAAQ,EAAE,GAAG,eAEpD;AAAA;AAAA;AAAA,EACD;AAEF;","names":["styles"]}
@@ -1,8 +1,7 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useEffect } from 'react';
3
- import { allSplitScreenCount } from '../hooks/useDrag';
4
- import styles from '../styles/FlexLayout.module.css';
5
-
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useEffect } from "react";
3
+ import { allSplitScreenCount } from "../hooks/useDrag";
4
+ import styles from "../styles/FlexLayout.module.css";
6
5
  function FlexLayoutSplitScreenDragBoxItem({
7
6
  children,
8
7
  onClose,
@@ -28,7 +27,7 @@ function FlexLayoutSplitScreenDragBoxItem({
28
27
  }
29
28
  );
30
29
  }
31
-
32
- export { FlexLayoutSplitScreenDragBoxItem as default };
33
- //# sourceMappingURL=FlexLayoutSplitScreenDragBoxItem.js.map
30
+ export {
31
+ FlexLayoutSplitScreenDragBoxItem as default
32
+ };
34
33
  //# sourceMappingURL=FlexLayoutSplitScreenDragBoxItem.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.tsx"],"names":[],"mappings":";;;;;AASe,SAAR,gCAAA,CAAkD;AAAA,EACxD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA0C;AACzC,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,mBAAA,CAAoB,IAAA,CAAK,mBAAA,CAAoB,KAAA,GAAQ,CAAC,CAAA;AACtD,IAAA,OAAO,MAAM;AACZ,MAAA,IAAI,mBAAA,CAAoB,SAAS,CAAA,EAAG;AACpC,MAAA,mBAAA,CAAoB,IAAA,CAAK,mBAAA,CAAoB,KAAA,GAAQ,CAAC,CAAA;AAAA,IACvD,CAAA;AAAA,EACD,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,uBACC,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,CAAA,EAAG,MAAA,CAAO,uCAAuC,CAAC,IAAI,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,EAAE,CAAA,CAAA;AAAA,MAChG,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,OAAA,EAAS,CAAC,EAAA,KAAO,OAAA,CAAQ,EAAE,CAAA,EAAG,QAAA,EAAA,GAAA,EAEpD;AAAA;AAAA;AAAA,GACD;AAEF","file":"FlexLayoutSplitScreenDragBoxItem.js","sourcesContent":["import { MouseEvent, ReactElement, useEffect } from \"react\";\r\nimport { allSplitScreenCount } from \"../hooks/useDrag\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexLayoutSplitScreenDragBoxProps } from \"./FlexLayoutSplitScreenDragBox\";\r\nexport interface FlexLayoutSplitScreenDragBoxItemProps {\r\n\tchildren: ReactElement<FlexLayoutSplitScreenDragBoxProps>;\r\n\tonClose: (event: MouseEvent<HTMLButtonElement>) => void;\r\n\tisActive: boolean;\r\n}\r\nexport default function FlexLayoutSplitScreenDragBoxItem({\r\n\tchildren,\r\n\tonClose,\r\n\tisActive,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxItemProps) {\r\n\tuseEffect(() => {\r\n\t\tallSplitScreenCount.next(allSplitScreenCount.value + 1);\r\n\t\treturn () => {\r\n\t\t\tif (allSplitScreenCount.value <= 1) return;\r\n\t\t\tallSplitScreenCount.next(allSplitScreenCount.value - 1);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-item\"]} ${isActive ? styles[\"active\"] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\t<button type=\"button\" onClick={(ev) => onClose(ev)}>\r\n\t\t\t\tX\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n"]}
1
+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxItem.tsx"],"sourcesContent":["import { MouseEvent, ReactElement, useEffect } from \"react\";\r\nimport { allSplitScreenCount } from \"../hooks/useDrag\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\nimport { FlexLayoutSplitScreenDragBoxProps } from \"./FlexLayoutSplitScreenDragBox\";\r\nexport interface FlexLayoutSplitScreenDragBoxItemProps {\r\n\tchildren: ReactElement<FlexLayoutSplitScreenDragBoxProps>;\r\n\tonClose: (event: MouseEvent<HTMLButtonElement>) => void;\r\n\tisActive: boolean;\r\n}\r\nexport default function FlexLayoutSplitScreenDragBoxItem({\r\n\tchildren,\r\n\tonClose,\r\n\tisActive,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxItemProps) {\r\n\tuseEffect(() => {\r\n\t\tallSplitScreenCount.next(allSplitScreenCount.value + 1);\r\n\t\treturn () => {\r\n\t\t\tif (allSplitScreenCount.value <= 1) return;\r\n\t\t\tallSplitScreenCount.next(allSplitScreenCount.value - 1);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-item\"]} ${isActive ? styles[\"active\"] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t\t<button type=\"button\" onClick={(ev) => onClose(ev)}>\r\n\t\t\t\tX\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":"AAuBE,SAKC,KALD;AAvBF,SAAmC,iBAAiB;AACpD,SAAS,2BAA2B;AACpC,OAAO,YAAY;AAOJ,SAAR,iCAAkD;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAA0C;AACzC,YAAU,MAAM;AACf,wBAAoB,KAAK,oBAAoB,QAAQ,CAAC;AACtD,WAAO,MAAM;AACZ,UAAI,oBAAoB,SAAS,EAAG;AACpC,0BAAoB,KAAK,oBAAoB,QAAQ,CAAC;AAAA,IACvD;AAAA,EACD,GAAG,CAAC,CAAC;AACL,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,GAAG,OAAO,uCAAuC,CAAC,IAAI,WAAW,OAAO,QAAQ,IAAI,EAAE;AAAA,MAChG,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,YAAO,MAAK,UAAS,SAAS,CAAC,OAAO,QAAQ,EAAE,GAAG,eAEpD;AAAA;AAAA;AAAA,EACD;AAEF;","names":[]}
@@ -1,30 +1,53 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var styles = require('../styles/FlexLayout.module.css');
5
-
6
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
7
-
8
- var styles__default = /*#__PURE__*/_interopDefault(styles);
9
-
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var FlexLayoutSplitScreenDragBoxTitleMore_exports = {};
30
+ __export(FlexLayoutSplitScreenDragBoxTitleMore_exports, {
31
+ default: () => FlexLayoutSplitScreenDragBoxTitleMore
32
+ });
33
+ module.exports = __toCommonJS(FlexLayoutSplitScreenDragBoxTitleMore_exports);
34
+ var import_jsx_runtime = require("react/jsx-runtime");
35
+ var import_FlexLayout = __toESM(require("../styles/FlexLayout.module.css"), 1);
10
36
  function FlexLayoutSplitScreenDragBoxTitleMore({
11
37
  className,
12
38
  ...props
13
39
  }) {
14
- return /* @__PURE__ */ jsxRuntime.jsxs(
40
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
15
41
  "button",
16
42
  {
17
43
  ...props,
18
- className: `${styles__default.default["flex-split-screen-drag-box-title-more"]} ${className || ""}`,
44
+ className: `${import_FlexLayout.default["flex-split-screen-drag-box-title-more"]} ${className || ""}`,
19
45
  children: [
20
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." }),
21
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." }),
22
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." })
46
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "." }),
47
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "." }),
48
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "." })
23
49
  ]
24
50
  }
25
51
  );
26
52
  }
27
-
28
- module.exports = FlexLayoutSplitScreenDragBoxTitleMore;
29
- //# sourceMappingURL=FlexLayoutSplitScreenDragBoxTitleMore.cjs.map
30
53
  //# sourceMappingURL=FlexLayoutSplitScreenDragBoxTitleMore.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.tsx"],"names":["jsxs","styles","jsx"],"mappings":";;;;;;;;;AAOe,SAAR,qCAAA,CAAuD;AAAA,EAC7D,SAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA+C;AAC9C,EAAA,uBACCA,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,CAAA,EAAGC,uBAAA,CAAO,uCAAuC,CAAC,CAAA,CAAA,EAAI,aAAa,EAAE,CAAA,CAAA;AAAA,MAEhF,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACPA,cAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACPA,cAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC;AAAA;AAAA;AAAA,GACR;AAEF","file":"FlexLayoutSplitScreenDragBoxTitleMore.cjs","sourcesContent":["import { HTMLAttributes } from \"react\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenDragBoxTitleMoreProps extends Omit<\r\n\tHTMLAttributes<HTMLButtonElement>,\r\n\t\"children\"\r\n> {}\r\nexport default function FlexLayoutSplitScreenDragBoxTitleMore({\r\n\tclassName,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxTitleMoreProps) {\r\n\treturn (\r\n\t\t<button\r\n\t\t\t{...props}\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-more\"]} ${className || \"\"}`}\r\n\t\t>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t</button>\r\n\t);\r\n}\r\n"]}
1
+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenDragBoxTitleMoreProps extends Omit<\r\n\tHTMLAttributes<HTMLButtonElement>,\r\n\t\"children\"\r\n> {}\r\nexport default function FlexLayoutSplitScreenDragBoxTitleMore({\r\n\tclassName,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxTitleMoreProps) {\r\n\treturn (\r\n\t\t<button\r\n\t\t\t{...props}\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-more\"]} ${className || \"\"}`}\r\n\t\t>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t</button>\r\n\t);\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYE;AAXF,wBAAmB;AAMJ,SAAR,sCAAuD;AAAA,EAC7D;AAAA,EACA,GAAG;AACJ,GAA+C;AAC9C,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,kBAAAA,QAAO,uCAAuC,CAAC,IAAI,aAAa,EAAE;AAAA,MAEhF;AAAA,oDAAC,UAAK,eAAC;AAAA,QACP,4CAAC,UAAK,eAAC;AAAA,QACP,4CAAC,UAAK,eAAC;AAAA;AAAA;AAAA,EACR;AAEF;","names":["styles"]}
@@ -1,6 +1,5 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import styles from '../styles/FlexLayout.module.css';
3
-
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import styles from "../styles/FlexLayout.module.css";
4
3
  function FlexLayoutSplitScreenDragBoxTitleMore({
5
4
  className,
6
5
  ...props
@@ -18,7 +17,7 @@ function FlexLayoutSplitScreenDragBoxTitleMore({
18
17
  }
19
18
  );
20
19
  }
21
-
22
- export { FlexLayoutSplitScreenDragBoxTitleMore as default };
23
- //# sourceMappingURL=FlexLayoutSplitScreenDragBoxTitleMore.js.map
20
+ export {
21
+ FlexLayoutSplitScreenDragBoxTitleMore as default
22
+ };
24
23
  //# sourceMappingURL=FlexLayoutSplitScreenDragBoxTitleMore.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.tsx"],"names":[],"mappings":";;;AAOe,SAAR,qCAAA,CAAuD;AAAA,EAC7D,SAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAA+C;AAC9C,EAAA,uBACC,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,WAAW,CAAA,EAAG,MAAA,CAAO,uCAAuC,CAAC,CAAA,CAAA,EAAI,aAAa,EAAE,CAAA,CAAA;AAAA,MAEhF,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACP,GAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,wBACP,GAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC;AAAA;AAAA;AAAA,GACR;AAEF","file":"FlexLayoutSplitScreenDragBoxTitleMore.js","sourcesContent":["import { HTMLAttributes } from \"react\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenDragBoxTitleMoreProps extends Omit<\r\n\tHTMLAttributes<HTMLButtonElement>,\r\n\t\"children\"\r\n> {}\r\nexport default function FlexLayoutSplitScreenDragBoxTitleMore({\r\n\tclassName,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxTitleMoreProps) {\r\n\treturn (\r\n\t\t<button\r\n\t\t\t{...props}\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-more\"]} ${className || \"\"}`}\r\n\t\t>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t</button>\r\n\t);\r\n}\r\n"]}
1
+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\r\nimport styles from \"../styles/FlexLayout.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenDragBoxTitleMoreProps extends Omit<\r\n\tHTMLAttributes<HTMLButtonElement>,\r\n\t\"children\"\r\n> {}\r\nexport default function FlexLayoutSplitScreenDragBoxTitleMore({\r\n\tclassName,\r\n\t...props\r\n}: FlexLayoutSplitScreenDragBoxTitleMoreProps) {\r\n\treturn (\r\n\t\t<button\r\n\t\t\t{...props}\r\n\t\t\tclassName={`${styles[\"flex-split-screen-drag-box-title-more\"]} ${className || \"\"}`}\r\n\t\t>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t\t<span>.</span>\r\n\t\t</button>\r\n\t);\r\n}\r\n"],"mappings":"AAYE,SAIC,KAJD;AAXF,OAAO,YAAY;AAMJ,SAAR,sCAAuD;AAAA,EAC7D;AAAA,EACA,GAAG;AACJ,GAA+C;AAC9C,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,uCAAuC,CAAC,IAAI,aAAa,EAAE;AAAA,MAEhF;AAAA,4BAAC,UAAK,eAAC;AAAA,QACP,oBAAC,UAAK,eAAC;AAAA,QACP,oBAAC,UAAK,eAAC;AAAA;AAAA;AAAA,EACR;AAEF;","names":[]}
@@ -1,16 +1,43 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var rxjs = require('rxjs');
6
- var operators = require('rxjs/operators');
7
- var FlexLayoutContainerStore = require('../store/FlexLayoutContainerStore');
8
- var listScroll = require('../styles/listScroll.module.css');
9
-
10
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
-
12
- var listScroll__default = /*#__PURE__*/_interopDefault(listScroll);
13
-
1
+ "use strict";
2
+ "use client";
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all)
11
+ __defProp(target, name, { get: all[name], enumerable: true });
12
+ };
13
+ var __copyProps = (to, from, except, desc) => {
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from))
16
+ if (!__hasOwnProp.call(to, key) && key !== except)
17
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
+ }
19
+ return to;
20
+ };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
29
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
+ var FlexLayoutSplitScreenScrollBox_exports = {};
31
+ __export(FlexLayoutSplitScreenScrollBox_exports, {
32
+ default: () => FlexLayoutSplitScreenScrollBox_default
33
+ });
34
+ module.exports = __toCommonJS(FlexLayoutSplitScreenScrollBox_exports);
35
+ var import_jsx_runtime = require("react/jsx-runtime");
36
+ var import_react = require("react");
37
+ var import_rxjs = require("rxjs");
38
+ var import_operators = require("rxjs/operators");
39
+ var import_FlexLayoutContainerStore = require("../store/FlexLayoutContainerStore");
40
+ var import_listScroll = __toESM(require("../styles/listScroll.module.css"), 1);
14
41
  const FlexLayoutSplitScreenScrollBox = ({
15
42
  className,
16
43
  children,
@@ -19,33 +46,33 @@ const FlexLayoutSplitScreenScrollBox = ({
19
46
  isDefaultScrollStyle = false,
20
47
  ...props
21
48
  }) => {
22
- const scrollRef = react.useRef(null);
23
- const [isMouseDown, setIsMouseDown] = react.useState(false);
24
- const scrollEventSubject = react.useRef(new rxjs.Subject());
25
- react.useEffect(() => {
26
- const mouseUpSubscribe = rxjs.fromEvent(
49
+ const scrollRef = (0, import_react.useRef)(null);
50
+ const [isMouseDown, setIsMouseDown] = (0, import_react.useState)(false);
51
+ const scrollEventSubject = (0, import_react.useRef)(new import_rxjs.Subject());
52
+ (0, import_react.useEffect)(() => {
53
+ const mouseUpSubscribe = (0, import_rxjs.fromEvent)(
27
54
  window,
28
55
  "mouseup"
29
56
  ).subscribe(() => {
30
57
  setIsMouseDown(false);
31
58
  });
32
- const scrollEventSubscribe = scrollEventSubject.current.pipe(operators.throttleTime(70)).subscribe((position) => {
33
- FlexLayoutContainerStore.setScrollPosition(keyName, position);
59
+ const scrollEventSubscribe = scrollEventSubject.current.pipe((0, import_operators.throttleTime)(70)).subscribe((position) => {
60
+ (0, import_FlexLayoutContainerStore.setScrollPosition)(keyName, position);
34
61
  });
35
- const scrollSubscribe = FlexLayoutContainerStore.getScrollPosition(keyName).pipe(operators.take(1)).subscribe((position) => {
62
+ const scrollSubscribe = (0, import_FlexLayoutContainerStore.getScrollPosition)(keyName).pipe((0, import_operators.take)(1)).subscribe((position) => {
36
63
  if (scrollRef.current && position) {
37
64
  scrollRef.current.scrollLeft = position.x;
38
65
  scrollRef.current.scrollTop = position.y;
39
66
  }
40
67
  });
41
68
  return () => {
42
- FlexLayoutContainerStore.removeScrollPosition(keyName);
69
+ (0, import_FlexLayoutContainerStore.removeScrollPosition)(keyName);
43
70
  mouseUpSubscribe.unsubscribe();
44
71
  scrollSubscribe.unsubscribe();
45
72
  scrollEventSubscribe.unsubscribe();
46
73
  };
47
74
  }, [keyName]);
48
- react.useEffect(() => {
75
+ (0, import_react.useEffect)(() => {
49
76
  if (!scrollRef.current) return;
50
77
  let animationFrameId = null;
51
78
  const handleWheel = (event) => {
@@ -74,7 +101,7 @@ const FlexLayoutSplitScreenScrollBox = ({
74
101
  scrollRef.current?.removeEventListener("wheel", handleWheel);
75
102
  };
76
103
  }, []);
77
- return /* @__PURE__ */ jsxRuntime.jsx(
104
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
105
  "div",
79
106
  {
80
107
  ref: scrollRef,
@@ -96,14 +123,11 @@ const FlexLayoutSplitScreenScrollBox = ({
96
123
  y: scrollRef.current.scrollTop
97
124
  });
98
125
  },
99
- className: `${className || ""} ${isDefaultScrollStyle ? listScroll__default.default["default-scroll"] : listScroll__default.default["list-scroll"]} ${direction ? listScroll__default.default[direction] : ""}`,
126
+ className: `${className || ""} ${isDefaultScrollStyle ? import_listScroll.default["default-scroll"] : import_listScroll.default["list-scroll"]} ${direction ? import_listScroll.default[direction] : ""}`,
100
127
  ...props,
101
128
  children
102
129
  }
103
130
  );
104
131
  };
105
- var FlexLayoutSplitScreenScrollBox_default = react.memo(FlexLayoutSplitScreenScrollBox);
106
-
107
- module.exports = FlexLayoutSplitScreenScrollBox_default;
108
- //# sourceMappingURL=FlexLayoutSplitScreenScrollBox.cjs.map
132
+ var FlexLayoutSplitScreenScrollBox_default = (0, import_react.memo)(FlexLayoutSplitScreenScrollBox);
109
133
  //# sourceMappingURL=FlexLayoutSplitScreenScrollBox.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenScrollBox.tsx"],"names":["useRef","useState","Subject","useEffect","fromEvent","throttleTime","setScrollPosition","getScrollPosition","take","removeScrollPosition","jsx","listScroll","memo"],"mappings":"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","file":"FlexLayoutSplitScreenScrollBox.cjs","sourcesContent":["\"use client\";\r\n\r\nimport { FC, HTMLAttributes, memo, useEffect, useRef, useState } from \"react\";\r\nimport { fromEvent, Subject } from \"rxjs\";\r\nimport { take, throttleTime } from \"rxjs/operators\";\r\nimport {\r\n\tgetScrollPosition,\r\n\tremoveScrollPosition,\r\n\tScrollPosition,\r\n\tsetScrollPosition,\r\n} from \"../store/FlexLayoutContainerStore\";\r\nimport listScroll from \"../styles/listScroll.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {\r\n\tkeyName: string;\r\n\tclassName?: string;\r\n\tdirection?: \"x\" | \"y\";\r\n\tisDefaultScrollStyle?: boolean;\r\n}\r\n\r\nconst FlexLayoutSplitScreenScrollBox: FC<\r\n\tFlexLayoutSplitScreenScrollBoxProps\r\n> = ({\r\n\tclassName,\r\n\tchildren,\r\n\tkeyName,\r\n\tdirection,\r\n\tisDefaultScrollStyle = false,\r\n\t...props\r\n}: FlexLayoutSplitScreenScrollBoxProps) => {\r\n\tconst scrollRef = useRef<HTMLDivElement | null>(null);\r\n\tconst [isMouseDown, setIsMouseDown] = useState<boolean>(false);\r\n\tconst scrollEventSubject = useRef(new Subject<ScrollPosition>());\r\n\r\n\t// const handleScroll = throttle(\r\n\t// (newScrollLeft: number, newScrollTop: number) => {\r\n\t// setScrollPosition(layoutName, {\r\n\t// x: newScrollLeft,\r\n\t// y: newScrollTop,\r\n\t// });\r\n\t// },\r\n\t// 100\r\n\t// ); // 100ms 간격으로 호출\r\n\r\n\tuseEffect(() => {\r\n\t\tconst mouseUpSubscribe = fromEvent<MouseEvent>(\r\n\t\t\twindow,\r\n\t\t\t\"mouseup\",\r\n\t\t).subscribe(() => {\r\n\t\t\tsetIsMouseDown(false);\r\n\t\t});\r\n\r\n\t\t// 스크롤 이벤트 throttling 및 상태 업데이트\r\n\t\tconst scrollEventSubscribe = scrollEventSubject.current\r\n\t\t\t.pipe(throttleTime(70)) // 70ms 간격으로 throttling\r\n\t\t\t.subscribe((position) => {\r\n\t\t\t\tsetScrollPosition(keyName, position);\r\n\t\t\t});\r\n\r\n\t\tconst scrollSubscribe = getScrollPosition(keyName)\r\n\t\t\t.pipe(take(1)) // 한 번만 실행\r\n\t\t\t.subscribe((position) => {\r\n\t\t\t\tif (scrollRef.current && position) {\r\n\t\t\t\t\tscrollRef.current.scrollLeft = position.x;\r\n\t\t\t\t\tscrollRef.current.scrollTop = position.y;\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tremoveScrollPosition(keyName);\r\n\t\t\tmouseUpSubscribe.unsubscribe();\r\n\t\t\tscrollSubscribe.unsubscribe();\r\n\t\t\tscrollEventSubscribe.unsubscribe();\r\n\t\t};\r\n\t}, [keyName]);\r\n\tuseEffect(() => {\r\n\t\tif (!scrollRef.current) return;\r\n\r\n\t\tlet animationFrameId: number | null = null;\r\n\t\tconst handleWheel = (event: WheelEvent) => {\r\n\t\t\tif (!scrollRef.current || direction !== \"x\") return;\r\n\t\t\tif (scrollRef.current.matches(\":hover\")) {\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tconst { deltaY } = event;\r\n\t\t\t\tconst newScrollLeft = scrollRef.current.scrollLeft + deltaY;\r\n\r\n\t\t\t\t// 이미 애니메이션이 예약되어 있으면 취소\r\n\t\t\t\tif (animationFrameId) {\r\n\t\t\t\t\tcancelAnimationFrame(animationFrameId);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tanimationFrameId = requestAnimationFrame(() => {\r\n\t\t\t\t\t// 바로 scrollLeft 값을 업데이트 (smooth 대신,\r\n\t\t\t\t\t// 혹은 native 스크롤로 처리)\r\n\t\t\t\t\tscrollRef.current!.scrollLeft = newScrollLeft;\r\n\t\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\t\tx: newScrollLeft,\r\n\t\t\t\t\t\ty: scrollRef.current!.scrollTop,\r\n\t\t\t\t\t});\r\n\t\t\t\t\tanimationFrameId = null;\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t// 수동으로 이벤트 리스너 추가\r\n\t\tscrollRef.current.addEventListener(\"wheel\", handleWheel, {\r\n\t\t\tpassive: false,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\t// 이벤트 리스너 제거\r\n\t\t\tscrollRef.current?.removeEventListener(\"wheel\", handleWheel);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tref={scrollRef}\r\n\t\t\tonMouseUp={() => setIsMouseDown(false)}\r\n\t\t\tonMouseDown={() => setIsMouseDown(true)}\r\n\t\t\tonMouseMove={(event) => {\r\n\t\t\t\tif (!scrollRef.current || !isMouseDown || direction !== \"x\")\r\n\t\t\t\t\treturn;\r\n\t\t\t\tscrollRef.current.scrollLeft += event.movementX * -1;\r\n\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\tx: scrollRef.current.scrollLeft,\r\n\t\t\t\t\ty: scrollRef.current.scrollTop,\r\n\t\t\t\t});\r\n\t\t\t}}\r\n\t\t\tonScroll={() => {\r\n\t\t\t\tif (!scrollRef.current) return;\r\n\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\tx: scrollRef.current.scrollLeft,\r\n\t\t\t\t\ty: scrollRef.current.scrollTop,\r\n\t\t\t\t});\r\n\t\t\t}}\r\n\t\t\tclassName={`${className || \"\"} ${isDefaultScrollStyle ? listScroll[\"default-scroll\"] : listScroll[\"list-scroll\"]} ${direction ? listScroll[direction] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default memo(FlexLayoutSplitScreenScrollBox);\r\n"]}
1
+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenScrollBox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FC, HTMLAttributes, memo, useEffect, useRef, useState } from \"react\";\r\nimport { fromEvent, Subject } from \"rxjs\";\r\nimport { take, throttleTime } from \"rxjs/operators\";\r\nimport {\r\n\tgetScrollPosition,\r\n\tremoveScrollPosition,\r\n\tScrollPosition,\r\n\tsetScrollPosition,\r\n} from \"../store/FlexLayoutContainerStore\";\r\nimport listScroll from \"../styles/listScroll.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {\r\n\tkeyName: string;\r\n\tclassName?: string;\r\n\tdirection?: \"x\" | \"y\";\r\n\tisDefaultScrollStyle?: boolean;\r\n}\r\n\r\nconst FlexLayoutSplitScreenScrollBox: FC<\r\n\tFlexLayoutSplitScreenScrollBoxProps\r\n> = ({\r\n\tclassName,\r\n\tchildren,\r\n\tkeyName,\r\n\tdirection,\r\n\tisDefaultScrollStyle = false,\r\n\t...props\r\n}: FlexLayoutSplitScreenScrollBoxProps) => {\r\n\tconst scrollRef = useRef<HTMLDivElement | null>(null);\r\n\tconst [isMouseDown, setIsMouseDown] = useState<boolean>(false);\r\n\tconst scrollEventSubject = useRef(new Subject<ScrollPosition>());\r\n\r\n\t// const handleScroll = throttle(\r\n\t// (newScrollLeft: number, newScrollTop: number) => {\r\n\t// setScrollPosition(layoutName, {\r\n\t// x: newScrollLeft,\r\n\t// y: newScrollTop,\r\n\t// });\r\n\t// },\r\n\t// 100\r\n\t// ); // 100ms 간격으로 호출\r\n\r\n\tuseEffect(() => {\r\n\t\tconst mouseUpSubscribe = fromEvent<MouseEvent>(\r\n\t\t\twindow,\r\n\t\t\t\"mouseup\",\r\n\t\t).subscribe(() => {\r\n\t\t\tsetIsMouseDown(false);\r\n\t\t});\r\n\r\n\t\t// 스크롤 이벤트 throttling 및 상태 업데이트\r\n\t\tconst scrollEventSubscribe = scrollEventSubject.current\r\n\t\t\t.pipe(throttleTime(70)) // 70ms 간격으로 throttling\r\n\t\t\t.subscribe((position) => {\r\n\t\t\t\tsetScrollPosition(keyName, position);\r\n\t\t\t});\r\n\r\n\t\tconst scrollSubscribe = getScrollPosition(keyName)\r\n\t\t\t.pipe(take(1)) // 한 번만 실행\r\n\t\t\t.subscribe((position) => {\r\n\t\t\t\tif (scrollRef.current && position) {\r\n\t\t\t\t\tscrollRef.current.scrollLeft = position.x;\r\n\t\t\t\t\tscrollRef.current.scrollTop = position.y;\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tremoveScrollPosition(keyName);\r\n\t\t\tmouseUpSubscribe.unsubscribe();\r\n\t\t\tscrollSubscribe.unsubscribe();\r\n\t\t\tscrollEventSubscribe.unsubscribe();\r\n\t\t};\r\n\t}, [keyName]);\r\n\tuseEffect(() => {\r\n\t\tif (!scrollRef.current) return;\r\n\r\n\t\tlet animationFrameId: number | null = null;\r\n\t\tconst handleWheel = (event: WheelEvent) => {\r\n\t\t\tif (!scrollRef.current || direction !== \"x\") return;\r\n\t\t\tif (scrollRef.current.matches(\":hover\")) {\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tconst { deltaY } = event;\r\n\t\t\t\tconst newScrollLeft = scrollRef.current.scrollLeft + deltaY;\r\n\r\n\t\t\t\t// 이미 애니메이션이 예약되어 있으면 취소\r\n\t\t\t\tif (animationFrameId) {\r\n\t\t\t\t\tcancelAnimationFrame(animationFrameId);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tanimationFrameId = requestAnimationFrame(() => {\r\n\t\t\t\t\t// 바로 scrollLeft 값을 업데이트 (smooth 대신,\r\n\t\t\t\t\t// 혹은 native 스크롤로 처리)\r\n\t\t\t\t\tscrollRef.current!.scrollLeft = newScrollLeft;\r\n\t\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\t\tx: newScrollLeft,\r\n\t\t\t\t\t\ty: scrollRef.current!.scrollTop,\r\n\t\t\t\t\t});\r\n\t\t\t\t\tanimationFrameId = null;\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t// 수동으로 이벤트 리스너 추가\r\n\t\tscrollRef.current.addEventListener(\"wheel\", handleWheel, {\r\n\t\t\tpassive: false,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\t// 이벤트 리스너 제거\r\n\t\t\tscrollRef.current?.removeEventListener(\"wheel\", handleWheel);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tref={scrollRef}\r\n\t\t\tonMouseUp={() => setIsMouseDown(false)}\r\n\t\t\tonMouseDown={() => setIsMouseDown(true)}\r\n\t\t\tonMouseMove={(event) => {\r\n\t\t\t\tif (!scrollRef.current || !isMouseDown || direction !== \"x\")\r\n\t\t\t\t\treturn;\r\n\t\t\t\tscrollRef.current.scrollLeft += event.movementX * -1;\r\n\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\tx: scrollRef.current.scrollLeft,\r\n\t\t\t\t\ty: scrollRef.current.scrollTop,\r\n\t\t\t\t});\r\n\t\t\t}}\r\n\t\t\tonScroll={() => {\r\n\t\t\t\tif (!scrollRef.current) return;\r\n\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\tx: scrollRef.current.scrollLeft,\r\n\t\t\t\t\ty: scrollRef.current.scrollTop,\r\n\t\t\t\t});\r\n\t\t\t}}\r\n\t\t\tclassName={`${className || \"\"} ${isDefaultScrollStyle ? listScroll[\"default-scroll\"] : listScroll[\"list-scroll\"]} ${direction ? listScroll[direction] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default memo(FlexLayoutSplitScreenScrollBox);\r\n"],"mappings":"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","names":["listScroll"]}
@@ -1,10 +1,14 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { memo, useRef, useState, useEffect } from 'react';
3
- import { Subject, fromEvent } from 'rxjs';
4
- import { throttleTime, take } from 'rxjs/operators';
5
- import { setScrollPosition, getScrollPosition, removeScrollPosition } from '../store/FlexLayoutContainerStore';
6
- import listScroll from '../styles/listScroll.module.css';
7
-
1
+ "use client";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { memo, useEffect, useRef, useState } from "react";
4
+ import { fromEvent, Subject } from "rxjs";
5
+ import { take, throttleTime } from "rxjs/operators";
6
+ import {
7
+ getScrollPosition,
8
+ removeScrollPosition,
9
+ setScrollPosition
10
+ } from "../store/FlexLayoutContainerStore";
11
+ import listScroll from "../styles/listScroll.module.css";
8
12
  const FlexLayoutSplitScreenScrollBox = ({
9
13
  className,
10
14
  children,
@@ -97,7 +101,7 @@ const FlexLayoutSplitScreenScrollBox = ({
97
101
  );
98
102
  };
99
103
  var FlexLayoutSplitScreenScrollBox_default = memo(FlexLayoutSplitScreenScrollBox);
100
-
101
- export { FlexLayoutSplitScreenScrollBox_default as default };
102
- //# sourceMappingURL=FlexLayoutSplitScreenScrollBox.js.map
104
+ export {
105
+ FlexLayoutSplitScreenScrollBox_default as default
106
+ };
103
107
  //# sourceMappingURL=FlexLayoutSplitScreenScrollBox.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenScrollBox.tsx"],"names":[],"mappings":"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","file":"FlexLayoutSplitScreenScrollBox.js","sourcesContent":["\"use client\";\r\n\r\nimport { FC, HTMLAttributes, memo, useEffect, useRef, useState } from \"react\";\r\nimport { fromEvent, Subject } from \"rxjs\";\r\nimport { take, throttleTime } from \"rxjs/operators\";\r\nimport {\r\n\tgetScrollPosition,\r\n\tremoveScrollPosition,\r\n\tScrollPosition,\r\n\tsetScrollPosition,\r\n} from \"../store/FlexLayoutContainerStore\";\r\nimport listScroll from \"../styles/listScroll.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {\r\n\tkeyName: string;\r\n\tclassName?: string;\r\n\tdirection?: \"x\" | \"y\";\r\n\tisDefaultScrollStyle?: boolean;\r\n}\r\n\r\nconst FlexLayoutSplitScreenScrollBox: FC<\r\n\tFlexLayoutSplitScreenScrollBoxProps\r\n> = ({\r\n\tclassName,\r\n\tchildren,\r\n\tkeyName,\r\n\tdirection,\r\n\tisDefaultScrollStyle = false,\r\n\t...props\r\n}: FlexLayoutSplitScreenScrollBoxProps) => {\r\n\tconst scrollRef = useRef<HTMLDivElement | null>(null);\r\n\tconst [isMouseDown, setIsMouseDown] = useState<boolean>(false);\r\n\tconst scrollEventSubject = useRef(new Subject<ScrollPosition>());\r\n\r\n\t// const handleScroll = throttle(\r\n\t// (newScrollLeft: number, newScrollTop: number) => {\r\n\t// setScrollPosition(layoutName, {\r\n\t// x: newScrollLeft,\r\n\t// y: newScrollTop,\r\n\t// });\r\n\t// },\r\n\t// 100\r\n\t// ); // 100ms 간격으로 호출\r\n\r\n\tuseEffect(() => {\r\n\t\tconst mouseUpSubscribe = fromEvent<MouseEvent>(\r\n\t\t\twindow,\r\n\t\t\t\"mouseup\",\r\n\t\t).subscribe(() => {\r\n\t\t\tsetIsMouseDown(false);\r\n\t\t});\r\n\r\n\t\t// 스크롤 이벤트 throttling 및 상태 업데이트\r\n\t\tconst scrollEventSubscribe = scrollEventSubject.current\r\n\t\t\t.pipe(throttleTime(70)) // 70ms 간격으로 throttling\r\n\t\t\t.subscribe((position) => {\r\n\t\t\t\tsetScrollPosition(keyName, position);\r\n\t\t\t});\r\n\r\n\t\tconst scrollSubscribe = getScrollPosition(keyName)\r\n\t\t\t.pipe(take(1)) // 한 번만 실행\r\n\t\t\t.subscribe((position) => {\r\n\t\t\t\tif (scrollRef.current && position) {\r\n\t\t\t\t\tscrollRef.current.scrollLeft = position.x;\r\n\t\t\t\t\tscrollRef.current.scrollTop = position.y;\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tremoveScrollPosition(keyName);\r\n\t\t\tmouseUpSubscribe.unsubscribe();\r\n\t\t\tscrollSubscribe.unsubscribe();\r\n\t\t\tscrollEventSubscribe.unsubscribe();\r\n\t\t};\r\n\t}, [keyName]);\r\n\tuseEffect(() => {\r\n\t\tif (!scrollRef.current) return;\r\n\r\n\t\tlet animationFrameId: number | null = null;\r\n\t\tconst handleWheel = (event: WheelEvent) => {\r\n\t\t\tif (!scrollRef.current || direction !== \"x\") return;\r\n\t\t\tif (scrollRef.current.matches(\":hover\")) {\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tconst { deltaY } = event;\r\n\t\t\t\tconst newScrollLeft = scrollRef.current.scrollLeft + deltaY;\r\n\r\n\t\t\t\t// 이미 애니메이션이 예약되어 있으면 취소\r\n\t\t\t\tif (animationFrameId) {\r\n\t\t\t\t\tcancelAnimationFrame(animationFrameId);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tanimationFrameId = requestAnimationFrame(() => {\r\n\t\t\t\t\t// 바로 scrollLeft 값을 업데이트 (smooth 대신,\r\n\t\t\t\t\t// 혹은 native 스크롤로 처리)\r\n\t\t\t\t\tscrollRef.current!.scrollLeft = newScrollLeft;\r\n\t\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\t\tx: newScrollLeft,\r\n\t\t\t\t\t\ty: scrollRef.current!.scrollTop,\r\n\t\t\t\t\t});\r\n\t\t\t\t\tanimationFrameId = null;\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t// 수동으로 이벤트 리스너 추가\r\n\t\tscrollRef.current.addEventListener(\"wheel\", handleWheel, {\r\n\t\t\tpassive: false,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\t// 이벤트 리스너 제거\r\n\t\t\tscrollRef.current?.removeEventListener(\"wheel\", handleWheel);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tref={scrollRef}\r\n\t\t\tonMouseUp={() => setIsMouseDown(false)}\r\n\t\t\tonMouseDown={() => setIsMouseDown(true)}\r\n\t\t\tonMouseMove={(event) => {\r\n\t\t\t\tif (!scrollRef.current || !isMouseDown || direction !== \"x\")\r\n\t\t\t\t\treturn;\r\n\t\t\t\tscrollRef.current.scrollLeft += event.movementX * -1;\r\n\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\tx: scrollRef.current.scrollLeft,\r\n\t\t\t\t\ty: scrollRef.current.scrollTop,\r\n\t\t\t\t});\r\n\t\t\t}}\r\n\t\t\tonScroll={() => {\r\n\t\t\t\tif (!scrollRef.current) return;\r\n\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\tx: scrollRef.current.scrollLeft,\r\n\t\t\t\t\ty: scrollRef.current.scrollTop,\r\n\t\t\t\t});\r\n\t\t\t}}\r\n\t\t\tclassName={`${className || \"\"} ${isDefaultScrollStyle ? listScroll[\"default-scroll\"] : listScroll[\"list-scroll\"]} ${direction ? listScroll[direction] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default memo(FlexLayoutSplitScreenScrollBox);\r\n"]}
1
+ {"version":3,"sources":["../../../src/flex-layout/components/FlexLayoutSplitScreenScrollBox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FC, HTMLAttributes, memo, useEffect, useRef, useState } from \"react\";\r\nimport { fromEvent, Subject } from \"rxjs\";\r\nimport { take, throttleTime } from \"rxjs/operators\";\r\nimport {\r\n\tgetScrollPosition,\r\n\tremoveScrollPosition,\r\n\tScrollPosition,\r\n\tsetScrollPosition,\r\n} from \"../store/FlexLayoutContainerStore\";\r\nimport listScroll from \"../styles/listScroll.module.css\";\r\n\r\nexport interface FlexLayoutSplitScreenScrollBoxProps extends HTMLAttributes<HTMLDivElement> {\r\n\tkeyName: string;\r\n\tclassName?: string;\r\n\tdirection?: \"x\" | \"y\";\r\n\tisDefaultScrollStyle?: boolean;\r\n}\r\n\r\nconst FlexLayoutSplitScreenScrollBox: FC<\r\n\tFlexLayoutSplitScreenScrollBoxProps\r\n> = ({\r\n\tclassName,\r\n\tchildren,\r\n\tkeyName,\r\n\tdirection,\r\n\tisDefaultScrollStyle = false,\r\n\t...props\r\n}: FlexLayoutSplitScreenScrollBoxProps) => {\r\n\tconst scrollRef = useRef<HTMLDivElement | null>(null);\r\n\tconst [isMouseDown, setIsMouseDown] = useState<boolean>(false);\r\n\tconst scrollEventSubject = useRef(new Subject<ScrollPosition>());\r\n\r\n\t// const handleScroll = throttle(\r\n\t// (newScrollLeft: number, newScrollTop: number) => {\r\n\t// setScrollPosition(layoutName, {\r\n\t// x: newScrollLeft,\r\n\t// y: newScrollTop,\r\n\t// });\r\n\t// },\r\n\t// 100\r\n\t// ); // 100ms 간격으로 호출\r\n\r\n\tuseEffect(() => {\r\n\t\tconst mouseUpSubscribe = fromEvent<MouseEvent>(\r\n\t\t\twindow,\r\n\t\t\t\"mouseup\",\r\n\t\t).subscribe(() => {\r\n\t\t\tsetIsMouseDown(false);\r\n\t\t});\r\n\r\n\t\t// 스크롤 이벤트 throttling 및 상태 업데이트\r\n\t\tconst scrollEventSubscribe = scrollEventSubject.current\r\n\t\t\t.pipe(throttleTime(70)) // 70ms 간격으로 throttling\r\n\t\t\t.subscribe((position) => {\r\n\t\t\t\tsetScrollPosition(keyName, position);\r\n\t\t\t});\r\n\r\n\t\tconst scrollSubscribe = getScrollPosition(keyName)\r\n\t\t\t.pipe(take(1)) // 한 번만 실행\r\n\t\t\t.subscribe((position) => {\r\n\t\t\t\tif (scrollRef.current && position) {\r\n\t\t\t\t\tscrollRef.current.scrollLeft = position.x;\r\n\t\t\t\t\tscrollRef.current.scrollTop = position.y;\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tremoveScrollPosition(keyName);\r\n\t\t\tmouseUpSubscribe.unsubscribe();\r\n\t\t\tscrollSubscribe.unsubscribe();\r\n\t\t\tscrollEventSubscribe.unsubscribe();\r\n\t\t};\r\n\t}, [keyName]);\r\n\tuseEffect(() => {\r\n\t\tif (!scrollRef.current) return;\r\n\r\n\t\tlet animationFrameId: number | null = null;\r\n\t\tconst handleWheel = (event: WheelEvent) => {\r\n\t\t\tif (!scrollRef.current || direction !== \"x\") return;\r\n\t\t\tif (scrollRef.current.matches(\":hover\")) {\r\n\t\t\t\tevent.preventDefault();\r\n\t\t\t\tconst { deltaY } = event;\r\n\t\t\t\tconst newScrollLeft = scrollRef.current.scrollLeft + deltaY;\r\n\r\n\t\t\t\t// 이미 애니메이션이 예약되어 있으면 취소\r\n\t\t\t\tif (animationFrameId) {\r\n\t\t\t\t\tcancelAnimationFrame(animationFrameId);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tanimationFrameId = requestAnimationFrame(() => {\r\n\t\t\t\t\t// 바로 scrollLeft 값을 업데이트 (smooth 대신,\r\n\t\t\t\t\t// 혹은 native 스크롤로 처리)\r\n\t\t\t\t\tscrollRef.current!.scrollLeft = newScrollLeft;\r\n\t\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\t\tx: newScrollLeft,\r\n\t\t\t\t\t\ty: scrollRef.current!.scrollTop,\r\n\t\t\t\t\t});\r\n\t\t\t\t\tanimationFrameId = null;\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t// 수동으로 이벤트 리스너 추가\r\n\t\tscrollRef.current.addEventListener(\"wheel\", handleWheel, {\r\n\t\t\tpassive: false,\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\t// 이벤트 리스너 제거\r\n\t\t\tscrollRef.current?.removeEventListener(\"wheel\", handleWheel);\r\n\t\t};\r\n\t}, []);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tref={scrollRef}\r\n\t\t\tonMouseUp={() => setIsMouseDown(false)}\r\n\t\t\tonMouseDown={() => setIsMouseDown(true)}\r\n\t\t\tonMouseMove={(event) => {\r\n\t\t\t\tif (!scrollRef.current || !isMouseDown || direction !== \"x\")\r\n\t\t\t\t\treturn;\r\n\t\t\t\tscrollRef.current.scrollLeft += event.movementX * -1;\r\n\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\tx: scrollRef.current.scrollLeft,\r\n\t\t\t\t\ty: scrollRef.current.scrollTop,\r\n\t\t\t\t});\r\n\t\t\t}}\r\n\t\t\tonScroll={() => {\r\n\t\t\t\tif (!scrollRef.current) return;\r\n\t\t\t\tscrollEventSubject.current.next({\r\n\t\t\t\t\tx: scrollRef.current.scrollLeft,\r\n\t\t\t\t\ty: scrollRef.current.scrollTop,\r\n\t\t\t\t});\r\n\t\t\t}}\r\n\t\t\tclassName={`${className || \"\"} ${isDefaultScrollStyle ? listScroll[\"default-scroll\"] : listScroll[\"list-scroll\"]} ${direction ? listScroll[direction] : \"\"}`}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default memo(FlexLayoutSplitScreenScrollBox);\r\n"],"mappings":"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","names":[]}
@@ -1,8 +1,29 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
-
1
+ "use strict";
2
+ "use client";
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+ var FlexLayoutStickyBox_exports = {};
21
+ __export(FlexLayoutStickyBox_exports, {
22
+ default: () => FlexLayoutStickyBox_default
23
+ });
24
+ module.exports = __toCommonJS(FlexLayoutStickyBox_exports);
25
+ var import_jsx_runtime = require("react/jsx-runtime");
26
+ var import_react = require("react");
6
27
  function clamp(n, min, max) {
7
28
  return Math.max(min, Math.min(max, n));
8
29
  }
@@ -39,37 +60,38 @@ const FlexLayoutStickyBox = ({
39
60
  children,
40
61
  style,
41
62
  className,
63
+ transitionDurationMs = 200,
42
64
  onTranslateChange = () => {
43
65
  },
44
66
  ...rest
45
67
  }) => {
46
- const offsetRef = react.useRef(offset);
47
- const rootRef = react.useRef(null);
48
- const contentRef = react.useRef(null);
49
- const mutatingRef = react.useRef(false);
50
- const lastOffsetRef = react.useRef(0);
51
- const [resolvedEdge, setResolvedEdge] = react.useState("top");
52
- const rafId = react.useRef(null);
53
- const [contentDynamicStyle, setContentDynamicStyle] = react.useState({});
54
- react.useEffect(() => {
68
+ const offsetRef = (0, import_react.useRef)(offset);
69
+ const rootRef = (0, import_react.useRef)(null);
70
+ const contentRef = (0, import_react.useRef)(null);
71
+ const mutatingRef = (0, import_react.useRef)(false);
72
+ const lastOffsetRef = (0, import_react.useRef)(0);
73
+ const [resolvedEdge, setResolvedEdge] = (0, import_react.useState)("top");
74
+ const rafId = (0, import_react.useRef)(null);
75
+ const [contentDynamicStyle, setContentDynamicStyle] = (0, import_react.useState)({});
76
+ (0, import_react.useEffect)(() => {
55
77
  setContentDynamicStyle({
56
78
  willChange: "transform",
57
- transition: "transform 50ms linear"
79
+ transition: `transform ${transitionDurationMs}ms linear`
58
80
  });
59
- }, []);
60
- react.useEffect(() => {
81
+ }, [transitionDurationMs]);
82
+ (0, import_react.useEffect)(() => {
61
83
  offsetRef.current = offset;
62
84
  scheduleUpdate();
63
85
  }, [offset]);
64
- const [ioRoot, setIoRoot] = react.useState(null);
65
- react.useEffect(() => {
86
+ const [ioRoot, setIoRoot] = (0, import_react.useState)(null);
87
+ (0, import_react.useEffect)(() => {
66
88
  const root = scrollRoot ?? pickDefaultScrollRoot();
67
89
  setResolvedEdge(
68
90
  edge === "auto" ? isVerticalScroll(root) ? "top" : "left" : edge
69
91
  );
70
92
  setIoRoot(root);
71
93
  }, [edge, scrollRoot]);
72
- react.useEffect(() => {
94
+ (0, import_react.useEffect)(() => {
73
95
  if (edge !== "auto") {
74
96
  setResolvedEdge(edge);
75
97
  return;
@@ -77,7 +99,7 @@ const FlexLayoutStickyBox = ({
77
99
  const vertical = isVerticalScroll(ioRoot);
78
100
  setResolvedEdge(vertical ? "top" : "left");
79
101
  }, [edge, ioRoot]);
80
- react.useEffect(() => {
102
+ (0, import_react.useEffect)(() => {
81
103
  }, []);
82
104
  const scheduleUpdate = () => {
83
105
  if (rafId.current != null) return;
@@ -155,7 +177,7 @@ const FlexLayoutStickyBox = ({
155
177
  mutatingRef.current = false;
156
178
  });
157
179
  };
158
- react.useEffect(() => {
180
+ (0, import_react.useEffect)(() => {
159
181
  if (typeof window == "undefined") return;
160
182
  const rootEl = rootRef.current;
161
183
  if (!rootEl) return;
@@ -194,7 +216,7 @@ const FlexLayoutStickyBox = ({
194
216
  }
195
217
  };
196
218
  }, [ioRoot, resolvedEdge, offset, debug]);
197
- return /* @__PURE__ */ jsxRuntime.jsx(
219
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
198
220
  "div",
199
221
  {
200
222
  ref: rootRef,
@@ -208,7 +230,7 @@ const FlexLayoutStickyBox = ({
208
230
  ...style
209
231
  },
210
232
  ...rest,
211
- children: /* @__PURE__ */ jsxRuntime.jsx(
233
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
212
234
  "div",
213
235
  {
214
236
  ref: contentRef,
@@ -220,7 +242,4 @@ const FlexLayoutStickyBox = ({
220
242
  );
221
243
  };
222
244
  var FlexLayoutStickyBox_default = FlexLayoutStickyBox;
223
-
224
- module.exports = FlexLayoutStickyBox_default;
225
- //# sourceMappingURL=FlexLayoutStickyBox.cjs.map
226
245
  //# sourceMappingURL=FlexLayoutStickyBox.cjs.map