Skip to content

Commit 5b34d6c

Browse files
authored
chore: migrate typealias to interface (react-native-elements#3374)
1 parent 35b3cc4 commit 5b34d6c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+667
-234
lines changed

example/src/views/circularSlider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { StyleSheet, View } from 'react-native';
3-
import { CircularSlider } from '@react-native-elements/circular-slider';
3+
import CircularSlider from '@react-native-elements/circular-slider';
44
import { Header } from '../components/header';
55

66
export default function () {

example/src/views/ratings.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { StyleSheet, Text, View, Platform, ScrollView } from 'react-native';
3-
// import { Rating, AirbnbRating, RatingProps } from 'react-native-ratings';
3+
import { Rating, AirbnbRating } from '@react-native-elements/themed';
44
import { Header } from '../components/header';
55

66
const WATER_IMAGE = require('../images/water.png');
@@ -16,7 +16,7 @@ const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
1616
return (
1717
<View style={styles.container}>
1818
<Header title="Ratings" view="rating" />
19-
{/* <ScrollView style={styles.viewContainer}>
19+
<ScrollView style={styles.viewContainer}>
2020
<Text
2121
style={[
2222
styles.titleText,
@@ -63,7 +63,7 @@ const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
6363
showRating
6464
imageSize={40}
6565
onFinishRating={ratingCompleted}
66-
{...(ratingProps as RatingProps)}
66+
{...ratingProps}
6767
style={{ paddingVertical: 10 }}
6868
/>
6969
<Rating
@@ -97,7 +97,7 @@ const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
9797
style={styles.rating}
9898
/>
9999
</View>
100-
</ScrollView> */}
100+
</ScrollView>
101101
</View>
102102
);
103103
};

example/src/views/social_icons.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { View, ScrollView } from 'react-native';
33
import { SocialIcon, SocialIconProps } from '@react-native-elements/themed';
44
import { Header } from '../components/header';
5-
import { SocialMediaType } from '@react-native-elements/themed/dist/SocialIcon/SocialIcon';
5+
import { SocialMediaType } from '@react-native-elements/themed';
66
import _ from 'lodash';
77

88
type IconData = {

packages/base/src/AirbnbRating/AirbnbRating.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
} from 'react-native-ratings';
66
import { RneFunctionComponent } from '../helpers';
77

8-
export type TapRatingProps = RatingProps;
8+
export interface TapRatingProps extends RatingProps {}
99

1010
/** Ratings are used to collect measurable feedback from users.
1111
* Use Rating over an Input where imagery can increase user interaction.

packages/base/src/Avatar/Avatar.Accessory.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@ import {
1717
} from '../helpers';
1818

1919
export type AccessoryProps = Partial<IconProps> &
20-
Partial<ImageProps> & {
20+
Partial<ImageProps> &
21+
InlinePressableProps & {
2122
/** Add underlay color to the accessory of avatar. */
2223
underlayColor?: ColorValue;
2324

2425
/** Add custom styling to the accessory of avatar. */
2526
style?: StyleProp<ViewStyle>;
26-
} & InlinePressableProps;
27+
};
2728

2829
/** This is used for adding an accessory to the Avatar.
2930
* Receives either all [Icon](icon#props) or [Image](image#props) props. */

packages/base/src/Avatar/Avatar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ type AvatarIcon = IconObject & {
3131
iconStyle?: StyleProp<TextStyle>;
3232
};
3333

34-
export type AvatarProps = {
34+
export interface AvatarProps extends InlinePressableProps {
3535
/** Component for enclosing element (eg: TouchableHighlight, View, etc).
3636
*
3737
* @default `Press handlers present then Pressable else View`
@@ -88,7 +88,7 @@ export type AvatarProps = {
8888

8989
/** Custom ImageComponent for Avatar. */
9090
ImageComponent?: React.ComponentClass;
91-
} & InlinePressableProps;
91+
}
9292

9393
/**
9494
* Avatars are found all over ui design from lists to profile screens.

packages/base/src/Badge/Badge.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
RneFunctionComponent,
1717
} from '../helpers';
1818

19-
export type BadgeProps = {
19+
export interface BadgeProps extends InlinePressableProps {
2020
/** Style for the container. */
2121
containerStyle?: StyleProp<ViewStyle>;
2222

@@ -39,7 +39,7 @@ export type BadgeProps = {
3939

4040
/** Determines color of the indicator. */
4141
status?: 'primary' | 'success' | 'warning' | 'error';
42-
} & InlinePressableProps;
42+
}
4343

4444
/** Badges are small components typically used to communicate a numerical value or indicate the status of an item to the user. */
4545
export const Badge: RneFunctionComponent<BadgeProps> = ({

packages/base/src/BottomSheet/BottomSheet.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
import { SafeAreaView } from 'react-native-safe-area-context';
1414
import { RneFunctionComponent } from '../helpers';
1515

16-
export type BottomSheetProps = {
16+
export interface BottomSheetProps {
1717
/** Style of the bottom sheet's container. Use this to change the color of the underlay. */
1818
containerStyle?: StyleProp<ViewStyle>;
1919

@@ -31,7 +31,7 @@ export type BottomSheetProps = {
3131

3232
/** Used to add props to Scroll view. */
3333
scrollViewProps?: ScrollViewProps;
34-
};
34+
}
3535

3636
/**
3737
* Overlay Modal that displays content from the bottom of the screen.

packages/base/src/ButtonGroup/ButtonGroup.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
} from '../helpers';
2020
import { Text } from '../Text';
2121

22-
export type ButtonGroupProps = InlinePressableProps & {
22+
export interface ButtonGroupProps extends InlinePressableProps {
2323
/** Button for the component. */
2424
button?: object;
2525

@@ -97,7 +97,7 @@ export type ButtonGroupProps = InlinePressableProps & {
9797

9898
/** Display the ButtonGroup vertically. */
9999
vertical?: boolean;
100-
};
100+
}
101101

102102
/** ButtonGroup is a linear set of segments, each of which function as a button that can display a different view/or perform a different action.
103103
* Use a ButtonGroup to offer choices that are closely related but mutually exclusive.

packages/base/src/Card/Card.Divider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
33
import { DividerProps, Divider } from '../Divider';
44
import { RneFunctionComponent } from '../helpers';
55

6-
export type CardDividerProps = DividerProps;
6+
export interface CardDividerProps extends DividerProps {}
77

88
/** Add divider to the card which acts as a separator between elements.
99
* This, Receives all [Divider](divider#props) props. */

packages/base/src/Card/Card.FeaturedSubtitle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { fonts } from '../helpers/index-config';
55
import { Text, TextProps } from '../Text';
66
import { defaultTheme, RneFunctionComponent } from '../helpers';
77

8-
export type CardFeaturedSubtitleProps = TextProps;
8+
export interface CardFeaturedSubtitleProps extends TextProps {}
99

1010
/** Add a featured subtitle to the Card.
1111
* This, Receives all [Text](text#props) props. */

packages/base/src/Card/Card.FeaturedTitle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { fonts } from '../helpers/index-config';
55
import { Text, TextProps } from '../Text';
66
import { defaultTheme, RneFunctionComponent } from '../helpers';
77

8-
export type CardFeaturedTitleProps = TextProps;
8+
export interface CardFeaturedTitleProps extends TextProps {}
99

1010
/** Add a featured title to the Card.
1111
* This, Receives all [Text](text#props) props. */

packages/base/src/Card/Card.Image.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
33
import { RneFunctionComponent } from '../helpers';
44
import { ImageProps, Image } from '../Image';
55

6-
export type CardImageProps = ImageProps;
6+
export interface CardImageProps extends ImageProps {}
77

88
/** Add information in the form of image to the card.
99
* This, Receives all [Image](Image.mdx#props) props. */

packages/base/src/Card/Card.Title.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { fonts } from '../helpers/index-config';
55
import { Text, TextProps } from '../Text';
66
import { defaultTheme, RneFunctionComponent } from '../helpers';
77

8-
export type CardTitleProps = TextProps;
8+
export interface CardTitleProps extends TextProps {}
99

1010
/** Add a general title to the Card.
1111
* This, Receives all [Text](text#props) props. */

packages/base/src/Card/Card.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import React from 'react';
22
import { View, Platform, StyleSheet, StyleProp, ViewStyle } from 'react-native';
33
import { defaultTheme, RneFunctionComponent } from '../helpers';
44

5-
export type CardBaseProps = {
5+
export interface CardBaseProps {
66
/** Outer container style. */
77
containerStyle?: StyleProp<ViewStyle>;
88

99
/** Inner container style. */
1010
wrapperStyle?: StyleProp<ViewStyle>;
11-
};
11+
}
1212

1313
/** Cards are a great way to display information, usually containing content and actions about a single subject.
1414
* Cards can contain images, buttons, text and more.

packages/base/src/CheckBox/CheckBox.tsx

+24-25
Original file line numberDiff line numberDiff line change
@@ -15,41 +15,40 @@ import { CheckBoxIcon, CheckBoxIconProps } from './components/CheckBoxIcon';
1515
import { fonts } from '../helpers/index-config';
1616
import { defaultTheme, RneFunctionComponent } from '../helpers';
1717

18-
export type CheckBoxProps = PressableProps &
19-
CheckBoxIconProps & {
20-
/** Specify React Native component for main button. */
21-
Component?: typeof React.Component;
18+
export interface CheckBoxProps extends PressableProps, CheckBoxIconProps {
19+
/** Specify React Native component for main button. */
20+
Component?: typeof React.Component;
2221

23-
/** Moves icon to right of text. */
24-
iconRight?: boolean;
22+
/** Moves icon to right of text. */
23+
iconRight?: boolean;
2524

26-
/** Title of checkbox. */
27-
title?: string | React.ReactElement<{}>;
25+
/** Title of checkbox. */
26+
title?: string | React.ReactElement<{}>;
2827

29-
/** Additional props for the title Text component. */
30-
titleProps?: TextProps;
28+
/** Additional props for the title Text component. */
29+
titleProps?: TextProps;
3130

32-
/** Aligns checkbox to center. */
33-
center?: boolean;
31+
/** Aligns checkbox to center. */
32+
center?: boolean;
3433

35-
/** Aligns checkbox to right. */
36-
right?: boolean;
34+
/** Aligns checkbox to right. */
35+
right?: boolean;
3736

38-
/** Style of main container. */
39-
containerStyle?: StyleProp<ViewStyle>;
37+
/** Style of main container. */
38+
containerStyle?: StyleProp<ViewStyle>;
4039

41-
/** Style for the wrapper of checkbox. */
42-
wrapperStyle?: StyleProp<ViewStyle>;
40+
/** Style for the wrapper of checkbox. */
41+
wrapperStyle?: StyleProp<ViewStyle>;
4342

44-
/** Style of text. */
45-
textStyle?: StyleProp<TextStyle>;
43+
/** Style of text. */
44+
textStyle?: StyleProp<TextStyle>;
4645

47-
/** Specify a custom checked message. */
48-
checkedTitle?: string;
46+
/** Specify a custom checked message. */
47+
checkedTitle?: string;
4948

50-
/** Specify different font family. */
51-
fontFamily?: string;
52-
};
49+
/** Specify different font family. */
50+
fontFamily?: string;
51+
}
5352

5453
/** CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings - On or Off.
5554
* It provides a clear visual of either a true or false choice. */

packages/base/src/CheckBox/components/CheckBoxIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { RneFunctionComponent } from '../../helpers';
33
import getIconType from '../../helpers/getIconType';
44
import { IconType } from '../../Icon';
55

6-
export type CheckBoxIconProps = {
6+
export interface CheckBoxIconProps {
77
/** Flag for checking the icon. */
88
checked: boolean;
99

@@ -30,7 +30,7 @@ export type CheckBoxIconProps = {
3030

3131
/** Default unchecked color. */
3232
uncheckedColor?: string;
33-
};
33+
}
3434

3535
export const CheckBoxIcon: RneFunctionComponent<CheckBoxIconProps> = ({
3636
checked,

packages/base/src/Chip/Chip.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@ import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
33
import { RneFunctionComponent } from '../helpers';
44
import { ButtonProps, Button } from '../Button';
55

6-
export type ChipProps = Omit<
7-
ButtonProps,
8-
'loading' | 'loadingStyle' | 'loadingProps'
9-
> & {
6+
export interface ChipProps
7+
extends Omit<ButtonProps, 'loading' | 'loadingStyle' | 'loadingProps'> {
108
/** Type of button. */
119
type?: 'solid' | 'outline';
12-
};
10+
}
1311

1412
/** Chips are compact elements that represent an input, attribute, or action.
1513
* They may display text, icons, or both. */

packages/base/src/Dialog/Dialog.Actions.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React, { ReactNode } from 'react';
22
import { View, StyleSheet } from 'react-native';
33
import { RneFunctionComponent } from '../helpers';
44

5-
export type DialogActionsProps = {
5+
export interface DialogActionsProps {
66
/** Add Enclosed components as an action to the dialog. */
77
children?: ReactNode;
8-
};
8+
}
99

1010
/** Define Dialog Actions using this component. */
1111
export const DialogActions: RneFunctionComponent<DialogActionsProps> = ({

packages/base/src/Dialog/Dialog.Button.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
33
import { ButtonProps, Button } from '../Button';
44
import { RneFunctionComponent } from '../helpers';
55

6-
export type DialogButtonProps = ButtonProps;
6+
export interface DialogButtonProps extends ButtonProps {}
77

88
/** This is used to add a button to the Dialog.
99
* Receives all [Button](button#props) props. */

packages/base/src/Dialog/Dialog.Loading.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ import {
99
} from 'react-native';
1010
import { defaultTheme, RneFunctionComponent } from '../helpers';
1111

12-
export type DialogLoadingProps = {
12+
export interface DialogLoadingProps {
1313
/** Add additional styling for loading component. */
1414
loadingStyle?: StyleProp<ViewStyle>;
1515

1616
/** Add additional props for ActivityIndicator component */
1717
loadingProps?: ActivityIndicatorProps;
18-
};
18+
}
1919

2020
/** `DialogLoader` allows adding loader to the Dialog. Loader is simply ActivityIndicator. */
2121
export const DialogLoading: RneFunctionComponent<DialogLoadingProps> = ({

packages/base/src/Dialog/Dialog.Title.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Text, StyleSheet, TextStyle, StyleProp, Platform } from 'react-native';
33
import { RneFunctionComponent } from '../helpers';
44
import { TextProps } from '../Text';
55

6-
export type DialogTitleProps = {
6+
export interface DialogTitleProps {
77
/** Add Dialog title. */
88
title?: string;
99

@@ -12,7 +12,7 @@ export type DialogTitleProps = {
1212

1313
/** Add additional props for Text component. */
1414
titleProps?: TextProps;
15-
};
15+
}
1616

1717
/** `DialogTitle` allows you to add title to the Dialog. */
1818
export const DialogTitle: RneFunctionComponent<DialogTitleProps> = ({

packages/base/src/Dialog/Dialog.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,14 @@ import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
33
import { Overlay, OverlayProps } from '../Overlay';
44
import { RneFunctionComponent } from '../helpers';
55

6-
export type DialogBaseProps = Omit<OverlayProps, 'fullScreen'> & {
6+
export interface DialogBaseProps
7+
extends Partial<Omit<OverlayProps, 'fullScreen'>> {
78
/** Add Enclosed components. */
89
children?: ReactNode;
910

10-
/** If true, the dialog is visible. */
11-
isVisible?: boolean;
12-
1311
/** Add additional styling to the internal Overlay component. */
1412
overlayStyle?: StyleProp<ViewStyle>;
15-
};
13+
}
1614

1715
/** Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
1816
* You can wrap any component with a simple Dialog component to display quick information to the user.

0 commit comments

Comments
 (0)