Add checkboxes

README.md

@@ -58,8 +58,10 @@ or your own icons by specifying as so:
       SortDesc: <i className="caret-down" />,
       Unsorted: <i className="sort" />,
       Loading: <i className="circle-notch spin" />,
+      CheckboxChecked: <i className="check-square" />,
+      CheckboxUnchecked: <i className="square" />,
     }}
   />
 ```
 
-Unspecified icons will not show.
+Unspecified icons will not show (excl. RemoveFavourite, SortAsc, SortDesc, CheckboxChecked, CheckboxUnchecked).

src/ObjectList.js

@@ -94,6 +94,8 @@ class ObjectList extends Component {
       SortDesc: PropTypes.element,
       Unsorted: PropTypes.element,
       Loading: PropTypes.element,
+      CheckboxChecked: PropTypes.element,
+      CheckboxUnchecked: PropTypes.element,
     }),
   }
 

src/actions-filters/ActionsFiltersContainer.js

@@ -202,6 +202,8 @@ class ActionsFilterContainer extends Component {
               OpenIcon={icons.DropdownOpen}
               CloseIcon={icons.DropdownClose}
               OptionalFieldsIcon={icons.OptionalFields}
+              CheckboxCheckedIcon={icons.CheckboxChecked}
+              CheckboxUnCheckedIcon={icons.CheckboxUnchecked}
             />
           </div>
         </div>

src/actions-filters/OptionalField.js

@@ -14,10 +14,16 @@ export default class OptionalField extends React.Component {
     enabled: PropTypes.bool,
     /** the display text for the field */
     name: PropTypes.string,
+    /** Icon to display when a field is enabled */
+    CheckboxCheckedIcon: PropTypes.element,
+    /** Icon to display when a field is not enabled */
+    CheckboxUnCheckedIcon: PropTypes.element,
   }
 
   static defaultProps = {
     enabled: false,
+    CheckboxCheckedIcon: <React.Fragment>&#x2611;</React.Fragment>,
+    CheckboxUnCheckedIcon: <React.Fragment>&#x2610;</React.Fragment>,
   }
 
   /**
@@ -31,15 +37,11 @@ export default class OptionalField extends React.Component {
   }
 
   render() {
-    let checked
-    if (this.props.enabled) {
-      checked = (<i className="fa fa-check-square-o objectlist-dropdown__icon" aria-hidden="true" />)
-    } else {
-      checked = (<i className="fa fa-square-o objectlist-dropdown__icon" aria-hidden="true" />)
-    }
+    const {enabled, CheckboxCheckedIcon, CheckboxUnCheckedIcon, name} = this.props
+    const checked = enabled ? CheckboxCheckedIcon : CheckboxUnCheckedIcon
     return (
       <button className="objectlist-dropdown__item" onClick={this.toggle}>
-        {checked}{this.props.name}
+        {checked}{name}
       </button>
     )
   }

src/actions-filters/OptionalFields.js

@@ -17,6 +17,10 @@ class OptionalFields extends Component {
     OpenIcon: PropTypes.element,
     /** Icon to click to close optional fields dropdown */
     CloseIcon: PropTypes.element,
+    /** Icon to display when a field is enabled */
+    CheckboxCheckedIcon: PropTypes.element,
+    /** Icon to display when a field is not enabled */
+    CheckboxUnCheckedIcon: PropTypes.element,
   }
 
   static defaultProps = {
@@ -75,7 +79,7 @@ class OptionalFields extends Component {
   }
 
   _renderOptionalFieldsArray = (optionalFields, prepend) => {
-    const {extraColumns, updateColumns} = this.props
+    const {extraColumns, updateColumns, CheckboxCheckedIcon, CheckboxUnCheckedIcon} = this.props
     const fields = Array.isArray(optionalFields) ? optionalFields : [optionalFields]
     return fields.map(field => {
       const spacer = prepend.length > 0 ? ' ' : ''
@@ -86,6 +90,8 @@ class OptionalFields extends Component {
         fieldKey={field.fieldKey}
         name={`${prepend}${spacer}${(field.displayName || field.header)}`}
         className="objectlist-dropdown__item"
+        CheckboxCheckedIcon={CheckboxCheckedIcon}
+        CheckboxUnCheckedIcon={CheckboxUnCheckedIcon}
       />
     })
   }

src/icons/FontAwesome.js

@@ -31,30 +31,34 @@ const FontAwesomeIcons = (majorVersion = 4) => {
     case 4:
       IsFontAwesomeLoaded(4)
       return {
-        OptionalFields: <i className="fa fa-list" />,
-        Favourites: <i className="fa fa-heart-o" />,
-        RemoveFavourite: <i className="fa fa-minus-circle" />,
-        RemoveFilter: <i className="fa fa-trash-o" />,
-        DropdownOpen: <i className="fa fa-caret-down" />,
-        DropdownClose: <i className="fa fa-caret-up" />,
-        SortAsc: <i className="fa fa-caret-up" />,
-        SortDesc: <i className="fa fa-caret-down" />,
-        Unsorted: <i className="fa fa-sort" />,
-        Loading: <i className="fa fa-circle-o-notch fa-spin" />,
+        OptionalFields: <i className="fa fa-list" aria-hidden="true" />,
+        Favourites: <i className="fa fa-heart-o" aria-hidden="true" />,
+        RemoveFavourite: <i className="fa fa-minus-circle" aria-hidden="true" />,
+        RemoveFilter: <i className="fa fa-trash-o" aria-hidden="true" />,
+        DropdownOpen: <i className="fa fa-caret-down" aria-hidden="true" />,
+        DropdownClose: <i className="fa fa-caret-up" aria-hidden="true" />,
+        SortAsc: <i className="fa fa-caret-up" aria-hidden="true" />,
+        SortDesc: <i className="fa fa-caret-down" aria-hidden="true" />,
+        Unsorted: <i className="fa fa-sort" aria-hidden="true" />,
+        Loading: <i className="fa fa-circle-o-notch fa-spin" aria-hidden="true" />,
+        CheckboxChecked: <i className="fa fa-check-square-o" aria-hidden="true" />,
+        CheckboxUnchecked: <i className="fa fa-square-o" aria-hidden="true" />,
       }
     case 5:
       IsFontAwesomeLoaded(5)
       return {
-        OptionalFields: <i className="fas fa-list" />,
-        Favourites: <i className="far fa-heart" />,
-        RemoveFavourite: <i className="far fa-minus-circle" />,
-        RemoveFilter: <i className="far fa-trash-o" />,
-        DropdownOpen: <i className="fas fa-caret-down" />,
-        DropdownClose: <i className="fas fa-caret-up" />,
-        SortAsc: <i className="fas fa-caret-up" />,
-        SortDesc: <i className="fas fa-caret-down" />,
-        Unsorted: <i className="fas fa-sort" />,
-        Loading: <i className="fas fa-circle-notch fa-spin" />,
+        OptionalFields: <i className="fas fa-list" aria-hidden="true" />,
+        Favourites: <i className="far fa-heart" aria-hidden="true" />,
+        RemoveFavourite: <i className="far fa-minus-circle" aria-hidden="true" />,
+        RemoveFilter: <i className="far fa-trash-o" aria-hidden="true" />,
+        DropdownOpen: <i className="fas fa-caret-down" aria-hidden="true" />,
+        DropdownClose: <i className="fas fa-caret-up" aria-hidden="true" />,
+        SortAsc: <i className="fas fa-caret-up" aria-hidden="true" />,
+        SortDesc: <i className="fas fa-caret-down" aria-hidden="true" />,
+        Unsorted: <i className="fas fa-sort" aria-hidden="true" />,
+        Loading: <i className="fas fa-circle-notch fa-spin" aria-hidden="true" />,
+        CheckboxChecked: <i className="far fa-check-square" aria-hidden="true" />,
+        CheckboxUnchecked: <i className="far fa-square" aria-hidden="true" />,
       }
     default:
       console.warn(