@nolwenture/formik-jsonschema-form 0.14.0 → 0.16.0

package/README.md

@@ -786,6 +786,8 @@ Schemas can be referenced. A referenced schema can be given to a property using
 
 In order to give uiSchema to reused or recursive fields defined in `schema.definitons`, the uiSchema needs to be given to the matching prop of `definitions`-object. This way, the given uiProps are added to the referencing field, no matter how deeply nested it is inside the schema.
 
+If certain aspects of a reused field need to be adapted, `uiSchema.definitions` of that field can be overridden inside `uiSchema` by giving the desired properties to the respective field key. In the following schema/uiSchema `petBirthDate` can be used as an example. The settings are overriding the title of the field from the original "When is your birthday?" to "When is the birthday of your pet?".
+
 ```tsx
 const familyObjectField: Schema = {
   type: "object",
@@ -822,6 +824,8 @@ const refDefSchema: Schema = {
         },
       },
     },
+    pet: { type: "string", title: "Pet name" },
+    petBirthDate: { $ref: "#/definitions/birthDate" },
   },
 
   definitions: {
@@ -846,6 +850,7 @@ const refDefSchema: Schema = {
 };
 
 const refDefUiSchema: UiSchema = {
+  petBirthDate: { "ui:title": "When is the birthday of your pet?" },
   definitions: {
     birthDate: { "ui:field": "DateField" },
     names: {

package/dist/fields/ArrayField.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
 import { useField } from "formik";
+import { useContext, useMemo } from "react";
 import { FormRegistry } from "../Form";
-import { ArrayFieldButtonPurpose } from "../types";
 import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { FieldInput, GetArrayFieldButton } from "../styledComponents";
+import { FieldInput } from "../styledComponents";
 import { FieldTemplate } from "../templates";
 import { getEnums } from "../utils";
 const appendArray = (values) => {
@@ -32,7 +31,8 @@ const moveInArray = (values, index, direction) => {
     }
 };
 export const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
+    var _a, _b, _c, _d;
+    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
     const { type, props: inputProps } = useExtractUiSchema(uiSchema);
@@ -98,28 +98,14 @@ export const ArrayField = (props) => {
     // Backwards compatibility ends
     const { disabled } = useExtractUiSchema(uiSchema);
     const valueArray = Array.isArray(value) ? value : undefined;
-    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: (enums === null || enums === void 0 ? void 0 : enums.type) === "multiSelect", children: enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) })) }))) : (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), forceDefaultValue: true }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
-                                    ? additionalItems
-                                    : {}, uiSchema: Object.assign({ disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), _jsxs(ArrayFieldItemButtons, { children: [GetArrayFieldButton({
-                                        purpose: ArrayFieldButtonPurpose.REMOVE,
-                                        onClick: () => setValue(removeFromArray(value, index + items.length)),
-                                        uiSchema,
-                                    }), value.length > 1 &&
-                                        index > 0 &&
-                                        GetArrayFieldButton({
-                                            purpose: ArrayFieldButtonPurpose.MOVE_UP,
-                                            onClick: () => setValue(moveInArray(value, index + items.length, -1)),
-                                            uiSchema,
-                                        }), 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)),
-                                            uiSchema,
-                                        })] })] }, index)))] }), additionalItems &&
-                GetArrayFieldButton({
-                    purpose: ArrayFieldButtonPurpose.ADD,
-                    onClick: () => setValue(appendArray(value)),
-                    uiSchema,
-                })] })));
+    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", multiple: (enums === null || enums === void 0 ? void 0 : enums.type) === "multiSelect", children: enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) })) }))) : (_jsxs(ArrayFieldTemplate, Object.assign({}, props, { children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items), 
+                            // "true" will prevent validation for required array fields
+                            // since a value always exists in the array
+                            forceDefaultValue: false }) }, index))), ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.slice(items.length)) || []).map((_, index) => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                        return (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
+                                        ? additionalItems
+                                        : {}, uiSchema: Object.assign({ disabled }, ((uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[index + items.length]) || (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema.items))) }), _jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: () => setValue(removeFromArray(value, index + items.length)), children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "-" })), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "↑" }))), value.length > 1 &&
+                                            index < (value === null || value === void 0 ? void 0 : value.slice(items.length).length) - 1 && (_jsx(ArrayFieldDownButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↓" })))] })] }, index));
+                    })] }), additionalItems && (_jsx(ArrayFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: () => setValue(appendArray(value)), children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })))] })));
 };

package/dist/fields/StringField.js

@@ -12,7 +12,11 @@ export const StringField = (props) => {
     const enums = useMemo(() => getEnums(props), [props]);
     switch (enums === null || enums === void 0 ? void 0 : enums.type) {
         case "select":
-            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", children: [_jsx("option", Object.assign({ value: "", disabled: true,
+            return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", children: [_jsx("option", Object.assign({ value: "", 
+                            // If both are true, the first enum will be "selected"
+                            // and leads to annoying and misleading UX.
+                            // These defaults will lead to an empty, "nothing selected" component.
+                            disabled: false,
                             hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder })), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index)))] })) })));
         default:
             return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FieldInput, Object.assign({ type,

package/dist/sampleData/refDefSchema.js

@@ -45,7 +45,10 @@ export const refDefSchema = {
             $ref: "#/definitions/age",
         },
         birthDate: {
-            $ref: "#/definitions/birthDate",
+            $ref: "#/definitions/someDate",
+        },
+        specialDate: {
+            $ref: "#/definitions/someDate",
         },
         creditCard: {
             type: "number",
@@ -243,7 +246,7 @@ export const refDefSchema = {
             },
         },
         age: ageFieldDefinition,
-        birthDate: { type: "string", title: "When is your birthday?" },
+        someDate: { type: "string", title: "When is your birthday?" },
         middleName: { type: "string", title: " Middle name" },
     },
 };
@@ -252,6 +255,7 @@ export const refDefUiSchema = {
         "names",
         "age",
         "birthDate",
+        "specialDate",
         "family",
         "creditCard",
         "billing_address",
@@ -271,8 +275,13 @@ export const refDefUiSchema = {
         },
     },
     feedback: { "ui:field": "TextAreaField" },
+    specialDate: {
+        "ui:title": "A day to remember",
+    },
     definitions: {
-        birthDate: { "ui:field": "DateField" },
+        someDate: {
+            "ui:field": "DateField",
+        },
         names: {
             history: { "ui:field": "TextAreaField" },
             middleNames: { "ui:info": { content: "You can leave those blank" } },

package/dist/styledComponents.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="hoist-non-react-statics" />
-import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps, MultipleChoiceFieldProps, TextAreaInputFieldProps, ClickableProps } from "./types";
-import React from "react";
+import type { ClickableProps, InfoFieldButtonProps, MultipleChoiceFieldProps, ObjectFieldButtonProps, RadioButtonFieldProps, SelectFieldProps, TextAreaInputFieldProps, ToggleSwitchFieldProps } from "./types";
 import * as formik from "formik";
+import React from "react";
 export declare const Form: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>, "ref"> & {
     ref?: ((instance: HTMLFormElement | null) => void) | React.RefObject<HTMLFormElement> | null | undefined;
 }, never>> & Omit<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>, keyof React.Component<any, {}, any>>;
@@ -74,7 +74,6 @@ export declare const ArrayFieldAddButton: import("styled-components").IStyledCom
 }, never>, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>, "ref"> & {
     ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
 }, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
-export declare const GetArrayFieldButton: ({ purpose, onClick, uiSchema, }: ArrayFieldButtonProps) => import("react/jsx-runtime").JSX.Element;
 export declare const FieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const FieldTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
 export declare const FieldDescription: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;

package/dist/styledComponents.js

@@ -10,11 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from "react";
-import styled from "styled-components";
 import * as formik from "formik";
-import { FormRegistry } from "./Form";
-import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose } from "./types";
+import { useState } from "react";
+import styled from "styled-components";
+import { ObjectFieldButtonPurpose } from "./types";
 import { getStyle } from "./utils/getStyle";
 export const Form = styled(formik.Form) ``;
 export const FormButtonWrapper = styled.div ``;
@@ -70,22 +69,6 @@ export const ArrayFieldUpButton = styled(ArrayFieldLineButton) ``;
 export const ArrayFieldDownButton = styled(ArrayFieldLineButton) ``;
 export const ArrayFieldRemoveButton = styled(ArrayFieldLineButton) ``;
 export const ArrayFieldAddButton = styled(ArrayFieldButton) ``;
-export const GetArrayFieldButton = ({ purpose, onClick, uiSchema, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-    const { components: { ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, } = useContext(FormRegistry);
-    switch (purpose) {
-        case ArrayFieldButtonPurpose.ADD:
-            return (_jsx(ArrayFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: onClick, children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })));
-        case ArrayFieldButtonPurpose.REMOVE:
-            return (_jsx(ArrayFieldRemoveButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: onClick, children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "-" })));
-        case ArrayFieldButtonPurpose.MOVE_UP:
-            return (_jsx(ArrayFieldUpButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: onClick, children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↑" })));
-        case ArrayFieldButtonPurpose.MOVE_DOWN:
-            return (_jsx(ArrayFieldDownButton, Object.assign({}, ((_p = (_o = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _o === void 0 ? void 0 : _o.props) !== null && _p !== void 0 ? _p : {}), { onClick: onClick, children: (_r = (_q = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _q === void 0 ? void 0 : _q.content) !== null && _r !== void 0 ? _r : "↓" })));
-        default:
-            return (_jsx(ArrayFieldButton, Object.assign({}, ((_t = (_s = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _s === void 0 ? void 0 : _s.props) !== null && _t !== void 0 ? _t : {}), { onClick: onClick, children: (_v = (_u = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : "" })));
-    }
-};
 export const FieldWrapper = styled.div `
   margin: 0.5rem 0;
 `;

package/dist/types.d.ts

@@ -159,17 +159,6 @@ export type ObjectFieldButtonProps = {
     onClick: () => void;
     uiSchema: UiSchema;
 };
-export declare enum ArrayFieldButtonPurpose {
-    ADD = 0,
-    REMOVE = 1,
-    MOVE_UP = 2,
-    MOVE_DOWN = 3
-}
-export type ArrayFieldButtonProps = {
-    purpose: ArrayFieldButtonPurpose;
-    onClick: () => void;
-    uiSchema: UiSchema;
-};
 export type InfoFieldButtonProps = {
     label?: React.ReactNode;
     content: React.ReactNode;

package/dist/types.js

@@ -5,10 +5,3 @@ export var ObjectFieldButtonPurpose;
     ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["MOVE_UP"] = 2] = "MOVE_UP";
     ObjectFieldButtonPurpose[ObjectFieldButtonPurpose["MOVE_DOWN"] = 3] = "MOVE_DOWN";
 })(ObjectFieldButtonPurpose || (ObjectFieldButtonPurpose = {}));
-export var ArrayFieldButtonPurpose;
-(function (ArrayFieldButtonPurpose) {
-    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["ADD"] = 0] = "ADD";
-    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["REMOVE"] = 1] = "REMOVE";
-    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["MOVE_UP"] = 2] = "MOVE_UP";
-    ArrayFieldButtonPurpose[ArrayFieldButtonPurpose["MOVE_DOWN"] = 3] = "MOVE_DOWN";
-})(ArrayFieldButtonPurpose || (ArrayFieldButtonPurpose = {}));

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

@@ -13,8 +13,8 @@ describe("solveReferences", () => {
         });
     });
     it("should resolve simple references with uiSchema correctly", () => {
-        var _a;
-        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.birthday, refDefSchema.definitions, refDefUiSchema, refDefUiSchema.definitions);
+        var _a, _b;
+        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.birthday, refDefSchema.definitions, (_b = refDefUiSchema.birthday) !== null && _b !== void 0 ? _b : {}, refDefUiSchema.definitions);
         expect(schemaSolvedForReferences).toEqual({
             schema: {
                 type: "string",
@@ -23,4 +23,18 @@ describe("solveReferences", () => {
             uiSchema: { "ui:field": "DateField" },
         });
     });
+    it("should override uiSchema settings when key of field is also given outside definitions object of uiSchema", () => {
+        var _a, _b;
+        const schemaSolvedForReferences = solveReferences((_a = refDefSchema === null || refDefSchema === void 0 ? void 0 : refDefSchema.properties) === null || _a === void 0 ? void 0 : _a.friendBirthday, refDefSchema.definitions, (_b = refDefUiSchema.friendBirthday) !== null && _b !== void 0 ? _b : {}, refDefUiSchema.definitions);
+        expect(schemaSolvedForReferences).toEqual({
+            schema: {
+                type: "string",
+                title: "Birthday", //this is the original title that comes from the definitions, but is getting overridden
+            },
+            uiSchema: {
+                "ui:field": "DateField",
+                "ui:title": "The birthday of your best friend", //this is the title that will be displayed as field title
+            },
+        });
+    });
 });

package/dist/utils/__tests/testSchemas.js

@@ -9,6 +9,9 @@ export const refDefSchema = {
         birthday: {
             $ref: "#/definitions/birthday",
         },
+        friendBirthday: {
+            $ref: "#/definitions/birthday",
+        },
     },
     definitions: {
         name: { type: "string", title: "Name" },
@@ -16,6 +19,7 @@ export const refDefSchema = {
     },
 };
 export const refDefUiSchema = {
+    friendBirthday: { "ui:title": "The birthday of your best friend" },
     definitions: {
         birthday: { "ui:field": "DateField" },
     },

package/dist/utils/createValidationSchema.js

@@ -34,7 +34,14 @@ export function createValidationSchema(schema, definitions = {}) {
                 throw new Error("Unsupported schema type");
         }
         if (requiredFields !== undefined && requiredFields.includes(key)) {
-            yupType = yupType["required"]("Required");
+            if (type === "array") {
+                yupType = yupType
+                    .min(1, "Required")
+                    .required("Required");
+            }
+            else {
+                yupType = yupType["required"]("Required");
+            }
         }
         return yupType;
     }

package/dist/utils/getTypes.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from "../types";
 export declare const isObject: (object: any) => boolean;
 export declare const getDefaultValueForType: (type: Schema["type"]) => {} | null;
-export declare const guessType: (value: any) => "string" | "number" | "boolean" | "object" | "array" | "null";
+export declare const guessType: (value: any) => "object" | "string" | "number" | "boolean" | "array" | "null";
 export declare const getSchemaType: (schema: Schema) => import("json-schema").JSONSchema7TypeName | import("json-schema").JSONSchema7TypeName[] | undefined;

package/dist/utils/orderByUiSchema.js

@@ -10,58 +10,16 @@ export function orderByUiSchema(order, allProperties) {
     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);
+    const finalOrderedArray = [];
+    orderWithoutDuplicates.forEach((element) => {
+        if (element === "*") {
+            const propertiesWithoutOrder = allProperties.filter((prop) => !orderWithoutDuplicates.includes(prop));
+            finalOrderedArray.push(...propertiesWithoutOrder);
         }
         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);
+            finalOrderedArray.push(element);
         }
-    }
+    });
     return finalOrderedArray;
 }

package/dist/utils/solveReferences.js

@@ -1,3 +1,4 @@
+import { mergeSchemas } from "./mergeSchemas";
 export function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions) {
     var _a, _b, _c;
     let solvedSchema = schema;
@@ -5,7 +6,7 @@ export function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitio
     if (typeof schema === "object" && schema["$ref"] && definitions) {
         const schemaKey = (_b = (_a = schema["$ref"]) === null || _a === void 0 ? void 0 : _a.substring(14)) !== null && _b !== void 0 ? _b : "";
         solvedSchema = definitions[schemaKey];
-        solvedUiSchema = (_c = uiSchemaDefinitions === null || uiSchemaDefinitions === void 0 ? void 0 : uiSchemaDefinitions[schemaKey]) !== null && _c !== void 0 ? _c : {};
+        solvedUiSchema = mergeSchemas((_c = uiSchemaDefinitions === null || uiSchemaDefinitions === void 0 ? void 0 : uiSchemaDefinitions[schemaKey]) !== null && _c !== void 0 ? _c : {}, uiSchema !== null && uiSchema !== void 0 ? uiSchema : {});
     }
     return { schema: solvedSchema, uiSchema: solvedUiSchema };
 }

package/package.json

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