@nolwenture/formik-jsonschema-form 2.0.1 → 2.0.3

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

@@ -117,12 +117,12 @@ exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
     align-items: start;
   }
   padding-left: ${(props) => props.theme.spacing.l};
-  -webkit-column-break-inside: avoid;
-  page-break-inside: avoid;
-  break-inside: avoid;
+  -webkit-column-break-inside: auto;
+  page-break-inside: auto;
+  break-inside: auto;
 `;
-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" })] })) }));
+const BooleanFieldValue = ({ name, className, value, label, selectedLabel, notSelectedLabel, }) => {
+    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 : (selectedLabel ?? "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 : (notSelectedLabel ?? "Not selected") })] })) }));
 };
 exports.BooleanFieldValue = BooleanFieldValue;
 const MultipleChoiceFieldValue = ({ inputProps, name, className, style, values }) => {

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

@@ -7,10 +7,11 @@ const formik_1 = require("formik");
 const utils_1 = require("../../utils");
 const FormViewRegistry_1 = require("../FormViewRegistry");
 const BooleanField = (props) => {
-    const { templates, components: { BooleanFieldValue, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
+    const { templates, components: { BooleanFieldValue, BooleanFieldWrapper }, formLocalization, } = (0, react_1.useContext)(FormViewRegistry_1.FormViewRegistry);
     const { name, uiSchema } = props;
     const { label } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const { values } = (0, formik_1.useFormikContext)();
+    const loc = formLocalization?.fields?.BooleanField ?? {};
     const value = (0, formik_1.getIn)(values, name);
     function findLabel(label) {
         if (typeof label === "object" && label !== null) {
@@ -28,6 +29,6 @@ const BooleanField = (props) => {
     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)(BooleanFieldWrapper, { children: (0, jsx_runtime_1.jsx)(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, children: (0, jsx_runtime_1.jsx)(BooleanFieldWrapper, { children: (0, jsx_runtime_1.jsx)(BooleanFieldValue, { name: name, value: value, label: findLabel(label), selectedLabel: loc.selectedLabel, notSelectedLabel: loc.notSelectedLabel }) }) }));
 };
 exports.BooleanField = BooleanField;

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

@@ -111,12 +111,12 @@ export const MultipleChoiceFieldWrapper = styled.div `
     align-items: start;
   }
   padding-left: ${(props) => props.theme.spacing.l};
-  -webkit-column-break-inside: avoid;
-  page-break-inside: avoid;
-  break-inside: avoid;
+  -webkit-column-break-inside: auto;
+  page-break-inside: auto;
+  break-inside: auto;
 `;
-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 BooleanFieldValue = ({ name, className, value, label, selectedLabel, notSelectedLabel, }) => {
+    return (_jsx("div", { className: className, children: value === true ? (_jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : (selectedLabel ?? "Selected") })] })) : (_jsxs(Selected, { children: [_jsx(NotSelectedBox, {}), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : (notSelectedLabel ?? "Not selected") })] })) }));
 };
 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/BooleanField.js

@@ -4,10 +4,11 @@ import { getIn, useFormikContext } from "formik";
 import { extractUiSchema } from "../../utils";
 import { FormViewRegistry } from "../FormViewRegistry";
 export const BooleanField = (props) => {
-    const { templates, components: { BooleanFieldValue, BooleanFieldWrapper }, } = useContext(FormViewRegistry);
+    const { templates, components: { BooleanFieldValue, BooleanFieldWrapper }, formLocalization, } = useContext(FormViewRegistry);
     const { name, uiSchema } = props;
     const { label } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const { values } = useFormikContext();
+    const loc = formLocalization?.fields?.BooleanField ?? {};
     const value = getIn(values, name);
     function findLabel(label) {
         if (typeof label === "object" && label !== null) {
@@ -25,5 +26,5 @@ export const BooleanField = (props) => {
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(BooleanFieldWrapper, { children: _jsx(BooleanFieldValue, { name: name, value: value, label: findLabel(label) }) }) }));
+    return (_jsx(SelectedFieldTemplate, { ...props, children: _jsx(BooleanFieldWrapper, { children: _jsx(BooleanFieldValue, { name: name, value: value, label: findLabel(label), selectedLabel: loc.selectedLabel, notSelectedLabel: loc.notSelectedLabel }) }) }));
 };

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

@@ -16,6 +16,8 @@ type BooleanValueFieldProps = {
     className?: string;
     value: boolean;
     label?: string;
+    selectedLabel?: string;
+    notSelectedLabel?: string;
 };
 export declare const BooleanFieldValue: React.FC<BooleanValueFieldProps>;
 type MultipleChoiceFieldValueProps = {

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

@@ -21,6 +21,8 @@ export declare const components: {
         className?: string;
         value: boolean;
         label?: string;
+        selectedLabel?: string;
+        notSelectedLabel?: string;
     }>;
     MultipleChoiceFieldValue: React.FC<{
         values: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -122,4 +122,4 @@
       "last 1 safari version"
     ]
   }
-}
+}