feat!: add checkbox field, rename old checkbox and radio

collective · Aug 7, 2021 · 669e88b · 669e88b
1 parent 77215bf
commit 669e88b
Show file tree

Hide file tree

Showing 18 changed files with 134 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -24,8 +24,9 @@ For each field, you can select the field type from:
 - Text
 - Textarea
 - Select
-- Radio buttons
-- Checkbox buttons
+- Single choice (radio buttons)
+- Multiple choice (checkbox buttons)
+- Checkbox
 - Date picker
 - File upload with DnD
 - E-mail

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr ""
 
 #: components/Sidebar
-msgid "form_field_type_radio"
+msgid "form_field_type_multiple_choice"
 msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr ""
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr ""

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -114,7 +114,7 @@ msgstr "Attachment"
 
 #: components/Sidebar
 msgid "form_field_type_checkbox"
-msgstr "Multiple choice"
+msgstr "Checkbox"
 
 #: components/Sidebar
 msgid "form_field_type_date"
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr "E-mail"
 
 #: components/Sidebar
-msgid "form_field_type_radio"
-msgstr "Single choice"
+msgid "form_field_type_multiple_choice"
+msgstr "Multiple choice"
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr "List"
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr "Single choice"
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr "Text"

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr ""
 
 #: components/Sidebar
-msgid "form_field_type_radio"
+msgid "form_field_type_multiple_choice"
 msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr ""
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr ""

diff --git a/locales/eu/LC_MESSAGES/volto.po b/locales/eu/LC_MESSAGES/volto.po
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr ""
 
 #: components/Sidebar
-msgid "form_field_type_radio"
+msgid "form_field_type_multiple_choice"
 msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr ""
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr ""

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr "E-mail"
 
 #: components/Sidebar
-msgid "form_field_type_radio"
-msgstr "Choix unique"
+msgid "form_field_type_multiple_choice"
+msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr "Lister"
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr "Texte"

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -114,7 +114,7 @@ msgstr "Allegato"
 
 #: components/Sidebar
 msgid "form_field_type_checkbox"
-msgstr "Scelta multpla"
+msgstr "Checkbox"
 
 #: components/Sidebar
 msgid "form_field_type_date"
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr "E-mail"
 
 #: components/Sidebar
-msgid "form_field_type_radio"
-msgstr "Scelta singola"
+msgid "form_field_type_multiple_choice"
+msgstr "Scelta multipla"
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr "Lista"
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr "Scelta singola"
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr "Testo"

diff --git a/locales/ja/LC_MESSAGES/volto.po b/locales/ja/LC_MESSAGES/volto.po
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr ""
 
 #: components/Sidebar
-msgid "form_field_type_radio"
+msgid "form_field_type_multiple_choice"
 msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr ""
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr ""

diff --git a/locales/nl/LC_MESSAGES/volto.po b/locales/nl/LC_MESSAGES/volto.po
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr ""
 
 #: components/Sidebar
-msgid "form_field_type_radio"
+msgid "form_field_type_multiple_choice"
 msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr ""
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr ""

diff --git a/locales/pt/LC_MESSAGES/volto.po b/locales/pt/LC_MESSAGES/volto.po
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr ""
 
 #: components/Sidebar
-msgid "form_field_type_radio"
+msgid "form_field_type_multiple_choice"
 msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr ""
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr ""

diff --git a/locales/pt_BR/LC_MESSAGES/volto.po b/locales/pt_BR/LC_MESSAGES/volto.po
@@ -131,13 +131,17 @@ msgid "form_field_type_from"
 msgstr "E-mail"
 
 #: components/Sidebar
-msgid "form_field_type_radio"
-msgstr "Escolha única"
+msgid "form_field_type_multiple_choice"
+msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr "Opções"
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr "Texto"

diff --git a/locales/ro/LC_MESSAGES/volto.po b/locales/ro/LC_MESSAGES/volto.po
@@ -125,13 +125,17 @@ msgid "form_field_type_from"
 msgstr ""
 
 #: components/Sidebar
-msgid "form_field_type_radio"
+msgid "form_field_type_multiple_choice"
 msgstr ""
 
 #: components/Sidebar
 msgid "form_field_type_select"
 msgstr ""
 
+#: components/Sidebar
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 msgid "form_field_type_text"
 msgstr ""

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
  msgstr ""
  "Project-Id-Version: Plone\n"
- "POT-Creation-Date: 2021-08-03T07:34:46.833Z\n"
+ "POT-Creation-Date: 2021-08-07T16:04:30.439Z\n"
  "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
  "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
  "MIME-Version: 1.0\n"
@@ -140,7 +140,7 @@ msgid "form_field_type_attachment"
 msgstr ""
 
 #: components/Sidebar
-# defaultMessage: Multiple choice
+# defaultMessage: Checkbox
 msgid "form_field_type_checkbox"
 msgstr ""
 
@@ -155,15 +155,20 @@ msgid "form_field_type_from"
 msgstr ""
 
 #: components/Sidebar
-# defaultMessage: Single choice
-msgid "form_field_type_radio"
+# defaultMessage: Multiple choice
+msgid "form_field_type_multiple_choice"
 msgstr ""
 
 #: components/Sidebar
 # defaultMessage: List
 msgid "form_field_type_select"
 msgstr ""
 
+#: components/Sidebar
+# defaultMessage: Single choice
+msgid "form_field_type_single_choice"
+msgstr ""
+
 #: components/Sidebar
 # defaultMessage: Text
 msgid "form_field_type_text"

diff --git a/src/components/Field.jsx b/src/components/Field.jsx
@@ -6,9 +6,10 @@ import TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidge
 import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
 import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
 import FileWidget from '@plone/volto/components/manage/Widgets/FileWidget';
+import CheckboxWidget from '@plone/volto/components/manage/Widgets/CheckboxWidget';
 import { DatetimeWidget } from '@plone/volto/components';
 
-import CheckboxWidget from './Widget/CheckboxWidget';
+import CheckboxListWidget from './Widget/CheckboxListWidget';
 import RadioWidget from './Widget/RadioWidget';
 
 import './Field.css';
@@ -84,8 +85,8 @@ const Field = ({
           name={name}
           title={label}
           description={description}
-          getVocabulary={() => {}}
-          getVocabularyTokenTitle={() => {}}
+          getVocabulary={() => { }}
+          getVocabularyTokenTitle={() => { }}
           choices={[...(input_values?.map((v) => [v, v]) ?? [])]}
           value={value}
           onChange={onChange}
@@ -97,7 +98,7 @@ const Field = ({
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
-      {field_type === 'radio' && (
+      {field_type === 'single_choice' && (
         <RadioWidget
           id={name}
           title={label}
@@ -113,8 +114,8 @@ const Field = ({
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
-      {field_type === 'checkbox' && (
-        <CheckboxWidget
+      {field_type === 'multiple_choice' && (
+        <CheckboxListWidget
           id={name}
           name={name}
           title={label}
@@ -130,6 +131,20 @@ const Field = ({
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
+      {field_type === 'checkbox' && (
+        <CheckboxWidget
+          id={name}
+          name={name}
+          title={label}
+          description={description}
+          required={required}
+          onChange={onChange}
+          value={!!value}
+          isDisabled={disabled}
+          invalid={isInvalid().toString()}
+          {...(isInvalid() ? { className: 'is-invalid' } : {})}
+        />
+      )}
       {field_type === 'date' && (
         <DatetimeWidget
           id={name}