From eca94aa0af9cdc7836e14295d527b405dde27dc8 Mon Sep 17 00:00:00 2001
From: Carla Paiva <carla.paiva05@hotmail.com>
Date: Mon, 1 Apr 2024 23:06:08 -0300
Subject: [PATCH] fix: cascader with not goood

---
 .../converter/converter-steps/index.tsx       | 135 ++++++++++--------
 .../upload-step/upload-step.tsx               |   1 +
 2 files changed, 75 insertions(+), 61 deletions(-)

diff --git a/src/components/converter/converter-steps/index.tsx b/src/components/converter/converter-steps/index.tsx
index 7617bae..a44072d 100644
--- a/src/components/converter/converter-steps/index.tsx
+++ b/src/components/converter/converter-steps/index.tsx
@@ -1,77 +1,90 @@
-import { memo, useCallback, useState } from "react"
-import UploadStep from "./upload-step/upload-step"
-import { Format } from "../../../model/format"
-import { Spin, UploadFile } from "antd"
-import ResultStep from "./result-step/result-step"
-import { ConvertedFile } from "../../../model/converted-file"
+import { memo, useCallback, useState } from 'react'
+import UploadStep from './upload-step/upload-step'
+import { Format } from '../../../model/format'
+import { Spin, UploadFile } from 'antd'
+import ResultStep from './result-step/result-step'
+import { ConvertedFile } from '../../../model/converted-file'
 
 enum Steps {
-    Upload = "upload",
-    Result = "result"
+  Upload = 'upload',
+  Result = 'result',
 }
 
 type ConverterStepsProps = {
-    extensionOptions:Format[]
-    populateFileList: (files: UploadFile[]) => void
-    allowedUploadingFormats: string[]
-    convertedFiles: ConvertedFile[]
-    convert: () => Promise<void>
-    clearStates: () => void
-    downloadFiles: () => void
-    updateSelectedExtension: (extension: string) => void
+  extensionOptions: Format[]
+  populateFileList: (files: UploadFile[]) => void
+  allowedUploadingFormats: string[]
+  convertedFiles: ConvertedFile[]
+  convert: () => Promise<void>
+  clearStates: () => void
+  downloadFiles: () => void
+  updateSelectedExtension: (extension: string) => void
 }
 
-const ConverterSteps = memo(function ConverterStepsComponent(props: ConverterStepsProps): JSX.Element {
-    const [ currentStep, setCurrentStep ] = useState<Steps>(Steps.Upload)
-    const [ isConverting, setIsConverting ] = useState(false)
+const ConverterSteps = memo(function ConverterStepsComponent(
+  props: ConverterStepsProps,
+): JSX.Element {
+  const [currentStep, setCurrentStep] = useState<Steps>(Steps.Upload)
+  const [isConverting, setIsConverting] = useState(false)
 
-    const onConvertClick = useCallback(async () => {
-        setIsConverting(true)
-        await props.convert()
+  const onConvertClick = useCallback(async () => {
+    setIsConverting(true)
+    await props.convert()
 
-        setCurrentStep(Steps.Result)
-        setIsConverting(false)
-    }, [props])
+    setCurrentStep(Steps.Result)
+    setIsConverting(false)
+  }, [props])
 
-    const convertMoreFiles = useCallback(() => {
-        props.clearStates()
-        setIsConverting(false)
-        setCurrentStep(Steps.Upload)
-    }, [props])
+  const convertMoreFiles = useCallback(() => {
+    props.clearStates()
+    setIsConverting(false)
+    setCurrentStep(Steps.Upload)
+  }, [props])
 
-    const getUploadStep = useCallback(() => {
-        return <UploadStep 
-                    allowedUploadingFormats={props.allowedUploadingFormats}
-                    extensionOptions={props.extensionOptions}
-                    onConvertClick={onConvertClick}
-                    populateFileList={props.populateFileList}
-                    updateSelectedExtension={props.updateSelectedExtension} />
-    }, [props.allowedUploadingFormats, props.extensionOptions, props.populateFileList, props.updateSelectedExtension, onConvertClick])
-
-    const getResultStep = useCallback(() => {
-        return <ResultStep 
-                    convertedItems={props.convertedFiles}
-                    downloadFiles={props.downloadFiles}
-                    convertMoreFiles={convertMoreFiles} />
-    }, [convertMoreFiles, props.convertedFiles, props.downloadFiles])
-
-    const converterSteps = {
-        upload:  getUploadStep(),
-        result: getResultStep()
-    }
+  const getUploadStep = useCallback(() => {
+    return (
+      <UploadStep
+        allowedUploadingFormats={props.allowedUploadingFormats}
+        extensionOptions={props.extensionOptions}
+        onConvertClick={onConvertClick}
+        populateFileList={props.populateFileList}
+        updateSelectedExtension={props.updateSelectedExtension}
+      />
+    )
+  }, [
+    props.allowedUploadingFormats,
+    props.extensionOptions,
+    props.populateFileList,
+    props.updateSelectedExtension,
+    onConvertClick,
+  ])
 
+  const getResultStep = useCallback(() => {
     return (
-        <>
-            { converterSteps[currentStep] }
-            <Spin 
-                tip="Converting..." 
-                size="large" 
-                spinning={isConverting}
-                fullscreen
-            />
-            
-        </>
+      <ResultStep
+        convertedItems={props.convertedFiles}
+        downloadFiles={props.downloadFiles}
+        convertMoreFiles={convertMoreFiles}
+      />
     )
+  }, [convertMoreFiles, props.convertedFiles, props.downloadFiles])
+
+  const converterSteps = {
+    upload: getUploadStep(),
+    result: getResultStep(),
+  }
+
+  return (
+    <>
+      {converterSteps[currentStep]}
+      <Spin
+        tip="Converting..."
+        size="large"
+        spinning={isConverting}
+        fullscreen
+      />
+    </>
+  )
 })
 
-export default ConverterSteps
\ No newline at end of file
+export default ConverterSteps
diff --git a/src/components/converter/converter-steps/upload-step/upload-step.tsx b/src/components/converter/converter-steps/upload-step/upload-step.tsx
index e9eb3b3..721e9f8 100644
--- a/src/components/converter/converter-steps/upload-step/upload-step.tsx
+++ b/src/components/converter/converter-steps/upload-step/upload-step.tsx
@@ -132,6 +132,7 @@ const UploadStep = memo(function UploadStepComponent(
         size="large"
         placeholder="Convert all to..."
         options={options}
+        dropdownStyle={{ minWidth: '700px' }}
         onChange={onSelectedFormatChange}
       />
       <Button