Files
react-native/packages/rn-tester/js/utils/RNTesterNavigationReducer.js
Shawn Dempsey 256adcab7b Add a new playground component to rntester (#46632)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46632

Changelog: [General][Added] Add Playground to RNTester for testing out features & submitting reproducers.

**Context**

- Adding the Playground from Catalyst to RNTester
- This should help folks test React Native features for a particular version

**Change**

- Add a new playground component to RNTester
- Add a new reducer action for opening an example from navbar press
- Fixed typing issues
- Add icon from this fb asset pack: https://www.internalfb.com/assets/set/facebook_icons/nucleus-beaker/variant_outline-size_24?q=beaker
- Matched background color using this imagemagick script

**dark**
```
convert input.png -fill 'rgb(178,180,186)' -colorize 100% output.png
```
**light**
```
convert input.png -fill 'rgb(81,82,84)' -colorize 100% output.png
```

Reviewed By: NickGerleman

Differential Revision: D61972594

fbshipit-source-id: 4a5523a84a6ef09d3266d5f56825907bd3fbe4b5
2024-09-25 23:29:11 -07:00

143 lines
3.7 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,
RNTesterNavigationState,
} from '../types/RNTesterTypes';
export const RNTesterNavigationActionsType = {
NAVBAR_PRESS: 'NAVBAR_PRESS',
BACK_BUTTON_PRESS: 'BACK_BUTTON_PRESS',
MODULE_CARD_PRESS: 'MODULE_CARD_PRESS',
EXAMPLE_CARD_PRESS: 'EXAMPLE_CARD_PRESS',
EXAMPLE_OPEN_URL_REQUEST: 'EXAMPLE_OPEN_URL_REQUEST',
NAVBAR_OPEN_MODULE_PRESS: 'NAVBAR_OPEN_MODULE_PRESS',
};
const getUpdatedRecentlyUsed = ({
exampleType,
key,
recentlyUsed,
}: {
exampleType: 'apis' | 'components' | null,
key: string | null,
recentlyUsed: ComponentList,
}) => {
const updatedRecentlyUsed = recentlyUsed
? {...recentlyUsed}
: // $FlowFixMe[missing-empty-array-annot]
{components: [], apis: []};
if (!exampleType || !key) {
return updatedRecentlyUsed;
}
let existingKeys = updatedRecentlyUsed[exampleType];
if (existingKeys.includes(key)) {
existingKeys = existingKeys.filter(k => k !== key);
}
// $FlowFixMe[incompatible-call]
existingKeys.unshift(key);
updatedRecentlyUsed[exampleType] = existingKeys.slice(0, 5);
return updatedRecentlyUsed;
};
export const RNTesterNavigationReducer = (
state: RNTesterNavigationState,
action: {type: $Keys<typeof RNTesterNavigationActionsType>, data?: any},
): RNTesterNavigationState => {
const {
data: {
key = null,
title = null,
exampleKey = null,
exampleType = null,
screen = null,
} = {},
} = action;
switch (action.type) {
case RNTesterNavigationActionsType.NAVBAR_PRESS:
return {
...state,
activeModuleKey: null,
activeModuleTitle: null,
activeModuleExampleKey: null,
screen,
hadDeepLink: false,
};
case RNTesterNavigationActionsType.NAVBAR_OPEN_MODULE_PRESS:
return {
...state,
activeModuleKey: key,
activeModuleTitle: title,
activeModuleExampleKey: null,
screen,
hadDeepLink: true,
};
case RNTesterNavigationActionsType.MODULE_CARD_PRESS:
return {
...state,
activeModuleKey: key,
activeModuleTitle: title,
activeModuleExampleKey: null,
// $FlowFixMe[incompatible-return]
recentlyUsed: getUpdatedRecentlyUsed({
exampleType: exampleType,
key: key,
recentlyUsed: state.recentlyUsed,
}),
};
case RNTesterNavigationActionsType.EXAMPLE_CARD_PRESS:
return {
...state,
activeModuleExampleKey: key,
};
case RNTesterNavigationActionsType.BACK_BUTTON_PRESS:
// Go back to module or list.
return {
...state,
activeModuleExampleKey: null,
activeModuleKey:
!state.hadDeepLink && state.activeModuleExampleKey != null
? state.activeModuleKey
: null,
activeModuleTitle:
!state.hadDeepLink && state.activeModuleExampleKey != null
? state.activeModuleTitle
: null,
hadDeepLink: false,
// If there was a deeplink navigation, pressing Back should bring us back to the root.
screen: state.hadDeepLink ? 'components' : state.screen,
};
case RNTesterNavigationActionsType.EXAMPLE_OPEN_URL_REQUEST:
return {
...state,
activeModuleKey: key,
activeModuleTitle: title,
activeModuleExampleKey: exampleKey,
hadDeepLink: true,
screen: 'components',
};
default:
throw new Error(`Invalid action type ${action.type}`);
}
};