Skip to content

Feature: rtl support #333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Feature: rtl support #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
efb4cc9
WIP: rtl support added
Jun 4, 2018
80e8d3b
css direction change
Jun 4, 2018
0544a46
direction attribute added to test snapshot
Jun 5, 2018
d554c59
direction attr set to 'ltr' by default, ltr classes added
Jun 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
262 changes: 171 additions & 91 deletions examples/storybooks/__snapshots__/storyshots.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions src/__snapshots__/react-sortable-tree.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<SortableTree /> should render tree correctly 1`] = `
<div
className="rst__tree"
className="rst__tree rst_ltr"
style={
Object {
"height": "100%",
Expand Down Expand Up @@ -48,7 +48,8 @@ exports[`<SortableTree /> should render tree correctly 1`] = `
}
>
<div
className="rst__node"
className="rst__node rst__ltr"
direction="ltr"
style={
Object {
"height": 62,
Expand All @@ -60,7 +61,7 @@ exports[`<SortableTree /> should render tree correctly 1`] = `
}
>
<div
className="rst__lineBlock rst__lineHalfHorizontalRight"
className="rst__lineBlock rst__lineHalfHorizontalRight rst__ltr"
style={
Object {
"width": 44,
Expand All @@ -76,6 +77,7 @@ exports[`<SortableTree /> should render tree correctly 1`] = `
}
>
<div
direction="ltr"
style={
Object {
"height": "100%",
Expand Down
34 changes: 34 additions & 0 deletions src/node-renderer-default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
box-sizing: border-box;
}

.rst__rtl.rst__rowWrapper {
padding: 10px 0 10px 10px;
}

.rst__row {
height: 100%;
white-space: nowrap;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -143,6 +162,12 @@
left: 0;
top: 0;
}

.rst__rtl.rst__loadingCirclePoint{
right: 0;
left: initial;
}

.rst__loadingCirclePoint::before {
content: '';
display: block;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -294,3 +323,8 @@
bottom: 0;
height: 10px;
}

.rst__rtl.rst__lineChildren::after{
right: 50%;
left: initial;
}
29 changes: 20 additions & 9 deletions src/node-renderer-default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
Expand All @@ -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 &&
Expand All @@ -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,
Expand All @@ -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
Expand All @@ -105,6 +114,7 @@ class NodeRendererDefault extends Component {
isLandingPadActive && !canDrop && 'rst__rowCancelPad',
isSearchMatch && 'rst__rowSearchMatch',
isSearchFocus && 'rst__rowSearchFocus',
directionClass,
className
)}
style={{
Expand All @@ -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',
Expand Down
5 changes: 5 additions & 0 deletions src/react-sortable-tree.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
overflow: visible !important;
}

.rst__rtl .ReactVirtualized__Grid__innerScrollContainer{
direction: rtl;
}


.ReactVirtualized__Grid {
outline: none;
}
4 changes: 3 additions & 1 deletion src/react-sortable-tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -565,6 +565,7 @@ class ReactSortableTree extends Component {
node,
path,
treeId: this.treeId,
direction: this.props.direction === 'rtl' ? 'rtl' : 'ltr'
};

return (
Expand Down Expand Up @@ -613,6 +614,7 @@ class ReactSortableTree extends Component {
} = this.state;

const treeData = this.state.draggingTreeData || instanceProps.treeData;
const directionClass = this.props.direction === 'rtl' ? 'rst__rtl' : 'rst_ltr';

let rows;
let swapFrom = null;
Expand Down Expand Up @@ -741,7 +743,7 @@ class ReactSortableTree extends Component {

return (
<div
className={classnames('rst__tree', className)}
className={classnames('rst__tree', className, directionClass)}
style={containerStyle}
>
{list}
Expand Down
62 changes: 62 additions & 0 deletions src/tree-node.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
text-align: left;
}

.rst__node.rst__rtl {
text-align: right;
}

.rst__nodeContent {
position: absolute;
top: 0;
Expand Down Expand Up @@ -51,6 +55,12 @@
width: 50%;
}

.rst__rtl.rst__lineHalfHorizontalRight::before{
left: 0;
right: initial;
}


/**
* +--+--+
* | | |
Expand All @@ -67,6 +77,21 @@
height: 100%;
}

/**
* +--+--+
* | | |
* | | |
* | | |
* +--+--+
*/
.rst__rtl.rst__lineFullVertical::after,
.rst__rtl.rst__lineHalfVerticalTop::after,
.rst__rtl.rst__lineHalfVerticalBottom::after {
right: 50%;
left: initial;
}


/**
* +-----+
* | | |
Expand Down Expand Up @@ -113,6 +138,14 @@
top: 0;
height: 100%;
}

.rst__rtl.rst__highlightLineVertical::before{
margin-left: initial;
margin-right: -4px;
left: initial;
right: 50%;
}

@keyframes arrow-pulse {
0% {
transform: translate(0, 0);
Expand Down Expand Up @@ -144,6 +177,13 @@
animation: arrow-pulse 1s infinite linear both;
}

.rst__rtl.rst__highlightLineVertical::after{
margin-left: initial;
margin-right: -4px;
right: 50%;
left: initial;
}

/**
* +-----+
* | |
Expand All @@ -165,6 +205,13 @@
width: calc(50% + 4px);
}

.rst__rtl.rst__highlightTopLeftCorner::before{
border-right: solid 8px #36c2f6;
border-left: none;
left: 0;
right: initial;
}

/**
* +--+--+
* | | |
Expand All @@ -186,6 +233,14 @@
right: 12px;
width: calc(50% - 8px);
}

.rst__rtl.rst__highlightBottomLeftCorner::before{
border-right: solid 8px #36c2f6;
border-left: none;
left: 12px;
right: initial;
}

.rst__highlightBottomLeftCorner::after {
content: '';
position: absolute;
Expand All @@ -197,3 +252,10 @@
border-bottom: 12px solid transparent;
border-left: 12px solid #36c2f6;
}

.rst__rtl.rst__highlightBottomLeftCorner::after{
left: 0;
right: initial;
border-right: 12px solid #36c2f6;
border-left: none;
}
Loading