WIP: rtl support

src/node-renderer-default.css

@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
 
+.rst__rtl.rst__rowWrapper {
+  padding: 10px 0 10px 10px;
+}
+
 .rst__row {
   height: 100%;
   white-space: nowrap;
@@ -85,14 +89,29 @@
   background-color: white;
 }
 
+.rst__rtl.rst__rowContents{
+  border-right: none;
+  border-left: solid #bbb 1px;;
+  padding: 0 10px 0 5px;
+}
+
 .rst__rowContentsDragDisabled {
   border-left: solid #bbb 1px;
 }
 
+.rst__rtl.rst__rowContentsDragDisabled{
+  border-right: solid #bbb 1px;
+  border-left: solid #bbb 1px;
+}
+
 .rst__rowLabel {
   flex: 0 1 auto;
   padding-right: 20px;
 }
+.rst__rtl.rst__rowLabel{
+  padding-left: 20px;
+  padding-right: inherit;
+}
 
 .rst__rowToolbar {
   flex: 0 1 auto;
@@ -143,6 +162,12 @@
   left: 0;
   top: 0;
 }
+
+.rst__rtl.rst__loadingCirclePoint{
+  right: 0;
+  left: initial;
+}
+
 .rst__loadingCirclePoint::before {
   content: '';
   display: block;
@@ -253,6 +278,10 @@
   transform: translate(-50%, -50%);
   cursor: pointer;
 }
+.rst__rtl.rst__collapseButton,
+.rst__rtl.rst__expandButton{
+  transform: translate(50%, -50%);
+}
 .rst__collapseButton:focus,
 .rst__expandButton:focus {
   outline: none;
@@ -294,3 +323,8 @@
   bottom: 0;
   height: 10px;
 }
+
+.rst__rtl.rst__lineChildren::after{
+  right: 50%;
+  left: initial;
+}

src/node-renderer-default.js

@@ -33,6 +33,7 @@ class NodeRendererDefault extends Component {
     } = this.props;
     const nodeTitle = title || node.title;
     const nodeSubtitle = subtitle || node.subtitle;
+    const directionClass = this.props.direction === 'rtl' ? 'rst__rtl' : '';
 
     let handle;
     if (canDrag) {
@@ -46,7 +47,7 @@ class NodeRendererDefault extends Component {
                 <div
                   // eslint-disable-next-line react/no-array-index-key
                   key={index}
-                  className="rst__loadingCirclePoint"
+                  className={classnames('rst__loadingCirclePoint', directionClass)}
                 />
               ))}
             </div>
@@ -63,6 +64,13 @@ class NodeRendererDefault extends Component {
     const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
     const isLandingPadActive = !didDrop && isDragging;
 
+    let buttonStyle = { left: -0.5 * scaffoldBlockPxWidth};
+    if(this.props.direction === 'rtl'){
+      buttonStyle = { right: -0.5 * scaffoldBlockPxWidth};
+    }
+
+
+
     return (
       <div style={{ height: '100%' }} {...otherProps}>
         {toggleChildrenVisibility &&
@@ -72,10 +80,11 @@ class NodeRendererDefault extends Component {
               <button
                 type="button"
                 aria-label={node.expanded ? 'Collapse' : 'Expand'}
-                className={
-                  node.expanded ? 'rst__collapseButton' : 'rst__expandButton'
-                }
-                style={{ left: -0.5 * scaffoldBlockPxWidth }}
+                className={classnames(
+                  node.expanded ? 'rst__collapseButton' : 'rst__expandButton',
+                  directionClass
+                )}
+                style={buttonStyle}
                 onClick={() =>
                   toggleChildrenVisibility({
                     node,
@@ -89,13 +98,13 @@ class NodeRendererDefault extends Component {
                 !isDragging && (
                   <div
                     style={{ width: scaffoldBlockPxWidth }}
-                    className="rst__lineChildren"
+                    className={classnames('rst__lineChildren', directionClass)}
                   />
                 )}
             </div>
           )}
 
-        <div className="rst__rowWrapper">
+        <div className={classnames('rst__rowWrapper', directionClass)}>
           {/* Set the row preview to be used during drag and drop */}
           {connectDragPreview(
             <div
@@ -105,6 +114,7 @@ class NodeRendererDefault extends Component {
                 isLandingPadActive && !canDrop && 'rst__rowCancelPad',
                 isSearchMatch && 'rst__rowSearchMatch',
                 isSearchFocus && 'rst__rowSearchFocus',
+                directionClass,
                 className
               )}
               style={{
@@ -117,10 +127,11 @@ class NodeRendererDefault extends Component {
               <div
                 className={classnames(
                   'rst__rowContents',
-                  !canDrag && 'rst__rowContentsDragDisabled'
+                  !canDrag && 'rst__rowContentsDragDisabled',
+                  directionClass
                 )}
               >
-                <div className="rst__rowLabel">
+                <div className={classnames('rst__rowLabel', directionClass)}>
                   <span
                     className={classnames(
                       'rst__rowTitle',

src/react-sortable-tree.css

@@ -12,6 +12,15 @@
   overflow: visible !important;
 }
 
+.rst__rtl .ReactVirtualized__Grid__innerScrollContainer{
+  direction: rtl;
+}
+
+
+.rst__rtl .ReactVirtualized__Grid.ReactVirtualized__List.rst__virtualScrollOverride{
+  direction: rtl !important;
+}
+
 .ReactVirtualized__Grid {
   outline: none;
 }