@nolwenture/formik-jsonschema-form 1.3.1 → 1.3.3

package/dist/cjs/FormView/components/Field.js

@@ -78,12 +78,13 @@ const SelectedBox = styled_components_1.default.div `
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
     ${(props) => props.theme.color.border.default};
-  padding: 0 0.05rem;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   display: flex;
   justify-content: center;
   align-items: start;
+  width: 1rem;
+  height: 1rem;
 `;
 const NotSelectedBox = styled_components_1.default.div `
   background: ${(props) => props.theme.color.background.default};
@@ -91,8 +92,9 @@ const NotSelectedBox = styled_components_1.default.div `
     ${(props) => props.theme.color.border.default};
   border-radius: ${(props) => props.theme.borderRadius.none};
   display: inline-flex;
-  width: 0.85rem;
-  height: 0.85rem;
+  width: 1rem;
+  height: 1rem;
+  min-width: 1rem;
 `;
 exports.SelectedIcon = (0, styled_components_1.default)(fa_1.FaCheck) `
   color: ${(props) => props.theme.color.text.default};
@@ -124,11 +126,7 @@ const BooleanFieldValue = ({ name, className, value, label, }) => {
     return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: (0, jsx_runtime_1.jsx)(exports.SelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedBox, {}), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
 };
 exports.BooleanFieldValue = BooleanFieldValue;
-const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
-    return ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), selected &&
-                    selected.length > 0 &&
-                    selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: (0, jsx_runtime_1.jsx)(exports.SelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
-                    notSelected?.length > 0 &&
-                    notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedBox, {}), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+const MultipleChoiceFieldValue = ({ inputProps, name, className, style, values }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldWrapper, { children: (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: values.map((item) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": item.const, children: item.selected ? ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: (0, jsx_runtime_1.jsx)(exports.SelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: item.title })] })) : ((0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedBox, {}), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: item.title })] })) }, item.const))) }) }));
 };
 exports.MultipleChoiceFieldValue = MultipleChoiceFieldValue;

package/dist/cjs/FormView/fields/MultipleChoiceField.js

@@ -9,16 +9,19 @@ const FormViewRegistry_1 = require("../FormViewRegistry");
 const MultipleChoiceField = (props) => {
     const { templates, components: { MultipleChoiceFieldValue }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema } = props;
-    const { props: inputProps, style, onlyShowSelected, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const { props: inputProps, style } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
     const { values } = (0, formik_1.useFormikContext)();
     const value = (0, formik_1.getIn)(values, name);
-    const selected = (0, utils_1.getSelectedEnum)(value, enums);
-    const notSelected = enums?.values?.filter((v) => Array.isArray(value) ? !value.includes(v.const) : value !== v.const);
-    const hideNotSelected = onlyShowSelected === true || selected === undefined;
+    const allValues = enums?.values?.map((v) => ({
+        ...v,
+        selected: Array.isArray(value)
+            ? value.includes(v.const)
+            : value === v.const,
+    })) ?? [];
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, values: allValues }) }));
 };
 exports.MultipleChoiceField = MultipleChoiceField;

package/dist/cjs/utils/setTitleValues.js

@@ -10,8 +10,8 @@ const setTitleValues = (name, title, defaultTitle, values) => {
     }
     const index = match ? parseInt(match[2]) : -1;
     const itemValues = match ? (0, formik_1.getIn)(values, name)[index] : (0, formik_1.getIn)(values, name);
-    return title.replace(/\$\{([\w$.]+)\}/g, (match) => {
-        const keyMatch = match.match(/^\$\{([\w$.]+)\}$/);
+    return title.replace(/\$\{([\w$.:]+)\}/g, (match) => {
+        const keyMatch = match.match(/^\$\{([\w$.:]+)\}$/);
         const key = keyMatch ? keyMatch[1] : "";
         return key === "index"
             ? (index + 1).toString()

package/dist/esm/FormView/components/Field.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldLabel, } from "../../Form/fields/MultipleChoiceField/styledComponents";
 import { getStyle } from "../../utils/getStyle";
@@ -72,12 +72,13 @@ const SelectedBox = styled.div `
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
     ${(props) => props.theme.color.border.default};
-  padding: 0 0.05rem;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   display: flex;
   justify-content: center;
   align-items: start;
+  width: 1rem;
+  height: 1rem;
 `;
 const NotSelectedBox = styled.div `
   background: ${(props) => props.theme.color.background.default};
@@ -85,8 +86,9 @@ const NotSelectedBox = styled.div `
     ${(props) => props.theme.color.border.default};
   border-radius: ${(props) => props.theme.borderRadius.none};
   display: inline-flex;
-  width: 0.85rem;
-  height: 0.85rem;
+  width: 1rem;
+  height: 1rem;
+  min-width: 1rem;
 `;
 export const SelectedIcon = styled(FaCheck) `
   color: ${(props) => props.theme.color.text.default};
@@ -117,10 +119,6 @@ export const MultipleChoiceFieldWrapper = styled.div `
 export const BooleanFieldValue = ({ name, className, value, label, }) => {
     return (_jsx("div", { className: className, children: value === true ? (_jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Selected" })] })) : (_jsxs(Selected, { children: [_jsx(NotSelectedBox, {}), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
 };
-export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
-    return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, {}), selected &&
-                    selected.length > 0 &&
-                    selected.map((s) => (_jsx(MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
-                    notSelected?.length > 0 &&
-                    notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedBox, {}), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, values }) => {
+    return (_jsx(MultipleChoiceFieldWrapper, { children: _jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: values.map((item) => (_jsx(MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": item.const, children: item.selected ? (_jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: item.title })] })) : (_jsxs(NotSelected, { children: [_jsx(NotSelectedBox, {}), _jsx(MultipleChoiceFieldLabel, { children: item.title })] })) }, item.const))) }) }));
 };

package/dist/esm/FormView/fields/MultipleChoiceField.js

@@ -1,20 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { getIn, useFormikContext } from "formik";
-import { extractUiSchema, getEnums, getSelectedEnum } from "../../utils";
+import { extractUiSchema, getEnums } from "../../utils";
 import { FormViewRegistry } from "../FormViewRegistry";
 export const MultipleChoiceField = (props) => {
     const { templates, components: { MultipleChoiceFieldValue }, } = useContext(FormViewRegistry);
     const { name, uiSchema } = props;
-    const { props: inputProps, style, onlyShowSelected, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const { props: inputProps, style } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const enums = useMemo(() => getEnums(props), [props]);
     const { values } = useFormikContext();
     const value = getIn(values, name);
-    const selected = getSelectedEnum(value, enums);
-    const notSelected = enums?.values?.filter((v) => Array.isArray(value) ? !value.includes(v.const) : value !== v.const);
-    const hideNotSelected = onlyShowSelected === true || selected === undefined;
+    const allValues = enums?.values?.map((v) => ({
+        ...v,
+        selected: Array.isArray(value)
+            ? value.includes(v.const)
+            : value === v.const,
+    })) ?? [];
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, selected: selected, notSelected: hideNotSelected ? undefined : notSelected }) }));
+    return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(MultipleChoiceFieldValue, { inputProps: inputProps, name: name, style: style, values: allValues }) }));
 };

package/dist/esm/utils/setTitleValues.js

@@ -7,8 +7,8 @@ export const setTitleValues = (name, title, defaultTitle, values) => {
     }
     const index = match ? parseInt(match[2]) : -1;
     const itemValues = match ? getIn(values, name)[index] : getIn(values, name);
-    return title.replace(/\$\{([\w$.]+)\}/g, (match) => {
-        const keyMatch = match.match(/^\$\{([\w$.]+)\}$/);
+    return title.replace(/\$\{([\w$.:]+)\}/g, (match) => {
+        const keyMatch = match.match(/^\$\{([\w$.:]+)\}$/);
         const key = keyMatch ? keyMatch[1] : "";
         return key === "index"
             ? (index + 1).toString()

package/dist/types/FormView/components/Field.d.ts

@@ -19,14 +19,11 @@ type BooleanValueFieldProps = {
 };
 export declare const BooleanFieldValue: React.FC<BooleanValueFieldProps>;
 type MultipleChoiceFieldValueProps = {
-    selected: {
+    values: {
         const: string | number;
         title: string;
-    }[] | undefined;
-    notSelected: {
-        const: string | number;
-        title: string;
-    }[] | undefined;
+        selected: boolean;
+    }[];
     inputProps?: any;
     name?: React.ReactNode;
     className?: string;

package/dist/types/FormView/components/index.d.ts

@@ -23,14 +23,11 @@ export declare const components: {
         label?: string;
     }>;
     MultipleChoiceFieldValue: React.FC<{
-        selected: {
+        values: {
             const: string | number;
             title: string;
-        }[] | undefined;
-        notSelected: {
-            const: string | number;
-            title: string;
-        }[] | undefined;
+            selected: boolean;
+        }[];
         inputProps?: any;
         name?: React.ReactNode;
         className?: string;

package/package.json

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