Skip to content

Commit 9c5b73e

Browse files
mschwartzmschwartz
authored
Merge pull request #16 from ModusCreateOrg/panel-2
Split the code to separate files and tested
2 parents 7bfb821 + 01e4e4e commit 9c5b73e

File tree

8 files changed

+152
-136
lines changed

8 files changed

+152
-136
lines changed

‎18-panel/a-panel/src/App.css‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +0,0 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
8-
}
9-
10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
15-
}
16-
17-
.App-title {
18-
font-size: 1.5em;
19-
}
20-
21-
.App-intro {
22-
font-size: large;
23-
}
24-
25-
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
28-
}

‎18-panel/a-panel/src/App.js‎

Lines changed: 1 addition & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,8 @@
11
import React, { Component } from 'react';
2-
import './App.css';
2+
import Panel from './Panel';
33
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
4-
import faChevronDown from '@fortawesome/fontawesome-free-solid/faChevronDown';
54
import faReact from '@fortawesome/fontawesome-free-brands/faReact';
65

7-
8-
// HEADER
9-
//
10-
class Header extends Component {
11-
render () {
12-
const { collapsible, preTools, postTools,
13-
title, toggleCollapse } = this.props;
14-
return (
15-
<div className="header">
16-
{title}
17-
<div style={{flex: 1}}></div>
18-
{preTools}
19-
{collapsible &&
20-
<FontAwesomeIcon
21-
className="collapse-tool header-tool"
22-
icon={faChevronDown}
23-
onClick={toggleCollapse}
24-
/>
25-
}
26-
{postTools}
27-
</div>
28-
);
29-
}
30-
}
31-
32-
// EXPANDER
33-
//
34-
class Expander extends Component {
35-
static defaultProps = {
36-
expanded: true
37-
}
38-
componentDidMount = () => {
39-
this.setHeight(this.props.expanded);
40-
this.forceUpdate();
41-
}
42-
componentWillReceiveProps = ({ expanded }) => {
43-
this.setHeight(expanded);
44-
}
45-
setHeight = (expanded) => {
46-
const { scrollHeight } = this.expandWrap;
47-
this.wrapHeight = expanded ? scrollHeight + 'px' : 0;
48-
}
49-
render () {
50-
const { className = 'expander-wrap', style = {} } = this.props;
51-
Object.assign(style, {
52-
height: this.wrapHeight
53-
})
54-
return (
55-
<div
56-
ref={el => this.expandWrap = el}
57-
className={className}
58-
style={style}
59-
>
60-
{this.props.render(this.props)}
61-
</div>
62-
);
63-
}
64-
}
65-
66-
67-
// PANEL
68-
//
69-
class Panel extends Component {
70-
static defaultProps = {
71-
expanded: true
72-
}
73-
state = {
74-
expanded: this.props.expanded
75-
}
76-
componentWillReceiveProps = ({ expanded }) => {
77-
this.setState({expanded});
78-
}
79-
toggleCollapse = () => {
80-
this.setState({
81-
expanded: !this.state.expanded
82-
});
83-
}
84-
render() {
85-
const { collapsible, expandDir, preTools,
86-
postTools, style = {}, title } = this.props;
87-
const { expanded } = this.state;
88-
const showHeader = title.length || collapsible;
89-
const className = `panel${expanded ? ' expanded' : ''}`;
90-
return (
91-
<div className={className} style={style}>
92-
{showHeader &&
93-
<Header
94-
title={title}
95-
collapsible={collapsible}
96-
toggleCollapse={this.toggleCollapse}
97-
preTools={preTools}
98-
postTools={postTools}
99-
/>
100-
}
101-
<Expander expanded={expanded} expandDir={expandDir} render={() => (
102-
<div className="body-el">
103-
{this.props.children}
104-
</div>
105-
)} />
106-
</div>
107-
);
108-
}
109-
}
110-
111-
// PANEL INSTANCE
112-
//
1136
class App extends Component {
1147
render() {
1158
return (

‎18-panel/a-panel/src/Expander.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.expander-wrap {
2+
overflow-y: auto;
3+
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
4+
border: 1px solid #3d83cc;
5+
border-top-width: 0;
6+
}

‎18-panel/a-panel/src/Expander.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { Component } from 'react';
2+
import './Expander.css';
3+
4+
class Expander extends Component {
5+
static defaultProps = {
6+
expanded: true
7+
}
8+
9+
componentDidMount = () => {
10+
this.setHeight(this.props.expanded);
11+
this.forceUpdate();
12+
}
13+
14+
componentWillReceiveProps = ({ expanded }) => {
15+
this.setHeight(expanded);
16+
}
17+
18+
setHeight = (expanded) => {
19+
const { scrollHeight } = this.expandWrap;
20+
this.wrapHeight = expanded ? scrollHeight + 'px' : 0;
21+
}
22+
23+
render () {
24+
const { className = 'expander-wrap', style = {} } = this.props;
25+
Object.assign(style, {
26+
height: this.wrapHeight
27+
})
28+
29+
return (
30+
<div
31+
ref={el => this.expandWrap = el}
32+
className={className}
33+
style={style}
34+
>
35+
{this.props.render(this.props)}
36+
</div>
37+
);
38+
}
39+
}
40+
41+
export default Expander;

‎18-panel/a-panel/src/Header.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.header {
2+
display: flex;
3+
border: 1px solid #3d83cc;
4+
border-bottom-width: 0;
5+
background-color: #3d83cc;
6+
padding: 4px 8px;
7+
color: white;
8+
}
9+
.header-tool {
10+
cursor: pointer;
11+
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
12+
margin-left: 6px;
13+
}
14+
.expanded .collapse-tool {
15+
transform: rotate(-180deg);
16+
}

‎18-panel/a-panel/src/Header.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { Component } from 'react';
2+
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
3+
import faChevronDown from '@fortawesome/fontawesome-free-solid/faChevronDown';
4+
import './Header.css';
5+
6+
class Header extends Component {
7+
render() {
8+
const { collapsible, preTools, postTools, title, toggleCollapse } = this.props;
9+
10+
return (
11+
<div className="header">
12+
{title}
13+
<div style={{ flex: 1 }}></div>
14+
{preTools}
15+
{collapsible &&
16+
<FontAwesomeIcon
17+
className="collapse-tool header-tool"
18+
icon={faChevronDown}
19+
onClick={toggleCollapse}
20+
/>
21+
}
22+
{postTools}
23+
</div>
24+
);
25+
}
26+
}
27+
28+
export default Header;

‎18-panel/a-panel/src/Panel.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.panel {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
.body-el {
6+
padding: 8px;
7+
}

‎18-panel/a-panel/src/Panel.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { Component } from 'react';
2+
import Header from './Header';
3+
import Expander from './Expander';
4+
import './Panel.css';
5+
6+
class Panel extends Component {
7+
static defaultProps = {
8+
expanded: true
9+
}
10+
11+
state = {
12+
expanded: this.props.expanded
13+
}
14+
15+
componentWillReceiveProps = ({ expanded }) => {
16+
this.setState({ expanded });
17+
}
18+
19+
toggleCollapse = () => {
20+
this.setState({
21+
expanded: !this.state.expanded
22+
});
23+
}
24+
25+
render() {
26+
const { collapsible, expandDir, headerPosition, preTools,
27+
postTools, style = {}, title } = this.props;
28+
const { expanded } = this.state;
29+
const showHeader = title.length || collapsible;
30+
const className = `panel${expanded ? ' expanded' : ''}`;
31+
32+
return (
33+
<div className={className} style={style}>
34+
{showHeader &&
35+
<Header
36+
title={title}
37+
collapsible={collapsible}
38+
toggleCollapse={this.toggleCollapse}
39+
preTools={preTools}
40+
postTools={postTools}
41+
/>
42+
}
43+
<Expander expanded={expanded} expandDir={expandDir} render={() => (
44+
<div className="body-el">
45+
{this.props.children}
46+
</div>
47+
)} />
48+
</div>
49+
);
50+
}
51+
}
52+
53+
export default Panel;

0 commit comments

Comments
 (0)