@nolwenture/formik-jsonschema-form 0.4.2 → 0.5.0

package/dist/templates/ArrayFieldTemplate.js

@@ -1,28 +1,15 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, getDescription, getTitle } from "../utils";
 import { RequiredIndicator } from "../styledComponents";
 export function ArrayFieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, ArrayFieldWrapper = _a.ArrayFieldWrapper, ArrayFieldTitle = _a.ArrayFieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp, InfoFieldButton = _a.InfoFieldButton;
-    var name = props.name, uiSchema = props.uiSchema, children = props.children;
-    var title = getTitle(props);
-    var description = getDescription(props);
-    var _b = useExtractUiSchema(uiSchema), help = _b.help, info = _b.info, 
+    const { components: { ArrayFieldWrapper, ArrayFieldTitle, FieldDescription, ErrorMessage, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
+    const { name, uiSchema, children } = props;
+    const title = getTitle(props);
+    const description = getDescription(props);
+    const { help, info, 
     //TODO: This is not right
-    _c = _b.props, 
-    //TODO: This is not right
-    _d = _c === void 0 ? {} : _c, wrappertProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help, errorProps = _d.error;
-    return (_jsxs(ArrayFieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsxs(ArrayFieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
+    props: { wrapper: wrappertProps, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
+    return (_jsxs(ArrayFieldWrapper, Object.assign({}, wrappertProps, { children: [title && (_jsxs(ArrayFieldTitle, Object.assign({}, titleProps, { htmlFor: name }, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
 }

package/dist/templates/FieldTemplate.js

@@ -1,27 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { useExtractUiSchema, getDescription, getTitle } from "../utils";
 export function FieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, FieldWrapper = _a.FieldWrapper, FieldTitle = _a.FieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp, RequiredIndicator = _a.RequiredIndicator, InfoFieldButton = _a.InfoFieldButton;
-    var name = props.name, uiSchema = props.uiSchema, children = props.children;
-    var title = getTitle(props);
-    var description = getDescription(props);
-    var _b = useExtractUiSchema(uiSchema), help = _b.help, info = _b.info, 
+    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, InfoFieldButton, }, } = useContext(FormRegistry);
+    const { name, uiSchema, children } = props;
+    const title = getTitle(props);
+    const description = getDescription(props);
+    const { help, info, 
     //TODO: This is not right
-    _c = _b.props, 
-    //TODO: This is not right
-    _d = _c === void 0 ? {} : _c, wrappertProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help, errorProps = _d.error;
-    return (_jsxs(FieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsxs(FieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
+    props: { wrapper: wrappertProps, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
+    return (_jsxs(FieldWrapper, Object.assign({}, wrappertProps, { children: [title && (_jsxs(FieldTitle, Object.assign({}, titleProps, { htmlFor: name }, { children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
 }

package/dist/templates/ObjectFieldTemplate.js

@@ -1,28 +1,17 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
 import { getDescription, getTitle, useExtractUiSchema } from "../utils";
 import { RequiredIndicator } from "../styledComponents";
 export function ObjectFieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, FieldDescription = _a.FieldDescription, ObjectFieldTitle = _a.ObjectFieldTitle, ObjectFieldWrapper = _a.ObjectFieldWrapper, FieldHelp = _a.FieldHelp, InfoFieldButton = _a.InfoFieldButton;
-    var children = props.children, uiSchema = props.uiSchema;
-    var title = getTitle(props);
-    var description = getDescription(props);
-    var _b = useExtractUiSchema(uiSchema), help = _b.help, info = _b.info, 
+    const { components: { FieldDescription, ObjectFieldTitle, ObjectFieldWrapper, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
+    const { children, uiSchema } = props;
+    const title = getTitle(props);
+    const description = getDescription(props);
+    const { help, info, 
     //TODO: This is not right
-    _c = _b.props, 
-    //TODO: This is not right
-    _d = _c === void 0 ? {} : _c, wrapperProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help;
-    return (_jsxs(ObjectFieldWrapper, __assign({}, wrapperProps, { children: [title && (_jsxs(ObjectFieldTitle, __assign({}, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help }))] })));
+    props: { wrapper: wrapperProps, title: titleProps, description: descriptionProps, help: helpProps,
+    // error: errorProps,
+     } = {}, } = useExtractUiSchema(uiSchema);
+    return (_jsxs(ObjectFieldWrapper, Object.assign({}, wrapperProps, { children: [title && (_jsxs(ObjectFieldTitle, Object.assign({}, titleProps, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help }))] })));
 }

package/dist/types.d.ts

@@ -37,6 +37,11 @@ export type UiSchema = {
     };
     "ui:help"?: React.ReactNode | React.ReactNode[];
     "ui:info"?: InfoFieldButtonProps;
+    "ui:placeholderOptionOptions"?: {
+        props: {
+            [key: string]: any;
+        };
+    };
     [name: string]: any;
 };
 export type FormRegistryContextValue = {
@@ -121,6 +126,9 @@ export type ComponentsType = {
     ErrorMessage: React.FunctionComponent<any>;
     FieldInput: React.FunctionComponent<any>;
     RequiredIndicator: React.FunctionComponent<any>;
+    RadioButtonField: React.FunctionComponent<any>;
+    ToggleSwitchField: React.FunctionComponent<any>;
+    SearchableMultiTagSelectField: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,
@@ -147,10 +155,33 @@ export type ArrayFieldButtonProps = {
 export type InfoFieldButtonProps = {
     label?: React.ReactNode;
     content: React.ReactNode;
-    position?: 'top' | 'right' | 'bottom' | 'left';
+    position?: "top" | "right" | "bottom" | "left";
     className?: string;
     props: any;
 };
+type RadioButtonLabelObject = {
+    true?: string;
+    false?: string;
+};
+export type RadioButtonFieldProps = {
+    label?: RadioButtonLabelObject;
+    inputProps?: any;
+    name?: React.ReactNode;
+    className?: string;
+};
+export type ToggleSwitchFieldProps = {
+    inputProps: any;
+    name: React.ReactNode;
+    className?: string;
+};
+export type SelectFieldProps = {
+    name: string;
+    enums: any;
+    emptySearchMessage?: string;
+    placeholder?: string;
+    closeElement?: React.ReactNode;
+    className?: string;
+};
 /*** ***/
 export type AjvError = {
     message: string;

package/dist/utils.d.ts

@@ -11,6 +11,13 @@ export declare function getDescription({ description, uiSchema, schema, }: {
     uiSchema?: UiSchema;
     schema?: Schema;
 }): any;
+export declare function getEnums({ schema }: FieldProps): {
+    type: string;
+    values: {
+        const: any;
+        title: string;
+    }[];
+} | undefined;
 export declare function getDefaultValueForType(type: JSONSchema7["type"]): {} | null;
 export declare function useSetDefault(props: FieldProps): void;
 export declare function useExtractUiSchema(props?: UiSchema | undefined): {

package/dist/utils.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -22,23 +11,51 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { useField } from "formik";
 import { useEffect, useMemo } from "react";
-export function getTitle(_a) {
-    var _b;
-    var title = _a.title, uiSchema = _a.uiSchema, schema = _a.schema, name = _a.name;
+export function getTitle({ title, uiSchema, schema, name, }) {
+    var _a;
     return (title ||
-        ((_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:options"]) === null || _b === void 0 ? void 0 : _b.title) ||
+        ((_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:options"]) === null || _a === void 0 ? void 0 : _a.title) ||
         (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:title"]) ||
         (schema === null || schema === void 0 ? void 0 : schema.title) ||
         (name === null || name === void 0 ? void 0 : name.split(".")[(name === null || name === void 0 ? void 0 : name.split(".").length) - 1]));
 }
-export function getDescription(_a) {
-    var _b;
-    var description = _a.description, uiSchema = _a.uiSchema, schema = _a.schema;
+export function getDescription({ description, uiSchema, schema, }) {
+    var _a;
     return (description ||
-        ((_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:options"]) === null || _b === void 0 ? void 0 : _b.description) ||
+        ((_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:options"]) === null || _a === void 0 ? void 0 : _a.description) ||
         (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:description"]) ||
         (schema === null || schema === void 0 ? void 0 : schema.description));
 }
+export function getEnums({ schema }) {
+    const numberOfDefined = [schema.enum, schema.oneOf, schema.anyOf].filter((x) => x).length;
+    if (numberOfDefined === 0) {
+        return;
+    }
+    if (numberOfDefined > 1) {
+        throw new Error('Only one of "enum", "oneOf" or "anyOf" can be defined!');
+    }
+    if (schema.enum) {
+        return {
+            type: "select",
+            values: schema.enum.map((option) => ({
+                const: option,
+                title: `${option}`,
+            })),
+        };
+    }
+    if (schema.oneOf) {
+        return {
+            type: "select",
+            values: schema.oneOf,
+        };
+    }
+    if (schema.anyOf) {
+        return {
+            type: "multiSelect",
+            values: schema.anyOf,
+        };
+    }
+}
 export function getDefaultValueForType(type) {
     if (type && !Array.isArray(type)) {
         if (type === "array")
@@ -49,8 +66,8 @@ export function getDefaultValueForType(type) {
     return null;
 }
 export function useSetDefault(props) {
-    var _a = useField(props.name), value = _a[0].value, _ = _a[1], setValue = _a[2].setValue;
-    useEffect(function () {
+    const [{ value }, _, { setValue }] = useField(props.name);
+    useEffect(() => {
         if (!value) {
             if (props.schema.default) {
                 setValue(props.schema.default);
@@ -61,20 +78,16 @@ export function useSetDefault(props) {
         }
     }, []);
 }
-export function useExtractUiSchema(props) {
-    if (props === void 0) { props = {}; }
+export function useExtractUiSchema(props = {}) {
     if (props.props !== undefined) {
-        props["ui:props"] = __assign(__assign({}, props["ui:props"]), props.props);
-    }
-    return useMemo(function () {
-        var _a = props["ui:options"], options = _a === void 0 ? {} : _a, uiSchema = __rest(props, ["ui:options"]);
-        return __assign(__assign({}, Object.keys(uiSchema || {}).reduce(function (result, key) {
-            var _a;
-            return (__assign(__assign({}, result), (_a = {}, _a[key.replace("ui:", "")] = uiSchema[key], _a)));
-        }, {})), options);
+        props["ui:props"] = Object.assign(Object.assign({}, props["ui:props"]), props.props);
+    }
+    return useMemo(() => {
+        const { "ui:options": options = {} } = props, uiSchema = __rest(props, ["ui:options"]);
+        return Object.assign(Object.assign({}, Object.keys(uiSchema || {}).reduce((result, key) => (Object.assign(Object.assign({}, result), { [key.replace("ui:", "")]: uiSchema[key] })), {})), options);
     }, [props]);
 }
-export var guessType = function guessType(value) {
+export const guessType = function guessType(value) {
     if (Array.isArray(value)) {
         return "array";
     }
@@ -100,7 +113,7 @@ export function getSchemaType(schema) {
     if (!schema) {
         return undefined;
     }
-    var type = schema.type;
+    let { type } = schema;
     if (!type && schema.const) {
         return guessType(schema.const);
     }
@@ -111,15 +124,15 @@ export function getSchemaType(schema) {
         return "object";
     }
     if (type instanceof Array && type.length === 2 && type.includes("null")) {
-        return type.find(function (type) { return type !== "null"; });
+        return type.find((type) => type !== "null");
     }
     return type;
 }
 //TODO: REMOVE WHEN ALL SUPPORTED
 export function warnFromUnsupportedKeys(componentName, data, supportedKeys) {
-    Object.keys(data).forEach(function (key) {
+    Object.keys(data).forEach((key) => {
         if (!supportedKeys.includes(key)) {
-            console.warn("Component \"".concat(componentName, "\" does not support (yet) key \"").concat(key, "\""));
+            console.warn(`Component "${componentName}" does not support (yet) key "${key}"`);
         }
     });
 }

package/package.json

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