Skip to content

Filter contacts with scrollwheel or text input #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tsyirvo wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Filter contacts with scrollwheel or text input #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/view/contact/ContactReducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const initialState = {
dataSource: dsBim.cloneWithRows(actions.concat(defaultContacts)),
list : actions.concat(defaultContacts)
},
users: defaultContacts,
loading : false
};

Expand Down
255 changes: 146 additions & 109 deletions src/view/contact/ContactView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
'use strict';

import React, { Component } from 'react';
import { Text, View, ScrollView, ListView, PanResponder, Image, TouchableOpacity, TouchableHighlight, Animated, StyleSheet, Dimensions } from 'react-native';
import { Text, View, ScrollView, ListView, PanResponder, Image, TouchableOpacity, TouchableHighlight, Animated, StyleSheet, Dimensions, TextInput } from 'react-native';
import { Actions } from 'react-native-router-flux';
import AppGuideline from '../../app/AppGuideline';
import AppAsset from '../../app/AppAsset';
Expand All @@ -15,35 +14,33 @@ import {loadContacts} from './ContactAction';


const {width, height} = Dimensions.get('window');

const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
const letters = ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

class ContactView extends Component {

constructor(props) {
super(props);

this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

this.items = [];
this.letters = [];

this.spacerWidth = width / 2 - 35/2;

this.scrollPos = null;
this.letterNb = null;

this.state = {

animButton : new Animated.Value(0.00001)

animButton : new Animated.Value(0.00001),
users: this.props.contact.users,
filteredUsers: this.props.contact.users
};

for(var i in letters){
this.letters[i] = this.letters[letters[i-1]] ;
}
}


componentDidMount(){

//this.headerScroll = this.refs.header.getScrollResponder();
this.listViewScroll = this.refs.listView.getScrollResponder();

Expand All @@ -58,132 +55,174 @@ class ContactView extends Component {
}).start();
}


save(item){
if(this.items[item.props.rowData.name[0]] == undefined || this.items[item.props.rowData.name[0]].layout.y > item.layout.y){
this.items[item.props.rowData.name[0]] = item;
}
}

saveLetter(item){
this.letters[item.props.children] = item;

}

onScroll(event){

this.scrollPos = event.nativeEvent.contentOffset.x;

}

onLetterPress(index){

let letter = letters[index];

let pos = this.letters[letter].layout.x - this.spacerWidth ;
this.headerScroll.scrollTo({
y: 0,
x: pos,
animated : true
});


this.scrollToLetter(index);
}


scrollToLetter(index){

if(letters[index] != undefined){
let letter = letters[index];

if(this.items[letter] != undefined){
this.listViewScroll.scrollTo({
y: this.items[letter].layout.y,
x: 0,
animated : true
});
}else{
this.scrollToLetter(index-1);
}

this.letterNb = event.nativeEvent.contentOffset.x / 35;

let filteredUsers = [];

if (letters[this.letterNb] !== undefined) {
this.state.users.map((user) => {
if (user.givenName.charAt(0) === letters[this.letterNb]) {
filteredUsers.push(user)
} else if (letters[this.letterNb] === '') {
filteredUsers = this.state.users;
}
})

console.log(filteredUsers);

this.setState({
...this.state,
selectedLetter: letters[this.letterNb],
filteredUsers
});
}
}

// onLetterPress(index){
// let letter = letters[index];
//
// let pos = this.letters[letter].layout.x - this.spacerWidth ;
// this.headerScroll.scrollTo({
// y: 0,
// x: pos,
// animated : true
// });
//
// this.scrollToLetter(index);
// }

// scrollToLetter(index){
// if(letters[index] != undefined){
// let letter = letters[index];
//
// if (this.items[letter] != undefined) {
// this.listViewScroll.scrollTo({
// y: this.items[letter].layout.y,
// x: 0,
// animated : true
// });
// } else {
// this.scrollToLetter(index-1);
// }
// }
// }

openContact(contact) {
Actions.contactDetails({contact});
}

save(item) {
if (this.items[item.props.rowData.name[0]] == undefined || this.items[item.props.rowData.name[0]].layout.y > item.layout.y) {
this.items[item.props.rowData.name[0]] = item;
}
}

renderRow(contact){

if(contact.type !== undefined && contact.type =='action' ){
renderRow(contact) {
if (contact.type !== undefined && contact.type =='action' ) {
return null;
}

return (<ContactItem
onPress={this.openContact.bind(this)}
rowData={contact}
save={this.save.bind(this)}
rowData={contact}
/>);

return (
<ContactItem
onPress={this.openContact.bind(this)}
rowData={contact}
save={this.save.bind(this)}
rowData={contact}
/>
);
}

searchContacts(value) {
let filteredUsers = [];

this.state.users.map((user) => {
let name = `${user.givenName} ${user.familyName}`
if (name.indexOf(value) > -1) {
filteredUsers.push(user);
}
});

this.setState({
...this.state,
filteredUsers
});
}

render() {
const dataSource = this.ds.cloneWithRows(this.state.filteredUsers);

console.log(dataSource);
console.log(this.state.users);

return (
<View style={style.container}>
<Title style={{color: AppGuideline.colors.deepblue, height: 80}} >CONTACTS</Title>
{ false && (
<View style={{ height: 80, paddingTop:20, backgroundColor: AppGuideline.colors.lightviolet }}>
<View style={{ position: 'absolute', backgroundColor: '#998BB8', left: width / 2 - 35/2, top: 22.5, width:35, height: 35 , borderRadius: 20}}></View>
<ScrollView horizontal={true}
scrollEventThrottle={200}
onScroll={this.onScroll.bind(this)}
ref='header'
>
<View style={{ width: width / 2 - 35/2, backgroundColor: 'transparent'}} />
{letters.map((letter, index)=> {
return ( <LetterItem key={index} onPress={()=>{ this.onLetterPress(index) }} save={this.saveLetter.bind(this)}>{letter}</LetterItem>)
})}
<View style={{ width : width / 2 - 35/2, backgroundColor: 'transparent'}} />
</ScrollView>

<Title style={{color: AppGuideline.colors.deepblue, height: 80}} >CONTACTS</Title>
{
true && (
<View style={{ height: 80, paddingTop:20, backgroundColor: AppGuideline.colors.lightviolet }}>
<View style={{ position: 'absolute', backgroundColor: '#998BB8', left: width / 2 - 35/2, top: 22.5, width:35, height: 35 , borderRadius: 20}}></View>
<ScrollView
style={{ flex: 1 }}
horizontal={true}
scrollEventThrottle={200}
automaticallyAdjustInsets={false}
decelerationRate={0}
snapToInterval={35}
snapToAlignment='start'
showsHorizontalScrollIndicator={false}
onScroll={this.onScroll.bind(this)}
ref='header'
>
<View style={{ width: width / 2 - 35/2, backgroundColor: 'transparent'}} />
{
letters.map((letter, index)=> {
return (<LetterItem key={index} onPress={()=>{ console.log(index) }} save={this.saveLetter.bind(this)}>{letter}</LetterItem>)
})
}
<View style={{ width : width / 2 - 35/2, backgroundColor: 'transparent'}} />
</ScrollView>
</View>
)
}
{
false &&
<View style={{ flexDirection: 'row', height: 80, paddingTop:20, backgroundColor: AppGuideline.colors.lightviolet }}>
<TextInput
style={{height: 40, width: width /1.5, borderColor: '#FFF', borderWidth: 1}}
autoCapitalize='words'
onChangeText={(text) => this.searchContacts(text)}
/>
<View style={{ flex: 1, marginTop: 13, alignItems: 'center'}}>
<Text style={{ color: '#fff' }}>ANNULER</Text>
</View>
</View>
}
<View style={{flex:1}}>
{this.props.contact.list.length === 0 && this.props.contact.loading === true && <Text>Chargement...</Text>}
<ListView
ref='listView'
dataSource={dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
<View style={style.addIcon}>
<TouchableOpacity onPress={() => {
// Actions.addContact();
}}>
<Animated.Image source={AppAsset.add} style={{ transform: [ {scale :this.state.animButton }] }} />
</TouchableOpacity>
</View>
)}
<View style={{flex:1}}>

{this.props.contact.list.length== 0 && this.props.contact.loading == true && <Text>Chargement...</Text>}

<ListView
ref='listView'
dataSource={this.props.contact.bim.dataSource}
renderRow={this.renderRow.bind(this)}
/>

</View>

<TouchableOpacity style={style.transferButton} >
</TouchableOpacity>
<View style={style.addIcon}>
<TouchableOpacity >
<Animated.Image source={AppAsset.add} style={{ transform: [ {scale :this.state.animButton }] }} />
</TouchableOpacity>
</View>



</View>
);
);
}

}



const style = StyleSheet.create({
container: {
backgroundColor: "white",
Expand All @@ -196,8 +235,6 @@ const style = StyleSheet.create({
}
});



function mapStateToProps(state) {
return {
contact: state.contact
Expand Down
16 changes: 7 additions & 9 deletions src/view/contact/item/LetterItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import AppGuideline from '../../../app/AppGuideline';
import asset from '../../../app/AppAsset';

const styles = StyleSheet.create({

button: {
paddingTop: 10,
width:35,
Expand All @@ -14,7 +13,6 @@ const styles = StyleSheet.create({
});

export default class LetterItem extends React.Component {

constructor(props){
super(props)
this.state = {
Expand All @@ -30,13 +28,13 @@ export default class LetterItem extends React.Component {
render() {
return (
<TouchableOpacity
onLayout={this.save.bind(this)}
style={styles.button}
onPress={() => {
this.props.onPress(this.props.children)
}} >
<Text style={{textAlign: 'center', color: this.state.color,
fontSize: 18 }}>{this.props.children}</Text>
onLayout={this.save.bind(this)}
style={styles.button}
onPress={() => {
this.props.onPress(this.props.children)
}}
>
<Text style={{textAlign: 'center', color: this.state.color, fontSize: 18 }}>{this.props.children}</Text>
</TouchableOpacity>
);
}
Expand Down