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

affects: @gio-design/components, website ISSUES CLOSED: #523, #522, #495, #448
growingio · Dec 1, 2020 · 514f8da · 514f8da
1 parent 278ce85
commit 514f8da
Show file tree

Hide file tree

Showing 14 changed files with 498 additions and 122 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "editor.formatOnSave": true,
+  // "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

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();
@@ -29,15 +34,16 @@ class SelectList extends React.Component<SelectListProps & ConfigConsumerProps>
       return rowHeight;
     };
     return (
-      <AutoSizer style={{ width: '100%', height: '100%' }}>
+      <AutoSizer style={{ width: '100%', height }} disableHeight>
         {({ width }) => (
           <List
             value={value}
             width={width}
             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,7 @@
 
 .@{select-prefix-cls}-option {
   max-width: 100%;
-  height: 40px;
+  // height: 40px;
   padding: 0 25px 0 16px;
   overflow: hidden;
   color: @color-font-list-primary-normal;

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;