refactor(comp: tree): refactor style when blocked is true (#889)

IDuxFE · May 7, 2022 · 84e8e17 · 84e8e17
1 parent 44c67aa
commit 84e8e17
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 44 deletions.
diff --git a/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap b/packages/cdk/scroll/__tests__/__snapshots__/virtualScroll.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`VirtualScroll > basic work > itemRender work 1`] = `
 "<div class=\\"cdk-virtual-scroll\\" style=\\"position: relative;\\">
   <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; overflow: auto;\\">
     <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 400px; position: relative;\\">
-      <div class=\\"cdk-virtual-scroll-content\\" style=\\"display: flex; flex-direction: column; transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\"><span class=\\"virtual-item\\">key-0 - 0</span><span class=\\"virtual-item\\">key-1 - 1</span><span class=\\"virtual-item\\">key-2 - 2</span><span class=\\"virtual-item\\">key-3 - 3</span><span class=\\"virtual-item\\">key-4 - 4</span><span class=\\"virtual-item\\">key-5 - 5</span><span class=\\"virtual-item\\">key-6 - 6</span><span class=\\"virtual-item\\">key-7 - 7</span><span class=\\"virtual-item\\">key-8 - 8</span><span class=\\"virtual-item\\">key-9 - 9</span><span class=\\"virtual-item\\">key-10 - 10</span><span class=\\"virtual-item\\">key-11 - 11</span></div>
+      <div class=\\"cdk-virtual-scroll-content\\" style=\\"display: flex; flex-direction: column; flex-wrap: wrap; transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\"><span class=\\"virtual-item\\">key-0 - 0</span><span class=\\"virtual-item\\">key-1 - 1</span><span class=\\"virtual-item\\">key-2 - 2</span><span class=\\"virtual-item\\">key-3 - 3</span><span class=\\"virtual-item\\">key-4 - 4</span><span class=\\"virtual-item\\">key-5 - 5</span><span class=\\"virtual-item\\">key-6 - 6</span><span class=\\"virtual-item\\">key-7 - 7</span><span class=\\"virtual-item\\">key-8 - 8</span><span class=\\"virtual-item\\">key-9 - 9</span><span class=\\"virtual-item\\">key-10 - 10</span><span class=\\"virtual-item\\">key-11 - 11</span></div>
     </div>
   </div>
 </div>"
@@ -14,7 +14,7 @@ exports[`VirtualScroll > basic work > render work 1`] = `
 "<div class=\\"cdk-virtual-scroll\\" style=\\"position: relative;\\">
   <div class=\\"cdk-virtual-scroll-holder\\" style=\\"max-height: 200px; overflow: auto;\\">
     <div class=\\"cdk-virtual-scroll-filler\\" style=\\"height: 400px; position: relative;\\">
-      <div class=\\"cdk-virtual-scroll-content\\" style=\\"display: flex; flex-direction: column; transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\"><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-0 - 0</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-1 - 1</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-2 - 2</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-3 - 3</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-4 - 4</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-5 - 5</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-6 - 6</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-7 - 7</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-8 - 8</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-9 - 9</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-10 - 10</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-11 - 11</span></div>
+      <div class=\\"cdk-virtual-scroll-content\\" style=\\"display: flex; flex-direction: column; flex-wrap: wrap; transform: translateY(0px); position: absolute; left: 0px; right: 0px; top: 0px;\\"><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-0 - 0</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-1 - 1</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-2 - 2</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-3 - 3</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-4 - 4</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-5 - 5</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-6 - 6</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-7 - 7</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-8 - 8</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-9 - 9</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-10 - 10</span><span class=\\"virtual-item\\" style=\\"height: 20px;\\">key-11 - 11</span></div>
     </div>
   </div>
 </div>"

diff --git a/packages/cdk/scroll/src/virtual/contents/Holder.tsx b/packages/cdk/scroll/src/virtual/contents/Holder.tsx
@@ -54,11 +54,12 @@ export default defineComponent({
     const contentStyle = computed<CSSProperties>(() => {
       const offset = scrollOffset.value
       if (offset === undefined) {
-        return { display: 'flex', flexDirection: 'column' }
+        return { display: 'flex', flexDirection: 'column', flexWrap: 'wrap' }
       }
       return {
         display: 'flex',
         flexDirection: 'column',
+        flexWrap: 'wrap',
         transform: `translateY(${offset}px)`,
         position: 'absolute',
         left: 0,

diff --git a/packages/components/tree-select/style/index.less b/packages/components/tree-select/style/index.less
@@ -54,12 +54,16 @@
     &-search-wrapper {
       display: flex;
       gap: 4px;
-      margin-bottom: 8px;
+      padding: @tree-select-option-container-search-wrapper-padding;
       .@{input-prefix}-suffix,
       .@{input-prefix}-clear {
         color: @select-icon-color;
       }
     }
+
+    .@{tree-prefix}-node {
+      padding: @tree-select-option-container-tree-node-padding;
+    }
   }
 }
 

diff --git a/packages/components/tree-select/style/themes/default.variable.less b/packages/components/tree-select/style/themes/default.variable.less
@@ -14,3 +14,5 @@
 @tree-select-option-container-background-color: @background-color-component;
 @tree-select-option-container-border-radius: @border-radius-sm;
 @tree-select-option-container-box-shadow: @shadow-bottom-md;
+@tree-select-option-container-search-wrapper-padding: 0 @spacing-md @spacing-md @spacing-md;
+@tree-select-option-container-tree-node-padding: 0 0 0 @spacing-xs;
diff --git a/packages/components/tree-select/style/themes/seer.variable.less b/packages/components/tree-select/style/themes/seer.variable.less
@@ -2,5 +2,5 @@
 
 @tree-select-border-radius: @border-radius-sm;
 
-@tree-select-option-container-padding: 8px 12px;
+@tree-select-option-container-padding: 8px 0;
 @tree-select-option-font-size: @font-size-sm;