|
...
|
...
|
@@ -2,6 +2,7 @@ |
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import ReactNative from 'react-native';
|
|
|
|
import Immutable, {Map} from 'immutable';
|
|
|
|
|
|
|
|
const {
|
|
|
|
View,
|
|
...
|
...
|
@@ -10,10 +11,11 @@ const { |
|
|
|
TouchableOpacity,
|
|
|
|
Dimensions,
|
|
|
|
StyleSheet,
|
|
|
|
Platform,
|
|
|
|
} = ReactNative;
|
|
|
|
|
|
|
|
|
|
|
|
export default class ChannelFliter extends React.Component {
|
|
|
|
export default class ChannelSelector extends React.Component {
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super (props);
|
|
...
|
...
|
@@ -22,46 +24,65 @@ export default class ChannelFliter extends React.Component { |
|
|
|
this._renderSeparator = this._renderSeparator.bind(this);
|
|
|
|
|
|
|
|
this.dataSource = new ListView.DataSource({
|
|
|
|
rowHasChanged: (r1, r2) => r1.key != r2.key,
|
|
|
|
rowHasChanged: (r1, r2) => r1.id != r2.id,
|
|
|
|
});
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
filters: [
|
|
|
|
{
|
|
|
|
name: 'Boy',
|
|
|
|
isSelect: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Girl',
|
|
|
|
isSelect: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Kid',
|
|
|
|
isSelect: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Lifestyle',
|
|
|
|
isSelect: false,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
selectedIndex: this.props.selectID,
|
|
|
|
};
|
|
|
|
this.channels = [
|
|
|
|
{
|
|
|
|
name: 'Boy',
|
|
|
|
value: 'boy',
|
|
|
|
id: 1,
|
|
|
|
isSelect: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Girl',
|
|
|
|
value: 'girl',
|
|
|
|
id: 2,
|
|
|
|
isSelect: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Kids',
|
|
|
|
value: 'kids',
|
|
|
|
id: 3,
|
|
|
|
isSelect: false,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Lifestyle',
|
|
|
|
value: 'lifestyle',
|
|
|
|
id: 4,
|
|
|
|
isSelect: false,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
|
|
|
shouldComponentUpdate(nextProps){
|
|
|
|
if ((nextProps.selectedChannelId == this.props.selectedChannelId)
|
|
|
|
&& (nextProps.selectedChannelValue == this.props.selectedChannelValue)) {
|
|
|
|
return false;
|
|
|
|
} else {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderRow(rowData, sectionID, rowID) {
|
|
|
|
let colorStyle = rowID == this.props.selectID-1 ? {color: '#444444',fontFamily: 'HelveticaNeue',fontSize: 17} : {color: '#b0b0b0',fontFamily: 'HelveticaNeue-Bold',fontSize: 14,};
|
|
|
|
let isRowSelected = false;
|
|
|
|
if (this.props.selectedChannelId >= 1) {
|
|
|
|
isRowSelected = (rowID == this.props.selectedChannelId - 1);
|
|
|
|
} else {
|
|
|
|
isRowSelected = (rowData.value == this.props.selectedChannelValue);
|
|
|
|
}
|
|
|
|
|
|
|
|
let colorStyle = isRowSelected ? {color: '#444444', fontFamily: 'HelveticaNeue', fontSize: 17} : {color: '#b0b0b0', fontFamily: 'HelveticaNeue-Bold', fontSize: 14,};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<TouchableOpacity activeOpacity={1} onPress={() => {
|
|
|
|
let filters = this.state.filters;
|
|
|
|
let filter = this.state.filters[rowID];
|
|
|
|
if (this.props.selectID-1 == rowID) {
|
|
|
|
if (isRowSelected) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
filter.isSelect = !(filter.isSelect-1);
|
|
|
|
filters[rowID] = filter;
|
|
|
|
this.props.onChannelPressFliter && this.props.onChannelPressFliter(Number(rowID)+1);
|
|
|
|
let channel = this.channels[rowID];
|
|
|
|
|
|
|
|
this.props.onSelectChannel && this.props.onSelectChannel(channel);
|
|
|
|
}}>
|
|
|
|
<View key={'row' + rowID} style={styles.rowContainer}>
|
|
|
|
<Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
|
|
...
|
...
|
@@ -86,7 +107,7 @@ export default class ChannelFliter extends React.Component { |
|
|
|
<ListView
|
|
|
|
contentContainerStyle={[styles.contentContainer, style]}
|
|
|
|
enableEmptySections={true}
|
|
|
|
dataSource={this.dataSource.cloneWithRows(this.state.filters)}
|
|
|
|
dataSource={this.dataSource.cloneWithRows(this.channels)}
|
|
|
|
renderRow={this._renderRow}
|
|
|
|
renderSeparator={this._renderSeparator}
|
|
|
|
scrollEnabled={false}
|
|
...
|
...
|
@@ -99,11 +120,13 @@ export default class ChannelFliter extends React.Component { |
|
|
|
|
|
|
|
let {width, height} = Dimensions.get('window');
|
|
|
|
|
|
|
|
let viewHeight = (Platform.OS === 'ios') ? 44 : 50;
|
|
|
|
|
|
|
|
let styles = StyleSheet.create({
|
|
|
|
container: {
|
|
|
|
marginLeft: -1,
|
|
|
|
width: width + 2,
|
|
|
|
height: 44,
|
|
|
|
height: viewHeight,
|
|
|
|
borderTopColor: 'transparent',
|
|
|
|
borderBottomColor: '#e5e5e5',
|
|
|
|
borderWidth: 0.5,
|
|
...
|
...
|
@@ -117,7 +140,7 @@ let styles = StyleSheet.create({ |
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
width: Math.ceil(width / 4),
|
|
|
|
height: 44,
|
|
|
|
height: viewHeight,
|
|
|
|
backgroundColor:'white',
|
|
|
|
},
|
|
|
|
name: {
|
|
...
|
...
|
@@ -125,8 +148,8 @@ let styles = StyleSheet.create({ |
|
|
|
},
|
|
|
|
separator: {
|
|
|
|
width: 0.5,
|
|
|
|
top: 44 / 4,
|
|
|
|
height: 44 / 2,
|
|
|
|
top: viewHeight / 4,
|
|
|
|
height: viewHeight / 2,
|
|
|
|
backgroundColor: '#e5e5e5',
|
|
|
|
},
|
|
|
|
}); |
...
|
...
|
|
