feat(select): 增加JSX方式添加Option

affects: @gio-design/components, website ISSUES CLOSED: #523, #522, #495, #448
growingio · Dec 4, 2020 · 4ac9b34 · 4ac9b34
1 parent e138f48
commit 4ac9b34
Show file tree

Hide file tree

Showing 15 changed files with 522 additions and 135 deletions.
diff --git a/packages/components/src/assets/images/BoxFilled.svg b/packages/components/src/assets/images/BoxFilled.svg
diff --git a/packages/components/src/components/list/list.tsx b/packages/components/src/components/list/list.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { get } from 'lodash';
-import { List, AutoSizer } from 'react-virtualized';
+import { List, AutoSizer, CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { withConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import SelectOption from './option';
 import Group from './Group';
@@ -15,6 +15,11 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
 
   public ref: React.RefObject<HTMLDivElement>;
 
+  public _cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 40,
+  });
+
   public constructor(props: SelectListProps & ConfigConsumerProps) {
     super(props);
     this.ref = React.createRef();
@@ -37,7 +42,8 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
             height={400}
             style={{ height: height || '100%', overflow: 'auto' }}
             rowCount={options.length}
-            rowHeight={typeof rowHeight === 'function' ? getRowHeight : rowHeight}
+            rowHeight={typeof rowHeight === 'function' ? getRowHeight : this._cache.rowHeight}
+            deferredMeasurementCache={this._cache}
             rowRenderer={this.renderListItem(options)}
             disabledOptions={disabledOptions}
             className={`${prefixCls}-list`}
@@ -55,7 +61,15 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
     return false;
   };
 
-  private renderListItem = (options: any) => ({ index, style }: { index: number; style: React.CSSProperties }) => {
+  private renderListItem = (options: any) => ({
+    index,
+    style,
+    parent,
+  }: {
+    index: number;
+    style: React.CSSProperties;
+    parent: any;
+  }) => {
     const {
       isMultiple,
       required,
@@ -87,35 +101,40 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
 
     const groupIcon = getGroupIcon ? getGroupIcon(option.group) : null;
 
-    return isGroup ? (
-      <Group
-        key={option.label}
-        name={option.label}
-        option={option}
-        style={{ ...style, height: (style.height as number) - 4 }}
-        icon={groupIcon}
-        isSelected={this.getSelected(option)}
-        isMultiple={!!isMultiple}
-        labelRenderer={labelRenderer}
-      />
-    ) : (
-      <SelectOption
-        key={key}
-        style={{ ...style, height: (style.height as number) - 4 }}
-        option={option}
-        title={!labelRenderer ? label : undefined}
-        isSelected={this.getSelected(option)}
-        isMultiple={!!isMultiple}
-        allowDuplicate={allowDuplicate}
-        onSelect={this.handleSelect}
-        onClick={this.handleClick}
-        disabled={disabled}
-        hasGroupIcon={!!groupIcon}
-        getPopupContainer={getPopupContainer}
-        placement={placement}
-      >
-        {label}
-      </SelectOption>
+    return (
+      <CellMeasurer key={key} cache={this._cache} parent={parent} columnIndex={0} rowIndex={index}>
+        <div style={{ ...style, height: (style.height as number) - 4 }} className="row">
+          {isGroup ? (
+            <Group
+              key={option.label}
+              name={option.label}
+              option={option}
+              icon={groupIcon}
+              isSelected={this.getSelected(option)}
+              isMultiple={!!isMultiple}
+              labelRenderer={labelRenderer}
+            />
+          ) : (
+            <SelectOption
+              key={key}
+              style={{}}
+              option={option}
+              title={!labelRenderer ? label : undefined}
+              isSelected={this.getSelected(option)}
+              isMultiple={!!isMultiple}
+              allowDuplicate={allowDuplicate}
+              onSelect={this.handleSelect}
+              onClick={this.handleClick}
+              disabled={disabled}
+              hasGroupIcon={!!groupIcon}
+              getPopupContainer={getPopupContainer}
+              placement={placement}
+            >
+              {label}
+            </SelectOption>
+          )}
+        </div>
+      </CellMeasurer>
     );
   };
 

diff --git a/packages/components/src/components/list/style/option.less b/packages/components/src/components/list/style/option.less
@@ -2,7 +2,6 @@
 
 .@{select-prefix-cls}-option {
   max-width: 100%;
-  height: 40px;
   padding: 0 25px 0 16px;
   overflow: hidden;
   color: @color-font-list-primary-normal;
@@ -12,6 +11,7 @@
   text-overflow: ellipsis;
   border-radius: 5px;
   transition: background-color 0.3s ease;
+
   &:not(.group) {
     display: flex;
     align-items: center;
@@ -25,12 +25,15 @@
   &.selected {
     color: @color-font-list-primary-active;
     background-color: @color-background-list-single-active;
+
     &:hover {
       background-color: @color-background-list-single-hover;
     }
+
     .@{list-prefix-cls}-option-title {
       color: @color-font-list-primary-active;
     }
+
     .@{list-prefix-cls}-option-desc {
       color: @color-font-list-secondary-active;
     }
@@ -40,13 +43,16 @@
     &.selected {
       color: @color-font-list-primary-normal;
       background-color: inherit;
+
       .@{list-prefix-cls}-option-title {
         color: @color-font-list-primary-normal;
       }
+
       .@{list-prefix-cls}-option-desc {
         color: @color-font-list-secondary-normal;
       }
     }
+
     &:hover {
       background-color: @color-background-list-multiple-hover;
     }
@@ -55,6 +61,7 @@
   .@{list-prefix-cls}-option-title {
     color: @color-font-list-primary-normal;
   }
+
   .@{list-prefix-cls}-option-desc {
     color: @color-font-list-secondary-normal;
   }
@@ -63,9 +70,11 @@
     color: @color-font-list-primary-disable;
     background-color: @color-background-list-multiple-disable;
     cursor: not-allowed;
+
     .@{list-prefix-cls}-option-title {
       color: @color-font-list-primary-disable;
     }
+
     .@{list-prefix-cls}-option-desc {
       color: @color-font-list-secondary-disable;
     }

diff --git a/packages/components/src/components/select/OptGroup.tsx b/packages/components/src/components/select/OptGroup.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { OptGroupProps } from './interface'
+
+
+export interface OptionGroupFC extends React.FC<OptGroupProps> {
+    isSelectOptGroup: boolean;
+}
+const OptGroup: OptionGroupFC = () => null;
+
+OptGroup.isSelectOptGroup = true;
+
+export default OptGroup;
diff --git a/packages/components/src/components/select/Options.tsx b/packages/components/src/components/select/Options.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { OptionProps } from './interface'
+
+
+export interface OptionFC extends React.FC<OptionProps> {
+    isSelectOption: boolean;
+}
+const Option: OptionFC = () => null;
+
+Option.isSelectOption = true;
+
+export default Option;