fix: add label prop to DeleteButton

techmatters · Jul 3, 2024 · 20d992a · 20d992a
1 parent 0594592
commit 20d992a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/dev-client/src/components/ScreenFormWrapper.tsx b/dev-client/src/components/ScreenFormWrapper.tsx
@@ -101,9 +101,8 @@ export const ScreenFormWrapper = forwardRef(
                 <DeleteButton
                   disabled={isSubmitting}
                   onPress={() => conditionallyConfirmDelete(onOpen)}
-                  mr="20px">
-                  {t('general.delete_fab')}
-                </DeleteButton>
+                  mr="20px"
+                />
               )}
               title={t('site.notes.confirm_removal_title')}
               body={t('site.notes.confirm_removal_body')}

diff --git a/dev-client/src/components/buttons/DeleteButton.tsx b/dev-client/src/components/buttons/DeleteButton.tsx
@@ -15,17 +15,21 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
+import {useTranslation} from 'react-i18next';
+
 import {Button} from 'native-base';
 
 import {Icon} from 'terraso-mobile-client/components/icons/Icon';
-import {ThemeColor} from 'terraso-mobile-client/components/util/nativeBaseAdapters';
 
 type Props = {
-  children?: React.ReactNode;
-  color?: ThemeColor;
+  label?: string;
 } & React.ComponentProps<typeof Button>;
 
-export default function DeleteButton({children, ...props}: Props) {
+export default function DeleteButton({label, ...props}: Props) {
+  const {t} = useTranslation();
+
+  label = label ?? t('general.delete_fab');
+
   return (
     <Button
       background="background.default"
@@ -39,7 +43,7 @@ export default function DeleteButton({children, ...props}: Props) {
         textTransform: 'uppercase',
       }}
       {...props}>
-      {children}
+      {label}
     </Button>
   );
 }
diff --git a/dev-client/src/screens/ProjectSettingsScreen.tsx b/dev-client/src/screens/ProjectSettingsScreen.tsx
@@ -89,9 +89,10 @@ export function ProjectSettingsScreen({
             body={t('projects.settings.delete_description')}
             handleConfirm={triggerDeleteProject}
             trigger={onOpen => (
-              <DeleteButton onPress={onOpen}>
-                {t('projects.settings.delete')}
-              </DeleteButton>
+              <DeleteButton
+                label={t('projects.settings.delete')}
+                onPress={onOpen}
+              />
             )}
           />
         </RestrictByProjectRole>

diff --git a/dev-client/src/screens/SiteSettingsScreen/SiteSettingsScreen.tsx b/dev-client/src/screens/SiteSettingsScreen/SiteSettingsScreen.tsx
@@ -74,9 +74,10 @@ export const SiteSettingsScreen = ({siteId}: Props) => {
         />
         <ConfirmModal
           trigger={onOpen => (
-            <DeleteButton onPress={onOpen}>
-              {t('site.dashboard.delete_button')}
-            </DeleteButton>
+            <DeleteButton
+              label={t('site.dashboard.delete_button')}
+              onPress={onOpen}
+            />
           )}
           title={t('site.dashboard.delete_site_modal.title')}
           body={t('site.dashboard.delete_site_modal.body', {

diff --git a/dev-client/src/screens/SoilScreen/components/EditDepthModal.tsx b/dev-client/src/screens/SoilScreen/components/EditDepthModal.tsx
@@ -222,9 +222,11 @@ export const EditDepthModal = ({
               {mutable && (
                 <ConfirmModal
                   trigger={onOpen => (
-                    <DeleteButton onPress={onOpen} mr="20px">
-                      {t('soil.depth.delete_button')}
-                    </DeleteButton>
+                    <DeleteButton
+                      label={t('soil.depth.delete_button')}
+                      onPress={onOpen}
+                      mr="20px"
+                    />
                   )}
                   title={t('soil.depth.delete_modal.title')}
                   body={t('soil.depth.delete_modal.body')}