Skip to content

Commit 1996f10

Browse files
yimingheyiminghe
committed
1.0
0 parents  commit 1996f10

File tree

10 files changed

+367
-0
lines changed

10 files changed

+367
-0
lines changed

Diff for: ‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# top-most EditorConfig file
2+
root = true
3+
4+
# Unix-style newlines with a newline ending every file
5+
[*.{js,css}]
6+
end_of_line = lf
7+
insert_final_newline = true
8+
indent_style = space
9+
indent_size = 2

Diff for: ‎.gitignore

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
*.iml
2+
*.log
3+
.idea/
4+
.ipr
5+
.iws
6+
*~
7+
~*
8+
*.diff
9+
*.patch
10+
*.bak
11+
.DS_Store
12+
Thumbs.db
13+
.project
14+
.*proj
15+
.svn/
16+
*.swp
17+
*.swo
18+
*.pyc
19+
*.pyo
20+
.build
21+
node_modules
22+
.cache
23+
dist
24+
assets/**/*.css
25+
build
26+
lib

Diff for: ‎HISTORY.md

Whitespace-only changes.

Diff for: ‎README.md

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# rc-align
2+
---
3+
4+
React Align Component. Wrapper around https://github.com/yiminghe/dom-align.
5+
6+
[![NPM version][npm-image]][npm-url]
7+
8+
[npm-image]: http://img.shields.io/npm/v/rc-align.svg?style=flat-square
9+
[npm-url]: http://npmjs.org/package/rc-align
10+
[travis-image]: https://img.shields.io/travis/react-component/align.svg?style=flat-square
11+
[travis-url]: https://travis-ci.org/react-component/align
12+
[coveralls-image]: https://img.shields.io/coveralls/react-component/align.svg?style=flat-square
13+
[coveralls-url]: https://coveralls.io/r/react-component/align?branch=master
14+
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/align.svg?style=flat-square
15+
[gemnasium-url]: https://gemnasium.com/react-component/align
16+
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
17+
[node-url]: http://nodejs.org/download/
18+
[download-image]: https://img.shields.io/npm/dm/rc-align.svg?style=flat-square
19+
[download-url]: https://npmjs.org/package/rc-align
20+
21+
22+
## Development
23+
24+
```
25+
npm install
26+
npm start
27+
```
28+
29+
## Example
30+
31+
http://localhost:8100/examples/
32+
33+
online example: http://react-component.github.io/align/examples/
34+
35+
36+
## Feature
37+
38+
* support ie8,ie8+,chrome,firefox,safari
39+
40+
### Keyboard
41+
42+
43+
44+
## install
45+
46+
[![rc-align](https://nodei.co/npm/rc-align.png)](https://npmjs.org/package/rc-align)
47+
48+
## Usage
49+
50+
```js
51+
var Align = require('rc-align');
52+
var React = require('react');
53+
React.render(<Align align={{}} target={function(){}}><div></div></Align>, container);
54+
```
55+
56+
will align child with target when mounted or align is changed
57+
58+
## API
59+
60+
### props
61+
62+
<table class="table table-bordered table-striped">
63+
<thead>
64+
<tr>
65+
<th style="width: 100px;">name</th>
66+
<th style="width: 50px;">type</th>
67+
<th style="width: 50px;">default</th>
68+
<th>description</th>
69+
</tr>
70+
</thead>
71+
<tbody>
72+
<tr>
73+
<td>align</td>
74+
<td>Object</td>
75+
<td></td>
76+
<td>same with alignConfig from https://github.com/yiminghe/dom-align</td>
77+
</tr>
78+
<tr>
79+
<td>target</td>
80+
<td>function():HTMLElement</td>
81+
<td>function(){return window;}</td>
82+
<td>a function which returned value is used for target from https://github.com/yiminghe/dom-align</td>
83+
</tr>
84+
<tr>
85+
<td>monitorWindowResize</td>
86+
<td>Boolean</td>
87+
<td>false</td>
88+
<td>whether realign when window is resized</td>
89+
</tr>
90+
</tbody>
91+
</table>
92+
93+
94+
## License
95+
96+
rc-align is released under the MIT license.

Diff for: ‎examples/simple.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

Diff for: ‎examples/simple.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// use jsx to render html, do not modify simple.html
2+
'use strict';
3+
4+
import Align from 'rc-align';
5+
import React from 'react';
6+
import rcUtil from 'rc-util';
7+
import assign from 'object-assign';
8+
9+
var Test = React.createClass({
10+
getInitialState(){
11+
return {
12+
monitor:true,
13+
align: {
14+
points: ['cc', 'cc']
15+
}
16+
}
17+
},
18+
19+
forceAlign(){
20+
this.setState({
21+
align: assign({}, this.state.align)
22+
});
23+
},
24+
25+
getTarget(){
26+
return React.findDOMNode(this.refs.container);
27+
},
28+
29+
toggleMonitor(){
30+
this.setState({
31+
monitor:!this.state.monitor
32+
})
33+
},
34+
35+
render(){
36+
return (<div style={{
37+
margin:50
38+
}}>
39+
<p>
40+
<button onClick={this.forceAlign}>force align</button>
41+
&nbsp;&nbsp;&nbsp;
42+
<button onClick={this.toggleMonitor}>toggle monitor</button>
43+
</p>
44+
<div
45+
ref="container"
46+
47+
style={{
48+
width:'80%',
49+
height:500,
50+
border:'1px solid red'
51+
}}>
52+
<Align
53+
target={this.getTarget}
54+
monitorWindowResize={this.state.monitor}
55+
align={this.state.align}>
56+
<div style={{
57+
position:'absolute',
58+
width:50,
59+
height:50,
60+
background:'yellow'
61+
}}>
62+
source
63+
</div>
64+
</Align>
65+
</div>
66+
</div>);
67+
}
68+
});
69+
70+
React.render(<Test />, document.getElementById('__react-content'));

Diff for: ‎index.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict';
2+
3+
// export this package's api
4+
import Align from './src/';
5+
export default Align;

Diff for: ‎package.json

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"name": "rc-align",
3+
"version": "1.0.0",
4+
"description": "align ui component for react",
5+
"keywords": [
6+
"react",
7+
"react-component",
8+
"react-align",
9+
"align"
10+
],
11+
"files": [
12+
"lib"
13+
],
14+
"homepage": "http://github.com/react-component/align",
15+
"author": "",
16+
"repository": {
17+
"type": "git",
18+
"url": "git@github.com:react-component/align.git"
19+
},
20+
"bugs": {
21+
"url": "http://github.com/react-component/align/issues"
22+
},
23+
"licenses": "MIT",
24+
"main": "./lib/index",
25+
"config": {
26+
"port": 8100
27+
},
28+
"scripts": {
29+
"build": "rc-tools run build",
30+
"precommit": "rc-tools run precommit",
31+
"less": "rc-tools run less",
32+
"gh-pages": "rc-tools run gh-pages",
33+
"start": "node --harmony node_modules/.bin/rc-server",
34+
"publish": "rc-tools run tag",
35+
"lint": "rc-tools run lint",
36+
"saucelabs": "node --harmony node_modules/.bin/rc-tools run saucelabs",
37+
"browser-test": "node --harmony node_modules/.bin/rc-tools run browser-test",
38+
"browser-test-cover": "node --harmony node_modules/.bin/rc-tools run browser-test-cover"
39+
},
40+
"devDependencies": {
41+
"expect.js": "0.3.x",
42+
"node-dev": "2.x",
43+
"object-assign": "~3.0.0",
44+
"precommit-hook": "1.x",
45+
"rc-server": "3.x",
46+
"rc-tools": "3.x",
47+
"react": "0.13.x"
48+
},
49+
"precommit": [
50+
"precommit"
51+
],
52+
"dependencies": {
53+
"rc-util": "2.x",
54+
"dom-align": "1.x"
55+
}
56+
}

Diff for: ‎src/Align.jsx

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
'use strict';
2+
3+
import React from 'react';
4+
import align from 'dom-align';
5+
import rcUtil from 'rc-util';
6+
7+
function isWindow(obj) {
8+
/*eslint-disable eqeqeq */
9+
return obj != null && obj == obj.window;
10+
/*eslint-enable eqeqeq */
11+
}
12+
13+
14+
class Align extends React.Component {
15+
constructor(props) {
16+
super(...arguments);
17+
this.handleWindowResize = this.handleWindowResize.bind(this);
18+
}
19+
20+
componentDidMount() {
21+
var props = this.props;
22+
// parent ref not attached ....
23+
setTimeout(() => {
24+
align(React.findDOMNode(this), props.target(), props.align);
25+
}, 0);
26+
27+
if (props.monitorWindowResize) {
28+
this.startMonitorWindowResize();
29+
}
30+
}
31+
32+
startMonitorWindowResize() {
33+
if (!this.resizeHandler) {
34+
this.resizeHandler = rcUtil.Dom.addEventListener(window, 'resize', this.handleWindowResize);
35+
}
36+
}
37+
38+
stopMonitorWindowResize() {
39+
if (this.resizeHandler) {
40+
this.resizeHandler.remove();
41+
this.resizeHandler = null;
42+
}
43+
}
44+
45+
handleWindowResize() {
46+
var props = this.props;
47+
align(React.findDOMNode(this), props.target(), props.align);
48+
}
49+
50+
componentWillUnmount() {
51+
this.stopMonitorWindowResize();
52+
}
53+
54+
componentDidUpdate(prevProps) {
55+
var reAlign = false;
56+
var props = this.props;
57+
var currentTarget;
58+
59+
if (prevProps.align !== props.align) {
60+
reAlign = true;
61+
currentTarget = props.target();
62+
} else {
63+
var lastTarget = prevProps.target();
64+
currentTarget = props.target();
65+
if (isWindow(lastTarget) && isWindow(currentTarget)) {
66+
reAlign = false;
67+
} else if (lastTarget !== currentTarget) {
68+
reAlign = true;
69+
}
70+
}
71+
72+
if (reAlign) {
73+
align(React.findDOMNode(this), currentTarget, props.align);
74+
}
75+
76+
if (props.monitorWindowResize) {
77+
this.startMonitorWindowResize();
78+
} else {
79+
this.stopMonitorWindowResize();
80+
}
81+
}
82+
83+
render() {
84+
return React.Children.only(this.props.children);
85+
}
86+
}
87+
88+
Align.defaultProps = {
89+
target() {
90+
return window;
91+
}
92+
};
93+
94+
Align.PropTypes = {
95+
align: React.PropTypes.object.isRequired,
96+
target: React.PropTypes.func
97+
};
98+
99+
export default Align;

Diff for: ‎src/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict';
2+
3+
// export this package's api
4+
import Align from './Align';
5+
export default Align;

0 commit comments

Comments
 (0)