feat(react-native-elements): pull from iRoachie

2026-08-11 20:40:20 +00:00 · 2017-09-15 07:32:35 +01:00
parent 2673835592
commit 15d5afb01b
3 changed files with 381 additions and 13 deletions
@@ -16,12 +16,12 @@ List will update as typings are added
 - [ ] Badge
 - [ ] Tab Bar Component
 - [x] HTML style headings
- [ ] Card component
+- [x] Card component
 - [ ] Pricing Component
 - [ ] Grid Component
 - [ ] Slider Component
 - [ ] Tile Component
- [ ] Avatar Component
+- [x] Avatar Component
 - [ ] Rating Component
 - [ ] SwipeDeck Component
 - [ ] Header Component
@@ -5,7 +5,18 @@
 // TypeScript Version: 2.3

 import * as React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, ImageStyle, ImageURISource } from 'react-native';
+
+export interface Icon {
+    name?: string;
+    color?: string;
+    size?: number;
+    type?: 'material' | 'material-community' | 'simple-line-icon' | 'zocial' | 'font-awesome' | 'octicon' | 'ionicon' | 'foundation' | 'evilicon' | 'entypo';
+}
+
+export interface AvatarIcon extends Icon {
+    iconStyle?: TextStyle;
+}

 export interface TextProps {
    /**
@@ -42,15 +53,125 @@ export interface TextProps {
 /**
 * HTML Style Headings
 *
- * @desc https://react-native-training.github.io/react-native-elements/API/HTML_style_headings/
+ * @see https://react-native-training.github.io/react-native-elements/API/HTML_style_headings/
 */
 export class Text extends React.Component<TextProps, any> {}

-export interface ButtonIcon {
-    name?: string;
-    color?: string;
-    size?: number;
-    type?: 'material' | 'material-community' | 'simple-line-icon' | 'zocial' | 'font-awesome' | 'octicon' | 'ionicon' | 'foundation' | 'evilicon' | 'entypo';
+export interface AvatarProps {
+    /**
+     * Component for enclosing element (eg: TouchableHighlight, View, etc)
+     *
+     * @default TouchableOpacity
+     */
+    component?: React.ComponentClass;
+
+    /**
+     * Width for the Avatar
+     *
+     * @default 34
+     */
+    width?: number;
+
+    /**
+     * Height for the Avatar
+     *
+     * @default 34
+     */
+    height?: number;
+
+    /**
+     * Callback function when pressing component
+     */
+    onPress?(): void;
+
+    /**
+     * Callback function when long pressing component
+     */
+    onLongPress?(): void;
+
+    /**
+     * Styling for outer container
+     */
+    containerStyle?: ViewStyle;
+
+    /**
+     * Image source
+     */
+    source?: ImageURISource;
+
+    /**
+     * Style for avatar image
+     */
+    avatarStyle?: ImageStyle;
+
+    /**
+     * Determines the shape of avatar
+     *
+     * @default false
+     */
+    rounded?: boolean;
+
+    /**
+     * Renders title in the avatar
+     */
+    title?: string;
+
+    /**
+     * Style for the title
+     */
+    titleStyle?: TextStyle;
+
+    /**
+     * Style for the view outside image or icon
+     */
+    overlayContainerStyle?: ViewStyle;
+
+    /**
+     * Opacity when pressed
+     *
+     * @default 0.2
+     */
+    activeOpacity?: number;
+
+    /**
+     * Icon for the avatar
+     */
+    icon?: AvatarIcon;
+
+    /**
+     * extra styling for icon component (optional)
+     */
+    iconStyle?: TextStyle;
+
+    /**
+     * Small sized icon
+     */
+    small?: boolean;
+
+    /**
+     * Medium sized icon
+     */
+    medium?: boolean;
+
+    /**
+     * Large sized icon
+     */
+    large?: boolean;
+
+    /**
+     * Extra-large sized icon
+     */
+    xlarge?: boolean;
+}
+
+/**
+ * Avatar Component
+ *
+ * @see https://react-native-training.github.io/react-native-elements/API/avatar/
+ */
+export class Avatar extends React.Component<AvatarProps, any> {}
+
+export interface ButtonIcon extends Icon {
    buttonStyle?: TextStyle;
 }

@@ -251,3 +372,89 @@ export interface BadgeProperties {
 * @see https://react-native-training.github.io/react-native-elements/API/badge/
 */
 export class Badge extends React.Component<BadgeProperties, any> {}
+
+export interface CardProps {
+    /**
+     * Flex direction (row or column)
+     *
+     * @default 'column'
+     */
+    flexDirection?: 'column' | 'row';
+
+    /**
+     * Outer container style
+     */
+    containerStyle?: ViewStyle;
+
+    /**
+     * Inner container style
+     */
+    wrapperStyle?: ViewStyle;
+
+    /**
+     * Card title
+     */
+    title?: string;
+
+    /**
+     * Additional title styling (if title provided)
+     */
+    titleStyle?: TextStyle;
+
+    /**
+     * Title rendered over the image
+     * (only works if image prop is present)
+     */
+    featuredTitle?: string;
+
+    /**
+     * Styling for featured title
+     */
+    featuredTitleStyle?: TextStyle;
+
+    /**
+     * Subtitle rendered over the image
+     * (only works if image prop is present)
+     */
+    featuredSubtitle?: string;
+
+    /**
+     * Styling for featured subtitle
+     */
+    featuredSubtitleStyle?: TextStyle;
+
+    /**
+     * Additional divider styling
+     * (if title provided)
+     */
+    dividerStyle?: ViewStyle;
+
+    /**
+     * Specify different font family
+     *
+     * @default System font bold (iOS), Sans Serif Bold (android)
+     */
+    fontFamily?: string;
+
+    /**
+     * Specify image styling if image is provided
+     */
+    imageStyle?: ImageStyle;
+
+    /**
+     * Specify styling for view surrounding image
+     */
+    imageWrapperStyle?: ViewStyle;
+
+    /**
+     * Add an image as the heading with the image prop
+     */
+    image?: ImageURISource;
+}
+
+/**
+ * Card component
+ *
+ * @see https://react-native-training.github.io/react-native-elements/API/card/
+ */
+export class Card extends React.Component<CardProps, any> {}
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, StyleSheet, TouchableNativeFeedback } from 'react-native';
-import { Button, Text, Badge } from 'react-native-elements';
+import { View, StyleSheet, TouchableNativeFeedback, Image } from 'react-native';
+import { Button, Text, Badge, Avatar, Card } from 'react-native-elements';

 class TextTest extends React.Component<any, any> {
  render() {
@@ -15,6 +15,117 @@ class TextTest extends React.Component<any, any> {
  }
 }

+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 (
@@ -64,15 +175,65 @@ class ButtonTest extends React.Component<any, any> {

        <Button
          large
-          icon={{name: 'squirrel', type: 'octicon', buttonStyle: styles.someButtonStyle }}
+          icon={{name: 'squirrel', type: 'octicon', buttonStyle: ButtonStyles.someButtonStyle }}
          title='OCTICON' onPress={() => this.handleButtonPress()} />
      </View>
    );
  }
 }

-const styles = StyleSheet.create({
+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>
+    );
+  }
+}