vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-10-06 15:57:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #21957 from iRoachie/rne

Browse Source 
Remove react-native-elements
This commit is contained in:
Eloy Durán
2017-12-05 00:30:55 +01:00
committed by GitHub
parent 85f0127b53 83cdd735d3
commit ab3f992492
6 changed files with 6 additions and 3292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
notNeededPackages.json
+6
View File
@@ -570,6 +570,12 @@
"sourceRepoURL": "https://github.com/gpbl/react-day-picker",
"asOfVersion": "5.3.0"
},
{
"libraryName": "react-native-elements",
"typingsPackageName": "react-native-elements",
"sourceRepoURL": "https://github.com/react-native-training/react-native-elements",
"asOfVersion": "0.18.0"
},
{
"libraryName": "realm",
"typingsPackageName": "realm",
types/react-native-elements/README.md
-26
View File
@@ -1,26 +0,0 @@
# [React Native Elements](https://github.com/react-native-training/react-native-elements)
### Component Checklist
- [x] Buttons
- [x] Badge
- [x] Social Icons / Social Icon Buttons
- [x] Icons
- [x] Side Menu
- [x] Form Elements
- [x] SearchBar
- [x] ButtonGroup
- [x] CheckBoxes
- [x] List Element
- [x] Tab Bar Component
- [x] HTML style headings
- [x] Card component
- [x] Pricing Component
- [x] Grid Component
- [x] Slider Component
- [x] Tile Component
- [x] Avatar Component
- [x] Rating Component
- [x] SwipeDeck Component
- [x] Header Component
- [x] Divider
types/react-native-elements/index.d.ts
Vendored
-2265
View File
File diff suppressed because it is too large Load Diff
types/react-native-elements/react-native-elements-tests.tsx
-975
View File
@@ -1,975 +0,0 @@
import * as React from 'react';
import {
ListView,
View,
StyleSheet,
TouchableNativeFeedback,
Image,
TextInput,
Animated,
Dimensions
} from 'react-native';
import {
Button,
Text,
Badge,
Avatar,
Card,
ButtonGroup,
CheckBox,
Divider,
FormInput,
FormValidationMessage,
FormLabel,
Header,
Icon,
List,
ListItem,
PricingCard,
Rating,
SearchBar,
SideMenu,
Slider,
SocialIcon,
SwipeDeck,
Tabs,
Tab,
Tile,
colors,
getIconType,
normalize
} from 'react-native-elements';
const { width, height } = Dimensions.get('window');
class TextTest extends React.Component<any, any> {
render() {
return (
<View>
<Text h1>Heading 1</Text>
<Text h2>Heading 2</Text>
<Text h3>Heading 3</Text>
<Text h4>Heading 4</Text>
</View>
);
}
}
class AvatarTest extends React.Component<any, any> {
render() {
return (
<View>
<View>
<Text style={AvatarStyles.title}>Avatars</Text>
<Avatar
small
rounded
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg'
}}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
<Avatar
medium
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg'
}}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
<Avatar
large
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
}}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
<Avatar
xlarge
rounded
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg'
}}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
</View>
<View>
<Text style={AvatarStyles.title}>Avatar with initials</Text>
<Avatar
small
rounded
title="MT"
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
<Avatar
medium
title="BP"
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
<Avatar
large
title="LW"
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
<Avatar
xlarge
rounded
title="CR"
onPress={() => console.log('Works!')}
activeOpacity={0.7}
/>
</View>
<View>
<Text style={AvatarStyles.title}>Avatar with icons</Text>
<Avatar
small
rounded
icon={{ name: 'user' }}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
containerStyle={{
flex: 2,
marginLeft: 20,
marginTop: 115
}}
/>
<Avatar
medium
overlayContainerStyle={{ backgroundColor: 'blue' }}
icon={{ name: 'meetup', color: 'red' }}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
containerStyle={{ flex: 3, marginTop: 100 }}
/>
<Avatar
large
icon={{ name: 'rocket', color: 'orange' }}
overlayContainerStyle={{ backgroundColor: 'white' }}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
containerStyle={{ flex: 4, marginTop: 75 }}
/>
<Avatar
xlarge
rounded
icon={{ name: 'home' }}
onPress={() => console.log('Works!')}
activeOpacity={0.7}
containerStyle={{ flex: 5, marginRight: 60 }}
/>
</View>
</View>
);
}
}
const AvatarStyles = StyleSheet.create({
title: {
fontSize: 30,
marginBottom: 10
}
});
class BadgeTest extends React.Component<any, any> {
render() {
return (
<View>
<Badge value={3} textStyle={{ color: 'orange' }} />
<Badge containerStyle={{ backgroundColor: 'violet' }}>
<Text>User 1</Text>
</Badge>
<Badge onPress={() => console.log('pressed')} value="5" />
<Badge component={TouchableNativeFeedback} value={10} />
</View>
);
}
}
class ButtonTest extends React.Component<any, any> {
handleButtonPress() {
console.log('I got pressed');
}
render() {
return (
<View>
<Button
title="BUTTON"
onPress={() => this.handleButtonPress()}
/>
<Button
raised
icon={{ name: 'cached' }}
title="BUTTON WITH ICON"
onPress={() => this.handleButtonPress()}
/>
<Button
large
iconRight = {{ name: 'code' }}
title="LARGE WITH RIGHT ICON"
onPress={() => this.handleButtonPress()}
/>
<Button
large
icon={{ name: 'envira', type: 'font-awesome' }}
title="LARGE WITH RIGHT ICON"
onPress={() => this.handleButtonPress()}
/>
<Button
large
icon={{
name: 'squirrel',
type: 'octicon',
buttonStyle: ButtonStyles.someButtonStyle
}}
title="OCTICON"
onPress={() => this.handleButtonPress()}
/>
</View>
);
}
}
const ButtonStyles = StyleSheet.create({
someButtonStyle: {
color: 'pink'
}
});
class CardTest extends React.Component<any, any> {
render() {
const users = [
{
name: 'brynn',
avatar:
'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg'
}
];
return (
<View>
{/* implemented without image with header */}
<Card title="CARD WITH DIVIDER">
{users.map((u, i) => {
return (
<View key={i}>
<Image
resizeMode="cover"
source={{ uri: u.avatar }}
/>
<Text>{u.name}</Text>
</View>
);
})}
</Card>
{/* implemented with Text and Button as children */}
<Card title="HELLO WORLD" image={require('../images/pic2.jpg')}>
<Text style={{ marginBottom: 10 }}>
The idea with React Native Elements is more about
component structure than actual design.
</Text>
<Button
onPress={() => {}}
icon={{ name: 'code' }}
backgroundColor="#03A9F4"
fontFamily="Lato"
buttonStyle={{
borderRadius: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 0
}}
title="VIEW NOW"
/>
</Card>
</View>
);
}
}
const component1 = () => <Text>Hello</Text>;
const component2 = () => <Text>World</Text>;
const component3 = () => <Text>ButtonGroup</Text>;
class ButtonGroupTest extends React.Component<any, any> {
state = {
selectedIndexStrings: 2,
selectedIndexObjects: 2
};
updateIndexStrings = (selectedIndexStrings: number) => {
this.setState({ selectedIndexStrings });
}
updateIndexObjects = (selectedIndexObjects: number) => {
this.setState({ selectedIndexObjects });
}
render() {
const buttonStrings = ['Hello', 'World', 'Buttons'];
const buttonObjects = [
{ element: component1 },
{ element: component2 },
{ element: component3 }
];
const { selectedIndexStrings, selectedIndexObjects } = this.state;
return (
<View>
<ButtonGroup
onPress={this.updateIndexStrings}
selectedIndex={selectedIndexStrings}
buttons={buttonStrings}
containerStyle={{ height: 100 }}
/>
<ButtonGroup
onPress={this.updateIndexObjects}
selectedIndex={selectedIndexObjects}
buttons={buttonObjects}
containerStyle={{ height: 100 }}
component={TouchableNativeFeedback}
/>
</View>
);
}
}
interface CheckBoxTestState {
checked: boolean;
}
class CheckBoxTest extends React.Component<any, CheckBoxTestState> {
state = {
checked: false
};
render() {
return (
<View>
<CheckBox title="Click Here" checked={this.state.checked} />
<CheckBox
center
title="Click Here"
checked={this.state.checked}
/>
<CheckBox
center
title="Click Here"
checkedIcon="dot-circle-o"
uncheckedIcon="circle-o"
checked={this.state.checked}
/>
<CheckBox
center
title="Click Here to Remove This Item"
iconRight
iconType="material"
checkedIcon="clear"
uncheckedIcon="add"
checkedColor="red"
checked={this.state.checked}
/>
</View>
);
}
}
class DividerTest extends React.Component {
render() {
return <Divider style={{ backgroundColor: 'blue' }} />;
}
}
class FormTest extends React.Component<any, any> {
input: FormInput;
onChangeText(text: string) {
console.log('changed text', text);
}
storeFormInput = (input: any) => {
this.input = input;
}
focus() {
this.input.focus();
}
render() {
return (
<View>
<FormLabel>Name</FormLabel>
<FormInput
ref={this.storeFormInput}
onChangeText={this.onChangeText}
/>
<FormValidationMessage>Error message</FormValidationMessage>
</View>
);
}
}
class HeaderTest extends React.Component<any, any> {
render() {
return (
<View>
<Header
leftComponent={<View />}
rightComponent={{ icon: 'home', style: { color: '#fff' } }}
/>
<Header>
<View />
<View />
<View />
</Header>
</View>
);
}
}
class IconTest extends React.Component<any, any> {
render() {
return (
<View>
<Icon name="rowing" />
<Icon name="g-translate" color="#00aced" />
<Icon name="sc-telegram" type="evilicon" color="#517fa4" />
<Icon
reverse
name="ios-american-football"
type="ionicon"
color="#517fa4"
/>
<Icon
raised
name="heartbeat"
type="font-awesome"
color="#f50"
onPress={() => console.log('hello')}
/>
</View>
);
}
}
class ListTest extends React.Component<any, any> {
list = [
{
title: 'Appointments',
icon: 'av-timer'
},
{
title: 'Trips',
icon: 'flight-takeoff'
}
];
render() {
return (
<List>
{this.list.map((item, i) => (
<ListItem
key={i}
title={item.title}
leftIcon={{ name: item.icon }}
/>
))}
</List>
);
}
}
class PricingCardTest extends React.Component<any, any> {
render() {
return (
<PricingCard
color="#4f9deb"
title="Free"
price="$0"
info={['1 User', 'Basic Support', 'All Core Features']}
button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
/>
);
}
}
class RatingTest extends React.Component {
ratingCompleted(rating: number) {
console.log('Rating is: ' + rating);
}
render() {
return (
<View>
<Rating
showRating
onFinishRating={this.ratingCompleted}
style={{ paddingVertical: 10 }}
/>
<Rating
showRating
type="star"
fractions={1}
startingValue={3.6}
readonly
imageSize={40}
onFinishRating={this.ratingCompleted}
style={{ paddingVertical: 10 }}
/>
<Rating
type="heart"
ratingCount={3}
fractions={2}
startingValue={1.57}
imageSize={40}
onFinishRating={this.ratingCompleted}
showRating
style={[{ paddingVertical: 10 }]}
/>
</View>
);
}
}
class SearchBarTest extends React.Component<any, any> {
searchBar: SearchBar;
input: TextInput;
componentDidMount() {
this.searchBar.focus();
}
onChangeText = (text: string) => {
console.log('text has changed');
}
onChangeTextAction = (text: string) => {
if (text === 'awesome') {
this.searchBar.blur();
}
if (text === 'this is fun') {
this.searchBar.clearText();
}
}
storeRef(ref: SearchBar) {
this.searchBar = ref;
this.input = this.searchBar.input;
}
render() {
return (
<View>
<SearchBar
onChangeText={this.onChangeTextAction}
placeholder="Type Here..."
ref={this.storeRef}
/>
<SearchBar
noIcon
onChangeText={this.onChangeText}
placeholder="Type Here..."
/>
<SearchBar
round
onChangeText={this.onChangeText}
placeholder="Type Here..."
/>
<SearchBar
lightTheme
onChangeText={this.onChangeText}
placeholder="Type Here..."
/>
</View>
);
}
}
interface SideMenuTestListItem {
avatarURL: string;
name: string;
subtitle: string;
}
interface SideMenuTestState {
list: SideMenuTestListItem[];
isOpen: boolean;
}
class SideMenuTest extends React.Component<any, SideMenuTestState> {
state = {
list: [
{
avatarURL: 'https://amy.com/img.jpg',
name: 'Amy',
subtitle: 'Coding Geek'
},
{
avatarURL: 'https://john.com/img.jpg',
name: 'John',
subtitle: 'Love cooking'
}
],
isOpen: false
};
onSideMenuChange(isOpen: boolean) {
this.setState({
isOpen
});
}
toggleSideMenu = () => {
this.setState({
isOpen: !this.state.isOpen
});
}
animationStyle = (value: number) => ({
transform: [
{
translateX: value
}
]
})
animationFunction = (prop: Animated.Value, value: number) =>
Animated.spring(prop, {
toValue: value,
friction: 8
})
render() {
const MenuComponent = (
<View
style={{ flex: 1, backgroundColor: '#ededed', paddingTop: 50 }}
>
<List containerStyle={{ marginBottom: 20 }}>
{this.state.list.map((l, i) => (
<ListItem
roundAvatar
onPress={() => console.log('Pressed')}
avatar={l.avatarURL}
key={i}
title={l.name}
subtitle={l.subtitle}
/>
))}
</List>
</View>
);
return (
<SideMenu
isOpen={this.state.isOpen}
onChange={this.onSideMenuChange}
menu={MenuComponent}
animationStyle={this.animationStyle}
animationFunction={this.animationFunction}
>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
}}
>
<Button
title="test button"
onPress={this.toggleSideMenu.bind(this)}
/>
</View>
</SideMenu>
);
}
}
interface SliderTestState {
value: number;
}
class SliderTest extends React.Component<any, SliderTestState> {
state = {
value: 0.2
};
onValueChange = (value: number) => {
this.setState({ value });
}
render() {
return (
<View
style={{
flex: 1,
alignItems: 'stretch',
justifyContent: 'center'
}}
>
<Slider
value={this.state.value}
onValueChange={this.onValueChange}
/>
<Text>Value: {this.state.value}</Text>
</View>
);
}
}
const SocialIconTest: React.StatelessComponent = () => {
return (
<View>
<SocialIcon type="twitter" />
<SocialIcon raised={false} type="gitlab" />
<SocialIcon light type="medium" />
<SocialIcon light raised={false} type="medium" />
<SocialIcon title="Sign In With Facebook" button type="facebook" />
<SocialIcon title="Some Twitter Message" button type="twitter" />
<SocialIcon button type="medium" />
<SocialIcon button light type="instagram" />
</View>
);
};
const DATA = [
{
id: 1,
text: 'Amanda',
age: 28,
uri:
'http://f9view.com/wp-content/uploads/2013/10/American-Beautiful-Girls-Wallpapers-Hollywood-Celebs-1920x1200px.jpg'
},
{ id: 2, text: 'Emma', age: 29, uri: 'https://i.imgur.com/FHxVpN4.jpg' },
{
id: 3,
text: 'Scarlett',
age: 25,
uri: 'https://i.ytimg.com/vi/GOJZ5TIlc3M/maxresdefault.jpg'
},
{
id: 4,
text: 'Keira',
age: 27,
uri:
'http://www.bdprimeit.com/wp-content/uploads/Keira-Knightley-Most-beautiful-Hollywood-actress.jpg'
},
{
id: 5,
text: 'Ashley',
age: 30,
uri:
'https://s-media-cache-ak0.pinimg.com/736x/4c/89/67/4c8967fac1822eeddf09670565430fd5.jpg'
},
{
id: 6,
text: 'Jennifer',
age: 24,
uri:
'https://2.bp.blogspot.com/-Vy0NVWhQfKo/Ubma2Mx2YTI/AAAAAAAAH3s/LC_u8LRfm8o/s1600/aimee-teegarden-04.jpg'
},
{
id: 7,
text: 'Sarah',
age: 28,
uri:
'https://s-media-cache-ak0.pinimg.com/736x/41/75/26/4175268906d97492e4a3175eab95c0f5.jpg'
}
];
class SwipeDeckTest extends React.Component {
renderCard(card: any) {
return (
<Card
key={card.id}
containerStyle={{
borderRadius: 10,
width: width * 0.92,
height: height - 165
}}
featuredTitle={`${card.text}, ${card.age}`}
featuredTitleStyle={{
position: 'absolute',
left: 15,
bottom: 10,
fontSize: 30
}}
image={{ uri: card.uri }}
imageStyle={{
borderRadius: 10,
width: width * 0.915,
height: height - 165
}}
/>
);
}
onSwipeRight(card: any) {
console.log('Card liked: ' + card.text);
}
onSwipeLeft(card: any) {
console.log('Card disliked: ' + card.text);
}
renderNoMoreCards() {
return (
<Card
containerStyle={{
borderRadius: 10,
width: width * 0.92,
height: height - 165
}}
featuredTitle="No more cards"
featuredTitleStyle={{ fontSize: 25 }}
image={{ uri: 'https://i.imgflip.com/1j2oed.jpg' }}
imageStyle={{
borderRadius: 10,
width: width * 0.915,
height: height - 165
}}
/>
);
}
render() {
return (
<SwipeDeck
data={DATA}
renderCard={this.renderCard}
renderNoMoreCards={this.renderNoMoreCards}
onSwipeRight={this.onSwipeRight}
onSwipeLeft={this.onSwipeLeft}
/>
);
}
}
interface TabTestState {
selectedTab: string;
}
class TabsTest extends React.Component<{}, TabTestState> {
state = {
selectedTab: 'profile'
};
changeTab = (selectedTab: string) => {
this.setState({ selectedTab });
}
render() {
const { selectedTab } = this.state;
return (
<Tabs>
<Tab
titleStyle={{ fontWeight: 'bold', fontSize: 10 }}
selectedTitleStyle={{ marginTop: -1, marginBottom: 6 }}
selected={selectedTab === 'feed'}
title={selectedTab === 'feed' ? 'FEED' : undefined}
renderIcon={() => (
<Icon
containerStyle={{
justifyContent: 'center',
alignItems: 'center',
marginTop: 12
}}
color={'#5e6977'}
name="whatshot"
size={33}
/>
)}
renderSelectedIcon={() => (
<Icon color={'#6296f9'} name="whatshot" size={30} />
)}
onPress={() => this.changeTab('feed')}
>
<View />
</Tab>
<Tab
titleStyle={{ fontWeight: 'bold', fontSize: 10 }}
selectedTitleStyle={{ marginTop: -1, marginBottom: 6 }}
selected={selectedTab === 'profile'}
title={selectedTab === 'profile' ? 'PROFILE' : undefined}
renderIcon={() => (
<Icon
containerStyle={{
justifyContent: 'center',
alignItems: 'center',
marginTop: 12
}}
color={'#5e6977'}
name="person"
size={33}
/>
)}
renderSelectedIcon={() => (
<Icon color={'#6296f9'} name="person" size={30} />
)}
onPress={() => this.changeTab('profile')}
>
<View />
</Tab>
</Tabs>
);
}
}
const TileTest: React.StatelessComponent = () => (
<View>
<Tile
imageSrc="image/path/awesome.jpeg"
title="Lorem ipsum dolor sit amet, consectetur"
icon={{ name: 'play-circle', type: 'font-awesome' }} // optional
contentContainerStyle={{ height: 70 }}
>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
}}
>
<Text>Caption</Text>
<Text>Caption</Text>
</View>
</Tile>
<Tile
imageSrc="image/path/awesome.jpeg"
icon={{ name: 'play-circle', type: 'font-awesome' }}
featured
/>
<Tile
imageSrc="image/path/awesome.jpeg"
title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolore exercitationem"
featured
caption="Some Caption Text"
/>
</View>
);
const CustomIcon = getIconType('material');
const fontSize = normalize(20);
const white = colors.white;
types/react-native-elements/tsconfig.json
-25
View File
@@ -1,25 +0,0 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"typeRoots": [
"../"
],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react"
},
"files": [
"index.d.ts",
"react-native-elements-tests.tsx"
]
}
types/react-native-elements/tslint.json
-1
View File
@@ -1 +0,0 @@
{ "extends": "dtslint/dt.json" }