Skip to content

Commit c552aa0

Browse files
ahmedlhanafyferrannp
ahmedlhanafy
authored and
ferrannp
committed
style: Adapt dialog to the dark theme (callstack#196)
* style: Adapt dialog to the dark theme * chore: Remove unused default prop & set correct elevation style & rename import * style: Fix textinput background color * chore: Add missing proptypes * chore: Update with latest master
1 parent bf0d65a commit c552aa0

13 files changed

+110
-58
lines changed

‎example/src/CardExample.js

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ class CardExample extends Component {
1717
static propTypes = {
1818
theme: PropTypes.object.isRequired,
1919
};
20+
2021
render() {
2122
const { theme: { colors: { background } } } = this.props;
2223
return (

‎example/src/DialogExample.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
/* @flow */
22

33
import React, { Component } from 'react';
4+
import PropTypes from 'prop-types';
45
import { View, StyleSheet } from 'react-native';
5-
import { Colors, Button } from 'react-native-paper';
6+
import { Colors, Button, withTheme } from 'react-native-paper';
67
import {
78
DialogWithCustomColors,
89
DialogWithLoadingIndicator,
@@ -11,8 +12,11 @@ import {
1112
UndismissableDialog,
1213
} from './Dialogs';
1314

14-
export default class DialogExample extends Component {
15+
class DialogExample extends Component {
1516
static title = 'Dialog';
17+
static propTypes = {
18+
theme: PropTypes.object.isRequired,
19+
};
1620

1721
state = {
1822
visible1: false,
@@ -35,9 +39,10 @@ export default class DialogExample extends Component {
3539
_closeDialog5 = () => this.setState({ visible5: false });
3640

3741
render() {
42+
const { theme: { colors: { background } } } = this.props;
3843
const { visible1, visible2, visible3, visible4, visible5 } = this.state;
3944
return (
40-
<View style={styles.container}>
45+
<View style={[styles.container, { backgroundColor: background }]}>
4146
<Button primary onPress={this._openDialog1}>
4247
Show Dialog with long text
4348
</Button>
@@ -73,3 +78,5 @@ const styles = StyleSheet.create({
7378
padding: 16,
7479
},
7580
});
81+
82+
export default withTheme(DialogExample);

‎example/src/Dialogs/DialogWithCustomColors.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const DialogWithCustomColors = ({
1212
}) => (
1313
<Dialog
1414
onRequestClose={close}
15-
style={{ backgroundColor: Colors.grey800 }}
15+
style={{ backgroundColor: Colors.purple900 }}
1616
visible={visible}
1717
>
1818
<Dialog.Title style={{ color: Colors.white }}>Alert</Dialog.Title>
@@ -22,7 +22,7 @@ const DialogWithCustomColors = ({
2222
</Paragraph>
2323
</Dialog.Content>
2424
<Dialog.Actions>
25-
<Button color={Colors.teal500} onPress={close}>
25+
<Button color={Colors.pink500} onPress={close}>
2626
OK
2727
</Button>
2828
</Dialog.Actions>

‎example/src/Dialogs/DialogWithRadioBtns.js

+44-33
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
import React, { Component } from 'react';
33
import PropTypes from 'prop-types';
44
import { ScrollView, View, StyleSheet } from 'react-native';
5-
import { Paragraph, Button, Dialog, RadioButton } from 'react-native-paper';
5+
import {
6+
Paragraph,
7+
Button,
8+
Dialog,
9+
RadioButton,
10+
TouchableRipple,
11+
} from 'react-native-paper';
612

713
type Props = {
814
visible: boolean,
@@ -31,36 +37,40 @@ export default class extends Component<void, Props, State> {
3137
<Dialog onRequestClose={close} visible={visible}>
3238
<Dialog.Title>Choose an option</Dialog.Title>
3339
<Dialog.ScrollArea style={{ maxHeight: 170, paddingHorizontal: 0 }}>
34-
<ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>
40+
<ScrollView>
3541
<View>
36-
<View style={styles.checkBoxRow}>
37-
<RadioButton
38-
checked={checked === 0}
39-
onPress={() => this.setState({ checked: 0 })}
40-
/>
41-
<Paragraph style={styles.paragraph}>Option 1</Paragraph>
42-
</View>
43-
<View style={styles.checkBoxRow}>
44-
<RadioButton
45-
checked={checked === 1}
46-
onPress={() => this.setState({ checked: 1 })}
47-
/>
48-
<Paragraph style={styles.paragraph}>Option 2</Paragraph>
49-
</View>
50-
<View style={styles.checkBoxRow}>
51-
<RadioButton
52-
checked={checked === 2}
53-
onPress={() => this.setState({ checked: 2 })}
54-
/>
55-
<Paragraph style={styles.paragraph}>Option 3</Paragraph>
56-
</View>
57-
<View style={styles.checkBoxRow}>
58-
<RadioButton
59-
checked={checked === 3}
60-
onPress={() => this.setState({ checked: 3 })}
61-
/>
62-
<Paragraph style={styles.paragraph}>Option 4</Paragraph>
63-
</View>
42+
<TouchableRipple onPress={() => this.setState({ checked: 0 })}>
43+
<View style={styles.row}>
44+
<Paragraph>Option 1</Paragraph>
45+
<View pointerEvents="none">
46+
<RadioButton value="normal" checked={checked === 0} />
47+
</View>
48+
</View>
49+
</TouchableRipple>
50+
<TouchableRipple onPress={() => this.setState({ checked: 1 })}>
51+
<View style={styles.row}>
52+
<Paragraph>Option 2</Paragraph>
53+
<View pointerEvents="none">
54+
<RadioButton value="normal" checked={checked === 1} />
55+
</View>
56+
</View>
57+
</TouchableRipple>
58+
<TouchableRipple onPress={() => this.setState({ checked: 2 })}>
59+
<View style={styles.row}>
60+
<Paragraph>Option 3</Paragraph>
61+
<View pointerEvents="none">
62+
<RadioButton value="normal" checked={checked === 2} />
63+
</View>
64+
</View>
65+
</TouchableRipple>
66+
<TouchableRipple onPress={() => this.setState({ checked: 3 })}>
67+
<View style={styles.row}>
68+
<Paragraph>Option 4</Paragraph>
69+
<View pointerEvents="none">
70+
<RadioButton value="normal" checked={checked === 3} />
71+
</View>
72+
</View>
73+
</TouchableRipple>
6474
</View>
6575
</ScrollView>
6676
</Dialog.ScrollArea>
@@ -75,10 +85,11 @@ export default class extends Component<void, Props, State> {
7585
}
7686

7787
const styles = StyleSheet.create({
78-
checkBoxRow: {
88+
row: {
7989
flexDirection: 'row',
8090
alignItems: 'center',
81-
height: 56,
91+
justifyContent: 'space-between',
92+
padding: 8,
93+
paddingHorizontal: 24,
8294
},
83-
paragraph: { marginLeft: 16 },
8495
});

‎example/src/Dialogs/UndismissableDialog.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* @flow */
22
import React from 'react';
33
import PropTypes from 'prop-types';
4-
import { Paragraph, Button, Dialog, Colors } from 'react-native-paper';
4+
import { Paragraph, Button, Dialog } from 'react-native-paper';
55

66
const DialogWithLongText = ({
77
visible,
@@ -16,9 +16,7 @@ const DialogWithLongText = ({
1616
<Paragraph>This is an undismissable dialog!!</Paragraph>
1717
</Dialog.Content>
1818
<Dialog.Actions>
19-
<Button color={Colors.teal500} disabled>
20-
Disagree
21-
</Button>
19+
<Button disabled>Disagree</Button>
2220
<Button primary onPress={close}>
2321
Agree
2422
</Button>

‎example/src/DividerExample.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* @flow */
22

33
import React from 'react';
4+
import PropTypes from 'prop-types';
45
import { ListView, StyleSheet } from 'react-native';
56
import { Divider, Subheading, withTheme } from 'react-native-paper';
67

@@ -29,6 +30,9 @@ const DividerExample = props => {
2930
};
3031

3132
DividerExample.title = 'Divider';
33+
DividerExample.propTypes = {
34+
theme: PropTypes.object.isRequired,
35+
};
3236

3337
const styles = StyleSheet.create({
3438
container: {

‎example/src/ProgressBarExample.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
/* @flow */
22

33
import React, { Component } from 'react';
4+
import PropTypes from 'prop-types';
45
import { View, StyleSheet } from 'react-native';
56
import { ProgressBar, Paragraph, Colors, withTheme } from 'react-native-paper';
67

78
class ProgressBarExample extends Component {
89
static title = 'Progress bar';
10+
static propTypes = {
11+
theme: PropTypes.object.isRequired,
12+
};
913

1014
render() {
1115
const { theme: { colors: { background } } } = this.props;

‎example/src/TextExample.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* @flow */
22

33
import React, { Component } from 'react';
4+
import PropTypes from 'prop-types';
45
import { View, StyleSheet } from 'react-native';
56
import {
67
Caption,
@@ -13,6 +14,9 @@ import {
1314

1415
class TextExample extends Component {
1516
static title = 'Typography';
17+
static propTypes = {
18+
theme: PropTypes.object.isRequired,
19+
};
1620

1721
render() {
1822
const { theme: { colors: { background } } } = this.props;

‎example/src/TextInputExample.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
/* @flow */
22

33
import React, { Component } from 'react';
4+
import PropTypes from 'prop-types';
45
import { ScrollView, StyleSheet } from 'react-native';
5-
import { Colors, TextInput } from 'react-native-paper';
6+
import { TextInput, withTheme } from 'react-native-paper';
67

7-
export default class TextInputExample extends Component {
8+
class TextInputExample extends Component {
89
static title = 'TextInput';
10+
static propTypes = {
11+
theme: PropTypes.object.isRequired,
12+
};
913

1014
state = {
1115
text: '',
1216
};
1317

1418
render() {
19+
const { theme: { colors: { background } } } = this.props;
1520
return (
16-
<ScrollView style={styles.container}>
21+
<ScrollView style={[styles.container, { backgroundColor: background }]}>
1722
<TextInput
1823
style={styles.inputContainerStyle}
1924
label="Normal input"
@@ -34,10 +39,11 @@ export default class TextInputExample extends Component {
3439
const styles = StyleSheet.create({
3540
container: {
3641
flex: 1,
37-
backgroundColor: Colors.white,
3842
padding: 8,
3943
},
4044
inputContainerStyle: {
4145
margin: 8,
4246
},
4347
});
48+
49+
export default withTheme(TextInputExample);

‎src/components/Button.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ class Button extends PureComponent<void, Props, State> {
122122
style,
123123
theme,
124124
} = this.props;
125-
const { colors, roundness } = theme;
125+
const { colors, roundness, dark: isDarkTheme } = theme;
126126
const fontFamily = theme.fonts.medium;
127127
let backgroundColor, textColor, isDark;
128128
if (raised) {
@@ -153,7 +153,9 @@ class Button extends PureComponent<void, Props, State> {
153153
}
154154

155155
if (disabled) {
156-
textColor = 'rgba(0, 0, 0, .26)';
156+
textColor = isDarkTheme
157+
? 'rgba(255, 255, 255, .26)'
158+
: 'rgba(0, 0, 0, .26)';
157159
} else {
158160
if (raised) {
159161
textColor = isDark ? white : black;

‎src/components/Dialog/Dialog.js

+22-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
/* @flow */
22

3-
import React, { Children, Component } from 'react';
3+
import React, { Children, PureComponent } from 'react';
44
import { StyleSheet, Platform, Animated } from 'react-native';
55
import Modal from '../Modal';
66
import { white } from '../../styles/colors';
7+
import withTheme from '../../core/withTheme';
78
import Paper from '../Paper';
89
import DialogActions from './Actions';
910
import DialogTitle from './Title';
1011
import DialogContent from './Content';
1112
import DialogScrollArea from './ScrollArea';
13+
import type { Theme } from '../../types/Theme';
1214

1315
const AnimatedPaper = Animated.createAnimatedComponent(Paper);
1416

@@ -19,9 +21,19 @@ type DefaultProps = {
1921

2022
type Props = {
2123
children?: any,
24+
/**
25+
* Determines whether clicking outside the dialog dismisses it, true by default
26+
*/
2227
dismissable?: boolean,
28+
/**
29+
* Callback that is called when the user dismisses the dialog
30+
*/
2331
onRequestClose?: Function,
2432
style?: any,
33+
theme: Theme,
34+
/**
35+
* Determines Whether the dialog is visible
36+
*/
2537
visible: boolean,
2638
};
2739

@@ -60,7 +72,8 @@ type Props = {
6072
* }
6173
* ```
6274
*/
63-
class Dialog extends Component<DefaultProps, Props, void> {
75+
76+
class Dialog extends PureComponent<DefaultProps, Props, void> {
6477
static Actions = DialogActions;
6578
static Title = DialogTitle;
6679
static Content = DialogContent;
@@ -78,7 +91,11 @@ class Dialog extends Component<DefaultProps, Props, void> {
7891
onRequestClose,
7992
visible,
8093
style,
94+
theme,
8195
} = this.props;
96+
97+
const backgroundColor = theme.colors.paper;
98+
8299
const childrenArray = Children.toArray(children);
83100
const title = childrenArray.find(child => child.type === DialogTitle);
84101
const actionBtnsChildren = childrenArray.filter(
@@ -107,7 +124,7 @@ class Dialog extends Component<DefaultProps, Props, void> {
107124
onRequestClose={onRequestClose}
108125
visible={visible}
109126
>
110-
<AnimatedPaper style={[styles.container, style]} elevation={24}>
127+
<AnimatedPaper style={[styles.container, { backgroundColor }, style]}>
111128
{title}
112129
{restOfChildrenWithoutTitle}
113130
{actionBtnsChildren}
@@ -117,7 +134,7 @@ class Dialog extends Component<DefaultProps, Props, void> {
117134
}
118135
}
119136

120-
export default Dialog;
137+
export default withTheme(Dialog);
121138

122139
const styles = StyleSheet.create({
123140
container: {
@@ -132,5 +149,6 @@ const styles = StyleSheet.create({
132149
marginHorizontal: 26,
133150
borderRadius: 2,
134151
backgroundColor: white,
152+
elevation: 24,
135153
},
136154
});

0 commit comments

Comments
 (0)