Use contexts and restructure into components folder

jakezatecky · jakezatecky · commit bce6691004bf · 2023-02-23T21:01:20.000-05:00
Also split the expand button rendering into its own component
diff --git a/src/js/CheckboxTree.jsx b/src/js/CheckboxTree.jsx
@@ -5,15 +5,16 @@ import { nanoid } from 'nanoid';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Button from './Button';
-import NodeModel from './NodeModel';
-import TreeNode from './TreeNode';
+import Button from './components/Button';
+import TreeNode from './components/TreeNode';
 import defaultLang from './lang/default';
 import iconsShape from './shapes/iconsShape';
 import languageShape from './shapes/languageShape';
 import listShape from './shapes/listShape';
 import nodeShape from './shapes/nodeShape';
 import { CHECK_MODEL, KEYS } from './constants';
+import { IconContext, LanguageContext } from './contexts';
+import NodeModel from './NodeModel';
 
 class CheckboxTree extends React.Component {
     static propTypes = {
@@ -222,8 +223,6 @@ class CheckboxTree extends React.Component {
             checkKeys,
             expandDisabled,
             expandOnClick,
-            icons,
-            lang,
             noCascade,
             onClick,
             onlyLeafCheckboxes,
@@ -232,7 +231,6 @@ class CheckboxTree extends React.Component {
             showNodeIcon,
         } = this.props;
         const { id, model } = this.state;
-        const { icons: defaultIcons } = CheckboxTree.defaultProps;
 
         const treeNodes = nodes.map((node) => {
             const key = node.value;
@@ -265,11 +263,9 @@ class CheckboxTree extends React.Component {
                     expandOnClick={expandOnClick}
                     expanded={flatNode.expanded}
                     icon={node.icon}
-                    icons={this.combineMemorized(defaultIcons, icons)}
                     isLeaf={flatNode.isLeaf}
                     isParent={flatNode.isParent}
                     label={node.label}
-                    lang={lang}
                     optimisticToggle={optimisticToggle}
                     showCheckbox={showCheckbox}
                     showNodeIcon={showNodeIcon}
@@ -293,7 +289,11 @@ class CheckboxTree extends React.Component {
     }
 
     renderExpandAll() {
-        const { icons: { expandAll, collapseAll }, lang, showExpandAll } = this.props;
+        const {
+            icons: { expandAll, collapseAll },
+            lang,
+            showExpandAll,
+        } = this.props;
 
         if (!showExpandAll) {
             return null;
@@ -351,14 +351,18 @@ class CheckboxTree extends React.Component {
     }
 
     render() {
+        const { icons: defaultIcons } = CheckboxTree.defaultProps;
         const {
             direction,
             disabled,
+            icons,
             iconsClass,
+            lang,
             nodes,
             nativeCheckboxes,
         } = this.props;
         const { id } = this.state;
+        const mergedIcons = this.combineMemorized(defaultIcons, icons);
         const treeNodes = this.renderTreeNodes(nodes);
 
         const className = classNames({
@@ -371,9 +375,13 @@ class CheckboxTree extends React.Component {
 
         return (
             <div className={className} id={id}>
-                {this.renderExpandAll()}
-                {this.renderHiddenInput()}
-                {treeNodes}
+                <LanguageContext.Provider value={lang}>
+                    <IconContext.Provider value={mergedIcons}>
+                        {this.renderExpandAll()}
+                        {this.renderHiddenInput()}
+                        {treeNodes}
+                    </IconContext.Provider>
+                </LanguageContext.Provider>
             </div>
         );
     }
diff --git a/src/js/components/Button.jsx b/src/js/components/Button.jsx
diff --git a/src/js/components/ExpandButton.jsx b/src/js/components/ExpandButton.jsx
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+
+import { IconContext, LanguageContext } from '../contexts';
+import Button from './Button';
+
+const propTypes = {
+    disabled: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
+    isLeaf: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+function ExpandButton({
+    disabled,
+    expanded,
+    isLeaf,
+    onClick,
+}) {
+    if (isLeaf) {
+        return (
+            <span className="rct-collapse">
+                <span className="rct-icon" />
+            </span>
+        );
+    }
+
+    const icons = useContext(IconContext);
+    const { toggle } = useContext(LanguageContext);
+    const { expandClose, expandOpen } = icons;
+    const collapseIcon = expanded ? expandOpen : expandClose;
+
+    return (
+        <Button
+            className="rct-collapse rct-collapse-btn"
+            disabled={disabled}
+            title={toggle}
+            onClick={onClick}
+        >
+            {collapseIcon}
+        </Button>
+    );
+}
+
+ExpandButton.propTypes = propTypes;
+
+export default ExpandButton;
diff --git a/src/js/components/NativeCheckbox.jsx b/src/js/components/NativeCheckbox.jsx
diff --git a/src/js/components/TreeNode.jsx b/src/js/components/TreeNode.jsx
@@ -2,24 +2,23 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Button from './Button';
-import { KEYS } from './constants';
+import { KEYS } from '../constants';
+import { IconContext } from '../contexts';
+import ExpandButton from './ExpandButton';
 import NativeCheckbox from './NativeCheckbox';
-import iconsShape from './shapes/iconsShape';
-import languageShape from './shapes/languageShape';
 
 class TreeNode extends React.PureComponent {
+    static contextType = IconContext;
+
     static propTypes = {
         checkKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
         checked: PropTypes.number.isRequired,
         disabled: PropTypes.bool.isRequired,
         expandDisabled: PropTypes.bool.isRequired,
         expanded: PropTypes.bool.isRequired,
-        icons: iconsShape.isRequired,
         isLeaf: PropTypes.bool.isRequired,
         isParent: PropTypes.bool.isRequired,
         label: PropTypes.node.isRequired,
-        lang: languageShape.isRequired,
         optimisticToggle: PropTypes.bool.isRequired,
         showNodeIcon: PropTypes.bool.isRequired,
         treeId: PropTypes.string.isRequired,
@@ -130,41 +129,22 @@ class TreeNode extends React.PureComponent {
         return false;
     }
 
-    renderCollapseButton() {
-        const { expandDisabled, isLeaf, lang } = this.props;
-
-        if (isLeaf) {
-            return (
-                <span className="rct-collapse">
-                    <span className="rct-icon" />
-                </span>
-            );
-        }
+    renderExpandButton() {
+        const { expandDisabled, expanded, isLeaf } = this.props;
 
         return (
-            <Button
-                className="rct-collapse rct-collapse-btn"
+            <ExpandButton
                 disabled={expandDisabled}
-                title={lang.toggle}
+                expanded={expanded}
+                isLeaf={isLeaf}
                 onClick={this.onExpand}
-            >
-                {this.renderCollapseIcon()}
-            </Button>
+            />
         );
     }
 
-    renderCollapseIcon() {
-        const { expanded, icons: { expandClose, expandOpen } } = this.props;
-
-        if (!expanded) {
-            return expandClose;
-        }
-
-        return expandOpen;
-    }
-
     renderCheckboxIcon() {
-        const { checked, icons: { uncheck, check, halfCheck } } = this.props;
+        const { uncheck, check, halfCheck } = this.context;
+        const { checked } = this.props;
 
         if (checked === 0) {
             return uncheck;
@@ -178,10 +158,10 @@ class TreeNode extends React.PureComponent {
     }
 
     renderNodeIcon() {
+        const { leaf, parentClose, parentOpen } = this.context;
         const {
             expanded,
             icon,
-            icons: { leaf, parentClose, parentOpen },
             isLeaf,
         } = this.props;
 
@@ -326,7 +306,7 @@ class TreeNode extends React.PureComponent {
         return (
             <li className={nodeClass}>
                 <span className="rct-text">
-                    {this.renderCollapseButton()}
+                    {this.renderExpandButton()}
                     {this.renderLabel()}
                 </span>
                 {this.renderChildren()}
diff --git a/src/js/contexts.js b/src/js/contexts.js
@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const IconContext = createContext({});
+const LanguageContext = createContext({});
+
+export {
+    IconContext,
+    LanguageContext,
+};
diff --git a/test/Button.jsx b/test/Button.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { assert } from 'chai';
 import { render, screen } from '@testing-library/react';
 
-import Button from '../src/js/Button';
+import Button from '../src/js/components/Button';
 
 describe('<Button />', () => {
     describe('title', () => {
diff --git a/test/NativeCheckbox.jsx b/test/NativeCheckbox.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { assert } from 'chai';
 import { render, screen } from '@testing-library/react';
 
-import NativeCheckbox from '../src/js/NativeCheckbox';
+import NativeCheckbox from '../src/js/components/NativeCheckbox';
 
 describe('<NativeCheckbox />', () => {
     describe('indeterminate', () => {
diff --git a/test/TreeNode.jsx b/test/TreeNode.jsx
@@ -4,29 +4,31 @@ import { fireEvent } from '@testing-library/dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import TreeNode from '../src/js/TreeNode';
+import BaseTreeNode from '../src/js/components/TreeNode';
+import { IconContext, LanguageContext } from '../src/js/contexts';
+
+const icons = {
+    check: <span className="rct-icon rct-icon-check" />,
+    uncheck: <span className="rct-icon rct-icon-uncheck" />,
+    halfCheck: <span className="rct-icon rct-icon-half-check" />,
+    expandClose: <span className="rct-icon rct-icon-expand-close" />,
+    expandOpen: <span className="rct-icon rct-icon-expand-open" />,
+    parentClose: <span className="rct-icon rct-icon-parent-close" />,
+    parentOpen: <span className="rct-icon rct-icon-parent-open" />,
+    leaf: <span className="rct-icon rct-icon-leaf" />,
+};
+const lang = {
+    collapseAll: 'Collapse',
+    expandAll: 'Expand',
+    toggle: 'Toggle',
+};
 
 const baseProps = {
     checkKeys: [' ', 'Enter'],
     checked: 0,
     disabled: false,
     expandDisabled: false,
     expanded: false,
-    lang: {
-        collapseAll: 'Collapse',
-        expandAll: 'Expand',
-        toggle: 'Toggle',
-    },
-    icons: {
-        check: <span className="rct-icon rct-icon-check" />,
-        uncheck: <span className="rct-icon rct-icon-uncheck" />,
-        halfCheck: <span className="rct-icon rct-icon-half-check" />,
-        expandClose: <span className="rct-icon rct-icon-expand-close" />,
-        expandOpen: <span className="rct-icon rct-icon-expand-open" />,
-        parentClose: <span className="rct-icon rct-icon-parent-close" />,
-        parentOpen: <span className="rct-icon rct-icon-parent-open" />,
-        leaf: <span className="rct-icon rct-icon-leaf" />,
-    },
     isLeaf: true,
     isParent: false,
     label: 'Jupiter',
@@ -37,6 +39,15 @@ const baseProps = {
     onCheck: () => {},
     onExpand: () => {},
 };
+function TreeNode(props) {
+    return (
+        <LanguageContext.Provider value={lang}>
+            <IconContext.Provider value={icons}>
+                <BaseTreeNode {...props} />
+            </IconContext.Provider>
+        </LanguageContext.Provider>
+    );
+}
 
 describe('<TreeNode />', () => {
     describe('component', () => {
@@ -223,16 +234,6 @@ describe('<TreeNode />', () => {
         });
     });
 
-    describe('icons', () => {
-        it('should replace the default set of icons with the provided values', () => {
-            const { container } = render(
-                <TreeNode {...baseProps} icons={{ uncheck: <span className="other-uncheck" /> }} />,
-            );
-
-            assert.isNotNull(container.querySelector('.rct-checkbox .other-uncheck'));
-        });
-    });
-
     describe('label', () => {
         it('should render the node\'s label', async () => {
             render(
