@nolwenture/formik-jsonschema-form 0.13.0 → 0.14.0

package/README.md

@@ -866,7 +866,7 @@ const refDefUiSchema: UiSchema = {
 ### 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.
+If using `"ui:order"`, all fields that should be visible in the form need to be included in the given array. Fields excluded will not show on the form, in the following they will be referred to as `"hidden fields"`.
 
 ```tsx
 const schema = {
@@ -882,6 +882,42 @@ const uiSchema = {
 };
 ```
 
+Fields excluded will not show on the form. So in the following example "thirdField" will be a `hidden field`.
+
+```tsx
+const schema = {
+  properties: {
+    secondField: { type: "string" },
+    firstField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": ["firstField", "secondField"],
+};
+```
+
+Using `"*"`-wildcard inside the array will add all property fields that were not specifically added to the order-array.
+
+```tsx
+const schema = {
+  properties: {
+    secondField: { type: "string" },
+    firstField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": ["secondField", "*"],
+};
+```
+
+In this example, the resulting order would be ["secondField", "firstField", "thirdField"].
+
+Wildcard `"*"` and `hidden fields` cannot be combined.
+
 ## Props
 
 `Form` component props:

package/dist/fields/ObjectField.js

@@ -17,6 +17,7 @@ import { ObjectFieldButtonPurpose } from "../types";
 import { resolveSchema } from "../utils/resolveSchema";
 import { useSetDefault } from "../hooks";
 import { getObjectFieldButton } from "../styledComponents";
+import { orderByUiSchema } from "../utils";
 const useObjectField = (name) => {
     if (!name) {
         const { values = {}, setValues } = useFormikContext();
@@ -26,7 +27,7 @@ const useObjectField = (name) => {
     return { value, setValue };
 };
 export const ObjectField = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { fields: { SchemaField }, templates: { ObjectFieldTemplate, CollapsibleObjectFieldTemplate }, components: { ObjectFieldItem, ObjectFieldItemButtons }, hideUnmarkedAdditionalProperties, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
@@ -48,7 +49,8 @@ export const ObjectField = (props) => {
     const FieldTemplateComponent = ((_b = (_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.isCollapsible)
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
-    return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { children: [((_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"]) !== null && _c !== void 0 ? _c : Object.keys(properties || {}))
+    const orderedProperties = orderByUiSchema(uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:order"], Object.keys(properties || {}));
+    return (_jsxs(FieldTemplateComponent, Object.assign({}, props, { children: [(orderedProperties !== null && orderedProperties !== void 0 ? orderedProperties : Object.keys(properties || {}))
                 .map((childName) => {
                 const childSchema = properties === null || properties === void 0 ? void 0 : properties[childName];
                 if (!childSchema)

package/dist/fields/TextAreaField.js

@@ -2,9 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { TextAreaInputField } from "../styledComponents";
 export const TextAreaField = (props) => {
-    const { templates: { FieldTemplate }, } = useContext(FormRegistry);
+    const { templates: { FieldTemplate }, components: { TextAreaInputField }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = useExtractUiSchema(uiSchema);

package/dist/utils/__tests/orderByUiSchema.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/__tests/orderByUiSchema.test.js

@@ -0,0 +1,63 @@
+import { orderByUiSchema } from "../orderByUiSchema";
+const allProperties = ["firstName", "lastName", "age", "hobbies"];
+const emptyOrder = undefined;
+const noAsteriskOrder = ["firstName", "age"];
+const asteriskAsFirstElement = ["*", "firstName"];
+const asteriskAsLastElement = ["age", "*"];
+const asteriskAsMiddleElement = ["hobbies", "*", "age"];
+const orderWithDuplicates = ["age", "*", "age", "*", "lastName"];
+describe("orderByUiSchema", () => {
+    it("returns empty array when ui:order is not given", () => {
+        const orderedProperties = orderByUiSchema(emptyOrder, allProperties);
+        expect(orderedProperties).toEqual(undefined);
+    });
+    it("returns only given properties when order includes no asterisk", () => {
+        const orderedProperties = orderByUiSchema(noAsteriskOrder, allProperties);
+        expect(orderedProperties).toEqual(["firstName", "age"]);
+    });
+    it("returns all properties in the given order with asterisk as first element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsFirstElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "lastName",
+            "age",
+            "hobbies",
+            "firstName",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as last element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsLastElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "age",
+            "firstName",
+            "lastName",
+            "hobbies",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as middle element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsMiddleElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "hobbies",
+            "firstName",
+            "lastName",
+            "age",
+        ]);
+    });
+    it("returns all properties in the given order with asterisk as middle element", () => {
+        const orderedProperties = orderByUiSchema(asteriskAsMiddleElement, allProperties);
+        expect(orderedProperties).toEqual([
+            "hobbies",
+            "firstName",
+            "lastName",
+            "age",
+        ]);
+    });
+    it("ignores duplicates in order array to avoid errors", () => {
+        const orderedProperties = orderByUiSchema(orderWithDuplicates, allProperties);
+        expect(orderedProperties).toEqual([
+            "age",
+            "firstName",
+            "hobbies",
+            "lastName",
+        ]);
+    });
+});

package/dist/utils/index.d.ts

@@ -7,4 +7,5 @@ export * from "./resolveSchema";
 export * from "./solveReferences";
 export * from "./createInitialValues";
 export * from "./createValidationSchema";
+export * from "./orderByUiSchema";
 export declare const warnFromUnsupportedKeys: (componentName: string, data: Record<string, any>, supportedKeys: string[]) => void;

package/dist/utils/index.js

@@ -7,6 +7,7 @@ export * from "./resolveSchema";
 export * from "./solveReferences";
 export * from "./createInitialValues";
 export * from "./createValidationSchema";
+export * from "./orderByUiSchema";
 //TODO: REMOVE WHEN ALL SUPPORTED
 export const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
     Object.keys(data).forEach((key) => {

package/dist/utils/orderByUiSchema.d.ts

@@ -0,0 +1 @@
+export declare function orderByUiSchema(order: string[] | undefined, allProperties: string[]): string[] | undefined;

package/dist/utils/orderByUiSchema.js

@@ -0,0 +1,67 @@
+export function orderByUiSchema(order, allProperties) {
+    if (order !== undefined && allProperties !== undefined) {
+        if (order.includes("*")) {
+            return orderWithAsterisk(order, allProperties);
+        }
+        else {
+            return order;
+        }
+    }
+    return undefined;
+}
+function orderWithAsterisk(order, allProperties) {
+    //to avoid issues when asterisk or other strings were wrongly given multiple times
+    const orderWithoutDuplicates = [...new Set(order)];
+    const indexOfAsterisk = orderWithoutDuplicates.indexOf("*");
+    const elementsBeforeAsterisk = indexOfAsterisk !== 0
+        ? orderWithoutDuplicates.slice(0, indexOfAsterisk)
+        : undefined;
+    const elementsAfterAsterisk = indexOfAsterisk !== orderWithoutDuplicates.length - 1
+        ? orderWithoutDuplicates.slice(indexOfAsterisk + 1, orderWithoutDuplicates.length)
+        : undefined;
+    let asteriskArray = [];
+    let finalOrderedArray = [];
+    if (elementsBeforeAsterisk === undefined &&
+        elementsAfterAsterisk === undefined) {
+        finalOrderedArray = allProperties;
+    }
+    if (elementsBeforeAsterisk !== undefined) {
+        finalOrderedArray = finalOrderedArray.concat(elementsBeforeAsterisk);
+        allProperties.map((property) => {
+            elementsBeforeAsterisk.map((e) => {
+                if (e !== property) {
+                    asteriskArray.push(property);
+                }
+            });
+        });
+        if (elementsAfterAsterisk === undefined) {
+            finalOrderedArray = finalOrderedArray.concat(asteriskArray);
+        }
+    }
+    if (elementsAfterAsterisk !== undefined) {
+        if (asteriskArray.length === 0) {
+            allProperties.map((property) => {
+                elementsAfterAsterisk.map((e) => {
+                    if (e !== property) {
+                        asteriskArray.push(property);
+                    }
+                });
+            });
+            finalOrderedArray = finalOrderedArray.concat(asteriskArray);
+            finalOrderedArray = finalOrderedArray.concat(elementsAfterAsterisk);
+        }
+        else {
+            asteriskArray.map((property) => {
+                elementsAfterAsterisk.map((e) => {
+                    if (e === property) {
+                        const index = asteriskArray.indexOf(property);
+                        asteriskArray.splice(index, 1);
+                    }
+                });
+            });
+            finalOrderedArray = finalOrderedArray.concat(asteriskArray);
+            finalOrderedArray = finalOrderedArray.concat(elementsAfterAsterisk);
+        }
+    }
+    return finalOrderedArray;
+}

package/package.json

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