diff --git a/src/admin/utils/fieldTypes.jsx b/src/admin/utils/fieldTypes.jsx
index 1db3375..5399d5b 100644
--- a/src/admin/utils/fieldTypes.jsx
+++ b/src/admin/utils/fieldTypes.jsx
@@ -47,26 +47,42 @@ export const common = {
values: [6, 8, 12, 16, 18, 24],
labels: ["25%", "33%", "50%", "66%", "75%", "100%"],
},
- isModal: {
+ showAsModal: {
title: "Display as Modal",
type: "boolean",
},
},
+
dependencies: {
- isModal: {
- properties: {
- modal: {
+ showAsModal: {
+ oneOf: [
+ {
properties: {
- btnText: { type: "string" },
- okText: { type: "string" },
- modalWidth: { type: "string" },
- headerDirection: {
- type: "string",
- enum: ["horizontal", "vertical"],
+ showAsModal: {
+ enum: [false],
},
},
},
- },
+ {
+ properties: {
+ showAsModal: {
+ enum: [true],
+ },
+ modal: {
+ title: "Modal settings",
+ type: "object",
+ properties: {
+ buttonText: { title: "Button title", type: "string" },
+ modalWidth: { title: "Modal width", type: "integer" },
+ buttonInNewLine: {
+ title: "Button in new line",
+ type: "boolean",
+ },
+ },
+ },
+ },
+ },
+ ],
required: ["modal"],
},
},
@@ -78,6 +94,18 @@ export const common = {
span: {
"ui:widget": "slider",
},
+ modal: {
+ "ui:options": {
+ showAsModal: true,
+ modal: {
+ buttonInNewLine: true,
+ },
+ },
+ },
+ showAsModal: {
+ "ui:widget": "switch",
+ },
+ "ui:order": ["showAsModal", "modal", "*"],
},
},
};
@@ -262,26 +290,12 @@ const collections = {
common.optionsUiSchema.properties["ui:options"].dependencies,
properties: {
...common.optionsUiSchema.properties["ui:options"].properties,
- itemsDisplayTitle: {
- type: "string",
- title: "Items Display Title",
- description:
- "You can set a fixed value or you can reference child fields between `{{` and `}}`",
- },
},
},
},
},
optionsUiSchemaUiSchema: {
...common.optionsUiSchemaUiSchema,
- "ui:options": {
- itemsDisplayTitle: {
- "ui:widget": "itemsDisplayTitle",
- "ui:options": {
- descriptionIsMarkdown: true,
- },
- },
- },
},
default: {
schema: {
@@ -1029,7 +1043,7 @@ const advanced = {
{ const: "zenodo", title: "Zenodo" },
],
},
- uniqueItems: "true",
+ uniqueItems: true,
},
},
},
diff --git a/src/forms/templates/Field/FieldModal.jsx b/src/forms/templates/Field/FieldModal.jsx
index 397c2ea..460f8f9 100644
--- a/src/forms/templates/Field/FieldModal.jsx
+++ b/src/forms/templates/Field/FieldModal.jsx
@@ -1,53 +1,44 @@
import { useState } from "react";
-import { Button, Divider, Modal, Space } from "antd";
+import { Button, Modal, Space } from "antd";
import "../../Form.less";
import { EditOutlined } from "@ant-design/icons";
function FieldModal(props) {
- const [modalOpen, setmodalOpen] = useState(false);
+ const [modalOpen, setModalOpen] = useState(false);
const { label, content, options } = props;
+
return (
<>
- }
- direction={
- ["horizontal", "vertical"].indexOf(options?.headerDirection) > -1
- ? options.headerDirection
- : "horizontal"
- }
+ direction={options.buttonInNewLine ? "vertical" : "horizontal"}
style={{
display: "flex",
flex: 1,
- width: "100%",
- backgdround: "blue",
- justifyCodntent: "space-between",
+ justifyContent: "space-between",
}}
>
{label}
}
- onClick={() => setmodalOpen(!modalOpen)}
+ onClick={() => setModalOpen(!modalOpen)}
>
- {options?.btnText || "Open"}
+ {options?.buttonText || "Open"}
setmodalOpen(false)}
+ onCancel={() => setModalOpen(false)}
footer={null}
className="formule-field-modal"
- width={options?.modalWidth ? options?.modalWidth : 416}
+ width={options?.modalWidth ? options?.modalWidth : 400}
>
{content}
diff --git a/src/forms/templates/Field/FieldTemplate.jsx b/src/forms/templates/Field/FieldTemplate.jsx
index 802baa4..5fb721f 100644
--- a/src/forms/templates/Field/FieldTemplate.jsx
+++ b/src/forms/templates/Field/FieldTemplate.jsx
@@ -49,8 +49,10 @@ const FieldTemplate = ({
const { ["ui:options"]: uiOptions = {} } = uiSchema;
+ const shouldShowAsModal = uiOptions?.showAsModal === true;
+
let _children;
- if (uiOptions?.isModal) {
+ if (shouldShowAsModal) {
_children = (