feat: add required prop to OptionsInput

ZACHSTRIVES · Mar 11, 2024 · 522b22e · 522b22e
1 parent f1decb3
commit 522b22e
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 32 deletions.
diff --git a/src/components/Utils/src/OptionsInput.tsx b/src/components/Utils/src/OptionsInput.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {ErrorTooltip, InfoTooltip} from "@/components/Utils";
 import {Input} from "@douyinfe/semi-ui";
 import {isNullOrWhiteSpace} from "@/utils/stringUtils";
+import {useIntl} from "@/locale";
 
 export interface OptionsInputProps {
     label: string | React.ReactNode;
@@ -16,14 +17,15 @@ export interface OptionsInputProps {
 
 export const OptionsInput: React.FunctionComponent<OptionsInputProps> = ({...props}) => {
     const {label, infoTooltip, errorMessage, value, style, suffix, onChange, required} = props;
+    const intl = useIntl();
 
     // Add a new useState to manage the validation error message
     const [validationError, setValidationError] = React.useState<string | undefined>();
 
     // Add effect to validate value when it changes or when required status changes
     React.useEffect(() => {
         if (required && isNullOrWhiteSpace(value)) {
-            setValidationError('This field is required.'); // Set default required error message or use props.errorMessage
+            setValidationError(intl.formatMessage({id: 'error.input.isRequired'})); // Set default required error message or use props.errorMessage
         } else {
             setValidationError(undefined); // Clear error message when input is valid
         }

diff --git a/src/core/formatters/Sql/Sql.tsx b/src/core/formatters/Sql/Sql.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 import {FormatRequest, FormatterConfigComponentInterface} from "@/types/formatter";
 import {OptionsInput, OptionsNumberInput, OptionsSelect, SelectOption} from "@/components/Utils";
-import {FormattedMessage, useIntl} from "@/locale";
-import {isNullOrWhiteSpace} from "@/utils/stringUtils";
+import {FormattedMessage} from "@/locale";
 import {OptionsSwitch} from "@/components/Utils/src/OptionsSwitch";
 import {Divider} from "@douyinfe/semi-ui";
 import {DataField} from "@/types/generator";
@@ -149,8 +148,6 @@ const generateInsertStatements = (sqlType: SqlType, tableName: string, sortedFie
 
 // Modify the format function to adapt to different SQL dialects
 export const format = (request: FormatRequest): string => {
-    console.log(request)
-
     const {fields, values, config, sortedFieldIds} = request;
     const {type, tableName, batchSize, dropTable, createTable, primaryKey, primaryKeyColumnName} = config;
 
@@ -201,24 +198,12 @@ export const format = (request: FormatRequest): string => {
 
 export const SqlConfigComponent: React.FC<FormatterConfigComponentInterface> = ({...props}) => {
     const {config, onConfigChange} = props;
-    const intl = useIntl();
 
     // action
     const handleValueChange = (field: string, value: any) => {
         onConfigChange({...config, [field]: value})
     }
 
-    const [errorMessages, setErrorMessages] = React.useState({tableName: ''});
-    React.useEffect(() => {
-        const newErrorMessages = {...errorMessages};
-        if (isNullOrWhiteSpace(config.tableName)) {
-            newErrorMessages.tableName = intl.formatMessage({id: 'export.configurator.sql.tableName.required'});
-        } else {
-            newErrorMessages.tableName = '';
-        }
-        setErrorMessages(newErrorMessages);
-    }, [config.tableName]);
-
     return (
         <div>
             <OptionsSelect
@@ -239,7 +224,7 @@ export const SqlConfigComponent: React.FC<FormatterConfigComponentInterface> = (
                         handleValueChange('tableName', value)
                     }}
                     style={{width: '150px'}}
-                    errorMessage={errorMessages.tableName}
+                    required
                 />
 
                 <OptionsNumberInput
@@ -287,7 +272,7 @@ export const SqlConfigComponent: React.FC<FormatterConfigComponentInterface> = (
                             handleValueChange('primaryKeyColumnName', value)
                         }}
                         style={{width: '80px'}}
-                        errorMessage={errorMessages.tableName}
+                        required
                     />}
                 </div>
             }

diff --git a/src/core/formatters/Typescript/Typescript.tsx b/src/core/formatters/Typescript/Typescript.tsx
@@ -64,9 +64,9 @@ export const format = (request: FormatRequest): string => {
                 fieldType = 'string[]'
                 break;
         }
-        output+= `  ${field.fieldName}${field.emptyRate !== 0 ? "?" : ""}: ${fieldType};\n`;
+        output += `  ${field.fieldName}${field.emptyRate !== 0 ? "?" : ""}: ${fieldType};\n`;
     });
-    output+="}; \n\n"
+    output += "}; \n\n"
 
     // values
     output += `export const ${variableName}: ${declarationName}[] = ${toJsonListStringWithoutQuotes(fields, sortedFieldIds, values)};`;
@@ -101,6 +101,7 @@ export const TypescriptConfigComponent: React.FC<FormatterConfigComponentInterfa
             />
 
             <OptionsInput
+                required
                 label={<FormattedMessage
                     id={`export.configurator.typescript.declarationType.${config.declaration}.name`}/>}
                 value={config.declarationName}
@@ -109,6 +110,7 @@ export const TypescriptConfigComponent: React.FC<FormatterConfigComponentInterfa
             />
 
             <OptionsInput
+                required
                 label={<FormattedMessage id={"export.configurator.typescript.variableName"}/>}
                 value={config.variableName}
                 onChange={(v) => handleValueChange("variableName", v)}

diff --git a/src/locale/index.tsx b/src/locale/index.tsx
@@ -58,6 +58,7 @@ export type FormattedMessageProps = ReactIntlFormattedMessageProps<Record<string
 };
 
 export function FormattedMessage({ id, ...props }: FormattedMessageProps) {
+
     // @ts-ignore
     return <ReactIntlFormattedMessage id={id} {...props} />;
 }
diff --git a/src/locale/translations/en.ts b/src/locale/translations/en.ts
@@ -5,7 +5,7 @@ export const en = {
 
     // export category
     "export.category.file_types": "General file types",
-    "export.category.databases" : "Databases",
+    "export.category.databases": "Databases",
     "export.category.programming_languages": "Programming languages",
 
     // export format modal
@@ -35,7 +35,7 @@ export const en = {
 
     // csv
     "export.configurator.csv.delimiter": "Delimiter",
-    "export.configurator.csv.delimiter.required" : "Delimiter cannot be empty",
+    "export.configurator.csv.delimiter.required": "Delimiter cannot be empty",
     "export.configurator.csv.includeHeader": "Include header",
     "export.configurator.csv.endLineChar": "End of line characters",
 
@@ -77,26 +77,26 @@ export const en = {
     "export.configurator.csharp.dtoClassName": "Class name",
 
     // typescript
-    "export.configurator.typescript.declarationType":"Declaration type",
-    "export.configurator.typescript.declarationType.interface.name":"Interface name",
-    "export.configurator.typescript.declarationType.type.name":"Type name",
-    "export.configurator.typescript.variableName":"Variable name",
+    "export.configurator.typescript.declarationType": "Declaration type",
+    "export.configurator.typescript.declarationType.interface.name": "Interface name",
+    "export.configurator.typescript.declarationType.type.name": "Type name",
+    "export.configurator.typescript.variableName": "Variable name",
 
     // -------------------------------------------------------------------------------------------------------------
     // data types
-    
-    
+
+
     // url
     "dataType.url": "Url",
     "dataType.url.appendSlash.label": "Slash",
-    "dataType.url.protocol.label":"Protocol",
+    "dataType.url.protocol.label": "Protocol",
 
     // domainsuffix
     "dataType.domainsuffix": "Domain Suffix",
 
     // domainname
     "dataType.domainname": "Domain Name",
-        
+
     // accountnumber
     "dataType.accountnumber": "Account Number",
     "dataType.accountnumber.length": "Length",
@@ -109,7 +109,7 @@ export const en = {
     "dataType.color": "Color",
     "dataType.color.kind.label": "Kind",
     "dataType.color.format.label": "Format",
-    "dataType.color.format.humanWord":"Human Word",
+    "dataType.color.format.humanWord": "Human Word",
 
     // phone
     "dataType.phone": "Phone Number",
@@ -244,6 +244,7 @@ export const en = {
     "dataFields.type.modal.search.placeholder": "Search data type...",
 
     // error pages
+    "error.input.isRequired": "This field is required",
     "error.404.description": "Page does not exist",
     "error.404.button.text": "Home page",
     "error.general.description": "Oops! An error has occurred!",

diff --git a/src/locale/translations/zhCN.ts b/src/locale/translations/zhCN.ts
@@ -242,6 +242,7 @@ export const zhCN = {
     "dataFields.type.modal.search.placeholder": "搜索类型...",
 
     // error pages
+    "error.input.isRequired": "此项不能为空",
     "error.404.description": "页面不存在",
     "error.404.button.text": "首页",
     "error.general.description": "Oops! 出错了！",