DashboardTemplate.js source code

DashboardTemplate.js

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router';
import {Layout, Breadcrumb, Dropdown, Menu, Icon, Row, Col, message} from 'antd';
const {Content} = Layout;

export default class DashboardTemplate extends React.Component {
    
    static contextTypes = {
        router: PropTypes.object.isRequired
    };
    
    constructor(props) {
        super(props);
    }
    
    logout() {
        /*...*/
    }
    
    handleClick(e) {
        switch(e.key) {
            case 'logout':
                this.logout();
                break;
        }
    }
    
    itemRender(route, params, routes, paths) {
        const last = routes.indexOf(route) === routes.length - 1;
        const name = this.getBreadcrumbName(route, params);
        
        // Return the item, ignore the first path, this contains the basepath
        return last ? <span>{ name }</span> : <Link to={paths.join('/')}>{ name }</Link>;
    }
    
    getBreadcrumbName(route, params) {
        if(!route.breadcrumbName) {
            return null;
        }
        const paramsKeys = Object.keys(params).join('|');
        const name = route.breadcrumbName.replace(
            new RegExp(`:(${paramsKeys})`, 'g'),
            (replacement, key) => params[key] || replacement
        );
        return name;
    }
    
    render() {
    
        return (
            <Row id="content">
                <Col md={0} lg={1} />
                <Col md={24} lg={22}>
                    <Content style={{padding: '0'}}>
                    
                    
                        <Row style={{margin: '12px'}}>
                            <Col span={12}>
                                <Breadcrumb
                                    routes={this.props.routes}
                                    params={this.props.params}
                                    itemRender={this.itemRender.bind(this)}
                                />
                            </Col>
                            <Col span={12} style={{textAlign: 'right'}}>
                                <Dropdown
                                    overlay={
                                        <Menu onClick={this.handleClick.bind(this)}>
                                            <Menu.Item key="logout"><Icon type="lock"/> Log uit</Menu.Item>
                                            <Menu.Item key="2"><Icon type="solution"/> Profiel</Menu.Item>
                                        </Menu>
                                    }
                                    trigger={['click']}>
                                    <a className="ant-dropdown-link" href="#"
                                       style={{fontSize: '1.1em', minWidth: '100px', maxWidth: '150px', textAlign: 'right'}}>
                                        <Icon type="user"/> name <Icon type="down"/>
                                    </a>
                                </Dropdown>
                            </Col>
                        </Row>
                    
                        <div id="page-content">
                        
                            {this.props.children}
                            
                            <div className="clearfix"/>
                        </div>
                
                    </Content>
                </Col>
                <Col md={0} lg={1} />
             </Row>
        )
    }
    
}