essence-appbar

Essence AppBar - AppBar component

How to use

import ClassNames from 'classnames';
import AppBar from 'essence-appbar/src/appbar.jsx';
import Input from 'essence-input/src/input.jsx';
import Menu from 'essence-menu/src/menu.jsx';
import Toast from 'essence-toast/src/toast.jsx';

class AppBarTest extends React.Component {
	constructor(props) {
        super(props);
        this.state = {
        	search: 'close',
        	toast: false,
            classes: ClassNames(
                this.props.classes,
                this.props.className
            )
        };
    }

    renderSearch() {
    	let classes = ClassNames('e-no-margin e-text-white e-left', this.state.search);
    	return (
			<Input
				type={'search'}
				name='search-input'
				placeholder='Search...'
				classes={classes}/>
		);
	}

    renderToast() {
    	if (this.state.toast) {
    		return (
    			<Toast classes={'e-text-green-500'} visible={true} delay={5000}>
					Adaugat la Favorite
				</Toast>
			);
    	}

    	return;
    }

    toggleSearch() {
    	this.setState({
    		search: (this.state.search === 'close' ? 'open' : 'close')
    	});
    }

    toggleToast() {
    	var toastStatus = !this.state.toast;

    	this.setState({
    		toast: toastStatus
    	});
    }

    render() {
        return(
			<AppBar classes={'e-background-cyan-400'}>
				<Button className={'flat e-background-cyan-400 e-text-white e-left'} type={'primary'} icon={'navigation-menu'}/>

				<Text className={'e-text-white'}>Essence - test</Text>

				<Menu type={'cover'} icon={'navigation-more-vert'} classes={'e-right e-text-white e-background-cyan-400'}>
					<Text classes={'e-text-black'}>Profile</Text>
					<Text classes={'e-text-black'}>Settings</Text>
					<Text classes={'e-text-black'}>Logout</Text>
				</Menu>
				
				<Block className={'e-right'}>
					{this.renderToast()}
					<Button onClick={this.toggleToast.bind(this)} className={'flat e-background-cyan-400 e-text-white e-right'} type={'primary'} icon={'action-favorite'}/>
				</Block>
				
				<Block className={'e-right search-block'}>
					{this.renderSearch()}
					<Button onClick={this.toggleSearch.bind(this)} className={'flat e-background-cyan-400 e-text-white e-right'} type={'primary'} icon={'action-search'}/>
				</Block>
			</AppBar>
        );
    }
};