@watcha-authentic/react-slider 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/component/view/slider.js +41 -25
  2. package/dist/esm/component/view/slider.js +41 -25
  3. package/dist/type/component/view/slider.d.ts +2 -0
  4. package/package.json +2 -2
package/dist/cjs/component/view/slider.js CHANGED
@@ -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;
@@ -317,24 +316,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
317
316
  }, [
318
317
  extendedItems.length
319
318
  ]);
320
- /**
321
- * - extendedItems 프롭스에 의한 값을 초기화 합니다.
322
- */ (0, _react.useLayoutEffect)(()=>{
323
- setSliderInfo((prevSliderInfo)=>{
324
- return {
325
- ...prevSliderInfo,
326
- elementStates: getNewStatesByItems({
327
- centerIndex: prevSliderInfo.currentIndex,
328
- itemIndexs: extendedItems.map((_, index)=>index),
329
- prevStates: prevSliderInfo.elementStates
330
- })
331
- };
332
- });
333
- }, [
334
- calcElementState,
335
- extendedItems,
336
- getNewStatesByItems
337
- ]);
338
319
  const handleSwipe = (0, _react.useCallback)(async ()=>{
339
320
  lastSlideTriggerEvent.current = "swipe";
340
321
  await updateStateByPageIndex({
@@ -347,6 +328,41 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
347
328
  updateStateByPageIndex
348
329
  ]);
349
330
  /**
331
+ * - 리사이즈 이벤트에 따라 아이템들의 위치를 초기화 합니다. (from extendedItems)
332
+ * - 스크롤 임계값을 업데이트 합니다.
333
+ */ (0, _react.useLayoutEffect)(()=>{
334
+ const wrapElement = wrapRef.current;
335
+ if (!wrapElement) {
336
+ return;
337
+ }
338
+ const handleResize = ()=>{
339
+ requestAnimationFrame(()=>{
340
+ // 리사이즈 이벤트에 따라 아이템들의 위치를 초기화 합니다.
341
+ setSliderInfo((prevSliderInfo)=>{
342
+ return {
343
+ ...prevSliderInfo,
344
+ elementStates: getNewStatesByItems({
345
+ centerIndex: prevSliderInfo.currentIndex,
346
+ itemIndexs: extendedItems.map((_, index)=>index),
347
+ prevStates: prevSliderInfo.elementStates
348
+ })
349
+ };
350
+ });
351
+ // 스크롤 임계값 업데이트
352
+ const { width } = wrapElement.getBoundingClientRect();
353
+ canScrollThreshold.current = width * CAN_SCROLL_THRESHOLD_RATIO;
354
+ });
355
+ };
356
+ handleResize();
357
+ window.addEventListener("resize", handleResize);
358
+ return ()=>{
359
+ window.removeEventListener("resize", handleResize);
360
+ };
361
+ }, [
362
+ extendedItems,
363
+ getNewStatesByItems
364
+ ]);
365
+ /**
350
366
  * - currentIndex 변경 시 애니메이션을 적용합니다.
351
367
  * - doNext/doPrev 또는 외부 index prop 변경 모두 처리합니다.
352
368
  */ (0, _react.useLayoutEffect)(()=>{
@@ -441,14 +457,14 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
441
457
  event.preventDefault();
442
458
  doNext();
443
459
  }
444
- }
460
+ },
461
+ options: a11yOptions
445
462
  });
446
463
  (0, _react.useImperativeHandle)(ref, (0, _react.useCallback)(()=>{
447
- return {
464
+ return Object.assign(wrapRef.current, {
448
465
  doNext,
449
- doPrev,
450
- ...wrapRef.current
451
- };
466
+ doPrev
467
+ });
452
468
  }, [
453
469
  doNext,
454
470
  doPrev
package/dist/esm/component/view/slider.js CHANGED
@@ -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;
@@ -307,24 +306,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
307
306
  }, [
308
307
  extendedItems.length
309
308
  ]);
310
- /**
311
- * - extendedItems 프롭스에 의한 값을 초기화 합니다.
312
- */ useLayoutEffect(()=>{
313
- setSliderInfo((prevSliderInfo)=>{
314
- return {
315
- ...prevSliderInfo,
316
- elementStates: getNewStatesByItems({
317
- centerIndex: prevSliderInfo.currentIndex,
318
- itemIndexs: extendedItems.map((_, index)=>index),
319
- prevStates: prevSliderInfo.elementStates
320
- })
321
- };
322
- });
323
- }, [
324
- calcElementState,
325
- extendedItems,
326
- getNewStatesByItems
327
- ]);
328
309
  const handleSwipe = useCallback(async ()=>{
329
310
  lastSlideTriggerEvent.current = "swipe";
330
311
  await updateStateByPageIndex({
@@ -337,6 +318,41 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
337
318
  updateStateByPageIndex
338
319
  ]);
339
320
  /**
321
+ * - 리사이즈 이벤트에 따라 아이템들의 위치를 초기화 합니다. (from extendedItems)
322
+ * - 스크롤 임계값을 업데이트 합니다.
323
+ */ useLayoutEffect(()=>{
324
+ const wrapElement = wrapRef.current;
325
+ if (!wrapElement) {
326
+ return;
327
+ }
328
+ const handleResize = ()=>{
329
+ requestAnimationFrame(()=>{
330
+ // 리사이즈 이벤트에 따라 아이템들의 위치를 초기화 합니다.
331
+ setSliderInfo((prevSliderInfo)=>{
332
+ return {
333
+ ...prevSliderInfo,
334
+ elementStates: getNewStatesByItems({
335
+ centerIndex: prevSliderInfo.currentIndex,
336
+ itemIndexs: extendedItems.map((_, index)=>index),
337
+ prevStates: prevSliderInfo.elementStates
338
+ })
339
+ };
340
+ });
341
+ // 스크롤 임계값 업데이트
342
+ const { width } = wrapElement.getBoundingClientRect();
343
+ canScrollThreshold.current = width * CAN_SCROLL_THRESHOLD_RATIO;
344
+ });
345
+ };
346
+ handleResize();
347
+ window.addEventListener("resize", handleResize);
348
+ return ()=>{
349
+ window.removeEventListener("resize", handleResize);
350
+ };
351
+ }, [
352
+ extendedItems,
353
+ getNewStatesByItems
354
+ ]);
355
+ /**
340
356
  * - currentIndex 변경 시 애니메이션을 적용합니다.
341
357
  * - doNext/doPrev 또는 외부 index prop 변경 모두 처리합니다.
342
358
  */ useLayoutEffect(()=>{
@@ -431,14 +447,14 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
431
447
  event.preventDefault();
432
448
  doNext();
433
449
  }
434
- }
450
+ },
451
+ options: a11yOptions
435
452
  });
436
453
  useImperativeHandle(ref, useCallback(()=>{
437
- return {
454
+ return Object.assign(wrapRef.current, {
438
455
  doNext,
439
- doPrev,
440
- ...wrapRef.current
441
- };
456
+ doPrev
457
+ });
442
458
  }, [
443
459
  doNext,
444
460
  doPrev
package/dist/type/component/view/slider.d.ts CHANGED
@@ -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.4",
9
+ "version": "0.1.6",
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.2",
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
  },