Add "Clear" options for file and directory inputs (#2760)

chaiNNer-org · Apr 8, 2024 · 6c2804b · 6c2804b
1 parent bf3f90a
commit 6c2804b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/src/common/locales/en/translation.json b/src/common/locales/en/translation.json
@@ -30,12 +30,14 @@
   "inputs": {
     "copyInputOverrideId": "Copy Input Override Id",
     "directory": {
+      "clear": "Clear",
       "copyFullDirectoryPath": "Copy Full Directory Path",
       "openInFileExplorer": "Open in File Explorer",
       "selectDirectory": "Select a directory..."
     },
     "extractValueIntoNode": "Extract value into node",
     "file": {
+      "clear": "Clear",
       "copyFileName": "Copy File Name",
       "copyFullFilePath": "Copy Full File Path",
       "openInFileExplorer": "Open in File Explorer",

diff --git a/src/renderer/components/inputs/DirectoryInput.tsx b/src/renderer/components/inputs/DirectoryInput.tsx
@@ -1,4 +1,5 @@
 import { Type, isStringLiteral } from '@chainner/navi';
+import { CloseIcon } from '@chakra-ui/icons';
 import {
     Icon,
     Input,
@@ -37,6 +38,7 @@ export const DirectoryInput = memo(
     ({
         value,
         setValue,
+        resetValue,
         isLocked,
         input,
         inputKey,
@@ -99,6 +101,14 @@ export const DirectoryInput = memo(
                 >
                     {t('inputs.directory.copyFullDirectoryPath', 'Copy Full Directory Path')}
                 </MenuItem>
+                <MenuDivider />
+                <MenuItem
+                    icon={<CloseIcon />}
+                    isDisabled={!value}
+                    onClick={resetValue}
+                >
+                    {t('inputs.directory.clear', 'Clear')}
+                </MenuItem>
                 {refactor}
             </MenuList>
         ));

diff --git a/src/renderer/components/inputs/FileInput.tsx b/src/renderer/components/inputs/FileInput.tsx
@@ -1,3 +1,4 @@
+import { CloseIcon } from '@chakra-ui/icons';
 import {
     Icon,
     Input,
@@ -30,6 +31,7 @@ export const FileInput = memo(
     ({
         value: filePath,
         setValue: setFilePath,
+        resetValue: resetFilePath,
         input,
         inputKey,
         isConnected,
@@ -149,6 +151,14 @@ export const FileInput = memo(
                 >
                     {t('inputs.file.copyFullFilePath', 'Copy Full File Path')}
                 </MenuItem>
+                <MenuDivider />
+                <MenuItem
+                    icon={<CloseIcon />}
+                    isDisabled={!filePath}
+                    onClick={resetFilePath}
+                >
+                    {t('inputs.file.clear', 'Clear')}
+                </MenuItem>
                 {refactor}
             </MenuList>
         ));