@amazon-devices/vega-carousel 0.1.3

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 (71) hide show
  1. package/LICENSE +7 -0
  2. package/README.md +0 -0
  3. package/dist/Carousel/Carousel.d.ts +16 -0
  4. package/dist/Carousel/Carousel.js +102 -0
  5. package/dist/Carousel/Utils.d.ts +4 -0
  6. package/dist/Carousel/Utils.js +35 -0
  7. package/dist/Carousel/index.d.ts +7 -0
  8. package/dist/Carousel/index.js +23 -0
  9. package/dist/Carousel/types.d.ts +406 -0
  10. package/dist/Carousel/types.js +2 -0
  11. package/dist/CarouselData/CarouselDataAdapter.d.ts +141 -0
  12. package/dist/CarouselData/CarouselDataAdapter.js +67 -0
  13. package/dist/CarouselData/CarouselDataResolver.d.ts +100 -0
  14. package/dist/CarouselData/CarouselDataResolver.js +224 -0
  15. package/dist/CarouselData/CarouselDataTypes.d.ts +280 -0
  16. package/dist/CarouselData/CarouselDataTypes.js +84 -0
  17. package/dist/CarouselData/index.d.ts +3 -0
  18. package/dist/CarouselData/index.js +24 -0
  19. package/dist/CarouselScrollable/CarouselScrollable.d.ts +67 -0
  20. package/dist/CarouselScrollable/CarouselScrollable.js +77 -0
  21. package/dist/CarouselScrollable/CarouselScrollableProps.d.ts +499 -0
  22. package/dist/CarouselScrollable/CarouselScrollableProps.js +211 -0
  23. package/dist/CarouselScrollable/CarouselScrollableRef.d.ts +80 -0
  24. package/dist/CarouselScrollable/CarouselScrollableRef.js +7 -0
  25. package/dist/CarouselScrollable/CarouselScrollableTypes.d.ts +224 -0
  26. package/dist/CarouselScrollable/CarouselScrollableTypes.js +116 -0
  27. package/dist/CarouselScrollable/CarouselSimple.d.ts +71 -0
  28. package/dist/CarouselScrollable/CarouselSimple.js +111 -0
  29. package/dist/CarouselScrollable/CarouselSimpleProps.d.ts +29 -0
  30. package/dist/CarouselScrollable/CarouselSimpleProps.js +7 -0
  31. package/dist/CarouselScrollable/index.d.ts +6 -0
  32. package/dist/CarouselScrollable/index.js +27 -0
  33. package/dist/CarouselScrollable/native/CarouselNativeHostComponent.d.ts +109 -0
  34. package/dist/CarouselScrollable/native/CarouselNativeHostComponent.js +82 -0
  35. package/dist/CarouselScrollable/native/CarouselNativeItemHostComponent.d.ts +94 -0
  36. package/dist/CarouselScrollable/native/CarouselNativeItemHostComponent.js +42 -0
  37. package/dist/CarouselScrollable/native/CarouselNativeItemWrapper.d.ts +255 -0
  38. package/dist/CarouselScrollable/native/CarouselNativeItemWrapper.js +276 -0
  39. package/dist/CarouselScrollable/native/CarouselNativeLogic.d.ts +209 -0
  40. package/dist/CarouselScrollable/native/CarouselNativeLogic.js +349 -0
  41. package/dist/CarouselScrollable/native/CarouselNativeWrapper.d.ts +68 -0
  42. package/dist/CarouselScrollable/native/CarouselNativeWrapper.js +164 -0
  43. package/dist/CarouselScrollable/native/index.d.ts +5 -0
  44. package/dist/CarouselScrollable/native/index.js +26 -0
  45. package/dist/CarouselScrollable/recyclerview/JSRecyclerViewList.d.ts +25 -0
  46. package/dist/CarouselScrollable/recyclerview/JSRecyclerViewList.js +150 -0
  47. package/dist/index.d.ts +3 -0
  48. package/dist/index.js +24 -0
  49. package/dist/kepler/aarch64-debug/lib/com.amazon.keplerscript.carousel.so +0 -0
  50. package/dist/kepler/aarch64-debug/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
  51. package/dist/kepler/aarch64-release/lib/com.amazon.keplerscript.carousel.so +0 -0
  52. package/dist/kepler/aarch64-release/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
  53. package/dist/kepler/armv7-debug/lib/com.amazon.keplerscript.carousel.so +0 -0
  54. package/dist/kepler/armv7-debug/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
  55. package/dist/kepler/armv7-release/lib/com.amazon.keplerscript.carousel.so +0 -0
  56. package/dist/kepler/armv7-release/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
  57. package/dist/kepler/tm-manifest.json +1 -0
  58. package/dist/kepler/x86_64-debug/lib/com.amazon.keplerscript.carousel.so +0 -0
  59. package/dist/kepler/x86_64-debug/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
  60. package/dist/kepler/x86_64-release/lib/com.amazon.keplerscript.carousel.so +0 -0
  61. package/dist/kepler/x86_64-release/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
  62. package/dist/utils/CarouselLogger.d.ts +295 -0
  63. package/dist/utils/CarouselLogger.js +370 -0
  64. package/dist/utils/CarouselReactNativeUtilities.d.ts +108 -0
  65. package/dist/utils/CarouselReactNativeUtilities.js +150 -0
  66. package/dist/utils/HelperTypes.d.ts +5 -0
  67. package/dist/utils/HelperTypes.js +7 -0
  68. package/dist/utils/index.d.ts +3 -0
  69. package/dist/utils/index.js +24 -0
  70. package/package.json +1 -0
  71. package/react-native.config.js +22 -0
package/LICENSE ADDED
@@ -0,0 +1,7 @@
1
+ Copyright 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
2
+
3
+ These materials are licensed as "Program Materials" under the Program Materials License Agreement (the "Agreement"). The Agreement is available at https://developer.amazon.com/support/legal/pml. See the Agreement for the specific terms and conditions of the Agreement. Capitalized terms not defined in this file have the meanings given to them in the Agreement.
4
+
5
+ If you do not agree to the above terms and conditions, you may not use any file in this package.
6
+
7
+ YOUR USE OF THE PROGRAM MATERIALS IN OR ASSOCIATED WITH THIS PACKAGE IS AT YOUR SOLE RISK. IN NO EVENT WILL AMAZON BE LIABLE FOR ANY DAMAGES, INCLUDING WITHOUT LIMITATION ANY DIRECT, INDIRECT, CONSEQUENTIAL, SPECIAL, INCIDENTAL, OR PUNITIVE DAMAGES (INCLUDING FOR ANY LOSS OF GOODWILL, BUSINESS INTERRUPTION, LOST PROFITS OR DATA, OR COMPUTER FAILURE OR MALFUNCTION) ARISING FROM OR RELATING TO SUCH PROGRAM MATERIALS, HOWEVER CAUSED AND REGARDLESS OF THE THEORY OF LIABILITY, EVEN IF AMAZON HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. THESE LIMITATIONS AND DISCLAIMERS APPLY EXCEPT TO THE EXTENT PROHIBITED BY APPLICABLE LAW.
package/README.md ADDED
File without changes
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Copyright (c) 2022 - 2025 Amazon.com, Inc. or its affiliates. All rights
3
+ * reserved.
4
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
5
+ */
6
+ import React from 'react';
7
+ import { CarouselProps, CarouselRef } from './types';
8
+ declare function Scrollable<Item, Key = String>({ dataAdapter: { getItem, getItemCount, getItemKey, notifyDataError }, renderItem: renderItemProp, testID, uniqueId, orientation, renderedItemsCount, numOffsetItems, navigableScrollAreaMargin, hasPreferredFocus, initialStartIndex, hideItemsBeforeSelection, trapSelectionOnOrientation, containerStyle, itemStyle, animationDuration, selectionStrategy, pinnedSelectedItemOffset, onSelectionChanged, selectionBorder, }: CarouselProps<Item, Key>, ref: React.Ref<CarouselRef<Key>>): React.JSX.Element;
9
+ /**
10
+ * Carousel is used to implement a single row of content metadata tiles in a
11
+ * Kepler application UI screen.
12
+ */
13
+ export declare const Carousel: <ItemT, KeyT = string>(props: CarouselProps<ItemT, KeyT> & {
14
+ ref?: React.Ref<CarouselRef<KeyT>> | undefined;
15
+ }) => ReturnType<typeof Scrollable>;
16
+ export {};
@@ -0,0 +1,102 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ exports.Carousel = void 0;
27
+ /**
28
+ * Copyright (c) 2022 - 2025 Amazon.com, Inc. or its affiliates. All rights
29
+ * reserved.
30
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
31
+ */
32
+ const react_1 = __importStar(require("react"));
33
+ const CarouselScrollable_1 = require("../CarouselScrollable");
34
+ const Utils_1 = require("./Utils");
35
+ function Scrollable({ dataAdapter: { getItem, getItemCount, getItemKey, notifyDataError }, renderItem: renderItemProp, testID, uniqueId, orientation = 'horizontal', renderedItemsCount = 8, numOffsetItems = 2, navigableScrollAreaMargin = 0, hasPreferredFocus = false, initialStartIndex = 0, hideItemsBeforeSelection = false, trapSelectionOnOrientation = false, containerStyle, itemStyle = {
36
+ itemPadding: 20,
37
+ pressedItemScaleFactor: 0.8,
38
+ selectedItemScaleFactor: 1,
39
+ }, animationDuration = {
40
+ itemPressedDuration: 0.15,
41
+ itemScrollDuration: 0.2,
42
+ }, selectionStrategy = 'anchored', pinnedSelectedItemOffset = '0%', onSelectionChanged, selectionBorder, }, ref) {
43
+ const { borderStrategy, ...borderStyleProps } = selectionBorder || {};
44
+ var { itemPadding, itemPaddingOnSelection, pressedItemScaleFactor, selectedItemScaleFactor, getSelectedItemOffset, } = itemStyle;
45
+ if (itemPaddingOnSelection === undefined)
46
+ itemPaddingOnSelection = itemPadding;
47
+ var { itemPressedDuration, itemScrollDuration, containerSelectionChangeDuration } = animationDuration;
48
+ if (containerSelectionChangeDuration === undefined)
49
+ containerSelectionChangeDuration = itemScrollDuration;
50
+ const carouselRef = react_1.default.useRef(null);
51
+ // Map selectionStrategy to ListSelectionStrategy
52
+ const listSelectionStrategy = react_1.default.useMemo(() => {
53
+ if (selectionStrategy === 'anchored') {
54
+ return CarouselScrollable_1.ListSelectionStrategy.ANCHORED;
55
+ }
56
+ else if (selectionStrategy === 'pinned') {
57
+ return CarouselScrollable_1.ListSelectionStrategy.PINNED;
58
+ }
59
+ else {
60
+ return CarouselScrollable_1.ListSelectionStrategy.NATURAL;
61
+ }
62
+ }, [selectionStrategy]);
63
+ (0, react_1.useImperativeHandle)(ref, () => ({
64
+ scrollTo(index, animated) {
65
+ carouselRef.current?.setSelectedItem(index, animated);
66
+ },
67
+ scrollToKey(key, animated) {
68
+ console.warn('[Carousel-V2] scrollToKey called with key:', key, 'animated:', animated);
69
+ },
70
+ enableDpad(enable) {
71
+ carouselRef.current?.enableInputEvents(enable);
72
+ },
73
+ notifyDataChange(changes, animated) {
74
+ carouselRef.current?.notifyDataChange(changes, animated);
75
+ },
76
+ }));
77
+ const renderItem = react_1.default.useCallback((item, index) => {
78
+ const result = renderItemProp(item);
79
+ return result === null ? undefined : result;
80
+ }, [renderItemProp]);
81
+ const getItemScrollable = react_1.default.useCallback((index) => {
82
+ const item = getItem(index);
83
+ if (item !== undefined) {
84
+ const renderInfo = { item, index };
85
+ return renderInfo;
86
+ }
87
+ return undefined;
88
+ }, [getItem]);
89
+ const notifyDataErrorScrollable = react_1.default.useCallback((error) => {
90
+ return notifyDataError(error);
91
+ }, [notifyDataError]);
92
+ return (react_1.default.createElement(CarouselScrollable_1.CarouselScrollable, { ref: carouselRef, getItem: getItemScrollable, getItemCount: getItemCount, getItemKey: getItemKey, notifyDataError: notifyDataErrorScrollable, renderItem: renderItem, testID: testID, uniqueId: uniqueId, orientation: orientation === 'horizontal'
93
+ ? CarouselScrollable_1.ListOrientation.HORIZONTAL
94
+ : CarouselScrollable_1.ListOrientation.VERTICAL, renderedItemsCount: renderedItemsCount, numOffsetItems: numOffsetItems, navigableScrollOffset: navigableScrollAreaMargin, hasPreferredFocus: hasPreferredFocus, initialStartIndex: initialStartIndex, hideItemsBeforeSelection: hideItemsBeforeSelection, trapFocusOnOrientation: trapSelectionOnOrientation, style: containerStyle, itemPadding: itemPadding, itemPaddingOnFocus: itemPaddingOnSelection, pressedItemScaleFactor: pressedItemScaleFactor, focusedItemScaleFactor: selectedItemScaleFactor, getSelectedItemOffset: getSelectedItemOffset, itemPressedDuration: itemPressedDuration, itemScrollDuration: itemScrollDuration, containerFocusChangeDuration: containerSelectionChangeDuration, selectionStrategy: listSelectionStrategy, pinnedFocusOffset: selectionStrategy === 'pinned'
95
+ ? (0, Utils_1.percentageStringToNumber)(pinnedSelectedItemOffset)
96
+ : 0, onSelectionChanged: onSelectionChanged, showSelectionBorder: selectionBorder !== undefined, selectionBorderStyle: borderStyleProps, selectionBorderStrategy: borderStrategy }));
97
+ }
98
+ /**
99
+ * Carousel is used to implement a single row of content metadata tiles in a
100
+ * Kepler application UI screen.
101
+ */
102
+ exports.Carousel = react_1.default.forwardRef(Scrollable);
@@ -0,0 +1,4 @@
1
+ import { Percentage, PinnedPlacement } from './types';
2
+ export declare function isValidPinnedPlacement(value: string | undefined): value is PinnedPlacement;
3
+ export declare function isValidPercentage(value: string | undefined): value is Percentage;
4
+ export declare function percentageStringToNumber(value: string | undefined): number | undefined;
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.percentageStringToNumber = exports.isValidPercentage = exports.isValidPinnedPlacement = void 0;
4
+ const PERCENTAGE_REGEX = /^(\d+(?:\.\d+)?)%$/;
5
+ function isValidPinnedPlacement(value) {
6
+ return value === 'start' || value === 'center' || value === 'end';
7
+ }
8
+ exports.isValidPinnedPlacement = isValidPinnedPlacement;
9
+ function isValidPercentage(value) {
10
+ if (typeof value === 'undefined') {
11
+ return false;
12
+ }
13
+ const match = value.match(PERCENTAGE_REGEX);
14
+ if (!match)
15
+ return false;
16
+ const percentage = parseFloat(match[1]);
17
+ return percentage >= 0 && percentage <= 100;
18
+ }
19
+ exports.isValidPercentage = isValidPercentage;
20
+ function percentageStringToNumber(value) {
21
+ if (!isValidPercentage(value)) {
22
+ if (isValidPinnedPlacement(value)) {
23
+ if (value === 'start')
24
+ return 0;
25
+ if (value === 'center')
26
+ return 0.5;
27
+ if (value === 'end')
28
+ return 1;
29
+ }
30
+ return 0; // default to 0%
31
+ }
32
+ const match = value.match(PERCENTAGE_REGEX);
33
+ return !match ? 0 : Math.min(Math.max(parseFloat(match[1]) / 100, 0.0), 1.0);
34
+ }
35
+ exports.percentageStringToNumber = percentageStringToNumber;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Copyright (c) 2022 - 2025 Amazon.com, Inc. or its affiliates. All rights
3
+ * reserved.
4
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
5
+ */
6
+ export * from './Carousel';
7
+ export * from './types';
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ /**
18
+ * Copyright (c) 2022 - 2025 Amazon.com, Inc. or its affiliates. All rights
19
+ * reserved.
20
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
21
+ */
22
+ __exportStar(require("./Carousel"), exports);
23
+ __exportStar(require("./types"), exports);
@@ -0,0 +1,406 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * Copyright (c) 2022 - 2025 Amazon.com, Inc. or its affiliates. All rights
4
+ * reserved.
5
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
6
+ */
7
+ import { ColorValue, StyleProp, ViewStyle } from 'react-native';
8
+ import { CarouselDataError, CarouselDataChange } from '../CarouselData';
9
+ export type Orientation = 'horizontal' | 'vertical';
10
+ /**
11
+ * SelectionStrategy - Specifies how the position of the selected item in the
12
+ * list moves within the carousel's navigable content area in response to DPad
13
+ * key presses.
14
+ *
15
+ * natural - Causes the selected item to float along the carousel's orientation
16
+ * until it reaches either end of the list.
17
+ * anchored - Causes the selected item to stay anchored on the initial item’s
18
+ * position when scrolling in either direction along the orientation.
19
+ * pinned - Enables the selected item to follow natural scrolling behavior at
20
+ * the start and end of the list, while keeping it pinned to a specific position
21
+ * defined by the {@link pinnedSelectedItemOffset} prop during the rest of the scrolling.
22
+ */
23
+ export type SelectionStrategy = 'natural' | 'anchored' | 'pinned';
24
+ /**
25
+ * BorderStrategy - Specifies how the item's border and content are drawn when
26
+ * the item is selected.
27
+ *
28
+ * inset - The border is drawn within the original item's size. The content maintains
29
+ * its original size so the border is drawn over the content, thus cropping some of
30
+ * the content out.
31
+ * outset - The border is drawn outside the original item's size, increasing the
32
+ * item's total size. The content remains the same size.
33
+ */
34
+ export type BorderStrategy = 'inset' | 'outset';
35
+ export type Percentage = `${number}%`;
36
+ /**
37
+ * PinnedPlacement - Specifies where the selected item should be pinned in terms
38
+ * of relative position rather than percentage.
39
+ *
40
+ * start - The start of the carousel's navigable content area, i.e. 0%.
41
+ * center - The center of the carousel's navigable content area, i.e. 50%.
42
+ * end - The end of the carousel's navigable content area, i.e. 100%.
43
+ */
44
+ export type PinnedPlacement = 'start' | 'center' | 'end';
45
+ /**
46
+ * Describes a view and its dimensions for use in a carousel item.
47
+ * @template Prop - The type of props passed to the view component.
48
+ * @property view - A React functional component to be used as a carousel
49
+ * item.
50
+ * @property dimension - The dimensions of the view, including width and height.
51
+ */
52
+ export type ItemInfo<Prop = any> = {
53
+ view: React.FC<Prop>;
54
+ dimension: {
55
+ width: number;
56
+ height: number;
57
+ };
58
+ };
59
+ export type ShiftFactor = {
60
+ width: number;
61
+ height: number;
62
+ };
63
+ /**
64
+ * Contract for an object representing an **inclusive** range of data indexes.
65
+ */
66
+ export type DataIndexRange = {
67
+ /**
68
+ * The first index in the range. Accessing an item at this index should give
69
+ * you the _first_ item.
70
+ */
71
+ start: number;
72
+ /**
73
+ * The last index in the range. Accessing an item at this index should give
74
+ * you the _last_ item.
75
+ */
76
+ end: number;
77
+ };
78
+ /**
79
+ * The current selection state in the list.
80
+ *
81
+ * It has information about the items being rendered at the moment, as well as
82
+ * the current selected one.
83
+ *
84
+ * @see {@link OnSelectionChangedCallback}
85
+ */
86
+ export type CarouselSelectionChangeEvent = {
87
+ /**
88
+ * After the selection is changed, this range represents the indexes of all
89
+ * items being rendered in the carousel.
90
+ */
91
+ renderedRange: DataIndexRange;
92
+ /**
93
+ * This is the index of the item selected after the selection change finished.
94
+ */
95
+ selectedIndex: number;
96
+ };
97
+ export type SelectionBorderProps = {
98
+ /**
99
+ * Specifies how the content and the border are drawn for the selected item.
100
+ *
101
+ * @default 'outset'
102
+ */
103
+ borderStrategy?: BorderStrategy;
104
+ /**
105
+ * Specifies the thickness of the border around the selected item.
106
+ *
107
+ * @default 8
108
+ */
109
+ borderWidth?: number;
110
+ /**
111
+ * Specifies the color of the border around the selected item.
112
+ *
113
+ * @default 'white'
114
+ */
115
+ borderColor?: ColorValue;
116
+ /**
117
+ * Determines the corner radius of the border for rounded edges.
118
+ *
119
+ * @default 8
120
+ */
121
+ borderRadius?: number;
122
+ /**
123
+ * Specifies the thickness of the outline stroke that separates the border
124
+ * from the item's content
125
+ *
126
+ * @default 3
127
+ */
128
+ borderStrokeWidth?: number;
129
+ /**
130
+ * Defines the corner radius for the outline stroke that separates the border
131
+ * from the item's content.
132
+ *
133
+ * @default 4
134
+ */
135
+ borderStrokeRadius?: number;
136
+ /**
137
+ * Specifies the color of the outline stroke for the selection border.
138
+ *
139
+ * @default 'black'
140
+ */
141
+ borderStrokeColor?: ColorValue;
142
+ };
143
+ export type AnimationDurationProps = {
144
+ /**
145
+ * Number of seconds that the animation for pressing on the item takes to complete.
146
+ *
147
+ * @default 0.15 seconds
148
+ */
149
+ itemPressedDuration?: number;
150
+ /**
151
+ * Amount of time, in seconds, used to scroll each item.
152
+ *
153
+ * @default 0.2 seconds
154
+ */
155
+ itemScrollDuration?: number;
156
+ /**
157
+ * Number of seconds that the animation for changing the selected container
158
+ * takes to complete.
159
+ *
160
+ * @default itemScrollDuration
161
+ */
162
+ containerSelectionChangeDuration?: number;
163
+ };
164
+ export type CarouselItemStyleProps = {
165
+ /**
166
+ * The space between the adjacent items along the carousel's orientation, in pixels.
167
+ *
168
+ * @default 20 dp
169
+ */
170
+ itemPadding?: number;
171
+ /**
172
+ * The space between the adjacent items along the carousel's orientation, in pixels
173
+ * when the carousel is selected.
174
+ *
175
+ * @default 20 dp
176
+ */
177
+ itemPaddingOnSelection?: number;
178
+ /**
179
+ * A scale multiplier to be applied to the item when it is pressed by the user.
180
+ *
181
+ * @default 0.8
182
+ */
183
+ pressedItemScaleFactor?: number;
184
+ /**
185
+ * A scale multiplier to be applied to the item when it is selected.
186
+ *
187
+ * When this value is `1.0`, it means there will be no scaling happening to
188
+ * the selected item while the user scrolls through the list.
189
+ *
190
+ * @default 1.0
191
+ */
192
+ selectedItemScaleFactor?: number;
193
+ /**
194
+ * A function to retrieve the offset value to be applied for an item relative
195
+ * to its current position.
196
+ * @param info - The data item and index for which to get the offset.
197
+ * @returns The width and height of the offset
198
+ */
199
+ getSelectedItemOffset?: (info: CarouselRenderInfo) => ShiftFactor | undefined;
200
+ };
201
+ export type CarouselItemDataAdapter<ItemT, KeyT = React.Key> = {
202
+ /**
203
+ * A function that will receive an index, and return an item's data object.
204
+ *
205
+ * The object returned will be used to call other data-access functions to
206
+ * retrieve information about specific items.
207
+ * @param index - The item index
208
+ * @returns the item's data object
209
+ */
210
+ getItem: (index: number) => ItemT | undefined;
211
+ /**
212
+ * A function that will return the item count for the list.
213
+ * @returns The item count
214
+ */
215
+ getItemCount: () => number;
216
+ /**
217
+ * Function to provide a unique key for each item based on the data and index.
218
+ * @param info - The data item and index for which to generate the key.
219
+ * @returns A unique key for the data item
220
+ */
221
+ getItemKey: (info: CarouselRenderInfo) => KeyT | undefined;
222
+ /**
223
+ * This function is called by the carousel when an item cannot be used
224
+ * in the carousel.
225
+ *
226
+ * This happens when either {@link getItem} or {@link renderItem} functions
227
+ * return an `undefined` value.
228
+ * @param error - The information regarding the error
229
+ * @returns Whether or not to retry
230
+ */
231
+ notifyDataError: (error: CarouselDataError) => boolean;
232
+ };
233
+ /**
234
+ * Interface for the properties of the carousel component.
235
+ *
236
+ * @template ItemT - The type of the items in the data array.
237
+ * @template KeyT - The type of the keys for each item. Defaults to `string`.
238
+ */
239
+ export interface CarouselProps<ItemT, KeyT = string> {
240
+ /**
241
+ * The object used to retrieve carousel items and other information about them.
242
+ */
243
+ dataAdapter: CarouselItemDataAdapter<ItemT, KeyT>;
244
+ /**
245
+ * Function to render an individual item.
246
+ * @param info - The information needed to render the item.
247
+ * @returns A React element representing the item, or null.
248
+ */
249
+ renderItem: (info: CarouselRenderInfo) => React.ReactElement | null;
250
+ /**
251
+ * Unique string identifier for e2e testing.
252
+ *
253
+ * @default undefined
254
+ */
255
+ testID?: string;
256
+ /**
257
+ * An arbitrary and unique identifier for this list that will be used
258
+ * to determine when to recycle the list and its items.
259
+ *
260
+ * Commonly used by horizontal carousels within a vertical carousel
261
+ * (i.e. nested carousels).
262
+ *
263
+ * @default undefined
264
+ */
265
+ uniqueId?: string;
266
+ /**
267
+ * Specifies the direction and layout for rendering items in a carousel.
268
+ *
269
+ * @default horizontal
270
+ */
271
+ orientation?: Orientation;
272
+ /**
273
+ * The number of items to render at a given time when recycling through the
274
+ * carousel for performance optimization.
275
+ *
276
+ * @default 8
277
+ */
278
+ renderedItemsCount?: number;
279
+ /**
280
+ * Number of items to keep to the top/start of the carousel before recycling
281
+ * the item component to the end.
282
+ *
283
+ * @default 2
284
+ */
285
+ numOffsetItems?: number;
286
+ /**
287
+ * The margin space (in density-independent pixels) on either side of the carousel's navigable
288
+ * content area in the direction of the carousel's orientation (i.e. left and right for
289
+ * horizontal carousels, top and bottom for vertical carousels).
290
+ *
291
+ * @default 0
292
+ */
293
+ navigableScrollAreaMargin?: number;
294
+ /**
295
+ * Determines whether this component should automatically receive focus when rendered.
296
+ * When true, the component will attempt to gain focus during the initial mount or when
297
+ * the prop value changes.
298
+ *
299
+ * @default false
300
+ */
301
+ hasPreferredFocus?: boolean;
302
+ /**
303
+ * Indicates the first item index in the carousel to be selected.
304
+ *
305
+ * @default 0
306
+ */
307
+ initialStartIndex?: number;
308
+ /**
309
+ * Determines whether items before the selected one should be hidden.
310
+ *
311
+ * @default false
312
+ */
313
+ hideItemsBeforeSelection?: boolean;
314
+ /**
315
+ * This flag will prevent selection from progressing to the nearest component outside the
316
+ * carousel alongside its orientation. If the carousel is horizontal and the user is
317
+ * at the start item and presses to move backward, or at the end item and presses to
318
+ * move forward, this flag will prevent selection from escaping the carousel.
319
+ *
320
+ * @default false
321
+ */
322
+ trapSelectionOnOrientation?: boolean;
323
+ /**
324
+ * Style applied to the carousel container.
325
+ *
326
+ * @default undefined
327
+ */
328
+ containerStyle?: StyleProp<ViewStyle>;
329
+ /**
330
+ * Style applied to the carousel items.
331
+ */
332
+ itemStyle?: CarouselItemStyleProps;
333
+ /**
334
+ * The durations of various animations related to the carousel and its items
335
+ */
336
+ animationDuration?: AnimationDurationProps;
337
+ /**
338
+ * Specifies how the selected item moves in the carousel in response to
339
+ * the DPad key presses.
340
+ *
341
+ * @default anchored
342
+ */
343
+ selectionStrategy?: SelectionStrategy;
344
+ /**
345
+ * The value determines the relative position from the leading edge of the
346
+ * carousel where the selected item is pinned.
347
+ *
348
+ * This value must be of type {@link Percentage} or of type {@link PinnedPlacement},
349
+ * both of which will be converted to a numerical value between 0 and 1.
350
+ *
351
+ * @default '0%'
352
+ */
353
+ pinnedSelectedItemOffset?: Percentage | PinnedPlacement;
354
+ /**
355
+ * Function called whenever the current selected item on the list changes
356
+ * (it's not called when the list is selected or unselected).
357
+ * @param event - the current selection state of the list
358
+ */
359
+ onSelectionChanged?: (event: CarouselSelectionChangeEvent) => void;
360
+ /**
361
+ * When border style is specified, the selected item will
362
+ * have a style-able border enveloping the selected item.
363
+ *
364
+ * All the style related props in selectionBorder property defines the
365
+ * look-and-feel of the border surrounding the selected item when it is
366
+ * enabled.
367
+ *
368
+ * @default - No border will be shown
369
+ */
370
+ selectionBorder?: SelectionBorderProps;
371
+ }
372
+ /**
373
+ * Interface definition for renderItem function
374
+ */
375
+ export interface CarouselRenderInfo<ItemT = any> {
376
+ /**
377
+ * The data to be used to render the current item.
378
+ * This will be an element in the {@link CarouselProps.data `data`} array
379
+ * passed into the carousel.
380
+ */
381
+ item: ItemT;
382
+ /**
383
+ * The zero based index of the current item being rendered by the
384
+ * {@link Carousel.renderItem `renderItem`} function.
385
+ */
386
+ index: number;
387
+ }
388
+ export interface CarouselRef<KeyT> {
389
+ /**
390
+ * Scrolls to the item at the specified index
391
+ */
392
+ scrollTo(index: number, animated: boolean): void;
393
+ /**
394
+ * To support DPAD HW key events on the carousel.
395
+ */
396
+ enableDpad(enable: boolean): void;
397
+ /**
398
+ * Scrolls to the item belonging to a unique key.
399
+ */
400
+ scrollToKey(key: KeyT, animated: boolean): void;
401
+ /**
402
+ * Notifies the carousel of data changes for efficient updates.
403
+ */
404
+ notifyDataChange(changes: Array<CarouselDataChange>, animated?: boolean): void;
405
+ }
406
+ export type LayoutIdType = React.FC<any>;
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });