Skip to content

Commit 0514555

Browse files
CancillerCanciller
committed
Finished ProgressButton
1 parent e5a8242 commit 0514555

File tree

16 files changed

+301
-32
lines changed

16 files changed

+301
-32
lines changed

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"@nomada-sh/react-native-eyecandy": "^0.0.5",
4545
"@nomada-sh/react-native-eyecandy-icons": "^0.0.4",
4646
"@nomada-sh/react-native-eyecandy-theme": "^0.0.2",
47+
"@react-native-masked-view/masked-view": "^0.2.7",
4748
"@react-navigation/drawer": "^6.3.3",
4849
"@react-navigation/elements": "^1.3.3",
4950
"@react-navigation/native": "^6.0.8",

‎example/src/Drawer/Drawer.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,15 @@ import Texts from '../Texts';
2929
import ThemeSwitch from '../ThemeSwitch';
3030
import { ButtonScreen } from '../screens/ButtonScreen';
3131
import { DialerScreen } from '../screens/DialerScreen';
32+
import { ProgressButtonScreen } from '../screens/ProgressButtonScreen';
3233
import { RatingScreen } from '../screens/RatingScreen';
3334
import { SelectScreen } from '../screens/SelectScreen';
3435
import { TextInputScreen } from '../screens/TextInputScreen';
3536
import { useTheme } from '../shared/hooks';
3637

3738
const { Navigator, Screen } = createDrawerNavigator();
3839

39-
const initialRouteName = 'CalendarList';
40+
const initialRouteName = 'ProgressButton';
4041

4142
function HeaderLeft(props: any) {
4243
const toggleDrawer = () => {
@@ -82,6 +83,7 @@ export default function Drawer() {
8283
>
8384
<Screen name="Button" component={ButtonScreen} />
8485
<Screen name="ButtonBase" component={ButtonBase} />
86+
<Screen name="ProgressButton" component={ProgressButtonScreen} />
8587
<Screen name="IconButton" component={IconButtons} />
8688
<Screen name="LinkButton" component={LinkButtons} />
8789
<Screen name="RadioButton" component={RadioButtons} />

‎example/src/screens/ProgressButtonScreen.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { ScrollView } from 'react-native';
3+
4+
import { ProgressButton } from '@nomada-sh/react-native-eyecandy';
5+
import {
6+
Check,
7+
Crown,
8+
Star,
9+
Trash,
10+
Warning,
11+
} from '@nomada-sh/react-native-eyecandy-icons';
12+
13+
export function ProgressButtonScreen() {
14+
const [progress, setProgress] = React.useState(0);
15+
16+
return (
17+
<ScrollView
18+
contentContainerStyle={{
19+
padding: 20,
20+
}}
21+
>
22+
<ProgressButton marginBottom={20} onPress={() => setProgress(0)}>
23+
ProgressButton
24+
</ProgressButton>
25+
<ProgressButton
26+
marginBottom={20}
27+
color="primary"
28+
icon={Star}
29+
onPress={() => setProgress(0.25)}
30+
>
31+
ProgressButton Primary
32+
</ProgressButton>
33+
<ProgressButton
34+
marginBottom={20}
35+
color="success"
36+
icon={Crown}
37+
onPress={() => setProgress(0.5)}
38+
>
39+
ProgressButton Secondary
40+
</ProgressButton>
41+
<ProgressButton
42+
marginBottom={20}
43+
color="danger"
44+
icon={Trash}
45+
onPress={() => setProgress(0.75)}
46+
>
47+
ProgressButton Danger
48+
</ProgressButton>
49+
<ProgressButton marginBottom={20} onPress={() => setProgress(1)}>
50+
ProgressButton
51+
</ProgressButton>
52+
<ProgressButton
53+
marginBottom={20}
54+
color="warning"
55+
icon={Warning}
56+
progress={progress}
57+
>
58+
ProgressButton Warning
59+
</ProgressButton>
60+
</ScrollView>
61+
);
62+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"eslint-config-prettier": "^8.5.0",
2222
"eslint-import-resolver-typescript": "^2.7.0",
2323
"eslint-plugin-import": "^2.25.4",
24-
"eslint-plugin-prettier": "^4.0.0",
24+
"eslint-plugin-prettier": "^4.2.1",
2525
"eslint-plugin-react": "^7.29.4",
2626
"eslint-plugin-react-hooks": "^4.3.0",
2727
"eslint-plugin-react-native": "^4.0.0",

‎packages/react-native-eyecandy-theme/src/colors/createButtonColors.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,18 @@ const createButtonColors: GetThemeColors<ThemeButtonColors> = options => {
1717
background: palette.secondary['500'],
1818
foreground: palette.secondary['100'],
1919
},
20+
danger: {
21+
background: palette.error['200'],
22+
foreground: palette.grey[100],
23+
},
24+
warning: {
25+
background: palette.warning['200'],
26+
foreground: palette.grey[100],
27+
},
28+
success: {
29+
background: palette.success['200'],
30+
foreground: palette.grey[100],
31+
},
2032
};
2133

2234
return mergeColors({

‎packages/react-native-eyecandy-theme/src/colors/types.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,13 @@ export type ThemeBackgroundColors = {
6262
* Button
6363
*/
6464

65-
export type ThemeButtonColorChoices = 'default' | 'primary' | 'secondary';
65+
export type ThemeButtonColorChoices =
66+
| 'default'
67+
| 'primary'
68+
| 'secondary'
69+
| 'danger'
70+
| 'warning'
71+
| 'success';
6672

6773
export type ThemeButtonColor = {
6874
background: string;

‎packages/react-native-eyecandy/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@
6363
"react-native-haptic-feedback": "1.x",
6464
"react-native-image-picker": "4.x",
6565
"react-native-reanimated": "2.x",
66-
"react-native-svg": "12.x"
66+
"react-native-svg": "12.x",
67+
"@react-native-masked-view/masked-view": "0.2.x"
6768
},
6869
"devDependencies": {
6970
"@react-native-picker/picker": "^2.4.1",
@@ -83,7 +84,8 @@
8384
"react-native-image-picker": "^4.7.3",
8485
"react-native-reanimated": "2.3.1",
8586
"react-native-svg": "12.1.1",
86-
"react-test-renderer": "^17.0.2"
87+
"react-test-renderer": "^17.0.2",
88+
"@react-native-masked-view/masked-view": "^0.2.7"
8789
},
8890
"dependencies": {
8991
"@nomada-sh/react-native-eyecandy-icons": "^0.0.4",

‎packages/react-native-eyecandy/src/components/Button/Button.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,23 @@ import { TextStyle, StyleProp, View, ActivityIndicator } from 'react-native';
44
import { IconProps } from '@nomada-sh/react-native-eyecandy-icons';
55

66
import { Body } from '../../typography';
7-
import { ButtonBase, ButtonBaseProps } from '../ButtonBase';
7+
import { ButtonBase, ButtonBaseProps, ButtonBaseStyles } from '../ButtonBase';
88

99
import useStyles from './useStyles';
1010

11-
export interface ButtonProps extends Omit<ButtonBaseProps, 'children'> {
11+
export interface ButtonStyles extends ButtonBaseStyles {
12+
text?: StyleProp<TextStyle>;
13+
}
14+
export interface ButtonProps
15+
extends Omit<ButtonBaseProps, 'children' | 'styles'> {
1216
children?: string;
13-
text?: string;
1417
textStyle?: StyleProp<TextStyle>;
1518
icon?: React.ComponentType<IconProps> | React.ReactElement<any> | null;
1619
loadingOverlay?: boolean;
20+
styles?: ButtonStyles;
1721
}
1822

1923
export function Button({
20-
text,
2124
color,
2225
inverse,
2326
textStyle,
@@ -26,6 +29,7 @@ export function Button({
2629
loading: loadingProp,
2730
disabled: disabledProp,
2831
loadingOverlay,
32+
styles: customStyles,
2933
...props
3034
}: ButtonProps) {
3135
const styles = useStyles({ color, inverse });
@@ -59,12 +63,19 @@ export function Button({
5963
inverse={inverse}
6064
disabled={disabled}
6165
loading={loading}
66+
styles={customStyles}
6267
{...props}
6368
>
6469
{icon ? <View style={styles.loadingContainer}>{icon}</View> : null}
65-
<Body weight="bold" size="large" style={[styles.text, textStyle]}>
66-
{children ?? text}
67-
</Body>
70+
{typeof children === 'string' ? (
71+
<Body
72+
weight="bold"
73+
size="large"
74+
style={[styles.text, textStyle, customStyles?.text]}
75+
>
76+
{children}
77+
</Body>
78+
) : null}
6879
</ButtonBase>
6980
);
7081
}

‎packages/react-native-eyecandy/src/components/ButtonBase/ButtonBase.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,17 @@ import { usePressableStyles } from '../../hooks';
1818

1919
import useStyles from './useStyles';
2020

21+
export interface ButtonBaseStyles {
22+
/**
23+
* Container view style (Applied before style).
24+
*/
25+
container?: StyleProp<ViewStyle>;
26+
/**
27+
* Pressable style (Applied before pressable style).
28+
*/
29+
pressable?: PressableProps['style'];
30+
}
31+
2132
export interface ButtonBaseProps extends PressableProps {
2233
children?: ReactNode;
2334
/**
@@ -30,16 +41,7 @@ export interface ButtonBaseProps extends PressableProps {
3041
pressableStyle?: PressableProps['style'];
3142
inverse?: boolean;
3243
color?: ThemeButtonColorChoices;
33-
styles?: {
34-
/**
35-
* Container view style (Applied before style).
36-
*/
37-
container?: StyleProp<ViewStyle>;
38-
/**
39-
* Pressable style (Applied before pressable style).
40-
*/
41-
pressable?: PressableProps['style'];
42-
};
44+
styles?: ButtonBaseStyles;
4345
variant?: 'default' | 'rounded' | 'squared';
4446
height?: number;
4547
fullwidth?: boolean;

‎packages/react-native-eyecandy/src/components/CalendarStrip/CalendarStrip.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -132,20 +132,22 @@ const CalendarStrip = React.forwardRef<CalendarStripHandle, CalendarStripProps>(
132132
height: 40,
133133
marginHorizontal: 5,
134134
}}
135-
text="Today"
136135
fullwidth={false}
137136
onPress={jumpToToday}
138-
/>
137+
>
138+
Today
139+
</Button>
139140
<Button
140141
variant="rounded"
141142
style={{
142143
flex: 1,
143144
height: 40,
144145
}}
145-
text="Selected"
146146
fullwidth={false}
147147
onPress={jumpToSelected}
148-
/>
148+
>
149+
"Selected"
150+
</Button>
149151
</View>
150152
</View>
151153
);

0 commit comments

Comments
 (0)