Finished ProgressButton

Author: Canciller

example/package.json

@@ -44,6 +44,7 @@
     "@nomada-sh/react-native-eyecandy": "^0.0.5",
     "@nomada-sh/react-native-eyecandy-icons": "^0.0.4",
     "@nomada-sh/react-native-eyecandy-theme": "^0.0.2",
+    "@react-native-masked-view/masked-view": "^0.2.7",
     "@react-navigation/drawer": "^6.3.3",
     "@react-navigation/elements": "^1.3.3",
     "@react-navigation/native": "^6.0.8",

example/src/Drawer/Drawer.tsx

@@ -29,14 +29,15 @@ import Texts from '../Texts';
 import ThemeSwitch from '../ThemeSwitch';
 import { ButtonScreen } from '../screens/ButtonScreen';
 import { DialerScreen } from '../screens/DialerScreen';
+import { ProgressButtonScreen } from '../screens/ProgressButtonScreen';
 import { RatingScreen } from '../screens/RatingScreen';
 import { SelectScreen } from '../screens/SelectScreen';
 import { TextInputScreen } from '../screens/TextInputScreen';
 import { useTheme } from '../shared/hooks';
 
 const { Navigator, Screen } = createDrawerNavigator();
 
-const initialRouteName = 'CalendarList';
+const initialRouteName = 'ProgressButton';
 
 function HeaderLeft(props: any) {
   const toggleDrawer = () => {
@@ -82,6 +83,7 @@ export default function Drawer() {
     >
       <Screen name="Button" component={ButtonScreen} />
       <Screen name="ButtonBase" component={ButtonBase} />
+      <Screen name="ProgressButton" component={ProgressButtonScreen} />
       <Screen name="IconButton" component={IconButtons} />
       <Screen name="LinkButton" component={LinkButtons} />
       <Screen name="RadioButton" component={RadioButtons} />

example/src/screens/ProgressButtonScreen.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+
+import { ProgressButton } from '@nomada-sh/react-native-eyecandy';
+import {
+  Check,
+  Crown,
+  Star,
+  Trash,
+  Warning,
+} from '@nomada-sh/react-native-eyecandy-icons';
+
+export function ProgressButtonScreen() {
+  const [progress, setProgress] = React.useState(0);
+
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        padding: 20,
+      }}
+    >
+      <ProgressButton marginBottom={20} onPress={() => setProgress(0)}>
+        ProgressButton
+      </ProgressButton>
+      <ProgressButton
+        marginBottom={20}
+        color="primary"
+        icon={Star}
+        onPress={() => setProgress(0.25)}
+      >
+        ProgressButton Primary
+      </ProgressButton>
+      <ProgressButton
+        marginBottom={20}
+        color="success"
+        icon={Crown}
+        onPress={() => setProgress(0.5)}
+      >
+        ProgressButton Secondary
+      </ProgressButton>
+      <ProgressButton
+        marginBottom={20}
+        color="danger"
+        icon={Trash}
+        onPress={() => setProgress(0.75)}
+      >
+        ProgressButton Danger
+      </ProgressButton>
+      <ProgressButton marginBottom={20} onPress={() => setProgress(1)}>
+        ProgressButton
+      </ProgressButton>
+      <ProgressButton
+        marginBottom={20}
+        color="warning"
+        icon={Warning}
+        progress={progress}
+      >
+        ProgressButton Warning
+      </ProgressButton>
+    </ScrollView>
+  );
+}

package.json

@@ -21,7 +21,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.7.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-react-native": "^4.0.0",

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

@@ -17,6 +17,18 @@ const createButtonColors: GetThemeColors<ThemeButtonColors> = options => {
       background: palette.secondary['500'],
       foreground: palette.secondary['100'],
     },
+    danger: {
+      background: palette.error['200'],
+      foreground: palette.grey[100],
+    },
+    warning: {
+      background: palette.warning['200'],
+      foreground: palette.grey[100],
+    },
+    success: {
+      background: palette.success['200'],
+      foreground: palette.grey[100],
+    },
   };
 
   return mergeColors({

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

@@ -62,7 +62,13 @@ export type ThemeBackgroundColors = {
  * Button
  */
 
-export type ThemeButtonColorChoices = 'default' | 'primary' | 'secondary';
+export type ThemeButtonColorChoices =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'warning'
+  | 'success';
 
 export type ThemeButtonColor = {
   background: string;

packages/react-native-eyecandy/package.json

@@ -63,7 +63,8 @@
     "react-native-haptic-feedback": "1.x",
     "react-native-image-picker": "4.x",
     "react-native-reanimated": "2.x",
-    "react-native-svg": "12.x"
+    "react-native-svg": "12.x",
+    "@react-native-masked-view/masked-view": "0.2.x"
   },
   "devDependencies": {
     "@react-native-picker/picker": "^2.4.1",
@@ -83,7 +84,8 @@
     "react-native-image-picker": "^4.7.3",
     "react-native-reanimated": "2.3.1",
     "react-native-svg": "12.1.1",
-    "react-test-renderer": "^17.0.2"
+    "react-test-renderer": "^17.0.2",
+    "@react-native-masked-view/masked-view": "^0.2.7"
   },
   "dependencies": {
     "@nomada-sh/react-native-eyecandy-icons": "^0.0.4",

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

@@ -4,20 +4,23 @@ import { TextStyle, StyleProp, View, ActivityIndicator } from 'react-native';
 import { IconProps } from '@nomada-sh/react-native-eyecandy-icons';
 
 import { Body } from '../../typography';
-import { ButtonBase, ButtonBaseProps } from '../ButtonBase';
+import { ButtonBase, ButtonBaseProps, ButtonBaseStyles } from '../ButtonBase';
 
 import useStyles from './useStyles';
 
-export interface ButtonProps extends Omit<ButtonBaseProps, 'children'> {
+export interface ButtonStyles extends ButtonBaseStyles {
+  text?: StyleProp<TextStyle>;
+}
+export interface ButtonProps
+  extends Omit<ButtonBaseProps, 'children' | 'styles'> {
   children?: string;
-  text?: string;
   textStyle?: StyleProp<TextStyle>;
   icon?: React.ComponentType<IconProps> | React.ReactElement<any> | null;
   loadingOverlay?: boolean;
+  styles?: ButtonStyles;
 }
 
 export function Button({
-  text,
   color,
   inverse,
   textStyle,
@@ -26,6 +29,7 @@ export function Button({
   loading: loadingProp,
   disabled: disabledProp,
   loadingOverlay,
+  styles: customStyles,
   ...props
 }: ButtonProps) {
   const styles = useStyles({ color, inverse });
@@ -59,12 +63,19 @@ export function Button({
       inverse={inverse}
       disabled={disabled}
       loading={loading}
+      styles={customStyles}
       {...props}
     >
       {icon ? <View style={styles.loadingContainer}>{icon}</View> : null}
-      <Body weight="bold" size="large" style={[styles.text, textStyle]}>
-        {children ?? text}
-      </Body>
+      {typeof children === 'string' ? (
+        <Body
+          weight="bold"
+          size="large"
+          style={[styles.text, textStyle, customStyles?.text]}
+        >
+          {children}
+        </Body>
+      ) : null}
     </ButtonBase>
   );
 }

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

@@ -18,6 +18,17 @@ import { usePressableStyles } from '../../hooks';
 
 import useStyles from './useStyles';
 
+export interface ButtonBaseStyles {
+  /**
+   * Container view style (Applied before style).
+   */
+  container?: StyleProp<ViewStyle>;
+  /**
+   * Pressable style (Applied before pressable style).
+   */
+  pressable?: PressableProps['style'];
+}
+
 export interface ButtonBaseProps extends PressableProps {
   children?: ReactNode;
   /**
@@ -30,16 +41,7 @@ export interface ButtonBaseProps extends PressableProps {
   pressableStyle?: PressableProps['style'];
   inverse?: boolean;
   color?: ThemeButtonColorChoices;
-  styles?: {
-    /**
-     * Container view style (Applied before style).
-     */
-    container?: StyleProp<ViewStyle>;
-    /**
-     * Pressable style (Applied before pressable style).
-     */
-    pressable?: PressableProps['style'];
-  };
+  styles?: ButtonBaseStyles;
   variant?: 'default' | 'rounded' | 'squared';
   height?: number;
   fullwidth?: boolean;

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

@@ -132,20 +132,22 @@ const CalendarStrip = React.forwardRef<CalendarStripHandle, CalendarStripProps>(
               height: 40,
               marginHorizontal: 5,
             }}
-            text="Today"
             fullwidth={false}
             onPress={jumpToToday}
-          />
+          >
+            Today
+          </Button>
           <Button
             variant="rounded"
             style={{
               flex: 1,
               height: 40,
             }}
-            text="Selected"
             fullwidth={false}
             onPress={jumpToSelected}
-          />
+          >
+            "Selected"
+          </Button>
         </View>
       </View>
     );