Expose name prop on input components for use in forms

Author: tcbegley

package-lock.json

@@ -64,7 +64,7 @@
     "fast-isnumeric": "^1.1.3",
     "is-absolute-url": "^2.1.0",
     "prop-types": "^15.7.2",
-    "ramda": "^0.25.0",
+    "ramda": "^0.27.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.0",
     "reactstrap": "^8.5.1"

package.json

@@ -75,6 +75,17 @@ Form.propTypes = {
    */
   key: PropTypes.string,
 
+  /**
+   * The URI of a program that processes the information submitted via the form.
+   */
+  action: PropTypes.string,
+
+  /**
+   * Defines which HTTP method to use when submitting the form. Can be GET
+   * (default) or POST.
+   */
+  method: PropTypes.oneOf(["GET", "POST"]),
+
   /**
    * Use inline=True to apply the `form-inline` class, allowing you to display
    * a series of labels, form controls, and buttons on a single horizontal row.

src/components/form/Form.js

@@ -131,7 +131,12 @@ Checkbox.propTypes = {
   /**
    * Disabled the Checkbox
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: PropTypes.string
 };
 
 export default Checkbox;

src/components/input/Checkbox.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {append, contains, without} from 'ramda';
+import {append, includes, without} from 'ramda';
 import classNames from 'classnames';
 import CustomInput from '../../private/CustomInput';
 
@@ -18,7 +18,7 @@ import CustomInput from '../../private/CustomInput';
  * https://getbootstrap.com/docs/4.4/components/forms/#checkboxes-and-radios-1
  */
 const Checklist = props => {
-  const {className, id, options, style, key, loading_state} = props;
+  const {className, id, options, style, key, loading_state, name} = props;
 
   const listItem = option => {
     const {
@@ -36,7 +36,7 @@ const Checklist = props => {
       switch: switches
     } = props;
 
-    const checked = contains(option.value, value);
+    const checked = includes(option.value, value);
 
     const mergedLabelStyle = checked
       ? {...labelStyle, ...labelCheckedStyle}
@@ -48,6 +48,8 @@ const Checklist = props => {
       return (
         <CustomInput
           id={inputId}
+          name={name}
+          value={option.value}
           labelId={option.label_id}
           checked={checked}
           className={inputClassName}
@@ -62,7 +64,7 @@ const Checklist = props => {
           inline={inline}
           onChange={() => {
             let newValue;
-            if (contains(option.value, value)) {
+            if (includes(option.value, value)) {
               newValue = without([option.value], value);
             } else {
               newValue = append(option.value, value);
@@ -84,14 +86,16 @@ const Checklist = props => {
         >
           <input
             id={inputId}
+            name={name}
+            value={option.value}
             checked={checked}
             className={classNames('form-check-input', inputClassName)}
             disabled={Boolean(option.disabled)}
             style={inputStyle}
             type="checkbox"
             onChange={() => {
               let newValue;
-              if (contains(option.value, value)) {
+              if (includes(option.value, value)) {
                 newValue = without([option.value], value);
               } else {
                 newValue = append(option.value, value);
@@ -300,7 +304,12 @@ Checklist.propTypes = {
    * local: window.localStorage, data is kept after the browser quit.
    * session: window.sessionStorage, data is cleared once the browser quit.
    */
-  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: PropTypes.string
 };
 
 Checklist.defaultProps = {

src/components/input/Checklist.js

@@ -132,7 +132,12 @@ RadioButton.propTypes = {
   /**
    * Disable the RadioButton.
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: PropTypes.string
 };
 
 export default RadioButton;

src/components/input/RadioButton.js

@@ -11,7 +11,7 @@ import CustomInput from '../../private/CustomInput';
  * siblings of each other.
  */
 const RadioItems = props => {
-  const {id, className, style, options, key, loading_state} = props;
+  const {id, className, style, options, key, loading_state, name} = props;
 
   const listItem = option => {
     const {
@@ -41,6 +41,8 @@ const RadioItems = props => {
       return (
         <CustomInput
           id={inputId}
+          name={name}
+          value={option.value}
           labelId={option.label_id}
           checked={checked}
           className={inputClassName}
@@ -71,6 +73,8 @@ const RadioItems = props => {
         >
           <input
             id={inputId}
+            name={name}
+            value={option.value}
             checked={checked}
             className={classNames('form-check-input', inputClassName)}
             disabled={Boolean(option.disabled)}
@@ -280,7 +284,12 @@ RadioItems.propTypes = {
    * local: window.localStorage, data is kept after the browser quit.
    * session: window.sessionStorage, data is cleared once the browser quit.
    */
-  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: PropTypes.string
 };
 
 RadioItems.defaultProps = {

src/components/input/RadioItems.js

@@ -184,7 +184,12 @@ Select.propTypes = {
    * local: window.localStorage, data is kept after the browser quit.
    * session: window.sessionStorage, data is cleared once the browser quit.
    */
-  persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
+  persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+  /**
+   * The name of the control, which is submitted with the form data.
+   */
+  name: PropTypes.string
 };
 
 export default Select;