diff --git a/src/components/Field.jsx b/src/components/Field.jsx
index a5a022b..18233e5 100644
--- a/src/components/Field.jsx
+++ b/src/components/Field.jsx
@@ -25,32 +25,61 @@ const messages = defineMessages({
},
});
+const widgetMapping = {
+ single_choice: RadioWidget,
+ checkbox: CheckboxWidget,
+};
+
/**
* Field class.
* @class View
* @extends Component
*/
-const Field = ({
- label,
- description,
- name,
- field_type,
- required,
- input_values,
- value,
- onChange,
- isOnEdit,
- valid,
- disabled = false,
- formHasErrors = false,
- id,
-}) => {
+const Field = (props) => {
+ const {
+ label,
+ description,
+ name,
+ field_type,
+ required,
+ input_values,
+ value,
+ onChange,
+ isOnEdit,
+ valid,
+ disabled = false,
+ formHasErrors = false,
+ id,
+ widget,
+ } = props;
const intl = useIntl();
const isInvalid = () => {
return !isOnEdit && !valid;
};
+ if (widget) {
+ const Widget = widgetMapping[widget];
+ const valueList =
+ field_type === 'yes_no'
+ ? [
+ { value: true, label: 'Yes' },
+ { value: false, label: 'No' },
+ ]
+ : [...(input_values?.map((v) => ({ value: v, label: v })) ?? [])];
+
+ return (
+
+ );
+ }
+
return (
{field_type === 'text' && (
@@ -135,7 +164,7 @@ const Field = ({
{...(isInvalid() ? { className: 'is-invalid' } : {})}
/>
)}
- {field_type === 'checkbox' && (
+ {(field_type === 'yes_no' || field_type === 'checkbox') && (
{
+ return {
+ fields: ['widget'],
+ properties: {
+ widget: {
+ title: intl.formatMessage(messages.field_widget),
+ type: 'array',
+ choices: [
+ ['checkbox', 'Checkbox'],
+ ['single_choice', 'Radio'],
+ ],
+ default: 'checkbox',
+ },
+ },
+ required: ['widget'],
+ };
+};
diff --git a/src/components/FieldTypeSchemaExtenders/index.js b/src/components/FieldTypeSchemaExtenders/index.js
index fb9659a..09d86b8 100644
--- a/src/components/FieldTypeSchemaExtenders/index.js
+++ b/src/components/FieldTypeSchemaExtenders/index.js
@@ -1,2 +1,3 @@
export { SelectionSchemaExtender } from './SelectionSchemaExtender';
export { FromSchemaExtender } from './FromSchemaExtender';
+export { YesNoSchemaExtender } from './YesNoSchemaExtender';
diff --git a/src/fieldSchema.js b/src/fieldSchema.js
index 95916b5..a8e805e 100644
--- a/src/fieldSchema.js
+++ b/src/fieldSchema.js
@@ -39,9 +39,9 @@ const messages = defineMessages({
id: 'form_field_type_multiple_choice',
defaultMessage: 'Multiple choice',
},
- field_type_checkbox: {
- id: 'form_field_type_checkbox',
- defaultMessage: 'Checkbox',
+ field_type_yes_no: {
+ id: 'field_type_yes_no',
+ defaultMessage: 'Yes/ No',
},
field_type_date: {
id: 'form_field_type_date',
@@ -76,7 +76,7 @@ export default (props) => {
'multiple_choice',
intl.formatMessage(messages.field_type_multiple_choice),
],
- ['checkbox', intl.formatMessage(messages.field_type_checkbox)],
+ ['yes_no', intl.formatMessage(messages.field_type_yes_no)],
['date', intl.formatMessage(messages.field_type_date)],
['attachment', intl.formatMessage(messages.field_type_attachment)],
['from', intl.formatMessage(messages.field_type_from)],
diff --git a/src/index.js b/src/index.js
index 676ed26..87efc51 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,6 +18,7 @@ import FieldSchema from 'volto-form-block/fieldSchema';
import {
SelectionSchemaExtender,
FromSchemaExtender,
+ YesNoSchemaExtender
} from './components/FieldTypeSchemaExtenders';
export {
submitForm,
@@ -43,6 +44,7 @@ const applyConfig = (config) => {
single_choice: SelectionSchemaExtender,
multiple_choice: SelectionSchemaExtender,
from: FromSchemaExtender,
+ yes_no: YesNoSchemaExtender,
},
restricted: false,
mostUsed: true,