weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
362 lines (345 loc) • 10.5 kB
JSX
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import RefreshControl from 'nuke-refresh-control';
import Touchable from 'nuke-touchable';
import Icon from 'nuke-icon';
import Image from 'nuke-image';
import ListView from 'nuke-list-view';
import Page from 'nuke-page';
class ListViewDemo extends Component {
constructor() {
super();
this.state = {
arr1: [
{ key: 'a0', text: '所有类别' },
{ key: 'a1', text: '所有类别', arrow: true },
{ key: 'a2', text: '所有类别', arrow: true, sub: '请选择' },
],
arr2: [
{ key: 'b0', text: '所有类别', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
{ key: 'b1', text: '所有类别', arrow: true, icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
{ key: 'b2', text: '所有类别', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
],
arr3: [
{ key: 'c0', text: '所有类别', sub: '次级文本' },
{ key: 'c1', text: '所有类别', arrow: true, sub: '次级文本' },
{ key: 'c2', text: '所有类别', arrow: true, sub: '次级文本' },
],
arr4: [
{ key: 'd0', text: '所有类别', sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
{ key: 'd1', text: '所有类别', arrow: true, sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
{ key: 'd2', text: '所有类别', arrow: true, sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png' },
],
arr5: [
{ key: 'e0', text: '所有类别', sub: '次级文本', desc: '内容内容内容' },
{ key: 'e1', text: '所有类别', sub: '次级文本', desc: '内容内容内容' },
{ key: 'e2', text: '所有类别', sub: '次级文本', desc: '内容内容内容' },
],
arr6: [
{ key: 'f0', text: '所有类别', sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png', desc: '内容内容内容' },
{ key: 'f1', text: '所有类别', sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png', desc: '内容内容内容' },
{ key: 'f2', text: '所有类别', sub: '次级文本', icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png', desc: '内容内容内容' },
],
};
}
linkTo(item, e) {
console.log(e);
}
componentDidMount() {
}
renderInner(length, item, index) {
const wrapStyle = index === length - 1 ? [styles.cellItem, styles.cellItemLast] : styles.cellInner;
return (
<Touchable style={wrapStyle} onPress={this.linkTo.bind(this, item)}>
{
item.icon ? <Image style={styles.icon} source={{ uri: item.icon }} /> : null
}
<Text style={styles.itemTextList}>{item.text}</Text>
{
item.sub ? <Text style={styles.sub}>{item.sub}</Text> : null
}
{
item.arrow ? <Icon name="arrowRight" style={styles.arrow} /> : null
}
</Touchable>
);
}
renderItem(length, item, index) {
if (index == length - 1) {
return this.renderInner(length, item, index);
}
return (<View style={styles.cellItem}>
{this.renderInner(length, item, index)}
</View>
);
}
renderItemTwo(length, item, index) {
const wrapStyle = index === length - 1 ? [styles.cellItemTwo, styles.cellItemTwoLast] : styles.cellItemTwo;
return (
<View style={wrapStyle}>
<Touchable style={[styles.cellInnerTwo, index === length - 1 ? styles.cellInnerTwoLast : {}, item.icon ? styles.hasIcon : {}]} onPress={this.linkTo.bind(this, item)}>
{
item.icon ? <Image style={styles.iconTwo} source={{ uri: item.icon }} /> : null
}
<Text style={styles.itemTextTwo}>{item.text}</Text>
{
item.sub ? <Text style={styles.subTwo}>{item.sub}</Text> : null
}
{
item.arrow ? <Icon name="arrowRight" style={styles.arrowTwo} /> : null
}
{
index === length - 1 ? <View style={styles.line} /> : null
}
</Touchable>
</View>
);
}
renderItemThree(length, item, index) {
const wrapStyle = index === length - 1 ? [styles.cellItemThree, styles.cellItemThreeLast] : styles.cellItemThree;
return (
<View style={wrapStyle}>
<Touchable style={[styles.cellInnerThree, index === length - 1 ? styles.cellInnerThreeLast : {}, item.icon ? styles.hasIcon : {}]} onPress={this.linkTo.bind(this, item)}>
{
item.icon ? <Image style={styles.iconThree} source={{ uri: item.icon }} /> : null
}
<Text style={styles.itemTextThree}>{item.text}</Text>
{
item.sub ? <Text style={styles.subThree}>{item.sub}</Text> : null
}
{
item.desc ? <Text style={styles.descThree}>{item.desc}</Text> : null
}
{
item.arrow ? <Icon name="arrowRight" style={styles.arrowThree} /> : null
}
{
index === length - 1 ? <View style={styles.line} /> : null
}
</Touchable>
</View>
);
}
renderFooter=() => (this.state.showLoading ?
<View style={[styles.loading]}><Text style={styles.loadingText}>加载中...</Text></View>
: null)
render() {
return (
<Page title="ListView">
<Page.Intro main="List/SingleLine" sub="normal" />
<ListView
renderRow={this.renderItem.bind(this, this.state.arr1.length)}
dataSource={this.state.arr1}
style={styles.list1}
/>
<ListView
renderRow={this.renderItem.bind(this, this.state.arr2.length)}
dataSource={this.state.arr2}
style={styles.list2}
/>
<Page.Intro main="List/Two Lines" sub="normal" />
<ListView
renderRow={this.renderItemTwo.bind(this, this.state.arr3.length)}
dataSource={this.state.arr3}
style={styles.list3}
/>
<ListView
renderRow={this.renderItemTwo.bind(this, this.state.arr4.length)}
dataSource={this.state.arr4}
style={styles.list4}
/>
<Page.Intro main="List/Three Lines" sub="normal" />
<ListView
renderRow={this.renderItemThree.bind(this, this.state.arr5.length)}
dataSource={this.state.arr5}
style={styles.list5}
/>
<ListView
renderRow={this.renderItemThree.bind(this, this.state.arr6.length)}
dataSource={this.state.arr6}
style={styles.list6}
/>
</Page>
);
}
}
const styles = {
list1: {
height: `${96 * 3 + 2}rem`,
marginTop: '35rem',
},
cellItem: {
backgroundColor: '#ffffff',
'backgroundColor:active': '#f2f3f7',
height: '96rem',
paddingLeft: '30rem',
},
cellInner: {
flex: 1,
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
alignItems: 'center',
flexDirection: 'row',
},
cellItemLast: {
backgroundColor: '#ffffff',
height: '96rem',
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
paddingLeft: '30rem',
alignItems: 'center',
flexDirection: 'row',
},
icon: {
color: '#c7c7cc',
width: '72rem',
height: '72rem',
marginRight: '26rem',
// position:'absolute',
// top:'34rem',
// right:'24rem'
},
itemTextList: {
fontSize: '32rem',
color: '#5F646E',
},
arrow: {
color: '#c7c7cc',
position: 'absolute',
top: '34rem',
right: '24rem',
},
sub: {
color: '#c7c7cc',
position: 'absolute',
top: '26rem',
right: '64rem',
fontSize: '28rem',
},
list2: {
height: `${96 * 3 + 2}rem`,
marginTop: '40rem',
},
cellItemTwo: {
backgroundColor: '#ffffff',
'backgroundColor:active': '#f2f3f7',
paddingLeft: '30rem',
},
cellInnerTwo: {
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
height: '136rem',
},
cellInnerTwoLast: {
borderBottomWidth: '0rem',
},
cellItemTwoLast: {
backgroundColor: '#ffffff',
height: '134rem',
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
},
iconTwo: {
color: '#c7c7cc',
width: '100rem',
height: '100rem',
marginRight: '26rem',
position: 'absolute',
top: '18rem',
left: '0rem',
},
arrowTwo: {
color: '#c7c7cc',
position: 'absolute',
top: '54rem',
right: '24rem',
},
subTwo: {
color: '#c7c7cc',
fontSize: '28rem',
marginTop: '10rem',
},
itemTextTwo: {
fontSize: '32rem',
marginTop: '20rem',
color: '#5F646E',
},
list3: {
height: `${136 * 3}rem`,
marginTop: '40rem',
},
list4: {
height: `${136 * 3}rem`,
marginTop: '40rem',
},
hasIcon: {
paddingLeft: '124rem',
},
cellItemThree: {
backgroundColor: '#ffffff',
paddingLeft: '30rem',
'backgroundColor:active': '#f2f3f7',
},
cellInnerThree: {
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
height: '152rem',
},
cellInnerThreeLast: {
borderBottomWidth: '0rem',
},
cellItemThreeLast: {
backgroundColor: '#ffffff',
height: '150rem',
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
},
iconThree: {
color: '#c7c7cc',
width: '100rem',
height: '100rem',
marginRight: '26rem',
position: 'absolute',
top: '26rem',
left: '0rem',
},
arrowThree: {
color: '#c7c7cc',
position: 'absolute',
top: '54rem',
right: '24rem',
},
subThree: {
color: '#c7c7cc',
fontSize: '28rem',
// marginTop:'4rem'
},
descThree: {
color: '#c7c7cc',
fontSize: '28rem',
// marginTop:'4rem'
},
itemTextThree: {
fontSize: '32rem',
marginTop: '16rem',
color: '#5F646E',
},
list5: {
height: `${152 * 3}rem`,
marginTop: '40rem',
},
list6: {
height: `${152 * 3}rem`,
marginTop: '40rem',
marginBottom: '40rem',
},
};
render(<ListViewDemo />);