Skip to content

Commit bea578a

Browse files
valerybugakovvalerybugakov
committed
Init ✨
0 parents  commit bea578a

File tree

12 files changed

+7046
-0
lines changed

12 files changed

+7046
-0
lines changed

‎.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env", "react-native"]
3+
}

‎.editorconfig

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# editorconfig.org
2+
3+
root = true
4+
5+
[*]
6+
charset = utf-8
7+
end_of_line = lf
8+
indent_size = 2
9+
indent_style = space
10+
insert_final_newline = true
11+
trim_trailing_whitespace = true
12+
13+
[*.md]
14+
trim_trailing_whitespace = false

‎.eslintrc.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
extends: standard
3+
parser: babel-eslint
4+
5+
plugins:
6+
- babel
7+
- react
8+
9+
rules:
10+
comma-dangle: [2, 'always-multiline']
11+
space-before-function-paren: [2, 'never']
12+
no-return-assign: 0
13+
react/jsx-uses-vars: 2

‎.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IJ
26+
#
27+
.idea
28+
.gradle
29+
local.properties
30+
31+
# node.js
32+
#
33+
node_modules/
34+
npm-debug.log

‎LICENSE

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

‎README.md

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# react-native-custom-actionsheet
2+
Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS.
3+
4+
<img height="500" src="./doc/ios.png"> <img height="500" src="./doc/android.png">
5+
6+
# Installation
7+
8+
```
9+
npm i -S react-native-custom-actionsheet
10+
```
11+
12+
## Usage
13+
14+
```javascript
15+
import React, { Component } from 'react'
16+
import { View, Text, StyleSheet, Modal, ListView } from 'react-native'
17+
import ActionSheet from 'react-native-custom-actionsheet'
18+
19+
const CANCEL_INDEX = 0
20+
const DESTRUCTIVE_INDEX = 4
21+
const options = [ 'Cancel', 'Apple', 'Banana', 'Watermelon', 'Durian' ]
22+
const title = 'Which one do you like?'
23+
24+
class ExampleA extends Component {
25+
state = {
26+
selected: ''
27+
}
28+
29+
showActionSheet = () => this.ActionSheet.show()
30+
31+
getActionSheetRef = ref => (this.actionSheet = ref)
32+
33+
handlePress = (index) => {
34+
this.setState({ selected: index })
35+
}
36+
37+
render() {
38+
return (
39+
<View style={styles.wrapper}>
40+
<Text style={{marginBottom: 20}}>
41+
I like {options[this.state.selected]}
42+
</Text>
43+
<Text style={styles.button} onPress={this.showActionSheet}>
44+
Example A
45+
</Text>
46+
<ActionSheet
47+
ref={this.getActionSheetRef}
48+
title={title}
49+
options={options}
50+
cancelButtonIndex={CANCEL_INDEX}
51+
destructiveButtonIndex={DESTRUCTIVE_INDEX}
52+
onPress={this.handlePress}
53+
/>
54+
</View>
55+
)
56+
}
57+
}
58+
```
59+
60+
61+
## Use ActionSheetCustom directly
62+
63+
so you can customize option and title
64+
65+
```javascript
66+
import React from 'react'
67+
import { View, Text, StyleSheet, Modal, ListView } from 'react-native'
68+
import { ActionSheetCustom as ActionSheet } from 'react-native-actionsheet'
69+
70+
const CANCEL_INDEX = 0
71+
const DESTRUCTIVE_INDEX = 4
72+
73+
const options = [
74+
'Cancel',
75+
'Apple',
76+
<Text style={{color: 'yellow'}}>Banana</Text>,
77+
'Watermelon',
78+
<Text style={{color: 'red'}}>Durian</Text>
79+
]
80+
81+
const title = <Text style={{color: '#000', fontSize: 18}}>Which one do you like?</Text>
82+
83+
class ExampleB extends React.Component {
84+
state = {
85+
selected: ''
86+
}
87+
88+
showActionSheet = () => this.ActionSheet.show()
89+
90+
getActionSheetRef = ref => (this.actionSheet = ref)
91+
92+
handlePress = (index) => {
93+
this.setState({ selected: index })
94+
}
95+
96+
render() {
97+
return (
98+
<View style={styles.wrapper}>
99+
<Text style={{ marginBottom: 20 }}>
100+
I like {options[this.state.selected]}
101+
</Text>
102+
<Text style={styles.button} onPress={this.showActionSheet}>
103+
Example B
104+
</Text>
105+
<ActionSheet
106+
ref={this.getActionSheetRef}
107+
title={title}
108+
options={options}
109+
cancelButtonIndex={CANCEL_INDEX}
110+
destructiveButtonIndex={DESTRUCTIVE_INDEX}
111+
onPress={this.handlePress}
112+
/>
113+
</View>
114+
)
115+
}
116+
}
117+
```
118+
119+
## Props
120+
121+
<table>
122+
<tr>
123+
<th>Prop name</th>
124+
<th>Desciption</th>
125+
<th>Type</th>
126+
<th>Default</th>
127+
</tr>
128+
<tr>
129+
<td>title</td>
130+
<td></td>
131+
<td>PropTypes.string or PropTypes.element</td>
132+
<td></td>
133+
</tr>
134+
<tr>
135+
<td>message</td>
136+
<td></td>
137+
<td>PropTypes.string or PropTypes.element</td>
138+
<td></td>
139+
</tr>
140+
<tr>
141+
<td>options</td>
142+
<td></td>
143+
<td>PropTypes.arrayOf([PropTypes.string, PropTypes.element])</td>
144+
<td></td>
145+
</tr>
146+
<tr>
147+
<td>tintColor</td>
148+
<td></td>
149+
<td>PropTypes.string</td>
150+
<td></td>
151+
</tr>
152+
<tr>
153+
<td>cancelButtonIndex</td>
154+
<td></td>
155+
<td>PropTypes.number</td>
156+
<td></td>
157+
</tr>
158+
<tr>
159+
<td>destructiveButtonIndex</td>
160+
<td></td>
161+
<td>PropTypes.number</td>
162+
<td></td>
163+
</tr>
164+
<tr>
165+
<td>onPress</td>
166+
<td></td>
167+
<td>PropTypes.func</td>
168+
<td>(index) => {}</td>
169+
</tr>
170+
</table>

0 commit comments

Comments
 (0)