react-kanca 1.6.0 → 1.6.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/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/package.json +1 -1
- package/dist/index.js +0 -1072
- package/dist/index.js.map +0 -1
- package/dist/index.modern.js +0 -844
- package/dist/index.modern.js.map +0 -1
package/dist/index.modern.js
DELETED
|
@@ -1,844 +0,0 @@
|
|
|
1
|
-
import React, { useState, useEffect, useRef, cloneElement, useCallback, useLayoutEffect, useReducer, Component } from 'react';
|
|
2
|
-
import Cookies from 'js-cookie';
|
|
3
|
-
|
|
4
|
-
const usePageVisible = () => {
|
|
5
|
-
const [isVisible, setIsVisible] = useState(true);
|
|
6
|
-
const handleVisibilityChange = () => {
|
|
7
|
-
setIsVisible(document.visibilityState === 'visible');
|
|
8
|
-
};
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
document.addEventListener('visibilitychange', handleVisibilityChange);
|
|
11
|
-
return () => {
|
|
12
|
-
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
|
13
|
-
};
|
|
14
|
-
}, []);
|
|
15
|
-
return isVisible;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
const useWindowSize = () => {
|
|
19
|
-
const [size, setSize] = useState({
|
|
20
|
-
width: '',
|
|
21
|
-
height: ''
|
|
22
|
-
});
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
const handleResize = () => {
|
|
25
|
-
setSize({
|
|
26
|
-
width: window.innerWidth,
|
|
27
|
-
height: window.innerHeight
|
|
28
|
-
});
|
|
29
|
-
};
|
|
30
|
-
window.addEventListener('resize', handleResize);
|
|
31
|
-
handleResize();
|
|
32
|
-
return () => {
|
|
33
|
-
window.removeEventListener('resize', handleResize);
|
|
34
|
-
};
|
|
35
|
-
}, []);
|
|
36
|
-
return size;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const useDebounce = () => {
|
|
40
|
-
const [debouncedValue, setDebouncedValue] = useState(null);
|
|
41
|
-
const debounce = (value, delay) => {
|
|
42
|
-
const handler = setTimeout(() => {
|
|
43
|
-
if (typeof value === 'function') {
|
|
44
|
-
value();
|
|
45
|
-
} else {
|
|
46
|
-
setDebouncedValue(value);
|
|
47
|
-
}
|
|
48
|
-
}, delay);
|
|
49
|
-
return () => {
|
|
50
|
-
clearTimeout(handler);
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
return [debouncedValue, debounce];
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const usePrevious = value => {
|
|
57
|
-
const ref = useRef();
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
ref.current = value;
|
|
60
|
-
});
|
|
61
|
-
return ref.current;
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
const noop = () => {};
|
|
65
|
-
function on(obj, ...args) {
|
|
66
|
-
if (obj && obj.addEventListener) {
|
|
67
|
-
obj.addEventListener(...args);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
function off(obj, ...args) {
|
|
71
|
-
if (obj && obj.removeEventListener) {
|
|
72
|
-
obj.removeEventListener(...args);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
const isBrowser = typeof window !== 'undefined';
|
|
76
|
-
|
|
77
|
-
const useHover = element => {
|
|
78
|
-
const [state, setState] = useState(false);
|
|
79
|
-
const onMouseEnter = originalOnMouseEnter => event => {
|
|
80
|
-
setState(true);
|
|
81
|
-
};
|
|
82
|
-
const onMouseLeave = originalOnMouseLeave => event => {
|
|
83
|
-
setState(false);
|
|
84
|
-
};
|
|
85
|
-
if (typeof element === 'function') {
|
|
86
|
-
element = element(state);
|
|
87
|
-
}
|
|
88
|
-
const el = cloneElement(element, {
|
|
89
|
-
onMouseEnter: onMouseEnter(),
|
|
90
|
-
onMouseLeave: onMouseLeave()
|
|
91
|
-
});
|
|
92
|
-
return [el, state];
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
const useScrolling = ref => {
|
|
96
|
-
const [scrolling, setScrolling] = useState(false);
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
if (ref.current) {
|
|
99
|
-
let scrollingTimeout;
|
|
100
|
-
const handleScrollEnd = () => {
|
|
101
|
-
setScrolling(false);
|
|
102
|
-
};
|
|
103
|
-
const handleScroll = () => {
|
|
104
|
-
setScrolling(true);
|
|
105
|
-
clearTimeout(scrollingTimeout);
|
|
106
|
-
scrollingTimeout = setTimeout(() => handleScrollEnd(), 150);
|
|
107
|
-
};
|
|
108
|
-
on(ref.current, 'scroll', handleScroll, false);
|
|
109
|
-
return () => {
|
|
110
|
-
if (ref.current) {
|
|
111
|
-
off(ref.current, 'scroll', handleScroll, false);
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
}
|
|
115
|
-
return () => {};
|
|
116
|
-
}, [ref]);
|
|
117
|
-
return scrolling;
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
const useBeforeUnload = (enabled = true, message) => {
|
|
121
|
-
const handler = useCallback(event => {
|
|
122
|
-
const finalEnabled = typeof enabled === 'function' ? enabled() : true;
|
|
123
|
-
if (!finalEnabled) {
|
|
124
|
-
return;
|
|
125
|
-
}
|
|
126
|
-
event.preventDefault();
|
|
127
|
-
if (message) {
|
|
128
|
-
event.returnValue = message;
|
|
129
|
-
}
|
|
130
|
-
return message;
|
|
131
|
-
}, [enabled, message]);
|
|
132
|
-
useEffect(() => {
|
|
133
|
-
if (!enabled) {
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
on(window, 'beforeunload', handler);
|
|
137
|
-
return () => off(window, 'beforeunload', handler);
|
|
138
|
-
}, [enabled, handler]);
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
const useEffectOnce = effect => {
|
|
142
|
-
useEffect(effect, []);
|
|
143
|
-
};
|
|
144
|
-
const useUnmount = fn => {
|
|
145
|
-
const fnRef = useRef(fn);
|
|
146
|
-
fnRef.current = fn;
|
|
147
|
-
useEffectOnce(() => () => fnRef.current());
|
|
148
|
-
};
|
|
149
|
-
const useThrottle = (value, ms = 200) => {
|
|
150
|
-
const [state, setState] = useState(value);
|
|
151
|
-
const timeout = useRef();
|
|
152
|
-
const nextValue = useRef(null);
|
|
153
|
-
const hasNextValue = useRef(0);
|
|
154
|
-
useEffect(() => {
|
|
155
|
-
if (!timeout.current) {
|
|
156
|
-
setState(value);
|
|
157
|
-
const timeoutCallback = () => {
|
|
158
|
-
if (hasNextValue.current) {
|
|
159
|
-
hasNextValue.current = false;
|
|
160
|
-
setState(nextValue.current);
|
|
161
|
-
timeout.current = setTimeout(timeoutCallback, ms);
|
|
162
|
-
} else {
|
|
163
|
-
timeout.current = undefined;
|
|
164
|
-
}
|
|
165
|
-
};
|
|
166
|
-
timeout.current = setTimeout(timeoutCallback, ms);
|
|
167
|
-
} else {
|
|
168
|
-
nextValue.current = value;
|
|
169
|
-
hasNextValue.current = true;
|
|
170
|
-
}
|
|
171
|
-
}, [value]);
|
|
172
|
-
useUnmount(() => {
|
|
173
|
-
timeout.current && clearTimeout(timeout.current);
|
|
174
|
-
});
|
|
175
|
-
return state;
|
|
176
|
-
};
|
|
177
|
-
|
|
178
|
-
const useLocalStorage = (key, initialValue, options) => {
|
|
179
|
-
if (!isBrowser) {
|
|
180
|
-
return [initialValue, noop, noop];
|
|
181
|
-
}
|
|
182
|
-
if (!key) {
|
|
183
|
-
throw new Error('useLocalStorage key may not be falsy');
|
|
184
|
-
}
|
|
185
|
-
const deserializer = options ? options.raw ? value => value : options.deserializer : JSON.parse;
|
|
186
|
-
const initializer = useRef(key => {
|
|
187
|
-
try {
|
|
188
|
-
const serializer = options ? options.raw ? String : options.serializer : JSON.stringify;
|
|
189
|
-
const localStorageValue = localStorage.getItem(key);
|
|
190
|
-
if (localStorageValue !== null) {
|
|
191
|
-
return deserializer(localStorageValue);
|
|
192
|
-
} else {
|
|
193
|
-
initialValue && localStorage.setItem(key, serializer(initialValue));
|
|
194
|
-
return initialValue;
|
|
195
|
-
}
|
|
196
|
-
} catch {
|
|
197
|
-
return initialValue;
|
|
198
|
-
}
|
|
199
|
-
});
|
|
200
|
-
const [state, setState] = useState(() => initializer.current(key));
|
|
201
|
-
useLayoutEffect(() => setState(initializer.current(key)), [key]);
|
|
202
|
-
const set = useCallback(valOrFunc => {
|
|
203
|
-
try {
|
|
204
|
-
const newState = typeof valOrFunc === 'function' ? valOrFunc(state) : valOrFunc;
|
|
205
|
-
if (typeof newState === 'undefined') return;
|
|
206
|
-
let value;
|
|
207
|
-
if (options) {
|
|
208
|
-
if (options.raw) {
|
|
209
|
-
if (typeof newState === 'string') value = newState;else value = JSON.stringify(newState);
|
|
210
|
-
} else if (options.serializer) value = options.serializer(newState);else value = JSON.stringify(newState);
|
|
211
|
-
} else value = JSON.stringify(newState);
|
|
212
|
-
localStorage.setItem(key, value);
|
|
213
|
-
setState(deserializer(value));
|
|
214
|
-
} catch {}
|
|
215
|
-
}, [key, setState]);
|
|
216
|
-
const remove = useCallback(() => {
|
|
217
|
-
try {
|
|
218
|
-
localStorage.removeItem(key);
|
|
219
|
-
setState(undefined);
|
|
220
|
-
} catch {}
|
|
221
|
-
}, [key, setState]);
|
|
222
|
-
return [state, set, remove];
|
|
223
|
-
};
|
|
224
|
-
|
|
225
|
-
const useEqualObject = (obj1, obj2) => {
|
|
226
|
-
if (obj1 === obj2) return true;
|
|
227
|
-
if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) return false;
|
|
228
|
-
const keys1 = Object.keys(obj1);
|
|
229
|
-
const keys2 = Object.keys(obj2);
|
|
230
|
-
if (keys1.length !== keys2.length) return false;
|
|
231
|
-
for (let key of keys1) {
|
|
232
|
-
if (!keys2.includes(key) || !useEqualObject(obj1[key], obj2[key])) return false;
|
|
233
|
-
}
|
|
234
|
-
return true;
|
|
235
|
-
};
|
|
236
|
-
|
|
237
|
-
const useCookie = cookieName => {
|
|
238
|
-
const [value, setValue] = useState(() => Cookies.get(cookieName) || null);
|
|
239
|
-
const updateCookie = useCallback((newValue, options) => {
|
|
240
|
-
Cookies.set(cookieName, newValue, options);
|
|
241
|
-
setValue(newValue);
|
|
242
|
-
}, [cookieName]);
|
|
243
|
-
const deleteCookie = useCallback(() => {
|
|
244
|
-
Cookies.remove(cookieName);
|
|
245
|
-
setValue(null);
|
|
246
|
-
}, [cookieName]);
|
|
247
|
-
return [value, updateCookie, deleteCookie];
|
|
248
|
-
};
|
|
249
|
-
|
|
250
|
-
const useGeolocation = options => {
|
|
251
|
-
const [state, setState] = useState({
|
|
252
|
-
loading: true,
|
|
253
|
-
accuracy: null,
|
|
254
|
-
altitude: null,
|
|
255
|
-
altitudeAccuracy: null,
|
|
256
|
-
heading: null,
|
|
257
|
-
latitude: null,
|
|
258
|
-
longitude: null,
|
|
259
|
-
speed: null,
|
|
260
|
-
timestamp: Date.now()
|
|
261
|
-
});
|
|
262
|
-
let mounted = true;
|
|
263
|
-
let watchId;
|
|
264
|
-
const onEvent = event => {
|
|
265
|
-
if (mounted) {
|
|
266
|
-
setState({
|
|
267
|
-
loading: false,
|
|
268
|
-
accuracy: event.coords.accuracy,
|
|
269
|
-
altitude: event.coords.altitude,
|
|
270
|
-
altitudeAccuracy: event.coords.altitudeAccuracy,
|
|
271
|
-
heading: event.coords.heading,
|
|
272
|
-
latitude: event.coords.latitude,
|
|
273
|
-
longitude: event.coords.longitude,
|
|
274
|
-
speed: event.coords.speed,
|
|
275
|
-
timestamp: event.timestamp
|
|
276
|
-
});
|
|
277
|
-
}
|
|
278
|
-
};
|
|
279
|
-
const onEventError = error => mounted && setState(oldState => ({
|
|
280
|
-
...oldState,
|
|
281
|
-
loading: false,
|
|
282
|
-
error
|
|
283
|
-
}));
|
|
284
|
-
useEffect(() => {
|
|
285
|
-
navigator.geolocation.getCurrentPosition(onEvent, onEventError, options);
|
|
286
|
-
watchId = navigator.geolocation.watchPosition(onEvent, onEventError, options);
|
|
287
|
-
return () => {
|
|
288
|
-
mounted = false;
|
|
289
|
-
navigator.geolocation.clearWatch(watchId);
|
|
290
|
-
};
|
|
291
|
-
}, []);
|
|
292
|
-
return state;
|
|
293
|
-
};
|
|
294
|
-
|
|
295
|
-
const useIsFirstRender = () => {
|
|
296
|
-
const isFirstRender = useRef(true);
|
|
297
|
-
useEffect(() => {
|
|
298
|
-
isFirstRender.current = false;
|
|
299
|
-
}, []);
|
|
300
|
-
return isFirstRender.current;
|
|
301
|
-
};
|
|
302
|
-
|
|
303
|
-
const useConnection = () => {
|
|
304
|
-
const [status, setStatus] = useState(true);
|
|
305
|
-
useEffect(() => {
|
|
306
|
-
const events = ['online', 'offline'];
|
|
307
|
-
const eventHandle = () => setStatus(navigator.online);
|
|
308
|
-
events.forEach(event => window.addEventListener(event, eventHandle));
|
|
309
|
-
return () => {
|
|
310
|
-
events.forEach(event => window.removeEventListener(event, eventHandle));
|
|
311
|
-
};
|
|
312
|
-
}, []);
|
|
313
|
-
return {
|
|
314
|
-
status
|
|
315
|
-
};
|
|
316
|
-
};
|
|
317
|
-
|
|
318
|
-
const useBatteryInfo = () => {
|
|
319
|
-
const [batteryLevel, setBatteryLevel] = useState(null);
|
|
320
|
-
const [isCharging, setIsCharging] = useState(null);
|
|
321
|
-
const [dischargingTime, setDischargingTime] = useState(null);
|
|
322
|
-
useEffect(() => {
|
|
323
|
-
const getBatteryInfo = async () => {
|
|
324
|
-
try {
|
|
325
|
-
const battery = await navigator.getBattery();
|
|
326
|
-
const updateBatteryInfo = () => {
|
|
327
|
-
setBatteryLevel(Math.round(battery.level * 100));
|
|
328
|
-
setIsCharging(battery.charging);
|
|
329
|
-
setDischargingTime(battery.dischargingTime);
|
|
330
|
-
};
|
|
331
|
-
updateBatteryInfo();
|
|
332
|
-
battery.addEventListener('chargingchange', updateBatteryInfo);
|
|
333
|
-
battery.addEventListener('levelchange', updateBatteryInfo);
|
|
334
|
-
battery.addEventListener('chargingtimechange', updateBatteryInfo);
|
|
335
|
-
battery.addEventListener('dischargingtimechange', updateBatteryInfo);
|
|
336
|
-
return () => {
|
|
337
|
-
battery.removeEventListener('chargingchange', updateBatteryInfo);
|
|
338
|
-
battery.removeEventListener('levelchange', updateBatteryInfo);
|
|
339
|
-
battery.removeEventListener('chargingtimechange', updateBatteryInfo);
|
|
340
|
-
battery.removeEventListener('dischargingtimechange', updateBatteryInfo);
|
|
341
|
-
};
|
|
342
|
-
} catch (error) {
|
|
343
|
-
console.error('Batarya bilgisi alınamadı: ' + error.message);
|
|
344
|
-
}
|
|
345
|
-
};
|
|
346
|
-
getBatteryInfo();
|
|
347
|
-
return () => {};
|
|
348
|
-
}, []);
|
|
349
|
-
return {
|
|
350
|
-
batteryLevel,
|
|
351
|
-
isCharging,
|
|
352
|
-
dischargingTime
|
|
353
|
-
};
|
|
354
|
-
};
|
|
355
|
-
|
|
356
|
-
const useCopyToClipboard = () => {
|
|
357
|
-
const [copied, setCopied] = useState(false);
|
|
358
|
-
const [error, setError] = useState(false);
|
|
359
|
-
const copyToClipboard = text => {
|
|
360
|
-
navigator.clipboard.writeText(text).then(() => {
|
|
361
|
-
setCopied(true);
|
|
362
|
-
}).catch(err => {
|
|
363
|
-
setError(err);
|
|
364
|
-
});
|
|
365
|
-
};
|
|
366
|
-
return {
|
|
367
|
-
copied,
|
|
368
|
-
error,
|
|
369
|
-
copyToClipboard
|
|
370
|
-
};
|
|
371
|
-
};
|
|
372
|
-
|
|
373
|
-
const useMedia = (width = 1024) => {
|
|
374
|
-
const [screenStatus, setScreenStatus] = useState(window.matchMedia(`(max-width: ${width}px)`).matches);
|
|
375
|
-
useEffect(() => {
|
|
376
|
-
const matchMedia = window.matchMedia(`(max-width: ${width}px)`);
|
|
377
|
-
const onChangeHandle = e => {
|
|
378
|
-
console.log(e.matches);
|
|
379
|
-
setScreenStatus(e.matches);
|
|
380
|
-
};
|
|
381
|
-
matchMedia.addEventListener('change', onChangeHandle);
|
|
382
|
-
});
|
|
383
|
-
return screenStatus;
|
|
384
|
-
};
|
|
385
|
-
|
|
386
|
-
const useClickOutside = (ref, callback) => {
|
|
387
|
-
const handleClick = e => {
|
|
388
|
-
if (ref.current && !ref.current.contains(e.target)) {
|
|
389
|
-
callback();
|
|
390
|
-
}
|
|
391
|
-
};
|
|
392
|
-
useEffect(() => {
|
|
393
|
-
document.addEventListener('click', handleClick);
|
|
394
|
-
return () => {
|
|
395
|
-
document.removeEventListener('click', handleClick);
|
|
396
|
-
};
|
|
397
|
-
});
|
|
398
|
-
};
|
|
399
|
-
|
|
400
|
-
const useColorScheme = () => {
|
|
401
|
-
const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
|
|
402
|
-
useEffect(() => {
|
|
403
|
-
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
404
|
-
const listener = e => {
|
|
405
|
-
setColorScheme(e.matches ? 'dark' : 'light');
|
|
406
|
-
};
|
|
407
|
-
mediaQuery.addEventListener('change', listener);
|
|
408
|
-
return () => {
|
|
409
|
-
mediaQuery.removeEventListener('change', listener);
|
|
410
|
-
};
|
|
411
|
-
}, []);
|
|
412
|
-
function getInitialColorScheme() {
|
|
413
|
-
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
414
|
-
return isDarkMode ? 'dark' : 'light';
|
|
415
|
-
}
|
|
416
|
-
return colorScheme;
|
|
417
|
-
};
|
|
418
|
-
|
|
419
|
-
const useFullScreen = () => {
|
|
420
|
-
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
421
|
-
const enterFullScreen = () => {
|
|
422
|
-
if (document.documentElement.requestFullscreen) {
|
|
423
|
-
document.documentElement.requestFullscreen();
|
|
424
|
-
} else if (document.documentElement.mozRequestFullScreen) {
|
|
425
|
-
document.documentElement.mozRequestFullScreen();
|
|
426
|
-
} else if (document.documentElement.webkitRequestFullscreen) {
|
|
427
|
-
document.documentElement.webkitRequestFullscreen();
|
|
428
|
-
} else if (document.documentElement.msRequestFullscreen) {
|
|
429
|
-
document.documentElement.msRequestFullscreen();
|
|
430
|
-
}
|
|
431
|
-
setIsFullScreen(true);
|
|
432
|
-
};
|
|
433
|
-
const exitFullScreen = () => {
|
|
434
|
-
if (document.exitFullscreen) {
|
|
435
|
-
document.exitFullscreen();
|
|
436
|
-
} else if (document.mozCancelFullScreen) {
|
|
437
|
-
document.mozCancelFullScreen();
|
|
438
|
-
} else if (document.webkitExitFullscreen) {
|
|
439
|
-
document.webkitExitFullscreen();
|
|
440
|
-
} else if (document.msExitFullscreen) {
|
|
441
|
-
document.msExitFullscreen();
|
|
442
|
-
}
|
|
443
|
-
setIsFullScreen(false);
|
|
444
|
-
};
|
|
445
|
-
return {
|
|
446
|
-
isFullScreen,
|
|
447
|
-
enterFullScreen,
|
|
448
|
-
exitFullScreen
|
|
449
|
-
};
|
|
450
|
-
};
|
|
451
|
-
|
|
452
|
-
const useSessionStorage = (key, initialValue) => {
|
|
453
|
-
const [storedValue, setStoredValue] = useState(() => {
|
|
454
|
-
try {
|
|
455
|
-
const item = window.sessionStorage.getItem(key);
|
|
456
|
-
return item ? JSON.parse(item) : initialValue;
|
|
457
|
-
} catch (error) {
|
|
458
|
-
console.error(error);
|
|
459
|
-
return initialValue;
|
|
460
|
-
}
|
|
461
|
-
});
|
|
462
|
-
const setValue = value => {
|
|
463
|
-
try {
|
|
464
|
-
setStoredValue(value);
|
|
465
|
-
window.sessionStorage.setItem(key, JSON.stringify(value));
|
|
466
|
-
} catch (error) {
|
|
467
|
-
console.error(error);
|
|
468
|
-
}
|
|
469
|
-
};
|
|
470
|
-
return [storedValue, setValue];
|
|
471
|
-
};
|
|
472
|
-
|
|
473
|
-
const useScrollLock = lock => {
|
|
474
|
-
useEffect(() => {
|
|
475
|
-
if (lock) {
|
|
476
|
-
document.body.style.overflow = 'hidden';
|
|
477
|
-
} else {
|
|
478
|
-
document.body.style.overflow = 'unset';
|
|
479
|
-
}
|
|
480
|
-
return () => {
|
|
481
|
-
document.body.style.overflow = 'unset';
|
|
482
|
-
};
|
|
483
|
-
}, [lock]);
|
|
484
|
-
};
|
|
485
|
-
|
|
486
|
-
const usePreferredLanguage = () => {
|
|
487
|
-
const [preferredLanguage, setPreferredLanguage] = useState('');
|
|
488
|
-
useEffect(() => {
|
|
489
|
-
const language = navigator.language || navigator.userLanguage;
|
|
490
|
-
setPreferredLanguage(language);
|
|
491
|
-
}, []);
|
|
492
|
-
return preferredLanguage;
|
|
493
|
-
};
|
|
494
|
-
|
|
495
|
-
function useMousePageLeave(onPageLeave) {
|
|
496
|
-
useEffect(() => {
|
|
497
|
-
document.documentElement.addEventListener('mouseleave', onPageLeave);
|
|
498
|
-
return () => document.documentElement.removeEventListener('mouseleave', onPageLeave);
|
|
499
|
-
}, []);
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
const usePageLeave = onLeave => {
|
|
503
|
-
useEffect(() => {
|
|
504
|
-
const handleBeforeUnload = event => {
|
|
505
|
-
const returnValue = onLeave();
|
|
506
|
-
if (returnValue) {
|
|
507
|
-
event.preventDefault();
|
|
508
|
-
event.returnValue = returnValue;
|
|
509
|
-
return returnValue;
|
|
510
|
-
}
|
|
511
|
-
};
|
|
512
|
-
window.addEventListener('beforeunload', handleBeforeUnload);
|
|
513
|
-
return () => {
|
|
514
|
-
window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
515
|
-
};
|
|
516
|
-
}, [onLeave]);
|
|
517
|
-
};
|
|
518
|
-
|
|
519
|
-
const useForceUpdate = () => {
|
|
520
|
-
const [, setTick] = useState(0);
|
|
521
|
-
const update = useCallback(() => {
|
|
522
|
-
setTick(tick => tick + 1);
|
|
523
|
-
}, []);
|
|
524
|
-
return update;
|
|
525
|
-
};
|
|
526
|
-
|
|
527
|
-
const useInterval = (callback, delay) => {
|
|
528
|
-
const savedCallback = useRef(() => {});
|
|
529
|
-
useEffect(() => {
|
|
530
|
-
savedCallback.current = callback;
|
|
531
|
-
});
|
|
532
|
-
useEffect(() => {
|
|
533
|
-
if (delay !== null) {
|
|
534
|
-
const interval = setInterval(() => savedCallback.current(), delay || 0);
|
|
535
|
-
return () => clearInterval(interval);
|
|
536
|
-
}
|
|
537
|
-
return undefined;
|
|
538
|
-
}, [delay]);
|
|
539
|
-
};
|
|
540
|
-
|
|
541
|
-
const useIntersectionObserver = (targetRef, options) => {
|
|
542
|
-
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
543
|
-
useEffect(() => {
|
|
544
|
-
const observer = new IntersectionObserver(([entry]) => {
|
|
545
|
-
setIsIntersecting(entry.isIntersecting);
|
|
546
|
-
}, options);
|
|
547
|
-
if (targetRef.current) {
|
|
548
|
-
observer.observe(targetRef.current);
|
|
549
|
-
}
|
|
550
|
-
return () => {
|
|
551
|
-
if (targetRef.current) {
|
|
552
|
-
observer.unobserve(targetRef.current);
|
|
553
|
-
}
|
|
554
|
-
};
|
|
555
|
-
}, [targetRef, options]);
|
|
556
|
-
return isIntersecting;
|
|
557
|
-
};
|
|
558
|
-
|
|
559
|
-
const useMobileLandscape = () => {
|
|
560
|
-
const [isLandscape, setIsLandscape] = useState(false);
|
|
561
|
-
const [isMobile, setIsMobile] = useState(false);
|
|
562
|
-
const [isMobileLandscape, setIsMobileLandscape] = useState(false);
|
|
563
|
-
const handleResize = () => {
|
|
564
|
-
const landscape = window.innerWidth > window.innerHeight;
|
|
565
|
-
const mobile = window.innerWidth <= 996;
|
|
566
|
-
setIsLandscape(landscape);
|
|
567
|
-
setIsMobile(mobile);
|
|
568
|
-
setIsMobileLandscape(landscape && mobile);
|
|
569
|
-
};
|
|
570
|
-
useEffect(() => {
|
|
571
|
-
handleResize();
|
|
572
|
-
window.addEventListener('resize', handleResize);
|
|
573
|
-
return () => {
|
|
574
|
-
window.removeEventListener('resize', handleResize);
|
|
575
|
-
};
|
|
576
|
-
}, []);
|
|
577
|
-
return {
|
|
578
|
-
isMobileLandscape,
|
|
579
|
-
isLandscape,
|
|
580
|
-
isMobile
|
|
581
|
-
};
|
|
582
|
-
};
|
|
583
|
-
|
|
584
|
-
const useOnlineStatus = () => {
|
|
585
|
-
const [isOnline, setIsOnline] = useState(navigator.onLine);
|
|
586
|
-
useEffect(() => {
|
|
587
|
-
const handleOnline = () => setIsOnline(true);
|
|
588
|
-
const handleOffline = () => setIsOnline(false);
|
|
589
|
-
window.addEventListener('online', handleOnline);
|
|
590
|
-
window.addEventListener('offline', handleOffline);
|
|
591
|
-
return () => {
|
|
592
|
-
window.removeEventListener('online', handleOnline);
|
|
593
|
-
window.removeEventListener('offline', handleOffline);
|
|
594
|
-
};
|
|
595
|
-
}, []);
|
|
596
|
-
return isOnline;
|
|
597
|
-
};
|
|
598
|
-
|
|
599
|
-
const useScrollToElement = () => {
|
|
600
|
-
const scrollToElement = useCallback((selectorOrRef, options = {}) => {
|
|
601
|
-
let element;
|
|
602
|
-
if (typeof selectorOrRef === 'string') {
|
|
603
|
-
element = document.querySelector(selectorOrRef);
|
|
604
|
-
} else if (selectorOrRef.current) {
|
|
605
|
-
element = selectorOrRef.current;
|
|
606
|
-
}
|
|
607
|
-
if (element) {
|
|
608
|
-
element.scrollIntoView({
|
|
609
|
-
behavior: 'smooth',
|
|
610
|
-
...options
|
|
611
|
-
});
|
|
612
|
-
}
|
|
613
|
-
}, []);
|
|
614
|
-
return scrollToElement;
|
|
615
|
-
};
|
|
616
|
-
|
|
617
|
-
const useStateValidator = (state, validator, initialState = [undefined]) => {
|
|
618
|
-
const validatorInner = useRef(validator);
|
|
619
|
-
const stateInner = useRef(state);
|
|
620
|
-
validatorInner.current = validator;
|
|
621
|
-
stateInner.current = state;
|
|
622
|
-
const [validity, setValidity] = useState(initialState);
|
|
623
|
-
const validate = useCallback(() => {
|
|
624
|
-
if (validatorInner.current.length >= 2) {
|
|
625
|
-
validatorInner.current(stateInner.current, setValidity);
|
|
626
|
-
} else {
|
|
627
|
-
setValidity(validatorInner.current(stateInner.current));
|
|
628
|
-
}
|
|
629
|
-
}, [setValidity]);
|
|
630
|
-
useEffect(() => {
|
|
631
|
-
validate();
|
|
632
|
-
}, [state]);
|
|
633
|
-
return [validity, validate];
|
|
634
|
-
};
|
|
635
|
-
|
|
636
|
-
const useMultiStateValidator = (states, validator, initialValidity = [undefined]) => {
|
|
637
|
-
if (typeof states !== 'object') {
|
|
638
|
-
throw new Error("state'in bir nesne ya da dizi olması beklenirken -> " + typeof states);
|
|
639
|
-
}
|
|
640
|
-
const validatorInner = useRef(validator);
|
|
641
|
-
const statesInner = useRef(states);
|
|
642
|
-
validatorInner.current = validator;
|
|
643
|
-
statesInner.current = states;
|
|
644
|
-
const [validity, setValidity] = useState(initialValidity);
|
|
645
|
-
const validate = useCallback(() => {
|
|
646
|
-
if (validatorInner.current.length >= 2) {
|
|
647
|
-
validatorInner.current(statesInner.current, setValidity);
|
|
648
|
-
} else {
|
|
649
|
-
setValidity(validatorInner.current(statesInner.current));
|
|
650
|
-
}
|
|
651
|
-
}, [setValidity]);
|
|
652
|
-
useEffect(() => {
|
|
653
|
-
validate();
|
|
654
|
-
}, Object.values(states));
|
|
655
|
-
return [validity, validate];
|
|
656
|
-
};
|
|
657
|
-
|
|
658
|
-
const useWindowScroll = () => {
|
|
659
|
-
const [state, setState] = useState(() => ({
|
|
660
|
-
x: isBrowser ? window.pageXOffset : 0,
|
|
661
|
-
y: isBrowser ? window.pageYOffset : 0
|
|
662
|
-
}));
|
|
663
|
-
useEffect(() => {
|
|
664
|
-
const handler = () => {
|
|
665
|
-
setState(state => {
|
|
666
|
-
const {
|
|
667
|
-
pageXOffset,
|
|
668
|
-
pageYOffset
|
|
669
|
-
} = window;
|
|
670
|
-
return state.x !== pageXOffset || state.y !== pageYOffset ? {
|
|
671
|
-
x: pageXOffset,
|
|
672
|
-
y: pageYOffset
|
|
673
|
-
} : state;
|
|
674
|
-
});
|
|
675
|
-
};
|
|
676
|
-
handler();
|
|
677
|
-
on(window, 'scroll', handler, {
|
|
678
|
-
capture: false,
|
|
679
|
-
passive: true
|
|
680
|
-
});
|
|
681
|
-
return () => {
|
|
682
|
-
off(window, 'scroll', handler);
|
|
683
|
-
};
|
|
684
|
-
}, []);
|
|
685
|
-
return state;
|
|
686
|
-
};
|
|
687
|
-
|
|
688
|
-
const useSelection = () => {
|
|
689
|
-
const elementRef = useRef(null);
|
|
690
|
-
const getSelectedText = () => {
|
|
691
|
-
if (elementRef.current) {
|
|
692
|
-
const selection = window.getSelection();
|
|
693
|
-
const range = selection.getRangeAt(0);
|
|
694
|
-
return range.toString();
|
|
695
|
-
}
|
|
696
|
-
return '';
|
|
697
|
-
};
|
|
698
|
-
return {
|
|
699
|
-
elementRef,
|
|
700
|
-
getSelectedText
|
|
701
|
-
};
|
|
702
|
-
};
|
|
703
|
-
|
|
704
|
-
const useUpdateEffect = (effect, dependencies) => {
|
|
705
|
-
const isFirstRender = useIsFirstRender();
|
|
706
|
-
useEffect(() => {
|
|
707
|
-
if (!isFirstRender) {
|
|
708
|
-
return effect();
|
|
709
|
-
}
|
|
710
|
-
}, dependencies);
|
|
711
|
-
};
|
|
712
|
-
|
|
713
|
-
const initialState = {
|
|
714
|
-
data: null,
|
|
715
|
-
loading: true,
|
|
716
|
-
error: null
|
|
717
|
-
};
|
|
718
|
-
const fetchReducer = (state, action) => {
|
|
719
|
-
switch (action.type) {
|
|
720
|
-
case 'FETCH_INIT':
|
|
721
|
-
return {
|
|
722
|
-
...state,
|
|
723
|
-
loading: true,
|
|
724
|
-
error: null
|
|
725
|
-
};
|
|
726
|
-
case 'FETCH_SUCCESS':
|
|
727
|
-
return {
|
|
728
|
-
...state,
|
|
729
|
-
loading: false,
|
|
730
|
-
data: action.payload
|
|
731
|
-
};
|
|
732
|
-
case 'FETCH_FAILURE':
|
|
733
|
-
return {
|
|
734
|
-
...state,
|
|
735
|
-
loading: false,
|
|
736
|
-
error: action.payload
|
|
737
|
-
};
|
|
738
|
-
default:
|
|
739
|
-
throw new Error();
|
|
740
|
-
}
|
|
741
|
-
};
|
|
742
|
-
const useFetch = (url, options) => {
|
|
743
|
-
const [state, dispatch] = useReducer(fetchReducer, initialState);
|
|
744
|
-
useEffect(() => {
|
|
745
|
-
if (!url) return;
|
|
746
|
-
const fetchData = async () => {
|
|
747
|
-
dispatch({
|
|
748
|
-
type: 'FETCH_INIT'
|
|
749
|
-
});
|
|
750
|
-
try {
|
|
751
|
-
const response = await fetch(url, options);
|
|
752
|
-
if (!response.ok) {
|
|
753
|
-
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
754
|
-
}
|
|
755
|
-
const result = await response.json();
|
|
756
|
-
dispatch({
|
|
757
|
-
type: 'FETCH_SUCCESS',
|
|
758
|
-
payload: result
|
|
759
|
-
});
|
|
760
|
-
} catch (error) {
|
|
761
|
-
dispatch({
|
|
762
|
-
type: 'FETCH_FAILURE',
|
|
763
|
-
payload: error.message
|
|
764
|
-
});
|
|
765
|
-
}
|
|
766
|
-
};
|
|
767
|
-
fetchData();
|
|
768
|
-
}, [url, options]);
|
|
769
|
-
return state;
|
|
770
|
-
};
|
|
771
|
-
|
|
772
|
-
class ErrorBoundaryKanca extends Component {
|
|
773
|
-
constructor(props) {
|
|
774
|
-
super(props);
|
|
775
|
-
this.state = {
|
|
776
|
-
hasError: false
|
|
777
|
-
};
|
|
778
|
-
}
|
|
779
|
-
static getDerivedStateFromError(error) {
|
|
780
|
-
return {
|
|
781
|
-
hasError: true
|
|
782
|
-
};
|
|
783
|
-
}
|
|
784
|
-
componentDidCatch(error, info) {
|
|
785
|
-
console.error('Hata:', error, info);
|
|
786
|
-
}
|
|
787
|
-
render() {
|
|
788
|
-
if (this.state.hasError) {
|
|
789
|
-
const fallback = this.props.fallback;
|
|
790
|
-
if (typeof fallback === 'function') {
|
|
791
|
-
return fallback();
|
|
792
|
-
}
|
|
793
|
-
return /*#__PURE__*/React.createElement("h1", null, fallback || 'Bir hata meydana geldi. Lütfen daha sonra tekrar deneyin.');
|
|
794
|
-
}
|
|
795
|
-
return this.props.children;
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
|
|
799
|
-
const useURLSearchParams = () => {
|
|
800
|
-
const [searchParams, setSearchParams] = useState(new URLSearchParams(window.location.search));
|
|
801
|
-
useEffect(() => {
|
|
802
|
-
const handlePopState = () => {
|
|
803
|
-
setSearchParams(new URLSearchParams(window.location.search));
|
|
804
|
-
};
|
|
805
|
-
window.addEventListener('popstate', handlePopState);
|
|
806
|
-
return () => {
|
|
807
|
-
window.removeEventListener('popstate', handlePopState);
|
|
808
|
-
};
|
|
809
|
-
}, []);
|
|
810
|
-
const updateSearchParams = newParams => {
|
|
811
|
-
const params = new URLSearchParams(searchParams);
|
|
812
|
-
Object.keys(newParams).forEach(key => {
|
|
813
|
-
if (newParams[key] === null) {
|
|
814
|
-
params.delete(key);
|
|
815
|
-
} else {
|
|
816
|
-
params.set(key, newParams[key]);
|
|
817
|
-
}
|
|
818
|
-
});
|
|
819
|
-
const newUrl = `${window.location.pathname}?${params.toString()}`;
|
|
820
|
-
window.history.pushState({}, '', newUrl);
|
|
821
|
-
setSearchParams(params);
|
|
822
|
-
};
|
|
823
|
-
return [searchParams, updateSearchParams];
|
|
824
|
-
};
|
|
825
|
-
|
|
826
|
-
const useToggle = (initialValue = false) => {
|
|
827
|
-
const [value, setValue] = useState(initialValue);
|
|
828
|
-
const toggle = () => {
|
|
829
|
-
setValue(prevValue => !prevValue);
|
|
830
|
-
};
|
|
831
|
-
return [value, toggle];
|
|
832
|
-
};
|
|
833
|
-
|
|
834
|
-
const useDocumentTitle = title => {
|
|
835
|
-
useEffect(() => {
|
|
836
|
-
document.title = title;
|
|
837
|
-
return () => {
|
|
838
|
-
document.title = 'react-kanca';
|
|
839
|
-
};
|
|
840
|
-
}, [title]);
|
|
841
|
-
};
|
|
842
|
-
|
|
843
|
-
export { ErrorBoundaryKanca, useBatteryInfo, useBeforeUnload, useClickOutside, useColorScheme, useConnection, useCookie, useCopyToClipboard, useDebounce, useDocumentTitle, useEqualObject, useFetch, useForceUpdate, useFullScreen, useGeolocation, useHover, useIntersectionObserver, useInterval, useIsFirstRender, useLocalStorage, useMedia, useMobileLandscape, useMousePageLeave, useMultiStateValidator, useOnlineStatus, usePageLeave, usePageVisible, usePreferredLanguage, usePrevious, useScrollLock, useScrollToElement, useScrolling, useSelection, useSessionStorage, useStateValidator, useThrottle, useToggle, useURLSearchParams, useUpdateEffect, useWindowScroll, useWindowSize };
|
|
844
|
-
//# sourceMappingURL=index.modern.js.map
|