farm-react 1.0.6 → 1.0.8
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/README.md +79 -4
- package/dist/assets/styles/style.css +26254 -0
- package/dist/assets/styles/style.css.map +1 -0
- package/dist/cjs/Utils/index.d.ts +4 -0
- package/dist/cjs/Utils/index.js +8 -0
- package/dist/cjs/Utils/index.js.map +1 -0
- package/dist/cjs/components/Accordion.d.ts +33 -0
- package/dist/cjs/components/Accordion.js +21 -0
- package/dist/cjs/components/Accordion.js.map +1 -0
- package/dist/cjs/components/Alert.d.ts +32 -0
- package/dist/cjs/components/Alert.js +50 -0
- package/dist/cjs/components/Alert.js.map +1 -0
- package/dist/cjs/components/Badge.d.ts +22 -0
- package/dist/cjs/components/Badge.js +36 -0
- package/dist/cjs/components/Badge.js.map +1 -0
- package/dist/cjs/components/BrokenPage.d.ts +35 -0
- package/dist/cjs/components/BrokenPage.js +59 -0
- package/dist/cjs/components/BrokenPage.js.map +1 -0
- package/dist/cjs/components/Button.d.ts +29 -2
- package/dist/cjs/components/Button.js +51 -3
- package/dist/cjs/components/Button.js.map +1 -1
- package/dist/cjs/components/Card.d.ts +77 -0
- package/dist/cjs/components/Card.js +77 -0
- package/dist/cjs/components/Card.js.map +1 -0
- package/dist/cjs/components/Checkbox.d.ts +25 -0
- package/dist/cjs/components/Checkbox.js +23 -0
- package/dist/cjs/components/Checkbox.js.map +1 -0
- package/dist/cjs/components/ConfirmPoup.d.ts +21 -0
- package/dist/cjs/components/ConfirmPoup.js +47 -0
- package/dist/cjs/components/ConfirmPoup.js.map +1 -0
- package/dist/cjs/components/Dropdown.d.ts +35 -0
- package/dist/cjs/components/Dropdown.js +54 -0
- package/dist/cjs/components/Dropdown.js.map +1 -0
- package/dist/cjs/components/Label.d.ts +1 -1
- package/dist/cjs/components/Label.js +4 -4
- package/dist/cjs/components/Label.js.map +1 -1
- package/dist/cjs/components/MultiCheckbox.d.ts +39 -0
- package/dist/cjs/components/MultiCheckbox.js +56 -0
- package/dist/cjs/components/MultiCheckbox.js.map +1 -0
- package/dist/cjs/components/MultiRadio.d.ts +30 -0
- package/dist/cjs/components/MultiRadio.js +41 -0
- package/dist/cjs/components/MultiRadio.js.map +1 -0
- package/dist/cjs/components/NumberInput.d.ts +38 -0
- package/dist/cjs/components/NumberInput.js +34 -0
- package/dist/cjs/components/NumberInput.js.map +1 -0
- package/dist/cjs/components/Radio.d.ts +24 -0
- package/dist/cjs/components/Radio.js +24 -0
- package/dist/cjs/components/Radio.js.map +1 -0
- package/dist/cjs/components/RangeSlider.d.ts +30 -0
- package/dist/cjs/components/RangeSlider.js +48 -0
- package/dist/cjs/components/RangeSlider.js.map +1 -0
- package/dist/cjs/components/RatingDisplay.d.ts +27 -0
- package/dist/cjs/components/RatingDisplay.js +42 -0
- package/dist/cjs/components/RatingDisplay.js.map +1 -0
- package/dist/cjs/components/Select.d.ts +41 -0
- package/dist/cjs/components/Select.js +48 -0
- package/dist/cjs/components/Select.js.map +1 -0
- package/dist/cjs/components/SkeletonLoader.d.ts +39 -0
- package/dist/cjs/components/SkeletonLoader.js +76 -0
- package/dist/cjs/components/SkeletonLoader.js.map +1 -0
- package/dist/cjs/components/Slider/SlickSlider.d.ts +74 -0
- package/dist/cjs/components/Slider/SlickSlider.js +211 -0
- package/dist/cjs/components/Slider/SlickSlider.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/SlickSlider.d.ts +74 -0
- package/dist/cjs/components/Slider/Slider/SlickSlider.js +212 -0
- package/dist/cjs/components/Slider/Slider/SlickSlider.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/useCenterMode.d.ts +24 -0
- package/dist/cjs/components/Slider/Slider/useCenterMode.js +40 -0
- package/dist/cjs/components/Slider/Slider/useCenterMode.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/useSlider.d.ts +65 -0
- package/dist/cjs/components/Slider/Slider/useSlider.js +164 -0
- package/dist/cjs/components/Slider/Slider/useSlider.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/useSliderAutoPlay.d.ts +33 -0
- package/dist/cjs/components/Slider/Slider/useSliderAutoPlay.js +73 -0
- package/dist/cjs/components/Slider/Slider/useSliderAutoPlay.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/useSliderBreakpoint.d.ts +38 -0
- package/dist/cjs/components/Slider/Slider/useSliderBreakpoint.js +53 -0
- package/dist/cjs/components/Slider/Slider/useSliderBreakpoint.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/useSliderDimension.d.ts +41 -0
- package/dist/cjs/components/Slider/Slider/useSliderDimension.js +91 -0
- package/dist/cjs/components/Slider/Slider/useSliderDimension.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/useSliderDraggable.d.ts +43 -0
- package/dist/cjs/components/Slider/Slider/useSliderDraggable.js +146 -0
- package/dist/cjs/components/Slider/Slider/useSliderDraggable.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/useSliderNavigation.d.ts +41 -0
- package/dist/cjs/components/Slider/Slider/useSliderNavigation.js +136 -0
- package/dist/cjs/components/Slider/Slider/useSliderNavigation.js.map +1 -0
- package/dist/cjs/components/Slider/Slider/useSliderTransform.d.ts +17 -0
- package/dist/cjs/components/Slider/Slider/useSliderTransform.js +71 -0
- package/dist/cjs/components/Slider/Slider/useSliderTransform.js.map +1 -0
- package/dist/cjs/components/Slider/useCenterMode.d.ts +24 -0
- package/dist/cjs/components/Slider/useCenterMode.js +40 -0
- package/dist/cjs/components/Slider/useCenterMode.js.map +1 -0
- package/dist/cjs/components/Slider/useSlider.d.ts +65 -0
- package/dist/cjs/components/Slider/useSlider.js +159 -0
- package/dist/cjs/components/Slider/useSlider.js.map +1 -0
- package/dist/cjs/components/Slider/useSliderAutoPlay.d.ts +33 -0
- package/dist/cjs/components/Slider/useSliderAutoPlay.js +73 -0
- package/dist/cjs/components/Slider/useSliderAutoPlay.js.map +1 -0
- package/dist/cjs/components/Slider/useSliderBreakpoint.d.ts +23 -0
- package/dist/cjs/components/Slider/useSliderBreakpoint.js +92 -0
- package/dist/cjs/components/Slider/useSliderBreakpoint.js.map +1 -0
- package/dist/cjs/components/Slider/useSliderDimension.d.ts +41 -0
- package/dist/cjs/components/Slider/useSliderDimension.js +92 -0
- package/dist/cjs/components/Slider/useSliderDimension.js.map +1 -0
- package/dist/cjs/components/Slider/useSliderDraggable.d.ts +43 -0
- package/dist/cjs/components/Slider/useSliderDraggable.js +146 -0
- package/dist/cjs/components/Slider/useSliderDraggable.js.map +1 -0
- package/dist/cjs/components/Slider/useSliderNavigation.d.ts +41 -0
- package/dist/cjs/components/Slider/useSliderNavigation.js +136 -0
- package/dist/cjs/components/Slider/useSliderNavigation.js.map +1 -0
- package/dist/cjs/components/Slider/useSliderTransform.d.ts +17 -0
- package/dist/cjs/components/Slider/useSliderTransform.js +71 -0
- package/dist/cjs/components/Slider/useSliderTransform.js.map +1 -0
- package/dist/cjs/components/TextInput.d.ts +30 -3
- package/dist/cjs/components/TextInput.js +31 -17
- package/dist/cjs/components/TextInput.js.map +1 -1
- package/dist/cjs/components/ThreeDotsLoader.d.ts +24 -0
- package/dist/cjs/components/ThreeDotsLoader.js +25 -0
- package/dist/cjs/components/ThreeDotsLoader.js.map +1 -0
- package/dist/cjs/constants/app.d.ts +2 -0
- package/dist/cjs/constants/app.js +3 -1
- package/dist/cjs/constants/app.js.map +1 -1
- package/dist/cjs/constants/icons.d.ts +7 -0
- package/dist/cjs/constants/icons.js +11 -0
- package/dist/cjs/constants/icons.js.map +1 -0
- package/dist/cjs/helpers/app.d.ts +39 -2
- package/dist/cjs/helpers/app.js +83 -5
- package/dist/cjs/helpers/app.js.map +1 -1
- package/dist/cjs/helpers/index.d.ts +1 -0
- package/dist/cjs/helpers/index.js +3 -0
- package/dist/cjs/helpers/index.js.map +1 -1
- package/dist/cjs/hooks/index.d.ts +1 -0
- package/dist/cjs/hooks/index.js +4 -0
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useLocalStorage.d.ts +7 -0
- package/dist/cjs/hooks/useLocalStorage.js +57 -0
- package/dist/cjs/hooks/useLocalStorage.js.map +1 -0
- package/dist/cjs/index.d.ts +20 -4
- package/dist/cjs/index.js +41 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/strings/en.d.ts +4 -1
- package/dist/cjs/strings/en.js +5 -2
- package/dist/cjs/strings/en.js.map +1 -1
- package/dist/esm/Utils/index.d.ts +4 -0
- package/dist/esm/Utils/index.js +5 -0
- package/dist/esm/Utils/index.js.map +1 -0
- package/dist/esm/components/Accordion.d.ts +33 -0
- package/dist/esm/components/Accordion.js +19 -0
- package/dist/esm/components/Accordion.js.map +1 -0
- package/dist/esm/components/Alert.d.ts +32 -0
- package/dist/esm/components/Alert.js +48 -0
- package/dist/esm/components/Alert.js.map +1 -0
- package/dist/esm/components/Badge.d.ts +22 -0
- package/dist/esm/components/Badge.js +34 -0
- package/dist/esm/components/Badge.js.map +1 -0
- package/dist/esm/components/BrokenPage.d.ts +35 -0
- package/dist/esm/components/BrokenPage.js +57 -0
- package/dist/esm/components/BrokenPage.js.map +1 -0
- package/dist/esm/components/Button.d.ts +29 -2
- package/dist/esm/components/Button.js +52 -2
- package/dist/esm/components/Button.js.map +1 -1
- package/dist/esm/components/Card.d.ts +77 -0
- package/dist/esm/components/Card.js +75 -0
- package/dist/esm/components/Card.js.map +1 -0
- package/dist/esm/components/Checkbox.d.ts +25 -0
- package/dist/esm/components/Checkbox.js +21 -0
- package/dist/esm/components/Checkbox.js.map +1 -0
- package/dist/esm/components/ConfirmPoup.d.ts +21 -0
- package/dist/esm/components/ConfirmPoup.js +45 -0
- package/dist/esm/components/ConfirmPoup.js.map +1 -0
- package/dist/esm/components/Dropdown.d.ts +35 -0
- package/dist/esm/components/Dropdown.js +52 -0
- package/dist/esm/components/Dropdown.js.map +1 -0
- package/dist/esm/components/Label.d.ts +1 -1
- package/dist/esm/components/Label.js +5 -5
- package/dist/esm/components/Label.js.map +1 -1
- package/dist/esm/components/MultiCheckbox.d.ts +39 -0
- package/dist/esm/components/MultiCheckbox.js +54 -0
- package/dist/esm/components/MultiCheckbox.js.map +1 -0
- package/dist/esm/components/MultiRadio.d.ts +30 -0
- package/dist/esm/components/MultiRadio.js +39 -0
- package/dist/esm/components/MultiRadio.js.map +1 -0
- package/dist/esm/components/NumberInput.d.ts +38 -0
- package/dist/esm/components/NumberInput.js +32 -0
- package/dist/esm/components/NumberInput.js.map +1 -0
- package/dist/esm/components/Radio.d.ts +24 -0
- package/dist/esm/components/Radio.js +22 -0
- package/dist/esm/components/Radio.js.map +1 -0
- package/dist/esm/components/RangeSlider.d.ts +30 -0
- package/dist/esm/components/RangeSlider.js +46 -0
- package/dist/esm/components/RangeSlider.js.map +1 -0
- package/dist/esm/components/RatingDisplay.d.ts +27 -0
- package/dist/esm/components/RatingDisplay.js +40 -0
- package/dist/esm/components/RatingDisplay.js.map +1 -0
- package/dist/esm/components/Select.d.ts +41 -0
- package/dist/esm/components/Select.js +46 -0
- package/dist/esm/components/Select.js.map +1 -0
- package/dist/esm/components/SkeletonLoader.d.ts +39 -0
- package/dist/esm/components/SkeletonLoader.js +74 -0
- package/dist/esm/components/SkeletonLoader.js.map +1 -0
- package/dist/esm/components/Slider/SlickSlider.d.ts +74 -0
- package/dist/esm/components/Slider/SlickSlider.js +208 -0
- package/dist/esm/components/Slider/SlickSlider.js.map +1 -0
- package/dist/esm/components/Slider/Slider/SlickSlider.d.ts +74 -0
- package/dist/esm/components/Slider/Slider/SlickSlider.js +209 -0
- package/dist/esm/components/Slider/Slider/SlickSlider.js.map +1 -0
- package/dist/esm/components/Slider/Slider/useCenterMode.d.ts +24 -0
- package/dist/esm/components/Slider/Slider/useCenterMode.js +38 -0
- package/dist/esm/components/Slider/Slider/useCenterMode.js.map +1 -0
- package/dist/esm/components/Slider/Slider/useSlider.d.ts +65 -0
- package/dist/esm/components/Slider/Slider/useSlider.js +162 -0
- package/dist/esm/components/Slider/Slider/useSlider.js.map +1 -0
- package/dist/esm/components/Slider/Slider/useSliderAutoPlay.d.ts +33 -0
- package/dist/esm/components/Slider/Slider/useSliderAutoPlay.js +71 -0
- package/dist/esm/components/Slider/Slider/useSliderAutoPlay.js.map +1 -0
- package/dist/esm/components/Slider/Slider/useSliderBreakpoint.d.ts +38 -0
- package/dist/esm/components/Slider/Slider/useSliderBreakpoint.js +51 -0
- package/dist/esm/components/Slider/Slider/useSliderBreakpoint.js.map +1 -0
- package/dist/esm/components/Slider/Slider/useSliderDimension.d.ts +41 -0
- package/dist/esm/components/Slider/Slider/useSliderDimension.js +89 -0
- package/dist/esm/components/Slider/Slider/useSliderDimension.js.map +1 -0
- package/dist/esm/components/Slider/Slider/useSliderDraggable.d.ts +43 -0
- package/dist/esm/components/Slider/Slider/useSliderDraggable.js +144 -0
- package/dist/esm/components/Slider/Slider/useSliderDraggable.js.map +1 -0
- package/dist/esm/components/Slider/Slider/useSliderNavigation.d.ts +41 -0
- package/dist/esm/components/Slider/Slider/useSliderNavigation.js +134 -0
- package/dist/esm/components/Slider/Slider/useSliderNavigation.js.map +1 -0
- package/dist/esm/components/Slider/Slider/useSliderTransform.d.ts +17 -0
- package/dist/esm/components/Slider/Slider/useSliderTransform.js +69 -0
- package/dist/esm/components/Slider/Slider/useSliderTransform.js.map +1 -0
- package/dist/esm/components/Slider/useCenterMode.d.ts +24 -0
- package/dist/esm/components/Slider/useCenterMode.js +38 -0
- package/dist/esm/components/Slider/useCenterMode.js.map +1 -0
- package/dist/esm/components/Slider/useSlider.d.ts +65 -0
- package/dist/esm/components/Slider/useSlider.js +157 -0
- package/dist/esm/components/Slider/useSlider.js.map +1 -0
- package/dist/esm/components/Slider/useSliderAutoPlay.d.ts +33 -0
- package/dist/esm/components/Slider/useSliderAutoPlay.js +71 -0
- package/dist/esm/components/Slider/useSliderAutoPlay.js.map +1 -0
- package/dist/esm/components/Slider/useSliderBreakpoint.d.ts +23 -0
- package/dist/esm/components/Slider/useSliderBreakpoint.js +90 -0
- package/dist/esm/components/Slider/useSliderBreakpoint.js.map +1 -0
- package/dist/esm/components/Slider/useSliderDimension.d.ts +41 -0
- package/dist/esm/components/Slider/useSliderDimension.js +90 -0
- package/dist/esm/components/Slider/useSliderDimension.js.map +1 -0
- package/dist/esm/components/Slider/useSliderDraggable.d.ts +43 -0
- package/dist/esm/components/Slider/useSliderDraggable.js +144 -0
- package/dist/esm/components/Slider/useSliderDraggable.js.map +1 -0
- package/dist/esm/components/Slider/useSliderNavigation.d.ts +41 -0
- package/dist/esm/components/Slider/useSliderNavigation.js +134 -0
- package/dist/esm/components/Slider/useSliderNavigation.js.map +1 -0
- package/dist/esm/components/Slider/useSliderTransform.d.ts +17 -0
- package/dist/esm/components/Slider/useSliderTransform.js +69 -0
- package/dist/esm/components/Slider/useSliderTransform.js.map +1 -0
- package/dist/esm/components/TextInput.d.ts +30 -3
- package/dist/esm/components/TextInput.js +33 -18
- package/dist/esm/components/TextInput.js.map +1 -1
- package/dist/esm/components/ThreeDotsLoader.d.ts +24 -0
- package/dist/esm/components/ThreeDotsLoader.js +23 -0
- package/dist/esm/components/ThreeDotsLoader.js.map +1 -0
- package/dist/esm/constants/app.d.ts +2 -0
- package/dist/esm/constants/app.js +2 -0
- package/dist/esm/constants/app.js.map +1 -1
- package/dist/esm/constants/icons.d.ts +7 -0
- package/dist/esm/constants/icons.js +9 -0
- package/dist/esm/constants/icons.js.map +1 -0
- package/dist/esm/helpers/app.d.ts +39 -2
- package/dist/esm/helpers/app.js +73 -3
- package/dist/esm/helpers/app.js.map +1 -1
- package/dist/esm/helpers/index.d.ts +1 -0
- package/dist/esm/helpers/index.js +1 -1
- package/dist/esm/helpers/index.js.map +1 -1
- package/dist/esm/hooks/index.d.ts +1 -0
- package/dist/esm/hooks/index.js +1 -1
- package/dist/esm/hooks/index.js.map +1 -1
- package/dist/esm/hooks/useLocalStorage.d.ts +7 -0
- package/dist/esm/hooks/useLocalStorage.js +54 -0
- package/dist/esm/hooks/useLocalStorage.js.map +1 -0
- package/dist/esm/index.d.ts +20 -4
- package/dist/esm/index.js +20 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/strings/en.d.ts +4 -1
- package/dist/esm/strings/en.js +4 -1
- package/dist/esm/strings/en.js.map +1 -1
- package/dist/package.json +13 -0
- package/package.json +63 -58
- package/dist/cjs/components/app.d.ts +0 -6
- package/dist/cjs/components/app.js +0 -22
- package/dist/cjs/components/app.js.map +0 -1
- package/dist/esm/components/Notification.d.ts +0 -1
- package/dist/esm/components/Notification.js +0 -46
- package/dist/esm/components/Notification.js.map +0 -1
- package/dist/esm/components/SwitchItem.d.ts +0 -8
- package/dist/esm/components/SwitchItem.js +0 -7
- package/dist/esm/components/SwitchItem.js.map +0 -1
- package/dist/esm/components/app.d.ts +0 -6
- package/dist/esm/components/app.js +0 -19
- package/dist/esm/components/app.js.map +0 -1
- package/dist/esm/constants/aap.d.ts +0 -1
- package/dist/esm/constants/aap.js +0 -2
- package/dist/esm/constants/aap.js.map +0 -1
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* -----------------------------------------------------------------------------
|
|
3
|
+
* @file useSliderDraggable
|
|
4
|
+
* -----------------------------------------------------------------------------
|
|
5
|
+
*
|
|
6
|
+
* @description A custom React hook that enables pointer-based drag interactions
|
|
7
|
+
* for the Slick slider component.
|
|
8
|
+
*
|
|
9
|
+
* Responsibilities:
|
|
10
|
+
* - Attaches pointer event listeners to the slider container
|
|
11
|
+
* - Tracks drag state and movement distance
|
|
12
|
+
* - Applies real-time transforms during dragging
|
|
13
|
+
* - Determines swipe intent using a configurable threshold
|
|
14
|
+
* - Triggers next/previous slide navigation based on drag direction
|
|
15
|
+
* - Safely handles pointer cancellation and cleanup
|
|
16
|
+
*
|
|
17
|
+
* Behavior:
|
|
18
|
+
* - Dragging is enabled only when `draggable.enableDrag` is true
|
|
19
|
+
* - Horizontal movement controls slide navigation
|
|
20
|
+
* - Transitions are suppressed during drag and restored on release
|
|
21
|
+
* - Automatically cleans up listeners on unmount or ref changes
|
|
22
|
+
* -----------------------------------------------------------------------------
|
|
23
|
+
* Copyright © 2026 BookingKoala. All rights reserved.
|
|
24
|
+
* -----------------------------------------------------------------------------
|
|
25
|
+
*/
|
|
26
|
+
import { type RefObject } from 'react';
|
|
27
|
+
import { SlickSliderRefs } from './useSlider';
|
|
28
|
+
export interface UseSliderDraggableProps {
|
|
29
|
+
applyTransform: (val: number, withTransition?: boolean, isRaw?: boolean) => void;
|
|
30
|
+
calculateTranslate: (idx: number) => number;
|
|
31
|
+
draggable?: {
|
|
32
|
+
dragThreshold?: number;
|
|
33
|
+
enableDrag?: boolean;
|
|
34
|
+
};
|
|
35
|
+
handleNextSlide: () => void;
|
|
36
|
+
handlePrevSlide: () => void;
|
|
37
|
+
hasNextBtnDisabled: () => boolean;
|
|
38
|
+
hasPrevBtnDisabled: () => boolean;
|
|
39
|
+
sliderObjRefs: RefObject<SlickSliderRefs>;
|
|
40
|
+
sliderWrapperRef: RefObject<HTMLDivElement | null>;
|
|
41
|
+
}
|
|
42
|
+
declare function useSliderDraggable({ applyTransform, calculateTranslate, draggable, handleNextSlide, handlePrevSlide, hasNextBtnDisabled, hasPrevBtnDisabled, sliderObjRefs, sliderWrapperRef }: UseSliderDraggableProps): void;
|
|
43
|
+
export default useSliderDraggable;
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
/**
|
|
4
|
+
* -----------------------------------------------------------------------------
|
|
5
|
+
* @file useSliderDraggable
|
|
6
|
+
* -----------------------------------------------------------------------------
|
|
7
|
+
*
|
|
8
|
+
* @description A custom React hook that enables pointer-based drag interactions
|
|
9
|
+
* for the Slick slider component.
|
|
10
|
+
*
|
|
11
|
+
* Responsibilities:
|
|
12
|
+
* - Attaches pointer event listeners to the slider container
|
|
13
|
+
* - Tracks drag state and movement distance
|
|
14
|
+
* - Applies real-time transforms during dragging
|
|
15
|
+
* - Determines swipe intent using a configurable threshold
|
|
16
|
+
* - Triggers next/previous slide navigation based on drag direction
|
|
17
|
+
* - Safely handles pointer cancellation and cleanup
|
|
18
|
+
*
|
|
19
|
+
* Behavior:
|
|
20
|
+
* - Dragging is enabled only when `draggable.enableDrag` is true
|
|
21
|
+
* - Horizontal movement controls slide navigation
|
|
22
|
+
* - Transitions are suppressed during drag and restored on release
|
|
23
|
+
* - Automatically cleans up listeners on unmount or ref changes
|
|
24
|
+
* -----------------------------------------------------------------------------
|
|
25
|
+
* Copyright © 2026 BookingKoala. All rights reserved.
|
|
26
|
+
* -----------------------------------------------------------------------------
|
|
27
|
+
*/
|
|
28
|
+
var react_1 = require("react");
|
|
29
|
+
var helpers_1 = require("../../../helpers");
|
|
30
|
+
function useSliderDraggable(_a) {
|
|
31
|
+
var applyTransform = _a.applyTransform, calculateTranslate = _a.calculateTranslate, draggable = _a.draggable, handleNextSlide = _a.handleNextSlide, handlePrevSlide = _a.handlePrevSlide, hasNextBtnDisabled = _a.hasNextBtnDisabled, hasPrevBtnDisabled = _a.hasPrevBtnDisabled, sliderObjRefs = _a.sliderObjRefs, sliderWrapperRef = _a.sliderWrapperRef;
|
|
32
|
+
(0, react_1.useEffect)(function () {
|
|
33
|
+
var _a = (0, helpers_1.destructObj)(draggable), _b = _a.dragThreshold, dragThreshold = _b === void 0 ? 200 : _b, _c = _a.enableDrag, enableDrag = _c === void 0 ? true : _c;
|
|
34
|
+
if (!sliderObjRefs.current)
|
|
35
|
+
return undefined;
|
|
36
|
+
var _d = (0, helpers_1.destructObj)(sliderObjRefs.current), currentIndex = _d.currentIndex, drag = _d.drag;
|
|
37
|
+
var container = sliderWrapperRef.current;
|
|
38
|
+
if (!enableDrag || (0, helpers_1.isNullOrUndefined)(container))
|
|
39
|
+
return undefined;
|
|
40
|
+
/**
|
|
41
|
+
* Handles the pointer down event to initiate a drag interaction.
|
|
42
|
+
* - Captures the pointer to continue receiving move/up events
|
|
43
|
+
* even if the pointer leaves the container
|
|
44
|
+
* - Initializes drag state (start position and reset translate)
|
|
45
|
+
*/
|
|
46
|
+
function handlePointerDown(event) {
|
|
47
|
+
if ((0, helpers_1.isNullOrUndefined)(container))
|
|
48
|
+
return;
|
|
49
|
+
container.setPointerCapture(event.pointerId);
|
|
50
|
+
Object.assign(drag, {
|
|
51
|
+
isDragging: true,
|
|
52
|
+
startX: event.clientX,
|
|
53
|
+
startY: event.clientY,
|
|
54
|
+
translate: 0
|
|
55
|
+
});
|
|
56
|
+
(0, helpers_1.preventDefault)(event);
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Handles pointer move events during an active drag gesture.
|
|
60
|
+
* - Runs only while dragging is in progress
|
|
61
|
+
* - Calculates horizontal movement delta from the initial pointer position
|
|
62
|
+
* - Updates drag translate value for threshold / direction detection
|
|
63
|
+
* - Applies a real-time transform without transition for smooth dragging
|
|
64
|
+
*/
|
|
65
|
+
function handlePointerMove(event) {
|
|
66
|
+
if ((0, helpers_1.isNullOrUndefined)(container) || !drag.isDragging)
|
|
67
|
+
return;
|
|
68
|
+
var delta = event.clientX - drag.startX;
|
|
69
|
+
var base = calculateTranslate(currentIndex);
|
|
70
|
+
Object.assign(drag, { translate: delta });
|
|
71
|
+
applyTransform(delta + base, false, true);
|
|
72
|
+
(0, helpers_1.preventDefault)(event);
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Handles the pointer up event to finalize a drag interaction.
|
|
76
|
+
* - Releases pointer capture to stop receiving pointer events
|
|
77
|
+
* - Evaluates total drag distance against the configured threshold
|
|
78
|
+
* - Triggers slide navigation based on drag direction and availability
|
|
79
|
+
* - Reverts to the current slide if the drag is insufficient or navigation is disabled
|
|
80
|
+
*/
|
|
81
|
+
function handlePointerUp(event) {
|
|
82
|
+
if ((0, helpers_1.isNullOrUndefined)(container) || !drag.isDragging)
|
|
83
|
+
return;
|
|
84
|
+
container.releasePointerCapture(event.pointerId);
|
|
85
|
+
var translate = drag.translate;
|
|
86
|
+
Object.assign(drag, { isDragging: false });
|
|
87
|
+
if (Math.abs(translate) <= dragThreshold) {
|
|
88
|
+
applyTransform(currentIndex, true);
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
if (translate < 0 && !hasNextBtnDisabled()) {
|
|
92
|
+
handleNextSlide();
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
if (translate > 0 && !hasPrevBtnDisabled()) {
|
|
96
|
+
handlePrevSlide();
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
applyTransform(currentIndex, true);
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* Handles pointer cancel events to safely abort an active drag interaction.
|
|
103
|
+
* - Triggered when the browser cancels the pointer sequence
|
|
104
|
+
* (e.g., touch interruption, context menu, lost capture)
|
|
105
|
+
* - Releases pointer capture to avoid stuck pointer states
|
|
106
|
+
* - Resets dragging state
|
|
107
|
+
* - Smoothly reverts the slider back to the current active slid.
|
|
108
|
+
*/
|
|
109
|
+
function handlePointerCancel(event) {
|
|
110
|
+
if ((0, helpers_1.isNullOrUndefined)(container) || !drag.isDragging)
|
|
111
|
+
return;
|
|
112
|
+
container.releasePointerCapture(event.pointerId);
|
|
113
|
+
Object.assign(drag, { isDragging: false });
|
|
114
|
+
applyTransform(currentIndex, true);
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Registers pointer event listeners on the slider container
|
|
118
|
+
* to enable drag-based interactions.
|
|
119
|
+
*
|
|
120
|
+
* Cleanup ensures all listeners are removed when the component
|
|
121
|
+
* unmounts or the container reference changes, preventing
|
|
122
|
+
* memory leaks and duplicate handlers.
|
|
123
|
+
*/
|
|
124
|
+
container.addEventListener('pointerdown', handlePointerDown);
|
|
125
|
+
container.addEventListener('pointermove', handlePointerMove);
|
|
126
|
+
container.addEventListener('pointerup', handlePointerUp);
|
|
127
|
+
container.addEventListener('pointercancel', handlePointerCancel);
|
|
128
|
+
/**
|
|
129
|
+
* Restrict touch gestures to vertical scrolling only (pan-y),allowing smooth page scroll while
|
|
130
|
+
* preventing horizontal touch interference during slider drag interactions.
|
|
131
|
+
*/
|
|
132
|
+
var touchActionAxis = 'pan-y';
|
|
133
|
+
Object.assign(container.style, { touchAction: touchActionAxis });
|
|
134
|
+
return function () {
|
|
135
|
+
if ((0, helpers_1.isNullOrUndefined)(container))
|
|
136
|
+
return;
|
|
137
|
+
container.removeEventListener('pointerdown', handlePointerDown);
|
|
138
|
+
container.removeEventListener('pointermove', handlePointerMove);
|
|
139
|
+
container.removeEventListener('pointerup', handlePointerUp);
|
|
140
|
+
container.removeEventListener('pointercancel', handlePointerCancel);
|
|
141
|
+
Object.assign(container.style, { touchAction: '' });
|
|
142
|
+
};
|
|
143
|
+
}, [sliderObjRefs, handleNextSlide, handlePrevSlide, hasNextBtnDisabled, handlePrevSlide]);
|
|
144
|
+
}
|
|
145
|
+
exports.default = useSliderDraggable;
|
|
146
|
+
//# sourceMappingURL=useSliderDraggable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSliderDraggable.js","sourceRoot":"","sources":["../../../../../src/components/Slider/Slider/useSliderDraggable.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* -----------------------------------------------------------------------------
|
|
3
|
+
* @file useSliderNavigation
|
|
4
|
+
* -----------------------------------------------------------------------------
|
|
5
|
+
*
|
|
6
|
+
* @description This hook is responsible for handling all slider navigation logic.
|
|
7
|
+
*
|
|
8
|
+
* Features:
|
|
9
|
+
* - Handles next slide navigation
|
|
10
|
+
* - Handles previous slide navigation
|
|
11
|
+
* - Controls next button disabled state
|
|
12
|
+
* - Controls previous button disabled state
|
|
13
|
+
* - Provides the active indicator index
|
|
14
|
+
* - Calculates the total number of indicators
|
|
15
|
+
*
|
|
16
|
+
* -----------------------------------------------------------------------------
|
|
17
|
+
* Copyright © 2025 BookingKoala. All rights reserved.
|
|
18
|
+
* -----------------------------------------------------------------------------
|
|
19
|
+
*/
|
|
20
|
+
import { type SlickSliderRefs } from './useSlider';
|
|
21
|
+
interface UseSlickSliderNavigationReturn {
|
|
22
|
+
getActiveIndicatorIndex: () => number | undefined;
|
|
23
|
+
getIndicatorCount: () => number | undefined;
|
|
24
|
+
goToSlideIndicator: (indicatorIndex: number) => void;
|
|
25
|
+
handleNextSlide: () => void;
|
|
26
|
+
handlePrevSlide: () => void;
|
|
27
|
+
hasNextBtnDisabled: () => boolean;
|
|
28
|
+
hasPrevBtnDisabled: () => boolean;
|
|
29
|
+
}
|
|
30
|
+
interface UseSlickSliderDimensionsProps {
|
|
31
|
+
activeSlide: number;
|
|
32
|
+
applyTransform: (indexOrTranslate: number, withTransition?: boolean) => void;
|
|
33
|
+
loop: boolean;
|
|
34
|
+
sliderObjRefs: React.RefObject<SlickSliderRefs>;
|
|
35
|
+
sliderWrapperRef: React.RefObject<HTMLDivElement | null>;
|
|
36
|
+
slideToScroll: number;
|
|
37
|
+
slideToShow: number;
|
|
38
|
+
speed?: number;
|
|
39
|
+
}
|
|
40
|
+
declare function useSliderNavigation({ activeSlide, applyTransform, loop, sliderObjRefs, slideToScroll, slideToShow, speed }: UseSlickSliderDimensionsProps): UseSlickSliderNavigationReturn;
|
|
41
|
+
export default useSliderNavigation;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* -----------------------------------------------------------------------------
|
|
4
|
+
* @file useSliderNavigation
|
|
5
|
+
* -----------------------------------------------------------------------------
|
|
6
|
+
*
|
|
7
|
+
* @description This hook is responsible for handling all slider navigation logic.
|
|
8
|
+
*
|
|
9
|
+
* Features:
|
|
10
|
+
* - Handles next slide navigation
|
|
11
|
+
* - Handles previous slide navigation
|
|
12
|
+
* - Controls next button disabled state
|
|
13
|
+
* - Controls previous button disabled state
|
|
14
|
+
* - Provides the active indicator index
|
|
15
|
+
* - Calculates the total number of indicators
|
|
16
|
+
*
|
|
17
|
+
* -----------------------------------------------------------------------------
|
|
18
|
+
* Copyright © 2025 BookingKoala. All rights reserved.
|
|
19
|
+
* -----------------------------------------------------------------------------
|
|
20
|
+
*/
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
var react_1 = require("react");
|
|
23
|
+
// this string used for the navigate with throttle
|
|
24
|
+
var ctrlBtnString = 'ctrlBtn';
|
|
25
|
+
function useSliderNavigation(_a) {
|
|
26
|
+
var activeSlide = _a.activeSlide, applyTransform = _a.applyTransform, loop = _a.loop, sliderObjRefs = _a.sliderObjRefs, slideToScroll = _a.slideToScroll, slideToShow = _a.slideToShow, _b = _a.speed, speed = _b === void 0 ? 500 : _b;
|
|
27
|
+
// State
|
|
28
|
+
var _c = (0, react_1.useState)(activeSlide), currentSlideIndex = _c[0], setCurrentSlideIndex = _c[1];
|
|
29
|
+
/**
|
|
30
|
+
* Calculates the currently active indicator index based on slide position.
|
|
31
|
+
*/
|
|
32
|
+
var getActiveIndicatorIndex = (0, react_1.useCallback)(function () { return Math.ceil(currentSlideIndex / slideToScroll); }, [currentSlideIndex, slideToScroll]);
|
|
33
|
+
/**
|
|
34
|
+
* Computes the total number of indicators required for the slider.
|
|
35
|
+
*/
|
|
36
|
+
var getIndicatorCount = (0, react_1.useCallback)(function () {
|
|
37
|
+
if (!sliderObjRefs.current)
|
|
38
|
+
return undefined;
|
|
39
|
+
var totalSlides = sliderObjRefs.current.totalSlides;
|
|
40
|
+
return Math.max(1, Math.ceil(totalSlides / slideToScroll));
|
|
41
|
+
}, [sliderObjRefs, slideToScroll]);
|
|
42
|
+
/**
|
|
43
|
+
* Moves the slider to a given slide index.
|
|
44
|
+
* - Stops execution if a slide animation is already running and the action
|
|
45
|
+
* was triggered by next/prev buttons (prevents rapid clicks).
|
|
46
|
+
* - Updates internal state and refs to point to the target slide.
|
|
47
|
+
* - Applies a smooth transition to move the slider.
|
|
48
|
+
* - If looping is disabled:
|
|
49
|
+
* - Finishes after the animation and exits.
|
|
50
|
+
*
|
|
51
|
+
* - If looping is enabled (infinite slider):
|
|
52
|
+
* - Waits for the animation to finish.
|
|
53
|
+
* - Adjusts the slide index so it stays within valid bounds.
|
|
54
|
+
* - Instantly moves the slider (without animation) to the corrected position.
|
|
55
|
+
* - Updates internal state and refs.
|
|
56
|
+
*
|
|
57
|
+
* This logic creates a smooth infinite scrolling effect.
|
|
58
|
+
*/
|
|
59
|
+
var gotoSlideItem = (0, react_1.useCallback)(function (targetIndex, type) {
|
|
60
|
+
if (!sliderObjRefs.current)
|
|
61
|
+
return;
|
|
62
|
+
var _a = sliderObjRefs.current, isTransitionComplete = _a.isTransitionComplete, totalSlides = _a.totalSlides;
|
|
63
|
+
if (isTransitionComplete && type === 'ctrlBtn')
|
|
64
|
+
return;
|
|
65
|
+
Object.assign(sliderObjRefs.current, { currentIndex: targetIndex, isTransitionComplete: true });
|
|
66
|
+
setCurrentSlideIndex(targetIndex);
|
|
67
|
+
applyTransform(targetIndex, true);
|
|
68
|
+
if (!loop) {
|
|
69
|
+
Object.assign(sliderObjRefs.current, { isTransitionComplete: false });
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
setTimeout(function () {
|
|
73
|
+
if (!sliderObjRefs.current)
|
|
74
|
+
return;
|
|
75
|
+
var currentIndex = sliderObjRefs.current.currentIndex;
|
|
76
|
+
var loopedIndex = ((currentIndex % totalSlides) + totalSlides) % totalSlides;
|
|
77
|
+
var finalIndex = Math.min(loopedIndex, totalSlides);
|
|
78
|
+
applyTransform(finalIndex, false);
|
|
79
|
+
Object.assign(sliderObjRefs.current, { currentIndex: finalIndex, isTransitionComplete: false });
|
|
80
|
+
setCurrentSlideIndex(finalIndex);
|
|
81
|
+
}, speed);
|
|
82
|
+
}, [sliderObjRefs, setCurrentSlideIndex, applyTransform, loop, speed]);
|
|
83
|
+
/** Navigates to a slide based on indicator (dot) index. */
|
|
84
|
+
var goToSlideIndicator = (0, react_1.useCallback)(function (indicatorIndex) {
|
|
85
|
+
var targetSlideIndex = indicatorIndex * slideToScroll;
|
|
86
|
+
gotoSlideItem(targetSlideIndex);
|
|
87
|
+
}, [slideToScroll, gotoSlideItem]);
|
|
88
|
+
/** Function responsible for handling the next slide. */
|
|
89
|
+
var handleNextSlide = (0, react_1.useCallback)(function () {
|
|
90
|
+
if (!sliderObjRefs.current)
|
|
91
|
+
return;
|
|
92
|
+
var currentIdx = sliderObjRefs.current.currentIndex;
|
|
93
|
+
var nextIndex = currentIdx + slideToScroll;
|
|
94
|
+
gotoSlideItem(nextIndex, ctrlBtnString);
|
|
95
|
+
}, [gotoSlideItem, sliderObjRefs, slideToScroll]);
|
|
96
|
+
/** Function responsible for handling the prev slide. */
|
|
97
|
+
var handlePrevSlide = (0, react_1.useCallback)(function () {
|
|
98
|
+
if (!sliderObjRefs.current)
|
|
99
|
+
return;
|
|
100
|
+
var currentIdx = sliderObjRefs.current.currentIndex;
|
|
101
|
+
var prevIndex = currentIdx - slideToScroll;
|
|
102
|
+
gotoSlideItem(prevIndex, ctrlBtnString);
|
|
103
|
+
}, [gotoSlideItem, sliderObjRefs, slideToScroll]);
|
|
104
|
+
/**
|
|
105
|
+
* function determines whether the slider can navigate to the next set of slides.
|
|
106
|
+
* Always returns true when looping is enabled.
|
|
107
|
+
*/
|
|
108
|
+
var hasNextBtnDisabled = (0, react_1.useCallback)(function () {
|
|
109
|
+
if (!sliderObjRefs.current)
|
|
110
|
+
return true;
|
|
111
|
+
var totalSlides = sliderObjRefs.current.totalSlides;
|
|
112
|
+
if (loop)
|
|
113
|
+
return false;
|
|
114
|
+
return currentSlideIndex > totalSlides - slideToShow;
|
|
115
|
+
}, [currentSlideIndex, slideToShow, sliderObjRefs, loop]);
|
|
116
|
+
/**
|
|
117
|
+
* function determines whether the slider can navigate to the previous set of slides.
|
|
118
|
+
* Always returns true when looping is enabled.
|
|
119
|
+
*/
|
|
120
|
+
var hasPrevBtnDisabled = (0, react_1.useCallback)(function () {
|
|
121
|
+
if (loop)
|
|
122
|
+
return false;
|
|
123
|
+
return currentSlideIndex <= 0;
|
|
124
|
+
}, [currentSlideIndex, loop]);
|
|
125
|
+
return {
|
|
126
|
+
getActiveIndicatorIndex: getActiveIndicatorIndex,
|
|
127
|
+
getIndicatorCount: getIndicatorCount,
|
|
128
|
+
goToSlideIndicator: goToSlideIndicator,
|
|
129
|
+
handleNextSlide: handleNextSlide,
|
|
130
|
+
handlePrevSlide: handlePrevSlide,
|
|
131
|
+
hasNextBtnDisabled: hasNextBtnDisabled,
|
|
132
|
+
hasPrevBtnDisabled: hasPrevBtnDisabled
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
exports.default = useSliderNavigation;
|
|
136
|
+
//# sourceMappingURL=useSliderNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSliderNavigation.js","sourceRoot":"","sources":["../../../../../src/components/Slider/Slider/useSliderNavigation.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type SlickSliderAnimationConfig } from './SlickSlider';
|
|
2
|
+
import { type SlickSliderRefs } from './useSlider';
|
|
3
|
+
interface UseSlickSliderTransformProps {
|
|
4
|
+
animationConfig: SlickSliderAnimationConfig;
|
|
5
|
+
isAllSlidesVisible: boolean;
|
|
6
|
+
isRTLMode: boolean;
|
|
7
|
+
sliderObjRefs: React.RefObject<SlickSliderRefs>;
|
|
8
|
+
sliderWrapperRef: React.RefObject<HTMLDivElement | null>;
|
|
9
|
+
slideToShow: number;
|
|
10
|
+
variant: 'horizontal' | 'vertical';
|
|
11
|
+
}
|
|
12
|
+
interface UseSlickSliderTransformReturn {
|
|
13
|
+
applyTransform: (indexOrTranslate: number, withTransition?: boolean, isMouseMoving?: boolean) => void;
|
|
14
|
+
calculateTranslate: (indexOrTranslate: number) => number;
|
|
15
|
+
}
|
|
16
|
+
declare function useSliderTransform({ animationConfig, isAllSlidesVisible, isRTLMode, sliderObjRefs, sliderWrapperRef, slideToShow, variant }: Readonly<UseSlickSliderTransformProps>): UseSlickSliderTransformReturn;
|
|
17
|
+
export default useSliderTransform;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
/**
|
|
4
|
+
* -----------------------------------------------------------------------------
|
|
5
|
+
* @file useSliderTransform
|
|
6
|
+
* -----------------------------------------------------------------------------
|
|
7
|
+
*
|
|
8
|
+
* @description Hooks responsible for adding the Transition effect on Slider.
|
|
9
|
+
*
|
|
10
|
+
* Features:
|
|
11
|
+
* - Calculate the slider transited value according to slideToShow item.
|
|
12
|
+
*
|
|
13
|
+
* -----------------------------------------------------------------------------
|
|
14
|
+
* Copyright © 2025 BookingKoala. All rights reserved.
|
|
15
|
+
* -----------------------------------------------------------------------------
|
|
16
|
+
*/
|
|
17
|
+
var react_1 = require("react");
|
|
18
|
+
var helpers_1 = require("../../../helpers");
|
|
19
|
+
function useSliderTransform(_a) {
|
|
20
|
+
var animationConfig = _a.animationConfig, isAllSlidesVisible = _a.isAllSlidesVisible, isRTLMode = _a.isRTLMode, sliderObjRefs = _a.sliderObjRefs, sliderWrapperRef = _a.sliderWrapperRef, slideToShow = _a.slideToShow, variant = _a.variant;
|
|
21
|
+
// Constant
|
|
22
|
+
var isVertical = variant === 'vertical';
|
|
23
|
+
// Destruct props
|
|
24
|
+
var _b = (0, helpers_1.destructObj)(animationConfig), _c = _b.easing, easing = _c === void 0 ? 'ease' : _c, _d = _b.speed, speed = _d === void 0 ? 500 : _d;
|
|
25
|
+
/**
|
|
26
|
+
* Calculates how much the slider track should move when the slide changes.
|
|
27
|
+
* We add slideToShow to the index because extra (cloned) slides are added
|
|
28
|
+
* at the start for looping, so the real position shifts.
|
|
29
|
+
*
|
|
30
|
+
* - If the slider is vertical, the movement is calculated using slide height.
|
|
31
|
+
* - If the slider is horizontal, the movement is calculated using slide width.
|
|
32
|
+
*
|
|
33
|
+
* The returned value is negative because the track moves in the opposite
|
|
34
|
+
* direction of the slide change.
|
|
35
|
+
*/
|
|
36
|
+
var calculateTranslate = (0, react_1.useCallback)(function (index) {
|
|
37
|
+
if (!sliderObjRefs.current)
|
|
38
|
+
return 0;
|
|
39
|
+
var _a = sliderObjRefs.current, _b = _a.containerHeight, containerHeight = _b === void 0 ? 0 : _b, _c = _a.containerWidth, containerWidth = _c === void 0 ? 0 : _c;
|
|
40
|
+
var extendedIndex = index + slideToShow;
|
|
41
|
+
if (isVertical) {
|
|
42
|
+
return -extendedIndex * containerHeight;
|
|
43
|
+
}
|
|
44
|
+
var slideWidth = containerWidth / slideToShow;
|
|
45
|
+
var translate = -extendedIndex * slideWidth;
|
|
46
|
+
if (isRTLMode && !isVertical)
|
|
47
|
+
return -translate;
|
|
48
|
+
return translate;
|
|
49
|
+
}, [variant, slideToShow, sliderObjRefs, isVertical, isRTLMode]);
|
|
50
|
+
/**
|
|
51
|
+
* Applies translateX (or raw value) to the slider container,
|
|
52
|
+
* with optional transition handling.
|
|
53
|
+
*/
|
|
54
|
+
var applyTransform = (0, react_1.useCallback)(function (indexOrTranslate, withTransition, isMouseMoving) {
|
|
55
|
+
if (withTransition === void 0) { withTransition = true; }
|
|
56
|
+
if (isMouseMoving === void 0) { isMouseMoving = false; }
|
|
57
|
+
var container = sliderWrapperRef.current;
|
|
58
|
+
if ((0, helpers_1.isNullOrUndefined)(container) || isAllSlidesVisible)
|
|
59
|
+
return;
|
|
60
|
+
var translatedValue = isMouseMoving ? indexOrTranslate : calculateTranslate(indexOrTranslate);
|
|
61
|
+
var axisX = isVertical ? 0 : translatedValue;
|
|
62
|
+
var axisY = isVertical ? translatedValue : 0;
|
|
63
|
+
Object.assign(container.style, {
|
|
64
|
+
transform: variant === 'horizontal' ? "translate3d(".concat(axisX, "px, 0, 0)") : "translate3d(0,".concat(axisY, "px, 0)"),
|
|
65
|
+
transition: withTransition ? "transform ".concat(speed, "ms ").concat(easing) : 'none'
|
|
66
|
+
});
|
|
67
|
+
}, [calculateTranslate, sliderWrapperRef, speed, easing, isAllSlidesVisible, isVertical, variant]);
|
|
68
|
+
return { applyTransform: applyTransform, calculateTranslate: calculateTranslate };
|
|
69
|
+
}
|
|
70
|
+
exports.default = useSliderTransform;
|
|
71
|
+
//# sourceMappingURL=useSliderTransform.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSliderTransform.js","sourceRoot":"","sources":["../../../../../src/components/Slider/Slider/useSliderTransform.ts"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;EAaE;AACF,+BAAoC;AACpC,4CAAkE;AAmBlE,SAAS,kBAAkB,CAAC,EAQa;QAPxC,eAAe,qBAAA,EACf,kBAAkB,wBAAA,EAClB,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,OAAO,aAAA;IAEP,WAAW;IACX,IAAM,UAAU,GAAY,OAAO,KAAK,UAAU,CAAC;IAEnD,iBAAiB;IACX,IAAA,KAAmC,IAAA,qBAAW,EAAC,eAAe,CAAC,EAA7D,cAAe,EAAf,MAAM,mBAAG,MAAM,KAAA,EAAE,aAAW,EAAX,KAAK,mBAAG,GAAG,KAAiC,CAAC;IAEtE;;;;;;;;;;OAUG;IACH,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EACrC,UAAC,KAAa;QACb,IAAI,CAAC,aAAa,CAAC,OAAO;YAAE,OAAO,CAAC,CAAC;QAC/B,IAAA,KAA8C,aAAa,CAAC,OAAO,EAAjE,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EAAE,sBAAkB,EAAlB,cAAc,mBAAG,CAAC,KAA0B,CAAC;QAC1E,IAAM,aAAa,GAAG,KAAK,GAAG,WAAW,CAAC;QAE1C,IAAI,UAAU,EAAE,CAAC;YAChB,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;QACzC,CAAC;QACD,IAAM,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC;QAChD,IAAM,SAAS,GAAG,CAAC,aAAa,GAAG,UAAU,CAAC;QAE9C,IAAI,SAAS,IAAI,CAAC,UAAU;YAAE,OAAO,CAAC,SAAS,CAAC;QAChD,OAAO,SAAS,CAAC;IAClB,CAAC,EACD,CAAC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,CAAC,CAC5D,CAAC;IAEF;;;OAGG;IACH,IAAM,cAAc,GAAG,IAAA,mBAAW,EACjC,UAAC,gBAAwB,EAAE,cAAqB,EAAE,aAAqB;QAA5C,+BAAA,EAAA,qBAAqB;QAAE,8BAAA,EAAA,qBAAqB;QACtE,IAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC;QAC3C,IAAI,IAAA,2BAAiB,EAAC,SAAS,CAAC,IAAI,kBAAkB;YAAE,OAAO;QAC/D,IAAM,eAAe,GAAG,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAChG,IAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC;QAC/C,IAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;YAC9B,SAAS,EAAE,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,sBAAe,KAAK,cAAW,CAAC,CAAC,CAAC,wBAAiB,KAAK,WAAQ;YACtG,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC,oBAAa,KAAK,gBAAM,MAAM,CAAE,CAAC,CAAC,CAAC,MAAM;SACtE,CAAC,CAAC;IACJ,CAAC,EACD,CAAC,kBAAkB,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,OAAO,CAAC,CAC9F,CAAC;IAEF,OAAO,EAAE,cAAc,gBAAA,EAAE,kBAAkB,oBAAA,EAAE,CAAC;AAC/C,CAAC;AAED,kBAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* -----------------------------------------------------------------------------
|
|
3
|
+
* @file useCenterMode
|
|
4
|
+
* -----------------------------------------------------------------------------
|
|
5
|
+
*
|
|
6
|
+
* @description Utility file - add description here
|
|
7
|
+
*
|
|
8
|
+
* Features:
|
|
9
|
+
* - Add key features here
|
|
10
|
+
*
|
|
11
|
+
* -----------------------------------------------------------------------------
|
|
12
|
+
* Copyright © 2026 BookingKoala. All rights reserved.
|
|
13
|
+
* -----------------------------------------------------------------------------
|
|
14
|
+
*/
|
|
15
|
+
interface UseCenterMode {
|
|
16
|
+
activeSlideIndex?: number;
|
|
17
|
+
slideToShow: number;
|
|
18
|
+
}
|
|
19
|
+
declare function useCenterMode({ activeSlideIndex, slideToShow }: UseCenterMode): number[];
|
|
20
|
+
export default useCenterMode;
|
|
21
|
+
/**
|
|
22
|
+
* Returns active slide indexes based on slideToShow and active indicator
|
|
23
|
+
* Works only when slideToShow is odd
|
|
24
|
+
*/
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
function useCenterMode(_a) {
|
|
4
|
+
var _b = _a.activeSlideIndex, activeSlideIndex = _b === void 0 ? 0 : _b, slideToShow = _a.slideToShow;
|
|
5
|
+
var centerOffset = Math.floor(slideToShow / 2);
|
|
6
|
+
var centerIndex = slideToShow + activeSlideIndex + centerOffset;
|
|
7
|
+
// even slideToShow → two active slides
|
|
8
|
+
if (slideToShow === 1 || slideToShow === 2)
|
|
9
|
+
return [];
|
|
10
|
+
if (slideToShow % 2 === 0) {
|
|
11
|
+
return [centerIndex - 1, centerIndex];
|
|
12
|
+
}
|
|
13
|
+
// odd slideToShow
|
|
14
|
+
if (slideToShow === 3) {
|
|
15
|
+
return [centerIndex];
|
|
16
|
+
}
|
|
17
|
+
return [centerIndex - 1, centerIndex, centerIndex + 1];
|
|
18
|
+
}
|
|
19
|
+
exports.default = useCenterMode;
|
|
20
|
+
/**
|
|
21
|
+
* Returns active slide indexes based on slideToShow and active indicator
|
|
22
|
+
* Works only when slideToShow is odd
|
|
23
|
+
*/
|
|
24
|
+
// function getActiveSlideIndexes(): number[] {
|
|
25
|
+
// const activeSlideIndex = getActiveIndicatorIndex();
|
|
26
|
+
// if (isNullOrUndefined(activeSlideIndex)) return [];
|
|
27
|
+
// const centerOffset = Math.floor(slideToShow / 2);
|
|
28
|
+
// const centerIndex = slideToShow + activeSlideIndex + centerOffset;
|
|
29
|
+
// // even slideToShow → two active slides
|
|
30
|
+
// if (slideToShow === 1 || slideToShow === 2) return [];
|
|
31
|
+
// if (slideToShow % 2 === 0) {
|
|
32
|
+
// return [centerIndex - 1, centerIndex];
|
|
33
|
+
// }
|
|
34
|
+
// // odd slideToShow
|
|
35
|
+
// if (slideToShow === 3) {
|
|
36
|
+
// return [centerIndex];
|
|
37
|
+
// }
|
|
38
|
+
// return [centerIndex - 1, centerIndex, centerIndex + 1];
|
|
39
|
+
// }
|
|
40
|
+
//# sourceMappingURL=useCenterMode.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCenterMode.js","sourceRoot":"","sources":["../../../../src/components/Slider/useCenterMode.ts"],"names":[],"mappings":";;AAkBA,SAAS,aAAa,CAAC,EAAoD;QAAlD,wBAAoB,EAApB,gBAAgB,mBAAG,CAAC,KAAA,EAAE,WAAW,iBAAA;IACxD,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;IAChD,IAAM,WAAW,GAAG,WAAW,GAAG,gBAAgB,GAAG,YAAY,CAAA;IACjE,uCAAuC;IACvC,IAAI,WAAW,KAAK,CAAC,IAAI,WAAW,KAAK,CAAC;QAAE,OAAO,EAAE,CAAA;IACrD,IAAI,WAAW,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,CAAC,WAAW,GAAG,CAAC,EAAE,WAAW,CAAC,CAAA;IACvC,CAAC;IAED,kBAAkB;IAClB,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,CAAC,WAAW,CAAC,CAAA;IACtB,CAAC;IACD,OAAO,CAAC,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,CAAC,CAAA;AACxD,CAAC;AACD,kBAAe,aAAa,CAAA;AAC5B;;;GAGG;AACH,+CAA+C;AAC/C,uDAAuD;AACvD,uDAAuD;AAEvD,qDAAqD;AACrD,sEAAsE;AACtE,2CAA2C;AAC3C,0DAA0D;AAC1D,gCAAgC;AAChC,2CAA2C;AAC3C,KAAK;AAEL,sBAAsB;AACtB,4BAA4B;AAC5B,0BAA0B;AAC1B,KAAK;AACL,2DAA2D;AAC3D,IAAI"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* -----------------------------------------------------------------------------
|
|
3
|
+
* @file useSlider
|
|
4
|
+
* -----------------------------------------------------------------------------
|
|
5
|
+
*
|
|
6
|
+
* @description
|
|
7
|
+
* Main hook that controls all slider behavior.
|
|
8
|
+
*
|
|
9
|
+
* This hook connects multiple smaller slider hooks and makes them work
|
|
10
|
+
* together. It handles slide size calculation, navigation, animations,
|
|
11
|
+
* autoplay, draggable interactions, breakpoint-based configuration,
|
|
12
|
+
* and window resize updates.
|
|
13
|
+
*
|
|
14
|
+
* The UI layer only needs to use the values and functions returned from
|
|
15
|
+
* this hook.
|
|
16
|
+
*
|
|
17
|
+
* -----------------------------------------------------------------------------
|
|
18
|
+
* Copyright © 2025 BookingKoala. All rights reserved.
|
|
19
|
+
* -----------------------------------------------------------------------------
|
|
20
|
+
*/
|
|
21
|
+
import { type Ref } from 'react';
|
|
22
|
+
import { type SlickSliderAnimationConfig, type SlickSliderAutoPlayConfig } from './SlickSlider';
|
|
23
|
+
import { SlickSliderConfig } from './useSliderBreakpoint';
|
|
24
|
+
export interface UseSlickSliderReturn {
|
|
25
|
+
getActiveIndicatorIndex: () => number | undefined;
|
|
26
|
+
getIndicatorCount: () => number | undefined;
|
|
27
|
+
goToSlideIndicator: (index: number) => void;
|
|
28
|
+
handleNextSlide: () => void;
|
|
29
|
+
handlePrevSlide: () => void;
|
|
30
|
+
hasNextBtnDisabled: () => boolean;
|
|
31
|
+
hasPrevBtnDisabled: () => boolean;
|
|
32
|
+
sliderWrapperRef: Ref<HTMLDivElement>;
|
|
33
|
+
}
|
|
34
|
+
export interface UseSlickSliderProps {
|
|
35
|
+
activeSlide: number;
|
|
36
|
+
animationConfig: SlickSliderAnimationConfig;
|
|
37
|
+
autoPlayConfig: SlickSliderAutoPlayConfig;
|
|
38
|
+
breakpoints: SlickSliderConfig[];
|
|
39
|
+
draggable?: {
|
|
40
|
+
dragThreshold?: number;
|
|
41
|
+
enableDrag?: boolean;
|
|
42
|
+
};
|
|
43
|
+
gap: number;
|
|
44
|
+
isRTLMode: boolean;
|
|
45
|
+
loop: boolean;
|
|
46
|
+
slideToScroll: number;
|
|
47
|
+
slideToShow: number;
|
|
48
|
+
totalSlides: number;
|
|
49
|
+
variant: 'horizontal' | 'vertical';
|
|
50
|
+
}
|
|
51
|
+
export interface SlickSliderRefs {
|
|
52
|
+
containerHeight: number;
|
|
53
|
+
containerWidth: number;
|
|
54
|
+
currentIndex: number;
|
|
55
|
+
drag: {
|
|
56
|
+
isDragging: boolean;
|
|
57
|
+
startX: number;
|
|
58
|
+
startY: number;
|
|
59
|
+
translate: number;
|
|
60
|
+
};
|
|
61
|
+
isTransitionComplete: boolean;
|
|
62
|
+
totalSlides: number;
|
|
63
|
+
}
|
|
64
|
+
declare function useSlider({ activeSlide, animationConfig, autoPlayConfig, breakpoints, draggable, gap, isRTLMode, loop, slideToScroll, slideToShow, totalSlides, variant, }: Readonly<UseSlickSliderProps>): UseSlickSliderReturn;
|
|
65
|
+
export default useSlider;
|