@nolwenture/formik-jsonschema-form 1.0.0-beta.33 → 1.0.0-beta.34

package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsibleObjectFieldTemplate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const formik_1 = require("formik");
 const react_1 = require("react");
 const utils_1 = require("../../../utils");
 const FormRegistry_1 = require("../../FormRegistry");
@@ -10,7 +11,9 @@ const CollapsibleObjectFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
     const { children, name, uiSchema, ...otherProps } = props;
-    const title = (0, utils_1.getTitle)(props);
+    const formikCtx = (0, formik_1.useFormikContext)();
+    const values = formikCtx.values ? formikCtx.values : {};
+    const title = (0, utils_1.setTitleValues)(name, ((0, utils_1.getTitle)(props) ?? ""), values);
     const description = (0, utils_1.getDescription)(props);
     const { help, info, isCollapsedOnLoad = true, openIcon, collapsedIcon, 
     //TODO: This is not right

package/dist/cjs/utils/index.js

@@ -27,6 +27,7 @@ __exportStar(require("./createInitialValues"), exports);
 __exportStar(require("./createValidationSchema"), exports);
 __exportStar(require("./orderByUiSchema"), exports);
 __exportStar(require("./orderAdditionalProperties"), exports);
+__exportStar(require("./setTitleValues"), exports);
 //TODO: REMOVE WHEN ALL SUPPORTED
 const warnFromUnsupportedKeys = (componentName, data, supportedKeys) => {
     Object.keys(data).forEach((key) => {

package/dist/cjs/utils/setTitleValues.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setTitleValues = void 0;
+const formik_1 = require("formik");
+// Replaces template string variables with form data for CollapsibleObjectFieldTemplate titles
+const setTitleValues = (name, title, values) => {
+    const match = name.match(/^([a-zA-Z_$][\w$]*)\[(\d+)\]$/);
+    if (match) {
+        name = match[1];
+    }
+    const index = match ? parseInt(match[2]) : -1;
+    const itemValues = match ? values[name][index] : values[name];
+    return title.replace(/\$\{([\w$.]+)\}/g, (match) => {
+        const keyMatch = match.match(/^\$\{([\w$.]+)\}$/);
+        const key = keyMatch ? keyMatch[1] : "";
+        return key === "index" ? (index + 1).toString() :
+            (0, formik_1.getIn)(itemValues, key) !== undefined ? (0, formik_1.getIn)(itemValues, key) : key;
+    });
+};
+exports.setTitleValues = setTitleValues;

package/dist/esm/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
 import { useContext, useMemo, useState } from "react";
-import { extractUiSchema, getDescription, getTitle } from "../../../utils";
+import { extractUiSchema, getDescription, getTitle, setTitleValues } from "../../../utils";
 import { FormRegistry } from "../../FormRegistry";
 import { getComponents } from "./styledComponents";
 export const CollapsibleObjectFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
     const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = getComponents(components);
     const { children, name, uiSchema, ...otherProps } = props;
-    const title = getTitle(props);
+    const formikCtx = useFormikContext();
+    const values = formikCtx.values ? formikCtx.values : {};
+    const title = setTitleValues(name, (getTitle(props) ?? ""), values);
     const description = getDescription(props);
     const { help, info, isCollapsedOnLoad = true, openIcon, collapsedIcon, 
     //TODO: This is not right

package/dist/esm/utils/index.js

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

package/dist/esm/utils/setTitleValues.js

@@ -0,0 +1,16 @@
+import { getIn } from "formik";
+// Replaces template string variables with form data for CollapsibleObjectFieldTemplate titles
+export const setTitleValues = (name, title, values) => {
+    const match = name.match(/^([a-zA-Z_$][\w$]*)\[(\d+)\]$/);
+    if (match) {
+        name = match[1];
+    }
+    const index = match ? parseInt(match[2]) : -1;
+    const itemValues = match ? values[name][index] : values[name];
+    return title.replace(/\$\{([\w$.]+)\}/g, (match) => {
+        const keyMatch = match.match(/^\$\{([\w$.]+)\}$/);
+        const key = keyMatch ? keyMatch[1] : "";
+        return key === "index" ? (index + 1).toString() :
+            getIn(itemValues, key) !== undefined ? getIn(itemValues, key) : key;
+    });
+};

package/dist/types/utils/index.d.ts

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

package/dist/types/utils/setTitleValues.d.ts

@@ -0,0 +1 @@
+export declare const setTitleValues: (name: string, title: string, values: Record<string, Array<Record<string, unknown>>>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.0-beta.33",
+  "version": "1.0.0-beta.34",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [