@nolwenture/formik-jsonschema-form 0.6.0 → 0.7.1

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/ArrayField.js

@@ -106,7 +106,7 @@ export const ArrayField = (props) => {
                                             onClick: () => setValue(moveInArray(value, index + items.length, -1)),
                                             uiSchema,
                                         }), value.length > 1 &&
-                                        index < value.length - 1 &&
+                                        index < (value === null || value === void 0 ? void 0 : value.slice(items.length).length) - 1 &&
                                         GetArrayFieldButton({
                                             purpose: ArrayFieldButtonPurpose.MOVE_DOWN,
                                             onClick: () => setValue(moveInArray(value, index + items.length, 1)),

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/styledComponents.js

@@ -352,22 +352,18 @@ export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptyS
         const hasValue = enums === null || enums === void 0 ? void 0 : enums.values.map((value) => value.title.toLowerCase().includes(search.toLowerCase()));
         return hasValue === null || hasValue === void 0 ? void 0 : hasValue.includes(true);
     };
-    return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setValues }, meta, }) => {
+    return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
             var _a;
             return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ type: "hidden" }, field)), _jsx(MultiSelectInput, { className: className, type: "text", onChange: (e) => {
                             setSearch(e.currentTarget.value);
                         }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
                             var _a;
-                            return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setValues({
-                                            [name]: field.value.filter((v) => v !== value),
-                                        }), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
+                            return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
                         }) }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
                                 var _a;
-                                setValues({
-                                    [name]: [
-                                        ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
-                                    ],
-                                });
+                                setFieldValue(name, [
+                                    ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
+                                ]);
                                 setSearch("");
                             }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) })), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
         } }));

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.1",
   "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;