Skip to content

Commit 383fe9e

Browse files
florianstahrflorianstahr
committed
Merge branch 'feature/add--settings-button' into develop
2 parents d48f831 + 6fca39a commit 383fe9e

File tree

4 files changed

+151
-5
lines changed

4 files changed

+151
-5
lines changed

‎README.md

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,5 +237,23 @@ const modalStyle = {
237237
| `trackColor` | switch track color [see React Native Switch prop `trackColor`](https://facebook.github.io/react-native/docs/switch#trackcolor) | Object | `null` |
238238
| `switchProps` | `Switch` component props except the ones mentioned before | `Switch` Component Props | `{}` |
239239

240-
## Showcase
240+
### SettingsButton
241+
242+
| Prop | Description | Type | Default |
243+
|:------------------------|:------------------------------------------------------------------|:---------------------------------|:-----------|
244+
| `containerProps` | container props except style | `View` Component Props | `{}` |
245+
| `containerStyle` | container style prop | ViewPropTypes | `{}` |
246+
| `disabledOverlayStyle` | component overlay style if setting is disabled | ViewPropTypes | `{}` |
247+
| `titleProps` | title props except style | `Text` Component Props | `{}` |
248+
| `titleStyle` | title style prop | `Text` PropTypes | `{}` |
249+
| `title` | title of setting | String | *Required* |
250+
| `descriptionProps` | description props except style | `Text` Component Props | `{}` |
251+
| `descriptionStyle` | description style prop | `Text` PropTypes | `{}` |
252+
| `description` | description of setting | String | null |
253+
| `rightIconWrapperStyle` | wrapper style prop of wrapper around rightBtn | `View` Component Props | `{}` |
254+
| `rightIcon` | anything that should be displayed on the right side of the button | Function () => <React.Component> | `null` |
255+
| `disabled` | whether the settings value should be editable or not | Boolean | `false` |
256+
| `onPress` | callback to be invoked when the button is pressed | Function (Boolean) => null | *Required* |
257+
258+
## Showcase - v0.0.1
241259
![react-native-settings-components ios screenshot](https://i.imgur.com/5cV48CA.png "Screenshot iOS") ![react-native-settings-components android screenshot](https://i.imgur.com/VKCqNaA.png "Screenshot Android")

‎src/button/button.jsx

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import React, { Component } from 'react';
2+
import {
3+
StyleSheet, Text, TouchableOpacity, View,
4+
} from 'react-native';
5+
import PropTypes from 'prop-types';
6+
7+
const style = StyleSheet.create({
8+
defaultContainerStyle: {
9+
padding: 0,
10+
minHeight: 50,
11+
backgroundColor: 'white',
12+
position: 'relative',
13+
},
14+
wrapper: {
15+
alignItems: 'center',
16+
flexDirection: 'row',
17+
flex: 1,
18+
},
19+
defaultTitleStyle: {
20+
flex: 0,
21+
paddingLeft: 16,
22+
paddingRight: 16,
23+
fontSize: 16,
24+
},
25+
defaultDescriptionStyle: {
26+
flex: 0,
27+
paddingLeft: 16,
28+
paddingRight: 16,
29+
fontSize: 12,
30+
},
31+
defaultRightIconWrapperStyle: {
32+
flex: 0,
33+
},
34+
defaultDisabledOverlayStyle: {
35+
backgroundColor: 'rgba(255,255,255,0.6)',
36+
position: 'absolute',
37+
top: 0,
38+
right: 0,
39+
bottom: 0,
40+
left: 0,
41+
},
42+
titleWrapper: { flex: 1, position: 'relative' },
43+
});
44+
45+
class SettingsButton extends Component {
46+
static propTypes = {
47+
containerProps: PropTypes.object,
48+
containerStyle: PropTypes.object,
49+
disabledOverlayStyle: PropTypes.object,
50+
titleProps: PropTypes.object,
51+
titleStyle: PropTypes.object,
52+
title: PropTypes.string.isRequired,
53+
descriptionProps: PropTypes.object,
54+
descriptionStyle: PropTypes.object,
55+
description: PropTypes.string,
56+
rightIconWrapperStyle: PropTypes.object,
57+
rightIcon: PropTypes.func,
58+
disabled: PropTypes.bool,
59+
onPress: PropTypes.func.isRequired,
60+
61+
};
62+
63+
static defaultProps = {
64+
containerProps: {},
65+
containerStyle: {},
66+
disabledOverlayStyle: {},
67+
titleProps: {},
68+
titleStyle: {},
69+
descriptionProps: {},
70+
descriptionStyle: {},
71+
description: null,
72+
rightIconWrapperStyle: {},
73+
rightIcon: null,
74+
disabled: false,
75+
};
76+
77+
render() {
78+
const {
79+
containerProps, containerStyle, titleProps, titleStyle, title, disabled,
80+
disabledOverlayStyle, rightIconWrapperStyle, rightIcon,
81+
onPress, descriptionProps, descriptionStyle, description,
82+
} = this.props;
83+
84+
return (
85+
<TouchableOpacity
86+
activeOpacity={0.8}
87+
{...containerProps}
88+
style={[style.defaultContainerStyle, containerStyle]}
89+
onPress={onPress}
90+
>
91+
<View style={style.wrapper}>
92+
<View style={style.titleWrapper}>
93+
<Text
94+
{...titleProps}
95+
style={[style.defaultTitleStyle, titleStyle]}
96+
>
97+
{title}
98+
</Text>
99+
{description ? (
100+
<Text
101+
{...descriptionProps}
102+
style={[style.defaultDescriptionStyle, descriptionStyle]}
103+
>
104+
{description}
105+
</Text>
106+
) : null}
107+
</View>
108+
{rightIcon ? (
109+
<View
110+
style={[style.defaultRightIconWrapperStyle, rightIconWrapperStyle]}
111+
>
112+
{rightIcon()}
113+
</View>
114+
) : null}
115+
{(disabled) ? (
116+
<View
117+
style={[style.defaultDisabledOverlayStyle, (disabled) ? disabledOverlayStyle : null]}
118+
/>
119+
) : null}
120+
</View>
121+
</TouchableOpacity>
122+
);
123+
}
124+
}
125+
126+
export default SettingsButton;

‎src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import SettingsPicker from './picker/picker';
55
import SettingsCategoryHeader from './category-header/category-header';
66
import SettingsTextLabel from './text-label/text-label';
77
import SettingsSwitch from './switch/switch';
8+
import SettingsButton from './button/button';
89

910
export {
1011
SettingsDividerShort,
@@ -14,4 +15,5 @@ export {
1415
SettingsCategoryHeader,
1516
SettingsTextLabel,
1617
SettingsSwitch,
18+
SettingsButton,
1719
};

‎src/switch/switch.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const style = StyleSheet.create({
4343

4444
class SettingsSwitch extends Component {
4545
static propTypes = {
46-
container: PropTypes.object,
46+
containerProps: PropTypes.object,
4747
containerStyle: PropTypes.object,
4848
disabledOverlayStyle: PropTypes.object,
4949
titleProps: PropTypes.object,
@@ -65,7 +65,7 @@ class SettingsSwitch extends Component {
6565
};
6666

6767
static defaultProps = {
68-
container: {},
68+
containerProps: {},
6969
containerStyle: {},
7070
disabledOverlayStyle: {},
7171
titleProps: {},
@@ -82,13 +82,13 @@ class SettingsSwitch extends Component {
8282

8383
render() {
8484
const {
85-
container, containerStyle, titleProps, titleStyle, title, disabled, switchProps,
85+
containerProps, containerStyle, titleProps, titleStyle, title, disabled, switchProps,
8686
disabledOverlayStyle, switchWrapperProps, switchWrapperStyle, value,
8787
trackColor, onValueChange, descriptionProps, descriptionStyle, description,
8888
} = this.props;
8989

9090
return (
91-
<View {...container} style={[style.defaultContainerStyle, containerStyle]}>
91+
<View {...containerProps} style={[style.defaultContainerStyle, containerStyle]}>
9292
<View style={style.titleWrapper}>
9393
<Text
9494
{...titleProps}

0 commit comments

Comments
 (0)