AppBar AppBar.js

0% Statements 0/17
0% Branches 0/6
100% Functions 0/0
0% Lines 0/16
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { Component } from 'preact';
import PropTypes from 'prop-types';
import defaultTheme from '../theme';
 
import { StyledHeader, StyledSection, StyledLogo } from './styles';
import { Link } from '../index';
 
/**
 * A toolbar that’s used for branding, navigation, search, and actions.
 *
 * @example ./../../docs/components/AppBar.md
 */
class AppBar extends Component {
    static propTypes = {
        /**
         * title
         */
        title: PropTypes.string,
 
        /**
         * title style
         */
        titleStyle: PropTypes.object,
 
        /**
         * logo image src
         */
        logo: PropTypes.string,
 
        /**
         * logo style
         */
        logoStyle: PropTypes.object,
 
        /**
         * components on the left side of appbar
         */
        leftSection: PropTypes.element,
 
        /**
         * components on the right side of appbar
         */
        rightSection: PropTypes.element,
    };
 
    static defaultProps = {
        title: '',
        titleStyle: {},
        logo: null,
        logoStyle: {},
        leftSection: '',
        rightSection: '',
    };
 
    static contextTypes = {
        theme: PropTypes.object,
    };
 
    renderLogo() {
        const { logo = '', logoStyle = {} } = this.props;
 
        if (logo) {
            return <StyledLogo src={logo} style={logoStyle} />;
        }
 
        return '';
    }
 
    render() {
        const {
            title,
            titleStyle,
            logo,
            leftSection,
            rightSection,
        } = this.props;
 
        const { theme } = this.context;
 
        return (
            <StyledHeader {...this.props} theme={theme}>
                <StyledSection>
                    <Link
                        style={titleStyle}
                        theme={theme}
                        className="header-link"
                    >
                        {this.renderLogo()}
                        {title}
                    </Link>
                    {leftSection}
                </StyledSection>
                <StyledSection>{rightSection}</StyledSection>
            </StyledHeader>
        );
    }
}
 
AppBar.propTypes = {
    title: PropTypes.string,
    left: PropTypes.array,
    titleStyle: PropTypes.object,
};
AppBar.defaultProps = {};
 
export default AppBar;