Files
react-native/packages/rn-tester/js/utils/testerStateUtils.js
T
Kevin Gozali a47d7c54e8 Improved RNTester deeplink support to go straight to a specific example (#41981)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41981

Improved RNTester URL deeplink support to cover:
*  `rntester://example/<moduleKey>`
*  `rntester://example/<moduleKey>/<exampleKey>`

Extra details:
* For example modules that do not specify `showIndividualExamples: true`, allow deeplink URL with the specific exampleKey to only render the specific example, instead of all of them.
* Added flexibility for moduleKey: search for optional suffixes ("Index", "Example").
* Adjusted Back button action to properly go back to the root after a deeplink.
* Added `example-container` generic testID on the example wrapper component.

Changelog: [Internal]

Reviewed By: yungsters, NickGerleman

Differential Revision: D52227013

fbshipit-source-id: 4ba050592f39d6895f5124fa25c77f2d0199aa3f
2023-12-20 18:33:13 -08:00

120 lines
2.8 KiB
JavaScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
import type {
ComponentList,
ExamplesList,
RNTesterModuleInfo,
RNTesterNavigationState,
SectionData,
} from '../types/RNTesterTypes';
import RNTesterList from './RNTesterList';
export const Screens = {
COMPONENTS: 'components',
APIS: 'apis',
};
export const initialNavigationState: RNTesterNavigationState = {
activeModuleKey: null,
activeModuleTitle: null,
activeModuleExampleKey: null,
screen: Screens.COMPONENTS,
recentlyUsed: {components: [], apis: []},
hadDeepLink: false,
};
const filterEmptySections = (examplesList: ExamplesList): any => {
const filteredSections: {
['apis' | 'components']: Array<SectionData<RNTesterModuleInfo>>,
} = {};
const sectionKeys = Object.keys(examplesList);
sectionKeys.forEach(key => {
filteredSections[key] = examplesList[key].filter(
section => section.data.length > 0,
);
});
return filteredSections;
};
export const getExamplesListWithRecentlyUsed = ({
recentlyUsed,
testList,
}: {
recentlyUsed: ComponentList,
testList?: {
components?: Array<RNTesterModuleInfo>,
apis?: Array<RNTesterModuleInfo>,
},
}): ExamplesList | null => {
// Return early if state has not been initialized from storage
if (!recentlyUsed) {
return null;
}
const componentList = testList?.components ?? RNTesterList.Components;
const components = componentList.map(
(componentExample): RNTesterModuleInfo => ({
...componentExample,
exampleType: Screens.COMPONENTS,
}),
);
const recentlyUsedComponents = recentlyUsed.components
.map(recentComponentKey =>
components.find(component => component.key === recentComponentKey),
)
.filter(Boolean);
const apisList = testList?.apis ?? RNTesterList.APIs;
const apis = apisList.map((apiExample): RNTesterModuleInfo => ({
...apiExample,
exampleType: Screens.APIS,
}));
const recentlyUsedAPIs = recentlyUsed.apis
.map(recentAPIKey =>
apis.find(apiExample => apiExample.key === recentAPIKey),
)
.filter(Boolean);
const examplesList: ExamplesList = {
[Screens.COMPONENTS]: [
{
key: 'RECENT_COMPONENTS',
data: recentlyUsedComponents,
title: 'Recently Viewed',
},
{
key: 'COMPONENTS',
data: components,
title: 'Components',
},
],
[Screens.APIS]: [
{
key: 'RECENT_APIS',
data: recentlyUsedAPIs,
title: 'Recently viewed',
},
{
key: 'APIS',
data: apis,
title: 'APIs',
},
],
};
return filterEmptySections(examplesList);
};