@watcha-authentic/react-slider 0.1.4 → 0.1.5
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.
|
@@ -19,7 +19,7 @@ const _slidercontextprovider = require("../context/slider-context-provider");
|
|
|
19
19
|
* - 드래그로 페이지 전환을 트리거하는 임계값 비율 (아이템 너비 기준)
|
|
20
20
|
*/ const CAN_SCROLL_THRESHOLD_RATIO = 0.15;
|
|
21
21
|
const DEFAULT_SCROLL_THRESHOLD = 125;
|
|
22
|
-
const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
|
|
22
|
+
const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", a11yOptions, defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
|
|
23
23
|
const stableOnIndexChange = (0, _reacteventcallback.useEventCallback)(onIndexChange);
|
|
24
24
|
/**
|
|
25
25
|
* - 아이템이 부족할 경우 복제하여 확장된 아이템 배열을 생성합니다.
|
|
@@ -73,7 +73,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
|
|
|
73
73
|
const lastSliderInfoCurrentIndex = (0, _react.useRef)(sliderInfo.currentIndex);
|
|
74
74
|
const animateNow = (0, _react.useRef)(false);
|
|
75
75
|
const animateChecker = (0, _react.useRef)(undefined);
|
|
76
|
-
const capturedDefaultIndex = (0, _react.useRef)(defaultIndex);
|
|
77
76
|
const stopAnimateCheck = (0, _react.useCallback)(()=>{
|
|
78
77
|
clearTimeout(animateChecker.current);
|
|
79
78
|
animateChecker.current = undefined;
|
|
@@ -441,7 +440,8 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
|
|
|
441
440
|
event.preventDefault();
|
|
442
441
|
doNext();
|
|
443
442
|
}
|
|
444
|
-
}
|
|
443
|
+
},
|
|
444
|
+
options: a11yOptions
|
|
445
445
|
});
|
|
446
446
|
(0, _react.useImperativeHandle)(ref, (0, _react.useCallback)(()=>{
|
|
447
447
|
return {
|
|
@@ -9,7 +9,7 @@ import { SliderItemContextProvider } from "../context/slider-context-provider.js
|
|
|
9
9
|
* - 드래그로 페이지 전환을 트리거하는 임계값 비율 (아이템 너비 기준)
|
|
10
10
|
*/ const CAN_SCROLL_THRESHOLD_RATIO = 0.15;
|
|
11
11
|
const DEFAULT_SCROLL_THRESHOLD = 125;
|
|
12
|
-
const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
|
|
12
|
+
const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "ease", a11yOptions, defaultIndex = 0, enableDrag = true, gap = 0, itemProps, contentProps, items, visibleCount = 1, disableDraggableItems = true, wrapProps, onCreateItemView, onDraggingNow, onIndexChange, onItemKey }, ref)=>{
|
|
13
13
|
const stableOnIndexChange = useEventCallback(onIndexChange);
|
|
14
14
|
/**
|
|
15
15
|
* - 아이템이 부족할 경우 복제하여 확장된 아이템 배열을 생성합니다.
|
|
@@ -63,7 +63,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
|
|
|
63
63
|
const lastSliderInfoCurrentIndex = useRef(sliderInfo.currentIndex);
|
|
64
64
|
const animateNow = useRef(false);
|
|
65
65
|
const animateChecker = useRef(undefined);
|
|
66
|
-
const capturedDefaultIndex = useRef(defaultIndex);
|
|
67
66
|
const stopAnimateCheck = useCallback(()=>{
|
|
68
67
|
clearTimeout(animateChecker.current);
|
|
69
68
|
animateChecker.current = undefined;
|
|
@@ -431,7 +430,8 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
|
|
|
431
430
|
event.preventDefault();
|
|
432
431
|
doNext();
|
|
433
432
|
}
|
|
434
|
-
}
|
|
433
|
+
},
|
|
434
|
+
options: a11yOptions
|
|
435
435
|
});
|
|
436
436
|
useImperativeHandle(ref, useCallback(()=>{
|
|
437
437
|
return {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type AccessibilityOptions } from "@watcha-authentic/react-a11y";
|
|
1
2
|
import type { CSSProperties } from "react";
|
|
2
3
|
import type { SlideTriggerEvent } from "../../script/type/slider-types";
|
|
3
4
|
export type SliderRef = HTMLUListElement & {
|
|
@@ -53,6 +54,7 @@ type SliderProps<ItemType> = {
|
|
|
53
54
|
*/
|
|
54
55
|
disableDraggableItems?: boolean;
|
|
55
56
|
onDraggingNow?: (isDragging: boolean) => void;
|
|
57
|
+
a11yOptions?: AccessibilityOptions<HTMLUListElement>;
|
|
56
58
|
};
|
|
57
59
|
/**
|
|
58
60
|
* # 루프 슬라이더 컴포넌트
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"slider",
|
|
7
7
|
"swiper"
|
|
8
8
|
],
|
|
9
|
-
"version": "0.1.
|
|
9
|
+
"version": "0.1.5",
|
|
10
10
|
"homepage": "https://github.com/frograms/bistro-house/tree/master/packages/react-slider#readme",
|
|
11
11
|
"author": {
|
|
12
12
|
"name": "@watcha-authentic#web-dev-group",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"dist"
|
|
50
50
|
],
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@watcha-authentic/react-a11y": "^0.1.
|
|
52
|
+
"@watcha-authentic/react-a11y": "^0.1.4",
|
|
53
53
|
"@watcha-authentic/react-event-callback": "^0.1.0",
|
|
54
54
|
"@watcha-authentic/react-motion": "^0.1.0"
|
|
55
55
|
},
|