Merge pull request #271 from ZACHSTRIVES/dev

Dev
ZACHSTRIVES · Mar 14, 2024 · 28d75c1 · 28d75c1
2 parents ef0e18b + 67284ae
commit 28d75c1
Show file tree

Hide file tree

Showing 30 changed files with 1,090 additions and 159 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dummyi",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -23,7 +23,7 @@
     "@uiw/codemirror-extensions-langs": "^4.21.9",
     "@uiw/codemirror-themes": "^4.21.9",
     "@uiw/react-codemirror": "^4.21.20",
-    "@vercel/analytics": "^1.0.2",
+    "@vercel/analytics": "^1.2.2",
     "autoprefixer": "10.4.16",
     "emoji-picker-react": "^4.5.3",
     "eslint": "8.47.0",
@@ -53,6 +53,6 @@
     "cypress": "^12.17.4",
     "mini-css-extract-plugin": "^2.7.6",
     "typescript": "^5.1.6",
-    "webpack": "^5.88.2"
+    "webpack": "^5.90.3"
   }
 }
diff --git a/scripts/addNewGenerator.ts b/scripts/addNewGenerator.ts
@@ -106,7 +106,7 @@ export const ${generatorName}GeneratorDefaultOptions:${generatorName}GeneratorOp
 
 // -------------------------------------------------------------------------------------------------------------
 // generate method
-export const generate = (options: any): GenerateResult => {
+export const generate = (options: ${generatorName}GeneratorOptions): GenerateResult => {
     // TODO: implement your own generate method here
    
     return {
@@ -125,9 +125,9 @@ export const ${generatorName}GeneratorOptionsComponent: React.FunctionComponent<
     
     // TODO: implement your own options component here
     return (
-        <div>
+        <>
             NOT IMPLEMENTED
-        </div>
+        </>
     );
 }`;
 }

diff --git a/src/components/DevTools/src/GenerateResultsPreviewer.tsx b/src/components/DevTools/src/GenerateResultsPreviewer.tsx
@@ -77,7 +77,7 @@ export const GenerateResultsPreviewer: React.FunctionComponent<GenerateResultsPr
 
     return (
         <div>
-            <Card style={{width: "400px", height: "250px"}}>
+            <Card style={{width: "400px", height: "250px", borderColor: isError ? "red" : null}}>
                 <Space>
                     <Tag size={'small'} type={colorMode === ColorMode.DARK ? 'solid' : 'ghost'}>{formatType}</Tag>
                     {isError && <Tag size={'small'} style={{color: 'red'}}>ERROR</Tag>}

diff --git a/src/components/InputPanel/src/InputPanel.tsx b/src/components/InputPanel/src/InputPanel.tsx
@@ -23,7 +23,7 @@ export const InputPanel: React.FunctionComponent<InputPanelProps> = () => {
 
             setPanelHeight(containerHeight);
 
-            if (containerWidth > 1000) {
+            if (containerWidth > 900) {
                 setComponentSize(ComponentSize.LARGE);
             } else if (containerWidth > 550) {
                 setComponentSize(ComponentSize.MEDIUM);

diff --git a/src/components/InputPanel/src/components/DataTypeSelectModal.tsx b/src/components/InputPanel/src/components/DataTypeSelectModal.tsx
@@ -21,7 +21,7 @@ export interface DataTypeSelectModalProps {
 
 export const DataTypeSelectModal: React.FunctionComponent<DataTypeSelectModalProps> = ({...props}) => {
     const intl = useIntl();
-    const {Title} = Typography;
+    const {Title, Text} = Typography;
     const dispatch = useDispatch();
     const [searchText, setSearchText] = React.useState(null);
     const data = useMemo(() => getGeneratorList(searchText, intl), [intl, searchText]);
@@ -34,7 +34,7 @@ export const DataTypeSelectModal: React.FunctionComponent<DataTypeSelectModalPro
 
     // actions
     const handleSelect = (item: Generator) => {
-        dispatch(doChangeDataType(currentTargetDataFieldId,item.type));
+        dispatch(doChangeDataType(currentTargetDataFieldId, item.type));
         onCancel();
     }
 
@@ -106,7 +106,9 @@ export const DataTypeSelectModal: React.FunctionComponent<DataTypeSelectModalPro
                                                         item.exampleLines && item.exampleLines.map((example, index) => (
                                                             <div key={index}
                                                                  className={styles.dataTypeSelectModalCard__example}>
-                                                                {example}
+                                                                <Text ellipsis={{showTooltip: true}} type="tertiary">
+                                                                    {example}
+                                                                </Text>
                                                             </div>
                                                         ))
                                                     }

diff --git a/src/components/Utils/src/OptionsDatetimePicker.tsx b/src/components/Utils/src/OptionsDatetimePicker.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import {ErrorTooltip, InfoTooltip} from "@/components/Utils";
+import {useIntl} from "@/locale";
+import {isNullOrWhiteSpace} from "@/utils/stringUtils";
+import {DatePicker} from "@douyinfe/semi-ui";
+import {hasValue} from "@/utils/typeUtils";
+
+export interface OptionsDatetimePickerProps {
+    label: string | React.ReactNode;
+    type?: "date" | "dateTime" | "dateRange" | "dateTimeRange";
+    infoTooltip?: string | React.ReactNode;
+    errorMessage?: string;
+    value: string | number | Date | string[] | number[] | Date[];
+    onChange: (value: any) => void;
+    style?: React.CSSProperties;
+    required?: boolean;
+}
+
+export const OptionsDatetimePicker: React.FunctionComponent<OptionsDatetimePickerProps> = ({...props}) => {
+    const {label, type, infoTooltip, errorMessage, value, style, 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 && !hasValue(value)) {
+            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
+        }
+    }, [value, required]);
+
+    return (
+        <div className="generatorConfig_column">
+            <div className='generatorConfig_column__label'>
+                {label}
+                {infoTooltip && <InfoTooltip>
+                    {infoTooltip}
+                </InfoTooltip>}
+            </div>
+            <ErrorTooltip message={validationError || errorMessage}>
+                <DatePicker
+                    density="compact"
+                    type={type}
+                    onChange={(date, dateString) => onChange(dateString)}
+                    value={value}
+                    style={style}
+                    validateStatus={!isNullOrWhiteSpace(validationError || errorMessage) ? 'error' : 'default'}
+                />
+            </ErrorTooltip>
+        </div>
+    )
+}
diff --git a/src/components/Utils/src/OptionsSwitch.tsx b/src/components/Utils/src/OptionsSwitch.tsx
@@ -27,7 +27,7 @@ export const OptionsSwitch: React.FunctionComponent<OptionsSwitchProps> = ({...p
             <ErrorTooltip message={errorMessage}>
                 <Switch
                     onChange={onChange}
-                    size={size ? size : 'default'}
+                    size={size ? size : 'large'}
                     checked={value}
                     style={style}
                 />