fix(select): fix select group listHeight (#600)

affects: @gio-design/components

Co-authored-by: shiliqian <[email protected]>

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,19 +44,19 @@ export interface IBaseListProps {
    */
   labelRenderer?: (option: Option, isGruop: false) => ReactNode;
   /**
-   	自定义行高
+      自定义行高
    */
   rowHeight?: number | ((option: Option) => number);
   /**
    选中的回调
    */
   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,27 +69,27 @@ export interface Option {
    */
   label: string;
   /**
-   	作为列表的 `key` 来使用
+      作为列表的 `key` 来使用
    */
   value: string;
   /**
-   	列表次要文字
+      列表次要文字
    */
   description?: string;
   /**
-   	是否禁用
+      是否禁用
    */
   disabled?: boolean;
   /**
-   	`tooltip` 描述
+      `tooltip` 描述
    */
   tooltip?: string;
   /**
    分组的 `key` ，与 `groupLabel` 一起使用
    */
   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;

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}

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}
         />

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;