Skip to content

Commit

Permalink
feat: adjust Button (#3114)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukewalczak
lukewalczak committed Jun 8, 2022
1 parent 377ab3b commit 95c083f
Show file tree
Hide file tree
Showing 15 changed files with 1,249 additions and 397 deletions.
226 changes: 53 additions & 173 deletions example/src/Examples/ButtonExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,186 +1,66 @@
import * as React from 'react';
import { View, StyleSheet, Image } from 'react-native';
import { Button, List, useTheme } from 'react-native-paper';
import ScreenWrapper from '../ScreenWrapper';
import { StyleSheet, View } from 'react-native';
import { Button } from 'react-native-paper';

const ButtonExample = () => {
const theme = useTheme();

const color = theme.isV3 ? theme.colors.secondary : theme.colors.accent;
const MODES = {
WHEN_AND_WHERE: 'when and where',
WHEN: 'when',
WHERE: 'where',
};

const ModeButton = ({ isSelected, label, onPress }) => {
return (
<ScreenWrapper>
<List.Section title="Text button">
<View style={styles.row}>
<Button onPress={() => {}} style={styles.button}>
Default
</Button>
<Button color={color} onPress={() => {}} style={styles.button}>
Custom
</Button>
<Button disabled onPress={() => {}} style={styles.button}>
Disabled
</Button>
<Button icon="camera" onPress={() => {}} style={styles.button}>
Icon
</Button>
<Button loading onPress={() => {}} style={styles.button}>
Loading
</Button>
<Button
icon="camera"
onPress={() => {}}
style={styles.button}
contentStyle={styles.flexReverse}
>
Icon right
</Button>
</View>
</List.Section>
<List.Section title="Outlined button">
<View style={styles.row}>
<Button mode="outlined" onPress={() => {}} style={styles.button}>
Default
</Button>
<Button
mode="outlined"
color={color}
onPress={() => {}}
style={styles.button}
>
Custom
</Button>
<Button
mode="outlined"
disabled
onPress={() => {}}
style={styles.button}
>
Disabled
</Button>
<Button
mode="outlined"
icon="camera"
onPress={() => {}}
style={styles.button}
>
Icon
</Button>
<Button
mode="outlined"
loading
onPress={() => {}}
style={styles.button}
>
Loading
</Button>
<Button
icon="heart"
mode="outlined"
onPress={() => {}}
style={styles.button}
labelStyle={styles.fontStyles}
>
Custom Font
</Button>
</View>
</List.Section>
<List.Section title="Contained button">
<View style={styles.row}>
<Button mode="contained" onPress={() => {}} style={styles.button}>
Default
</Button>
<Button
mode="contained"
color={color}
onPress={() => {}}
style={styles.button}
>
Custom
</Button>
<Button
mode="contained"
disabled
onPress={() => {}}
style={styles.button}
>
Disabled
</Button>
<Button
mode="contained"
icon="camera"
onPress={() => {}}
style={styles.button}
>
Icon
</Button>
<Button
mode="contained"
loading
onPress={() => {}}
style={styles.button}
>
Loading
</Button>
</View>
</List.Section>
<List.Section title="Custom icon">
<View style={styles.row}>
<Button
mode="outlined"
icon={{
uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400',
}}
onPress={() => {}}
style={styles.button}
>
Remote image
</Button>
<Button
mode="outlined"
icon={require('../../assets/images/favorite.png')}
onPress={() => {}}
style={styles.button}
>
Required asset
</Button>
<Button
mode="outlined"
icon={({ size }) => (
<Image
source={require('../../assets/images/chameleon.jpg')}
style={{ width: size, height: size, borderRadius: size / 2 }}
/>
)}
onPress={() => {}}
style={styles.button}
>
Custom component
</Button>
</View>
</List.Section>
</ScreenWrapper>
<Button
compact
mode={isSelected ? 'elevated' : 'outlined'}
onPress={onPress}
style={{ borderRadius: 24, marginRight: 8 }}
>
{label}
</Button>
);
};

ButtonExample.title = 'Button';
const App = () => {
const [mode, setMode] = React.useState(MODES.WHEN_AND_WHERE);

return (
<View style={styles.root}>
<View style={styles.modesContainer}>
<ModeButton
isSelected={mode === MODES.WHEN_AND_WHERE}
label={MODES.WHEN_AND_WHERE}
onPress={() => setMode(MODES.WHEN_AND_WHERE)}
/>
<ModeButton
isSelected={mode === MODES.WHEN}
label={MODES.WHEN}
onPress={() => setMode(MODES.WHEN)}
/>
<ModeButton
isSelected={mode === MODES.WHERE}
label={MODES.WHERE}
onPress={() => setMode(MODES.WHERE)}
/>
</View>
</View>
);
};

const styles = StyleSheet.create({
row: {
flexDirection: 'row',
flexWrap: 'wrap',
paddingHorizontal: 12,
},
button: {
margin: 4,
root: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
flexReverse: {
flexDirection: 'row-reverse',
},
fontStyles: {
fontWeight: '800',
fontSize: 24,
modesContainer: {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
marginTop: 16,
width: '100%',
},
});

export default ButtonExample;
export default App;
2 changes: 1 addition & 1 deletion src/babel/__fixtures__/rewrite-imports/output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { Text } from 'react-native';
import PaperProvider from "react-native-paper/lib/module/core/Provider";
import BottomNavigation from "react-native-paper/lib/module/components/BottomNavigation/BottomNavigation";
import Button from "react-native-paper/lib/module/components/Button";
import Button from "react-native-paper/lib/module/components/Button/Button";
import FAB from "react-native-paper/lib/module/components/FAB";
import Appbar from "react-native-paper/lib/module/components/Appbar";
import * as MD2Colors from "react-native-paper/lib/module/styles/themes/v2/colors";
Expand Down
4 changes: 2 additions & 2 deletions src/components/Banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { View, ViewStyle, StyleSheet, StyleProp, Animated } from 'react-native';
import Surface from './Surface';
import Text from './Typography/Text';
import Button from './Button';
import Button from './Button/Button';
import Icon, { IconSource } from './Icon';
import { withTheme } from '../core/theming';
import type { $RemoveChildren, Theme } from '../types';
Expand Down Expand Up @@ -238,7 +238,7 @@ const Banner = ({
compact
mode="text"
style={styles.button}
color={theme.colors?.primary}
textColor={theme.colors?.primary}
{...others}
>
{label}
Expand Down
Loading

0 comments on commit 95c083f

Please sign in to comment.