mirror of
https://github.com/zhigang1992/react-native-paper.git
synced 2026-06-12 00:34:38 +08:00
8adfa6751e
* refactor: Add DarkTheme, new colors in theme & update components to use it * chore: Remove 'console.log' statements * chore: Change dark theme property from string to boolean * feat: Add ability to toggle the theme from the drawer * fix: Wrap typography example screen with 'withTheme' * style: Update components to use correct dark theme colors * style: Update dark theme primary color and rn-navigation toolbar now gets the color from the theme * style: Add color prop to DrawerItem and update the example * style: Change the unchecked color in both Checkbox and RadioButton * chore: Add `yarn-error.log` to `.gitignore` * chore: Use lodash instead of lodash.merge * chore: Address PR comments
87 lines
2.3 KiB
JavaScript
87 lines
2.3 KiB
JavaScript
/* @flow */
|
|
|
|
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { View, StyleSheet, Platform } from 'react-native';
|
|
import {
|
|
DrawerItem,
|
|
DrawerSection,
|
|
withTheme,
|
|
Checkbox,
|
|
TouchableRipple,
|
|
Paragraph,
|
|
Colors,
|
|
} from 'react-native-paper';
|
|
|
|
const DrawerItemsData = [
|
|
{ label: 'Inbox', icon: 'inbox', key: 0 },
|
|
{ label: 'Starred', icon: 'star', key: 1 },
|
|
{ label: 'Sent mail', icon: 'send', key: 2 },
|
|
{ label: 'Colored label', icon: 'color-lens', key: 3 },
|
|
{ label: 'A very long title that will be truncated', icon: 'delete', key: 4 },
|
|
];
|
|
|
|
class DrawerItems extends Component {
|
|
static propTypes = {
|
|
theme: PropTypes.object.isRequired,
|
|
toggleTheme: PropTypes.func.isRequired,
|
|
};
|
|
|
|
state = {
|
|
open: false,
|
|
drawerItemIndex: 0,
|
|
isDark: true,
|
|
};
|
|
|
|
_setDrawerItem = index => this.setState({ drawerItemIndex: index });
|
|
|
|
_toggleTheme = () => {
|
|
this.props.toggleTheme();
|
|
this.setState({ isDark: !this.state.isDark });
|
|
};
|
|
|
|
render() {
|
|
const { theme: { colors: { paper } } } = this.props;
|
|
return (
|
|
<View style={[styles.drawerContent, { backgroundColor: paper }]}>
|
|
<DrawerSection label="Subheader">
|
|
{DrawerItemsData.map((props, index) => (
|
|
<DrawerItem
|
|
{...props}
|
|
key={props.key}
|
|
color={props.key === 3 ? Colors.tealA200 : null}
|
|
active={this.state.drawerItemIndex === index}
|
|
onPress={() => this._setDrawerItem(index)}
|
|
/>
|
|
))}
|
|
<TouchableRipple onPress={this._toggleTheme}>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 16,
|
|
}}
|
|
>
|
|
<Paragraph>Dark Theme</Paragraph>
|
|
<View pointerEvents="none">
|
|
<Checkbox checked={this.state.isDark} />
|
|
</View>
|
|
</View>
|
|
</TouchableRipple>
|
|
</DrawerSection>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
drawerContent: {
|
|
flex: 1,
|
|
paddingTop: Platform.OS === 'android' ? 25 : 22,
|
|
},
|
|
});
|
|
|
|
export default withTheme(DrawerItems);
|