Skip to content

Commit 12ab66d

Browse files
iny7iny7
authored
Merge pull request #4 from mockingbot/use-create-react-library
OPT: init [email protected]
2 parents 7ab45df + cb68b14 commit 12ab66d

22 files changed

+12085
-8098
lines changed

‎.babelrc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": [
3+
["env", {
4+
"modules": false
5+
}],
6+
"stage-0",
7+
"react"
8+
],
9+
"plugins": [
10+
"external-helpers"
11+
]
12+
}

‎.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintrc‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends": [
4+
"standard",
5+
"standard-react"
6+
],
7+
"env": {
8+
"es6": true
9+
},
10+
"plugins": [
11+
"react"
12+
],
13+
"parserOptions": {
14+
"sourceType": "module"
15+
},
16+
"rules": {
17+
// don't force es6 functions to include space before paren
18+
"space-before-function-paren": 0,
19+
20+
// allow specifying true explicitly for boolean props
21+
"react/jsx-boolean-value": 0,
22+
"jsx-quotes": [ "error", "prefer-double" ],
23+
"no-return-assign": 0
24+
}
25+
}

‎.gitignore‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
# Logs
2-
logs
3-
*.log
41

5-
# Dependency directory
2+
# See https://help.github.com/ignore-files/ for more about ignoring files.
3+
4+
# dependencies
65
node_modules
76

8-
# WebStorm configuration
9-
.idea
7+
# builds
8+
build
9+
dist
1010

11-
# distribute file
12-
**/*-gitignore/**
13-
**/*-gitignore*
14-
/*.tgz
11+
# misc
12+
.DS_Store
13+
.env
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
1518

16-
/lib
17-
/example/index.js
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

‎README.md‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
# React-resizable-rotatable-draggable-rectangle
22

3+
>
4+
5+
[![NPM](https://img.shields.io/npm/v/react-resizable-rotatable-draggable.svg)](https://www.npmjs.com/package/react-resizable-rotatable-draggable) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
36

47
A react widget that can be resized and rotated via a handler.
58

69
### Installation
710

8-
`npm install --save react-resizable-rotatable-draggable`
9-
11+
```bash
12+
npm install --save react-resizable-rotatable-draggable`
13+
```
1014

1115
Then you will need to install peer dependency
1216

13-
14-
`npm install --save styled-components`
17+
```bash
18+
npm install --save styled-components`
19+
```
1520

1621
### Usage
1722

18-
```javascript
23+
```jsx
1924
import React, { Component } from 'react'
2025
import ResizableRect from 'react-resizable-rotatable-draggable'
2126

@@ -117,3 +122,7 @@ export default App
117122
|onDragStart | func | // | // |
118123
|onDrag | func | // | (deltaX, deltaY) |
119124
|onDragEnd | func | // | // |
125+
126+
## License
127+
128+
MIT © [Mockingbot](https://github.com/mockingbot)

‎babel.config.js‎

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

‎example/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "react-resizable-rotatable-draggable-example",
3+
"homepage": "https://mockingbot.github.io/react-resizable-rotatable-draggable",
4+
"version": "0.0.0",
5+
"license": "MIT",
6+
"private": true,
7+
"dependencies": {
8+
"prop-types": "^15.6.2",
9+
"react": "^16.4.1",
10+
"react-dom": "^16.4.1",
11+
"react-resizable-rotatable-draggable": "link:..",
12+
"react-scripts": "^1.1.4",
13+
"styled-components": "^3.4.10"
14+
},
15+
"scripts": {
16+
"start": "react-scripts start",
17+
"build": "react-scripts build",
18+
"test": "react-scripts test --env=jsdom",
19+
"eject": "react-scripts eject"
20+
}
21+
}

‎example/public/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
8+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
9+
10+
<title>react-resizable-rotatable-draggable</title>
11+
</head>
12+
13+
<body>
14+
<noscript>
15+
You need to enable JavaScript to run this app.
16+
</noscript>
17+
18+
<div id="root"></div>
19+
</body>
20+
</html>

‎example/public/manifest.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"short_name": "react-resizable-rotatable-draggable",
3+
"name": "react-resizable-rotatable-draggable",
4+
"start_url": "./index.html",
5+
"display": "standalone",
6+
"theme_color": "#000000",
7+
"background_color": "#ffffff"
8+
}

‎src/index.example.js‎ renamed to ‎example/src/App.js‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { Component } from 'react'
2-
import ReactDOM from 'react-dom'
3-
import ResizableRect from './ResizableRect'
2+
3+
import Resizer from 'react-resizable-rotatable-draggable'
44
import styled from 'styled-components'
55

66
const RootDiv = styled.div`
7-
text-align: center;
7+
text-align: center;
88
`
99

10-
class AppExample extends Component {
10+
export default class App extends Component {
1111
constructor () {
1212
super()
1313
this.state = {
@@ -19,24 +19,17 @@ class AppExample extends Component {
1919
}
2020
}
2121

22-
handleResize = (style, isShiftKey, type) => {
23-
let { top, left, width, height } = style
24-
top = Math.round(top)
25-
left = Math.round(left)
26-
width = Math.round(width)
27-
height = Math.round(height)
22+
handleResize = ({ top, left, width, height }, isShiftKey, type) => {
2823
this.setState({
29-
top,
30-
left,
31-
width,
32-
height
24+
top: Math.round(top),
25+
left: Math.round(left),
26+
width: Math.round(width),
27+
height: Math.round(height)
3328
})
3429
}
3530

3631
handleRotate = (rotateAngle) => {
37-
this.setState({
38-
rotateAngle
39-
})
32+
this.setState({ rotateAngle })
4033
}
4134

4235
handleDrag = (deltaX, deltaY) => {
@@ -47,14 +40,21 @@ class AppExample extends Component {
4740
}
4841

4942
handleRotateEnd = () => console.log('aa')
50-
handleRotateStart = () => console.log("start")
43+
44+
handleRotateStart = () => console.log('start')
45+
5146
render () {
5247
const { width, top, left, height, rotateAngle } = this.state
5348

5449
return (
5550
<RootDiv className="App">
56-
<ResizableRect
57-
{...{ left, top, width, height, rotateAngle }}
51+
<Resizer
52+
top={top}
53+
left={left}
54+
width={width}
55+
height={height}
56+
rotateAngle={rotateAngle}
57+
5858
// aspectRatio={false}
5959
minWidth={-Infinity}
6060
minHeight={-Infinity}
@@ -74,7 +74,3 @@ handleRotateStart = () => console.log("start")
7474
)
7575
}
7676
}
77-
78-
const init = (element) => { ReactDOM.render(<AppExample />, element) }
79-
80-
export { init }

0 commit comments

Comments
 (0)