@gm-pc/react 1.27.5-beta.0 → 1.28.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.27.5-beta.0",
+  "version": "1.28.0-beta.0",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.27.5-beta.0",
+    "@gm-pc/locales": "^1.28.0-beta.0",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "62f3bf16794e2d1778f97dc45c342746b9ea53f9"
+  "gitHead": "107461a0dd5c644e10482ed5f3ed8638fee436cc"
 }

package/src/component/loading/types.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react'
 
 interface LoadingProps {
   size?: string
-  type: any
+  type?: any
 }
 
 interface LoadingChunkProps extends HTMLAttributes<HTMLDivElement> {

package/src/component/more_select/base.tsx

@@ -20,13 +20,16 @@ import { getLocale } from '@gm-pc/locales'
 import { ListBase } from '../list'
 import { findDOMNode } from 'react-dom'
 import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
+import { Checkbox, Switch } from '@gm-pc/react'
 
 interface MoreSelectBaseState {
-  searchValue: string | undefined
+  searchValue: string
   loading: boolean
   /* keyboard 默认第一个位置 */
   willActiveIndex: number | null
-  isOpen: boolean
+  isCheckedAll: boolean
+  isFilterDelete: boolean
+  displayCount: number
 }
 
 // @todo keydown item disabled
@@ -39,10 +42,12 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   static renderListFilterPinYin = renderListFilterPinYin
 
   readonly state: MoreSelectBaseState = {
-    searchValue: (undefined as unknown) as string,
+    searchValue: '',
     loading: false,
     willActiveIndex: this.props.isKeyboard ? 0 : null,
-    isOpen: false,
+    isCheckedAll: false,
+    isFilterDelete: false,
+    displayCount: 0,
   }
 
   private _isUnmounted = false
@@ -50,6 +55,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   private _selectionRef = createRef<HTMLDivElement>()
   private _popoverRef = createRef<Popover>()
   private _inputRef = createRef<HTMLInputElement>()
+  private _resizeObserver: ResizeObserver | null = null
 
   private _filterData: MoreSelectGroupDataItem<V>[] | undefined
 
@@ -64,8 +70,44 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     }
   }
 
+  componentDidMount() {
+    const { maxTagCount } = this.props
+    if (maxTagCount === 'responsive' && this._selectionRef.current) {
+      // HACK: 首次计算
+      setTimeout(() => {
+        if (this._selectionRef.current) {
+          const { width } = this._selectionRef.current.getBoundingClientRect()
+          const omittedTagWidth = 50 // for "+N..."
+          const availableWidth = width - omittedTagWidth
+          const newDisplayCount = Math.floor(availableWidth / 80)
+          if (this.state.displayCount !== newDisplayCount) {
+            this.setState({ displayCount: newDisplayCount > 0 ? newDisplayCount : 0 })
+          }
+        }
+      }, 0)
+
+      this._resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { width } = entry.contentRect
+          // Estimate item width, let's say 80px.
+          const omittedTagWidth = 50 // for "+N..."
+          const availableWidth = width - omittedTagWidth
+          const newDisplayCount = Math.floor(availableWidth / 80)
+
+          if (this.state.displayCount !== newDisplayCount) {
+            this.setState({ displayCount: newDisplayCount > 0 ? newDisplayCount : 0 })
+          }
+        }
+      })
+      this._resizeObserver.observe(this._selectionRef.current)
+    }
+  }
+
   componentWillUnmount() {
-    this._isUnmounted = false
+    this._isUnmounted = true
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect()
+    }
   }
 
   public apiDoFocus = (): void => {
@@ -135,10 +177,6 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     const searchValue = event.target.value
     this.setState({ searchValue })
     this._debounceDoSearch(searchValue)
-    if (this.props.isSameAntd) {
-      // eslint-disable-next-line no-unused-expressions
-      this._popoverRef.current?.apiDoSetActive(true)
-    }
     setTimeout(() => {
       // eslint-disable-next-line no-unused-expressions
       isInitSearch && this._inputRef.current?.select()
@@ -172,7 +210,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     onSelect(willSelected)
   }
 
-  private _handlePopupKeyDown = (event: KeyboardEvent): void => {
+  private _handlePopupKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
     const { onKeyDown } = this.props
     let willActiveIndex = this.state.willActiveIndex as number
     if (!onKeyDown) {
@@ -238,19 +276,81 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     )
   }
 
-  private _renderSearchInput = () => {
-    const { searchPlaceholder } = this.props
-    const { searchValue } = this.state
+  renderBottom = () => {
+    const {
+      selected = [],
+      isShowDeletedSwitch = true,
+      isShowCheckedAll = true,
+    } = this.props
+    const { isCheckedAll, isFilterDelete } = this.state
+    const flatFilterData = this._getFlatFilterData()
+
+    // 根据过滤状态决定是否过滤已删除商品
+    const availableData = isFilterDelete
+      ? flatFilterData.filter((item) => !item.deleted)
+      : flatFilterData
+
+    // 检查是否所有可用数据都被选中
+    const allSelected =
+      availableData.length > 0 &&
+      availableData.every((item) =>
+        selected.some((selectedItem) => selectedItem.value === item.value)
+      )
+
     return (
-      <div className='gm-more-select-popup-input'>
-        <Input
-          ref={this._inputRef}
-          autoFocus
-          value={searchValue}
-          onChange={this._handleChange}
-          placeholder={searchPlaceholder}
-        />
-      </div>
+      <Flex
+        justifyBetween
+        className='tw-p-[8px]'
+        alignCenter
+        style={{ borderTop: '1px solid #aeaeae' }}
+      >
+        {isShowCheckedAll && (
+          <Checkbox
+            checked={allSelected}
+            onChange={(e) => {
+              const isChecked = e.target.checked
+              this.setState({
+                isCheckedAll: isChecked,
+              })
+
+              if (isChecked) {
+                // 全选当前过滤后的可用数据
+                const valuesToSelect = availableData.map((item) => item.value)
+                this._handleSelect(valuesToSelect)
+              } else {
+                // 取消全选
+                this._handleSelect([])
+              }
+            }}
+          >
+            全选
+          </Checkbox>
+        )}
+        {isShowDeletedSwitch && (
+          <Flex alignCenter>
+            <Flex row>
+              <Switch
+                style={{ width: 48 }}
+                checked={isFilterDelete}
+                onChange={(open) => {
+                  this.setState({
+                    isFilterDelete: open,
+                  })
+                  if (isCheckedAll) {
+                    const newAvailableData = open
+                      ? flatFilterData.filter((item) => !item.deleted)
+                      : flatFilterData
+
+                    const valuesToSelect = newAvailableData.map((item) => item.value)
+                    this._handleSelect(valuesToSelect)
+                  }
+                }}
+              />
+            </Flex>
+            <span className='gm-margin-left-5'>过滤已删除商品</span>
+          </Flex>
+        )}
+      </Flex>
     )
   }
 
@@ -260,20 +360,40 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       multiple,
       isGroupList,
       renderListItem,
+      searchPlaceholder,
       listHeight,
       popupClassName,
       renderCustomizedBottom,
-      isSameAntd = false,
+      isRenderDefaultBottom = false,
     } = this.props
-    const { loading, willActiveIndex } = this.state
-    const filterData = this._getFilterData()
+    const { loading, searchValue, willActiveIndex, isFilterDelete } = this.state
+    let filterData = this._getFilterData()
+
+    // 如果开启了过滤已删除商品功能，需要过滤掉已删除的商品
+    if (isFilterDelete) {
+      filterData = filterData
+        .map((group) => ({
+          ...group,
+          children: group.children.filter((item) => !item.deleted),
+        }))
+        .filter((group) => group.children.length > 0)
+    }
+
     return (
       <ConfigProvider {...config}>
         <div
           className={classNames('gm-more-select-popup', popupClassName)}
           onKeyDown={this._handlePopupKeyDown}
         >
-          {isSameAntd ? null : this._renderSearchInput()}
+          <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'>
@@ -298,8 +418,11 @@ class MoreSelectBase<V extends string | number = string> extends Component<
           </div>
           {!loading &&
             !!filterData.length &&
-            renderCustomizedBottom &&
-            renderCustomizedBottom(this._popoverRef)}
+            (renderCustomizedBottom
+              ? renderCustomizedBottom(this._popoverRef, this.renderBottom)
+              : isRenderDefaultBottom
+              ? this.renderBottom()
+              : null)}
         </div>
       </ConfigProvider>
     )
@@ -313,16 +436,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   }
 
   private _handlePopoverVisibleChange = (active: boolean) => {
-    if (this.props.isSameAntd) {
-      this.setState({
-        isOpen: active,
-      })
-      if (!this.props.multiple && !active) {
-        this.setState({ searchValue: undefined })
-      }
-    }
-
-    if (active && this.props.searchOnActive && !this.props.isSameAntd) {
+    if (active && this.props.searchOnActive) {
       const searchValue = localStorage.getItem('_GM-PC_MORESELECT_SEARCHVALUE')
       if (searchValue) {
         this.setState({ searchValue })
@@ -348,10 +462,90 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       style,
       popoverType,
       children,
-      searchPlaceholder,
-      isSameAntd = false,
+      maxTagCount,
+      maxTagPlaceholder,
+      isRenderDefaultBottom = false,
     } = this.props
-    const { searchValue } = this.state
+
+    // 处理 maxTagCount 逻辑
+    const renderSelectedItems = () => {
+      if (!multiple || !maxTagCount || selected.length === 0) {
+        return 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>
+        ))
+      }
+
+      // 处理 maxTagCount 逻辑
+      const isResponsive = maxTagCount === 'responsive'
+      let displayCount: number
+
+      if (isResponsive) {
+        displayCount = this.state.displayCount
+      } else {
+        displayCount = maxTagCount as number
+      }
+
+      const itemsToShow = selected.slice(0, displayCount)
+      const omittedItems = selected.slice(displayCount)
+      const omittedCount = selected.length - displayCount
+
+      return (
+        <>
+          {itemsToShow.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>
+              <SVGRemove
+                className='gm-cursor gm-more-select-clear-btn'
+                onClick={disabled ? _.noop : this._handleClear.bind(this, item)}
+              />
+            </Flex>
+          ))}
+          {omittedCount > 0 && (
+            <Flex
+              key='omitted'
+              className='gm-more-select-selected-item gm-more-select-omitted-item'
+            >
+              {maxTagPlaceholder ? (
+                maxTagPlaceholder(omittedItems, omittedCount)
+              ) : (
+                <span className='gm-more-select-omitted-count'>+{omittedCount}...</span>
+              )}
+            </Flex>
+          )}
+        </>
+      )
+    }
 
     return (
       <ConfigConsumer>
@@ -367,15 +561,13 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               },
               className
             )}
-            style={style}
+            style={style as any}
           >
             <Popover
               ref={this._popoverRef}
               type={popoverType}
               popup={() => this._renderList(config)}
-              disabled={
-                disabled || (!isSameAntd ? false : this.state.searchValue === undefined)
-              }
+              disabled={disabled}
               isInPopup={isInPopup}
               onVisibleChange={this._handlePopoverVisibleChange}
             >
@@ -384,78 +576,13 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                   ref={this._selectionRef}
                   tabIndex={0}
                   wrap
-                  className={classNames({
-                    'gm-more-select-selected': true,
-                    'gm-more-select-selected-antd': isSameAntd,
-                  })}
+                  className='gm-more-select-selected'
                 >
                   {selected.length !== 0 ? (
-                    selected.map((item) => (
-                      <Flex
-                        key={item.value as any}
-                        className='gm-more-select-selected-item'
-                        alignCenter
-                      >
-                        <Popover
-                          disabled={!this.props.isKeyboard}
-                          type='hover'
-                          popup={<div className='gm-padding-10'>{item.text}</div>}
-                        >
-                          <Flex flex column>
-                            {isSameAntd ? (
-                              <div className='gm-more-select-popup-input'>
-                                <Input
-                                  ref={this._inputRef}
-                                  value={
-                                    !this.state.isOpen
-                                      ? renderSelected!(item)
-                                      : searchValue
-                                  }
-                                  onChange={this._handleChange}
-                                  placeholder={searchPlaceholder}
-                                  className='gm-more-select-popup-input-no-border'
-                                />
-                              </div>
-                            ) : (
-                              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>
-                    ))
+                    renderSelectedItems()
                   ) : (
                     // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
-                    <>
-                      {isSameAntd ? (
-                        <Input
-                          ref={this._inputRef}
-                          value={searchValue}
-                          onChange={this._handleChange}
-                          placeholder={searchPlaceholder}
-                          className='gm-more-select-popup-input-no-border'
-                        />
-                      ) : (
-                        <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
-                      )}
-                    </>
-                    //
+                    <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
                   )}
                 </Flex>
               )}

package/src/component/more_select/more_select.tsx

@@ -85,6 +85,8 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
       onSearch,
       onClick,
       renderListFilter,
+      maxTagCount,
+      maxTagPlaceholder,
       ...rest
     } = this.props
     let tempSelect = selected as MoreSelectDataItem<V>[]
@@ -129,6 +131,8 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
         isGroupList={isGroupList}
         onSearch={onSearch && this._handleSearch}
         renderListFilter={renderListFilter && this._renderListFilter}
+        maxTagCount={maxTagCount}
+        maxTagPlaceholder={maxTagPlaceholder}
       />
     )
   }

package/src/component/more_select/stories.tsx

@@ -318,6 +318,98 @@ export const ComMoreSelectWithIsGroupListMultiple = () => (
   />
 )
 
+export const ComMoreSelectWithMaxTagCount = () => {
+  // 创建一个包含多个选项的数据集
+  const manyOptions = [
+    { value: 1, text: '选项1' },
+    { value: 2, text: '选项2' },
+    { value: 3, text: '选项3' },
+    { value: 4, text: '选项4' },
+    { value: 5, text: '选项5' },
+    { value: 6, text: '选项6' },
+    { value: 7, text: '选项7' },
+    { value: 8, text: '选项8' },
+  ]
+
+  // 预选多个选项
+  const preSelected = manyOptions.slice(0, 6)
+
+  return (
+    <div style={{ width: '300px' }}>
+      <h3>maxTagCount 示例</h3>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>不使用 maxTagCount（显示所有选项）</h4>
+        <MoreSelect<number>
+          multiple
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('不限制显示数量:', selected)
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>maxTagCount={2}（最多显示2个选项）</h4>
+        <MoreSelect<number>
+          multiple
+          maxTagCount={2}
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('最多显示2个:', selected)
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>maxTagCount={3}（最多显示3个选项）</h4>
+        <MoreSelect<number>
+          multiple
+          maxTagCount={3}
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('最多显示3个:', selected)
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>maxTagCount=responsive（响应式模式）</h4>
+        <MoreSelect<number>
+          multiple
+          maxTagCount='responsive'
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('响应式模式:', selected)
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>自定义 maxTagPlaceholder</h4>
+        <MoreSelect<number>
+          multiple
+          maxTagCount={2}
+          maxTagPlaceholder={(omittedValues, omittedCount) => (
+            <span style={{ color: '#1890ff', fontWeight: 'bold' }}>
+              还有{omittedCount}项未显示
+            </span>
+          )}
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('自定义占位符:', selected)
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
 export default {
   title: '表单/MoreSelect',
 }

package/src/component/more_select/style.less

@@ -14,15 +14,10 @@
     }
   }
 
-  .gm-more-select-selected-antd {
-    padding: 0 12px;
-  }
-
   .gm-more-select-clear-btn {
     position: absolute;
-    right: 4px;
-    top: 50%;
-    transform: translateY(-50%);
+    right: 5px;
+    top: 7px;
     cursor: pointer;
     color: var(--gm-color-desc);
   }
@@ -75,10 +70,3 @@
     }
   }
 }
-
-.gm-more-select-popup-input-no-border {
-  border: none !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
-  box-shadow: none !important;
-}

package/src/component/more_select/types.ts

@@ -1,11 +1,13 @@
-import { Popover } from '@gm-pc/react'
 import { CSSProperties, ReactNode, KeyboardEvent } from 'react'
+import { Popover } from '../popover'
 
 /** 普通的数据格式 */
 interface MoreSelectDataItem<V extends string | number = string> {
   value: V
   text: string
   disabled?: boolean
+  /** 是否已删除 */
+  deleted?: boolean
   [key: string]: any
 }
 
@@ -36,10 +38,13 @@ interface MoreSelectCommonProps<V extends string | number = string> {
   renderListItem?(value: MoreSelectDataItem<V>, index: number): ReactNode
 
   /** 自定义popup底部渲染 */
-  renderCustomizedBottom?(ref: React.RefObject<Popover>): ReactNode
+  renderCustomizedBottom?(
+    ref: React.RefObject<Popover>,
+    defaultBottom: () => ReactNode
+  ): ReactNode
 
   /**
-   * 自定义“空状态”渲染
+   * 自定义"空状态"渲染
    *
    * 若函数返回 undefined 则使用默认的空状态
    */
@@ -60,6 +65,14 @@ interface MoreSelectCommonProps<V extends string | number = string> {
   /** 目前为了 keyboard */
   isKeyboard?: boolean
   onKeyDown?(event: KeyboardEvent): void
+
+  /** 最多显示的选中项数量，超出部分会折叠 */
+  maxTagCount?: number | 'responsive'
+  /** 自定义超出 maxTagCount 时显示的内容 */
+  maxTagPlaceholder?: (
+    omittedValues: MoreSelectDataItem<V>[],
+    omittedCount: number
+  ) => ReactNode
 }
 
 interface MoreSelectBaseProps<V extends string | number = string>
@@ -80,8 +93,12 @@ interface MoreSelectBaseProps<V extends string | number = string>
   ): MoreSelectGroupDataItem<V>[]
   /** 是否在active的时候搜索，订单业务相关，searchValue放在localstorage */
   searchOnActive?: boolean
-  /** 是否用select */
-  isSameAntd?: boolean
+  /** 是否展示全选以及过滤已删除商品 */
+  isRenderDefaultBottom?: boolean
+  /** 是否展示已删除商品 */
+  isShowDeletedSwitch?: boolean
+  /** 是否展示全选 */
+  isShowCheckedAll?: boolean
 }
 
 type MoreSelectData<V extends string | number = string> =

package/src/component/pagination/left.tsx

@@ -6,13 +6,17 @@ import _ from 'lodash'
 import { getLocale } from '@gm-pc/locales'
 
 function getLimitData(limit: number, pageSizeOptions?: string[]) {
-  const limitData = [
-    { value: limit, text: limit + '' },
-    { value: 10, text: '10' },
-    { value: 20, text: '20' },
-    { value: 50, text: '50' },
-    ...(pageSizeOptions?.map((v) => ({ value: Number(v), text: v })) || []),
-  ]
+  let limitData = []
+  if (pageSizeOptions) {
+    limitData = pageSizeOptions.map((v) => ({ value: Number(v), text: v }))
+  } else {
+    limitData = [
+      { value: limit, text: limit + '' },
+      { value: 10, text: '10' },
+      { value: 20, text: '20' },
+      { value: 50, text: '50' },
+    ]
+  }
 
   return _.orderBy(
     _.uniqBy(limitData, (v) => v.value),