@ehfuse/overlay-scrollbar 1.6.24 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +160 -131
- package/dist/OverlayScrollbar.d.ts +2 -0
- package/dist/OverlayScrollbar.d.ts.map +1 -1
- package/dist/hooks/usePullToRefresh.d.ts +25 -0
- package/dist/hooks/usePullToRefresh.d.ts.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +7 -2
- package/dist/index.esm.js.map +4 -4
- package/dist/index.js +7 -2
- package/dist/index.js.map +4 -4
- package/dist/types.d.ts +9 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 KIM YOUNG JIN
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 KIM YOUNG JIN
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,131 +1,160 @@
|
|
|
1
|
-
# OverlayScrollbar
|
|
2
|
-
|
|
3
|
-
A highly customizable React component that provides a beautiful overlay scrollbar with extensive styling options, interactive features, and smooth animations.
|
|
4
|
-
|
|
5
|
-
다양한 스타일링 옵션, 인터랙티브 기능, 부드러운 애니메이션을 제공하는 고도로 커스터마이징 가능한 React 오버레이 스크롤바 컴포넌트입니다.
|
|
6
|
-
|
|
7
|
-
## 📚 Documentation
|
|
8
|
-
|
|
9
|
-
- **[Getting Started (English)](https://github.com/ehfuse/overlay-scrollbar/blob/main/docs/getting-started-en.md)** - Complete setup and usage guide
|
|
10
|
-
- **[시작하기 (한국어)](https://github.com/ehfuse/overlay-scrollbar/blob/main/docs/getting-started-ko.md)** - 설치 및 사용법 가이드
|
|
11
|
-
|
|
12
|
-
## ✨ Key Features
|
|
13
|
-
|
|
14
|
-
- 🎨 **Fully Customizable** - Control colors, sizes, radius, and positioning
|
|
15
|
-
- 🖱️ **Drag Scroll** - Mouse drag scrolling with smart UI library exclusion
|
|
16
|
-
- 🏹 **Arrow Navigation** - Optional arrow buttons for precise control
|
|
17
|
-
- ⚡ **Smooth Animations** - Fade transitions and hover effects
|
|
18
|
-
- 🔍 **Smart Auto-hide** - Intelligent visibility management
|
|
19
|
-
- 🧠 **Smart Input Detection** - Excludes interactive elements automatically
|
|
20
|
-
- 🤖 **Auto-Detection** - Automatically finds scrollable containers (Virtuoso, react-window, etc.)
|
|
21
|
-
- 🔧 **TypeScript** - Complete type definitions
|
|
22
|
-
- 🪶 **Zero Dependencies** - Only requires React
|
|
23
|
-
- ♿ **Accessible** - Preserves native scroll behavior
|
|
24
|
-
|
|
25
|
-
## ✨ 주요 기능
|
|
26
|
-
|
|
27
|
-
- 🎨 **완전한 커스터마이징** - 색상, 크기, 둥근 모서리, 위치 제어
|
|
28
|
-
- 🖱️ **드래그 스크롤** - UI 라이브러리 스마트 제외 기능을 가진 마우스 드래그 스크롤
|
|
29
|
-
- 🏹 **화살표 내비게이션** - 정밀한 제어를 위한 선택적 화살표 버튼
|
|
30
|
-
- ⚡ **부드러운 애니메이션** - 페이드 전환 및 호버 효과
|
|
31
|
-
- 🔍 **스마트 자동 숨김** - 지능적인 표시 관리
|
|
32
|
-
- 🧠 **스마트 입력 감지** - 인터랙티브 요소 자동 제외
|
|
33
|
-
- 🤖 **자동 감지** - 스크롤 가능한 컨테이너 자동 검색 (Virtuoso, react-window 등)
|
|
34
|
-
- 🔧 **TypeScript** - 완전한 타입 정의
|
|
35
|
-
- 🪶 **의존성 없음** - React만 필요
|
|
36
|
-
- ♿ **접근성** - 기본 스크롤 동작 보존
|
|
37
|
-
|
|
38
|
-
## 🚀 Installation
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
npm install @ehfuse/overlay-scrollbar
|
|
42
|
-
# or
|
|
43
|
-
yarn add @ehfuse/overlay-scrollbar
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## 📖 Quick Start
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import React from "react";
|
|
50
|
-
import { OverlayScrollbar } from "@ehfuse/overlay-scrollbar";
|
|
51
|
-
|
|
52
|
-
function App() {
|
|
53
|
-
return (
|
|
54
|
-
<div style={{ height: "400px" }}>
|
|
55
|
-
<OverlayScrollbar
|
|
56
|
-
thumb={{
|
|
57
|
-
width: 8,
|
|
58
|
-
color: "rgba(100, 100, 100, 0.7)",
|
|
59
|
-
}}
|
|
60
|
-
dragScroll={{
|
|
61
|
-
enabled: true,
|
|
62
|
-
excludeClasses: ["no-drag"],
|
|
63
|
-
}}
|
|
64
|
-
>
|
|
65
|
-
<div style={{ height: "1000px" }}>
|
|
66
|
-
<p>Your scrollable content here...</p>
|
|
67
|
-
<input type="text" placeholder="Auto-excluded from drag" />
|
|
68
|
-
</div>
|
|
69
|
-
</OverlayScrollbar>
|
|
70
|
-
</div>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## 🎯 Main API
|
|
76
|
-
|
|
77
|
-
### Configuration Objects (v1.4.0+)
|
|
78
|
-
|
|
79
|
-
```tsx
|
|
80
|
-
interface OverlayScrollbarProps {
|
|
81
|
-
children: ReactNode;
|
|
82
|
-
className?: string;
|
|
83
|
-
style?: React.CSSProperties; // Wrapper div styles
|
|
84
|
-
containerStyle?: React.CSSProperties; // Scroll container div styles
|
|
85
|
-
contentStyle?: React.CSSProperties; // Inner content div styles
|
|
86
|
-
onScroll?: (event: Event) => void;
|
|
87
|
-
|
|
88
|
-
// Grouped configuration objects
|
|
89
|
-
thumb?: ThumbConfig; // Scrollbar thumb settings
|
|
90
|
-
track?: TrackConfig; // Track area settings
|
|
91
|
-
arrows?: ArrowsConfig; // Arrow buttons settings
|
|
92
|
-
dragScroll?: DragScrollConfig; // Drag scroll settings
|
|
93
|
-
autoHide?: AutoHideConfig; // Auto-hide behavior settings
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
1
|
+
# OverlayScrollbar
|
|
2
|
+
|
|
3
|
+
A highly customizable React component that provides a beautiful overlay scrollbar with extensive styling options, interactive features, and smooth animations.
|
|
4
|
+
|
|
5
|
+
다양한 스타일링 옵션, 인터랙티브 기능, 부드러운 애니메이션을 제공하는 고도로 커스터마이징 가능한 React 오버레이 스크롤바 컴포넌트입니다.
|
|
6
|
+
|
|
7
|
+
## 📚 Documentation
|
|
8
|
+
|
|
9
|
+
- **[Getting Started (English)](https://github.com/ehfuse/overlay-scrollbar/blob/main/docs/getting-started-en.md)** - Complete setup and usage guide
|
|
10
|
+
- **[시작하기 (한국어)](https://github.com/ehfuse/overlay-scrollbar/blob/main/docs/getting-started-ko.md)** - 설치 및 사용법 가이드
|
|
11
|
+
|
|
12
|
+
## ✨ Key Features
|
|
13
|
+
|
|
14
|
+
- 🎨 **Fully Customizable** - Control colors, sizes, radius, and positioning
|
|
15
|
+
- 🖱️ **Drag Scroll** - Mouse drag scrolling with smart UI library exclusion
|
|
16
|
+
- 🏹 **Arrow Navigation** - Optional arrow buttons for precise control
|
|
17
|
+
- ⚡ **Smooth Animations** - Fade transitions and hover effects
|
|
18
|
+
- 🔍 **Smart Auto-hide** - Intelligent visibility management
|
|
19
|
+
- 🧠 **Smart Input Detection** - Excludes interactive elements automatically
|
|
20
|
+
- 🤖 **Auto-Detection** - Automatically finds scrollable containers (Virtuoso, react-window, etc.)
|
|
21
|
+
- 🔧 **TypeScript** - Complete type definitions
|
|
22
|
+
- 🪶 **Zero Dependencies** - Only requires React
|
|
23
|
+
- ♿ **Accessible** - Preserves native scroll behavior
|
|
24
|
+
|
|
25
|
+
## ✨ 주요 기능
|
|
26
|
+
|
|
27
|
+
- 🎨 **완전한 커스터마이징** - 색상, 크기, 둥근 모서리, 위치 제어
|
|
28
|
+
- 🖱️ **드래그 스크롤** - UI 라이브러리 스마트 제외 기능을 가진 마우스 드래그 스크롤
|
|
29
|
+
- 🏹 **화살표 내비게이션** - 정밀한 제어를 위한 선택적 화살표 버튼
|
|
30
|
+
- ⚡ **부드러운 애니메이션** - 페이드 전환 및 호버 효과
|
|
31
|
+
- 🔍 **스마트 자동 숨김** - 지능적인 표시 관리
|
|
32
|
+
- 🧠 **스마트 입력 감지** - 인터랙티브 요소 자동 제외
|
|
33
|
+
- 🤖 **자동 감지** - 스크롤 가능한 컨테이너 자동 검색 (Virtuoso, react-window 등)
|
|
34
|
+
- 🔧 **TypeScript** - 완전한 타입 정의
|
|
35
|
+
- 🪶 **의존성 없음** - React만 필요
|
|
36
|
+
- ♿ **접근성** - 기본 스크롤 동작 보존
|
|
37
|
+
|
|
38
|
+
## 🚀 Installation
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install @ehfuse/overlay-scrollbar
|
|
42
|
+
# or
|
|
43
|
+
yarn add @ehfuse/overlay-scrollbar
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## 📖 Quick Start
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import React from "react";
|
|
50
|
+
import { OverlayScrollbar } from "@ehfuse/overlay-scrollbar";
|
|
51
|
+
|
|
52
|
+
function App() {
|
|
53
|
+
return (
|
|
54
|
+
<div style={{ height: "400px" }}>
|
|
55
|
+
<OverlayScrollbar
|
|
56
|
+
thumb={{
|
|
57
|
+
width: 8,
|
|
58
|
+
color: "rgba(100, 100, 100, 0.7)",
|
|
59
|
+
}}
|
|
60
|
+
dragScroll={{
|
|
61
|
+
enabled: true,
|
|
62
|
+
excludeClasses: ["no-drag"],
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
<div style={{ height: "1000px" }}>
|
|
66
|
+
<p>Your scrollable content here...</p>
|
|
67
|
+
<input type="text" placeholder="Auto-excluded from drag" />
|
|
68
|
+
</div>
|
|
69
|
+
</OverlayScrollbar>
|
|
70
|
+
</div>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## 🎯 Main API
|
|
76
|
+
|
|
77
|
+
### Configuration Objects (v1.4.0+)
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
interface OverlayScrollbarProps {
|
|
81
|
+
children: ReactNode;
|
|
82
|
+
className?: string;
|
|
83
|
+
style?: React.CSSProperties; // Wrapper div styles
|
|
84
|
+
containerStyle?: React.CSSProperties; // Scroll container div styles
|
|
85
|
+
contentStyle?: React.CSSProperties; // Inner content div styles
|
|
86
|
+
onScroll?: (event: Event) => void;
|
|
87
|
+
|
|
88
|
+
// Grouped configuration objects
|
|
89
|
+
thumb?: ThumbConfig; // Scrollbar thumb settings
|
|
90
|
+
track?: TrackConfig; // Track area settings
|
|
91
|
+
arrows?: ArrowsConfig; // Arrow buttons settings
|
|
92
|
+
dragScroll?: DragScrollConfig; // Drag scroll settings
|
|
93
|
+
autoHide?: AutoHideConfig; // Auto-hide behavior settings
|
|
94
|
+
pullToRefresh?: PullToRefreshConfig; // Pull-to-refresh settings (touch only, v1.7.0+)
|
|
95
|
+
|
|
96
|
+
// General settings
|
|
97
|
+
showScrollbar?: boolean; // Show scrollbar (default: true)
|
|
98
|
+
showHorizontalScrollbar?: boolean; // Show bottom horizontal scrollbar (default: true)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
interface AutoHideConfig {
|
|
102
|
+
enabled?: boolean; // Enable auto-hide (default: true)
|
|
103
|
+
delay?: number; // Auto-hide delay (default: 1500ms)
|
|
104
|
+
delayOnWheel?: number; // Quick hide after wheel (default: 700ms)
|
|
105
|
+
initialDelay?: number; // Delay before showing scrollbar on mount (default: 200ms)
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
interface TrackConfig {
|
|
109
|
+
alignment?: "default" | "outside"; // Track alignment (default: "outside")
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
interface DragScrollConfig {
|
|
113
|
+
enabled?: boolean; // Enable mouse drag scrolling (default: true)
|
|
114
|
+
excludeClasses?: string[];
|
|
115
|
+
excludeSelectors?: string[];
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
interface PullToRefreshConfig {
|
|
119
|
+
enabled?: boolean; // Enable pull-to-refresh (default: true, requires onRefresh)
|
|
120
|
+
onRefresh?: () => void | Promise<void>; // Refresh callback — spinner stays until the Promise resolves
|
|
121
|
+
threshold?: number; // Pull distance to trigger refresh on release (default: 80px)
|
|
122
|
+
maxDistance?: number; // Max indicator travel distance (default: threshold * 2)
|
|
123
|
+
indicatorColor?: string; // Arrow/spinner color (default: "#1976d2")
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Pull to Refresh (v1.7.0+)
|
|
128
|
+
|
|
129
|
+
When the scroll container is at the top, pulling down (touch gesture) shows an
|
|
130
|
+
indicator that follows the finger. Releasing past the threshold triggers `onRefresh`.
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
<OverlayScrollbar
|
|
134
|
+
pullToRefresh={{
|
|
135
|
+
onRefresh: async () => {
|
|
136
|
+
await reloadList(); // spinner stays visible until this resolves
|
|
137
|
+
},
|
|
138
|
+
// enabled: false, // turn the gesture off without removing the prop
|
|
139
|
+
}}
|
|
140
|
+
>
|
|
141
|
+
{items.map((item) => (
|
|
142
|
+
<ListItem key={item.id} {...item} />
|
|
143
|
+
))}
|
|
144
|
+
</OverlayScrollbar>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## 🌍 Browser Support
|
|
148
|
+
|
|
149
|
+
- Chrome/Edge: Full support
|
|
150
|
+
- Firefox: Full support
|
|
151
|
+
- Safari: Full support
|
|
152
|
+
- Mobile: Touch scrolling supported
|
|
153
|
+
|
|
154
|
+
## 📄 License
|
|
155
|
+
|
|
156
|
+
MIT © [KIM YOUNG JIN](mailto:ehfuse@gmail.com)
|
|
157
|
+
|
|
158
|
+
## 🐛 Issues
|
|
159
|
+
|
|
160
|
+
If you find any bugs or have feature requests, please create an issue on [GitHub](https://github.com/ehfuse/overlay-scrollbar/issues).
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
import React, { ReactNode } from "react";
|
|
25
|
+
import type { PullToRefreshConfig } from "./types";
|
|
25
26
|
export interface ThumbConfig {
|
|
26
27
|
width?: number;
|
|
27
28
|
minHeight?: number;
|
|
@@ -72,6 +73,7 @@ export interface OverlayScrollbarProps {
|
|
|
72
73
|
arrows?: ArrowsConfig;
|
|
73
74
|
dragScroll?: DragScrollConfig;
|
|
74
75
|
autoHide?: AutoHideConfig;
|
|
76
|
+
pullToRefresh?: PullToRefreshConfig;
|
|
75
77
|
showScrollbar?: boolean;
|
|
76
78
|
showHorizontalScrollbar?: boolean;
|
|
77
79
|
detectInnerScroll?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../src/OverlayScrollbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAMV,SAAS,EAIZ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../src/OverlayScrollbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,KAAK,EAAE,EAMV,SAAS,EAIZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAGD,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAGD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B;AAGD,MAAM,WAAW,cAAc;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGlC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,aAAa,CAAC,EAAE,mBAAmB,CAAC;IAGpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAGD,MAAM,WAAW,mBAAmB;IAChC,kBAAkB,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACxB;AAUD,QAAA,MAAM,gBAAgB,mGA42DrB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* usePullToRefresh.ts
|
|
3
|
+
* 당겨서 새로고침(pull-to-refresh) 로직
|
|
4
|
+
*
|
|
5
|
+
* 스크롤 컨테이너가 맨 위(scrollTop <= 0)에 있을 때 아래로 당기는 터치 제스처를 감지해,
|
|
6
|
+
* 임계 거리 이상 당긴 상태에서 손을 떼면 onRefresh 콜백을 실행한다.
|
|
7
|
+
*
|
|
8
|
+
* @copyright 2025 KIM YOUNG JIN (ehfuse@gmail.com)
|
|
9
|
+
*/
|
|
10
|
+
import { RefObject } from "react";
|
|
11
|
+
import { PullToRefreshConfig } from "../types";
|
|
12
|
+
interface UsePullToRefreshProps {
|
|
13
|
+
containerRef: RefObject<HTMLDivElement | null>;
|
|
14
|
+
config: PullToRefreshConfig;
|
|
15
|
+
}
|
|
16
|
+
interface UsePullToRefreshResult {
|
|
17
|
+
pullDistance: number;
|
|
18
|
+
isRefreshing: boolean;
|
|
19
|
+
pullProgress: number;
|
|
20
|
+
pullThreshold: number;
|
|
21
|
+
}
|
|
22
|
+
/** 당겨서 새로고침 제스처를 감지하고 상태를 반환한다. */
|
|
23
|
+
export declare const usePullToRefresh: ({ containerRef, config, }: UsePullToRefreshProps) => UsePullToRefreshResult;
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=usePullToRefresh.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePullToRefresh.d.ts","sourceRoot":"","sources":["../../src/hooks/usePullToRefresh.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,UAAU,qBAAqB;IAC3B,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,mBAAmB,CAAC;CAC/B;AAED,UAAU,sBAAsB;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,mCAAmC;AACnC,eAAO,MAAM,gBAAgB,GAAI,2BAG9B,qBAAqB,KAAG,sBA6I1B,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
*/
|
|
6
6
|
export { default } from "./OverlayScrollbar";
|
|
7
7
|
export { default as OverlayScrollbar } from "./OverlayScrollbar";
|
|
8
|
-
export type { OverlayScrollbarRef, OverlayScrollbarProps, ThumbConfig, TrackConfig, ArrowsConfig, DragScrollConfig, AutoHideConfig, } from "./types";
|
|
8
|
+
export type { OverlayScrollbarRef, OverlayScrollbarProps, ThumbConfig, TrackConfig, ArrowsConfig, DragScrollConfig, AutoHideConfig, PullToRefreshConfig, } from "./types";
|
|
9
9
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EACR,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EACR,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,mBAAmB,GACtB,MAAM,SAAS,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{useRef as C,useEffect as L,useState as h,useCallback as p,useMemo as ue,forwardRef as Tt,useImperativeHandle as Mt,useLayoutEffect as St}from"react";var xt=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],ge=(M,_)=>{if(M instanceof HTMLElement&&M.isContentEditable||M.closest('[role="textbox"],[role="searchbox"]'))return!0;let U=M.tagName.toLowerCase();if(U==="input"){let H=(M.type||"text").toLowerCase();return!["button","submit","reset","image","hidden"].includes(H)}if(["textarea","select","button"].includes(U)||["svg","path","circle","rect","line","polygon","polyline"].includes(U)||M.getAttribute("contenteditable")==="true")return!0;if(_?.excludeSelectors){for(let H of _.excludeSelectors)if(M.matches(H))return!0}return wt(M,_)},wt=(M,_)=>{let U=[...xt,..._?.excludeClasses||[]],H=M,G=0,A=5;for(;H&&G<=A;){if(U.some(S=>H.classList.contains(S)))return!0;if(H.classList.contains("MuiDialogContent-root"))break;H=H.parentElement,G++}return!1};import{jsx as B,jsxs as Re}from"react/jsx-runtime";var Et={},Ct={},Ht={},Lt={},Dt={},kt=Tt(({className:M="",style:_={},containerStyle:U={},contentStyle:H={},children:G,onScroll:A,thumb:S=Et,track:D=Ct,arrows:$=Ht,dragScroll:Q=Lt,autoHide:q=Dt,showScrollbar:ee=!0,showHorizontalScrollbar:Ie=!0,detectInnerScroll:Ze=!1},je)=>{let Je=C({});L(()=>{Je.current={children:G,onScroll:A,showScrollbar:ee,showHorizontalScrollbar:Ie,thumb:S,track:D,arrows:$,dragScroll:Q,autoHide:q}});let ve=C(null),l=C(null),te=C(null),oe=C(null),Qe=C(null),R=C(null),[de,v]=h(!1),[I,We]=h(!1),[Oe,Ae]=h(!1),[ye,et]=h({y:0,scrollTop:0}),[re,$e]=h(0),[tt,xe]=h(0),[K,ze]=h(!1),[Pe,Ne]=h(!1),[W,Fe]=h(!1),[we,ot]=h({x:0,scrollLeft:0}),[Te,Be]=h(0),[Me,_e]=h(0),[rt,Ue]=h(!1),V=C(!1),[z,qe]=h(!1),[ne,nt]=h({x:0,y:0,scrollTop:0,scrollLeft:0}),[Rt,It]=h(null),[pe,me]=h(null),[Wt,lt]=h(!1),[it,at]=h(0),le=C(null),[Xe,Ye]=h(!1),ie=C(null),X=C(null),Y=C(null),y=ue(()=>{let e=S.color??"#606060";return{width:S.width??8,minHeight:S.minHeight??50,radius:S.radius??(S.width??8)/2,color:e,opacity:S.opacity??.6,hoverColor:S.hoverColor??e,hoverOpacity:S.hoverOpacity??1}},[S]),r=ue(()=>({width:D.width??16,color:D.color??"rgba(128, 128, 128, 0.1)",visible:D.visible??!0,alignment:D.alignment??"outside",radius:D.radius??y.radius??4,margin:D.margin??4,overflowX:D.overflowX??!0,overflowY:D.overflowY??!0}),[D,y.radius]),k=ue(()=>{let e=$.color??"#808080";return{visible:$.visible??!1,step:$.step??50,color:e,opacity:$.opacity??.6,hoverColor:$.hoverColor??e,hoverOpacity:$.hoverOpacity??1}},[$]),ae=ue(()=>({enabled:Q.enabled??!0,excludeClasses:Q.excludeClasses??[],excludeSelectors:Q.excludeSelectors??[]}),[Q]),i=ue(()=>({enabled:q.enabled??!0,delay:q.delay??1500,delayOnWheel:q.delayOnWheel??700,initialDelay:q.initialDelay??200}),[q]),[Z,ct]=h(()=>(q.initialDelay??200)>0),f=y.width,st=r.width,Se=y.minHeight,O=k.visible,he=k.step,E=p(()=>{if(!l.current)return;let e=document.activeElement;e&&l.current.contains(e)&&e!==l.current||l.current.focus()},[]);Mt(je,()=>({getScrollContainer:()=>l.current,scrollTo:e=>{l.current&&l.current.scrollTo(e)},get scrollTop(){return l.current?.scrollTop||0},get scrollHeight(){return l.current?.scrollHeight||0},get clientHeight(){return l.current?.clientHeight||0}}),[]);let u=p(()=>{if(R.current){let t=R.current;if(document.contains(t)&&(t.scrollHeight>t.clientHeight+2||t.scrollWidth>t.clientWidth+2))return t;R.current=null}if(!l.current)return null;if(l.current.scrollHeight>l.current.clientHeight+2||l.current.scrollWidth>l.current.clientWidth+2)return R.current=l.current,l.current;if(!Ze)return null;let e=l.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let t of e){let o=t;if(o!==l.current&&o.classList.contains("overlay-scrollbar-container"))continue;let a=o.parentElement,n=!1;for(;a&&a!==l.current;){if(a.classList.contains("overlay-scrollbar-container")&&a!==l.current){n=!0;break}a=a.parentElement}if(!n&&(o.scrollHeight>o.clientHeight+2||o.scrollWidth>o.clientWidth+2))return R.current=o,o}return null},[]),P=p(()=>u()!==null,[u]),b=p(()=>{ie.current&&(clearTimeout(ie.current),ie.current=null)},[]),fe=p(()=>{X.current&&(clearTimeout(X.current),X.current=null)},[]),Ge=p(()=>{Y.current&&(clearTimeout(Y.current),Y.current=null)},[]),ut=p(()=>{fe(),!(I||W||z||V.current)&&(b(),v(!1))},[b,fe,I,W,z]),m=p(e=>{i.enabled&&(b(),ie.current=setTimeout(()=>{v(!1),ie.current=null},e))},[b,i.enabled]),s=p(()=>{let e=u()??l.current;if(!e){v(!1),ze(!1),Ue(!1),b();return}!i.enabled&&!Z&&(v(!0),b());let t=e.clientHeight,o=e.scrollHeight,a=e.scrollTop,n=e.clientWidth,c=e.scrollWidth,g=e.scrollLeft,x=o-t>0,d=c-n>0,j=x||d;ze(x),Ue(d),j||(v(!1),b());let ce=0,T=0;if(ve.current){let N=window.getComputedStyle(ve.current),F=parseFloat(N.paddingTop)||0;T=parseFloat(N.paddingBottom)||0,ce=F+T,at(T)}if(x){let N=O?f*2+r.margin*4:r.margin*2,F=t-N+ce,be=t/o,J=Math.max(F*be,Se),Ke=o-t,vt=F-J,yt=Ke>0?a/Ke*vt:0;$e(J),xe(yt)}else $e(0),xe(0);let se=c-n;if(se>0){let N=n/c,F=Math.max(n*N,50),be=n-F,J=se>0?g/se*be:0;Be(F),_e(J)}else Be(0),_e(0)},[u,b,O,f,Se,i.enabled,Z]),dt=p(e=>{e.preventDefault(),e.stopPropagation();let t=u();t&&(We(!0),et({y:e.clientY,scrollTop:t.scrollTop}),b(),v(!0),E())},[u,b,E]),Ee=p(e=>{if(!I)return;let t=u();if(!t)return;let o=t.clientHeight,n=t.scrollHeight-o,c=e.clientY-ye.y,g=o-re,x=c/g*n,d=Math.max(0,Math.min(n,ye.scrollTop+x));t.scrollTop=d,s()},[I,ye,re,s,u]),Ce=p(()=>{We(!1),P()&&m(i.delay)},[P,m,i.delay]),pt=p(e=>{if(!oe.current)return;let o=oe.current.getBoundingClientRect(),a=e.clientY-o.top,n=u();if(!n)return;let c=n.clientHeight,g=n.scrollHeight,d=a/c*(g-c);n.scrollTop=Math.max(0,Math.min(g-c,d)),s(),v(!0),m(i.delay),E()},[s,m,i.delay,u,E]),mt=p(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current)return;let t=Math.max(0,l.current.scrollTop-he);l.current.scrollTop=t,s(),v(!0),m(i.delay),E()},[s,m,he,i.delay,E]),ht=p(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current||!te.current)return;let t=l.current,a=te.current.scrollHeight-t.clientHeight,n=Math.min(a,t.scrollTop+he);t.scrollTop=n,s(),v(!0),m(i.delay),E()},[s,m,he,i.delay,E]),ft=p(e=>{e.preventDefault(),e.stopPropagation();let t=u();t&&(Fe(!0),ot({x:e.clientX,scrollLeft:t.scrollLeft}),b(),v(!0),E())},[u,b,E]),He=p(e=>{if(!W)return;let t=u();if(!t)return;let o=t.clientWidth,n=t.scrollWidth-o,c=e.clientX-we.x,g=o-Te,x=c/g*n,d=Math.max(0,Math.min(n,we.scrollLeft+x));t.scrollLeft=d,s()},[W,we,Te,s,u]),Le=p(()=>{Fe(!1),P()&&m(i.delay)},[P,m,i.delay]),bt=p(e=>{if(!oe.current)return;let o=oe.current.getBoundingClientRect(),a=e.clientX-o.left,n=u();if(!n)return;let c=n.clientWidth,g=n.scrollWidth,d=a/c*(g-c);n.scrollLeft=Math.max(0,Math.min(g-c,d)),s(),v(!0),m(i.delay),E()},[s,m,i.delay,u,E]),gt=p(e=>{if(!ae.enabled)return;let t=e.target;if(ge(t,ae)||e.button!==0)return;let o=u();o&&(o.scrollHeight<=o.clientHeight&&o.scrollWidth<=o.clientWidth||(e.preventDefault(),V.current=!0,nt({x:e.clientX,y:e.clientY,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft||0}),b()))},[ae,ge,u,b]),De=p(e=>{if(!V.current&&!z)return;let t=u();if(!t)return;let o=ne.x-e.clientX,a=ne.y-e.clientY;if(Math.abs(a)<5&&Math.abs(o)<5)return;V.current&&(V.current=!1,qe(!0)),v(!0);let n=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,ne.scrollTop+a)),c=Math.max(0,Math.min(t.scrollWidth-t.clientWidth,ne.scrollLeft+o));t.scrollTop=n,t.scrollLeft=c,s()},[z,ne,u,s]),ke=p(()=>{let e=z;V.current=!1,qe(!1),e&&P()&&m(i.delay)},[z,P,m,i.delay]);L(()=>{let e=c=>{if(s(),Z){A&&A(c);return}b(),v(!0),Ge();let g=Xe?i.delayOnWheel:i.delay;m(g),A&&A(c)},t=()=>{Ye(!0),le.current&&clearTimeout(le.current),le.current=setTimeout(()=>{Ye(!1)},300),Ge(),Y.current=setTimeout(()=>{v(!0),Y.current=null,m(i.delayOnWheel)},50)},o=[],a=u();a&&o.push(a);let n=l.current;return n&&!a&&(o.push(n),n.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(g=>{let x=g;if(x!==n&&x.classList.contains("overlay-scrollbar-container"))return;let d=x.parentElement;for(;d&&d!==n;){if(d.classList.contains("overlay-scrollbar-container")&&d!==n)return;d=d.parentElement}o.push(x)})),o.forEach(c=>{c.addEventListener("scroll",e,{passive:!0}),c.addEventListener("wheel",t,{passive:!0})}),()=>{o.forEach(c=>{c.removeEventListener("scroll",e),c.removeEventListener("wheel",t)}),le.current&&clearTimeout(le.current),Y.current&&clearTimeout(Y.current)}},[u,s,A,b,m,i,Xe,Z]),L(()=>{let e=o=>{let a=o.target;if(o.defaultPrevented||a instanceof Element&&ge(a,ae))return;let n=u();if(!n)return;let{key:c}=o,{scrollTop:g,scrollHeight:x,clientHeight:d}=n,j=x-d,ce=50,T=null;switch(c){case"ArrowUp":o.preventDefault(),T=Math.max(0,g-ce);break;case"ArrowDown":o.preventDefault(),T=Math.min(j,g+ce);break;case"PageUp":o.preventDefault(),T=Math.max(0,g-d);break;case"PageDown":o.preventDefault(),T=Math.min(j,g+d);break;case"Home":o.preventDefault(),T=0;break;case"End":o.preventDefault(),T=j;break;default:return}if(T!==null){let se=T/j,N=O?f*2+r.margin*4:r.margin*2,J=(d-N-re)*se;xe(J),n.scrollTop=T,b(),v(!0),m(i.delay)}},t=l.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[u,O,f,r.margin,re,b,m,i.delay,ae]),L(()=>(document.addEventListener("mousemove",De),document.addEventListener("mouseup",ke),()=>{document.removeEventListener("mousemove",De),document.removeEventListener("mouseup",ke)}),[z,De,ke]),L(()=>{if(I)return document.addEventListener("mousemove",Ee),document.addEventListener("mouseup",Ce),()=>{document.removeEventListener("mousemove",Ee),document.removeEventListener("mouseup",Ce)}},[I,Ee,Ce]),L(()=>{if(W)return document.addEventListener("mousemove",He),document.addEventListener("mouseup",Le),()=>{document.removeEventListener("mousemove",He),document.removeEventListener("mouseup",Le)}},[W,He,Le]),L(()=>{s();let e=setTimeout(()=>{s()},100);return()=>clearTimeout(e)},[s]),St(()=>{lt(!0),s(),!i.enabled&&!Z&&P()&&v(!0)},[P,s,i.enabled,Z]),L(()=>{if(i.initialDelay>0){let e=setTimeout(()=>{ct(!1)},i.initialDelay);return()=>clearTimeout(e)}},[i.initialDelay]),L(()=>{let e=new ResizeObserver(()=>{s()}),t=[];return l.current&&t.push(l.current),te.current&&t.push(te.current),R.current&&document.contains(R.current)&&t.push(R.current),t.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[s]),L(()=>{if(!l.current)return;let e=new MutationObserver(()=>{R.current=null,s()});return e.observe(l.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[s]);let w=Math.max(st,f);return L(()=>{let e="overlay-scrollbar-webkit-hide",t=document.getElementById(e);t&&t.remove();let o=document.createElement("style");return o.id=e,o.textContent=`
|
|
1
|
+
import{useRef as A,useEffect as $,useState as m,useCallback as f,useMemo as xe,forwardRef as It,useImperativeHandle as Wt,useLayoutEffect as Ot}from"react";var Rt=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],Le=(E,k)=>{if(E instanceof HTMLElement&&E.isContentEditable||E.closest('[role="textbox"],[role="searchbox"]'))return!0;let z=E.tagName.toLowerCase();if(z==="input"){let y=(E.type||"text").toLowerCase();return!["button","submit","reset","image","hidden"].includes(y)}if(["textarea","select","button"].includes(z)||["svg","path","circle","rect","line","polygon","polyline"].includes(z)||E.getAttribute("contenteditable")==="true")return!0;if(k?.excludeSelectors){for(let y of k.excludeSelectors)if(E.matches(y))return!0}return kt(E,k)},kt=(E,k)=>{let z=[...Rt,...k?.excludeClasses||[]],y=E,_=0,I=5;for(;y&&_<=I;){if(z.some(S=>y.classList.contains(S)))return!0;if(y.classList.contains("MuiDialogContent-root"))break;y=y.parentElement,_++}return!1};import{useEffect as lt,useRef as ue,useState as it}from"react";var at=({containerRef:E,config:k})=>{let z=k.enabled??!0,y=k.threshold??80,_=k.maxDistance??y*2,I=k.onRefresh,[S,C]=it(0),[W,Y]=it(!1),N=ue(0),de=ue(0),P=ue(!1),q=ue(!1),pe=ue(0),te=ue(!1);return lt(()=>{te.current=W},[W]),lt(()=>{let H=E.current;if(!H||!(z&&typeof I=="function"))return;let l=s=>{let w=s instanceof Element?s:null;for(;w&&w!==H;){if(w instanceof HTMLElement&&w.scrollHeight>w.clientHeight+1&&w.scrollTop>0)return!1;w=w.parentElement}return!0},G=s=>{te.current||s.touches.length===1&&(H.scrollTop>0||l(s.target)&&(P.current=!0,q.current=!1,N.current=s.touches[0].clientY,de.current=s.touches[0].clientX))},j=s=>{if(!P.current||te.current||s.touches.length!==1)return;let w=s.touches[0].clientY-N.current,re=s.touches[0].clientX-de.current;if(!q.current){if(w<=0||H.scrollTop>0){P.current=!1;return}if(w>8&&w>Math.abs(re))q.current=!0;else return}s.cancelable&&s.preventDefault();let ne=Math.min(Math.max(w,0)*.5,_);pe.current=ne,C(ne)},oe=()=>{if(!P.current||(P.current=!1,!q.current))return;q.current=!1;let s=pe.current;pe.current=0,s>=y&&!te.current?(Y(!0),C(y),Promise.resolve().then(()=>I()).catch(()=>{}).finally(()=>{Y(!1),C(0)})):C(0)};return H.addEventListener("touchstart",G,{passive:!0}),H.addEventListener("touchmove",j,{passive:!1}),H.addEventListener("touchend",oe,{passive:!0}),H.addEventListener("touchcancel",oe,{passive:!0}),()=>{H.removeEventListener("touchstart",G),H.removeEventListener("touchmove",j),H.removeEventListener("touchend",oe),H.removeEventListener("touchcancel",oe)}},[E,z,I,y,_]),{pullDistance:S,isRefreshing:W,pullProgress:Math.min(S/y,1),pullThreshold:y}};import{jsx as R,jsxs as _e}from"react/jsx-runtime";var At={},Pt={},$t={},zt={},Nt={},Ft={},_t=It(({className:E="",style:k={},containerStyle:z={},contentStyle:y={},children:_,onScroll:I,thumb:S=At,track:C=Pt,arrows:W=$t,dragScroll:Y=zt,autoHide:N=Nt,pullToRefresh:de=Ft,showScrollbar:P=!0,showHorizontalScrollbar:q=!0,detectInnerScroll:pe=!1},te)=>{let H=A({});$(()=>{H.current={children:_,onScroll:I,showScrollbar:P,showHorizontalScrollbar:q,thumb:S,track:C,arrows:W,dragScroll:Y,autoHide:N}});let Te=A(null),l=A(null),G=A(null),j=A(null),oe=A(null),s=A(null),{pullDistance:w,isRefreshing:re,pullProgress:ne}=at({containerRef:l,config:de}),Ue=de.indicatorColor??"#1976d2",st=w>0||re,[we,x]=m(!1),[U,Be]=m(!1),[Xe,Ye]=m(!1),[De,ut]=m({y:0,scrollTop:0}),[fe,qe]=m(0),[dt,Re]=m(0),[le,Ge]=m(!1),[je,Ke]=m(!1),[B,Ve]=m(!1),[ke,pt]=m({x:0,scrollLeft:0}),[Ie,Ze]=m(0),[We,Je]=m(0),[ft,Qe]=m(!1),ie=A(!1),[K,et]=m(!1),[he,ht]=m({x:0,y:0,scrollTop:0,scrollLeft:0}),[Ut,Bt]=m(null),[Me,Ee]=m(null),[Xt,mt]=m(!1),[bt,gt]=m(0),me=A(null),[tt,ot]=m(!1),be=A(null),Q=A(null),ee=A(null),T=xe(()=>{let e=S.color??"#606060";return{width:S.width??8,minHeight:S.minHeight??50,radius:S.radius??(S.width??8)/2,color:e,opacity:S.opacity??.6,hoverColor:S.hoverColor??e,hoverOpacity:S.hoverOpacity??1}},[S]),r=xe(()=>({width:C.width??16,color:C.color??"rgba(128, 128, 128, 0.1)",visible:C.visible??!0,alignment:C.alignment??"outside",radius:C.radius??T.radius??4,margin:C.margin??4,overflowX:C.overflowX??!0,overflowY:C.overflowY??!0}),[C,T.radius]),F=xe(()=>{let e=W.color??"#808080";return{visible:W.visible??!1,step:W.step??50,color:e,opacity:W.opacity??.6,hoverColor:W.hoverColor??e,hoverOpacity:W.hoverOpacity??1}},[W]),ge=xe(()=>({enabled:Y.enabled??!0,excludeClasses:Y.excludeClasses??[],excludeSelectors:Y.excludeSelectors??[]}),[Y]),i=xe(()=>({enabled:N.enabled??!0,delay:N.delay??1500,delayOnWheel:N.delayOnWheel??700,initialDelay:N.initialDelay??200}),[N]),[ae,vt]=m(()=>(N.initialDelay??200)>0),b=T.width,yt=r.width,Oe=T.minHeight,X=F.visible,Se=F.step,O=f(()=>{if(!l.current)return;let e=document.activeElement;e&&l.current.contains(e)&&e!==l.current||l.current.focus()},[]);Wt(te,()=>({getScrollContainer:()=>l.current,scrollTo:e=>{l.current&&l.current.scrollTo(e)},get scrollTop(){return l.current?.scrollTop||0},get scrollHeight(){return l.current?.scrollHeight||0},get clientHeight(){return l.current?.clientHeight||0}}),[]);let d=f(()=>{if(s.current){let t=s.current;if(document.contains(t)&&(t.scrollHeight>t.clientHeight+2||t.scrollWidth>t.clientWidth+2))return t;s.current=null}if(!l.current)return null;if(l.current.scrollHeight>l.current.clientHeight+2||l.current.scrollWidth>l.current.clientWidth+2)return s.current=l.current,l.current;if(!pe)return null;let e=l.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let t of e){let o=t;if(o!==l.current&&o.classList.contains("overlay-scrollbar-container"))continue;let a=o.parentElement,n=!1;for(;a&&a!==l.current;){if(a.classList.contains("overlay-scrollbar-container")&&a!==l.current){n=!0;break}a=a.parentElement}if(!n&&(o.scrollHeight>o.clientHeight+2||o.scrollWidth>o.clientWidth+2))return s.current=o,o}return null},[]),V=f(()=>d()!==null,[d]),g=f(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),Ce=f(()=>{Q.current&&(clearTimeout(Q.current),Q.current=null)},[]),rt=f(()=>{ee.current&&(clearTimeout(ee.current),ee.current=null)},[]),xt=f(()=>{Ce(),!(U||B||K||ie.current)&&(g(),x(!1))},[g,Ce,U,B,K]),h=f(e=>{i.enabled&&(g(),be.current=setTimeout(()=>{x(!1),be.current=null},e))},[g,i.enabled]),u=f(()=>{let e=d()??l.current;if(!e){x(!1),Ge(!1),Qe(!1),g();return}!i.enabled&&!ae&&(x(!0),g());let t=e.clientHeight,o=e.scrollHeight,a=e.scrollTop,n=e.clientWidth,c=e.scrollWidth,v=e.scrollLeft,M=o-t>0,p=c-n>0,ce=M||p;Ge(M),Qe(p),ce||(x(!1),g());let ve=0,D=0;if(Te.current){let Z=window.getComputedStyle(Te.current),J=parseFloat(Z.paddingTop)||0;D=parseFloat(Z.paddingBottom)||0,ve=J+D,gt(D)}if(M){let Z=X?b*2+r.margin*4:r.margin*2,J=t-Z+ve,He=t/o,se=Math.max(J*He,Oe),nt=o-t,Lt=J-se,Dt=nt>0?a/nt*Lt:0;qe(se),Re(Dt)}else qe(0),Re(0);let ye=c-n;if(ye>0){let Z=n/c,J=Math.max(n*Z,50),He=n-J,se=ye>0?v/ye*He:0;Ze(J),Je(se)}else Ze(0),Je(0)},[d,g,X,b,Oe,i.enabled,ae]),Tt=f(e=>{e.preventDefault(),e.stopPropagation();let t=d();t&&(Be(!0),ut({y:e.clientY,scrollTop:t.scrollTop}),g(),x(!0),O())},[d,g,O]),Ae=f(e=>{if(!U)return;let t=d();if(!t)return;let o=t.clientHeight,n=t.scrollHeight-o,c=e.clientY-De.y,v=o-fe,M=c/v*n,p=Math.max(0,Math.min(n,De.scrollTop+M));t.scrollTop=p,u()},[U,De,fe,u,d]),Pe=f(()=>{Be(!1),V()&&h(i.delay)},[V,h,i.delay]),wt=f(e=>{if(!j.current)return;let o=j.current.getBoundingClientRect(),a=e.clientY-o.top,n=d();if(!n)return;let c=n.clientHeight,v=n.scrollHeight,p=a/c*(v-c);n.scrollTop=Math.max(0,Math.min(v-c,p)),u(),x(!0),h(i.delay),O()},[u,h,i.delay,d,O]),Mt=f(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current)return;let t=Math.max(0,l.current.scrollTop-Se);l.current.scrollTop=t,u(),x(!0),h(i.delay),O()},[u,h,Se,i.delay,O]),Et=f(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current||!G.current)return;let t=l.current,a=G.current.scrollHeight-t.clientHeight,n=Math.min(a,t.scrollTop+Se);t.scrollTop=n,u(),x(!0),h(i.delay),O()},[u,h,Se,i.delay,O]),St=f(e=>{e.preventDefault(),e.stopPropagation();let t=d();t&&(Ve(!0),pt({x:e.clientX,scrollLeft:t.scrollLeft}),g(),x(!0),O())},[d,g,O]),$e=f(e=>{if(!B)return;let t=d();if(!t)return;let o=t.clientWidth,n=t.scrollWidth-o,c=e.clientX-ke.x,v=o-Ie,M=c/v*n,p=Math.max(0,Math.min(n,ke.scrollLeft+M));t.scrollLeft=p,u()},[B,ke,Ie,u,d]),ze=f(()=>{Ve(!1),V()&&h(i.delay)},[V,h,i.delay]),Ct=f(e=>{if(!j.current)return;let o=j.current.getBoundingClientRect(),a=e.clientX-o.left,n=d();if(!n)return;let c=n.clientWidth,v=n.scrollWidth,p=a/c*(v-c);n.scrollLeft=Math.max(0,Math.min(v-c,p)),u(),x(!0),h(i.delay),O()},[u,h,i.delay,d,O]),Ht=f(e=>{if(!ge.enabled)return;let t=e.target;if(Le(t,ge)||e.button!==0)return;let o=d();o&&(o.scrollHeight<=o.clientHeight&&o.scrollWidth<=o.clientWidth||(e.preventDefault(),ie.current=!0,ht({x:e.clientX,y:e.clientY,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft||0}),g()))},[ge,Le,d,g]),Ne=f(e=>{if(!ie.current&&!K)return;let t=d();if(!t)return;let o=he.x-e.clientX,a=he.y-e.clientY;if(Math.abs(a)<5&&Math.abs(o)<5)return;ie.current&&(ie.current=!1,et(!0)),x(!0);let n=Math.max(0,Math.min(t.scrollHeight-t.clientHeight,he.scrollTop+a)),c=Math.max(0,Math.min(t.scrollWidth-t.clientWidth,he.scrollLeft+o));t.scrollTop=n,t.scrollLeft=c,u()},[K,he,d,u]),Fe=f(()=>{let e=K;ie.current=!1,et(!1),e&&V()&&h(i.delay)},[K,V,h,i.delay]);$(()=>{let e=c=>{if(u(),ae){I&&I(c);return}g(),x(!0),rt();let v=tt?i.delayOnWheel:i.delay;h(v),I&&I(c)},t=()=>{ot(!0),me.current&&clearTimeout(me.current),me.current=setTimeout(()=>{ot(!1)},300),rt(),ee.current=setTimeout(()=>{x(!0),ee.current=null,h(i.delayOnWheel)},50)},o=[],a=d();a&&o.push(a);let n=l.current;return n&&!a&&(o.push(n),n.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(v=>{let M=v;if(M!==n&&M.classList.contains("overlay-scrollbar-container"))return;let p=M.parentElement;for(;p&&p!==n;){if(p.classList.contains("overlay-scrollbar-container")&&p!==n)return;p=p.parentElement}o.push(M)})),o.forEach(c=>{c.addEventListener("scroll",e,{passive:!0}),c.addEventListener("wheel",t,{passive:!0})}),()=>{o.forEach(c=>{c.removeEventListener("scroll",e),c.removeEventListener("wheel",t)}),me.current&&clearTimeout(me.current),ee.current&&clearTimeout(ee.current)}},[d,u,I,g,h,i,tt,ae]),$(()=>{let e=o=>{let a=o.target;if(o.defaultPrevented||a instanceof Element&&Le(a,ge))return;let n=d();if(!n)return;let{key:c}=o,{scrollTop:v,scrollHeight:M,clientHeight:p}=n,ce=M-p,ve=50,D=null;switch(c){case"ArrowUp":o.preventDefault(),D=Math.max(0,v-ve);break;case"ArrowDown":o.preventDefault(),D=Math.min(ce,v+ve);break;case"PageUp":o.preventDefault(),D=Math.max(0,v-p);break;case"PageDown":o.preventDefault(),D=Math.min(ce,v+p);break;case"Home":o.preventDefault(),D=0;break;case"End":o.preventDefault(),D=ce;break;default:return}if(D!==null){let ye=D/ce,Z=X?b*2+r.margin*4:r.margin*2,se=(p-Z-fe)*ye;Re(se),n.scrollTop=D,g(),x(!0),h(i.delay)}},t=l.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[d,X,b,r.margin,fe,g,h,i.delay,ge]),$(()=>(document.addEventListener("mousemove",Ne),document.addEventListener("mouseup",Fe),()=>{document.removeEventListener("mousemove",Ne),document.removeEventListener("mouseup",Fe)}),[K,Ne,Fe]),$(()=>{if(U)return document.addEventListener("mousemove",Ae),document.addEventListener("mouseup",Pe),()=>{document.removeEventListener("mousemove",Ae),document.removeEventListener("mouseup",Pe)}},[U,Ae,Pe]),$(()=>{if(B)return document.addEventListener("mousemove",$e),document.addEventListener("mouseup",ze),()=>{document.removeEventListener("mousemove",$e),document.removeEventListener("mouseup",ze)}},[B,$e,ze]),$(()=>{u();let e=setTimeout(()=>{u()},100);return()=>clearTimeout(e)},[u]),Ot(()=>{mt(!0),u(),!i.enabled&&!ae&&V()&&x(!0)},[V,u,i.enabled,ae]),$(()=>{if(i.initialDelay>0){let e=setTimeout(()=>{vt(!1)},i.initialDelay);return()=>clearTimeout(e)}},[i.initialDelay]),$(()=>{let e=new ResizeObserver(()=>{u()}),t=[];return l.current&&t.push(l.current),G.current&&t.push(G.current),s.current&&document.contains(s.current)&&t.push(s.current),t.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[u]),$(()=>{if(!l.current)return;let e=new MutationObserver(()=>{s.current=null,u()});return e.observe(l.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[u]);let L=Math.max(yt,b);return $(()=>{let e="overlay-scrollbar-webkit-hide",t=document.getElementById(e);t&&t.remove();let o=document.createElement("style");return o.id=e,o.textContent=`
|
|
2
2
|
/* \uBAA8\uB4E0 \uC2A4\uD06C\uB864\uBC14 \uC228\uAE30\uAE30 */
|
|
3
3
|
.overlay-scrollbar-container {
|
|
4
4
|
scrollbar-width: none !important;
|
|
@@ -38,5 +38,10 @@ import{useRef as C,useEffect as L,useState as h,useCallback as p,useMemo as ue,f
|
|
|
38
38
|
.overlay-scrollbar-container .ehfuse-editor-content::-webkit-scrollbar-thumb:hover {
|
|
39
39
|
background: #a1a1a1 !important;
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
/* \uB2F9\uACA8\uC11C \uC0C8\uB85C\uACE0\uCE68 \uC2A4\uD53C\uB108 \uD68C\uC804 */
|
|
42
|
+
@keyframes overlay-scrollbar-ptr-spin {
|
|
43
|
+
from { transform: rotate(0deg); }
|
|
44
|
+
to { transform: rotate(360deg); }
|
|
45
|
+
}
|
|
46
|
+
`,document.head.appendChild(o),()=>{let a=document.getElementById(e);a&&a.remove()}},[]),_e("div",{ref:Te,className:`overlay-scrollbar-wrapper ${E}`,onMouseLeave:xt,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",overflow:"visible",...k},children:[st&&R("div",{className:"overlay-scrollbar-pull-indicator",style:{position:"absolute",top:0,left:"50%",transform:`translate(-50%, ${w-44}px)`,transition:re?"transform 0.15s ease-out":w===0?"transform 0.2s ease-out":"none",width:36,height:36,borderRadius:"50%",background:"#ffffff",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.25)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1001,pointerEvents:"none",opacity:re?1:Math.min(ne*1.5,1)},children:re?R("svg",{width:"20",height:"20",viewBox:"0 0 24 24",style:{animation:"overlay-scrollbar-ptr-spin 0.8s linear infinite"},children:R("circle",{cx:"12",cy:"12",r:"9",fill:"none",stroke:Ue,strokeWidth:"2.5",strokeLinecap:"round",strokeDasharray:"42",strokeDashoffset:"14"})}):R("svg",{width:"20",height:"20",viewBox:"0 0 24 24",style:{transform:`rotate(${ne*270}deg)`,opacity:ne>=1?1:.6},children:R("path",{d:"M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z",fill:Ue})})}),R("div",{ref:l,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:Ht,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:K?"none":"auto",...z},children:R("div",{ref:G,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",boxSizing:"border-box",...y},children:_})}),P&&le&&(r.overflowY??!0)&&_e("div",{ref:j,className:"overlay-scrollbar-track",onMouseEnter:()=>{g(),Q.current=setTimeout(()=>{x(!0),Q.current=null},100)},onMouseLeave:()=>{Ce(),U||h(i.delay)},style:{position:"absolute",top:0,right:0,width:`${L}px`,height:"100%",opacity:we?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[r.visible&&R("div",{className:"overlay-scrollbar-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),wt(e)},style:{position:"absolute",top:X?`${T.width+r.margin*2}px`:`${r.margin}px`,right:r.alignment==="outside"?"0px":`${(L-T.width)/2}px`,width:`${T.width}px`,height:X?`calc(100% - ${T.width*2+r.margin*4}px)`:`calc(100% - ${r.margin*2}px)`,backgroundColor:r.color,borderRadius:`${r.radius}px`,cursor:"pointer"}}),R("div",{ref:oe,className:"overlay-scrollbar-thumb",onMouseDown:Tt,onMouseEnter:()=>Ye(!0),onMouseLeave:()=>Ye(!1),style:{position:"absolute",top:`${(X?b+r.margin*2:r.margin)+dt}px`,right:r.alignment==="outside"?"0px":`${(L-b)/2}px`,width:`${b}px`,height:`${Math.max(fe,Oe)}px`,backgroundColor:Xe||U?T.hoverColor:T.color,opacity:Xe||U?T.hoverOpacity:T.opacity,borderRadius:`${T.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),P&&le&&X&&R("div",{className:"overlay-scrollbar-up-arrow",onClick:Mt,onMouseEnter:()=>Ee("up"),onMouseLeave:()=>Ee(null),style:{position:"absolute",top:`${r.margin}px`,right:r.alignment==="outside"?"0px":`${(L-b)/2}px`,width:`${b}px`,height:`${b}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(b*.75,8)}px`,color:Me==="up"?F.hoverColor:F.color,userSelect:"none",zIndex:1001,opacity:we?Me==="up"?F.hoverOpacity:F.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),P&&le&&X&&R("div",{className:"overlay-scrollbar-down-arrow",onClick:Et,onMouseEnter:()=>Ee("down"),onMouseLeave:()=>Ee(null),style:{position:"absolute",bottom:`${r.margin}px`,right:r.alignment==="outside"?"0px":`${(L-b)/2}px`,width:`${b}px`,height:`${b}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(b*.75,8)}px`,color:Me==="down"?F.hoverColor:F.color,userSelect:"none",zIndex:1001,opacity:we?Me==="down"?F.hoverOpacity:F.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"}),P&&q&&ft&&(r.overflowX??!0)&&_e("div",{className:"overlay-scrollbar-horizontal-track",onMouseEnter:()=>{g(),Q.current=setTimeout(()=>{x(!0),Q.current=null},100)},onMouseLeave:()=>{Ce(),B||h(i.delay)},style:{position:"absolute",bottom:`${bt}px`,left:0,width:"100%",height:`${L}px`,opacity:we?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[r.visible&&R("div",{className:"overlay-scrollbar-horizontal-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),Ct(e)},style:{position:"absolute",bottom:r.alignment==="outside"?"0px":`${(L-b)/2}px`,left:`${r.margin}px`,right:le?r.alignment==="outside"?`${L-r.margin}px`:`${L}px`:`${r.margin}px`,height:`${b}px`,backgroundColor:r.color,borderRadius:`${r.radius}px`,cursor:"pointer"}}),R("div",{className:"overlay-scrollbar-horizontal-thumb",onMouseDown:St,onMouseEnter:()=>Ke(!0),onMouseLeave:()=>Ke(!1),style:{position:"absolute",bottom:r.alignment==="outside"?"0px":`${(L-b)/2}px`,left:`${r.margin+We}px`,right:le?r.alignment==="outside"?`${L-r.margin}px`:`${L}px`:"auto",maxWidth:le?r.alignment==="outside"?`calc(100% - ${r.margin+We+L-r.margin}px)`:`calc(100% - ${r.margin+We+L}px)`:"none",width:`${Math.max(Ie,50)}px`,height:`${b}px`,backgroundColor:je||B?T.hoverColor:T.color,opacity:je||B?T.hoverOpacity:T.opacity,borderRadius:`${T.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]})]})}),ct=_t;export{ct as OverlayScrollbar,ct as default};
|
|
42
47
|
//# sourceMappingURL=index.esm.js.map
|