feat(Tree): support rtl

alibaba-fusion · Feb 19, 2019 · 37fa931 · 37fa931
1 parent 1ed6e25
commit 37fa931
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 3 deletions.
diff --git a/src/tree/main.scss b/src/tree/main.scss
@@ -272,3 +272,5 @@
         }
     }
 }
+
+@import './rtl.scss';
diff --git a/src/tree/rtl.scss b/src/tree/rtl.scss
@@ -0,0 +1,34 @@
+#{$tree-prefix}[dir='rtl'] {
+    #{$tree-prefix} {
+        &-switcher {
+            margin-left: $tree-switch-margint-right;
+            margin-right: 0;
+        }
+        &-switcher.#{$css-prefix}noop-line-noroot {
+            border-left: none;
+            border-right: $tree-switch-border-width $line-solid $tree-line-color;
+        }
+        &-right-angle {
+            left: auto;
+            right: - ($tree-child-indent-right + $tree-line-width + $tree-switch-border-width);
+            border-left: none;
+            border-right: $tree-line;
+        }
+    }
+
+    &.#{$css-prefix}show-line #{$tree-prefix}-node #{$tree-prefix}-node:not(:last-child) {
+        margin-left: 0;
+        margin-right: $tree-child-indent-left;
+        border-left: none;
+        border-right: $tree-line;
+        padding-left: 0;
+        padding-right: $tree-child-indent-right;
+    }
+
+    &.#{$css-prefix}node-indent {
+        #{$tree-prefix}-node #{$tree-prefix}-node {
+            margin-left: 0;
+            margin-right: $tree-child-indent;
+        }
+    }
+}
diff --git a/src/tree/view/tree-node.jsx b/src/tree/view/tree-node.jsx
@@ -20,6 +20,7 @@ export default class TreeNode extends Component {
     static propTypes = {
         _key: PropTypes.string,
         prefix: PropTypes.string,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         /**
          * 树节点
@@ -73,6 +74,7 @@ export default class TreeNode extends Component {
 
     static defaultProps = {
         label: '---',
+        rtl: false,
         disabled: false,
         checkboxDisabled: false,
         isLeaf: false
@@ -418,6 +420,7 @@ export default class TreeNode extends Component {
     render() {
         const {
             prefix,
+            rtl,
             className,
             children,
             isLeaf,
@@ -459,7 +462,9 @@ export default class TreeNode extends Component {
         const defaultPaddingLeft = typeof isNodeBlock === 'object' ? parseInt(isNodeBlock.defaultPaddingLeft || 0) : 0;
         const indent = typeof isNodeBlock === 'object' ? parseInt(isNodeBlock.indent || 24) : 24;
         const level = pos.split('-').length - 2;
-        const innerStyle = isNodeBlock ? { paddingLeft: `${indent * level + defaultPaddingLeft}px` } : null;
+        const paddingLeftProp = rtl ? 'paddingRight' : 'paddingLeft';
+
+        const innerStyle = isNodeBlock ? { [paddingLeftProp]: `${indent * level + defaultPaddingLeft}px` } : null;
         const innerProps = {
             className: innerClassName,
             style: innerStyle,
@@ -476,6 +481,10 @@ export default class TreeNode extends Component {
 
         innerProps.tabIndex = root.tabbableKey === _key ? '0' : '-1';
 
+        if (rtl) {
+            others.dir = 'rtl';
+        }
+
         return (
             <li className={newClassName} {...others}>
                 <div

diff --git a/src/tree/view/tree.jsx b/src/tree/view/tree.jsx
@@ -22,6 +22,7 @@ const { pickOthers, isPlainObject } = obj;
 export default class Tree extends Component {
     static propTypes = {
         prefix: PropTypes.string,
+        rtl: PropTypes.bool,
         pure: PropTypes.bool,
         className: PropTypes.string,
         /**
@@ -234,6 +235,7 @@ export default class Tree extends Component {
 
     static defaultProps = {
         prefix: 'next-',
+        rtl: false,
         pure: false,
         showLine: false,
         selectable: true,
@@ -869,6 +871,7 @@ export default class Tree extends Component {
     }
 
     renderByDataSource() {
+        const { rtl } = this.props;
         const loop = (data, prefix = '0') => {
             return data.map((item, index) => {
                 const pos = `${prefix}-${index}`;
@@ -881,7 +884,7 @@ export default class Tree extends Component {
                 if (children && children.length) {
                     props.children = loop(children, pos);
                 }
-                const node = <TreeNode key={key} {...props} />;
+                const node = <TreeNode rtl={rtl} key={key} {...props} />;
                 this._k2n[key].node = node;
                 return node;
             });
@@ -891,6 +894,7 @@ export default class Tree extends Component {
     }
 
     renderByChildren() {
+        const { rtl } = this.props;
         const loop = (children, prefix = '0') => {
             return Children.map(children, (child, index) => {
                 const pos = `${prefix}-${index}`;
@@ -901,6 +905,7 @@ export default class Tree extends Component {
                 }
 
                 props._key = key;
+                props.rtl = rtl;
 
                 const node = cloneElement(child, props);
                 this._k2n[key].node = node;
@@ -912,9 +917,13 @@ export default class Tree extends Component {
     }
 
     render() {
-        const { prefix, className, dataSource, showLine, isNodeBlock, isLabelBlock } = this.props;
+        const { prefix, rtl, className, dataSource, showLine, isNodeBlock, isLabelBlock } = this.props;
         const others = pickOthers(Object.keys(Tree.propTypes), this.props);
 
+        if (rtl) {
+            others.dir = 'rtl';
+        }
+
         const newClassName = cx({
             [`${prefix}tree`]: true,
             [`${prefix}label-block`]: isLabelBlock,