Skip to content

Commit 0ba35f7

Browse files
STRMLSTRML
committed
refactor(example): clean up css, class names, some language
1 parent 6684a5b commit 0ba35f7

3 files changed

Lines changed: 78 additions & 73 deletions

File tree

‎examples/1.html‎

Lines changed: 1 addition & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,64 +9,6 @@
99
width: 100%;
1010
padding-bottom: 250px;
1111
}
12-
.layoutRoot {
13-
display: flex;
14-
background: #eee;
15-
margin-bottom: 20px;
16-
flex-wrap: wrap;
17-
}
18-
.absoluteLayout {
19-
height: 600px;
20-
position: relative;
21-
justify-content: center;
22-
align-items: center
23-
}
24-
.box {
25-
display: inline-block;
26-
background: #ccc;
27-
border: 1px solid black;
28-
text-align: center;
29-
padding: 10px;
30-
box-sizing: border-box;
31-
margin-bottom: 10px;
32-
overflow: hidden;
33-
position: relative;
34-
margin: 20px;
35-
}
36-
.box .text {
37-
text-align: center;
38-
position: absolute;
39-
top: 0;
40-
bottom: 0;
41-
left: 0;
42-
right: 0;
43-
margin: auto;
44-
height: 36px;
45-
}
46-
.box3 .react-resizable-handle {
47-
display: none;
48-
}
49-
.box3:hover .react-resizable-handle {
50-
display: block;
51-
}
52-
.absolutely-positioned {
53-
position: absolute !important;
54-
}
55-
.center-aligned {
56-
margin: auto;
57-
}
58-
.left-aligned {
59-
left: 0;
60-
}
61-
.right-aligned {
62-
right: 0;
63-
}
64-
.top-aligned {
65-
top: 0;
66-
}
67-
.bottom-aligned {
68-
bottom: 0;
69-
}
7012
</style>
7113
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
7214
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
@@ -80,6 +22,7 @@ <h3>React-Resizable Demo</h3>
8022
</p>
8123
<p><a href="https://github.com/STRML/react-resizable">View project on GitHub</a></p>
8224
<p><a href="https://github.com/STRML/react-resizable/blob/master/examples/ExampleLayout.js">View this page's source</a></p>
25+
<hr />
8326
<div id="content"></div>
8427
</body>
8528
</html>

‎examples/ExampleLayout.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,31 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
1414
absoluteTop: 0,
1515
};
1616

17-
onClick = () => {
17+
onResetClick = () => {
1818
this.setState({ width: 200, height: 200, absoluteWidth: 200, absoluteHeight: 200 });
1919
};
2020

21+
// On top layout
2122
onResize = (event, {element, size, handle}) => {
2223
this.setState({width: size.width, height: size.height});
2324
};
25+
26+
// On bottom layout. Used to resize the center element around its flex parent.
2427
onResizeAbsolute = (event, {element, size, handle}) => {
2528
this.setState((state) => {
2629
let newLeft = state.absoluteLeft;
2730
let newTop = state.absoluteTop;
2831
const deltaHeight = size.height - state.absoluteHeight;
2932
const deltaWidth = size.width - state.absoluteWidth;
3033
if (handle[0] === 'n') {
31-
newTop -= deltaHeight / 2;
34+
newTop -= deltaHeight;
3235
} else if (handle[0] === 's') {
33-
newTop += deltaHeight / 2;
36+
newTop += deltaHeight;
3437
}
3538
if (handle[handle.length - 1] === 'w') {
36-
newLeft -= deltaWidth / 2;
39+
newLeft -= deltaWidth;
3740
} else if (handle[handle.length - 1] === 'e') {
38-
newLeft += deltaWidth / 2;
41+
newLeft += deltaWidth;
3942
}
4043

4144
return {
@@ -50,11 +53,13 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
5053
render() {
5154
return (
5255
<div>
53-
<button onClick={this.onClick} style={{'marginBottom': '10px'}}>Reset first element's width/height</button>
56+
57+
<h3>Statically Positioned Layout</h3>
5458
<div className="layoutRoot">
5559
<Resizable className="box" height={this.state.height} width={this.state.width} onResize={this.onResize} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
5660
<div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
5761
<span className="text">{"Raw use of <Resizable> element. 200x200, all Resize Handles."}</span>
62+
<button onClick={this.onResetClick} style={{'marginTop': '10px'}}>Reset this element's width/height</button>
5863
</div>
5964
</Resizable>
6065
<ResizableBox className="box" width={200} height={200}>
@@ -66,7 +71,7 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
6671
height={200}
6772
handle={<span className="custom-handle custom-handle-se" />}
6873
handleSize={[8, 8]}>
69-
<span className="text">{"<ResizableBox> with custom handle in SE corner."}</span>
74+
<span className="text">{"<ResizableBox> with custom overflow style & handle in SE corner."}</span>
7075
</ResizableBox>
7176
<ResizableBox
7277
className="custom-box box"
@@ -83,7 +88,7 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
8388
<ResizableBox className="box" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
8489
<span className="text">Resizable box, starting at 200x200. Min size is 150x150, max is 500x300.</span>
8590
</ResizableBox>
86-
<ResizableBox className="box box3" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
91+
<ResizableBox className="box hover-handles" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
8792
<span className="text">Resizable box with a handle that only appears on hover.</span>
8893
</ResizableBox>
8994
<ResizableBox className="box" width={200} height={200} lockAspectRatio={true}>
@@ -105,38 +110,41 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
105110
<span className="text">Not resizable ("none" axis).</span>
106111
</ResizableBox>
107112
</div>
113+
114+
<h3>Absolutely Positioned layout</h3>
108115
<div className="layoutRoot absoluteLayout">
109116
<ResizableBox className="box absolutely-positioned top-aligned left-aligned" height={200} width={200} resizeHandles={['se', 'e', 's']}>
110-
<span className="text">{"Top-left Aligned"}</span>
117+
<span className="text">Top-left Aligned</span>
111118
</ResizableBox>
112119
<ResizableBox className="box absolutely-positioned bottom-aligned left-aligned" height={200} width={200} resizeHandles={['ne', 'e', 'n']}>
113-
<span className="text">{"Bottom-left Aligned"}</span>
120+
<span className="text">Bottom-left Aligned</span>
114121
</ResizableBox>
122+
{/* See implementation of `onResizeAbsolute` for how this can be moved around its container */}
115123
<Resizable
116-
className="box absolutely-positioned center-aligned"
124+
className="box absolutely-positioned"
117125
height={this.state.absoluteHeight}
118126
width={this.state.absoluteWidth}
119127
onResize={this.onResizeAbsolute}
120128
resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
121129
>
122130
<div
123-
className="box"
124131
style={{
125132
width: this.state.absoluteWidth,
126133
height: this.state.absoluteHeight,
127134
margin: `${this.state.absoluteTop} 0 0 ${this.state.absoluteLeft}`,
128135
}}
129136
>
130-
<span className="text">{"Raw use of <Resizable> element with controlled position. Resize and reposition in all directions"}</span>
137+
<span className="text">{"Raw use of <Resizable> element with controlled position. Resize and reposition in all directions."}</span>
131138
</div>
132139
</Resizable>
133140
<ResizableBox className="box absolutely-positioned top-aligned right-aligned" height={200} width={200} resizeHandles={['sw', 'w', 's']}>
134-
<span className="text">{"Top-right Aligned"}</span>
141+
<span className="text">Top-right Aligned</span>
135142
</ResizableBox>
136143
<ResizableBox className="box absolutely-positioned bottom-aligned right-aligned" height={200} width={200} resizeHandles={['nw', 'w', 'n']}>
137-
<span className="text">{"Bottom-right Aligned"}</span>
144+
<span className="text">Bottom-right Aligned</span>
138145
</ResizableBox>
139146
</div>
147+
140148
</div>
141149
);
142150
}

‎examples/example.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,57 @@
1+
.layoutRoot {
2+
display: flex;
3+
background: #eee;
4+
margin-bottom: 20px;
5+
flex-wrap: wrap;
6+
}
7+
.absoluteLayout {
8+
height: 600px;
9+
position: relative;
10+
justify-content: center;
11+
align-items: center;
12+
}
13+
14+
.box {
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
flex-direction: column;
19+
background: #ccc;
20+
border: 1px solid black;
21+
text-align: center;
22+
padding: 10px;
23+
box-sizing: border-box;
24+
margin-bottom: 10px;
25+
overflow: hidden;
26+
position: relative;
27+
margin: 20px;
28+
}
29+
.box .text {
30+
text-align: center;
31+
}
32+
33+
.hover-handles .react-resizable-handle {
34+
display: none;
35+
}
36+
.hover-handles:hover .react-resizable-handle {
37+
display: block;
38+
}
39+
.absolutely-positioned {
40+
position: absolute !important;
41+
}
42+
.left-aligned {
43+
left: 0;
44+
}
45+
.right-aligned {
46+
right: 0;
47+
}
48+
.top-aligned {
49+
top: 0;
50+
}
51+
.bottom-aligned {
52+
bottom: 0;
53+
}
54+
155
.custom-box {
256
overflow: visible;
357
}

0 commit comments

Comments
 (0)