From 40b7f5b60d3c29f01239b3c2a8c6c6740864337b Mon Sep 17 00:00:00 2001
From: wuduoyi <wuduoyi@baidu.com>
Date: Wed, 19 Aug 2020 21:54:22 +0800
Subject: [PATCH] =?UTF-8?q?select=20=E8=B6=85=E8=BF=87=20100=20=E8=A1=8C?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=97=B6=E6=89=8D=E4=BD=BF=E7=94=A8=20virtua?=
 =?UTF-8?q?l=20list=EF=BC=8C=E8=BF=99=E6=A0=B7=E5=B0=B1=E4=B8=8D=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E6=AF=8F=E6=AC=A1=E9=83=BD=E5=8A=A0=E4=B8=8A=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E5=AE=BD=E5=BA=A6=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Select.tsx             | 160 +++++++++++++-------------
 src/components/virtual-list/index.tsx |  11 +-
 2 files changed, 86 insertions(+), 85 deletions(-)

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 6286f985..1fcf760e 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -759,6 +759,84 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
     const itemHeight = this.state.itemHeight;
 
+    // 渲染单个选项
+    const renderItem = ({index, style}) => {
+      const item = filtedOptions[index];
+      const checked =
+        selectedItem === item ||
+        !!~selectionValues.indexOf(item[valueField]);
+      return (
+        <div
+          {...getItemProps({
+            key:
+              typeof item.value === 'string'
+                ? `${item.label}-${item.value}`
+                : index,
+            index,
+            item,
+            disabled: item.disabled
+          })}
+          style={style}
+          className={cx(`Select-option`, {
+            'is-disabled': item.disabled,
+            'is-highlight': highlightedIndex === index,
+            'is-active': checked
+          })}
+        >
+          {removable ? (
+            <a data-tooltip="移除" data-position="left">
+              <Icon
+                icon="minus"
+                className="icon"
+                onClick={(e: any) => this.handleDeleteClick(e, item)}
+              />
+            </a>
+          ) : null}
+          {editable ? (
+            <a data-tooltip="编辑" data-position="left">
+              <Icon
+                icon="pencil"
+                className="icon"
+                onClick={(e: any) => this.handleEditClick(e, item)}
+              />
+            </a>
+          ) : null}
+
+          {checkAll || multiple ? (
+            <Checkbox
+              checked={checked}
+              trueValue={item.value}
+              onChange={() => {
+                this.handleChange(item);
+              }}
+              disabled={item.disabled}
+            >
+              {item.disabled
+                ? item[labelField]
+                : highlight(
+                    item[labelField],
+                    inputValue as string,
+                    cx('Select-option-hl')
+                  )}
+
+              {item.tip}
+            </Checkbox>
+          ) : (
+            <span>
+              {item.disabled
+                ? item[labelField]
+                : highlight(
+                    item[labelField],
+                    inputValue as string,
+                    cx('Select-option-hl')
+                  )}
+              {item.tip}
+            </span>
+          )}
+        </div>
+      );
+    }
+
     const menu = (
       <div ref={this.menu} className={cx('Select-menu')}>
         {searchable ? (
@@ -798,89 +876,17 @@ export class Select extends React.Component<SelectProps, SelectState> {
         </div>
 
         {filtedOptions.length ? (
+          filtedOptions.length > 100 ? ( // 超过 100 个数据才启用 virtuallist 避免滚动条问题
           <VirtualList
             height={
               filtedOptions.length > 8 ? 280 : filtedOptions.length * itemHeight
             }
             itemCount={filtedOptions.length}
             itemSize={itemHeight}
-            renderItem={({index, style}) => {
-              const item = filtedOptions[index];
-              const checked =
-                selectedItem === item ||
-                !!~selectionValues.indexOf(item[valueField]);
-              return (
-                <div
-                  {...getItemProps({
-                    key:
-                      typeof item.value === 'string'
-                        ? `${item.label}-${item.value}`
-                        : index,
-                    index,
-                    item,
-                    disabled: item.disabled
-                  })}
-                  style={style}
-                  className={cx(`Select-option`, {
-                    'is-disabled': item.disabled,
-                    'is-highlight': highlightedIndex === index,
-                    'is-active': checked
-                  })}
-                >
-                  {removable ? (
-                    <a data-tooltip="移除" data-position="left">
-                      <Icon
-                        icon="minus"
-                        className="icon"
-                        onClick={(e: any) => this.handleDeleteClick(e, item)}
-                      />
-                    </a>
-                  ) : null}
-                  {editable ? (
-                    <a data-tooltip="编辑" data-position="left">
-                      <Icon
-                        icon="pencil"
-                        className="icon"
-                        onClick={(e: any) => this.handleEditClick(e, item)}
-                      />
-                    </a>
-                  ) : null}
-
-                  {checkAll || multiple ? (
-                    <Checkbox
-                      checked={checked}
-                      trueValue={item.value}
-                      onChange={() => {
-                        this.handleChange(item);
-                      }}
-                      disabled={item.disabled}
-                    >
-                      {item.disabled
-                        ? item[labelField]
-                        : highlight(
-                            item[labelField],
-                            inputValue as string,
-                            cx('Select-option-hl')
-                          )}
-
-                      {item.tip}
-                    </Checkbox>
-                  ) : (
-                    <span>
-                      {item.disabled
-                        ? item[labelField]
-                        : highlight(
-                            item[labelField],
-                            inputValue as string,
-                            cx('Select-option-hl')
-                          )}
-                      {item.tip}
-                    </span>
-                  )}
-                </div>
-              );
-            }}
-          />
+            renderItem={renderItem}
+          />): (
+            filtedOptions.map((item, index) => { return renderItem({index}) })
+          )
         ) : (
           <div className={cx('Select-noResult')}>{__(noResultsText)}</div>
         )}
diff --git a/src/components/virtual-list/index.tsx b/src/components/virtual-list/index.tsx
index 099e8af1..e8efe0fc 100644
--- a/src/components/virtual-list/index.tsx
+++ b/src/components/virtual-list/index.tsx
@@ -177,12 +177,7 @@ export default class VirtualList extends React.PureComponent<Props, State> {
   }
 
   // 自适应宽度
-  updateRootWidth(isDidUpdate: boolean = false) {
-    let scrollbarWidth =
-      window.innerWidth - document.documentElement.clientWidth || 15;
-    if (isDidUpdate) {
-      scrollbarWidth = 0;
-    }
+  updateRootWidth() {
     const itemsDom = this.rootNode.children[0].children;
     const containerWidth = this.rootNode.parentElement!.getBoundingClientRect()
       .width;
@@ -196,7 +191,7 @@ export default class VirtualList extends React.PureComponent<Props, State> {
     if (containerWidth >= maxItemWidth) {
       this.rootNode.style.width = containerWidth + 'px';
     } else {
-      this.rootNode.style.width = maxItemWidth + scrollbarWidth + 'px';
+      this.rootNode.style.width = maxItemWidth + 'px';
     }
   }
 
@@ -258,7 +253,7 @@ export default class VirtualList extends React.PureComponent<Props, State> {
   }
 
   componentDidUpdate(_: Props, prevState: State) {
-    this.updateRootWidth(true);
+    this.updateRootWidth();
     const {offset, scrollChangeReason} = this.state;
     if (
       prevState.offset !== offset &&