Extract functions
This commit is contained in:
@@ -3,6 +3,8 @@ import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import JsonEditor from "./JsonEditor";
|
||||
import { updateValueAtPath, JsonObject } from "@/utils/jsonPathUtils";
|
||||
import { generateDefaultValue, formatFieldLabel } from "@/utils/schemaUtils";
|
||||
|
||||
export type JsonValue =
|
||||
| string
|
||||
@@ -19,8 +21,6 @@ export type JsonSchemaType = {
|
||||
items?: JsonSchemaType;
|
||||
};
|
||||
|
||||
type JsonObject = { [key: string]: JsonValue };
|
||||
|
||||
interface DynamicJsonFormProps {
|
||||
schema: JsonSchemaType;
|
||||
value: JsonValue;
|
||||
@@ -28,12 +28,6 @@ interface DynamicJsonFormProps {
|
||||
maxDepth?: number;
|
||||
}
|
||||
|
||||
const formatFieldLabel = (key: string): string => {
|
||||
return key
|
||||
.replace(/([A-Z])/g, " $1") // Insert space before capital letters
|
||||
.replace(/_/g, " ") // Replace underscores with spaces
|
||||
.replace(/^\w/, (c) => c.toUpperCase()); // Capitalize first letter
|
||||
};
|
||||
|
||||
const DynamicJsonForm = ({
|
||||
schema,
|
||||
@@ -41,30 +35,6 @@ const DynamicJsonForm = ({
|
||||
onChange,
|
||||
maxDepth = 3,
|
||||
}: DynamicJsonFormProps) => {
|
||||
const generateDefaultValue = (propSchema: JsonSchemaType): JsonValue => {
|
||||
switch (propSchema.type) {
|
||||
case "string":
|
||||
return "";
|
||||
case "number":
|
||||
case "integer":
|
||||
return 0;
|
||||
case "boolean":
|
||||
return false;
|
||||
case "array":
|
||||
return [];
|
||||
case "object": {
|
||||
const obj: JsonObject = {};
|
||||
if (propSchema.properties) {
|
||||
Object.entries(propSchema.properties).forEach(([key, prop]) => {
|
||||
obj[key] = generateDefaultValue(prop);
|
||||
});
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const [isJsonMode, setIsJsonMode] = useState(false);
|
||||
const [jsonError, setJsonError] = useState<string>();
|
||||
@@ -272,106 +242,8 @@ const DynamicJsonForm = ({
|
||||
return;
|
||||
}
|
||||
|
||||
const updateArray = (
|
||||
array: JsonValue[],
|
||||
path: string[],
|
||||
value: JsonValue,
|
||||
): JsonValue[] => {
|
||||
const [index, ...restPath] = path;
|
||||
const arrayIndex = Number(index);
|
||||
|
||||
// Validate array index
|
||||
if (isNaN(arrayIndex)) {
|
||||
console.error(`Invalid array index: ${index}`);
|
||||
return array;
|
||||
}
|
||||
|
||||
// Check array bounds
|
||||
if (arrayIndex < 0) {
|
||||
console.error(`Array index out of bounds: ${arrayIndex} < 0`);
|
||||
return array;
|
||||
}
|
||||
|
||||
const newArray = [...array];
|
||||
|
||||
if (restPath.length === 0) {
|
||||
newArray[arrayIndex] = value;
|
||||
} else {
|
||||
// Ensure index position exists
|
||||
if (arrayIndex >= array.length) {
|
||||
console.warn(`Extending array to index ${arrayIndex}`);
|
||||
newArray.length = arrayIndex + 1;
|
||||
newArray.fill(null, array.length, arrayIndex);
|
||||
}
|
||||
newArray[arrayIndex] = updateValue(
|
||||
newArray[arrayIndex],
|
||||
restPath,
|
||||
value,
|
||||
);
|
||||
}
|
||||
return newArray;
|
||||
};
|
||||
|
||||
const updateObject = (
|
||||
obj: JsonObject,
|
||||
path: string[],
|
||||
value: JsonValue,
|
||||
): JsonObject => {
|
||||
const [key, ...restPath] = path;
|
||||
|
||||
// Validate object key
|
||||
if (typeof key !== "string") {
|
||||
console.error(`Invalid object key: ${key}`);
|
||||
return obj;
|
||||
}
|
||||
|
||||
const newObj = { ...obj };
|
||||
|
||||
if (restPath.length === 0) {
|
||||
newObj[key] = value;
|
||||
} else {
|
||||
// Ensure key exists
|
||||
if (!(key in newObj)) {
|
||||
console.warn(`Creating new key in object: ${key}`);
|
||||
newObj[key] = {};
|
||||
}
|
||||
newObj[key] = updateValue(newObj[key], restPath, value);
|
||||
}
|
||||
return newObj;
|
||||
};
|
||||
|
||||
const updateValue = (
|
||||
current: JsonValue,
|
||||
path: string[],
|
||||
value: JsonValue,
|
||||
): JsonValue => {
|
||||
if (path.length === 0) return value;
|
||||
|
||||
try {
|
||||
if (!current) {
|
||||
current = !isNaN(Number(path[0])) ? [] : {};
|
||||
}
|
||||
|
||||
// Type checking
|
||||
if (Array.isArray(current)) {
|
||||
return updateArray(current, path, value);
|
||||
} else if (typeof current === "object" && current !== null) {
|
||||
return updateObject(current, path, value);
|
||||
} else {
|
||||
console.error(
|
||||
`Cannot update path ${path.join(".")} in non-object/array value:`,
|
||||
current,
|
||||
);
|
||||
return current;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error updating value at path ${path.join(".")}:`, error);
|
||||
return current;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const newValue = updateValue(value, path, fieldValue);
|
||||
const newValue = updateValueAtPath(value, path, fieldValue);
|
||||
onChange(newValue);
|
||||
} catch (error) {
|
||||
console.error("Failed to update form value:", error);
|
||||
|
||||
Reference in New Issue
Block a user