cmspageblocks 1.0.43 → 1.0.45

package/build/index.js

@@ -7734,7 +7734,8 @@ var Form = function Form(_ref) {
           }, errors[field.name]));
         }
       }), /*#__PURE__*/React__default["default"].createElement("button", {
-        type: "submit"
+        type: "submit",
+        disabled: isSubmitting
       }, "Verzenden")));
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmspageblocks",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "",
   "main": "build/index.js",
   "repository": {

package/src/Main.css.js

@@ -11,6 +11,11 @@ flex-wrap: wrap;
 .justify-evenly {
   justify-content: space-evenly;
 }
+
+.align-center {
+  align-items: center;
+}
+
 ul {
   list-style: initial;
   list-style-position: outside;

package/src/components/BlockTypes/Form.js

@@ -1,30 +1,30 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik';
 import styled from 'styled-components';
 
 const Form = ({ options }) => {
-  const form = options.content
+  const form = options.content;
   return (
     <Formik
-    initialValues={{}}
+      initialValues={{}}
       onSubmit={(values, actions) => {
         setTimeout(() => {
           fetch(`https://cms.burobork.nl/recieve/form/${form.id}`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(
-              { form: {
+            body: JSON.stringify({
+              form: {
                 locale: 'nl',
                 content: values,
-              }},
-            )
+              },
+            }),
           }).then((resp) => {
             if (resp.ok === true) {
               alert('Form has been sent!');
-              actions.resetForm({ values: {}})
+              actions.resetForm({ values: {} });              
             } else {
-              alert('Please try again later.');
+              alert('Please try again later.');              
             }
           });
           actions.setSubmitting(false);
@@ -32,8 +32,10 @@ const Form = ({ options }) => {
       }}
       render={({ values, errors, handleBlur, handleChange, handleSubmit }) => (
         <FormContainer>
-          <form onSubmit={handleSubmit}>
-            {form.options.fields.map(field => {
+          <form
+            onSubmit={handleSubmit}
+          >
+            {form.options.fields.map((field) => {
               if (field.type === 'select') {
                 return (
                   <div key={field.model}>
@@ -45,7 +47,7 @@ const Form = ({ options }) => {
                       value={values[field.model]}
                       name={field.model}
                     >
-                      {field.values.map(opt => (
+                      {field.values.map((opt) => (
                         <option key={opt.option_value} value={opt.option_value}>
                           {opt.label}
                         </option>
@@ -54,14 +56,19 @@ const Form = ({ options }) => {
                   </div>
                 );
               } else if (field.type === 'textarea') {
-                return <div key={field.model}>
-                    <label htmlFor={field.model}>
-                      {field.label}
-                    </label>
-                    <textarea id={field.model} onChange={handleChange} onBlur={handleBlur} value={values[field.model]} name={field.model} rows="5">
-
-                    </textarea>
-                  </div>;
+                return (
+                  <div key={field.model}>
+                    <label htmlFor={field.model}>{field.label}</label>
+                    <textarea
+                      id={field.model}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                      value={values[field.model]}
+                      name={field.model}
+                      rows="5"
+                    ></textarea>
+                  </div>
+                );
               } else {
                 return (
                   <div key={field.model}>
@@ -84,7 +91,9 @@ const Form = ({ options }) => {
                 );
               }
             })}
-            <button type="submit">Verzenden</button>
+            <button type="submit" disabled={isSubmitting}>
+              Verzenden
+            </button>
           </form>
         </FormContainer>
       )}
@@ -136,6 +145,6 @@ const FormContainer = styled.div`
     font-size: 1.4rem;
     line-height: 1.4;
     font-weight: bold;
-    background: ${props => props.theme.primaryColor};
+    background: ${(props) => props.theme.primaryColor};
   }
 `;