1 | import * as React from 'react';
|
2 |
|
3 | interface ResultsLayoutProps {
|
4 | leftComponent?: () => JSX.Element;
|
5 | rightComponent?: () => JSX.Element;
|
6 | headerComponent?: () => JSX.Element;
|
7 | footerComponent?: () => JSX.Element;
|
8 | rightRailComponent?: () => JSX.Element;
|
9 | }
|
10 |
|
11 | class ResultsLayout extends React.Component<ResultsLayoutProps, {}> {
|
12 | constructor() {
|
13 | super();
|
14 | }
|
15 |
|
16 | render() {
|
17 | const headerComponent =
|
18 | this.props.headerComponent ? (
|
19 | this.props.headerComponent()
|
20 | ) : null;
|
21 |
|
22 | const leftComponent =
|
23 | this.props.leftComponent ? (
|
24 | this.props.leftComponent()
|
25 | ) : null;
|
26 |
|
27 | const rightComponent =
|
28 | this.props.rightComponent ? (
|
29 | this.props.rightComponent()
|
30 | ) : null;
|
31 |
|
32 | const footerComponent =
|
33 | this.props.footerComponent ? (
|
34 | this.props.footerComponent()
|
35 | ) : null;
|
36 |
|
37 | const rightRailComponent =
|
38 | this.props.rightRailComponent ? (
|
39 | <div className="two wide column">
|
40 | <div className="container">
|
41 | {this.props.rightRailComponent()}
|
42 | </div>
|
43 | </div>
|
44 | ) : null;
|
45 |
|
46 | const rightColumns =
|
47 | rightRailComponent ?
|
48 | 'ten wide column' :
|
49 | (leftComponent
|
50 | ? 'twelve wide column'
|
51 | : 'sixteen wide column'
|
52 | );
|
53 |
|
54 | const header =
|
55 | this.props.headerComponent ? (
|
56 | <div className="ui segment">
|
57 | {headerComponent}
|
58 | </div>
|
59 | ) : null;
|
60 |
|
61 | const leftColumn =
|
62 | leftComponent ? (
|
63 | <div className="three wide column">
|
64 | <div className="container">
|
65 | {leftComponent}
|
66 | </div>
|
67 | </div>
|
68 | ) : null;
|
69 |
|
70 | const rightColumn = (
|
71 | <div className={rightColumns}>
|
72 | <div className="container">
|
73 | {rightComponent}
|
74 | </div>
|
75 | </div>
|
76 | );
|
77 |
|
78 | return (
|
79 | <div className="ui segments" style={{height: '100%'}}>
|
80 | {header}
|
81 | <div className="main ui segment">
|
82 | <div className="ui grid">
|
83 | {leftColumn}
|
84 | {rightColumn}
|
85 | {rightRailComponent}
|
86 | <div className="three wide column" />
|
87 | <div className="ten wide column">
|
88 | {footerComponent}
|
89 | </div>
|
90 | </div>
|
91 | </div>
|
92 | </div>
|
93 | );
|
94 | }
|
95 | }
|
96 |
|
97 | export {
|
98 | ResultsLayoutProps,
|
99 | ResultsLayout
|
100 | };
|