diff --git a/src/components/editorHeader/view/editorHeaderStyles.js b/src/components/editorHeader/view/editorHeaderStyles.js index 4eb542924..a638348b4 100644 --- a/src/components/editorHeader/view/editorHeaderStyles.js +++ b/src/components/editorHeader/view/editorHeaderStyles.js @@ -60,4 +60,13 @@ export default EStyleSheet.create({ flexGrow: 1, fontWeight: '500', }, + textInput: { + color: '$iconColor', + alignSelf: 'center', + fontSize: 16, + marginLeft: 16, + flexGrow: 1, + fontWeight: '500', + width: '$deviceWidth / 1.4', + }, }); diff --git a/src/components/editorHeader/view/editorHeaderView.js b/src/components/editorHeader/view/editorHeaderView.js index 4415b538f..0c1c9dba2 100644 --- a/src/components/editorHeader/view/editorHeaderView.js +++ b/src/components/editorHeader/view/editorHeaderView.js @@ -1,5 +1,7 @@ import React, { Component, Fragment } from 'react'; -import { View, SafeAreaView, Text } from 'react-native'; +import { + View, SafeAreaView, Text, TextInput, +} from 'react-native'; import { TextButton } from '../..'; import { IconButton } from '../../iconButton'; // Constants @@ -19,7 +21,9 @@ class EditorHeaderView extends Component { constructor(props) { super(props); - this.state = {}; + this.state = { + isInputVisible: false, + }; } // Component Life Cycles @@ -36,6 +40,20 @@ class EditorHeaderView extends Component { _handleOnDropdownSelect = () => {}; + _handleSearchButtonPress = () => { + const { isInputVisible } = this.state; + + this.setState({ isInputVisible: !isInputVisible }); + }; + + _handleOnSearch = (value) => { + const { handleOnSearch } = this.props; + + handleOnSearch(value); + }; + + _handleOnInputChange = () => {}; + render() { const { handleOnPressBackButton, @@ -50,8 +68,9 @@ class EditorHeaderView extends Component { handleRightIconPress, isModalHeader, handleOnPressClose, + isHasSearch, } = this.props; - + const { isInputVisible } = this.state; return ( @@ -62,10 +81,11 @@ class EditorHeaderView extends Component { name={isModalHeader ? 'close' : 'md-arrow-back'} onPress={() => (isModalHeader ? handleOnPressClose() : handleOnPressBackButton())} /> - - - {quickTitle || title} - + {!isInputVisible && ( + + {quickTitle || title} + + )} {isHasDropdown && ( @@ -78,11 +98,30 @@ class EditorHeaderView extends Component { )} - {rightIconName && ( + {rightIconName + && !isHasSearch && ( + handleRightIconPress()} + iconStyle={styles.rightIcon} + name={rightIconName} + /> + )} + + {isInputVisible && ( + this._handleOnSearch(value)} + autoFocus + style={styles.textInput} + /> + )} + + {isHasSearch && ( handleRightIconPress()} + onPress={() => this._handleSearchButtonPress()} iconStyle={styles.rightIcon} name={rightIconName} /> diff --git a/src/screens/splash/screen/splashScreen.js b/src/screens/splash/screen/splashScreen.js index 02273e8d0..64e836f0c 100644 --- a/src/screens/splash/screen/splashScreen.js +++ b/src/screens/splash/screen/splashScreen.js @@ -1,7 +1,5 @@ import React, { Component } from 'react'; -import { Text } from 'react-native'; -import { Container } from 'native-base'; - +import { Text, Animated } from 'react-native'; // Components import { Logo } from '../../../components'; @@ -10,15 +8,28 @@ import styles from './splashStyles'; class SplashScreen extends Component { constructor(props) { super(props); + this.state = { + fadeAnim: new Animated.Value(0), + }; } + componentDidMount = () => { + const { fadeAnim } = this.state; + Animated.timing(fadeAnim, { + toValue: 1, + duration: 6000, + }).start(); + }; + render() { + const { fadeAnim } = this.state; + return ( - + eSteem mobile - + ); } } diff --git a/src/screens/voters/screen/votersScreen.js b/src/screens/voters/screen/votersScreen.js index 91a51e7c1..371a9b9ed 100644 --- a/src/screens/voters/screen/votersScreen.js +++ b/src/screens/voters/screen/votersScreen.js @@ -22,6 +22,7 @@ class VotersScreen extends Component { super(props); this.state = { data: props.votes, + filterResult: null, }; } @@ -42,11 +43,12 @@ class VotersScreen extends Component { return itemName.indexOf(_text) > -1; }); - this.setState({ data: newData }); + + this.setState({ filterResult: newData }); }; render() { - const { data } = this.state; + const { data, filterResult } = this.state; const headerTitle = `Voters Info (${data && data.length})`; return ( @@ -55,7 +57,7 @@ class VotersScreen extends Component { title={headerTitle} rightIconName="ios-search" isHasSearch - handleRightIconPress={this._handleSearch} + handleOnSearch={this._handleSearch} /> - + ); }