Skip to content
This repository was archived by the owner on Jun 20, 2024. It is now read-only.

Commit ad75634

Browse files
kasperaamodtkasperaamodt
committed
Run prettier on all files, added support for select and date
1 parent 9f957a9 commit ad75634

File tree

19 files changed

+694
-413
lines changed

19 files changed

+694
-413
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@aamodtgroup/frontity-gravity-forms",
3-
"version": "0.1.4",
3+
"version": "0.1.5",
44
"description": "Gravity Forms extension for Frontity theme.",
55
"keywords": [
66
"Frontity",

‎src/components/Form.js‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -13,38 +13,44 @@ import Message from "./Message";
1313
*
1414
* @return {*}
1515
*/
16-
const Form = ( { state, actions, id, children, className, method } ) => {
17-
18-
actions.gf.initForm( id );
19-
20-
/**
21-
* Form onSubmit event handler.
22-
*
23-
* @param {Object} event Event.
24-
*/
25-
const handleOnSubmit = ( event ) => {
26-
27-
event.preventDefault();
28-
29-
// Set the loading to true first to show processing while the request is ongoing.
30-
state.gf.forms[ id ].loading = true;
31-
32-
// Call the action sendform that will get the form data from state using the form id.
33-
actions.gf.sendForm( id );
34-
35-
};
36-
37-
return (
38-
<FormIdContext.Provider value={ id }>
39-
<FormElement method={ method } onSubmit={ handleOnSubmit } className={ className } id={ id }>
40-
{ children }
41-
</FormElement>
42-
{ state.gf.forms[ id ].loading ? <Processing>Processing...</Processing> : <Message /> }
43-
</FormIdContext.Provider>
44-
)
16+
const Form = ({ state, actions, id, children, className, method }) => {
17+
actions.gf.initForm(id);
18+
19+
/**
20+
* Form onSubmit event handler.
21+
*
22+
* @param {Object} event Event.
23+
*/
24+
const handleOnSubmit = (event) => {
25+
event.preventDefault();
26+
27+
// Set the loading to true first to show processing while the request is ongoing.
28+
state.gf.forms[id].loading = true;
29+
30+
// Call the action sendform that will get the form data from state using the form id.
31+
actions.gf.sendForm(id);
32+
};
33+
34+
return (
35+
<FormIdContext.Provider value={id}>
36+
<FormElement
37+
method={method}
38+
onSubmit={handleOnSubmit}
39+
className={className}
40+
id={id}
41+
>
42+
{children}
43+
</FormElement>
44+
{state.gf.forms[id].loading ? (
45+
<Processing>Processing...</Processing>
46+
) : (
47+
<Message />
48+
)}
49+
</FormIdContext.Provider>
50+
);
4551
};
4652

4753
const FormElement = styled.form``;
4854
const Processing = styled.div``;
4955

50-
export default connect( Form );
56+
export default connect(Form);

‎src/components/HiddenInput.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useContext } from "react";
22
import FormIdContext from "../context/FormIdContext";
33
import { connect } from "frontity";
44

@@ -11,16 +11,14 @@ import { connect } from "frontity";
1111
*
1212
* @return {*}
1313
*/
14-
const HiddenInputs = ( { state, actions, inputProps } ) => {
14+
const HiddenInputs = ({ state, actions, inputProps }) => {
15+
const id = useContext(FormIdContext);
16+
const inputName = inputProps.name;
17+
const inputValue = inputProps.value;
1518

16-
const id = React.useContext( FormIdContext );
17-
const inputName = inputProps.name;
18-
const inputValue = inputProps.value;
19-
20-
actions.gf.addHiddenInputs( { id, inputName, value: inputValue } );
21-
22-
return null;
19+
actions.gf.addHiddenInputs({ id, inputName, value: inputValue });
2320

21+
return null;
2422
};
2523

26-
export default connect( HiddenInputs );
24+
export default connect(HiddenInputs);

‎src/components/Input.js‎

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext } from 'react';
1+
import React, { useContext } from "react";
22
import FormIdContext from "../context/FormIdContext";
33
import { connect } from "frontity";
44

@@ -10,44 +10,45 @@ import { connect } from "frontity";
1010
* @param {Object} inputProps Input props.
1111
* @return {*}
1212
*/
13-
const Input = ( { state, actions, inputProps } ) => {
14-
15-
// Context is used so that we can pass the form id to different components.
16-
const id = useContext( FormIdContext );
17-
const inputName = inputProps.name;
18-
const placeholder = inputProps.placeholder;
19-
20-
if ( 'undefined' === typeof ( state.gf.forms[ id ].inputVals[ inputName ] ) ) {
21-
actions.gf.changeInputValue( { id, inputName, value: inputProps.value } );
22-
}
23-
24-
/**
25-
* OnChange handler for input.
26-
*
27-
* @param {Object} event Event.
28-
*
29-
* @return {void}
30-
*/
31-
const onChange = ( event ) => {
32-
33-
actions.gf.changeInputValue( { id, inputName, value: event.target.value } );
34-
35-
};
36-
37-
return (
38-
<input
39-
name={ inputProps.name }
40-
className={ inputProps.className }
41-
id={ inputProps.id }
42-
aria-invalid={ inputProps.ariaInvalid }
43-
aria-required={ inputProps.ariaRequired }
44-
size={ inputProps.size }
45-
type={ inputProps.type }
46-
value={ state.gf.forms[ id ].inputVals[ inputName ] }
47-
onChange={ onChange }
48-
placeholder={ placeholder }
49-
/>
50-
);
13+
const Input = ({ state, actions, inputProps }) => {
14+
// Context is used so that we can pass the form id to different components.
15+
const id = useContext(FormIdContext);
16+
const inputName = inputProps.name;
17+
const placeholder = inputProps.placeholder;
18+
19+
if ("undefined" === typeof state.gf.forms[id].inputVals[inputName]) {
20+
actions.gf.changeInputValue({ id, inputName, value: inputProps.value });
21+
}
22+
23+
/**
24+
* OnChange handler for input.
25+
*
26+
* @param {Object} event Event.
27+
*
28+
* @return {void}
29+
*/
30+
const onChange = (event) => {
31+
actions.gf.changeInputValue({
32+
id,
33+
inputName,
34+
value: event.target.value,
35+
});
36+
};
37+
38+
return (
39+
<input
40+
name={inputProps.name}
41+
className={inputProps.className}
42+
id={inputProps.id}
43+
aria-invalid={inputProps.ariaInvalid}
44+
aria-required={inputProps.ariaRequired}
45+
size={inputProps.size}
46+
type={inputProps.type}
47+
value={state.gf.forms[id].inputVals[inputName]}
48+
onChange={onChange}
49+
placeholder={placeholder}
50+
/>
51+
);
5152
};
5253

53-
export default connect( Input );
54+
export default connect(Input);

‎src/components/Message.js‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React from "react";
22
import { connect, styled } from "frontity";
33
import FormIdContext from "./../context/FormIdContext";
44

@@ -12,33 +12,36 @@ import FormIdContext from "./../context/FormIdContext";
1212
* @return {*|string}
1313
*
1414
*/
15-
const Message = ( { state, libraries } ) => {
16-
17-
const id = React.useContext( FormIdContext );
18-
const responseInfo = state.gf.forms[ id ];
19-
20-
// Get the html2react component for the message.
21-
const Html2React = libraries.html2react.Component;
22-
23-
/**
24-
* Get the error or success message
25-
*
26-
* @return {string|*}
27-
*/
28-
const getMessage = () => {
29-
30-
if ( 'sent' === responseInfo.status && typeof responseInfo.message === 'string' ) {
31-
return <SuccessMessage><Html2React html={responseInfo.message} /></SuccessMessage>
32-
} else if ( 'failed' === responseInfo.status ) {
33-
return <ErrorMessage>{responseInfo.message}</ErrorMessage>
34-
} else {
35-
return '';
36-
}
37-
38-
};
39-
40-
return getMessage();
41-
15+
const Message = ({ state, libraries }) => {
16+
const id = React.useContext(FormIdContext);
17+
const responseInfo = state.gf.forms[id];
18+
19+
// Get the html2react component for the message.
20+
const Html2React = libraries.html2react.Component;
21+
22+
/**
23+
* Get the error or success message
24+
*
25+
* @return {string|*}
26+
*/
27+
const getMessage = () => {
28+
if (
29+
"sent" === responseInfo.status &&
30+
typeof responseInfo.message === "string"
31+
) {
32+
return (
33+
<SuccessMessage>
34+
<Html2React html={responseInfo.message} />
35+
</SuccessMessage>
36+
);
37+
} else if ("failed" === responseInfo.status) {
38+
return <ErrorMessage>{responseInfo.message}</ErrorMessage>;
39+
} else {
40+
return "";
41+
}
42+
};
43+
44+
return getMessage();
4245
};
4346

4447
const SuccessMessage = styled.div`
@@ -51,4 +54,4 @@ const ErrorMessage = styled.div`
5154
padding: 0.75rem 1.25rem;
5255
`;
5356

54-
export default connect( Message );
57+
export default connect(Message);

‎src/components/Select.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useContext } from "react";
2+
import FormIdContext from "../context/FormIdContext";
3+
import { connect } from "frontity";
4+
5+
/**
6+
* Select Dropdown.
7+
*
8+
* @param {Object} state Frontity state.
9+
* @param {Object} actions Actions.
10+
* @param {Object} inputProps Input props.
11+
*
12+
* @return {*}
13+
*/
14+
const Select = ({ state, actions, inputProps }) => {
15+
// Context is used so that we can pass the form id to different components.
16+
const id = useContext(FormIdContext);
17+
const inputName = inputProps.name;
18+
19+
if ("undefined" === typeof state.gf.forms[id].inputVals[inputName]) {
20+
actions.gf.changeInputValue({
21+
id,
22+
inputName,
23+
value: inputProps.value,
24+
});
25+
}
26+
27+
/**
28+
* OnChange handler for input.
29+
*
30+
* @param {Object} event Event.
31+
*
32+
* @return {void}
33+
*/
34+
const onChange = (event) => {
35+
actions.gf.changeInputValue({
36+
id,
37+
inputName,
38+
value: event.target.value,
39+
});
40+
};
41+
42+
return (
43+
<select
44+
name={inputProps.name}
45+
className={inputProps.className}
46+
id={inputProps.id}
47+
aria-invalid={inputProps.ariaInvalid}
48+
aria-required={inputProps.ariaRequired}
49+
onChange={onChange}
50+
value={state.gf.forms[id].inputVals[inputName]}
51+
>
52+
{inputProps.options.map((item, index) => (
53+
<option key={index} value={item.value}>
54+
{item.label}
55+
</option>
56+
))}
57+
</select>
58+
);
59+
};
60+
61+
export default connect(Select);

0 commit comments

Comments
 (0)