Skip to content

Commit cc82db0

Browse files
igorbejigorbej
committed
wip: bring back duplicate types to fix codegen issues
1 parent b7f3304 commit cc82db0

File tree

3 files changed

+148
-39
lines changed

3 files changed

+148
-39
lines changed

‎src/LEGACY_PagerViewNativeComponent.ts

Lines changed: 65 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,72 @@
11
/*
2-
TODO: A comment describing the purpose of this file
2+
TODO: A comment describing the purpose of this file **and why the types are duplicated between here and `PagerViewNativeComponent.tsx`**
33
*/
4-
import type { HostComponent } from 'react-native';
4+
import type * as React from 'react';
5+
import type { HostComponent, ViewProps } from 'react-native';
56
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
67
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
7-
import type { NativeCommands, NativeProps } from './types';
8-
9-
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
10-
supportedCommands: [
11-
'setPage',
12-
'setPageWithoutAnimation',
13-
'setScrollEnabledImperatively',
14-
],
15-
});
8+
9+
import type {
10+
DirectEventHandler,
11+
Double,
12+
Int32,
13+
WithDefault,
14+
} from 'react-native/Libraries/Types/CodegenTypes';
15+
16+
type OnPageScrollEventData = Readonly<{
17+
position: Double;
18+
offset: Double;
19+
}>;
20+
21+
type OnPageSelectedEventData = Readonly<{
22+
position: Double;
23+
}>;
24+
25+
type OnPageScrollStateChangedEventData = Readonly<{
26+
pageScrollState: 'idle' | 'dragging' | 'settling';
27+
}>;
28+
29+
interface NativeProps extends ViewProps {
30+
scrollEnabled?: WithDefault<boolean, true>;
31+
layoutDirection?: WithDefault<'ltr' | 'rtl', 'ltr'>;
32+
initialPage?: Int32;
33+
orientation?: WithDefault<'horizontal' | 'vertical', 'horizontal'>;
34+
offscreenPageLimit?: Int32;
35+
pageMargin?: Int32;
36+
overScrollMode?: WithDefault<'auto' | 'always' | 'never', 'auto'>;
37+
overdrag?: WithDefault<boolean, false>;
38+
keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>;
39+
onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
40+
onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
41+
onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
42+
useLegacy?: WithDefault<boolean, false>;
43+
}
44+
45+
type PagerViewViewType = HostComponent<NativeProps>;
46+
47+
interface NativeCommands {
48+
setPage: (
49+
viewRef: React.ElementRef<PagerViewViewType>,
50+
selectedPage: Int32
51+
) => void;
52+
setPageWithoutAnimation: (
53+
viewRef: React.ElementRef<PagerViewViewType>,
54+
selectedPage: Int32
55+
) => void;
56+
setScrollEnabledImperatively: (
57+
viewRef: React.ElementRef<PagerViewViewType>,
58+
scrollEnabled: boolean
59+
) => void;
60+
}
61+
62+
export const LEGACY_PagerViewNativeCommands: NativeCommands =
63+
codegenNativeCommands<NativeCommands>({
64+
supportedCommands: [
65+
'setPage',
66+
'setPageWithoutAnimation',
67+
'setScrollEnabledImperatively',
68+
],
69+
});
1670

1771
export default codegenNativeComponent<NativeProps>(
1872
'LEGACY_RNCViewPager'

‎src/PagerView.tsx

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,18 @@ import { Platform, Keyboard } from 'react-native';
33
import { I18nManager } from 'react-native';
44
import type * as ReactNative from 'react-native';
55

6-
import type {
7-
NativeProps as PagerViewProps,
6+
import { childrenWithOverriddenStyle } from './utils';
7+
8+
import PagerViewNativeComponent, {
9+
PagerViewNativeCommands,
810
OnPageScrollEventData,
911
OnPageScrollStateChangedEventData,
1012
OnPageSelectedEventData,
11-
} from './types';
12-
import { childrenWithOverriddenStyle } from './utils';
13-
14-
import PagerViewComponent, {
15-
Commands as PagerViewCommands,
13+
NativeProps as PagerViewProps,
1614
} from './PagerViewNativeComponent';
1715

18-
import LEGACY_PagerViewComponent, {
19-
Commands as LEGACY_PagerViewCommands,
16+
import LEGACY_PagerViewNativeComponent, {
17+
LEGACY_PagerViewNativeCommands,
2018
} from './LEGACY_PagerViewNativeComponent';
2119

2220
/**
@@ -63,7 +61,7 @@ import LEGACY_PagerViewComponent, {
6361

6462
export class PagerView extends React.Component<PagerViewProps> {
6563
private isScrolling = false;
66-
pagerView: React.ElementRef<typeof PagerViewComponent> | null = null;
64+
pagerView: React.ElementRef<typeof PagerViewNativeComponent> | null = null;
6765

6866
private _onPageScroll = (
6967
e: ReactNative.NativeSyntheticEvent<OnPageScrollEventData>
@@ -104,9 +102,9 @@ export class PagerView extends React.Component<PagerViewProps> {
104102
public setPage = (selectedPage: number) => {
105103
if (this.pagerView) {
106104
if (this.props.useLegacy) {
107-
LEGACY_PagerViewCommands.setPage(this.pagerView, selectedPage);
105+
LEGACY_PagerViewNativeCommands.setPage(this.pagerView, selectedPage);
108106
} else {
109-
PagerViewCommands.setPage(this.pagerView, selectedPage);
107+
PagerViewNativeCommands.setPage(this.pagerView, selectedPage);
110108
}
111109
}
112110
};
@@ -118,12 +116,15 @@ export class PagerView extends React.Component<PagerViewProps> {
118116
public setPageWithoutAnimation = (selectedPage: number) => {
119117
if (this.pagerView) {
120118
if (this.props.useLegacy) {
121-
LEGACY_PagerViewCommands.setPageWithoutAnimation(
119+
LEGACY_PagerViewNativeCommands.setPageWithoutAnimation(
122120
this.pagerView,
123121
selectedPage
124122
);
125123
} else {
126-
PagerViewCommands.setPageWithoutAnimation(this.pagerView, selectedPage);
124+
PagerViewNativeCommands.setPageWithoutAnimation(
125+
this.pagerView,
126+
selectedPage
127+
);
127128
}
128129
}
129130
};
@@ -136,12 +137,12 @@ export class PagerView extends React.Component<PagerViewProps> {
136137
public setScrollEnabled = (scrollEnabled: boolean) => {
137138
if (this.pagerView) {
138139
if (this.props.useLegacy) {
139-
LEGACY_PagerViewCommands.setScrollEnabledImperatively(
140+
LEGACY_PagerViewNativeCommands.setScrollEnabledImperatively(
140141
this.pagerView,
141142
scrollEnabled
142143
);
143144
} else {
144-
PagerViewCommands.setScrollEnabledImperatively(
145+
PagerViewNativeCommands.setScrollEnabledImperatively(
145146
this.pagerView,
146147
scrollEnabled
147148
);
@@ -167,7 +168,7 @@ export class PagerView extends React.Component<PagerViewProps> {
167168

168169
render() {
169170
return this.props.useLegacy ? (
170-
<LEGACY_PagerViewComponent
171+
<LEGACY_PagerViewNativeComponent
171172
{...this.props}
172173
ref={(ref) => {
173174
this.pagerView = ref;
@@ -181,7 +182,7 @@ export class PagerView extends React.Component<PagerViewProps> {
181182
children={childrenWithOverriddenStyle(this.props.children)}
182183
/>
183184
) : (
184-
<PagerViewComponent
185+
<PagerViewNativeComponent
185186
{...this.props}
186187
ref={(ref) => {
187188
this.pagerView = ref;

‎src/PagerViewNativeComponent.ts

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,69 @@
1-
import type { HostComponent } from 'react-native';
1+
import type * as React from 'react';
2+
import type { HostComponent, ViewProps } from 'react-native';
23
import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
34
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
4-
import type { NativeCommands, NativeProps } from './types';
5-
6-
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
7-
supportedCommands: [
8-
'setPage',
9-
'setPageWithoutAnimation',
10-
'setScrollEnabledImperatively',
11-
],
12-
});
5+
6+
import type {
7+
DirectEventHandler,
8+
Double,
9+
Int32,
10+
WithDefault,
11+
} from 'react-native/Libraries/Types/CodegenTypes';
12+
13+
export type OnPageScrollEventData = Readonly<{
14+
position: Double;
15+
offset: Double;
16+
}>;
17+
18+
export type OnPageSelectedEventData = Readonly<{
19+
position: Double;
20+
}>;
21+
22+
export type OnPageScrollStateChangedEventData = Readonly<{
23+
pageScrollState: 'idle' | 'dragging' | 'settling';
24+
}>;
25+
26+
export interface NativeProps extends ViewProps {
27+
scrollEnabled?: WithDefault<boolean, true>;
28+
layoutDirection?: WithDefault<'ltr' | 'rtl', 'ltr'>;
29+
initialPage?: Int32;
30+
orientation?: WithDefault<'horizontal' | 'vertical', 'horizontal'>;
31+
offscreenPageLimit?: Int32;
32+
pageMargin?: Int32;
33+
overScrollMode?: WithDefault<'auto' | 'always' | 'never', 'auto'>;
34+
overdrag?: WithDefault<boolean, false>;
35+
keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>;
36+
onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
37+
onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
38+
onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
39+
useLegacy?: WithDefault<boolean, false>;
40+
}
41+
42+
type PagerViewViewType = HostComponent<NativeProps>;
43+
44+
export interface NativeCommands {
45+
setPage: (
46+
viewRef: React.ElementRef<PagerViewViewType>,
47+
selectedPage: Int32
48+
) => void;
49+
setPageWithoutAnimation: (
50+
viewRef: React.ElementRef<PagerViewViewType>,
51+
selectedPage: Int32
52+
) => void;
53+
setScrollEnabledImperatively: (
54+
viewRef: React.ElementRef<PagerViewViewType>,
55+
scrollEnabled: boolean
56+
) => void;
57+
}
58+
59+
export const PagerViewNativeCommands: NativeCommands =
60+
codegenNativeCommands<NativeCommands>({
61+
supportedCommands: [
62+
'setPage',
63+
'setPageWithoutAnimation',
64+
'setScrollEnabledImperatively',
65+
],
66+
});
1367

1468
export default codegenNativeComponent<NativeProps>(
1569
'RNCViewPager'

0 commit comments

Comments
 (0)