Skip to content

Commit 89b3eb8

Browse files
committed
feat: add typescript typings
1 parent 34a7824 commit 89b3eb8

File tree

3 files changed

+106
-2
lines changed

3 files changed

+106
-2
lines changed

index.d.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// These types are derived from @types/react-native.
2+
// All credit goes to amazing people who made the react-native typings.
3+
4+
import * as React from 'react';
5+
import {
6+
ViewProps,
7+
NativeSyntheticEvent,
8+
NativeSegmentedControlIOSChangeEvent,
9+
NativeMethodsMixin,
10+
Constructor
11+
} from 'react-native'
12+
13+
export interface SegmentedControlIOSProps extends ViewProps {
14+
/**
15+
* If false the user won't be able to interact with the control. Default value is true.
16+
*/
17+
enabled?: boolean;
18+
19+
/**
20+
* If true, then selecting a segment won't persist visually.
21+
* The onValueChange callback will still work as expected.
22+
*/
23+
momentary?: boolean;
24+
25+
/**
26+
* Callback that is called when the user taps a segment;
27+
* passes the event as an argument
28+
*/
29+
onChange?: (event: NativeSyntheticEvent<NativeSegmentedControlIOSChangeEvent>) => void;
30+
31+
/**
32+
* Callback that is called when the user taps a segment; passes the segment's value as an argument
33+
*/
34+
onValueChange?: (value: string) => void;
35+
36+
/**
37+
* The index in props.values of the segment to be (pre)selected.
38+
*/
39+
selectedIndex?: number;
40+
41+
/**
42+
* Accent color of the control.
43+
*/
44+
tintColor?: string;
45+
46+
/**
47+
* The labels for the control's segment buttons, in order.
48+
*/
49+
values?: string[];
50+
}
51+
52+
/**
53+
* Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
54+
*
55+
* #### Programmatically changing selected index
56+
*
57+
* The selected index can be changed on the fly by assigning the
58+
* selectIndex prop to a state variable, then changing that variable.
59+
* Note that the state variable would need to be updated as the user
60+
* selects a value and changes the index, as shown in the example below.
61+
*
62+
* ````
63+
* <SegmentedControlIOS
64+
* values={['One', 'Two']}
65+
* selectedIndex={this.state.selectedIndex}
66+
* onChange={(event) => {
67+
* this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
68+
* }}
69+
* />
70+
* ````
71+
*/
72+
declare class SegmentedControlIOSComponent extends React.Component<SegmentedControlIOSProps> {}
73+
declare const SegmentedControlIOSBase: Constructor<NativeMethodsMixin> & typeof SegmentedControlIOSComponent;
74+
export default class SegmentedControlIOS extends SegmentedControlIOSBase {}

package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.0.2",
44
"description": "React Native SegmentedControlIOS library",
55
"main": "js/index.js",
6+
"types": "index.d.ts",
67
"scripts": {
78
"start": "node node_modules/react-native/local-cli/cli.js start",
89
"flow": "flow",
@@ -26,6 +27,7 @@
2627
"eslint-plugin-react": "7.12.4",
2728
"eslint-plugin-react-hooks": "^1.0.1",
2829
"eslint-plugin-react-native": "3.6.0",
30+
"@react-native-community/segmented-control": "file:./",
2931
"flow-bin": "0.92.0",
3032
"husky": "^1.3.1",
3133
"jest": "^24.5.0",
@@ -37,7 +39,9 @@
3739
"react-test-renderer": "16.8.3",
3840
"rimraf": "^2.6.3",
3941
"semantic-release": "15.10.3",
40-
"typescript": "^3.3.3"
42+
"typescript": "^3.3.3",
43+
"@types/react": "^16.9.17",
44+
"@types/react-native": "0.60.26"
4145
},
4246
"jest": {
4347
"preset": "react-native",
@@ -70,4 +74,4 @@
7074
"url": "https://github.com/react-native-community/react-native-segmented-control/issues"
7175
},
7276
"homepage": "https://github.com/react-native-community/react-native-segmented-control#readme"
73-
}
77+
}

yarn.lock

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1048,6 +1048,27 @@
10481048
resolved "https://registry.yarnpkg.com/@types/node/-/node-11.11.7.tgz#f1c35a906b82adae76ede5ab0d2088e58fa37843"
10491049
integrity sha512-bHbRcyD6XpXVLg42QYaQCjvDXaCFkvb3WbCIxSDmhGbJYVroxvYzekk9QGg1beeIawfvSLkdZpP0h7jxE4ihnA==
10501050

1051+
"@types/prop-types@*":
1052+
version "15.7.3"
1053+
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
1054+
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
1055+
1056+
"@types/react-native@0.60.26":
1057+
version "0.60.26"
1058+
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.26.tgz#cfbb02c39cd162240d59f4922b5bdeb0c212f90d"
1059+
integrity sha512-M2ZE5/65Z+cmnP0hz/ImsR4eeqgHenLPWIxhJiaWsTuIMYlTfOxSIqkJQ0SFm4BdklxDS1aaH4+3d8ve+0LHMQ==
1060+
dependencies:
1061+
"@types/prop-types" "*"
1062+
"@types/react" "*"
1063+
1064+
"@types/react@*", "@types/react@^16.9.17":
1065+
version "16.9.17"
1066+
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
1067+
integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
1068+
dependencies:
1069+
"@types/prop-types" "*"
1070+
csstype "^2.2.0"
1071+
10511072
"@types/stack-utils@^1.0.1":
10521073
version "1.0.1"
10531074
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -2361,6 +2382,11 @@ cssstyle@^1.0.0:
23612382
dependencies:
23622383
cssom "0.3.x"
23632384

2385+
csstype@^2.2.0:
2386+
version "2.6.8"
2387+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
2388+
integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
2389+
23642390
currently-unhandled@^0.4.1:
23652391
version "0.4.1"
23662392
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"

0 commit comments

Comments
 (0)