@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.
- package/LICENSE +7 -0
- package/README.md +0 -0
- package/dist/Carousel/Carousel.d.ts +16 -0
- package/dist/Carousel/Carousel.js +102 -0
- package/dist/Carousel/Utils.d.ts +4 -0
- package/dist/Carousel/Utils.js +35 -0
- package/dist/Carousel/index.d.ts +7 -0
- package/dist/Carousel/index.js +23 -0
- package/dist/Carousel/types.d.ts +406 -0
- package/dist/Carousel/types.js +2 -0
- package/dist/CarouselData/CarouselDataAdapter.d.ts +141 -0
- package/dist/CarouselData/CarouselDataAdapter.js +67 -0
- package/dist/CarouselData/CarouselDataResolver.d.ts +100 -0
- package/dist/CarouselData/CarouselDataResolver.js +224 -0
- package/dist/CarouselData/CarouselDataTypes.d.ts +280 -0
- package/dist/CarouselData/CarouselDataTypes.js +84 -0
- package/dist/CarouselData/index.d.ts +3 -0
- package/dist/CarouselData/index.js +24 -0
- package/dist/CarouselScrollable/CarouselScrollable.d.ts +67 -0
- package/dist/CarouselScrollable/CarouselScrollable.js +77 -0
- package/dist/CarouselScrollable/CarouselScrollableProps.d.ts +499 -0
- package/dist/CarouselScrollable/CarouselScrollableProps.js +211 -0
- package/dist/CarouselScrollable/CarouselScrollableRef.d.ts +80 -0
- package/dist/CarouselScrollable/CarouselScrollableRef.js +7 -0
- package/dist/CarouselScrollable/CarouselScrollableTypes.d.ts +224 -0
- package/dist/CarouselScrollable/CarouselScrollableTypes.js +116 -0
- package/dist/CarouselScrollable/CarouselSimple.d.ts +71 -0
- package/dist/CarouselScrollable/CarouselSimple.js +111 -0
- package/dist/CarouselScrollable/CarouselSimpleProps.d.ts +29 -0
- package/dist/CarouselScrollable/CarouselSimpleProps.js +7 -0
- package/dist/CarouselScrollable/index.d.ts +6 -0
- package/dist/CarouselScrollable/index.js +27 -0
- package/dist/CarouselScrollable/native/CarouselNativeHostComponent.d.ts +109 -0
- package/dist/CarouselScrollable/native/CarouselNativeHostComponent.js +82 -0
- package/dist/CarouselScrollable/native/CarouselNativeItemHostComponent.d.ts +94 -0
- package/dist/CarouselScrollable/native/CarouselNativeItemHostComponent.js +42 -0
- package/dist/CarouselScrollable/native/CarouselNativeItemWrapper.d.ts +255 -0
- package/dist/CarouselScrollable/native/CarouselNativeItemWrapper.js +276 -0
- package/dist/CarouselScrollable/native/CarouselNativeLogic.d.ts +209 -0
- package/dist/CarouselScrollable/native/CarouselNativeLogic.js +349 -0
- package/dist/CarouselScrollable/native/CarouselNativeWrapper.d.ts +68 -0
- package/dist/CarouselScrollable/native/CarouselNativeWrapper.js +164 -0
- package/dist/CarouselScrollable/native/index.d.ts +5 -0
- package/dist/CarouselScrollable/native/index.js +26 -0
- package/dist/CarouselScrollable/recyclerview/JSRecyclerViewList.d.ts +25 -0
- package/dist/CarouselScrollable/recyclerview/JSRecyclerViewList.js +150 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +24 -0
- package/dist/kepler/aarch64-debug/lib/com.amazon.keplerscript.carousel.so +0 -0
- package/dist/kepler/aarch64-debug/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
- package/dist/kepler/aarch64-release/lib/com.amazon.keplerscript.carousel.so +0 -0
- package/dist/kepler/aarch64-release/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
- package/dist/kepler/armv7-debug/lib/com.amazon.keplerscript.carousel.so +0 -0
- package/dist/kepler/armv7-debug/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
- package/dist/kepler/armv7-release/lib/com.amazon.keplerscript.carousel.so +0 -0
- package/dist/kepler/armv7-release/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
- package/dist/kepler/tm-manifest.json +1 -0
- package/dist/kepler/x86_64-debug/lib/com.amazon.keplerscript.carousel.so +0 -0
- package/dist/kepler/x86_64-debug/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
- package/dist/kepler/x86_64-release/lib/com.amazon.keplerscript.carousel.so +0 -0
- package/dist/kepler/x86_64-release/lib/com.amazon.keplerscript.carousel.so.debug +0 -0
- package/dist/utils/CarouselLogger.d.ts +295 -0
- package/dist/utils/CarouselLogger.js +370 -0
- package/dist/utils/CarouselReactNativeUtilities.d.ts +108 -0
- package/dist/utils/CarouselReactNativeUtilities.js +150 -0
- package/dist/utils/HelperTypes.d.ts +5 -0
- package/dist/utils/HelperTypes.js +7 -0
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/index.js +24 -0
- package/package.json +1 -0
- 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,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>;
|