add render right option

Author: ZHamburglar

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;