Run prettier on all files, added support for select and date

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aamodtgroup/frontity-gravity-forms",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Gravity Forms extension for Frontity theme.",
   "keywords": [
     "Frontity",

src/components/Form.js

@@ -13,38 +13,44 @@ import Message from "./Message";
  *
  * @return {*}
  */
-const Form = ( { state, actions, id, children, className, method } ) => {
-
-	actions.gf.initForm( id );
-
-	/**
-	 * Form onSubmit event handler.
-	 *
-	 * @param {Object} event Event.
-	 */
-	const handleOnSubmit = ( event ) => {
-
-		event.preventDefault();
-
-		// Set the loading to true first to show processing while the request is ongoing.
-		state.gf.forms[ id ].loading = true;
-
-		// Call the action sendform that will get the form data from state using the form id.
-		actions.gf.sendForm( id );
-
-	};
-
-	return (
-		<FormIdContext.Provider value={ id }>
-			<FormElement method={ method } onSubmit={ handleOnSubmit } className={ className } id={ id }>
-				{ children }
-			</FormElement>
-			{ state.gf.forms[ id ].loading ? <Processing>Processing...</Processing> : <Message /> }
-		</FormIdContext.Provider>
-	)
+const Form = ({ state, actions, id, children, className, method }) => {
+    actions.gf.initForm(id);
+
+    /**
+     * Form onSubmit event handler.
+     *
+     * @param {Object} event Event.
+     */
+    const handleOnSubmit = (event) => {
+        event.preventDefault();
+
+        // Set the loading to true first to show processing while the request is ongoing.
+        state.gf.forms[id].loading = true;
+
+        // Call the action sendform that will get the form data from state using the form id.
+        actions.gf.sendForm(id);
+    };
+
+    return (
+        <FormIdContext.Provider value={id}>
+            <FormElement
+                method={method}
+                onSubmit={handleOnSubmit}
+                className={className}
+                id={id}
+            >
+                {children}
+            </FormElement>
+            {state.gf.forms[id].loading ? (
+                <Processing>Processing...</Processing>
+            ) : (
+                <Message />
+            )}
+        </FormIdContext.Provider>
+    );
 };
 
 const FormElement = styled.form``;
 const Processing = styled.div``;
 
-export default connect( Form );
+export default connect(Form);

src/components/HiddenInput.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from "react";
 import FormIdContext from "../context/FormIdContext";
 import { connect } from "frontity";
 
@@ -11,16 +11,14 @@ import { connect } from "frontity";
  *
  * @return {*}
  */
-const HiddenInputs = ( { state, actions, inputProps } ) => {
+const HiddenInputs = ({ state, actions, inputProps }) => {
+    const id = useContext(FormIdContext);
+    const inputName = inputProps.name;
+    const inputValue = inputProps.value;
 
-	const id         = React.useContext( FormIdContext );
-	const inputName  = inputProps.name;
-	const inputValue = inputProps.value;
-
-	actions.gf.addHiddenInputs( { id, inputName, value: inputValue } );
-
-	return null;
+    actions.gf.addHiddenInputs({ id, inputName, value: inputValue });
 
+    return null;
 };
 
-export default connect( HiddenInputs );
+export default connect(HiddenInputs);

src/components/Input.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext } from "react";
 import FormIdContext from "../context/FormIdContext";
 import { connect } from "frontity";
 
@@ -10,44 +10,45 @@ import { connect } from "frontity";
  * @param {Object} inputProps Input props.
  * @return {*}
  */
-const Input = ( { state, actions, inputProps } ) => {
-
-	// Context is used so that we can pass the form id to different components.
-	const id          = useContext( FormIdContext );
-	const inputName   = inputProps.name;
-	const placeholder = inputProps.placeholder;
-
-	if ( 'undefined' === typeof ( state.gf.forms[ id ].inputVals[ inputName ] ) ) {
-		actions.gf.changeInputValue( { id, inputName, value: inputProps.value } );
-	}
-
-	/**
-	 * OnChange handler for input.
-	 *
-	 * @param {Object} event Event.
-	 *
-	 * @return {void}
-	 */
-	const onChange = ( event ) => {
-
-		actions.gf.changeInputValue( { id, inputName, value: event.target.value } );
-
-	};
-
-	return (
-		<input
-			name={ inputProps.name }
-			className={ inputProps.className }
-			id={ inputProps.id }
-			aria-invalid={ inputProps.ariaInvalid }
-			aria-required={ inputProps.ariaRequired }
-			size={ inputProps.size }
-			type={ inputProps.type }
-			value={ state.gf.forms[ id ].inputVals[ inputName ] }
-			onChange={ onChange }
-			placeholder={ placeholder }
-		/>
-	);
+const Input = ({ state, actions, inputProps }) => {
+    // Context is used so that we can pass the form id to different components.
+    const id = useContext(FormIdContext);
+    const inputName = inputProps.name;
+    const placeholder = inputProps.placeholder;
+
+    if ("undefined" === typeof state.gf.forms[id].inputVals[inputName]) {
+        actions.gf.changeInputValue({ id, inputName, value: inputProps.value });
+    }
+
+    /**
+     * OnChange handler for input.
+     *
+     * @param {Object} event Event.
+     *
+     * @return {void}
+     */
+    const onChange = (event) => {
+        actions.gf.changeInputValue({
+            id,
+            inputName,
+            value: event.target.value,
+        });
+    };
+
+    return (
+        <input
+            name={inputProps.name}
+            className={inputProps.className}
+            id={inputProps.id}
+            aria-invalid={inputProps.ariaInvalid}
+            aria-required={inputProps.ariaRequired}
+            size={inputProps.size}
+            type={inputProps.type}
+            value={state.gf.forms[id].inputVals[inputName]}
+            onChange={onChange}
+            placeholder={placeholder}
+        />
+    );
 };
 
-export default connect( Input );
+export default connect(Input);

src/components/Message.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { connect, styled } from "frontity";
 import FormIdContext from "./../context/FormIdContext";
 
@@ -12,33 +12,36 @@ import FormIdContext from "./../context/FormIdContext";
  * @return {*|string}
  *
  */
-const Message = ( { state, libraries } ) => {
-
-	const id           = React.useContext( FormIdContext );
-	const responseInfo = state.gf.forms[ id ];
-
-	// Get the html2react component for the message.
-	const Html2React = libraries.html2react.Component;
-
-	/**
-	 * Get the error or success message
-	 *
-	 * @return {string|*}
-	 */
-	const getMessage = () => {
-
-		if ( 'sent' === responseInfo.status && typeof responseInfo.message === 'string' ) {
-			return <SuccessMessage><Html2React html={responseInfo.message} /></SuccessMessage>
-		} else if ( 'failed' === responseInfo.status ) {
-			return <ErrorMessage>{responseInfo.message}</ErrorMessage>
-		} else {
-			return '';
-		}
-
-	};
-
-	return getMessage();
-
+const Message = ({ state, libraries }) => {
+    const id = React.useContext(FormIdContext);
+    const responseInfo = state.gf.forms[id];
+
+    // Get the html2react component for the message.
+    const Html2React = libraries.html2react.Component;
+
+    /**
+     * Get the error or success message
+     *
+     * @return {string|*}
+     */
+    const getMessage = () => {
+        if (
+            "sent" === responseInfo.status &&
+            typeof responseInfo.message === "string"
+        ) {
+            return (
+                <SuccessMessage>
+                    <Html2React html={responseInfo.message} />
+                </SuccessMessage>
+            );
+        } else if ("failed" === responseInfo.status) {
+            return <ErrorMessage>{responseInfo.message}</ErrorMessage>;
+        } else {
+            return "";
+        }
+    };
+
+    return getMessage();
 };
 
 const SuccessMessage = styled.div`
@@ -51,4 +54,4 @@ const ErrorMessage = styled.div`
     padding: 0.75rem 1.25rem;
 `;
 
-export default connect( Message );
+export default connect(Message);

src/components/Select.js

@@ -0,0 +1,61 @@
+import React, { useContext } from "react";
+import FormIdContext from "../context/FormIdContext";
+import { connect } from "frontity";
+
+/**
+ * Select Dropdown.
+ *
+ * @param {Object} state Frontity state.
+ * @param {Object} actions Actions.
+ * @param {Object} inputProps Input props.
+ *
+ * @return {*}
+ */
+const Select = ({ state, actions, inputProps }) => {
+    // Context is used so that we can pass the form id to different components.
+    const id = useContext(FormIdContext);
+    const inputName = inputProps.name;
+
+    if ("undefined" === typeof state.gf.forms[id].inputVals[inputName]) {
+        actions.gf.changeInputValue({
+            id,
+            inputName,
+            value: inputProps.value,
+        });
+    }
+
+    /**
+     * OnChange handler for input.
+     *
+     * @param {Object} event Event.
+     *
+     * @return {void}
+     */
+    const onChange = (event) => {
+        actions.gf.changeInputValue({
+            id,
+            inputName,
+            value: event.target.value,
+        });
+    };
+
+    return (
+        <select
+            name={inputProps.name}
+            className={inputProps.className}
+            id={inputProps.id}
+            aria-invalid={inputProps.ariaInvalid}
+            aria-required={inputProps.ariaRequired}
+            onChange={onChange}
+            value={state.gf.forms[id].inputVals[inputName]}
+        >
+            {inputProps.options.map((item, index) => (
+                <option key={index} value={item.value}>
+                    {item.label}
+                </option>
+            ))}
+        </select>
+    );
+};
+
+export default connect(Select);