Browse Source

fix: Fix the problem of indentation error of tree when renderingFullLabel (#2007)

YyumeiZhang 1 năm trước cách đây
mục cha
commit
9582f781ce

+ 16 - 0
packages/semi-foundation/tree/rtl.scss

@@ -20,6 +20,8 @@ $module: #{$prefix}-tree;
         }
 
         .#{$module}-option {
+            padding-left: 0;
+            padding-right: $spacing-tree_option_level1-paddingLeft;
             &-label {
                 & > .#{$prefix}-icon {
                     margin-right: 0;
@@ -39,10 +41,24 @@ $module: #{$prefix}-tree;
             }
         }
 
+        @for $i from 1 through 20 {
+            li.#{$module}-option.#{$module}-option-fullLabel-level-#{$i} {
+                padding-left: 0;
+                padding-right: $spacing-tree_option_level-paddingLeft * ($i - 1) + $spacing-tree_option_level1-paddingLeft;
+            }
+        }
+
         .#{$module}-option-label-empty {
             padding-left: auto;
             padding-right: 0;
         }
+
+        .#{$module}-option {
+            &-switcher {
+                margin-right: 0;
+                margin-left: $spacing-tree_icon-marginRight;
+            }
+        }
     }
 
     .#{$module}-option-list-block {

+ 6 - 0
packages/semi-foundation/tree/tree.scss

@@ -329,6 +329,12 @@ $module: #{$prefix}-tree;
         }
     }
 
+    @for $i from 1 through 20 {
+        li.#{$module}-option.#{$module}-option-fullLabel-level-#{$i} {
+            padding-left: $spacing-tree_option_level-paddingLeft * ($i - 1) + $spacing-tree_option_level1-paddingLeft;
+        }
+    }
+
     .#{$module}-option-empty {
         &:hover,
         &:active {

+ 1 - 0
packages/semi-ui/tree/treeNode.tsx

@@ -355,6 +355,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         const dragOverGapBottom = dragOverNodeKey === eventKey && dropPosition === 1;
         const nodeCls = cls(prefixcls, {
             [`${prefixcls}-level-${level + 1}`]: true,
+            [`${prefixcls}-fullLabel-level-${level + 1}`]: renderFullLabel,
             [`${prefixcls}-collapsed`]: !expanded,
             [`${prefixcls}-disabled`]: Boolean(disabled),
             [`${prefixcls}-selected`]: selected,