mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
bf74cd2904
The work is not yet completed, however there are several components provided and the rest will be completed in the next few days.
499 lines
14 KiB
TypeScript
499 lines
14 KiB
TypeScript
import * as React from 'react';
|
|
import {
|
|
ListView,
|
|
View,
|
|
StyleSheet,
|
|
TouchableNativeFeedback,
|
|
Image,
|
|
} from 'react-native';
|
|
import {
|
|
Button,
|
|
Text,
|
|
Badge,
|
|
Avatar,
|
|
Card,
|
|
ButtonGroup,
|
|
CheckBox,
|
|
Divider,
|
|
FormInput,
|
|
FormValidationMessage,
|
|
FormLabel,
|
|
Header,
|
|
Icon,
|
|
List,
|
|
ListItem,
|
|
PricingCard,
|
|
} from 'react-native-elements';
|
|
|
|
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
|
|
icon={{ 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 {
|
|
render() {
|
|
return (
|
|
<PricingCard
|
|
color="#4f9deb"
|
|
title="Free"
|
|
price="$0"
|
|
info={['1 User', 'Basic Support', 'All Core Features']}
|
|
button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
|
|
/>
|
|
);
|
|
}
|
|
}
|