All files / i-react-utils/src Breadcrumbs.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
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
108
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
3x
3x
 
 
3x
3x
 
 
 
2x
2x
2x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
4x
 
 
 
3x
2x
 
 
 
 
 
 
 
 
 
 
4x
 
2x
 
2x
2x
1x
 
1x
1x
1x
 
1x
2x
1x
 
1x
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, {PropTypes} from 'react';
import { Link } from 'react-router';
import {devOnly, isEquivalent, shallowCopyExcept} from 'i-js-utils'
 
 
export function bc(link, label) {
    return { link: link, label : label };
}
 
export class Breadcrumbs extends React.Component {
    static childContextTypes = {
        breadcrumbs : PropTypes.object
    };
 
    static contextTypes = {
        breadcrumbs : PropTypes.object
    };
 
    static propTypes = {
        config : PropTypes.arrayOf(PropTypes.shape({ link : PropTypes.string.isRequired, label : PropTypes.string.isRequired })),
        renderHome : PropTypes.bool
    };
 
    static defaultProps = {
        renderHome : false
    };
 
    constructor(props) {
        super();
        this.props = props;
        this.state = {
            config : this.props.config ? this.props.config : null
        };
        this.configuration = this.configuration.bind(this);
        this.clear = this.clear.bind(this);
    }
 
    configuration(config) {
        let bc = this.context.breadcrumbs ? this.context.breadcrumbs : this;
        let oldState = bc.state.config;
        if (oldState == null || ! isEquivalent(oldState, config)) {
            //devOnly(()=>{
            //    let strArray;
            //    if (config) {
            //        strArray = [];
            //        config.forEach((i) => { strArray.push(i.link);});
            //    }
            //    console.debug('Updating breadcrumbs to', strArray);
            //});
            bc.setState({config: config});
        }
    }
 
    clear() {
        this.configuration([]);
    }
 
 
    getChildContext() {
        return {breadcrumbs : this};
    }
 
    componentWillMount() {
        if (this.props.config) {
            this.configuration(this.props.config);
        }
    }
 
    componentWillReceiveProps(nextProps) {
        if (this.props.config) {
            this.configuration(this.props.config);
        }
    }
 
    render() {
        if (this.context.breadcrumbs) {
            // do not render it
            return null;
        }
        const divProps = shallowCopyExcept({}, this.props, ['config', 'renderHome']);
        if (this.state.config == null || this.state.config.length == 0) {
            return (<div {...divProps}>{this.props.children}</div>);
        } else {
            const items = [];
            Eif (this.props.renderHome) {
                items.push(<li key="bc-home"><Link className="home" to="/"><span className="ico-panel ico-breadcrumb-home"></span></Link></li>);
            }
            this.state.config.forEach((br, i) => {
                if (i == this.state.config.length -1) {
                    items.push((<li key={`bc-item-${i}`} className="active"><span>{br.label}</span></li>));
                } else {
                    items.push((<li key={`bc-item-${i}`}><Link to={br.link}>{br.label}</Link></li>));
                }
            });
            return (
                <div {...divProps}>
                    <div id="breadcrumb" className="breadcrumb">
                        <ol className="breadcrumb">
                            {items}
                        </ol>
                    </div>
                    {this.props.children}
                </div>
            );
        }
    }
}