import {createElement, Component} from 'weex-rx';
import { View, Text,Image,TouchableHighlight} from 'nuke-components';
import { Tabbar } from 'nuke';
import {mount} from 'nuke-mounter';
import {Button,Input,Icon,ListView,Modal,Iconfont} from 'nuke';
let listData = [];
for (var i = 0; i < 300; i++) {
listData.push({key: i,pic:'//img.alicdn.com/bao/uploaded/i1/TB1gdT4KVXXXXcpXFXXwu0bFXXX.png',text:'近三个月订单' + i});
}
let listData1 = [];
for (var i = 0; i < 300; i++) {
listData1.push({key: i,pic:'//img.alicdn.com/bao/uploaded/i1/TB1gdT4KVXXXXcpXFXXwu0bFXXX.png',text:'已完成订单' + i});
}
const styles = {
icon1:{fontFamily: 'iconfont1', fontSize: '36rem', color:'blue', alignItems:'center'},
tabContent: {flex: 1, alignItems: 'center'},
tabText: {color: 'white', margin: 50, },
container: {flex: 1 },
text: {color: 'white', margin: 50 },
customRender: {fontSize: '10rem', color: 'blue'},
view: {flex: 1 },
top: {height: 60, paddingLeft: 10, paddingRight: 10,marginBottom: 20, flexDirection: 'row'}
}
const app = {
activeBorder: {borderTopWidth: "5rem", borderTopStyle: "solid", borderTopColor: "#337838"},
inactiveBorder: {borderTopWidth: "5rem", borderTopStyle: "solid", borderTopColor: "#eeeeee"},
listHeader:{height:'300rem', display:'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center', },
listHeaderText:{fontSize: '60rem', color:'#333333', },
listHeaderSub:{fontSize: '30rem', color:'#888888', },
listContainer:{flex: 1, backgroundColor:'#f8f8f8', },
footer:{paddingTop: '50rem', paddingBottom: '50rem', backgroundColor: '#efefef', textAlign: 'center', },
link:{fontSize: '32rem', },
titleLink:{backgroundColor: '#ff4200', display: 'block', padding: '10rem', },
img:{width: '100rem', height: '100rem', backgroundColor: '#ff4200', },
cellItemIndex:{backgroundColor:'#ffffff', height: '130rem', display:'flex', paddingLeft:'20px', alignItems: 'center', flexDirection:'row', },
cellItemList:{backgroundColor:'#ffffff', height:'110rem', borderBottom:'1px solid #e8e8e8', display:'flex', alignItems:' center', flexDirection:'row', },
itemTextList:{flex:13, fontSize:'30rem', color:'#333333', },
itemIcon:{width:'60rem', height:'60rem', flex: 2, justifyContent:'center', },
cellTextView:{flex:13, display:'flex', },
itemMainTitle:{fontSize:'34rem', color:'#333333', marginBottom:'10px', },
itemSubTitle:{fontSize:'24rem', color:'#333333', },
itemArrow:{flex: 1, width:'18px', height:'18px', }
}
class Gray extends Component {
press() {
this.changeTo('m3')
}
onFocus(status) {
console.log('gray:', status)
}
render() {
return (
<View style={[styles.tabContent, {backgroundColor: '#888888'}]}>
<Text style={styles.text}>Blue Tab 大家好我是nv色的区域</Text>
<Button onPress={this.press.bind(this)} type="normal">切换为m3</Button>
</View>
)
}
}
class Sub extends Component {
press() {
this.props.change('m3');
}
render() {
return (
<View style={[{backgroundColor: '#eeeeee', height: '200rem'}]}>
<Text>子容器</Text>
<Button onPress={this.press.bind(this)} type="normal">切换为m3</Button>
</View>
)
}
}
class Green extends Component {
constructor(props) {
super(props);
console.log('green constructor');
}
press(param) {
this.changeTo(param)
}
getFocus(status) {
console.log('green:', status, this)
}
shouldComponentUpdate(nextProps, nextState) {
if(this.hasInit){
console.log('green: shouldComponentUpdate', this)
return true
}else{
return false
}
}
render() {
return (
<View style={[styles.tabContent, {backgroundColor: '#337838'}]}>
<Sub change={this.press.bind(this)}></Sub>
<Text style={styles.text}>Blue Tab 大家好我是nv色的区域</Text>
<Button onPress={this.press.bind(this, 'm4')} type="normal">切换为m4</Button>
</View>
)
}
}
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
notifCount: 3,
presses: 0,
data: listData,
data1: listData1,
stop: false,
activeKey: "m2",
test: 1
};
Iconfont({name:"iconfont1",url:"http://at.alicdn.com/t/font_1474198576_7440977.ttf"});
this.index = 0;
}
changeTab(tab) {
this.setState({activeKey: tab})
}
_renderContent(color, pageText, num) {
return (
<View style={[styles.tabContent, {backgroundColor: color}]}>
<Text style={styles.tabText}>{pageText}</Text>
<Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
</View>
);
}
handleLoadMore() {
var self = this;
setTimeout(function() {
self.index++;
if (self.index == 5) {
self.state.stop = true;
}
self.state.data.push({key: 'x',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'}, {key: 'loadmore 2',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'}, {key: 'loadmore 2',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'},{key: 'loadmore 2',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'}, {key: 'loadmore 2',pic:'//img.alicdn.com/bao/uploaded/i1/TB1O9eAKVXXXXaPaXXXwu0bFXXX.png',text:'xx订单'});
self.setState(self.state);
}, 1000);
}
linkTo(item,e) {
console.log(e);
}
renderItem (item, index){
return <TouchableHighlight style={app.cellItemList} onPress={this.linkTo.bind(this,item)}>
<Icon src={item.pic} style={app.itemIcon} />
<Text style={app.itemTextList}>{item.text}</Text>
<Icon style={app.itemArrow} src="//img.alicdn.com/tfs/TB1EU2rMVXXXXcpXXXXXXXXXXXX-64-64.png" />
</TouchableHighlight>;
}
renderHeader(){
return <View style={app.listHeader}><Text style={app.showTitleText}>list</Text></View>
}
renderFooter(){
return <View style={app.loading}><Text style={app.loadingText}>加载中...</Text></View>
}
onChange(status) {
console.log(status)
}
render1(status, key) {
return status ? <View><Text style={styles.icon1}>{"\ue608"}</Text><Text>focus</Text></View> :
<View><Text style={styles.icon1}>{"\ue608"}</Text><Text>blur</Text></View>
}
other() {
this.setState({test: 999})
}
render() {
let self = this;
const renderTpl = <Button type="normal">m2</Button>
return (
<View style={styles.container}>
<View style={{flexDirection: 'row'}, styles.top}>
<Text>Tabbar外部</Text>
<Button onPress={this.changeTab.bind(this, 'm2')} type="primary">m2</Button>
<Button onPress={this.changeTab.bind(this, 'm3')} type="normal">m3</Button>
<Button onPress={this.other.bind(this)} type="normal">other</Button>
</View>
<View style={styles.view}>
<Tabbar asContainer={false} iconBar={true} navTop={false} navStyle={{active: app.activeBorder, inactive: app.inactiveBorder}} activeKey={this.state.activeKey} onChange={this.onChange.bind(this)} customChange="changeTo" customFocus="getFocus">
<Tabbar.Item
render={this.render1.bind(this)}
title="m1"
tabKey="m1"
icon={{src: '//img.alicdn.com/tfs/TB1cCLYMVXXXXXHXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1MzYIMVXXXXXYXVXXXXXXXXXX-64-64.png'}}
>
<Green></Green>
</Tabbar.Item>
<Tabbar.Item
render={this.render1.bind(this)}
title="m2"
tabKey="m2"
icon={{src: '//img.alicdn.com/tfs/TB1cCLYMVXXXXXHXpXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1MzYIMVXXXXXYXVXXXXXXXXXX-64-64.png'}}
>
<Gray changeTab={this.changeTab.bind(this)}></Gray>
</Tabbar.Item>
<Tabbar.Item
title="m3"
tabKey="m3"
preventDefaultEvent={true}
icon={{src: '//img.alicdn.com/tfs/TB1aoTvMVXXXXaKaXXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1AZ_yMVXXXXX8aXXXXXXXXXXX-64-64.png'}}
badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
onPress={() => {
this.setState({
notifCount: this.state.notifCount + 1
});
}}>
{this._renderContent('#783E33', 'Red Tab 大家好我是红色的区域' + this.state.notifCount, this.state.notifCount)}
</Tabbar.Item>
<Tabbar.Item
renderAsOriginal
title="m4"
tabKey="m4"
>
<ListView
renderHeader={this.renderHeader.bind(self)}
renderFooter={this.renderFooter.bind(self)}
renderRow={self.renderItem.bind(self)}
dataSource={self.state.data}
style={app.listContainer}
onEndReached={self.handleLoadMore.bind(self)}
/>
</Tabbar.Item>
<Tabbar.Item
renderAsOriginal
title="m5"
tabKey="m5"
icon={{src: '//img.alicdn.com/tfs/TB1.rPuMVXXXXc1aXXXXXXXXXXX-64-64.png',selected:'//img.alicdn.com/tfs/TB1qW2uMVXXXXcUaXXXXXXXXXXX-64-64.png'}}
>
<ListView
renderHeader={this.renderHeader.bind(self)}
renderFooter={this.renderFooter.bind(self)}
renderRow={self.renderItem.bind(self)}
dataSource={self.state.data1}
style={app.listContainer}
onEndReached={self.handleLoadMore.bind(self)}
/>
</Tabbar.Item>
</Tabbar>
</View>
</View>
);
}
}
mount(<App/>, mountNode);
