Add support for Font Awesome 5

jakezatecky · jakezatecky · commit a09b2b3b7d62 · 2019-01-27T10:08:50.000-05:00
Resolves #126.
diff --git a/README.md b/README.md
@@ -86,7 +86,16 @@ All node objects **must** have a unique `value`. This value is serialized into t
 
 #### Changing the Default Icons
 
-By default, **react-checkbox-tree** uses Font Awesome for the various icons that appear in the tree. To change the defaults, simply pass in the `icons` property and override the defaults. Note that you can override as many or as little icons as you like:
+By default, **react-checkbox-tree** uses Font Awesome 4 for the various icons that appear in the tree. To utilize Font Awesome 5 icons, simply pass in `iconsClass="fa5"`:
+
+``` jsx
+<CheckboxTree
+    ...
+    iconsClass="fa5"
+/>
+```
+
+To change the rendered icons entirely, simply pass in the `icons` property and override the defaults. Note that you can override as many or as little icons as you like:
 
 ``` jsx
 <CheckboxTree
@@ -140,6 +149,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 | `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled.                                                                 | `false`     |
 | `expandOnClick`      | bool     | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function.                        | `false`     |
 | `icons`              | object   | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**.      | `{ ... }`   |
+| `iconsClass`         | string   | A string that specifies which icons class to utilize. Currently, `'fa4'` and `'fa5'` are supported.                    | `'fa4'`     |
 | `id`                 | string   | A string to be used for the HTML ID of the rendered tree and its nodes.                                                | `null`      |
 | `expanded`           | array    | An array of expanded node values.                                                                                      | `[]`        |
 | `lang`               | object   | An object containing the language mappings for the various text elements.                                              | `{ ... }`   |
diff --git a/examples/src/index.html b/examples/src/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#3498db">
     <meta name="description" content="React Checkbox Tree: A simple, yet elegant checkbox treeview for React.">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto">
     <link rel="stylesheet" href="style.css">
   </head>
diff --git a/examples/src/js/BasicExample.js b/examples/src/js/BasicExample.js
@@ -116,6 +116,7 @@ class BasicExample extends React.Component {
             <CheckboxTree
                 checked={checked}
                 expanded={expanded}
+                iconsClass="fa5"
                 nodes={nodes}
                 onCheck={this.onCheck}
                 onExpand={this.onExpand}
diff --git a/examples/src/js/ClickableLabelsExample.js b/examples/src/js/ClickableLabelsExample.js
@@ -125,6 +125,7 @@ class ClickExample extends React.Component {
                 <CheckboxTree
                     checked={checked}
                     expanded={expanded}
+                    iconsClass="fa5"
                     nodes={nodes}
                     expandOnClick
                     onCheck={this.onCheck}
diff --git a/examples/src/js/CustomIconsExample.js b/examples/src/js/CustomIconsExample.js
@@ -9,17 +9,17 @@ const nodes = [
             {
                 value: 'Employee Evaluations.zip',
                 label: 'Employee Evaluations.zip',
-                icon: <i className="fa fa-file-archive-o" />,
+                icon: <i className="far fa-file-archive" />,
             },
             {
                 value: 'Expense Report.pdf',
                 label: 'Expense Report.pdf',
-                icon: <i className="fa fa-file-pdf-o" />,
+                icon: <i className="far fa-file-pdf" />,
             },
             {
                 value: 'notes.txt',
                 label: 'notes.txt',
-                icon: <i className="fa fa-file-text-o" />,
+                icon: <i className="far fa-file-alt" />,
             },
         ],
     },
@@ -71,6 +71,7 @@ class CustomIconsExamples extends React.Component {
             <CheckboxTree
                 checked={checked}
                 expanded={expanded}
+                iconsClass="fa5"
                 nodes={nodes}
                 onCheck={this.onCheck}
                 onExpand={this.onExpand}
diff --git a/examples/src/js/DisabledExample.js b/examples/src/js/DisabledExample.js
@@ -117,6 +117,7 @@ class DisabledExample extends React.Component {
                 checked={checked}
                 disabled
                 expanded={expanded}
+                iconsClass="fa5"
                 nodes={nodes}
                 onCheck={this.onCheck}
                 onExpand={this.onExpand}
diff --git a/examples/src/js/ExpandAllExample.js b/examples/src/js/ExpandAllExample.js
@@ -117,6 +117,7 @@ class ExpandAllExample extends React.Component {
                 <CheckboxTree
                     checked={checked}
                     expanded={expanded}
+                    iconsClass="fa5"
                     nodes={nodes}
                     showExpandAll
                     onCheck={this.onCheck}
diff --git a/examples/src/js/HiddenCheckboxesExample.js b/examples/src/js/HiddenCheckboxesExample.js
@@ -122,6 +122,7 @@ class HiddenCheckboxesExample extends React.Component {
             <CheckboxTree
                 checked={checked}
                 expanded={expanded}
+                iconsClass="fa5"
                 nodes={nodes}
                 onlyLeafCheckboxes
                 onCheck={this.onCheck}
diff --git a/examples/src/js/LargeDataExample.js b/examples/src/js/LargeDataExample.js
@@ -54,6 +54,7 @@ class LargeDataExample extends React.Component {
             <CheckboxTree
                 checked={checked}
                 expanded={expanded}
+                iconsClass="fa5"
                 nodes={nodes}
                 onCheck={this.onCheck}
                 onExpand={this.onExpand}
diff --git a/examples/src/js/NoCascadeExample.js b/examples/src/js/NoCascadeExample.js
@@ -117,6 +117,7 @@ class NoCascadeExample extends React.Component {
             <CheckboxTree
                 checked={checked}
                 expanded={expanded}
+                iconsClass="fa5"
                 noCascade
                 nodes={nodes}
                 onCheck={this.onCheck}
diff --git a/examples/src/js/PessimisticToggleExample.js b/examples/src/js/PessimisticToggleExample.js
@@ -116,6 +116,7 @@ class PessimisticToggleExample extends React.Component {
             <CheckboxTree
                 checked={checked}
                 expanded={expanded}
+                iconsClass="fa5"
                 nodes={nodes}
                 optimisticToggle={false}
                 onCheck={this.onCheck}
diff --git a/examples/src/scss/style.scss b/examples/src/scss/style.scss
@@ -23,3 +23,8 @@ $rct-border-color: #ccc;
 .expand-all-container {
   max-width: 400px;
 }
+
+.rct-node-icon .far {
+  width: 1em;
+  text-align: center;
+}
diff --git a/src/js/CheckboxTree.js b/src/js/CheckboxTree.js
@@ -22,6 +22,7 @@ class CheckboxTree extends React.Component {
         expandOnClick: PropTypes.bool,
         expanded: listShape,
         icons: iconsShape,
+        iconsClass: PropTypes.string,
         id: PropTypes.string,
         lang: languageShape,
         name: PropTypes.string,
@@ -56,6 +57,7 @@ class CheckboxTree extends React.Component {
             parentOpen: <span className="rct-icon rct-icon-parent-open" />,
             leaf: <span className="rct-icon rct-icon-leaf" />,
         },
+        iconsClass: 'default',
         id: null,
         lang: {
             collapseAll: 'Collapse all',
@@ -326,12 +328,18 @@ class CheckboxTree extends React.Component {
     }
 
     render() {
-        const { disabled, nodes, nativeCheckboxes } = this.props;
+        const {
+            disabled,
+            iconsClass,
+            nodes,
+            nativeCheckboxes,
+        } = this.props;
         const treeNodes = this.renderTreeNodes(nodes);
 
         const className = classNames({
             'react-checkbox-tree': true,
             'rct-disabled': disabled,
+            [`rct-icons-${iconsClass}`]: true,
             'rct-native-display': nativeCheckboxes,
         });
 
diff --git a/src/less/react-checkbox-tree.less b/src/less/react-checkbox-tree.less
@@ -62,8 +62,13 @@
   }
 
   .rct-icon {
-    font-family: "FontAwesome";
+    display: inline-block;
+    text-align: center;
+    text-rendering: auto;
+    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
+    font-weight: normal;
     font-style: normal;
+    font-variant: normal;
   }
 }
 
@@ -169,43 +174,92 @@
   padding: 0 5px;
 }
 
-.rct-icon-expand-close::before {
-  content: "\f054";
-}
+// Font Awesome 4 style
+.rct-icons-fa4 {
+  .rct-icon-expand-close::before {
+    content: "\f054";
+  }
 
-.rct-icon-expand-open::before {
-  content: "\f078";
-}
+  .rct-icon-expand-open::before {
+    content: "\f078";
+  }
 
-.rct-icon-uncheck::before {
-  content: "\f096";
-}
+  .rct-icon-uncheck::before {
+    content: "\f096";
+  }
 
-.rct-icon-check::before {
-  content: "\f046";
-}
+  .rct-icon-check::before {
+    content: "\f046";
+  }
 
-.rct-icon-half-check::before {
-  opacity: .5;
-  content: "\f046";
-}
+  .rct-icon-half-check::before {
+    opacity: .5;
+    content: "\f046";
+  }
 
-.rct-icon-leaf::before {
-  content: "\f016";
-}
+  .rct-icon-leaf::before {
+    content: "\f016";
+  }
 
-.rct-icon-parent-open::before {
-  content: "\f115";
-}
+  .rct-icon-parent-open::before {
+    content: "\f115";
+  }
 
-.rct-icon-parent-close::before {
-  content: "\f114";
-}
+  .rct-icon-parent-close::before {
+    content: "\f114";
+  }
 
-.rct-icon-expand-all::before {
-  content: "\f0fe";
+  .rct-icon-expand-all::before {
+    content: "\f0fe";
+  }
+
+  .rct-icon-collapse-all::before {
+    content: "\f146";
+  }
 }
 
-.rct-icon-collapse-all::before {
-  content: "\f146";
+// Font Awesome 5 style
+.rct-icons-fa5 {
+  .rct-icon-expand-close::before {
+    font-weight: 900;
+    content: "\f054";
+  }
+
+  .rct-icon-expand-open::before {
+    font-weight: 900;
+    content: "\f078";
+  }
+
+  .rct-icon-uncheck::before {
+    content: "\f0c8";
+  }
+
+  .rct-icon-check::before {
+    content: "\f14a";
+  }
+
+  .rct-icon-half-check::before {
+    opacity: .5;
+    content: "\f14a";
+  }
+
+  .rct-icon-leaf::before {
+    content: "\f15b";
+  }
+
+  .rct-icon-parent-open::before {
+    content: "\f07c";
+  }
+
+  .rct-icon-parent-close::before {
+    content: "\f07b";
+  }
+
+  .rct-icon-expand-all::before {
+    content: "\f0fe";
+  }
+
+  .rct-icon-collapse-all::before {
+    content: "\f146";
+  }
 }
diff --git a/src/scss/react-checkbox-tree.scss b/src/scss/react-checkbox-tree.scss
diff --git a/test/CheckboxTree.js b/test/CheckboxTree.js
