@coinbase/cds-mobile 9.22.1 → 9.23.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.
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.23.0 (8/27/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Add uncontrolled initialPage prop to Carousel. [[#864](https://github.com/coinbase/cds/pull/864)]
|
|
16
|
+
|
|
11
17
|
## 9.22.1 (8/25/2026 PST)
|
|
12
18
|
|
|
13
19
|
#### 🐞 Fixes
|
|
@@ -141,6 +141,12 @@ export type CarouselBaseProps = SharedProps &
|
|
|
141
141
|
* @default 'page'
|
|
142
142
|
*/
|
|
143
143
|
snapMode?: 'item' | 'page';
|
|
144
|
+
/**
|
|
145
|
+
* Zero-based page index to show on first layout, with no animation. Uncontrolled —
|
|
146
|
+
* updating it later does not move the carousel. Out-of-range values are clamped.
|
|
147
|
+
* @default 0
|
|
148
|
+
*/
|
|
149
|
+
initialPage?: number;
|
|
144
150
|
/**
|
|
145
151
|
* Hides the navigation arrows (previous/next buttons).
|
|
146
152
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/carousel/Carousel.tsx"],"names":[],"mappings":"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"}
|
package/esm/carousel/Carousel.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
const _excluded = ["ref"],
|
|
2
|
-
_excluded2 = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
|
|
2
|
+
_excluded2 = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "initialPage", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
|
|
3
3
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
4
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
5
|
-
import React, { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
5
|
+
import React, { memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
6
6
|
import { View } from 'react-native';
|
|
7
7
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
8
8
|
import { useCarouselAutoplay } from '@coinbase/cds-common/carousel/useCarouselAutoplay';
|
|
@@ -270,6 +270,7 @@ export const Carousel = /*#__PURE__*/memo(_ref4 => {
|
|
|
270
270
|
paginationVariant,
|
|
271
271
|
drag = 'snap',
|
|
272
272
|
snapMode = 'page',
|
|
273
|
+
initialPage,
|
|
273
274
|
NavigationComponent = DefaultCarouselNavigation,
|
|
274
275
|
PaginationComponent = DefaultCarouselPagination,
|
|
275
276
|
style,
|
|
@@ -288,11 +289,12 @@ export const Carousel = /*#__PURE__*/memo(_ref4 => {
|
|
|
288
289
|
} = mergedProps,
|
|
289
290
|
props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
|
|
290
291
|
const carouselScrollX = useRef(0);
|
|
292
|
+
const hasAppliedInitialPageRef = useRef(false);
|
|
291
293
|
const animationApi = useSpring({
|
|
292
294
|
x: carouselScrollX.current,
|
|
293
295
|
config: animationConfig
|
|
294
296
|
});
|
|
295
|
-
const [activePageIndex, setActivePageIndex] = useState(0);
|
|
297
|
+
const [activePageIndex, setActivePageIndex] = useState(() => Math.max(0, initialPage != null ? initialPage : 0));
|
|
296
298
|
const [containerSize, onLayout] = useLayout();
|
|
297
299
|
const [carouselItemRects, setCarouselItemRects] = useState({});
|
|
298
300
|
const [visibleCarouselItems, setVisibleCarouselItems] = useState(new Set());
|
|
@@ -424,18 +426,35 @@ export const Carousel = /*#__PURE__*/memo(_ref4 => {
|
|
|
424
426
|
enabled: autoplay != null ? autoplay : false,
|
|
425
427
|
interval: autoplayInterval
|
|
426
428
|
});
|
|
427
|
-
const goToPage = useCallback(page
|
|
429
|
+
const goToPage = useCallback(function (page, _temp) {
|
|
430
|
+
let {
|
|
431
|
+
animate: shouldAnimate = true
|
|
432
|
+
} = _temp === void 0 ? {} : _temp;
|
|
428
433
|
const newPage = Math.max(0, Math.min(totalPages - 1, page));
|
|
429
434
|
updateActivePageIndex(newPage);
|
|
430
435
|
updateVisibleCarouselItems(pageOffsets[newPage]);
|
|
431
436
|
const targetOffset = isLoopingActive ? findNearestLoopOffset(carouselScrollX.current, [pageOffsets[newPage]], loopLength).offset : pageOffsets[newPage];
|
|
432
437
|
carouselScrollX.current = targetOffset;
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
438
|
+
if (shouldAnimate) {
|
|
439
|
+
animationApi.x.start({
|
|
440
|
+
to: targetOffset,
|
|
441
|
+
config: animationConfig
|
|
442
|
+
});
|
|
443
|
+
} else {
|
|
444
|
+
animationApi.x.set(targetOffset);
|
|
445
|
+
}
|
|
437
446
|
reset();
|
|
438
447
|
}, [totalPages, updateActivePageIndex, updateVisibleCarouselItems, pageOffsets, isLoopingActive, loopLength, animationApi.x, reset]);
|
|
448
|
+
useLayoutEffect(() => {
|
|
449
|
+
if (hasAppliedInitialPageRef.current || totalPages === 0) return;
|
|
450
|
+
hasAppliedInitialPageRef.current = true;
|
|
451
|
+
const targetPage = initialPage != null ? initialPage : 0;
|
|
452
|
+
if (targetPage > 0) {
|
|
453
|
+
goToPage(targetPage, {
|
|
454
|
+
animate: false
|
|
455
|
+
});
|
|
456
|
+
}
|
|
457
|
+
}, [totalPages, initialPage, goToPage]);
|
|
439
458
|
useImperativeHandle(ref, () => ({
|
|
440
459
|
activePageIndex,
|
|
441
460
|
totalPages,
|
|
@@ -650,6 +650,30 @@ const ImperativeApiExample = () => {
|
|
|
650
650
|
})
|
|
651
651
|
});
|
|
652
652
|
};
|
|
653
|
+
const InitialPageExample = () => {
|
|
654
|
+
const theme = useTheme();
|
|
655
|
+
return /*#__PURE__*/_jsx(Example, {
|
|
656
|
+
paddingX: 0,
|
|
657
|
+
children: /*#__PURE__*/_jsx(Carousel, {
|
|
658
|
+
initialPage: 2,
|
|
659
|
+
snapMode: "page",
|
|
660
|
+
styles: {
|
|
661
|
+
root: {
|
|
662
|
+
paddingHorizontal: theme.space[2]
|
|
663
|
+
},
|
|
664
|
+
carousel: {
|
|
665
|
+
gap: theme.space[2]
|
|
666
|
+
}
|
|
667
|
+
},
|
|
668
|
+
title: "Initial Page (opens on page 3)",
|
|
669
|
+
children: sampleItems.slice(0, 5).map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
|
|
670
|
+
id: "initial-page-" + index,
|
|
671
|
+
width: "100%",
|
|
672
|
+
children: item
|
|
673
|
+
}, "initial-page-" + index))
|
|
674
|
+
})
|
|
675
|
+
});
|
|
676
|
+
};
|
|
653
677
|
const LoopingExamples = () => {
|
|
654
678
|
const theme = useTheme();
|
|
655
679
|
const horizontalPadding = theme.space[2];
|
|
@@ -846,6 +870,6 @@ const AnimatedPaginationExample = () => {
|
|
|
846
870
|
export default function CarouselScreen() {
|
|
847
871
|
return /*#__PURE__*/_jsxs(ExampleScreen, {
|
|
848
872
|
paddingX: 0,
|
|
849
|
-
children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {}), /*#__PURE__*/_jsx(LoopingExamples, {}), /*#__PURE__*/_jsx(AutoplayExample, {})]
|
|
873
|
+
children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {}), /*#__PURE__*/_jsx(LoopingExamples, {}), /*#__PURE__*/_jsx(AutoplayExample, {}), /*#__PURE__*/_jsx(InitialPageExample, {})]
|
|
850
874
|
});
|
|
851
875
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.23.0",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
"react-native-worklets": "0.5.2"
|
|
219
219
|
},
|
|
220
220
|
"dependencies": {
|
|
221
|
-
"@coinbase/cds-common": "^9.
|
|
221
|
+
"@coinbase/cds-common": "^9.23.0",
|
|
222
222
|
"@coinbase/cds-icons": "^5.22.0",
|
|
223
223
|
"@coinbase/cds-illustrations": "^4.48.0",
|
|
224
224
|
"@coinbase/cds-lottie-files": "^3.3.4",
|