From 70a9b01ff0805a47f0bf1e68ef3952c1e5a36a94 Mon Sep 17 00:00:00 2001
From: Liqian <31471551+berber1016@users.noreply.github.com>
Date: Wed, 9 Dec 2020 19:18:39 +0800
Subject: [PATCH] fix(select): fix select group listHeight (#600)

affects: @gio-design/components

Co-authored-by: shiliqian <shiliqian@growingio.com>
---
 .../src/components/list/interface.ts          | 26 +++++++++----------
 .../components/src/components/list/list.tsx   |  1 +
 .../src/components/select/Select.tsx          |  8 ++----
 .../functional/select/demos/options.ts        |  6 ++---
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/components/list/interface.ts b/packages/components/src/components/list/interface.ts
index cd62f92c65..782082ab8e 100644
--- a/packages/components/src/components/list/interface.ts
+++ b/packages/components/src/components/list/interface.ts
@@ -24,13 +24,13 @@ export interface IBaseListProps {
    */
   value?: any;
   /**
-   	列表宽度
+      列表宽度
    */
   width?: number | string;
   /**
-   	列表高度
+      列表高度
    */
-  height?: number;
+  height?: number | string;
   /**
    包裹样式
    */
@@ -44,7 +44,7 @@ export interface IBaseListProps {
    */
   labelRenderer?: (option: Option, isGruop: false) => ReactNode;
   /**
-   	自定义行高
+      自定义行高
    */
   rowHeight?: number | ((option: Option) => number);
   /**
@@ -52,11 +52,11 @@ export interface IBaseListProps {
    */
   onSelect?: (selectedValue: string, value: ListValueType, option: Option) => void;
   /**
-   	取消选中的回调
+      取消选中的回调
    */
   onDeselect?: (selectedValue: string, value: ListValueType, option: Option) => void;
   /**
-   	点击触发的回调
+      点击触发的回调
    */
   onClick?: (value: any) => void;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
@@ -69,19 +69,19 @@ export interface Option {
    */
   label: string;
   /**
-   	作为列表的 `key` 来使用
+      作为列表的 `key` 来使用
    */
   value: string;
   /**
-   	列表次要文字
+      列表次要文字
    */
   description?: string;
   /**
-   	是否禁用
+      是否禁用
    */
   disabled?: boolean;
   /**
-   	`tooltip` 描述
+      `tooltip` 描述
    */
   tooltip?: string;
   /**
@@ -89,7 +89,7 @@ export interface Option {
    */
   groupValue?: string;
   /**
-   	分组的标题
+      分组的标题
    */
   groupLabel?: string;
 }
@@ -105,7 +105,7 @@ export interface SelectCoreProps {
   stateless?: boolean;
   allowDuplicate?: boolean;
   max?: number;
-  height?: number;
+  height?: number | string;
   rowHeight?: number | ((option: any) => number);
   isLoading?: boolean;
   required?: boolean;
@@ -136,7 +136,7 @@ export interface SelectListProps {
   allowDuplicate?: boolean;
   required?: boolean;
   max?: number;
-  height: number;
+  height: number | string;
   rowHeight: number | ((option: any) => number);
   onSelect?: (value: any, selectedValue?: any | any[], option?: any) => void;
   onDeselect?: (value: any, selectedValue?: any | any[], option?: any) => void;
diff --git a/packages/components/src/components/list/list.tsx b/packages/components/src/components/list/list.tsx
index 80b2ed7286..b3ee8351f5 100644
--- a/packages/components/src/components/list/list.tsx
+++ b/packages/components/src/components/list/list.tsx
@@ -36,6 +36,7 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
     return (
       <AutoSizer style={{ width: '100%', height: '100%' }}>
         {({ width }) => (
+          
           <List
             value={value}
             width={width}
diff --git a/packages/components/src/components/select/Select.tsx b/packages/components/src/components/select/Select.tsx
index d252474340..aa7b1d2e73 100644
--- a/packages/components/src/components/select/Select.tsx
+++ b/packages/components/src/components/select/Select.tsx
@@ -2,7 +2,7 @@ import React, { useState, useContext, useMemo, useRef, useEffect, useCallback }
 import classnames from 'classnames';
 
 import { DownFilled, CloseCircleFilled } from '@gio-design/icons';
-import { filter, isNil, without, uniqueId, uniqBy, findIndex, concat } from 'lodash';
+import { filter, isNil, without, uniqueId, findIndex, concat } from 'lodash';
 import { SizeContext } from '../config-provider/SizeContext';
 import Dropdown from '../dropdown';
 import Tag from '../tag';
@@ -273,10 +273,6 @@ const RenderSelect: React.ForwardRefRenderFunction<unknown, SelectProps> = (prop
         : filteredOptions,
     [hasExactMatch, allowCustomOption, filteredOptions, input, hasGroup]
   );
-  const groupCount = useMemo(() => (hasGroup ? uniqBy(completeOptions, 'groupValue').length : 0), [
-    completeOptions,
-    hasGroup,
-  ]);
 
   const onValueChange = (optValue: MaybeArray<string | number>) => {
     if (!isControlled) {
@@ -442,7 +438,7 @@ const RenderSelect: React.ForwardRefRenderFunction<unknown, SelectProps> = (prop
           onDeselect={onListDeselect}
           height={
             listHeight ||
-            (completeOptions.length + groupCount) * listRowHeight - groupCount * 10 - (groupCount !== 0 ? 16 : 0)
+            '100%'
           }
           rowHeight={listRowHeight}
         />
diff --git a/packages/website/src/components/functional/select/demos/options.ts b/packages/website/src/components/functional/select/demos/options.ts
index 00dc0f43f4..722a862ddc 100644
--- a/packages/website/src/components/functional/select/demos/options.ts
+++ b/packages/website/src/components/functional/select/demos/options.ts
@@ -1,6 +1,6 @@
 const labels = ['全部', '已上线', '待上线', '已下线', '草稿'];
 const values = ['all', 'online', 'pending', 'off', 'draft'];
-const numberValues = [10,20,30,40,50];
+const numberValues = [10, 20, 30, 40, 50];
 
 const options = values.map((value, index) => ({
   value,
@@ -20,9 +20,9 @@ const optionsWithoutGroup = values.map((value, index) => ({
 }));
 
 const optionsWithChildren = values.map((value, index) => ({
-  value:`${value}-自定义`,
+  value: `${value}-自定义`,
   label: `${labels[index]}-自定义`,
 }));
 
-export { optionsWithoutGroup,optionsWithChildren,numberOptions };
+export { optionsWithoutGroup, optionsWithChildren, numberOptions };
 export default options;