Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c432d4b

Browse files
committed
Merge pull request bokuweb#33 from bokuweb/next
Next
2 parents 279f85b + c946d0d commit c432d4b

File tree

11 files changed

+498
-308
lines changed

11 files changed

+498
-308
lines changed

‎.babelrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["react", "es2015"]
2+
"presets": ["react", "es2015", "stage-0"]
33
}

‎.eslintrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "airbnb",
3+
"parser": "babel-eslint",
4+
"env": {
5+
"browser": true,
6+
"mocha": true,
7+
}
8+
}

‎README.md‎

Lines changed: 123 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,17 @@
22

33
Resizable and movable component for React.
44

5-
[![Build Status](https://travis-ci.org/bokuweb/react-resizable-and-movable.svg?branch=master)](https://travis-ci.org/bokuweb/react-resizable-and-movable)
6-
[![License](http://img.shields.io/npm/l/object.assign.svg)](https://github.com/bokuweb/react-resizable-box#license)
5+
[![Build Status](https://img.shields.io/travis/bokuweb/react-resizable-and-movable.svg?style=flat-square)](https://travis-ci.org/bokuweb/react-resizable-and-movable)
6+
[![Version](https://img.shields.io/npm/v/react-resizable-and-movable.svg?style=flat-square)](https://www.npmjs.com/package/react-resizable-and-movable)
7+
[![Code Climate](https://img.shields.io/codeclimate/github/bokuweb/react-resizable-and-movable/badges/gpa.svg?style=flat-square)](https://codeclimate.com/github/bokuweb/react-resizable-and-movable)
8+
[![License](https://img.shields.io/npm/l/react-resizable-and-movable.svg?style=flat-square)](https://github.com/bokuweb/react-resizable-and-movable#license)
79

810
## Demo
911

1012
![screenshot](https://raw.githubusercontent.com/bokuweb/react-resazable-and-movable/master/screenshot.gif)
13+
1114
See demo: [http://bokuweb.github.io/react-resizable-and-movable](http://bokuweb.github.io/react-resizable-and-movable)
1215

13-
## Important Note
14-
15-
This is an alpha release. Use with caution and hope.
16-
1716
## Installation
1817

1918
```sh
@@ -26,7 +25,10 @@ npm i react-resizable-and-movable
2625

2726
``` javascript
2827
<ResizableAndMovable
29-
start={{x:20, y:20, width:200, height:200}}
28+
x={20}
29+
y={20}
30+
width={200}
31+
height={200}
3032
>
3133
<p>Example</p>
3234
</ResizableAndMovable>
@@ -36,8 +38,11 @@ npm i react-resizable-and-movable
3638

3739
``` javascript
3840
<ResizableAndMovable
39-
start={{x:20, y: 20, width: 200, height: 200}}
40-
customStyle={{background:"#333", textAlign:"center", paddingTop: '20px'}}
41+
x={20}
42+
y={20}
43+
width={200}
44+
height={200}
45+
style={{ background: '#333', textAlign: 'center', paddingTop: '20px' }}
4146
minWidth={200}
4247
minHeight={200}
4348
maxWidth={300}
@@ -58,106 +63,157 @@ npm i react-resizable-and-movable
5863
<p>max 300px x 300px</p>
5964
</ResizableAndMovable>
6065
```
66+
6167
## Properties
6268

63-
#### start {x: number, y:number, width:number, height:number}
69+
#### `width`: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
6470

65-
Specifies the `x` ,`y`, `width` and `height` that the component should start at.
6671

72+
The `width` property is used to set the width of a component.
73+
For example, you can set `300`, `'300px'`, `50%`.
74+
If ommited, set `'auto'`.
6775

68-
#### minWidth {number}
6976

70-
Specifies the minimum width of the component.
71-
This is generally not necessary to use.
77+
#### `height`: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
7278

73-
#### minHeight {number}
7479

75-
Specifies the minimum height of the component.
76-
This is generally not necessary to use.
80+
The `height` property is used to set the width of a component.
81+
For example, you can set `300`, `'300px'`, `50%`.
82+
If ommited, set `'auto'`.
7783

78-
#### maxWidth {number}
84+
#### `minWidth`: PropTypes.number
7985

80-
Specifies the maximum width of the component.
81-
This is generally not necessary to use.
8286

83-
#### maxHeight {number}
87+
The `minWidth` property is used to set the minimum width of a component.
8488

85-
Specifies the maximum height of the component.
86-
This is generally not necessary to use.
8789

88-
#### customClass {string}
90+
#### `minHeight`: PropTypes.number
8991

90-
The css class set on the component.
91-
This is generally not necessary to use.
9292

93-
#### customStyle {object}
93+
The `minHeight` property is used to set the minimum height of a component.
9494

95-
The css style set on the component.
96-
This is generally not necessary to use.
9795

98-
#### isResizable {object}
96+
#### `maxWidth`: PropTypes.number
9997

100-
The permission of x, y, xy direction resizing.
101-
If omitted, x, y, xy direction resizing is enabled.
102-
Forexample, If you want to permit only x direction resizing, set `{x:true, y:false, xy:false}`.
103-
Default value is `{x:true, y:true, xy:true}`.
10498

105-
#### moveAxis {string}
99+
The `maxWidth` property is used to set the maximum width of a component.
100+
101+
102+
#### `maxHeight`: PropTypes.number
103+
104+
105+
The `maxheight` property is used to set the maximum height of a component.
106+
107+
108+
#### `className`: PropTypes.string
109+
110+
111+
The `className` property is used to set the custom `className` of a component.
112+
113+
114+
#### `style`: Proptypes.object
115+
116+
117+
The `style` property is used to set the custom `style` of a component.
118+
119+
#### `resizerHandleStyle`: PropTypes.shape({ top: PropTypes.object, right: PropTypes.object, bottom: PropTypes.object, left: PropTypes.object, topRight: PropTypes.object, bottomRight: PropTypes.object, bottomLeft: PropTypes.object, topLeft: PropTypes.object })
120+
121+
122+
The `resizerHandleStyle` property is used to override the style of one or more resize handles.
123+
Only the axis you specify will have its handle style replaced.
124+
If you specify a value for `right` it will completely replace the styles for the `right` resize handle,
125+
but other handle will still use the default styles.
126+
127+
128+
#### `isResizable`: PropTypes.shape({ top: PropTypes.bool, right: PropTypes.bool, bottom: PropTypes.bool, left: PropTypes.bool, topRight: PropTypes.bool, bottomRight: PropTypes.bool, bottomLeft: PropTypes.bool, topLeft: PropTypes.bool })
129+
130+
131+
The `isResizable` property is used to set the resizable permission of a resizable component.
132+
133+
The permission of `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` direction resizing.
134+
If omitted, all resizer are enabled.
135+
If you want to permit only right direction resizing, set `{ top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false }`.
136+
137+
138+
#### `onClick`: PropTypes.func
139+
140+
141+
Calls when resizable component clicked.
106142

107-
The direction of allowed movement (dragging) allowed ('x','y','both','none').
108143

109-
#### onClick {func}
144+
#### `onTouchStart`: PropTypes.func
110145

111-
Callback called on component clicked.
112146

113-
#### onTouchStart {func}
147+
Calls when resizable component touched.
148+
149+
150+
#### `onDoubleClick`: PropTypes.func
151+
152+
153+
Calls when resizable component double clicked.
114154

115-
Callback called on component touched.
116155

117156
#### `onResizeStart`: PropTypes.func
118157

158+
119159
Calls when resizable component resize starts.
120-
Calls back with (`direction: string`, `event: object`)
160+
Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`, `event: object`)
121161

122-
- direction: `x` or `y` or `xy`
162+
- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
163+
- styleSize: `{ width, height }`
164+
- this argument is {width, height} of getComputedStyle.
165+
- clientSize: `{ width`, height }`
166+
- this argument is `clientWidth` and `clientHeight`.
123167
- event: `mouse down event`
124168

169+
125170
#### `onResize`: PropTypes.func
126171

172+
127173
Calls when resizable component resize.
128-
Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`)
174+
Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`, `delta: object`)
129175

130-
- direction: `x` or `y` or `xy`
131-
- getComputedStyleSize: `{ width, height }`
176+
- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
177+
- styleSize: `{ width, height }`
132178
- this argument is {width, height} of getComputedStyle.
133179
- clientSize: `{ width`, height }`
134180
- this argument is `clientWidth` and `clientHeight`.
181+
- delta: `{ width`, height }`
182+
- this delta width and height by resize.
135183

136-
For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'x', this callback is called with `('x', { width: 100, height: 200 }, { width: 140, height: 240 })`
184+
For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'right' 20px, this callback is called with `('right', { width: 120, height: 200 }, { width: 160, height: 240 }, {width: 20, height: 0})`
185+
137186

138187
#### `onResizeStop`: PropTypes.func
139188

140-
Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`)
141189

142-
- direction: `x` or `y` or `xy`
143-
- getComputedStyleSize: `{ width, height }`
190+
Calls back with (`direction: string`, `styleSize: object`, `clientSize: object`, `delta: object`)
191+
192+
- direction: `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, and `topLeft`.
193+
- styleSize: `{ width, height }`
144194
- this argument is {width, height} of getComputedStyle.
145195
- clientSize: `{ width`, height }`
146196
- this argument is `clientWidth` and `clientHeight`.
197+
- delta: `{ width`, height }`
198+
- this delta width and height by resize.
147199

148-
For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'x', this callback is called with `('x', { width: 100, height: 200 }, { width: 140, height: 240 })`
200+
For example, when `<Resizable width={100} height={200} style={{ padding: '20px'}} onResize={...} />` mounted and resize 'right' 20px, this callback is called with `('right', { width: 120, height: 200 }, { width: 160, height: 240 }, {width: 20, height: 0})`
201+
149202

150-
#### onDrageStart {func}
203+
#### `moveAxis`: PropTypes.string
204+
205+
The direction of allowed movement (dragging) allowed ('x','y','both','none').
206+
207+
#### `onDrageStart`: PropTypes.func
151208

152209
Callback called on dragging start.
153210

154-
#### onDrage {func}
211+
#### `onDrage`: PropTypes.func
155212

156213
Callback called on resizing.
157214
`onDrag` called with the following parameters:
158215

159216

160-
161217
``` javascript
162218
(
163219
event: Event,
@@ -172,13 +228,12 @@ Callback called on resizing.
172228
)
173229
```
174230

175-
#### onDrageStop {func}
231+
#### `onDrageStop`: PropTypes.func
176232

177233
Callback called on dragging stop.
178234
`onDragStop` called with the following parameters:
179235

180236

181-
182237
``` javascript
183238
(
184239
event: Event,
@@ -193,17 +248,7 @@ Callback called on dragging stop.
193248
)
194249
```
195250

196-
#### initAsResizing {object}
197-
198-
The component begins as if a resize event occurred.
199-
This is useful if you would like to click and drag to create a box (e.g. click and drag out a selection window).
200-
If omitted, component does not call resize when created.
201-
202-
Accepted Value: `{enable:true, direction: 'both', event:event}` where direction can be 'x', 'y' or 'xy' and event is the current mouse event
203-
204-
Note that `event.persist()` must be called so the mouse event can be passed to ResizableAndMovable
205-
206-
#### bounds {object|string}
251+
#### `bounds`: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
207252

208253
Specifies movement boundaries. Accepted values:
209254
- `parent` restricts movement within the node's offsetParent
@@ -212,11 +257,16 @@ Specifies movement boundaries. Accepted values:
212257
These indicate how far in each direction the draggable
213258
can be moved.
214259

215-
#### handle {string}
260+
#### `dragHandlerClassName`: PropTypes.string
216261

217262
Specifies a selector to be used as the handle that initiates drag.
218263
Example: '.handle'.
219264

265+
#### `zIndex`: PropTypes.number
266+
267+
The `zIndex` property is used to set the zindex of a component.
268+
269+
220270
## Test
221271

222272
``` sh
@@ -225,10 +275,15 @@ npm t
225275

226276
## TODO
227277

228-
- [] support v15.0
278+
- [x] support react v15.x
229279

230280
## Changelog
231281

282+
#### v1.0.0
283+
284+
- Support react v15.x
285+
- Support left, top resizer
286+
232287
#### v0.5.3
233288

234289
- Add handle selector

‎example/bg-1.jpg‎

2 MB
Loading[フレーム]

‎example/index.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,21 @@
55
<title>React-resizable-and-movable example</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<style>
8-
html, body {
9-
width:100%;
10-
height:100%;
11-
margin:0;
12-
padding:0;
13-
background:#fff;
14-
color:#fff;
15-
}
8+
html, body, #content{
9+
min-height: 100%;
10+
height: 100%;
11+
}
12+
body {
13+
background: url('bg-1.jpg');
14+
background-size:cover;
15+
background-repeat: no-repeat;
16+
}
1617
</style>
1718
</head>
1819

1920
<body>
20-
<div id="content"></div>
21+
<div id="content"></div>
22+
<a href="https://github.com/bokuweb/react-resizable-and-movable" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#2C3E50; color:#FFF; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
2123
<script src="dist/bundle.js"></script>
2224
</body>
2325

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /