import List from 'mrn/lib/List.js'

public class | source

List

Extends:

react-native~Component → List

List Compoent

Example:

<Subheader text="Text only single-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.single.text.map(list => (
    <List
        primaryText={list.primaryText}/>
))}
<Subheader text="Icon with text single-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.single.iconText.map(list => (
    <List
        leftIcon={
            <Icon name={list.leftIcon} size={24}/>
        }
        primaryText={list.primaryText}/>
))}
<Subheader text="Avatar with text single-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.single.avatarText.map((user, i) =>(
    <List
        leftAvatar={
            <Avatar src={user.avatar}/>
        }
        primaryText={user.name}
        rightIcon={
            <Icon name="message" size={24} color={i < 2 ? primaryColor : undefined}/>
        }
    />
))}
<Subheader text="Text only two-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.text.map(list => (
    <List
        primaryText={list.primaryText}
        secondaryText={list.secondaryText}
    />
))}
<Subheader text="Icon with text two-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.iconText.map((list, i) => (
    <View>
        <List
            leftIcon={
            list.leftIcon ? (<Icon name={list.leftIcon} size={24} color={COLOR[`${primary}500`].color}/>) : (<View></View>)
        }
            onLeftIconClick={()=>{console.log(list.leftIcon)}}
            primaryText={list.primaryText}
            secondaryText={list.secondaryText}
            rightIcon={
            list.rightIcon && (<Icon name={list.rightIcon} size={24}  />)
        }
            onRightIconClick={()=>{console.log(list.rightIcon)}}
        />
        {i === 1 && <Divider inset={true}/>}
    </View>
))}
<Subheader text="Avatar with text two-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.avatarText.map((mail, i) => (
    <View>
        <List
            primaryText={mail.name}
            leftAvatar={
            <Avatar src={mail.avatar}/>
        }
            secondaryText={
        <Text>
            <Text style={{color:'rgba(0,0,0,.87)'}}>{mail.subject}</Text>
            <Text> - {mail.body}</Text>
        </Text>
        }
            captionText={`${i * 6 + 1}min ago`}
        />
        {i < data.two.avatarText.length - 1 && <Divider inset={true}/>}
    </View>
))}
<Subheader text="Avatar with text and icon two-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.avatarIconText.map((type, i)=>(
    <View>
        <Subheader text={type.name} inset={true}/>
        {type.files.map((file, j) =>(
            <View>
                <List
                    leftAvatar={
                        <Avatar icon={file.icon} backgroundColor={file.color}/>
                    }
                    primaryText={file.name}
                    secondaryText={file.time}
                    rightIcon={
                        <Icon name="information" size={24}/>
                    }
                    onRightIconClick={()=>{console.log('information')}}
                />
            </View>
        ))}
        {i < data.two.avatarIconText.length - 1 && <Divider inset={true}/>}
    </View>
))}
<Subheader text="Text only three-line list"
primaryColor={COLOR[`${primary}500`].color}/>
{data.two.avatarText.map((mail, i) => (
    <View>
        <List
            primaryText={mail.name}
            secondaryTextMoreLine={[
                {
                    text: mail.subject,
                    style: {
                        color: 'rgba(0,0,0,.87)'
                    },
                },
                {
                    text: mail.body
                }
            ]}
            lines={3}
            captionText={`${i * 6 + 1}min ago`}
        />
        {i < data.two.avatarText.length - 1 && <Divider/>}
    </View>
))}
<Subheader text="Icon with text three-line list"
primaryColor={COLOR[`${primary}500`].color}/>
{data.three.textIcon.map((list) => (
    <List
        primaryText={list.primaryText}
        secondaryText={list.secondaryText}
        lines={3}
        leftIcon={
            <Icon name="checkbox-blank-outline" size={24}/>
        }
        onLeftIconClick={()=>{console.log('checked')}}
    />
))}
<Subheader text="Avatar with text three-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.avatarText.map((mail, i) => (
    <View>
        <List
            primaryText={mail.name}
            leftAvatar={
            <Avatar src={mail.avatar}/>
        }
            secondaryTextMoreLine={[
                {
                    text: mail.subject,
                    style: {
                        color: 'rgba(0,0,0,.87)'
                    },
                },
                {
                    text: mail.body
                }
            ]}
            lines={3}
            rightIcon={
                i < 2 ?
                <Icon name="star" size={24} color={primaryColor}/>
                :
                <Icon name="star-outline" size={24}/>
            }
            onRightIconClick={()=>{console.log('star')}}
            captionText={`${i * 6 + 1}min ago`}
        />
        {i < data.two.avatarText.length - 1 && <Divider inset={true}/>}
    </View>
))}

Constructor Summary

Public Constructor
public	constructor(props: object)

Public Constructors

public constructor(props: object) source

Params:

Name	Type	Attribute	Description
props	object
props.primaryText	string		The primary text of a List
props.secondaryText	string	optional	The secondary text of a List
props.caption	string	optional	The least distinguishing content.
props.leftIcon	Icon	optional	Left icon. Size should be 24.
props.rightIcon	Icon	optional	Right icon. Size should be 24.
props.leftAvatar	Avatar	optional	Left avatar. Size should be 40.
props.rightAvatar	Avatar	optional	Right avatar. Size should be 40.
props.lines	number	optional default: 1	You must specify this prop when secondary lines large than 1. Lines = Secondary lines + 1.
props.primaryColor	string	optional default: 'rgba(0,0,0,.87)'	The color of primary text.
props.onPress	function	optional	The primary action of a list. When user press the list will trigger this function.
props.onLeftIconClick	function	optional	The secondary action of a list. When user press the left icon will trigger this function.
props.onRightIconClick	function	optional	The secondary action of a list. When user press the right icon will trigger this function.
props.secondaryTextMoreLine	{text: string, style: object} []	optional	Pass an array when secondary text breaks some lines.