joywok-material-components/components/appbar/index.js

<h1 align="center"> Joywok Material Components </h1>

import React from 'react';
import ReactDOM from 'react-dom';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import InputBase from '@material-ui/core/InputBase';
import { fade } from '@material-ui/core/styles/colorManipulator';

import NotificationsIcon from '@material-ui/icons/Notifications';
import Badge from '@material-ui/core/Badge';
require('./style/index.css');
const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  grow: {
    marginRight:20,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: fade(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: fade(theme.palette.common.white, 0.25),
    },
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing.unit,
      width: 'auto',
    },
  },
  searchIcon: {
    width: theme.spacing.unit * 9,
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
    width: '100%',
  },
  inputInput: {
    paddingTop: theme.spacing.unit,
    paddingRight: theme.spacing.unit,
    paddingBottom: theme.spacing.unit,
    paddingLeft: theme.spacing.unit * 10,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: 120,
      '&:focus': {
        width: 300,
      },
    },
  },
  sectionDesktop: {
    display: 'none',
    [theme.breakpoints.up('md')]: {
      display: 'flex',
    },
  },
});

class JwAppBar extends React.Component{
  constructor(props) {
    super(props);
  }
  menuClick(e){
    this.props.menuClick && this.props.menuClick(e);
  }
  inputChange(e){
    this.props.searchChange && this.props.searchChange(e);
  }
  render(){
    let self = this;
    let data = this.props.data;
  	return (
  			<AppBar position="static" className={this.props.classes.root+" jw-app-bar "+(this.props.className && this.props.className.length!=0?this.props.className:'')}>
	        <Toolbar>
            {
              data['menubtn']?<IconButton color="inherit" aria-label="Menu" className={this.props.classes.menuButton +' jw-app-bar-menubar'} onClick={(e)=>this.menuClick(e)}>
                <MenuIcon/>
              </IconButton>:''
            }
            {
              typeof(data['title'])!='undefined'?<Typography variant="h6" color="inherit" className={this.props.classes.grow+' ellipsis jw-app-bar-title'}>
                {data['title']}
              </Typography>:''
            }
	          
            {
              data['search']?<div className={this.props.classes.search+' jw-app-bar-search'}>
                <div className={this.props.classes.searchIcon}>
                  <SearchIcon />
                </div>
                <InputBase
                  placeholder="Search…"
                  classes={{
                    root: this.props.classes.inputRoot,
                    input: this.props.classes.inputInput,
                  }}
                  className="jw-app-bar-search-input"
                  onChange={(e)=>self.inputChange(e)}
                />
              </div>:''
            }
            <div className={this.props.classes.root}/>
            {
              data.rightmenu?<div className={this.props.classes.sectionDesktop+' jw-app-bar-right-container'}>{data.rightmenu}</div>:''
            }
	        </Toolbar>
	      </AppBar>
      )
  }
}

export default withStyles(styles)(JwAppBar);