Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import { View, Text, StyleSheet, TextInput, TouchableOpacity, Image, ListView } from 'react-native';
- import { Actions } from 'react-native-router-flux';
- class Search extends Component {
- /**
- * represents state tracker
- * @field (string) text - from input field, used as parameter for search
- * @field (array) searchPages - result from search f'n, resource for render rows
- */
- state = {
- text: '',
- searchPages: [],
- searchFiles: [],
- searchMenus: [],
- buttonActive: 'content'
- }
- //napravi objekte za ispisivanje search-a
- createObject() {
- let rat = [];
- switch (this.state.buttonActive) {
- case 'content':
- rat = this.state.searchPages.map((element) => {
- return <Text key={element.pageId}>{element.title}</Text>
- });
- break;
- case 'video':
- rat = this.state.searchFiles.map((element) => {
- if (element.type == 'video')
- return <Text key={element.filename}>{element.pageId + ' ' + element.filename +'.'+ element.ext}</Text>
- });
- break;
- default:
- break;
- }
- return (
- <View>
- {rat}
- </View>
- )
- }
- searchDoTitlesMENU = (item, where) => {
- return new Promise((resolve, reject) => {
- let rslt = where.filter(x =>
- x.title.toLowerCase().includes(item.toLowerCase())
- )
- resolve(rslt);
- })
- }
- searchDoTitlesPromiseWrapper = (item, where) => {
- return new Promise((resolve, reject) => {
- let foundMenus = this.searchDoTitlesMENU(item, where);
- resolve(foundMenus);
- })
- }
- searchDoPages = (item, where) => {
- return new Promise((resolve, reject) => {
- let foundPages = where.filter(x => {
- if (x.text != null)
- return x.text.includes(item) || x.subtitle.includes(item) || x.title.includes(item);
- else if (x.text == null)
- return x.subtitle.includes(item) || x.title.includes(item);
- })
- resolve(foundPages)
- })
- }
- searchDoFiles = (where) => new Promise((resolve, reject) => {
- let foundFiles = [];
- if (where != null)
- where.forEach(e => {
- if (e.files != null)
- e.files.forEach(ei => foundFiles.push(ei))
- })
- resolve(foundFiles);
- })
- searchPromise = (input) => {
- return new Promise((resolve, reject) => {
- let idLang = 1 // engleski
- let pages = global.globalJson.pages;
- let menus = global.globalJson.menus[idLang].menu;
- let resultMenus = [];
- this.searchDoTitlesPromiseWrapper(input, menus)
- .then(r => { r.forEach(val => { resultMenus.push(val) }) })
- let resultPages = [];
- let resultFiles = [];
- this.searchDoPages(input, pages)
- .then(r => {
- r.forEach(val => resultPages.push(val));
- this.searchDoFiles(r)
- .then((rlt) => {
- resultFiles = rlt;
- })
- .then(() => resolve({
- foundMenus: resultMenus,
- foundPages: resultPages,
- foundFiles: resultFiles
- }))
- })
- })
- }
- callMe = (stuff) => {
- if (stuff.length >= 3)
- this.searchPromise(stuff).then(({ foundMenus, foundPages, foundFiles }) => {
- this.setState({
- searchPages: foundPages,
- searchFiles: foundFiles,
- searchMenus: foundMenus
- });
- // console.log(this.state.searchPages)
- });
- }
- render() {
- // if (this.state.text.length >= 3)
- // this.searchPromise(this.state.text).then((r) => this.setState({ searchPages: r.foundPages }));
- return (
- <View style={styles.searchCont} >
- <View>
- <View style={{ alignItems: 'center', padding: 20 }}>
- <Text style={{ color: 'black', fontSize: 20 }}>Choose the Category:</Text>
- </View>
- <View style={styles.ButtonsView}>
- <TouchableOpacity style={styles.ButtonContent} onPress={() => this.setState({ buttonActive: 'content' })}>
- <Image
- style={styles.ButtonIconStyle2}
- source={require('./ico/32/rnd.png')}
- />
- <Text style={styles.ButtonTextStyle}>CONTENT</Text>
- </TouchableOpacity >
- <TouchableOpacity style={styles.ButtonContent} onPress={() => this.setState({ buttonActive: 'video' })}>
- <Image
- style={styles.ButtonIconStyle2}
- source={require('./ico/play-button.png')}
- />
- <Text style={styles.ButtonTextStyle}>VIDEO</Text>
- </TouchableOpacity >
- </View>
- <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 30, }}>
- <TouchableOpacity>
- <Image
- style={{ width: 32, height: 32 }}
- source={require('./ico/32/search-2.png')}
- />
- </TouchableOpacity>
- <View style={{ padding: 10 }}>
- <TextInput
- placeholder="Search"
- style={styles.textInput}
- onChangeText={(text) => {
- this.setState({ text });
- this.callMe(text)
- }}
- value={this.state.text}
- />
- </View>
- <TouchableOpacity>
- <Image
- style={{ width: 32, height: 32 }}
- source={require('./ico/32/right.png')}
- />
- </TouchableOpacity>
- </View>
- <View>
- {this.createObject()}
- </View>
- </View>
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- searchCont: {
- position: 'absolute',
- backgroundColor: '#FFFFFF',
- height: 500,
- width: '100%',
- top: 50,
- zIndex: 3
- },
- textInput: {
- backgroundColor: 'white',
- width: 300,
- height: 50,
- borderBottomWidth: 2,
- borderColor: '#4169e1'
- },
- ButtonIconStyle2: {
- marginRight: 10,
- width: 32,
- height: 32
- },
- ButtonContent: {
- width: 200,
- height: 50,
- borderColor: '#4169e1',
- borderWidth: 3,
- borderRadius: 4,
- paddingHorizontal: 40,
- backgroundColor: '#4169e1',
- padding: 18,
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- marginRight: 20,
- marginLeft: 20
- },
- ButtonsView: {
- flexDirection: 'row',
- justifyContent: 'center',
- },
- ButtonTextStyle: {
- fontSize: 20,
- color: 'white'
- },
- ico: {
- height: 35,
- width: 35,
- margin: 10,
- },
- });
- export default Search;
Add Comment
Please, Sign In to add comment