react-json-schema-ui-editor - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/index.d.ts

@@ -145,2 +145,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 }
+interface CollapseButtonInputParams {
+    onClick: () => void;
+    isCollapsed: boolean;
+}
 interface JsonSchemaEditorProps {
@@ -153,6 +157,7 @@ initialSchema?: JSONSchema7;
     renderPropertyName: (p: PropertyNameInputParams) => React.ReactNode;
+    renderCollapseButton?: (p: CollapseButtonInputParams) => React.ReactNode;
     onChange?: (json: JSONSchema7) => any;
 }
-declare const JsonSchemaEditor: ({ initialSchema, renderInput, renderAddPropertyButton, renderRemovePropertyButton, renderPropertyName, onChange, }: JsonSchemaEditorProps) => react_jsx_runtime.JSX.Element;
+declare const JsonSchemaEditor: ({ initialSchema, renderInput, renderAddPropertyButton, renderRemovePropertyButton, renderPropertyName, renderCollapseButton, onChange, }: JsonSchemaEditorProps) => react_jsx_runtime.JSX.Element;
 
-export { type ButtonInputParams, type InputInputParams, type JSONSchema7, type JSONSchema7Array, type JSONSchema7Definition, type JSONSchema7Object, type JSONSchema7Type, type JSONSchema7TypeName, type JSONSchema7Version, JsonSchemaEditor, type JsonSchemaEditorProps, type PropertyNameInputParams, jsonSchemaAvailableTypes, jsonSchemaPossibleFieldType, jsonSchemaPossibleFields };
+export { type ButtonInputParams, type CollapseButtonInputParams, type InputInputParams, type JSONSchema7, type JSONSchema7Array, type JSONSchema7Definition, type JSONSchema7Object, type JSONSchema7Type, type JSONSchema7TypeName, type JSONSchema7Version, JsonSchemaEditor, type JsonSchemaEditorProps, type PropertyNameInputParams, jsonSchemaAvailableTypes, jsonSchemaPossibleFieldType, jsonSchemaPossibleFields };

dist/index.js

@@ -24,3 +24,3 @@ // src/components/JsonSchemaContext.tsx
   const [errors, setErrors] = useState([]);
-  const [schema, setSchema] = useState(init);
+  const [schema, setSchema] = useState(_.cloneDeep(init));
   useEffect(() => {
@@ -39,9 +39,9 @@ if (onChange && !isFirstRender.current) {
         return _.setWith(
-          _.setWith(_.clone(prev), path, property, _.clone),
+          _.setWith(_.cloneDeep(prev), path, property, _.cloneDeep),
           `${getPropertyPath(splittedPath.slice(0, -1).join("."))}items`,
           { type: "string" },
-          _.clone
+          _.cloneDeep
         );
       }
-      return _.setWith(_.clone(prev), path, property, _.clone);
+      return _.setWith(_.cloneDeep(prev), path, property, _.cloneDeep);
     });
@@ -53,18 +53,15 @@ };
       if (splitedPath.length < 2) {
-        return prev;
+        const newSchema = _.cloneDeep(prev);
+        delete newSchema[splitedPath[0]];
+        return newSchema;
       }
-      if (splitedPath.length === 2) {
-        const newProperties = _.clone(prev.properties);
-        delete newProperties[splitedPath[1]];
-        return _.setWith(_.clone(prev), `properties`, newProperties, _.clone);
-      }
-      const propertyName = splitedPath[splitedPath.length - 1];
-      const parentObjectPath = splitedPath.filter((_2, index) => index < splitedPath.length - 2).join(".");
-      const properties = _.get(schema, parentObjectPath).properties;
-      delete properties[propertyName];
+      const parentObjectPath = splitedPath.slice(0, -1).join(".");
+      const parentObject = _.get(prev, parentObjectPath);
+      const propertyBeingRemoved = splitedPath[splitedPath.length - 1];
+      delete parentObject[propertyBeingRemoved];
       return _.setWith(
-        _.clone(prev),
-        `${parentObjectPath}.properties`,
-        properties,
-        _.clone
+        _.cloneDeep(prev),
+        parentObjectPath,
+        parentObject,
+        _.cloneDeep
       );
@@ -89,6 +86,6 @@ });
       (prev) => _.setWith(
-        _.clone(prev),
+        _.cloneDeep(prev),
         `${path ? `${path}.` : ""}properties.${property}`,
         { type: "string" },
-        _.clone
+        _.cloneDeep
       )
@@ -137,3 +134,4 @@ );
     getPathState: () => ({}),
-    getPropertyPath: () => "."
+    getPropertyPath: () => ".",
+    getPathErrors: () => []
   }
@@ -148,3 +146,3 @@ });
 // src/components/JsonSchemaPropertyRow.tsx
-import "react";
+import { useState as useState3 } from "react";
 
@@ -195,10 +193,17 @@ // src/jsonSchemaDescriptor.ts
   const {
-    derived,
-    actions: { setSchemaProperty }
+    derived: { getPropertyPath, getPathState },
+    actions: { setSchemaProperty, removeSchemaProperty }
   } = useJsonSchemaContext();
-  const currentRowState = derived.getPathState(path);
+  const currentRowState = getPathState(path);
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     renderInput({
       onChange: (value) => {
-        setSchemaProperty(`${path}.minimum`, Number(value));
+        if (typeof value === "string" && value.length === 0) {
+          removeSchemaProperty(`${getPropertyPath(path)}minimum`);
+          return;
+        }
+        setSchemaProperty(
+          `${getPropertyPath(path)}minimum`,
+          Number(value)
+        );
       },
@@ -211,3 +216,10 @@ value: currentRowState.minimum,
       onChange: (value) => {
-        setSchemaProperty(`${path}.maximum`, Number(value));
+        if (typeof value === "string" && value.length === 0) {
+          removeSchemaProperty(`${getPropertyPath(path)}maximum`);
+          return;
+        }
+        setSchemaProperty(
+          `${getPropertyPath(path)}maximum`,
+          Number(value)
+        );
       },
@@ -230,2 +242,3 @@ value: currentRowState.maximum,
   renderPropertyName,
+  renderCollapseButton,
   isArrayItems
@@ -240,2 +253,6 @@ }) => {
   const currentRowIsArray = currentRowState.type === "array";
+  const [isRowCollapsed, setRowCollapsed] = useState3(currentRowIsObject);
+  const toggleCollapse = () => {
+    setRowCollapsed((p) => !p);
+  };
   return /* @__PURE__ */ jsxs3(
@@ -247,2 +264,6 @@ "div",
         /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "start" }, children: [
+          renderCollapseButton && currentRowIsObject && renderCollapseButton({
+            onClick: toggleCollapse,
+            isCollapsed: isRowCollapsed
+          }),
           name && renderPropertyName && renderPropertyName({ propertyName: name }),
@@ -318,3 +339,3 @@ renderInput({
           /* @__PURE__ */ jsxs3("div", { children: [
-            currentRowIsObject && Object.keys(currentRowState.properties || {}).map((prop) => /* @__PURE__ */ jsx2(
+            currentRowIsObject && !isRowCollapsed && Object.keys(currentRowState.properties || {}).map((prop) => /* @__PURE__ */ jsx2(
               JsonSchemaPropertyRow,
@@ -326,2 +347,3 @@ {
                 renderPropertyName,
+                renderCollapseButton,
                 path: `${getPropertyPath(path)}properties.${prop}`,
@@ -339,2 +361,3 @@ name: prop
                 renderPropertyName,
+                renderCollapseButton,
                 path: `${getPropertyPath(path)}items`,
@@ -360,2 +383,3 @@ name: `${name || ""} items`,
   renderPropertyName,
+  renderCollapseButton,
   onChange
@@ -369,3 +393,4 @@ }) => {
       renderRemovePropertyButton,
-      renderPropertyName
+      renderPropertyName,
+      renderCollapseButton
     }
@@ -372,0 +397,0 @@ ) });

package.json

 {
   "name": "react-json-schema-ui-editor",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React component to edit json schema in a UI.",
@@ -21,3 +21,4 @@ "keywords": [
     "dev": "ladle serve",
-    "preview": "ladle preview"
+    "preview": "ladle preview",
+    "test": "vitest"
   },
@@ -45,9 +46,14 @@ "tsup": {
     "@ladle/react": "^4.1.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@types/lodash": "^4.17.7",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
+    "jsdom": "^25.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^8.3.0",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.4"
   },
@@ -54,0 +60,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

88422

6.93%

Lines of code

952

6.13%

Worsened metrics

Dev dependency count

13

62.5%

No dependency changes