1- import { ChangeEvent , forwardRef } from 'react'
2- import { Checkbox , Select , majorScale } from 'evergreen-ui'
1+ import { ChangeEvent , forwardRef , useState } from 'react'
2+ import { Select , majorScale } from 'evergreen-ui'
33import useTranslation from 'next-translate/useTranslation'
44
55import { Form , Label , SqlTextarea } from '@components/forms'
@@ -19,6 +19,7 @@ const dialects = [
1919 'redshift' ,
2020 'spark' ,
2121 'sql' ,
22+ 'sqlite' ,
2223 'tsql' ,
2324]
2425
@@ -37,14 +38,21 @@ export const SqlOutput = forwardRef<HTMLTextAreaElement, OutputProps>(
3738 const { options, setOptions } = useConverterOptionsContext (
3839 converter . outputId ,
3940 )
41+ const [ space , setSpace ] = useState (
42+ ( options . useTabs ? '\t' : ' ' ) . repeat ( options . tabWidth as number ) ,
43+ )
4044
4145 /**
42- * Updates the output options state when the indent dropdown is changed.
46+ * Updates the output options state when the tabWidth dropdown is changed.
4347 *
4448 * @param event - the HTML select change event.
4549 */
46- const onChangeIndent = ( event : ChangeEvent < HTMLSelectElement > ) => {
47- setOptions ( { ...options , indent : event . target . value } )
50+ const onChangeTabWidth = ( event : ChangeEvent < HTMLSelectElement > ) => {
51+ const spc = event . target . value
52+ const useTabs = spc [ 0 ] === '\t'
53+ const tabWidth = spc . split ( '' ) . length
54+ setOptions ( { ...options , tabWidth, useTabs } )
55+ setSpace ( event . target . value )
4856 }
4957
5058 /**
@@ -57,19 +65,19 @@ export const SqlOutput = forwardRef<HTMLTextAreaElement, OutputProps>(
5765 }
5866
5967 /**
60- * Updates the output options state when the upper -case checkbox is changed.
68+ * Updates the output options state when the keyword -case dropdown is changed.
6169 *
62- * @param event - the HTML checkbox change event.
70+ * @param event - the HTML select change event.
6371 */
64- const onChangeUpperCase = ( event : ChangeEvent < HTMLInputElement > ) => {
65- setOptions ( { ...options , uppercase : event . target . checked } )
72+ const onChangeKeywordCase = ( event : ChangeEvent < HTMLSelectElement > ) => {
73+ setOptions ( { ...options , keywordCase : event . target . value } )
6674 }
6775
6876 return (
6977 < Form >
7078 < Label
7179 disabled = { disabled }
72- htmlFor = "indentInput "
80+ htmlFor = "languageInput "
7381 label = { t ( 'language_label' ) }
7482 >
7583 < Select
@@ -89,15 +97,15 @@ export const SqlOutput = forwardRef<HTMLTextAreaElement, OutputProps>(
8997
9098 < Label
9199 disabled = { disabled }
92- htmlFor = "indentInput "
93- label = { t ( 'indent_label ' ) }
100+ htmlFor = "tabWidthInput "
101+ label = { t ( 'tab_width_label ' ) }
94102 >
95103 < Select
96104 disabled = { disabled }
97- id = "indentInput "
105+ id = "tabWidthInput "
98106 maxWidth = { majorScale ( 15 ) }
99- onChange = { onChangeIndent }
100- value = { options . indent as string }
107+ onChange = { onChangeTabWidth }
108+ value = { space }
101109 >
102110 < option value = { ' ' } > { t ( '2_spaces_option' ) } </ option >
103111 < option value = { ' ' } > { t ( '4_spaces_option' ) } </ option >
@@ -107,15 +115,19 @@ export const SqlOutput = forwardRef<HTMLTextAreaElement, OutputProps>(
107115
108116 < Label
109117 disabled = { disabled }
110- htmlFor = "upperCaseInput "
111- label = { t ( 'upper_case_label ' ) }
118+ htmlFor = "keywordCaseInput "
119+ label = { t ( 'keyword_case_label ' ) }
112120 >
113- < Checkbox
114- checked = { options . uppercase as boolean }
121+ < Select
115122 disabled = { disabled }
116- id = "upperCaseInput"
117- onChange = { onChangeUpperCase }
118- />
123+ id = "keywordCaseInput"
124+ maxWidth = { majorScale ( 15 ) }
125+ onChange = { onChangeKeywordCase }
126+ value = { options . keywordCase as string }
127+ >
128+ < option value = { 'upper' } > { t ( 'keyword_upper_case_option' ) } </ option >
129+ < option value = { 'lower' } > { t ( 'keyword_lower_case_option' ) } </ option >
130+ </ Select >
119131 </ Label >
120132
121133 < SqlTextarea
0 commit comments