@nolwenture/formik-jsonschema-form 0.6.0 → 0.7.0

package/README.md

@@ -527,6 +527,25 @@ export const conditionsSchema = {
 };
 ```
 
+### Ordering fields
+
+The order of fields can be set using `"ui:order": ["fieldName"]` inside the uiSchema.
+If using "ui:order", all fields that should be visible in the form need to be included in the given array.
+
+```tsx
+const schema = {
+  properties: {
+    secondField: { type: "string" },
+    firstField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": ["firstField", "secondField", "thirdField"],
+};
+```
+
 ## Props
 
 `Form` component props:

package/dist/fields/ObjectField.js

@@ -14,7 +14,7 @@ import { useField, useFormikContext } from "formik";
 import { useContext, useEffect, useMemo } from "react";
 import { FormRegistry } from "../Form";
 import { ObjectFieldButtonPurpose } from "../types";
-import { resolveSchema } from "../utils";
+import { resolveSchema } from "../utils/resolveSchema";
 import { useSetDefault } from "../hooks";
 import { getObjectFieldButton } from "../styledComponents";
 const useObjectField = (name) => {
@@ -26,6 +26,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
+    var _a;
     const { fields: { SchemaField }, templates: { ObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
@@ -44,7 +45,14 @@ export const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
     const additionalValues = useMemo(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    return (_jsxs(ObjectFieldTemplate, Object.assign({}, props, { children: [Object.entries(properties || {}).map(([childName, childSchema]) => (_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName))), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
+    return (_jsxs(ObjectFieldTemplate, Object.assign({}, props, { children: [((_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"]) !== null && _a !== void 0 ? _a : Object.keys(properties || {}))
+                .map((childName) => {
+                const childSchema = properties === null || properties === void 0 ? void 0 : properties[childName];
+                if (!childSchema)
+                    return undefined;
+                return (_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
+            })
+                .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
                 Object.entries(additionalValues || {}).map(([childName, childSchema]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
                                 purpose: ObjectFieldButtonPurpose.REMOVE,
                                 onClick: () => {

package/dist/fields/SearchMultiTagSelectField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
-import { getEnums } from "../utils";
+import { getEnums } from "../utils/getEnums";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
 import { SearchableMultiTagSelectField } from "../styledComponents";
 export const SearchMultiTagSelectField = (props) => {

package/dist/fields/StringField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
-import { getEnums } from "../utils";
+import { getEnums } from "../utils/getEnums";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
 export const StringField = (props) => {
     var _a;

package/dist/hooks/useSetDefault.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useField } from "formik";
-import { getDefaultValueForType } from "../utils";
+import { getDefaultValueForType } from "../utils/getTypes";
 export const useSetDefault = (props) => {
     const [{ value }, _, { setValue }] = useField(props.name);
     useEffect(() => {

package/dist/sampleData/conditionsSchema.js

@@ -11,6 +11,7 @@ export const conditionsSchema = {
                 { const: "hamster", title: "Hamster" },
             ],
         },
+        otherField: { type: "string", title: "Other field" },
     },
     allOf: [
         {
@@ -77,4 +78,5 @@ export const conditionsUiSchema = {
             props: { disabled: false, hidden: false },
         },
     },
+    "ui:order": ["animal", "water", "food", "otherField"],
 };

package/dist/utils/deepOverlap.d.ts

@@ -0,0 +1 @@
+export declare const deepOverlap: (object1: any, object2: any) => boolean;

package/dist/utils/{deepEqual.js → deepOverlap.js}

@@ -1,15 +1,11 @@
 import { isObject } from "./getTypes";
-export const deepEqual = (object1, object2) => {
+export const deepOverlap = (object1, object2) => {
     const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
     for (const key of keys1) {
         const val1 = object1[key];
         const val2 = object2[key];
         const areObjects = isObject(val1) && isObject(val2);
-        if ((areObjects && !deepEqual(val1, val2)) ||
+        if ((areObjects && !deepOverlap(val1, val2)) ||
             (!areObjects && val1 !== val2)) {
             return false;
         }

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./deepEqual";
+export * from "./deepOverlap";
 export * from "./getEnums";
 export * from "./getTitleAndDescription";
 export * from "./getTypes";

package/dist/utils/index.js

@@ -1,4 +1,4 @@
-export * from "./deepEqual";
+export * from "./deepOverlap";
 export * from "./getEnums";
 export * from "./getTitleAndDescription";
 export * from "./getTypes";

package/dist/utils/resolveSchema.js

@@ -9,15 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { deepEqual } from "./deepEqual";
+import { deepOverlap } from "./deepOverlap";
 import { mergeSchemas } from "./mergeSchemas";
 const resolveEquality = (value, expression) => {
     const keyOfValue = Object.keys(value);
     const valueOfValue = Object.values(value);
     const newObject = {
-        properties: { [keyOfValue[0]]: { const: valueOfValue[0] } },
+        properties: keyOfValue.reduce((properties, key, index) => (Object.assign(Object.assign({}, properties), { [key]: { const: valueOfValue[index] } })), {}),
     };
-    return deepEqual(newObject, expression);
+    return deepOverlap(expression, newObject);
 };
 export const resolveSchema = (_a, value) => {
     var _b;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [

package/dist/utils/deepEqual.d.ts

@@ -1 +0,0 @@
-export declare const deepEqual: (object1: any, object2: any) => boolean;