deprecated-focus-application/src/header/header-behavior.js at 72f62233da2ffd1041bf151da4f39b779feab827 · get-focus/deprecated-focus-application · GitHub

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
import React, {PropTypes, PureComponent} from 'react';
import {
    injectActionHeader,
    injectBarContentExpandedHeader,
    injectBarContentLeftHeader,
    injectBarContentRightHeader,
    injectBarContentSummaryHeader,
    triggerPosition
} from '../header/header-actions';
import {compose} from 'redux';
import {connect as connectToState} from 'react-redux';

const Empty = () => (<span />);

export const connect = (headerOptions) => {
    const {actions = null, ExpandedHeaderComponent = null, SummaryHeaderComponent = null, LeftHeaderComponent = null, RightHeaderComponent = null, triggerScrollPosition = 9999} = headerOptions || {};
    const isStaticHeader = triggerScrollPosition === 0 || ExpandedHeaderComponent === null;
    return (ComponentToConnect) => {
        class ConnectedToHeaderComponent extends PureComponent {
            componentWillMount() {
                const {store: {dispatch}} = this.context;
                if(actions) dispatch(injectActionHeader(actions));
                if(ExpandedHeaderComponent) dispatch(injectBarContentExpandedHeader(ExpandedHeaderComponent));
                if(SummaryHeaderComponent) dispatch(injectBarContentSummaryHeader(SummaryHeaderComponent));
                if(LeftHeaderComponent) dispatch(injectBarContentLeftHeader(LeftHeaderComponent));
                if(RightHeaderComponent) dispatch(injectBarContentRightHeader(RightHeaderComponent));
            }
            componentDidMount() {
                const {store: {dispatch}} = this.context;
                const position = isStaticHeader ? 0 : triggerScrollPosition;
                dispatch(triggerPosition(position));
            }
            componentWillUnmount(){
                const {store: {dispatch}} = this.context;
                if(actions) dispatch(injectActionHeader({}));
                if(SummaryHeaderComponent) dispatch(injectBarContentSummaryHeader(Empty));
                if(ExpandedHeaderComponent) dispatch(injectBarContentExpandedHeader(Empty));
                if(LeftHeaderComponent) dispatch(injectBarContentLeftHeader(Empty));
                if(RightHeaderComponent) dispatch(injectBarContentRightHeader(Empty));
            }
            componentWillReceiveProps(newProps) {
                if(isStaticHeader) return;
                const isDateUpdated = this.props.lastUpdate !== newProps.lastUpdate;
                const isTriggerPositionChanged = this.props.triggerPosition !== newProps.triggerPosition;
                const header = document.querySelector('header[data-focus="header"] [data-focus="header-bar-expanded"]');
                const shouldTriggerProsition = header !== null && (isDateUpdated || isTriggerPositionChanged);
                if(shouldTriggerProsition) {
                    const {store: {dispatch}} = this.context;
                    dispatch(triggerPosition(header.offsetHeight))
                }
            }
            render() {
                const {store: {dispatch}} = this.context;
                const headerActions = {
                    actions: (actions) => dispatch(injectActionHeader(actions)),
                    ExpandedHeaderComponent: (ExpandedHeaderComponent) => dispatch(injectBarContentExpandedHeader(ExpandedHeaderComponent)),
                    SummaryHeaderComponent: (SummaryHeaderComponent) => dispatch(injectBarContentSummaryHeader(SummaryHeaderComponent)),
                    LeftHeaderComponent: (LeftHeaderComponent) => dispatch(injectBarContentLeftHeader(LeftHeaderComponent)),
                    RightHeaderComponent: (RightHeaderComponent) => dispatch(injectBarContentRightHeader(RightHeaderComponent)),
                    triggerPosition: (triggerScrollPosition) => dispatch(triggerPosition(triggerScrollPosition))
                }
                return <ComponentToConnect {...this.props} headerActions={headerActions} />
            }
        }
        ConnectedToHeaderComponent.props = ComponentToConnect.props;
        ConnectedToHeaderComponent.contextTypes = {
            store: PropTypes.shape({
                subscribe: PropTypes.func.isRequired,
                dispatch: PropTypes.func.isRequired,
                getState: PropTypes.func.isRequired
            })
        };
        return compose (
            connectToState(s => s.header)
        )(ConnectedToHeaderComponent);
    }
}