@gm-pc/react 1.24.9-beta.13 → 1.24.9-beta.14

package/src/component/more_select/base.tsx

@@ -1,408 +1,408 @@
-import React, {
-  ChangeEvent,
-  Component,
-  createRef,
-  MouseEvent,
-  ReactNode,
-  KeyboardEvent,
-} from 'react'
-import classNames from 'classnames'
-import _ from 'lodash'
-import { MoreSelectBaseProps, MoreSelectGroupDataItem, MoreSelectDataItem } from './types'
-import { Popover } from '../popover'
-import { Flex } from '../flex'
-import SVGRemove from '../../svg/remove.svg'
-import SVGCloseCircle from '../../svg/close-circle.svg'
-import { renderListFilterDefault, renderListFilterPinYin } from './render_list_filter'
-import { Input } from '../input'
-import { Loading } from '../loading'
-import { getLocale } from '@gm-pc/locales'
-import { ListBase } from '../list'
-import { findDOMNode } from 'react-dom'
-import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
-
-interface MoreSelectBaseState {
-  searchValue: string
-  loading: boolean
-  /* keyboard 默认第一个位置 */
-  willActiveIndex: number | null
-}
-
-// @todo keydown item disabled
-// 目前全键盘还没有这种场景，暂时不管
-class MoreSelectBase<V extends string | number = string> extends Component<
-  MoreSelectBaseProps<V>,
-  MoreSelectBaseState
-> {
-  static renderListFilterDefault = renderListFilterDefault
-  static renderListFilterPinYin = renderListFilterPinYin
-
-  readonly state: MoreSelectBaseState = {
-    searchValue: '',
-    loading: false,
-    willActiveIndex: this.props.isKeyboard ? 0 : null,
-  }
-
-  private _isUnmounted = false
-  private _baseRef = createRef<HTMLDivElement>()
-  private _selectionRef = createRef<HTMLDivElement>()
-  private _popoverRef = createRef<Popover>()
-  private _inputRef = createRef<HTMLInputElement>()
-
-  private _filterData: MoreSelectGroupDataItem<V>[] | undefined
-
-  constructor(props: MoreSelectBaseProps<V>) {
-    super(props)
-    if (props.selected?.length) {
-      this._getFilterData()
-      const flatList = this._getFlatFilterData()
-      this.state.willActiveIndex = flatList.findIndex(
-        (v) => v.value === props.selected[0].value
-      )
-    }
-  }
-
-  componentWillUnmount() {
-    this._isUnmounted = false
-  }
-
-  public apiDoFocus = (): void => {
-    // 唤起 popover，input autoFocus 会自动聚焦，但是这种方式本质是显示 UI
-    // this.popoverRef.current.apiDoSetActive(true)
-
-    // focus更符合直觉
-    // eslint-disable-next-line react/no-find-dom-node
-    ;(findDOMNode(this._selectionRef.current) as HTMLDivElement).focus()
-  }
-
-  public apiDoSelectWillActive = (): void => {
-    const { selected = [], onSelect = _.noop, multiple } = this.props
-    const { willActiveIndex } = this.state
-    const flatList = this._getFlatFilterData()
-    // 没有做过键盘操作啥也不做
-    if (!_.isNil(willActiveIndex) && willActiveIndex < flatList.length) {
-      if (multiple) {
-        onSelect(_.uniqBy([...selected, flatList[willActiveIndex]], (item) => item.value))
-      } else {
-        onSelect([flatList[willActiveIndex]])
-      }
-    }
-  }
-
-  private _getFlatFilterData = (): MoreSelectDataItem<V>[] => {
-    return _.flatMap(this._filterData, (v) => v.children)
-  }
-
-  private _handleSelect = (values: V[]): void => {
-    const { onSelect = _.noop, data = [], multiple, selected = [] } = this.props
-
-    const items: MoreSelectDataItem<V>[] = []
-    data.forEach((group) => {
-      group.children.forEach((child) => {
-        if (values.includes(child.value)) {
-          items.push(child)
-        }
-      })
-    })
-    selected.forEach((item) => {
-      let flag = true // 判断当前已选择的选项中是否存在不在当前data里面的，解决onSearch异步，true则表示都不在data里面
-      data.forEach((group) => {
-        flag = flag && group.children.every((v) => v.value !== item.value)
-      })
-      if (flag) {
-        items.push(item)
-      }
-    })
-    onSelect(items)
-
-    if (!multiple) {
-      // 单选后关闭
-      // 要异步
-      window.setTimeout(() => {
-        if (!this._isUnmounted && this._popoverRef.current) {
-          this._popoverRef.current.apiDoSetActive(false)
-        }
-      }, 0)
-    }
-  }
-
-  public _handleChange = (
-    event: ChangeEvent<HTMLInputElement>,
-    isInitSearch?: boolean
-  ): void => {
-    const searchValue = event.target.value
-    this.setState({ searchValue })
-    this._debounceDoSearch(searchValue)
-    setTimeout(() => {
-      // eslint-disable-next-line no-unused-expressions
-      isInitSearch && this._inputRef.current?.select()
-      if (this.props.searchOnActive) {
-        localStorage.setItem('_GM-PC_MORESELECT_SEARCHVALUE', this.state.searchValue)
-      }
-    }, 100)
-  }
-
-  private _doSearch = (query: string): void => {
-    const { onSearch, data = [] } = this.props
-    if (!this._isUnmounted && onSearch) {
-      const result = onSearch(query, data)
-      if (!result) {
-        return
-      }
-      this.setState({ loading: true })
-
-      Promise.resolve(result).finally(() => {
-        this.setState({ loading: false })
-      })
-    }
-  }
-
-  private _debounceDoSearch = _.debounce(this._doSearch, this.props.delay)
-
-  private _handleClear = (clearItem: MoreSelectDataItem<V>, event: MouseEvent): void => {
-    event.stopPropagation()
-    const { onSelect = _.noop, selected = [] } = this.props
-    const willSelected = selected.filter((item) => item.value !== clearItem.value)
-    onSelect(willSelected)
-  }
-
-  private _handlePopupKeyDown = (event: KeyboardEvent): void => {
-    const { onKeyDown } = this.props
-    let willActiveIndex = this.state.willActiveIndex as number
-    if (!onKeyDown) {
-      // 没有事件的不用拦截
-      return
-    }
-    // 不是上下方向键不用拦截
-    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
-      onKeyDown(event)
-      return
-    }
-    const flatList = this._getFlatFilterData()
-    // 没有过滤数据，不用拦截
-    if (!flatList.length) {
-      onKeyDown(event)
-      return
-    }
-
-    if (event.key === 'ArrowUp') {
-      willActiveIndex--
-    } else if (event.key === 'ArrowDown') {
-      willActiveIndex++
-    }
-
-    // 修正
-    if (willActiveIndex < 0) {
-      willActiveIndex = flatList.length - 1
-    } else if (willActiveIndex > flatList.length - 1) {
-      willActiveIndex = 0
-    }
-    this.setState({ willActiveIndex })
-  }
-
-  private _getFilterData = () => {
-    const { data = [], renderListFilter, renderListFilterType } = this.props
-    const { searchValue } = this.state
-    let filterData: MoreSelectGroupDataItem<V>[]
-    if (renderListFilter) {
-      filterData = renderListFilter(data, searchValue)
-    } else if (renderListFilterType === 'pinyin') {
-      filterData = renderListFilterPinYin(data, searchValue)
-    } else {
-      filterData = renderListFilterDefault(data, searchValue)
-    }
-    this._filterData = filterData
-    return filterData
-  }
-
-  private _renderEmpty = (): ReactNode => {
-    const { renderEmpty } = this.props
-
-    if (typeof renderEmpty === 'function') {
-      const result = renderEmpty(this.state.searchValue)
-      if (result !== undefined) {
-        return result
-      }
-    }
-
-    return (
-      <Flex alignCenter justifyCenter className='gm-bg gm-padding-5 gm-text-desc'>
-        {getLocale('没有数据')}
-      </Flex>
-    )
-  }
-
-  private _renderList = (config: ConfigProviderProps): ReactNode => {
-    const {
-      selected = [],
-      multiple,
-      isGroupList,
-      renderListItem,
-      searchPlaceholder,
-      listHeight,
-      popupClassName,
-      renderCustomizedBottom,
-    } = this.props
-    const { loading, searchValue, willActiveIndex } = this.state
-    const filterData = this._getFilterData()
-    return (
-      <ConfigProvider {...config}>
-        <div
-          className={classNames('gm-more-select-popup', popupClassName)}
-          onKeyDown={this._handlePopupKeyDown}
-        >
-          <div className='gm-more-select-popup-input'>
-            <Input
-              ref={this._inputRef}
-              autoFocus
-              value={searchValue}
-              onChange={this._handleChange}
-              placeholder={searchPlaceholder}
-            />
-          </div>
-          <div style={{ height: listHeight }}>
-            {loading && (
-              <Flex alignCenter justifyCenter className='gm-bg gm-padding-5'>
-                <Loading size='20px' />
-              </Flex>
-            )}
-            {!loading && !filterData.length && this._renderEmpty()}
-            {!loading && !!filterData.length && (
-              <ListBase
-                selected={selected.map((v) => v.value)}
-                data={filterData}
-                multiple={multiple}
-                isGroupList={isGroupList}
-                className='gm-border-0'
-                renderItem={renderListItem}
-                onSelect={this._handleSelect}
-                isScrollTo
-                willActiveIndex={willActiveIndex!}
-                style={{ height: listHeight }}
-              />
-            )}
-          </div>
-          {!loading &&
-            !!filterData.length &&
-            renderCustomizedBottom &&
-            renderCustomizedBottom(this._popoverRef)}
-        </div>
-      </ConfigProvider>
-    )
-  }
-
-  private _handleMoreSelectClick = () => {
-    const { onClick, selected } = this.props
-    if (typeof onClick === 'function') {
-      return onClick(selected)
-    }
-  }
-
-  private _handlePopoverVisibleChange = (active: boolean) => {
-    if (active && this.props.searchOnActive) {
-      const searchValue = localStorage.getItem('_GM-PC_MORESELECT_SEARCHVALUE')
-      if (searchValue) {
-        this.setState({ searchValue })
-        setTimeout(() => {
-          // eslint-disable-next-line no-unused-expressions
-          this._inputRef.current?.select()
-          this._debounceDoSearch(searchValue)
-        }, 0)
-      }
-    }
-  }
-
-  render() {
-    const {
-      isInPopup,
-      disabled,
-      disabledClose,
-      selected = [],
-      multiple,
-      placeholder,
-      renderSelected,
-      className,
-      style,
-      popoverType,
-      children,
-    } = this.props
-    return (
-      <ConfigConsumer>
-        {(config) => (
-          <div
-            ref={this._baseRef}
-            onClick={this._handleMoreSelectClick}
-            className={classNames(
-              'gm-more-select',
-              {
-                disabled,
-                'gm-more-select-multiple': multiple,
-              },
-              className
-            )}
-            style={style}
-          >
-            <Popover
-              ref={this._popoverRef}
-              type={popoverType}
-              popup={() => this._renderList(config)}
-              disabled={disabled}
-              isInPopup={isInPopup}
-              onVisibleChange={this._handlePopoverVisibleChange}
-            >
-              {children ?? (
-                <Flex
-                  ref={this._selectionRef}
-                  tabIndex={0}
-                  wrap
-                  className='gm-more-select-selected'
-                >
-                  {selected.length !== 0 ? (
-                    selected.map((item) => (
-                      <Flex
-                        key={item.value as any}
-                        className='gm-more-select-selected-item'
-                      >
-                        <Popover
-                          disabled={!this.props.isKeyboard}
-                          type='hover'
-                          popup={<div className='gm-padding-10'>{item.text}</div>}
-                        >
-                          <Flex flex column>
-                            {renderSelected!(item)}
-                          </Flex>
-                        </Popover>
-                        {multiple ? (
-                          <SVGRemove
-                            className='gm-cursor gm-more-select-clear-btn'
-                            onClick={
-                              disabled ? _.noop : this._handleClear.bind(this, item)
-                            }
-                          />
-                        ) : (
-                          !disabledClose && ( // 是否不限时清除按钮，仅单选可用
-                            <SVGCloseCircle
-                              onClick={
-                                disabled ? _.noop : this._handleClear.bind(this, item)
-                              }
-                              className='gm-cursor gm-more-select-clear-btn'
-                            />
-                          )
-                        )}
-                      </Flex>
-                    ))
-                  ) : (
-                    // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
-                    <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
-                  )}
-                </Flex>
-              )}
-            </Popover>
-          </div>
-        )}
-      </ConfigConsumer>
-    )
-  }
-}
-
-export default MoreSelectBase
+import React, {
+  ChangeEvent,
+  Component,
+  createRef,
+  MouseEvent,
+  ReactNode,
+  KeyboardEvent,
+} from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { MoreSelectBaseProps, MoreSelectGroupDataItem, MoreSelectDataItem } from './types'
+import { Popover } from '../popover'
+import { Flex } from '../flex'
+import SVGRemove from '../../svg/remove.svg'
+import SVGCloseCircle from '../../svg/close-circle.svg'
+import { renderListFilterDefault, renderListFilterPinYin } from './render_list_filter'
+import { Input } from '../input'
+import { Loading } from '../loading'
+import { getLocale } from '@gm-pc/locales'
+import { ListBase } from '../list'
+import { findDOMNode } from 'react-dom'
+import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
+
+interface MoreSelectBaseState {
+  searchValue: string
+  loading: boolean
+  /* keyboard 默认第一个位置 */
+  willActiveIndex: number | null
+}
+
+// @todo keydown item disabled
+// 目前全键盘还没有这种场景，暂时不管
+class MoreSelectBase<V extends string | number = string> extends Component<
+  MoreSelectBaseProps<V>,
+  MoreSelectBaseState
+> {
+  static renderListFilterDefault = renderListFilterDefault
+  static renderListFilterPinYin = renderListFilterPinYin
+
+  readonly state: MoreSelectBaseState = {
+    searchValue: '',
+    loading: false,
+    willActiveIndex: this.props.isKeyboard ? 0 : null,
+  }
+
+  private _isUnmounted = false
+  private _baseRef = createRef<HTMLDivElement>()
+  private _selectionRef = createRef<HTMLDivElement>()
+  private _popoverRef = createRef<Popover>()
+  private _inputRef = createRef<HTMLInputElement>()
+
+  private _filterData: MoreSelectGroupDataItem<V>[] | undefined
+
+  constructor(props: MoreSelectBaseProps<V>) {
+    super(props)
+    if (props.selected?.length) {
+      this._getFilterData()
+      const flatList = this._getFlatFilterData()
+      this.state.willActiveIndex = flatList.findIndex(
+        (v) => v.value === props.selected[0].value
+      )
+    }
+  }
+
+  componentWillUnmount() {
+    this._isUnmounted = false
+  }
+
+  public apiDoFocus = (): void => {
+    // 唤起 popover，input autoFocus 会自动聚焦，但是这种方式本质是显示 UI
+    // this.popoverRef.current.apiDoSetActive(true)
+
+    // focus更符合直觉
+    // eslint-disable-next-line react/no-find-dom-node
+    ;(findDOMNode(this._selectionRef.current) as HTMLDivElement).focus()
+  }
+
+  public apiDoSelectWillActive = (): void => {
+    const { selected = [], onSelect = _.noop, multiple } = this.props
+    const { willActiveIndex } = this.state
+    const flatList = this._getFlatFilterData()
+    // 没有做过键盘操作啥也不做
+    if (!_.isNil(willActiveIndex) && willActiveIndex < flatList.length) {
+      if (multiple) {
+        onSelect(_.uniqBy([...selected, flatList[willActiveIndex]], (item) => item.value))
+      } else {
+        onSelect([flatList[willActiveIndex]])
+      }
+    }
+  }
+
+  private _getFlatFilterData = (): MoreSelectDataItem<V>[] => {
+    return _.flatMap(this._filterData, (v) => v.children)
+  }
+
+  private _handleSelect = (values: V[]): void => {
+    const { onSelect = _.noop, data = [], multiple, selected = [] } = this.props
+
+    const items: MoreSelectDataItem<V>[] = []
+    data.forEach((group) => {
+      group.children.forEach((child) => {
+        if (values.includes(child.value)) {
+          items.push(child)
+        }
+      })
+    })
+    selected.forEach((item) => {
+      let flag = true // 判断当前已选择的选项中是否存在不在当前data里面的，解决onSearch异步，true则表示都不在data里面
+      data.forEach((group) => {
+        flag = flag && group.children.every((v) => v.value !== item.value)
+      })
+      if (flag) {
+        items.push(item)
+      }
+    })
+    onSelect(items)
+
+    if (!multiple) {
+      // 单选后关闭
+      // 要异步
+      window.setTimeout(() => {
+        if (!this._isUnmounted && this._popoverRef.current) {
+          this._popoverRef.current.apiDoSetActive(false)
+        }
+      }, 0)
+    }
+  }
+
+  public _handleChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    isInitSearch?: boolean
+  ): void => {
+    const searchValue = event.target.value
+    this.setState({ searchValue })
+    this._debounceDoSearch(searchValue)
+    setTimeout(() => {
+      // eslint-disable-next-line no-unused-expressions
+      isInitSearch && this._inputRef.current?.select()
+      if (this.props.searchOnActive) {
+        localStorage.setItem('_GM-PC_MORESELECT_SEARCHVALUE', this.state.searchValue)
+      }
+    }, 100)
+  }
+
+  private _doSearch = (query: string): void => {
+    const { onSearch, data = [] } = this.props
+    if (!this._isUnmounted && onSearch) {
+      const result = onSearch(query, data)
+      if (!result) {
+        return
+      }
+      this.setState({ loading: true })
+
+      Promise.resolve(result).finally(() => {
+        this.setState({ loading: false })
+      })
+    }
+  }
+
+  private _debounceDoSearch = _.debounce(this._doSearch, this.props.delay)
+
+  private _handleClear = (clearItem: MoreSelectDataItem<V>, event: MouseEvent): void => {
+    event.stopPropagation()
+    const { onSelect = _.noop, selected = [] } = this.props
+    const willSelected = selected.filter((item) => item.value !== clearItem.value)
+    onSelect(willSelected)
+  }
+
+  private _handlePopupKeyDown = (event: KeyboardEvent): void => {
+    const { onKeyDown } = this.props
+    let willActiveIndex = this.state.willActiveIndex as number
+    if (!onKeyDown) {
+      // 没有事件的不用拦截
+      return
+    }
+    // 不是上下方向键不用拦截
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+      onKeyDown(event)
+      return
+    }
+    const flatList = this._getFlatFilterData()
+    // 没有过滤数据，不用拦截
+    if (!flatList.length) {
+      onKeyDown(event)
+      return
+    }
+
+    if (event.key === 'ArrowUp') {
+      willActiveIndex--
+    } else if (event.key === 'ArrowDown') {
+      willActiveIndex++
+    }
+
+    // 修正
+    if (willActiveIndex < 0) {
+      willActiveIndex = flatList.length - 1
+    } else if (willActiveIndex > flatList.length - 1) {
+      willActiveIndex = 0
+    }
+    this.setState({ willActiveIndex })
+  }
+
+  private _getFilterData = () => {
+    const { data = [], renderListFilter, renderListFilterType } = this.props
+    const { searchValue } = this.state
+    let filterData: MoreSelectGroupDataItem<V>[]
+    if (renderListFilter) {
+      filterData = renderListFilter(data, searchValue)
+    } else if (renderListFilterType === 'pinyin') {
+      filterData = renderListFilterPinYin(data, searchValue)
+    } else {
+      filterData = renderListFilterDefault(data, searchValue)
+    }
+    this._filterData = filterData
+    return filterData
+  }
+
+  private _renderEmpty = (): ReactNode => {
+    const { renderEmpty } = this.props
+
+    if (typeof renderEmpty === 'function') {
+      const result = renderEmpty(this.state.searchValue)
+      if (result !== undefined) {
+        return result
+      }
+    }
+
+    return (
+      <Flex alignCenter justifyCenter className='gm-bg gm-padding-5 gm-text-desc'>
+        {getLocale('没有数据')}
+      </Flex>
+    )
+  }
+
+  private _renderList = (config: ConfigProviderProps): ReactNode => {
+    const {
+      selected = [],
+      multiple,
+      isGroupList,
+      renderListItem,
+      searchPlaceholder,
+      listHeight,
+      popupClassName,
+      renderCustomizedBottom,
+    } = this.props
+    const { loading, searchValue, willActiveIndex } = this.state
+    const filterData = this._getFilterData()
+    return (
+      <ConfigProvider {...config}>
+        <div
+          className={classNames('gm-more-select-popup', popupClassName)}
+          onKeyDown={this._handlePopupKeyDown}
+        >
+          <div className='gm-more-select-popup-input'>
+            <Input
+              ref={this._inputRef}
+              autoFocus
+              value={searchValue}
+              onChange={this._handleChange}
+              placeholder={searchPlaceholder}
+            />
+          </div>
+          <div style={{ height: listHeight }}>
+            {loading && (
+              <Flex alignCenter justifyCenter className='gm-bg gm-padding-5'>
+                <Loading size='20px' />
+              </Flex>
+            )}
+            {!loading && !filterData.length && this._renderEmpty()}
+            {!loading && !!filterData.length && (
+              <ListBase
+                selected={selected.map((v) => v.value)}
+                data={filterData}
+                multiple={multiple}
+                isGroupList={isGroupList}
+                className='gm-border-0'
+                renderItem={renderListItem}
+                onSelect={this._handleSelect}
+                isScrollTo
+                willActiveIndex={willActiveIndex!}
+                style={{ height: listHeight }}
+              />
+            )}
+          </div>
+          {!loading &&
+            !!filterData.length &&
+            renderCustomizedBottom &&
+            renderCustomizedBottom(this._popoverRef)}
+        </div>
+      </ConfigProvider>
+    )
+  }
+
+  private _handleMoreSelectClick = () => {
+    const { onClick, selected } = this.props
+    if (typeof onClick === 'function') {
+      return onClick(selected)
+    }
+  }
+
+  private _handlePopoverVisibleChange = (active: boolean) => {
+    if (active && this.props.searchOnActive) {
+      const searchValue = localStorage.getItem('_GM-PC_MORESELECT_SEARCHVALUE')
+      if (searchValue) {
+        this.setState({ searchValue })
+        setTimeout(() => {
+          // eslint-disable-next-line no-unused-expressions
+          this._inputRef.current?.select()
+          this._debounceDoSearch(searchValue)
+        }, 0)
+      }
+    }
+  }
+
+  render() {
+    const {
+      isInPopup,
+      disabled,
+      disabledClose,
+      selected = [],
+      multiple,
+      placeholder,
+      renderSelected,
+      className,
+      style,
+      popoverType,
+      children,
+    } = this.props
+    return (
+      <ConfigConsumer>
+        {(config) => (
+          <div
+            ref={this._baseRef}
+            onClick={this._handleMoreSelectClick}
+            className={classNames(
+              'gm-more-select',
+              {
+                disabled,
+                'gm-more-select-multiple': multiple,
+              },
+              className
+            )}
+            style={style}
+          >
+            <Popover
+              ref={this._popoverRef}
+              type={popoverType}
+              popup={() => this._renderList(config)}
+              disabled={disabled}
+              isInPopup={isInPopup}
+              onVisibleChange={this._handlePopoverVisibleChange}
+            >
+              {children ?? (
+                <Flex
+                  ref={this._selectionRef}
+                  tabIndex={0}
+                  wrap
+                  className='gm-more-select-selected'
+                >
+                  {selected.length !== 0 ? (
+                    selected.map((item) => (
+                      <Flex
+                        key={item.value as any}
+                        className='gm-more-select-selected-item'
+                      >
+                        <Popover
+                          disabled={!this.props.isKeyboard}
+                          type='hover'
+                          popup={<div className='gm-padding-10'>{item.text}</div>}
+                        >
+                          <Flex flex column>
+                            {renderSelected!(item)}
+                          </Flex>
+                        </Popover>
+                        {multiple ? (
+                          <SVGRemove
+                            className='gm-cursor gm-more-select-clear-btn'
+                            onClick={
+                              disabled ? _.noop : this._handleClear.bind(this, item)
+                            }
+                          />
+                        ) : (
+                          !disabledClose && ( // 是否不限时清除按钮，仅单选可用
+                            <SVGCloseCircle
+                              onClick={
+                                disabled ? _.noop : this._handleClear.bind(this, item)
+                              }
+                              className='gm-cursor gm-more-select-clear-btn'
+                            />
+                          )
+                        )}
+                      </Flex>
+                    ))
+                  ) : (
+                    // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
+                    <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
+                  )}
+                </Flex>
+              )}
+            </Popover>
+          </div>
+        )}
+      </ConfigConsumer>
+    )
+  }
+}
+
+export default MoreSelectBase