All files / src/List ListItem.js

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component } from 'preact';
import PropTypes from 'prop-types';
import { StyledItem } from './styles';
 
/**
 * List Item
 */
class ListItem extends Component {
    static propTypes = {
        /**
         * Custom styles
         */
        style: PropTypes.object,
    };
 
    static contextTypes = {
        theme: PropTypes.object,
    };
 
    get left() {
        const { left } = this.props;
 
        if (left && left.nodeName) {
            // if node exists
            return <div className="list-item-left">{left}</div>;
        }
 
        return '';
    }
 
    get right() {
        const { right } = this.props;
 
        if (right && right.nodeName) {
            // if node exists
            return <div className="list-item-right">{right}</div>;
        }
 
        return '';
    }
 
    handleClick = () => {
        const { onClick } = this.props;
 
        if (typeof onClick === 'function') {
            onClick(this.item);
        }
    };
 
    render() {
        const { style = '', className, children, active } = this.props;
        const { theme } = this.context;
 
        return (
            <StyledItem
                style={style}
                className={className}
                active={active}
                theme={theme}
                onClick={this.handleClick}
                innerRef={item => (this.item = item)}
            >
                {this.left}
                {children}
                {this.right}
            </StyledItem>
        );
    }
}
 
export default ListItem;