joywok-material-components/components/bottom-nav/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 BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';

const styles = theme => ({
  root: {
    width: 500,
  },
});
class JwBottomNav extends React.Component{
	constructor(props) {
    super(props);
    this.state = {value:props.data['value']};
  }
  handleChange = (event, value) => {
  	let {options} = this.props.data;
  	this.setState({
  		value:value
  	})
    this.props.onChange && this.props.onChange(value);
  };
	render(){
		const { classes } = this.props;
		return (
				<div className={"jw-bottom-nav "+(this.props.className && this.props.className.length!=0?this.props.className:'')}>
					<BottomNavigation
		        value={this.state.value}
		        onChange={this.handleChange}
		        showLabels
		        className={classes.root}
		      >
		      	{
		      		_.map(this.props.data.options,function(i){
		      			let data = {
		      				label:i['label'],
		      				value:i['value']
		      			};
		      			if(typeof(i['icon'])!='undefined'){
		      				data['icon'] = i['icon'];
		      			}
		      			return <BottomNavigationAction {...data}/>
		      		})
		      	}
		      </BottomNavigation>
				</div>
			)
	}
}

export default withStyles(styles)(JwBottomNav);