Add requiredIndicator field to display in the label when a field is r…

…equired #207
bobbingwide · Sep 11, 2022 · 5d5ec92 · 5d5ec92
1 parent 080d644
commit 5d5ec92
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/src/oik-contact-field/block.json b/src/oik-contact-field/block.json
@@ -21,6 +21,9 @@
     "required": {
       "type": "boolean"
     },
+    "requiredIndicator": {
+      "type": "string"
+    },
     "length": {
       "type": "numeric"
     },

diff --git a/src/oik-contact-field/contact-field-control.js b/src/oik-contact-field/contact-field-control.js
@@ -1,4 +1,14 @@
+/**
+ * Displays the Contact field control.
+ *
+ * Simulates the field in the form.
+ *
+ * @copyright (C) Copyright Bobbing Wide 2022
+ * @author Herb Miller @bobbingwide
+ */
+
 import {
+    CheckboxControl,
     TextControl,
     TextareaControl,
     ToggleControl,
@@ -9,11 +19,13 @@ const ContactFieldControl = ( { setAttributes, type, name, required }) => {
         return(
         <TextareaControl type={type} name={name} required={required}/>
         );
+    } else if ( type === 'checkbox' )  {
+        return(
+            <CheckboxControl name={name} required={required} />
+        );
     } else {
         return(
-
             <TextControl type={type} name={name} required={required}/>
-
         );
     }
 }

diff --git a/src/oik-contact-field/index.js b/src/oik-contact-field/index.js
@@ -33,17 +33,21 @@ const fieldTypes =
 
     [
         {
-            label: __( 'Text' ),
+            label: __( 'Text', 'oik' ),
             value: 'text',
         },
         {
-            label: __( 'Textarea' ),
+            label: __( 'Textarea', 'oik' ),
             value: 'textarea',
         },
         {
-            label: __( 'Email' ),
+            label: __( 'Email', 'oik' ),
             value: 'email',
         },
+        {
+            label: __( 'Checkbox', 'oik' ),
+            value: 'checkbox',
+        },
 
     ];
 
@@ -71,6 +75,9 @@ registerBlockType(
             const onChangeRequired = (event) => {
                 props.setAttributes({required: event});
             };
+            const onChangeRequiredIndicator = (event) => {
+                props.setAttributes({requiredIndicator: event});
+            };
             return (
                 <Fragment>
                 <InspectorControls>
@@ -88,12 +95,18 @@ registerBlockType(
                         <PanelRow>
                             <ToggleControl label={__("Required?", "oik" )} checked={ !! attributes.required } onChange={onChangeRequired}/>
                         </PanelRow>
+                        <PanelRow>
+                            <TextControl label={__("Required indicator", "oik" )} value={attributes.requiredIndicator} onChange={onChangeRequiredIndicator}/>
+
+                        </PanelRow>
                     </PanelBody>
                 </InspectorControls>
 
                     <div { ...blockProps}>
                         <div className="label">
-                            <label for={ attributes.name }>{attributes.label}</label>
+                            <label for={ attributes.name }>{attributes.label}
+                                { attributes.required && <span className="required">{attributes.requiredIndicator}</span> }
+                            </label>
                         </div>
                         <div className="field">
                             <ContactFieldControl type={attributes.type} name={attributes.name} required={attributes.required} />