Skip to content

Commit 82df3a1

Browse files
silentcloudsilentcloud
committed
feat: dialog for mobile
1 parent 50d8335 commit 82df3a1

25 files changed

+1558
-1
lines changed

‎.editorconfig

Lines changed: 9 additions & 0 deletions
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

‎.gitignore

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
*.iml
2+
*.log
3+
*.log.*
4+
.idea
5+
.ipr
6+
.iws
7+
*~
8+
~*
9+
*.diff
10+
*.patch
11+
*.bak
12+
.DS_Store
13+
Thumbs.db
14+
.project
15+
.*proj
16+
.svn
17+
*.swp
18+
*.swo
19+
*.pyc
20+
*.pyo
21+
node_modules
22+
.cache
23+
*.css
24+
build
25+
lib
26+
es
27+
coverage
28+
*.js
29+
*.jsx
30+
*.map
31+
!tests/index.js
32+
!/index*.js
33+
/ios/
34+
/android/
35+
yarn.lock
36+
_ts2js

‎.travis.yml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
language: node_js
2+
3+
sudo: false
4+
5+
notifications:
6+
email:
7+
- [email protected]
8+
9+
node_js:
10+
- 6.9.1
11+
12+
before_install:
13+
- |
14+
if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
15+
then
16+
echo "Only docs were updated, stopping build process."
17+
exit
18+
fi
19+
phantomjs --version
20+
script:
21+
- |
22+
if [ "$TEST_TYPE" = test ]; then
23+
npm test
24+
else
25+
npm run $TEST_TYPE
26+
fi
27+
env:
28+
matrix:
29+
- TEST_TYPE=lint
30+
- TEST_TYPE=test
31+
- TEST_TYPE=coverage

‎HISTORY.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# History
2+
----
3+
4+
## 0.0.1
5+
6+
`new` init

‎LICENSE.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014-present yiminghe
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6+
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 281 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,281 @@
1-
# m-dialog
1+
# m-dialog
2+
---
3+
4+
react dialog component for mobile
5+
6+
[![NPM version][npm-image]][npm-url]
7+
[![build status][travis-image]][travis-url]
8+
[![Test coverage][coveralls-image]][coveralls-url]
9+
[![gemnasium deps][gemnasium-image]][gemnasium-url]
10+
[![npm download][download-image]][download-url]
11+
12+
[npm-image]: http://img.shields.io/npm/v/rmc-dialog.svg?style=flat-square
13+
[npm-url]: http://npmjs.org/package/rmc-dialog
14+
[travis-image]: https://img.shields.io/travis/react-component/m-dialog.svg?style=flat-square
15+
[travis-url]: https://travis-ci.org/react-component/m-dialog
16+
[coveralls-image]: https://img.shields.io/coveralls/react-component/m-dialog.svg?style=flat-square
17+
[coveralls-url]: https://coveralls.io/r/react-component/m-dialog?branch=master
18+
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-dialog.svg?style=flat-square
19+
[gemnasium-url]: https://gemnasium.com/react-component/m-dialog
20+
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
21+
[node-url]: http://nodejs.org/download/
22+
[download-image]: https://img.shields.io/npm/dm/rmc-dialog.svg?style=flat-square
23+
[download-url]: https://npmjs.org/package/rmc-dialog
24+
25+
## Screenshot
26+
27+
<img src="http://gtms04.alicdn.com/tps/i4/TB1dp5lHXXXXXbmXpXXyVug.FXX-664-480.png" />
28+
29+
## Install
30+
31+
[![rmc-dialog](https://nodei.co/npm/rmc-dialog.png)](https://npmjs.org/package/rmc-dialog)
32+
33+
## Usage
34+
35+
```js
36+
var Dialog = require('rmc-dialog');
37+
38+
ReactDOM.render(
39+
<Dialog title={title} onClose={callback1} visible>
40+
<p>first dialog</p>
41+
</Dialog>
42+
), document.getElementById('t1'));
43+
44+
// use dialog
45+
```
46+
47+
## API
48+
49+
### rmc-dialog(web)
50+
51+
52+
<table class="table table-bordered table-striped">
53+
<thead>
54+
<tr>
55+
<th style="width: 100px;">name</th>
56+
<th style="width: 50px;">type</th>
57+
<th>default</th>
58+
<th>description</th>
59+
</tr>
60+
</thead>
61+
<tbody>
62+
<tr>
63+
<td>prefixCls</td>
64+
<td>String</td>
65+
<td>rmc-dialog</td>
66+
<td>The dialog dom node's prefixCls</td>
67+
</tr>
68+
<tr>
69+
<td>className</td>
70+
<td>String</td>
71+
<td></td>
72+
<td>additional className for dialog</td>
73+
</tr>
74+
<tr>
75+
<td>wrapClassName</td>
76+
<td>String</td>
77+
<td></td>
78+
<td>additional className for dialog wrap</td>
79+
</tr>
80+
<tr>
81+
<td>style</td>
82+
<td>Object</td>
83+
<td>{}</td>
84+
<td>Root style for dialog element.Such as width, height</td>
85+
</tr>
86+
<tr>
87+
<td>zIndex</td>
88+
<td>Number</td>
89+
<td></td>
90+
<td></td>
91+
</tr>
92+
<tr>
93+
<td>bodyStyle</td>
94+
<td>Object</td>
95+
<td>{}</td>
96+
<td>body style for dialog body element.Such as height</td>
97+
</tr>
98+
<tr>
99+
<td>maskStyle</td>
100+
<td>Object</td>
101+
<td>{}</td>
102+
<td>style for mask element.</td>
103+
</tr>
104+
<tr>
105+
<td>visible</td>
106+
<td>Boolean</td>
107+
<td>false</td>
108+
<td>current dialog's visible status</td>
109+
</tr>
110+
<tr>
111+
<td>animation</td>
112+
<td>String</td>
113+
<td></td>
114+
<td>part of dialog animation css class name</td>
115+
</tr>
116+
<tr>
117+
<td>maskAnimation</td>
118+
<td>String</td>
119+
<td></td>
120+
<td>part of dialog's mask animation css class name</td>
121+
</tr>
122+
<tr>
123+
<td>transitionName</td>
124+
<td>String</td>
125+
<td></td>
126+
<td>dialog animation css class name</td>
127+
</tr>
128+
<tr>
129+
<td>maskTransitionName</td>
130+
<td>String</td>
131+
<td></td>
132+
<td>mask animation css class name</td>
133+
</tr>
134+
<tr>
135+
<td>title</td>
136+
<td>String|React.Element</td>
137+
<td></td>
138+
<td>Title of the dialog</td>
139+
</tr>
140+
<tr>
141+
<td>footer</td>
142+
<td>React.Element</td>
143+
<td></td>
144+
<td>footer of the dialog</td>
145+
</tr>
146+
<tr>
147+
<td>closable</td>
148+
<td>Boolean</td>
149+
<td>true</td>
150+
<td>whether show close button</td>
151+
</tr>
152+
<tr>
153+
<td>mask</td>
154+
<td>Boolean</td>
155+
<td>true</td>
156+
<td>whether show mask</td>
157+
</tr>
158+
<tr>
159+
<td>maskClosable</td>
160+
<td>Boolean</td>
161+
<td>true</td>
162+
<td>whether click mask to close</td>
163+
</tr>
164+
<tr>
165+
<td>onClose</td>
166+
<td>function()</td>
167+
<td></td>
168+
<td>called when click close button or mask</td>
169+
</tr>
170+
</tbody>
171+
</table>
172+
173+
### rmc-dialog/lib/Dialog (react-native)
174+
175+
<table class="table table-bordered table-striped">
176+
<thead>
177+
<tr>
178+
<th style="width: 100px;">name</th>
179+
<th style="width: 50px;">type</th>
180+
<th>default</th>
181+
<th>description</th>
182+
</tr>
183+
</thead>
184+
<tbody>
185+
<tr>
186+
<td>wrapStyle</td>
187+
<td></td>
188+
<td>{}</td>
189+
<td>style for modal wrap</td>
190+
</tr>
191+
<tr>
192+
<td>maskStyle</td>
193+
<td></td>
194+
<td>{}</td>
195+
<td>style for modal mask</td>
196+
</tr>
197+
<tr>
198+
<td>style</td>
199+
<td></td>
200+
<td>{}</td>
201+
<td>style for modal</td>
202+
</tr>
203+
<tr>
204+
<td>animationType</td>
205+
<td>none|fade|slide-up|slide-down</td>
206+
<td>slide-up</td>
207+
<td>animation type for modal content</td>
208+
</tr>
209+
<tr>
210+
<td>animationDuration</td>
211+
<td>number</td>
212+
<td>300(ms)</td>
213+
<td></td>
214+
</tr>
215+
<tr>
216+
<td>visible</td>
217+
<td>boolean</td>
218+
<td></td>
219+
<td></td>
220+
</tr>
221+
<tr>
222+
<td>animateAppear</td>
223+
<td>false</td>
224+
<td></td>
225+
<td>whether animation on first show</td>
226+
</tr>
227+
<tr>
228+
<td>onClose</td>
229+
<td>()=>void</td>
230+
<td></td>
231+
<td>called when close</td>
232+
</tr>
233+
<tr>
234+
<td>onAnimationEnd</td>
235+
<td>(visible:boolean)=>void (animationType !== 'none')</td>
236+
<td></td>
237+
<td>called when animation end</td>
238+
</tr>
239+
</tbody>
240+
</table>
241+
242+
## Development
243+
244+
```
245+
npm install
246+
npm start
247+
```
248+
249+
## Example
250+
251+
http://localhost:8007/examples/
252+
253+
online example: http://react-component.github.io/m-dialog/
254+
255+
## react-native
256+
257+
```
258+
./node_modules/rc-tools run react-native-init
259+
react-native start
260+
react-native run-ios
261+
```
262+
263+
## Test Case
264+
265+
```
266+
npm test
267+
npm run chrome-test
268+
```
269+
270+
## Coverage
271+
272+
```
273+
npm run coverage
274+
```
275+
276+
open coverage/ dir
277+
278+
279+
## License
280+
281+
rmc-dialog is released under the MIT license.

‎assets/index.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@prefixCls: rmc-dialog;
2+
3+
@import "./index/Dialog.less";
4+
@import "./index/Mask.less";

0 commit comments

Comments
 (0)