Add Render Button Right

examples/src/index.html

@@ -97,6 +97,10 @@ <h2>Filter Example</h2>
 	    <p>Filtering of nodes is also easily possible.</p>
       <div id="filter-example"></div>
 
+      <h2>Expander Right Example</h2>
+	    <p>Place the expander on the right side of the node.</p>
+      <div id="expander-right-example"></div>
+
       <footer class="site-footer">
         <span class="site-footer-owner">
           <a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.

examples/src/index.js

@@ -11,6 +11,7 @@ import NoCascadeExample from './js/NoCascadeExample';
 import LargeDataExample from './js/LargeDataExample';
 import PessimisticToggleExample from './js/PessimisticToggleExample';
 import FilterExample from './js/FilterExample';
+import ExpanderRightExample from './js/ExpanderRightExample';
 
 ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
 ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
@@ -22,3 +23,4 @@ ReactDOM.render(<HiddenCheckboxesExample />, document.getElementById('hidden-che
 ReactDOM.render(<ExpandAllExample />, document.getElementById('expand-all-example'));
 ReactDOM.render(<LargeDataExample />, document.getElementById('large-data-example'));
 ReactDOM.render(<FilterExample />, document.getElementById('filter-example'));
+ReactDOM.render(<ExpanderRightExample />, document.getElementById('expander-right-example'));

examples/src/js/ExpanderRightExample.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import CheckboxTree from 'react-checkbox-tree';
+
+const nodes = [
+    {
+        value: '/app',
+        label: 'app',
+        children: [
+            {
+                value: '/app/Http',
+                label: 'Http',
+                children: [
+                    {
+                        value: '/app/Http/Controllers',
+                        label: 'Controllers',
+                        children: [{
+                            value: '/app/Http/Controllers/WelcomeController.js',
+                            label: 'WelcomeController.js',
+                        }],
+                    },
+                    {
+                        value: '/app/Http/routes.js',
+                        label: 'routes.js',
+                    },
+                ],
+            },
+            {
+                value: '/app/Providers',
+                label: 'Providers',
+                children: [{
+                    value: '/app/Providers/EventServiceProvider.js',
+                    label: 'EventServiceProvider.js',
+                }],
+            },
+        ],
+    },
+    {
+        value: '/config',
+        label: 'config',
+        children: [
+            {
+                value: '/config/app.js',
+                label: 'app.js',
+            },
+            {
+                value: '/config/database.js',
+                label: 'database.js',
+            },
+        ],
+    },
+    {
+        value: '/public',
+        label: 'public',
+        children: [
+            {
+                value: '/public/assets/',
+                label: 'assets',
+                children: [{
+                    value: '/public/assets/style.css',
+                    label: 'style.css',
+                }],
+            },
+            {
+                value: '/public/index.html',
+                label: 'index.html',
+            },
+        ],
+    },
+    {
+        value: '/.env',
+        label: '.env',
+    },
+    {
+        value: '/.gitignore',
+        label: '.gitignore',
+    },
+    {
+        value: '/README.md',
+        label: 'README.md',
+    },
+];
+
+class ExpanderRightExample extends React.Component {
+    state = {
+        checked: [
+            '/app/Http/Controllers/WelcomeController.js',
+            '/app/Http/routes.js',
+            '/public/assets/style.css',
+            '/public/index.html',
+            '/.gitignore',
+        ],
+        expanded: [
+            '/app',
+        ],
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.onCheck = this.onCheck.bind(this);
+        this.onExpand = this.onExpand.bind(this);
+    }
+
+    onCheck(checked) {
+        this.setState({ checked });
+    }
+
+    onExpand(expanded) {
+        this.setState({ expanded });
+    }
+
+    render() {
+        const { checked, expanded } = this.state;
+
+        return (
+            <CheckboxTree
+                checked={checked}
+                expanded={expanded}
+                iconsClass="fa5"
+                nodes={nodes}
+                onCheck={this.onCheck}
+                onExpand={this.onExpand}
+                expanderRight
+            />
+        );
+    }
+}
+
+export default ExpanderRightExample;

src/js/CheckboxTree.js

@@ -23,6 +23,7 @@ class CheckboxTree extends React.Component {
         expandDisabled: PropTypes.bool,
         expandOnClick: PropTypes.bool,
         expanded: listShape,
+        expanderRight: PropTypes.bool,
         icons: iconsShape,
         iconsClass: PropTypes.string,
         id: PropTypes.string,
@@ -48,6 +49,7 @@ class CheckboxTree extends React.Component {
         expandDisabled: false,
         expandOnClick: false,
         expanded: [],
+        expanderRight: false,
         icons: {
             check: <span className="rct-icon rct-icon-check" />,
             uncheck: <span className="rct-icon rct-icon-uncheck" />,
@@ -208,6 +210,7 @@ class CheckboxTree extends React.Component {
         const {
             expandDisabled,
             expandOnClick,
+            expanderRight,
             icons,
             lang,
             noCascade,
@@ -247,6 +250,7 @@ class CheckboxTree extends React.Component {
                     className={node.className}
                     disabled={flatNode.disabled}
                     expandDisabled={expandDisabled}
+                    expanderRight={expanderRight}
                     expandOnClick={expandOnClick}
                     expanded={flatNode.expanded}
                     icon={node.icon}

src/js/TreeNode.js

@@ -13,6 +13,7 @@ class TreeNode extends React.Component {
         disabled: PropTypes.bool.isRequired,
         expandDisabled: PropTypes.bool.isRequired,
         expanded: PropTypes.bool.isRequired,
+        expanderRight: PropTypes.bool.isRequired,
         icons: iconsShape.isRequired,
         isLeaf: PropTypes.bool.isRequired,
         isParent: PropTypes.bool.isRequired,
@@ -105,7 +106,9 @@ class TreeNode extends React.Component {
     }
 
     renderCollapseButton() {
-        const { expandDisabled, isLeaf, lang } = this.props;
+        const {
+            expandDisabled, isLeaf, lang, expanderRight,
+        } = this.props;
 
         if (isLeaf) {
             return (
@@ -117,7 +120,7 @@ class TreeNode extends React.Component {
 
         return (
             <Button
-                className="rct-collapse rct-collapse-btn"
+                className={`rct-collapse rct-collapse-btn ${expanderRight ? 'rct-collapse-right' : ''}`}
                 disabled={expandDisabled}
                 title={lang.toggle}
                 onClick={this.onExpand}
@@ -275,6 +278,7 @@ class TreeNode extends React.Component {
             className,
             disabled,
             expanded,
+            expanderRight,
             isLeaf,
         } = this.props;
         const nodeClass = classNames({
@@ -289,8 +293,9 @@ class TreeNode extends React.Component {
         return (
             <li className={nodeClass}>
                 <span className="rct-text">
-                    {this.renderCollapseButton()}
+                    {expanderRight ? null : this.renderCollapseButton() }
                     {this.renderLabel()}
+                    {expanderRight ? this.renderCollapseButton() : null }
                 </span>
                 {this.renderChildren()}
             </li>

src/scss/react-checkbox-tree.scss

@@ -147,6 +147,10 @@ $rct-clickable-focus: rgba($rct-icon-color, .2) !default;
   }
 }
 
+.rct-collapse-right {
+  margin-left: auto;
+}
+
 .rct-checkbox {
   .rct-native-display & {
     display: none;