Merge pull request #95 from WebDevStudios/feature/45-gravity-form-select-field

Feature/45 gravity form select field

Author: Greg Rickaby

components/atoms/Inputs/Checkbox/Checkbox.js

@@ -1,6 +1,16 @@
 import PropTypes from 'prop-types'
 import {Field} from 'formik'
 
+/**
+ * Render Checkbox component.
+ *
+ * @param {object}        props           Input props.
+ * @param {string}        props.className Input className.
+ * @param {string|number} props.id        Input id.
+ * @param {string}        props.label     Input label.
+ * @param {string}        props.name      Input name.
+ * @return {Element}                      The Checkbox component.
+ */
 export default function Checkbox({className, id, label, name}) {
   return (
     <div className={className}>

components/atoms/Inputs/CheckboxGroup/CheckboxGroup.js

@@ -2,6 +2,17 @@ import PropTypes from 'prop-types'
 import {ErrorMessage} from 'formik'
 import Checkbox from '@/components/atoms/Inputs/Checkbox'
 
+/**
+ * Render CheckboxGroup component.
+ *
+ * @param {object}        props             CheckboxGroup props.
+ * @param {Array}         props.checkboxes  Array of checkbox data objects.
+ * @param {string}        props.className   CheckboxGroup wrapper className.
+ * @param {string|number} props.id          CheckboxGroup id.
+ * @param {string}        props.label       CheckboxGroup input label.
+ * @param {string}        props.description CheckboxGroup input name.
+ * @return {Element}                        The CheckboxGroup component.
+ */
 export default function CheckboxGroup({
   checkboxes,
   className,

components/atoms/Inputs/Select/Select.js

@@ -0,0 +1,59 @@
+import {Field, ErrorMessage} from 'formik'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import styles from './Select.module.css'
+
+/**
+ * Render the Select component.
+ *
+ * @author WebDevStudios
+ * @param {object}  props             props.
+ * @param {string}  props.className   Select wrapper className.
+ * @param {string}  props.description Select description.
+ * @param {string}  props.label       Select input label.
+ * @param {string}  props.id          Select input id.
+ * @param {boolean} props.isRequired  If input is required.
+ * @param {Array}   props.options     Array of input options objects.
+ * @return {Element}                  The Select component.
+ */
+export default function Select({
+  className,
+  description,
+  id,
+  isRequired,
+  label,
+  options
+}) {
+  return (
+    <div className={cn(styles.select, className)}>
+      {label && <label>{label}</label>}
+      <Field as="select" id={id} name={id} required={isRequired}>
+        {!!options?.length > 0 &&
+          options.map((option, key) => {
+            const {text, value} = option
+
+            return (
+              <option key={key} value={value}>
+                {text}
+              </option>
+            )
+          })}
+        {description && <p>{description}</p>}
+      </Field>
+      <ErrorMessage name={id} />
+    </div>
+  )
+}
+
+Select.propTypes = {
+  className: PropTypes.string,
+  description: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.object)
+}
+
+Select.defaultProps = {
+  isRequired: false
+}

components/atoms/Inputs/Select/Select.module.css

@@ -0,0 +1,5 @@
+.select {
+  & select {
+    @apply block border;
+  }
+}

components/atoms/Inputs/Select/index.js

@@ -0,0 +1 @@
+export {default} from './Select'

components/atoms/Inputs/index.js

@@ -1,3 +1,4 @@
 export {default as Checkbox} from './Checkbox'
 export {default as CheckboxGroup} from './CheckboxGroup'
+export {default as Select} from './Select'
 export {default as Text} from './Text'

components/molecules/GravityForm/Fields/Checkbox.js

@@ -3,6 +3,19 @@ import {getGfFieldId, getGfHiddenClassName} from '@/functions/gravityForms'
 import cn from 'classnames'
 import * as Input from '@/components/atoms/Inputs'
 
+/**
+ * Render GravityForms Checkbox field component.
+ *
+ * @param {object}        props             GravityForm Checkbox field props.
+ * @param {string}        props.className   GravityForm field wrapper class.
+ * @param {string}        props.description GravityForm field description.
+ * @param {Array}         props.inputs      Array of checkbox field input data.
+ * @param {string|number} props.id          GravityForm field id.
+ * @param {string}        props.label       GravityForm field label.
+ * @param {string}        props.size        GravityForm field size.
+ * @param {boolean}       props.visibility  GravityForm field visibility.
+ * @return {Element}                        The Checkbox component.
+ */
 export default function Checkbox({
   className,
   description,

components/molecules/GravityForm/Fields/Fields.js

@@ -51,6 +51,10 @@ export default function Fields({fields, setFormValidation}) {
               fieldToRender = <GfFields.Text {...field.node} key={id} />
               break
 
+            case 'select':
+              fieldToRender = <GfFields.Select {...field.node} key={id} />
+              break
+
             case 'text':
               fieldToRender = <GfFields.Text {...field.node} key={id} />
               break

components/molecules/GravityForm/Fields/Select.js

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types'
+import {getGfFieldId, getGfHiddenClassName} from '@/functions/gravityForms'
+import * as Input from '@/components/atoms/Inputs'
+import cn from 'classnames'
+
+/**
+ * Render GravityForms Checkbox field component.
+ *
+ * @param {object}        props               GravityForm Checkbox field props.
+ * @param {string}        props.className     GravityForm field wrapper class.
+ * @param {string}        props.description   GravityForm field description.
+ * @param {string|number} props.id            GravityForm field id.
+ * @param {boolean}       props.isRequired    GravityForm field is required.
+ * @param {string}        props.label         GravityForm field label.
+ * @param {string}        props.size          GravityForm field size.
+ * @param {Array}         props.selectChoices GravityForm field selection options.
+ * @param {boolean}       props.visibility    GravityForm field visibility.
+ * @return {Element}                          The Checkbox component.
+ */
+export default function Select({
+  className,
+  description,
+  id,
+  isRequired,
+  label,
+  size,
+  selectChoices,
+  visibility
+}) {
+  const fieldId = getGfFieldId(id)
+  const isHiddenClass = getGfHiddenClassName(visibility)
+
+  return (
+    <div
+      className={cn(className, isHiddenClass) || null}
+      field-size={size && `size-${size}`}
+    >
+      <Input.Select
+        id={fieldId}
+        isRequired={isRequired}
+        description={description}
+        label={label}
+        options={selectChoices}
+      />
+    </div>
+  )
+}
+
+Select.propTypes = {
+  className: PropTypes.string,
+  description: PropTypes.string,
+  id: PropTypes.number.isRequired,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  selectChoices: PropTypes.arrayOf(PropTypes.object),
+  size: PropTypes.string,
+  visibility: PropTypes.string
+}

components/molecules/GravityForm/Fields/index.js

@@ -1,3 +1,4 @@
 export {default} from './Fields'
 export {default as Checkbox} from './Checkbox'
+export {default as Select} from './Select'
 export {default as Text} from './Text'