Added lazy loading to ProgressButton MaskedView

nomada-sh · Jul 19, 2022 · 8bbd4ad · 8bbd4ad
1 parent ae32f93
commit 8bbd4ad
Show file tree

Hide file tree

Showing 13 changed files with 100 additions and 287 deletions.
diff --git a/example/src/ActionSheets/ActionsSheets.tsx b/example/src/ActionSheets/ActionsSheets.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, Alert, SafeAreaView, Platform } from 'react-native';
+import { ScrollView, Alert, SafeAreaView } from 'react-native';
 
 import {
   Button,
@@ -56,11 +56,9 @@ export default function ActionSheets() {
           padding: 20,
         }}
       >
-        <Button
-          marginBottom={20}
-          onPress={() => setVisibleChangePicture(true)}
-          text="Change your profile picture"
-        />
+        <Button marginBottom={20} onPress={() => setVisibleChangePicture(true)}>
+          Change your profile picture
+        </Button>
         <ActionSheet
           title="Change your profile picture"
           message="Select a new profile picture"
@@ -74,11 +72,9 @@ export default function ActionSheets() {
           }}
           showCancelIcon
         />
-        <Button
-          marginBottom={20}
-          onPress={() => setVisibleShare(true)}
-          text="Share document"
-        />
+        <Button marginBottom={20} onPress={() => setVisibleShare(true)}>
+          Share document
+        </Button>
         <ActionSheet
           options={shareDocumentOptions}
           visible={visibleShare}
@@ -90,11 +86,9 @@ export default function ActionSheets() {
           }}
           showCancelIcon
         />
-        <Button
-          marginBottom={20}
-          onPress={() => setNativeVisible(true)}
-          text="Share document (Native)"
-        />
+        <Button marginBottom={20} onPress={() => setNativeVisible(true)}>
+          Share document (Native)
+        </Button>
         <ActionSheet
           native
           title="Share document"

diff --git a/example/src/BottomSheetSwipeConfirmation/BottomSheetSwipeConfirmation.tsx b/example/src/BottomSheetSwipeConfirmation/BottomSheetSwipeConfirmation.tsx
@@ -17,10 +17,9 @@ export default function () {
           padding: 20,
         }}
       >
-        <Button
-          onPress={() => setVisible(true)}
-          text="Show swipe confirmation"
-        />
+        <Button onPress={() => setVisible(true)}>
+          Show swipe confirmation
+        </Button>
         <SwipeConfirmation
           title="Swipe to confirm"
           visible={visible}

diff --git a/example/src/BottomSheets/BottomSheets.tsx b/example/src/BottomSheets/BottomSheets.tsx
@@ -34,7 +34,7 @@ export default function BottomSheets() {
             padding: 20,
           }}
         >
-          <Button onPress={() => setVisible(true)} text="Show Bottom Sheet" />
+          <Button onPress={() => setVisible(true)}>Show Bottom Sheet</Button>
           <BottomSheet
             visible={visible}
             height={160}

diff --git a/example/src/CalendarStrips/CalendarStrips.tsx b/example/src/CalendarStrips/CalendarStrips.tsx
diff --git a/example/src/CalendarStrips/index.ts b/example/src/CalendarStrips/index.ts
diff --git a/example/src/LineValueSelectors/LineValueSelectors.tsx b/example/src/LineValueSelectors/LineValueSelectors.tsx
diff --git a/example/src/LineValueSelectors/index.ts b/example/src/LineValueSelectors/index.ts
diff --git a/example/src/screens/CalendarListScreen.tsx b/example/src/screens/CalendarListScreen.tsx
diff --git a/packages/react-native-eyecandy/src/components/ButtonBase/useStyles.ts b/packages/react-native-eyecandy/src/components/ButtonBase/useStyles.ts
@@ -37,6 +37,7 @@ export default function useStyles({
   const borderRadius = variant === 'rounded' ? height / 2 : 12;
 
   let backgroundColor = Color(inverse ? foreground : background).rgb();
+  let foregroundColor = Color(inverse ? background : foreground).rgb();
 
   const rippleColor = getRippleColor(backgroundColor).string();
 
@@ -48,7 +49,9 @@ export default function useStyles({
     backgroundColor = backgroundColor.alpha(0);
   }
 
-  if (transparent) backgroundColor = backgroundColor.alpha(0);
+  if (transparent) {
+    backgroundColor = backgroundColor.alpha(0);
+  }
 
   return StyleSheet.create({
     container: {
@@ -94,7 +97,7 @@ export default function useStyles({
       justifyContent: 'center',
     },
     loading: {
-      color: inverse ? background : foreground,
+      color: foregroundColor.string(),
     },
   });
 }
diff --git a/packages/react-native-eyecandy/src/components/IconButton/IconButton.tsx b/packages/react-native-eyecandy/src/components/IconButton/IconButton.tsx
@@ -24,16 +24,17 @@ function IconButton({
   iconStyle,
   variant = 'rounded',
   inverse,
+  transparent,
   ...props
 }: IconButtonProps) {
   const { foreground, background } = useColors(c => c.button[color]);
 
   const iconSize = iconSizeProp ?? Math.round(size * 0.4);
-  const iconColor = iconColorProp
-    ? iconColorProp
-    : inverse
-    ? background
-    : foreground;
+  let iconColor = iconColorProp;
+
+  if (iconColor === undefined) {
+    iconColor = inverse ? background : foreground;
+  }
 
   const children = Icon ? (
     React.isValidElement(Icon) ? (
@@ -57,6 +58,7 @@ function IconButton({
       inverse={inverse}
       height={size}
       variant={variant}
+      transparent={transparent}
       {...props}
     >
       {children}