Skip to content

Commit fd8fd03

Browse files
author
Seth Lemmons
committed
Layouts - updated layouts to use composition
Updated the fit, card, hbox, and vbox layouts they now use composition within the examples
1 parent 14f9662 commit fd8fd03

File tree

16 files changed

+227
-70
lines changed

16 files changed

+227
-70
lines changed

‎15-layouts/a-fit-layout/src/App.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +0,0 @@
1-
.layout-fit {
2-
display: flex;
3-
box-sizing: border-box;
4-
}
5-
.layout-fit > * {
6-
flex-grow: 1;
7-
}
8-

‎15-layouts/a-fit-layout/src/App.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import React from 'react';
2-
import './App.css';
2+
import Layout from './Layout';
33

4-
const App = (props) => {
4+
const containerStyle = { width: 200, height: 200, border: '4px solid #923131' };
5+
const itemStyle = { backgroundColor: '#ff4b4b' };
6+
7+
const App = props => {
58
return (
6-
<div
7-
className="layout-fit"
8-
style={{width: 200, height: 200, border: "4px solid #923131"}}
9-
>
10-
<div style={{backgroundColor: "#ff4b4b"}}></div>
11-
</div>
9+
<Layout type="fit">
10+
<div style={containerStyle}>
11+
<div style={itemStyle} />
12+
</div>
13+
</Layout>
1214
);
13-
}
15+
};
1416

1517
export default App;

‎15-layouts/a-fit-layout/src/Layout.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* FIT */
2+
.layout-fit {
3+
display: flex;
4+
box-sizing: border-box;
5+
}
6+
.layout-fit > * {
7+
flex-grow: 1;
8+
}
9+
10+
/* CARD */
11+
.layout-card {
12+
display: flex;
13+
box-sizing: border-box;
14+
}
15+
.layout-card > * {
16+
flex-grow: 1;
17+
}
18+
19+
/* HBOX */
20+
.layout-hbox {
21+
display: flex;
22+
}
23+
24+
/* VBOX */
25+
.layout-vbox {
26+
display: flex;
27+
flex-direction: column;
28+
}

‎15-layouts/a-fit-layout/src/Layout.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Fragment } from 'react';
2+
import './Layout.css';
3+
4+
export default ({ children, type }) => {
5+
const layoutClassName = type ? `layout-${type} ` : '';
6+
7+
return (
8+
<Fragment>
9+
{React.Children.map(children, child => {
10+
const { className: childClassName = '' } = child.props;
11+
const className = `${layoutClassName}${childClassName}`;
12+
13+
return React.cloneElement(child, { className });
14+
})}
15+
</Fragment>
16+
);
17+
};

‎15-layouts/b-card-layout/src/App.css

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +0,0 @@
1-
.layout-card {
2-
display: flex;
3-
box-sizing: border-box;
4-
}
5-
6-
.layout-card > * {
7-
flex-grow: 1;
8-
}
9-

‎15-layouts/b-card-layout/src/App.js

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import React from 'react';
2-
import './App.css';
2+
import Layout from './Layout';
33

4-
const App = ({activeCard = 0}) => (
5-
<div
6-
className="layout-card"
7-
style={{width: 100, height: 100, border: '1px solid gray'}}
8-
>
9-
{
10-
[
11-
<div>one</div>,
12-
<div>two</div>
13-
][activeCard]
14-
}
15-
</div>
4+
const containerStyle = { width: 100, height: 100,
5+
border: '1px solid gray', color: 'white' };
6+
const itemStyleA = { background: '#ee4d77', padding: 4 }
7+
const itemStyleB = { background: '#b15b90', padding: 4 }
8+
9+
const App = ({ activeCard = 0 }) => (
10+
<Layout type="card">
11+
<div style={containerStyle}>
12+
{[<div style={itemStyleA}>one</div>, <div style={itemStyleB}>two</div>][activeCard]}
13+
</div>
14+
</Layout>
1615
);
1716

1817
export default App;

‎15-layouts/b-card-layout/src/Layout.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* FIT */
2+
.layout-fit {
3+
display: flex;
4+
box-sizing: border-box;
5+
}
6+
.layout-fit > * {
7+
flex-grow: 1;
8+
}
9+
10+
/* CARD */
11+
.layout-card {
12+
display: flex;
13+
box-sizing: border-box;
14+
}
15+
.layout-card > * {
16+
flex-grow: 1;
17+
}
18+
19+
/* HBOX */
20+
.layout-hbox {
21+
display: flex;
22+
}
23+
24+
/* VBOX */
25+
.layout-vbox {
26+
display: flex;
27+
flex-direction: column;
28+
}

‎15-layouts/b-card-layout/src/Layout.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Fragment } from 'react';
2+
import './Layout.css';
3+
4+
export default ({ children, type }) => {
5+
const layoutClassName = type ? `layout-${type} ` : '';
6+
7+
return (
8+
<Fragment>
9+
{React.Children.map(children, child => {
10+
const { className: childClassName = '' } = child.props;
11+
const className = `${layoutClassName}${childClassName}`;
12+
13+
return React.cloneElement(child, { className });
14+
})}
15+
</Fragment>
16+
);
17+
};

‎15-layouts/c-hbox-layout/src/App.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
.layout-hbox {
2-
display: flex;
3-
}
4-

‎15-layouts/c-hbox-layout/src/App.js

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React, { Component } from 'react';
2-
import './App.css';
2+
import Layout from './Layout';
3+
4+
const containerStyle = { width: 300, height: 100, color: 'white' };
35

46
class App extends Component {
5-
render () {
7+
render() {
68
return (
7-
<div
8-
className="layout-hbox"
9-
style={{width: 300, height: 100, color: "white"}}
10-
>
11-
<div style={{width: 40, background: "#df8f2e"}}>fixed</div>
12-
<div style={{flexGrow: 1, background: "#f26f38"}}>flex 1</div>
13-
<div style={{flexGrow: 2, background: "#ee4d77"}}>flex 2</div>
14-
<div style={{background: "#b15b90"}}>wrap</div>
15-
</div>
9+
<Layout type="hbox">
10+
<div style={containerStyle}>
11+
<div style={{ width: 40, background: '#df8f2e' }}>fixed</div>
12+
<div style={{ flexGrow: 1, background: '#f26f38' }}>flex 1</div>
13+
<div style={{ flexGrow: 2, background: '#ee4d77' }}>flex 2</div>
14+
<div style={{ background: '#b15b90' }}>wrap</div>
15+
</div>
16+
</Layout>
1617
);
1718
}
1819
}

‎15-layouts/c-hbox-layout/src/Layout.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* FIT */
2+
.layout-fit {
3+
display: flex;
4+
box-sizing: border-box;
5+
}
6+
.layout-fit > * {
7+
flex-grow: 1;
8+
}
9+
10+
/* CARD */
11+
.layout-card {
12+
display: flex;
13+
box-sizing: border-box;
14+
}
15+
.layout-card > * {
16+
flex-grow: 1;
17+
}
18+
19+
/* HBOX */
20+
.layout-hbox {
21+
display: flex;
22+
}
23+
24+
/* VBOX */
25+
.layout-vbox {
26+
display: flex;
27+
flex-direction: column;
28+
}

‎15-layouts/c-hbox-layout/src/Layout.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Fragment } from 'react';
2+
import './Layout.css';
3+
4+
export default ({ children, type }) => {
5+
const layoutClassName = type ? `layout-${type} ` : '';
6+
7+
return (
8+
<Fragment>
9+
{React.Children.map(children, child => {
10+
const { className: childClassName = '' } = child.props;
11+
const className = `${layoutClassName}${childClassName}`;
12+
13+
return React.cloneElement(child, { className });
14+
})}
15+
</Fragment>
16+
);
17+
};

‎15-layouts/d-vbox-layout/src/App.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +0,0 @@
1-
.layout-vbox {
2-
display: flex;
3-
flex-direction: column;
4-
}
5-

‎15-layouts/d-vbox-layout/src/App.js

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React, { Component } from 'react';
2-
import './App.css';
2+
import Layout from './Layout';
3+
4+
const containerStyle = { width: 100, height: 300, color: 'white' };
35

46
class App extends Component {
5-
render () {
7+
render() {
68
return (
7-
<div
8-
className="layout-vbox"
9-
style={{width: 100, height: 300, color: "white"}}
10-
>
11-
<div style={{height: 40, background: "#df8f2e"}}>fixed</div>
12-
<div style={{flexGrow: 1, background: "#f26f38"}}>flex 1</div>
13-
<div style={{flexGrow: 2, background: "#ee4d77"}}>flex 2</div>
14-
<div style={{background: "#b15b90"}}>wrap</div>
15-
</div>
9+
<Layout type="vbox">
10+
<div style={containerStyle}>
11+
<div style={{ height: 40, background: '#df8f2e' }}>fixed</div>
12+
<div style={{ flexGrow: 1, background: '#f26f38' }}>flex 1</div>
13+
<div style={{ flexGrow: 2, background: '#ee4d77' }}>flex 2</div>
14+
<div style={{ background: '#b15b90' }}>wrap</div>
15+
</div>
16+
</Layout>
1617
);
1718
}
1819
}

‎15-layouts/d-vbox-layout/src/Layout.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* FIT */
2+
.layout-fit {
3+
display: flex;
4+
box-sizing: border-box;
5+
}
6+
.layout-fit > * {
7+
flex-grow: 1;
8+
}
9+
10+
/* CARD */
11+
.layout-card {
12+
display: flex;
13+
box-sizing: border-box;
14+
}
15+
.layout-card > * {
16+
flex-grow: 1;
17+
}
18+
19+
/* HBOX */
20+
.layout-hbox {
21+
display: flex;
22+
}
23+
24+
/* VBOX */
25+
.layout-vbox {
26+
display: flex;
27+
flex-direction: column;
28+
}

‎15-layouts/d-vbox-layout/src/Layout.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { Fragment } from 'react';
2+
import './Layout.css';
3+
4+
export default ({ children, type }) => {
5+
const layoutClassName = type ? `layout-${type} ` : '';
6+
7+
return (
8+
<Fragment>
9+
{React.Children.map(children, child => {
10+
const { className: childClassName = '' } = child.props;
11+
const className = `${layoutClassName}${childClassName}`;
12+
13+
return React.cloneElement(child, { className });
14+
})}
15+
</Fragment>
16+
);
17+
};

0 commit comments

Comments
 (0)