refactor(frontend): move SelectOutputFormat to the ButtonRequest opti…

…ons dropdown
MiracleHorizon · May 24, 2024 · 43f3b29 · 43f3b29
1 parent aa035ee
commit 43f3b29
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 80 deletions.
diff --git a/apps/frontend/src/design-system/Checkbox/Checkbox.tsx b/apps/frontend/src/design-system/Checkbox/Checkbox.tsx
@@ -5,6 +5,7 @@ import { Checkbox as RadixCheckbox, Flex, Text } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 
 import styles from './Checkbox.module.css'
+import type { JustifyContent } from '@lib/theme'
 
 export const rootTestId = 'checkbox-root'
 
@@ -13,14 +14,16 @@ export interface Props {
   checked?: boolean
   onClick?: VoidFunction
   disabled?: boolean
+  direction?: 'row' | 'row-reverse'
+  justify?: JustifyContent
 }
 
-export const Checkbox = memo(({ label, ...props }: Props) => {
+export const Checkbox = memo(({ label, direction = 'row', justify, ...props }: Props) => {
   const id = useId()
 
   return (
     <Text data-testid={rootTestId} as='div' size='2'>
-      <Flex align='center' gap='2'>
+      <Flex align='center' direction={direction} justify={justify} gap='2'>
         <RadixCheckbox size='3' id={id} {...props} />
 
         {label && (

diff --git a/apps/frontend/src/widgets/AppFooter/AppFooterContent/ButtonRequest/ButtonRequest.module.css b/apps/frontend/src/widgets/AppFooter/AppFooterContent/ButtonRequest/ButtonRequest.module.css
@@ -15,16 +15,3 @@
 .button {
   border-radius: var(--border-radius) 0 0 var(--border-radius);
 }
-
-.dropdownTrigger {
-  width: 34px;
-  border-radius: 0 var(--border-radius) var(--border-radius) 0;
-}
-
-.dropdownContent {
-  border-radius: var(--radius-2);
-}
-
-.dropdownContent :global(.rt-DropdownMenuViewport) {
-  padding: var(--space-3);
-}
diff --git a/apps/frontend/src/widgets/AppFooter/AppFooterContent/ButtonRequest/ButtonRequest.tsx b/apps/frontend/src/widgets/AppFooter/AppFooterContent/ButtonRequest/ButtonRequest.tsx
@@ -1,9 +1,9 @@
 import dynamic from 'next/dynamic'
 import { memo } from 'react'
-import { Button, IconButton, DropdownMenu, Flex, Spinner } from '@radix-ui/themes'
+import { Button, Flex } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 
-import { CheckboxKeepChanges } from './CheckboxKeepChanges'
+import { DropdownRequestOptions } from './DropdownRequestOptions'
 import { useOutputStore } from '@stores/output'
 import { TOUR_STEP } from '@lib/tour'
 import styles from './ButtonRequest.module.css'
@@ -44,24 +44,7 @@ export const ButtonRequest = memo(
             {label}
           </Button>
 
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger disabled={disabled}>
-              <IconButton size='3' className={styles.dropdownTrigger}>
-                <Spinner size='3' loading={isLoading}>
-                  <DropdownMenu.TriggerIcon width='13px' height='13px' />
-                </Spinner>
-              </IconButton>
-            </DropdownMenu.Trigger>
-
-            <DropdownMenu.Content
-              side='top'
-              align='end'
-              sideOffset={6}
-              className={styles.dropdownContent}
-            >
-              <CheckboxKeepChanges />
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+          <DropdownRequestOptions isLoading={isLoading} disabled={disabled} />
         </Flex>
 
         {error && error instanceof Error && (

diff --git a/...ent/ButtonRequest/CheckboxKeepChanges.tsx → ...ownRequestOptions/CheckboxKeepChanges.tsx b/...ent/ButtonRequest/CheckboxKeepChanges.tsx → ...ownRequestOptions/CheckboxKeepChanges.tsx
@@ -7,5 +7,13 @@ export const CheckboxKeepChanges = () => {
 
   const handleToggle = () => toggleKeepChanges()
 
-  return <Checkbox label='Keep Changes' checked={checked} onClick={handleToggle} />
+  return (
+    <Checkbox
+      label='Keep Changes'
+      direction='row-reverse'
+      justify='between'
+      checked={checked}
+      onClick={handleToggle}
+    />
+  )
 }
diff --git a/...r/AppFooterContent/ButtonRequest/DropdownRequestOptions/DropdownRequestOptions.module.css b/...r/AppFooterContent/ButtonRequest/DropdownRequestOptions/DropdownRequestOptions.module.css
@@ -0,0 +1,13 @@
+.trigger {
+  width: 34px;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+.content {
+  width: 200px;
+  border-radius: var(--radius-2);
+}
+
+.content :global(.rt-DropdownMenuViewport) {
+  padding: var(--space-3);
+}
diff --git a/...ppFooter/AppFooterContent/ButtonRequest/DropdownRequestOptions/DropdownRequestOptions.tsx b/...ppFooter/AppFooterContent/ButtonRequest/DropdownRequestOptions/DropdownRequestOptions.tsx
@@ -0,0 +1,30 @@
+import { DropdownMenu, Flex, IconButton, Separator, Spinner } from '@radix-ui/themes'
+
+import { CheckboxKeepChanges } from './CheckboxKeepChanges'
+import { SelectOutputFormat } from './SelectOutputFormat'
+import styles from './DropdownRequestOptions.module.css'
+
+interface Props {
+  isLoading: boolean
+  disabled: boolean
+}
+
+export const DropdownRequestOptions = ({ disabled, isLoading }: Props) => (
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger disabled={disabled}>
+      <IconButton size='3' className={styles.trigger}>
+        <Spinner size='3' loading={isLoading}>
+          <DropdownMenu.TriggerIcon width='13px' height='13px' />
+        </Spinner>
+      </IconButton>
+    </DropdownMenu.Trigger>
+
+    <DropdownMenu.Content side='top' align='end' sideOffset={6} className={styles.content}>
+      <Flex direction='column' p='1'>
+        <CheckboxKeepChanges />
+        <Separator size='4' mt='4' mb='2' />
+        <SelectOutputFormat />
+      </Flex>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+)
diff --git a/...tions/OutputFormat/SelectOutputFormat.tsx → ...downRequestOptions/SelectOutputFormat.tsx b/...tions/OutputFormat/SelectOutputFormat.tsx → ...downRequestOptions/SelectOutputFormat.tsx
@@ -1,13 +1,11 @@
-import { useCallback } from 'react'
-
 import { IMAGE_FILE_FORMAT, type ImageFileFormat } from '@scissors/sharp'
 
 import { Select, type SelectData } from '@design-system/Select'
 import { useOutputStore } from '@stores/output'
 
 const data: SelectData = [
   {
-    label: 'Output format',
+    label: 'Output Format',
     value: Object.values(IMAGE_FILE_FORMAT)
   }
 ] as const
@@ -16,10 +14,7 @@ export const SelectOutputFormat = () => {
   const outputFormat = useOutputStore(state => state.outputFormat)
   const setOutputFormat = useOutputStore(state => state.setOutputFormat)
 
-  const handleChangeOutputFormat = useCallback(
-    (value: ImageFileFormat) => setOutputFormat(value),
-    [setOutputFormat]
-  )
+  const handleChangeOutputFormat = (value: ImageFileFormat) => setOutputFormat(value)
 
   if (!outputFormat) {
     return null

diff --git a/...tend/src/widgets/AppFooter/AppFooterContent/ButtonRequest/DropdownRequestOptions/index.ts b/...tend/src/widgets/AppFooter/AppFooterContent/ButtonRequest/DropdownRequestOptions/index.ts
@@ -0,0 +1 @@
+export { DropdownRequestOptions } from './DropdownRequestOptions'
diff --git a/apps/frontend/src/widgets/SettingsPanel/TabConvert/Options/Options.tsx b/apps/frontend/src/widgets/SettingsPanel/TabConvert/Options/Options.tsx
@@ -1,5 +1,4 @@
-import { Fragment } from 'react'
-import { Card, Flex, Separator } from '@radix-ui/themes'
+import { Card, Flex } from '@radix-ui/themes'
 
 import { BasicOptions } from './Basic'
 import { Negate } from './Negate'
@@ -9,9 +8,7 @@ import { Modulate } from './Modulate'
 import { Gamma } from './Gamma'
 import { Tint } from './Tint'
 import { Normalise } from './Normalise'
-import { OutputFormat } from './OutputFormat'
 import { InputOutputFileName } from './OutputFileName'
-import { useOutputStore } from '@stores/output'
 import styles from './Options.module.css'
 
 const options = [
@@ -25,25 +22,14 @@ const options = [
   { key: 'normalise', Component: Normalise }
 ] as const
 
-export const Options = () => {
-  const isFileUploaded = useOutputStore(state => state.isFileUploaded())
+export const Options = () => (
+  <Flex width='100%' direction='column' gap='2'>
+    <InputOutputFileName />
 
-  return (
-    <Flex width='100%' direction='column' gap='2'>
-      <InputOutputFileName />
-
-      {options.map(({ key, Component }) => (
-        <Card key={key} className={styles.card}>
-          <Component />
-        </Card>
-      ))}
-
-      {isFileUploaded && (
-        <Fragment>
-          <Separator mt='1' size='4' />
-          <OutputFormat />
-        </Fragment>
-      )}
-    </Flex>
-  )
-}
+    {options.map(({ key, Component }) => (
+      <Card key={key} className={styles.card}>
+        <Component />
+      </Card>
+    ))}
+  </Flex>
+)
diff --git a/apps/frontend/src/widgets/SettingsPanel/TabConvert/Options/OutputFormat/OutputFormat.tsx b/apps/frontend/src/widgets/SettingsPanel/TabConvert/Options/OutputFormat/OutputFormat.tsx
diff --git a/apps/frontend/src/widgets/SettingsPanel/TabConvert/Options/OutputFormat/index.ts b/apps/frontend/src/widgets/SettingsPanel/TabConvert/Options/OutputFormat/index.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { DropdownRequestOptions } from './DropdownRequestOptions'