@snack-uikit/carousel 0.4.6-preview-53bd8747.0 → 0.4.6-preview-baf754b1.0

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/components/ItemProvider/ItemProvider.js +3 -31
  2. package/dist/esm/components/ItemProvider/ItemProvider.js +2 -31
  3. package/package.json +5 -5
  4. package/src/components/ItemProvider/ItemProvider.tsx +2 -37
package/dist/cjs/components/ItemProvider/ItemProvider.js CHANGED
@@ -112,46 +112,17 @@ function ItemProvider(_ref) {
112
112
  const fallbackWidth = Math.floor(100 / showItems);
113
113
  return `${fallbackWidth}%`;
114
114
  }, [computedValues.itemWidth, showItems]);
115
- const canSwipe = (0, react_1.useRef)(true);
116
115
  const [drag, setDrag] = (0, react_1.useState)({
117
116
  drag: 0,
118
117
  pointers: true
119
118
  });
120
- const handleSwipeStart = eventData => {
121
- if (!swipe) {
122
- return;
123
- }
124
- if (eventData.dir !== 'Right' && eventData.dir !== 'Left') {
125
- canSwipe.current = false;
126
- } else {
127
- eventData.event.preventDefault();
128
- eventData.event.stopPropagation();
129
- }
130
- };
131
119
  const handleSwiping = eventData => {
132
- if (!swipe) {
133
- return;
134
- }
135
- if (!canSwipe.current) {
136
- return;
137
- }
138
- eventData.event.preventDefault();
139
- eventData.event.stopPropagation();
140
120
  setDrag({
141
121
  drag: eventData.deltaX,
142
122
  pointers: Math.abs(eventData.deltaX) < Number.MIN_SAFE_INTEGER
143
123
  });
144
124
  };
145
125
  const handleSwiped = eventData => {
146
- if (!swipe) {
147
- return;
148
- }
149
- if (!canSwipe.current) {
150
- canSwipe.current = true;
151
- return;
152
- }
153
- eventData.event.preventDefault();
154
- eventData.event.stopPropagation();
155
126
  if (Math.abs(drag.drag) < swipeActivateLength) {
156
127
  return setDrag({
157
128
  drag: 0,
@@ -166,10 +137,11 @@ function ItemProvider(_ref) {
166
137
  return;
167
138
  };
168
139
  const _a = (0, utils_1.useSwipeable)({
169
- onSwipeStart: handleSwipeStart,
170
140
  onSwiping: handleSwiping,
171
141
  onSwiped: handleSwiped,
172
- trackMouse: true
142
+ trackMouse: true,
143
+ enabled: swipe,
144
+ availableDirections: ['Left', 'Right']
173
145
  }),
174
146
  {
175
147
  ref
package/dist/esm/components/ItemProvider/ItemProvider.js CHANGED
@@ -94,41 +94,11 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
94
94
  const fallbackWidth = Math.floor(100 / showItems);
95
95
  return `${fallbackWidth}%`;
96
96
  }, [computedValues.itemWidth, showItems]);
97
- const canSwipe = useRef(true);
98
97
  const [drag, setDrag] = useState({ drag: 0, pointers: true });
99
- const handleSwipeStart = eventData => {
100
- if (!swipe) {
101
- return;
102
- }
103
- if (eventData.dir !== 'Right' && eventData.dir !== 'Left') {
104
- canSwipe.current = false;
105
- }
106
- else {
107
- eventData.event.preventDefault();
108
- eventData.event.stopPropagation();
109
- }
110
- };
111
98
  const handleSwiping = eventData => {
112
- if (!swipe) {
113
- return;
114
- }
115
- if (!canSwipe.current) {
116
- return;
117
- }
118
- eventData.event.preventDefault();
119
- eventData.event.stopPropagation();
120
99
  setDrag({ drag: eventData.deltaX, pointers: Math.abs(eventData.deltaX) < Number.MIN_SAFE_INTEGER });
121
100
  };
122
101
  const handleSwiped = eventData => {
123
- if (!swipe) {
124
- return;
125
- }
126
- if (!canSwipe.current) {
127
- canSwipe.current = true;
128
- return;
129
- }
130
- eventData.event.preventDefault();
131
- eventData.event.stopPropagation();
132
102
  if (Math.abs(drag.drag) < swipeActivateLength) {
133
103
  return setDrag({ drag: 0, pointers: true });
134
104
  }
@@ -137,10 +107,11 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
137
107
  return;
138
108
  };
139
109
  const _a = useSwipeable({
140
- onSwipeStart: handleSwipeStart,
141
110
  onSwiping: handleSwiping,
142
111
  onSwiped: handleSwiped,
143
112
  trackMouse: true,
113
+ enabled: swipe,
114
+ availableDirections: ['Left', 'Right'],
144
115
  }), { ref } = _a, swipeProps = __rest(_a, ["ref"]);
145
116
  return (_jsx("div", { ref: containerRef, className: styles.itemProvider, "data-pointers": !drag.pointers || undefined, "data-swipe": swipe || undefined, "data-gap": gap, style: Object.assign({}, (Boolean(gap) ? { '--gap': gap } : {})), children: _jsx("div", Object.assign({}, swipeProps, { className: styles.itemTracker, "data-test-id": TEST_IDS.trackLine, style: {
146
117
  transform: `translateX(${transform + drag.drag}px)`,
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
- "version": "0.4.6-preview-53bd8747.0",
7
+ "version": "0.4.6-preview-baf754b1.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,13 +36,13 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/icons": "0.24.1-preview-53bd8747.0",
40
- "@snack-uikit/pagination": "0.9.4-preview-53bd8747.0",
41
- "@snack-uikit/utils": "3.5.1-preview-53bd8747.0",
39
+ "@snack-uikit/icons": "0.24.1-preview-baf754b1.0",
40
+ "@snack-uikit/pagination": "0.9.4-preview-baf754b1.0",
41
+ "@snack-uikit/utils": "3.5.1-preview-baf754b1.0",
42
42
  "classnames": "2.5.1",
43
43
  "lodash.debounce": "4.0.8",
44
44
  "merge-refs": "1.3.0",
45
45
  "uncontrollable": "8.0.4"
46
46
  },
47
- "gitHead": "527ea8e5660cbf949a1e84bc833f876a0802d10e"
47
+ "gitHead": "46fb98c10336c2f3dfb35c66737eca5cd3dc6e4f"
48
48
  }
package/src/components/ItemProvider/ItemProvider.tsx CHANGED
@@ -132,49 +132,13 @@ export function ItemProvider({
132
132
  return `${fallbackWidth}%`;
133
133
  }, [computedValues.itemWidth, showItems]);
134
134
 
135
- const canSwipe = useRef(true);
136
135
  const [drag, setDrag] = useState({ drag: 0, pointers: true });
137
136
 
138
- const handleSwipeStart: SwipeCallback = eventData => {
139
- if (!swipe) {
140
- return;
141
- }
142
-
143
- if (eventData.dir !== 'Right' && eventData.dir !== 'Left') {
144
- canSwipe.current = false;
145
- } else {
146
- eventData.event.preventDefault();
147
- eventData.event.stopPropagation();
148
- }
149
- };
150
-
151
137
  const handleSwiping: SwipeCallback = eventData => {
152
- if (!swipe) {
153
- return;
154
- }
155
-
156
- if (!canSwipe.current) {
157
- return;
158
- }
159
-
160
- eventData.event.preventDefault();
161
- eventData.event.stopPropagation();
162
138
  setDrag({ drag: eventData.deltaX, pointers: Math.abs(eventData.deltaX) < Number.MIN_SAFE_INTEGER });
163
139
  };
164
140
 
165
141
  const handleSwiped: SwipeCallback = eventData => {
166
- if (!swipe) {
167
- return;
168
- }
169
-
170
- if (!canSwipe.current) {
171
- canSwipe.current = true;
172
- return;
173
- }
174
-
175
- eventData.event.preventDefault();
176
- eventData.event.stopPropagation();
177
-
178
142
  if (Math.abs(drag.drag) < swipeActivateLength) {
179
143
  return setDrag({ drag: 0, pointers: true });
180
144
  }
@@ -185,10 +149,11 @@ export function ItemProvider({
185
149
  };
186
150
 
187
151
  const { ref, ...swipeProps } = useSwipeable({
188
- onSwipeStart: handleSwipeStart,
189
152
  onSwiping: handleSwiping,
190
153
  onSwiped: handleSwiped,
191
154
  trackMouse: true,
155
+ enabled: swipe,
156
+ availableDirections: ['Left', 'Right'],
192
157
  });
193
158
 
194
159
  return (