Extract global actions into into a component

Author: jakezatecky

CHANGELOG.md

@@ -4,18 +4,19 @@
 
 ### Breaking Changes
 
+#### Accessibility
+
+* Hide the pseudo-checkbox from the accessibility tree
+* Change the clickable label from `role="link"` to `role="button"`
+
 #### Language
 
 * Replaced `toggle` key in `lang` property with `collapseNode` and `expandNode`
 
 #### Styling
 
 * The `iconsClass` property now defaults to `"fa5"` for Font Awesome 5/6 instead of Font Awesome 4
-
-#### Accessibility
-
-* Hide the pseudo-checkbox from the accessibility tree
-* Change the clickable label from `role="link"` to `role="button"`
+* The `rct-options` and `rct-option` CSS classes are now `rct-actions` and `rct-action`
 
 ### New Features
 

src/js/CheckboxTree.jsx

@@ -5,7 +5,7 @@ import { nanoid } from 'nanoid';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Button from './components/Button';
+import GlobalActions from './components/GlobalActions';
 import TreeNode from './components/TreeNode';
 import defaultLang from './lang/default';
 import iconsShape from './shapes/iconsShape';
@@ -288,35 +288,14 @@ class CheckboxTree extends React.Component {
         );
     }
 
-    renderExpandAll() {
-        const {
-            icons: { expandAll, collapseAll },
-            lang,
-            showExpandAll,
-        } = this.props;
+    renderGlobalOptions() {
+        const { showExpandAll } = this.props;
 
         if (!showExpandAll) {
             return null;
         }
 
-        return (
-            <div className="rct-options">
-                <Button
-                    className="rct-option rct-option-expand-all"
-                    title={lang.expandAll}
-                    onClick={this.onExpandAll}
-                >
-                    {expandAll}
-                </Button>
-                <Button
-                    className="rct-option rct-option-collapse-all"
-                    title={lang.collapseAll}
-                    onClick={this.onCollapseAll}
-                >
-                    {collapseAll}
-                </Button>
-            </div>
-        );
+        return <GlobalActions onCollapseAll={this.onCollapseAll} onExpandAll={this.onExpandAll} />;
     }
 
     renderHiddenInput() {
@@ -377,7 +356,7 @@ class CheckboxTree extends React.Component {
             <div className={className} id={id}>
                 <LanguageContext.Provider value={lang}>
                     <IconContext.Provider value={mergedIcons}>
-                        {this.renderExpandAll()}
+                        {this.renderGlobalOptions()}
                         {this.renderHiddenInput()}
                         {treeNodes}
                     </IconContext.Provider>

src/js/components/GlobalActions.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+
+import { IconContext, LanguageContext } from '../contexts';
+import Button from './Button';
+
+const propTypes = {
+    onCollapseAll: PropTypes.func.isRequired,
+    onExpandAll: PropTypes.func.isRequired,
+};
+
+function GlobalActions({ onExpandAll, onCollapseAll }) {
+    const { expandAll, collapseAll } = useContext(IconContext);
+    const { expandAll: expandLang, collapseAll: collapseLang } = useContext(LanguageContext);
+
+    return (
+        <div className="rct-actions">
+            <Button
+                className="rct-action rct-action-expand-all"
+                title={expandLang}
+                onClick={onExpandAll}
+            >
+                {expandAll}
+            </Button>
+            <Button
+                className="rct-action rct-action-collapse-all"
+                title={collapseLang}
+                onClick={onCollapseAll}
+            >
+                {collapseAll}
+            </Button>
+        </div>
+    );
+}
+
+GlobalActions.propTypes = propTypes;
+
+export default GlobalActions;

src/less/react-checkbox-tree.less

@@ -88,13 +88,13 @@
   align-items: center;
 }
 
-.rct-options {
+.rct-actions {
   flex: 0 0 auto;
   margin-left: .5rem;
   text-align: right;
 }
 
-.rct-option {
+.rct-action {
   opacity: .75;
   border: 0;
   background: none;
@@ -106,7 +106,7 @@
     opacity: 1;
   }
 
-  + .rct-option {
+  + & {
     margin-left: 2px;
   }
 }

src/scss/react-checkbox-tree.scss

@@ -94,13 +94,13 @@ $rct-clickable-focus: rgba($rct-icon-color, .2) !default;
   align-items: center;
 }
 
-.rct-options {
+.rct-actions {
   flex: 0 0 auto;
   margin-left: .5rem;
   text-align: right;
 }
 
-.rct-option {
+.rct-action {
   opacity: .75;
   border: 0;
   background: none;
@@ -112,7 +112,7 @@ $rct-clickable-focus: rgba($rct-icon-color, .2) !default;
     opacity: 1;
   }
 
-  + .rct-option {
+  + & {
     margin-left: 2px;
   }
 }