@watcha-authentic/react-slider 0.1.5 → 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 (3) hide show
  1. package/dist/cjs/component/view/slider.js +38 -22
  2. package/dist/esm/component/view/slider.js +38 -22
  3. package/package.json +1 -1
package/dist/cjs/component/view/slider.js CHANGED
@@ -316,24 +316,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
316
316
  }, [
317
317
  extendedItems.length
318
318
  ]);
319
- /**
320
- * - extendedItems 프롭스에 의한 값을 초기화 합니다.
321
- */ (0, _react.useLayoutEffect)(()=>{
322
- setSliderInfo((prevSliderInfo)=>{
323
- return {
324
- ...prevSliderInfo,
325
- elementStates: getNewStatesByItems({
326
- centerIndex: prevSliderInfo.currentIndex,
327
- itemIndexs: extendedItems.map((_, index)=>index),
328
- prevStates: prevSliderInfo.elementStates
329
- })
330
- };
331
- });
332
- }, [
333
- calcElementState,
334
- extendedItems,
335
- getNewStatesByItems
336
- ]);
337
319
  const handleSwipe = (0, _react.useCallback)(async ()=>{
338
320
  lastSlideTriggerEvent.current = "swipe";
339
321
  await updateStateByPageIndex({
@@ -346,6 +328,41 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
346
328
  updateStateByPageIndex
347
329
  ]);
348
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
+ /**
349
366
  * - currentIndex 변경 시 애니메이션을 적용합니다.
350
367
  * - doNext/doPrev 또는 외부 index prop 변경 모두 처리합니다.
351
368
  */ (0, _react.useLayoutEffect)(()=>{
@@ -444,11 +461,10 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
444
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
@@ -306,24 +306,6 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
306
306
  }, [
307
307
  extendedItems.length
308
308
  ]);
309
- /**
310
- * - extendedItems 프롭스에 의한 값을 초기화 합니다.
311
- */ useLayoutEffect(()=>{
312
- setSliderInfo((prevSliderInfo)=>{
313
- return {
314
- ...prevSliderInfo,
315
- elementStates: getNewStatesByItems({
316
- centerIndex: prevSliderInfo.currentIndex,
317
- itemIndexs: extendedItems.map((_, index)=>index),
318
- prevStates: prevSliderInfo.elementStates
319
- })
320
- };
321
- });
322
- }, [
323
- calcElementState,
324
- extendedItems,
325
- getNewStatesByItems
326
- ]);
327
309
  const handleSwipe = useCallback(async ()=>{
328
310
  lastSlideTriggerEvent.current = "swipe";
329
311
  await updateStateByPageIndex({
@@ -336,6 +318,41 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
336
318
  updateStateByPageIndex
337
319
  ]);
338
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
+ /**
339
356
  * - currentIndex 변경 시 애니메이션을 적용합니다.
340
357
  * - doNext/doPrev 또는 외부 index prop 변경 모두 처리합니다.
341
358
  */ useLayoutEffect(()=>{
@@ -434,11 +451,10 @@ const SliderComponent = ({ animationDuration = 500, animationTimingFunction = "e
434
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/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "slider",
7
7
  "swiper"
8
8
  ],
9
- "version": "0.1.5",
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",