Skip to content

Commit 12ed423

Browse files
STRMLSTRML
committed
Deploying to gh-pages from @ afd7ef2 🚀
1 parent 4a81da5 commit 12ed423

5 files changed

Lines changed: 372 additions & 61 deletions

File tree

‎examples/1.html‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎examples/ExampleLayout.js‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import React from 'react';
2+
import Resizable from '../lib/Resizable';
3+
import ResizableBox from '../lib/ResizableBox';
4+
import 'style-loader!css-loader!../css/styles.css';
5+
import 'style-loader!css-loader!./example.css';
6+
7+
const CustomResizeHandle = React.forwardRef((props, ref) => {
8+
const {handleAxis, ...restProps} = props;
9+
return (
10+
<div
11+
className={`custom-handle custom-handle-${handleAxis} custom-resize-handle-component`}
12+
ref={ref}
13+
{...restProps}
14+
></div>
15+
);
16+
});
17+
18+
export default class ExampleLayout extends React.Component<{}, {width: number, height: number}> {
19+
state = {
20+
width: 200,
21+
height: 200,
22+
absoluteWidth: 200,
23+
absoluteHeight: 200,
24+
absoluteLeft: 0,
25+
absoluteTop: 0,
26+
};
27+
28+
onResetClick = () => {
29+
this.setState({ width: 200, height: 200, absoluteWidth: 200, absoluteHeight: 200 });
30+
};
31+
32+
// On top layout
33+
onFirstBoxResize = (event, {element, size, handle}) => {
34+
this.setState({width: size.width, height: size.height});
35+
};
36+
37+
// On bottom layout. Used to resize the center element around its flex parent.
38+
onResizeAbsolute = (event, {element, size, handle}) => {
39+
this.setState((state) => {
40+
let newLeft = state.absoluteLeft;
41+
let newTop = state.absoluteTop;
42+
const deltaHeight = size.height - state.absoluteHeight;
43+
const deltaWidth = size.width - state.absoluteWidth;
44+
if (handle[0] === 'n') {
45+
newTop -= deltaHeight;
46+
} else if (handle[0] === 's') {
47+
newTop += deltaHeight;
48+
}
49+
if (handle[handle.length - 1] === 'w') {
50+
newLeft -= deltaWidth;
51+
} else if (handle[handle.length - 1] === 'e') {
52+
newLeft += deltaWidth;
53+
}
54+
55+
return {
56+
absoluteWidth: size.width,
57+
absoluteHeight: size.height,
58+
absoluteLeft: newLeft,
59+
absoluteTop: newTop,
60+
};
61+
});
62+
};
63+
64+
render() {
65+
return (
66+
<div>
67+
68+
<h3>Statically Positioned Layout</h3>
69+
<div className="layoutRoot">
70+
<Resizable className="box" height={this.state.height} width={this.state.width} onResize={this.onFirstBoxResize} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
71+
<div style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
72+
<span className="text">{"Raw use of <Resizable> element. 200x200, all Resize Handles."}</span>
73+
<button onClick={this.onResetClick} style={{'marginTop': '10px'}}>Reset this element's width/height</button>
74+
</div>
75+
</Resizable>
76+
<ResizableBox className="box" width={200} height={200}>
77+
<span className="text">{"<ResizableBox>"}</span>
78+
</ResizableBox>
79+
<ResizableBox
80+
className="custom-box box"
81+
width={200}
82+
height={200}
83+
handle={<span className="custom-handle custom-handle-se" />}
84+
handleSize={[8, 8]}>
85+
<span className="text">{"<ResizableBox> with custom overflow style & handle in SE corner."}</span>
86+
</ResizableBox>
87+
<ResizableBox
88+
className="custom-box box"
89+
width={200}
90+
height={200}
91+
handle={<CustomResizeHandle />}
92+
handleSize={[8, 8]}>
93+
<span className="text">{"<ResizableBox> with a custom resize handle component."}</span>
94+
</ResizableBox>
95+
<ResizableBox
96+
className="custom-box box"
97+
width={200}
98+
height={200}
99+
handle={(h, ref) => <span className={`custom-handle custom-handle-${h}`} ref={ref} />}
100+
handleSize={[8, 8]}
101+
resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
102+
<span className="text">{"<ResizableBox> with custom handles in all locations."}</span>
103+
</ResizableBox>
104+
<ResizableBox className="box" width={200} height={200} draggableOpts={{grid: [25, 25]}}>
105+
<span className="text">Resizable box that snaps to even intervals of 25px.</span>
106+
</ResizableBox>
107+
<ResizableBox className="box" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
108+
<span className="text">Resizable box, starting at 200x200. Min size is 150x150, max is 500x300.</span>
109+
</ResizableBox>
110+
<ResizableBox className="box hover-handles" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
111+
<span className="text">Resizable box with a handle that only appears on hover.</span>
112+
</ResizableBox>
113+
<ResizableBox className="box" width={200} height={200} lockAspectRatio={true} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
114+
<span className="text">Resizable square with a locked aspect ratio.</span>
115+
</ResizableBox>
116+
<ResizableBox className="box" width={200} height={120} lockAspectRatio={true} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
117+
<span className="text">Resizable rectangle with a locked aspect ratio.</span>
118+
</ResizableBox>
119+
<ResizableBox className="box" width={200} height={200} axis="x">
120+
<span className="text">Only resizable by "x" axis.</span>
121+
</ResizableBox>
122+
<ResizableBox className="box" width={200} height={200} axis="y">
123+
<span className="text">Only resizable by "y" axis.</span>
124+
</ResizableBox>
125+
<ResizableBox className="box" width={200} height={200} axis="both">
126+
<span className="text">Resizable ("both" axis).</span>
127+
</ResizableBox>
128+
<ResizableBox className="box" width={200} height={200} axis="none">
129+
<span className="text">Not resizable ("none" axis).</span>
130+
</ResizableBox>
131+
</div>
132+
133+
<h3>Absolutely Positioned Layout</h3>
134+
<div className="layoutRoot absoluteLayout">
135+
<ResizableBox className="box absolutely-positioned top-aligned left-aligned" height={200} width={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
136+
<span className="text">Top-left Aligned</span>
137+
</ResizableBox>
138+
<ResizableBox className="box absolutely-positioned bottom-aligned left-aligned" height={200} width={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
139+
<span className="text">Bottom-left Aligned</span>
140+
</ResizableBox>
141+
{/* See implementation of `onResizeAbsolute` for how this can be moved around its container */}
142+
<Resizable
143+
className="box absolutely-positioned"
144+
height={this.state.absoluteHeight}
145+
width={this.state.absoluteWidth}
146+
onResize={this.onResizeAbsolute}
147+
resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
148+
>
149+
<div
150+
style={{
151+
width: this.state.absoluteWidth,
152+
height: this.state.absoluteHeight,
153+
margin: `${this.state.absoluteTop} 0 0 ${this.state.absoluteLeft}`,
154+
}}
155+
>
156+
<span className="text">{"Raw use of <Resizable> element with controlled position. Resize and reposition in all directions."}</span>
157+
</div>
158+
</Resizable>
159+
<ResizableBox className="box absolutely-positioned top-aligned right-aligned" height={200} width={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
160+
<span className="text">Top-right Aligned</span>
161+
</ResizableBox>
162+
<ResizableBox className="box absolutely-positioned bottom-aligned right-aligned" height={200} width={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
163+
<span className="text">Bottom-right Aligned</span>
164+
</ResizableBox>
165+
</div>
166+
167+
<h3>Scaled Absolute Layout</h3>
168+
<div>
169+
<small>
170+
If you are nesting Resizables in an element with <code>transform: scale(n)</code>, be sure to pass the same <code>n</code>&nbsp;
171+
as the <code>transformScale</code> property.
172+
<br />
173+
This box has scale 0.75.
174+
</small>
175+
</div>
176+
<div className="layoutRoot absoluteLayout scaledLayout">
177+
<ResizableBox className="box absolutely-positioned top-aligned left-aligned" width={200} height={200} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
178+
<span className="text">{"<ResizableBox> with incorrect scale 1"}</span>
179+
</ResizableBox>
180+
181+
<ResizableBox className="box absolutely-positioned bottom-aligned left-aligned" width={200} height={200} transformScale={0.75} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
182+
<span className="text">{"<ResizableBox> with correct scale 0.75"}</span>
183+
</ResizableBox>
184+
185+
{/* See implementation of `onResizeAbsolute` for how this can be moved around its container */}
186+
<Resizable
187+
className="box absolutely-positioned"
188+
height={this.state.absoluteHeight}
189+
width={this.state.absoluteWidth}
190+
onResize={this.onResizeAbsolute}
191+
transformScale={0.75}
192+
resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
193+
>
194+
<div
195+
style={{
196+
width: this.state.absoluteWidth,
197+
height: this.state.absoluteHeight,
198+
margin: `${this.state.absoluteTop} 0 0 ${this.state.absoluteLeft}`,
199+
}}
200+
>
201+
<span className="text">{"Raw use of <Resizable> element with controlled position. Resize and reposition in all directions."}</span>
202+
</div>
203+
</Resizable>
204+
205+
<ResizableBox className="box absolutely-positioned top-aligned right-aligned" width={200} height={200} transformScale={0.75} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
206+
<span className="text">{"<ResizableBox> with correct scale 0.75"}</span>
207+
</ResizableBox>
208+
209+
<ResizableBox className="box absolutely-positioned bottom-aligned right-aligned" width={200} height={200} transformScale={0.75} resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}>
210+
<span className="text">{"<ResizableBox> with correct scale 0.75"}</span>
211+
</ResizableBox>
212+
</div>
213+
214+
</div>
215+
);
216+
}
217+
}

‎examples/example.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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+
.scaledLayout {
14+
width: 125%;
15+
left: -12.5vw;
16+
transform: scale(0.75);
17+
margin-top: -7.5vh;
18+
}
19+
20+
.box {
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
flex-direction: column;
25+
background: #ccc;
26+
border: 1px solid black;
27+
text-align: center;
28+
padding: 10px;
29+
box-sizing: border-box;
30+
margin-bottom: 10px;
31+
overflow: hidden;
32+
position: relative;
33+
margin: 20px;
34+
}
35+
.box .text {
36+
text-align: center;
37+
}
38+
39+
.hover-handles .react-resizable-handle {
40+
display: none;
41+
}
42+
.hover-handles:hover .react-resizable-handle {
43+
display: block;
44+
}
45+
.absolutely-positioned {
46+
position: absolute !important;
47+
}
48+
.left-aligned {
49+
left: 0;
50+
}
51+
.right-aligned {
52+
right: 0;
53+
}
54+
.top-aligned {
55+
top: 0;
56+
}
57+
.bottom-aligned {
58+
bottom: 0;
59+
}
60+
61+
.custom-box {
62+
overflow: visible;
63+
}
64+
.custom-handle {
65+
position: absolute;
66+
width: 8px;
67+
height: 8px;
68+
background-color: #1153aa;
69+
opacity: 0.75;
70+
border-radius: 4px;
71+
}
72+
.custom-handle-sw {
73+
bottom: -4px;
74+
left: -4px;
75+
cursor: sw-resize;
76+
}
77+
.custom-handle-se {
78+
bottom: -4px;
79+
right: -4px;
80+
cursor: se-resize;
81+
}
82+
.custom-handle-nw {
83+
top: -4px;
84+
left: -4px;
85+
cursor: nw-resize;
86+
}
87+
.custom-handle-ne {
88+
top: -4px;
89+
right: -4px;
90+
cursor: ne-resize;
91+
}
92+
.custom-handle-w,
93+
.custom-handle-e {
94+
top: 50%;
95+
margin-top: -4px;
96+
cursor: ew-resize;
97+
}
98+
.custom-handle-w {
99+
left: -4px;
100+
}
101+
.custom-handle-e {
102+
right: -4px;
103+
}
104+
.custom-handle-n,
105+
.custom-handle-s {
106+
left: 50%;
107+
margin-left: -4px;
108+
cursor: ns-resize;
109+
}
110+
.custom-handle-n {
111+
top: -4px;
112+
}
113+
.custom-handle-s {
114+
bottom: -4px;
115+
}
116+
.custom-resize-handle-component {
117+
background-color: red;
118+
}

0 commit comments

Comments
 (0)