@gm-pc/react 1.27.4-beta.6 → 1.28.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.27.4-beta.6",
+  "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.4-beta.6",
+    "@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": "aaf6aeba25efc7f816af2b2b3c4e17c99b57a157"
+  "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,12 +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
   loading: boolean
   /* keyboard 默认第一个位置 */
   willActiveIndex: number | null
+  isCheckedAll: boolean
+  isFilterDelete: boolean
+  displayCount: number
 }
 
 // @todo keydown item disabled
@@ -41,6 +45,9 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     searchValue: '',
     loading: false,
     willActiveIndex: this.props.isKeyboard ? 0 : null,
+    isCheckedAll: false,
+    isFilterDelete: false,
+    displayCount: 0,
   }
 
   private _isUnmounted = false
@@ -48,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
 
@@ -62,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 => {
@@ -166,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) {
@@ -232,6 +276,84 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     )
   }
 
+  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 (
+      <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>
+    )
+  }
+
   private _renderList = (config: ConfigProviderProps): ReactNode => {
     const {
       selected = [],
@@ -242,9 +364,21 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       listHeight,
       popupClassName,
       renderCustomizedBottom,
+      isRenderDefaultBottom = false,
     } = this.props
-    const { loading, searchValue, 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
@@ -284,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>
     )
@@ -325,7 +462,91 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       style,
       popoverType,
       children,
+      maxTagCount,
+      maxTagPlaceholder,
+      isRenderDefaultBottom = false,
     } = this.props
+
+    // 处理 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>
         {(config) => (
@@ -340,7 +561,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               },
               className
             )}
-            style={style}
+            style={style as any}
           >
             <Popover
               ref={this._popoverRef}
@@ -358,39 +579,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                   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>
-                    ))
+                    renderSelectedItems()
                   ) : (
                     // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
                     <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>

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/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,6 +93,12 @@ interface MoreSelectBaseProps<V extends string | number = string>
   ): MoreSelectGroupDataItem<V>[]
   /** 是否在active的时候搜索，订单业务相关，searchValue放在localstorage */
   searchOnActive?: boolean
+  /** 是否展示全选以及过滤已删除商品 */
+  isRenderDefaultBottom?: boolean
+  /** 是否展示已删除商品 */
+  isShowDeletedSwitch?: boolean
+  /** 是否展示全选 */
+  isShowCheckedAll?: boolean
 }
 
 type MoreSelectData<V extends string | number = string> =