kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-30 05:15:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace XComponent props in favor of render callbacks

Browse Source 
Making these props components makes it impossible pass additional props to them from the parent component. Render callbacks are more dynamic and flexible for this case
This commit is contained in:
satyajit.happy
2019-11-02 08:10:45 +01:00
committed by Satyajit Sahoo
parent 3a4c38bb72
commit 57b411cea8
9 changed files with 113 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/material-top-tabs/src/types.tsx
View File

@@ -119,7 +119,7 @@ export type MaterialTopTabNavigationConfig = Partial<
>
> & {
/**
* Component to render for routes that haven't been rendered yet.
* Function that returns a React element to render for routes that haven't been rendered yet.
* Receives an object containing the route as the prop.
* The lazy prop also needs to be enabled.
*
@@ -127,11 +127,11 @@ export type MaterialTopTabNavigationConfig = Partial<
*
* By default, this renders null.
*/
lazyPlaceholderComponent?: React.ComponentType<{ route: Route<string> }>;
lazyPlaceholder?: (props: { route: Route<string> }) => React.ReactNode;
/**
* Custom tab bar component.
* Function that returns a React element to display as the tab bar.
*/
tabBarComponent?: React.ComponentType<MaterialTopTabBarProps>;
tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;
/**
* Options for the tab bar which will be passed as props to the tab bar component.
*/

45
packages/material-top-tabs/src/views/MaterialTopTabView.tsx
View File

@@ -8,6 +8,7 @@ import {
MaterialTopTabDescriptorMap,
MaterialTopTabNavigationConfig,
MaterialTopTabNavigationHelpers,
MaterialTopTabBarProps,
} from '../types';
type Props = MaterialTopTabNavigationConfig & {
@@ -23,10 +24,10 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
};
private renderLazyPlaceholder = (props: { route: Route<string> }) => {
const { lazyPlaceholderComponent: LazyPlaceholder } = this.props;
const { lazyPlaceholder } = this.props;
if (LazyPlaceholder != null) {
return <LazyPlaceholder {...props} />;
if (lazyPlaceholder != null) {
return lazyPlaceholder(props);
}
return null;
@@ -99,30 +100,30 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
const {
navigation,
tabBarComponent: TabBarComponent = MaterialTopTabBar,
tabBar = (props: MaterialTopTabBarProps) => (
<MaterialTopTabBar {...props} />
),
tabBarPosition,
tabBarOptions,
} = this.props;
if (TabBarComponent === null || !tabBarVisible) {
if (tabBarVisible === false) {
return null;
}
return (
<TabBarComponent
{...tabBarOptions}
{...props}
tabBarPosition={tabBarPosition}
state={state}
navigation={navigation}
descriptors={descriptors}
getAccessibilityLabel={this.getAccessibilityLabel}
getLabelText={this.getLabelText}
getTestID={this.getTestID}
onTabPress={this.handleTabPress}
onTabLongPress={this.handleTabLongPress}
/>
);
return tabBar({
...tabBarOptions,
...props,
tabBarPosition: tabBarPosition,
state: state,
navigation: navigation,
descriptors: descriptors,
getAccessibilityLabel: this.getAccessibilityLabel,
getLabelText: this.getLabelText,
getTestID: this.getTestID,
onTabPress: this.handleTabPress,
onTabLongPress: this.handleTabLongPress,
});
};
private handleSwipeStart = () =>
@@ -138,8 +139,8 @@ export default class MaterialTopTabView extends React.PureComponent<Props> {
render() {
const {
/* eslint-disable @typescript-eslint/no-unused-vars */
lazyPlaceholderComponent,
tabBarComponent,
lazyPlaceholder,
tabBar,
tabBarOptions,
/* eslint-enable @typescript-eslint/no-unused-vars */
state,