Skip to content

Commit

Permalink
fix: Update incorrect SwitchChangeEvent type (#34931)
Browse files Browse the repository at this point in the history
Summary:
I noticed that typescript type for `onChange`  event of `<Switch/>` was incorrect

```tsx
<Switch
  onChange={(event) => {
    // TS
    event.value; // boolean
    event.nativeEvent.value; //TS2339: Property 'value' does not exist on type 'Event'.
    // JS
    console.log(event.nativeEvent); // {value:false,target:87}
    console.log(event.value); // undefined
  }}
/>
```

## Changelog

[General] [Changed] - Typescript: update incorrect `SwitchChangeEvent` type

Pull Request resolved: #34931

Test Plan: ...

Reviewed By: lunaleaps

Differential Revision: D40240552

Pulled By: skinsshark

fbshipit-source-id: 4d39d547778de4ac4dc6c94471f05bfbe157d0e5
  • Loading branch information
retyui authored and facebook-github-bot committed Oct 12, 2022
1 parent 0c5ef57 commit 5dd2f2e
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 4 deletions.
7 changes: 6 additions & 1 deletion Libraries/Components/Switch/AndroidSwitchNativeComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@

import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
import type {ColorValue} from '../../StyleSheet/StyleSheet';
import type {BubblingEventHandler, WithDefault} from '../../Types/CodegenTypes';
import type {
BubblingEventHandler,
Int32,
WithDefault,
} from '../../Types/CodegenTypes';
import type {ViewProps} from '../View/ViewPropTypes';

import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
Expand All @@ -19,6 +23,7 @@ import * as React from 'react';

type SwitchChangeEvent = $ReadOnly<{|
value: boolean,
target: Int32,
|}>;

type NativeProps = $ReadOnly<{|
Expand Down
6 changes: 5 additions & 1 deletion Libraries/Components/Switch/Switch.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {NativeMethods} from '../../Renderer/shims/ReactNativeTypes';
import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
import {ViewProps} from '../View/ViewPropTypes';
import {NativeSyntheticEvent, TargetedEvent} from '../../Types/CoreEventTypes';

export interface SwitchPropsIOS extends ViewProps {
/**
Expand All @@ -37,10 +38,13 @@ export interface SwitchPropsIOS extends ViewProps {
tintColor?: ColorValue | undefined;
}

export interface SwitchChangeEvent extends React.SyntheticEvent {
export interface SwitchChangeEventData extends TargetedEvent {
value: boolean;
}

export interface SwitchChangeEvent
extends NativeSyntheticEvent<SwitchChangeEventData> {}

export interface SwitchProps extends SwitchPropsIOS {
/**
* Color of the foreground switch grip.
Expand Down
1 change: 1 addition & 0 deletions Libraries/Components/Switch/Switch.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import * as React from 'react';
type SwitchChangeEvent = SyntheticEvent<
$ReadOnly<{|
value: boolean,
target: number,
|}>,
>;

Expand Down
7 changes: 6 additions & 1 deletion Libraries/Components/Switch/SwitchNativeComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@

import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
import type {ColorValue} from '../../StyleSheet/StyleSheet';
import type {BubblingEventHandler, WithDefault} from '../../Types/CodegenTypes';
import type {
BubblingEventHandler,
Int32,
WithDefault,
} from '../../Types/CodegenTypes';
import type {ViewProps} from '../View/ViewPropTypes';

import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
Expand All @@ -19,6 +23,7 @@ import * as React from 'react';

type SwitchChangeEvent = $ReadOnly<{|
value: boolean,
target: Int32,
|}>;

type NativeProps = $ReadOnly<{|
Expand Down
2 changes: 1 addition & 1 deletion types/__typetests__/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1429,7 +1429,7 @@ const SwitchOnChangePromiseTest = () => (
<Switch
onChange={event => {
const e: SwitchChangeEvent = event;
return new Promise(() => e.value);
return new Promise(() => e.nativeEvent.value);
}}
/>
);
Expand Down

0 comments on commit 5dd2f2e

Please sign in to comment.