Merge pull request #41 from CarlaPaiva/fea/add-cascader

feat: add cascader instead of select

src/components/converter/converter-steps/upload-step/upload-step.tsx

@@ -1,4 +1,5 @@
-import { Alert, Button, Select, UploadFile } from 'antd'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Alert, Button, Cascader, UploadFile } from 'antd'
 import DraggerUpload from '../../../dragger-upload'
 import './upload-step.css'
 import { memo, useCallback, useMemo, useState } from 'react'
@@ -17,6 +18,12 @@ type ErrorMessage = {
  message: string
 }
 
+type Option = {
+ value: string
+ label: string
+ children?: Option[]
+}
+
 const hideErrorMessage: ErrorMessage = {
  isVisible: false,
  message: '',
@@ -65,9 +72,16 @@ const UploadStep = memo(function UploadStepComponent(
  }, [props.allowedUploadingFormats])
 
  const onSelectedFormatChange = useCallback(
- (value: string) => {
- setFormat(value)
- props.updateSelectedExtension(value)
+ (value: (string | number)[]) => {
+ const result = value[1] as string
+
+ if (!result) {
+ console.warn('Could not read selected format.')
+ return
+ }
+
+ setFormat(result)
+ props.updateSelectedExtension(result)
  },
  [props],
  )
@@ -87,22 +101,39 @@ const UploadStep = memo(function UploadStepComponent(
  }, [files.length, format, props])
 
  const options = useMemo(() => {
- return props.extensionOptions.map((item) => {
- return { value: item.extension, label: item.name }
+ const opts: Option[] = []
+
+ props.extensionOptions.forEach((item) => {
+ if (opts.some((x) => x.label === item.category)) {
+ return
+ }
+
+ const children = props.extensionOptions.filter(
+ (value) => value.category === item.category,
+ )
+
+ opts.push({
+ label: item.category,
+ value: item.category,
+ children: children.map((cItem) => {
+ return { value: cItem.extension, label: cItem.name, children: [] }
+ }),
+ })
  })
+
+ return opts
  }, [props.extensionOptions])
 
  return (
  <div className="container">
  <DraggerUpload accept={acceptedTypes} onUploadDone={onUploadDone} />
- <Select
- value={format}
- placeholder="Convert all to..."
- size="large"
+ <Cascader
  className="container__items"
- onChange={onSelectedFormatChange}
+ size="large"
+ placeholder="Convert all to..."
  options={options}
- ></Select>
+ onChange={onSelectedFormatChange}
+ />
  <Button
  size="large"
  type="primary"

src/components/video-converter/index.tsx

@@ -7,22 +7,27 @@ const optionsToConvertTo: Format[] = [
  {
  name: 'GIF',
  extension: '.gif',
+ category: 'Image',
  },
  {
  name: 'MP4',
  extension: '.mp4',
+ category: 'Video',
  },
  {
  name: 'AVI',
  extension: '.avi',
+ category: 'Video',
  },
  {
  name: 'WMV',
  extension: '.wmv',
+ category: 'Video',
  },
  {
  name: 'MP3',
  extension: '.mp3',
+ category: 'Audio',
  },
 ]
 

src/model/format.ts

@@ -1,7 +1,12 @@
+/** Category of a Format */
+type FormatCategory = 'Image' | 'Audio' | 'Video' | 'File'
+
 /** Defines a format */
 export type Format = {
  /** Name o the format */
  name: string
  /** Extension with a dot */
  extension: string
+ /** Category of the format */
+ category: FormatCategory
 }