@gm-pc/react 1.28.0-beta.2 → 1.29.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.28.0-beta.2",
+  "version": "1.29.0-beta.2",
   "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.28.0-beta.2",
+    "@gm-pc/locales": "^1.29.0-beta.2",
     "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": "8e9f3a00a9da2a0d800dafeb65f37d737f84be75"
+  "gitHead": "71157a29a2684a64359ea15e50eb43d64cee12f5"
 }

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,16 +20,12 @@ import { getLocale } from '@gm-pc/locales'
 import { ListBase } from '../list'
 import { findDOMNode } from 'react-dom'
 import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
-import { Checkbox } from '../checkbox'
-import { Switch } from '../switch'
+
 interface MoreSelectBaseState {
   searchValue: string
   loading: boolean
   /* keyboard 默认第一个位置 */
   willActiveIndex: number | null
-  isCheckedAll: boolean
-  isFilterDelete: boolean
-  displayCount: number
 }
 
 // @todo keydown item disabled
@@ -45,9 +41,6 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     searchValue: '',
     loading: false,
     willActiveIndex: this.props.isKeyboard ? 0 : null,
-    isCheckedAll: false,
-    isFilterDelete: true,
-    displayCount: 0,
   }
 
   private _isUnmounted = false
@@ -55,7 +48,6 @@ 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
 
@@ -70,42 +62,8 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     }
   }
 
-  componentDidMount() {
-    const { maxTagCount, tagItemWidth = 80, omittedTagWidth = 45 } = this.props
-    if (maxTagCount === 'responsive' && this._selectionRef.current) {
-      // HACK: 首次计算
-      setTimeout(() => {
-        if (this._selectionRef.current) {
-          const { width } = this._selectionRef.current.getBoundingClientRect()
-          const availableWidth = width - omittedTagWidth
-          const newDisplayCount = Math.floor(availableWidth / tagItemWidth)
-          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 availableWidth = width - omittedTagWidth
-          const newDisplayCount = Math.floor(availableWidth / tagItemWidth)
-
-          if (this.state.displayCount !== newDisplayCount) {
-            this.setState({ displayCount: newDisplayCount })
-          }
-        }
-      })
-      this._resizeObserver.observe(this._selectionRef.current)
-    }
-  }
-
   componentWillUnmount() {
-    this._isUnmounted = true
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect()
-    }
+    this._isUnmounted = false
   }
 
   public apiDoFocus = (): void => {
@@ -208,7 +166,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     onSelect(willSelected)
   }
 
-  private _handlePopupKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+  private _handlePopupKeyDown = (event: KeyboardEvent): void => {
     const { onKeyDown } = this.props
     let willActiveIndex = this.state.willActiveIndex as number
     if (!onKeyDown) {
@@ -274,84 +232,6 @@ 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] gm-more-select-default-bottom'
-        alignCenter
-      >
-        {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([])
-              }
-            }}
-          >
-            全选({availableData.length})
-          </Checkbox>
-        )}
-        {isShowDeletedSwitch && (
-          <Flex alignCenter>
-            <Flex row>
-              <Switch
-                size='small'
-                style={{ width: 32 }}
-                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 = [],
@@ -362,21 +242,9 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       listHeight,
       popupClassName,
       renderCustomizedBottom,
-      isRenderDefaultBottom = false,
     } = this.props
-    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)
-    }
-
+    const { loading, searchValue, willActiveIndex } = this.state
+    const filterData = this._getFilterData()
     return (
       <ConfigProvider {...config}>
         <div
@@ -416,11 +284,8 @@ class MoreSelectBase<V extends string | number = string> extends Component<
           </div>
           {!loading &&
             !!filterData.length &&
-            (renderCustomizedBottom
-              ? renderCustomizedBottom(this._popoverRef, this.renderBottom)
-              : isRenderDefaultBottom
-              ? this.renderBottom()
-              : null)}
+            renderCustomizedBottom &&
+            renderCustomizedBottom(this._popoverRef)}
         </div>
       </ConfigProvider>
     )
@@ -460,90 +325,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       style,
       popoverType,
       children,
-      maxTagCount,
-      maxTagPlaceholder,
     } = 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) => (
@@ -558,7 +340,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               },
               className
             )}
-            style={style as any}
+            style={style}
           >
             <Popover
               ref={this._popoverRef}
@@ -576,7 +358,39 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                   className='gm-more-select-selected'
                 >
                   {selected.length !== 0 ? (
-                    renderSelectedItems()
+                    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>

package/src/component/more_select/more_select.tsx

@@ -12,12 +12,6 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
     renderListFilterType: 'default',
     popoverType: 'focus',
     onKeyDown: _.noop,
-    /** 是否展示全选以及过滤已删除商品 */
-    isRenderDefaultBottom: false,
-    /** 是否展示已删除商品 */
-    isShowDeletedSwitch: true,
-    /** 是否展示全选 */
-    isShowCheckedAll: true,
   }
 
   private _moreSelectBaseRef = createRef<MoreSelectBase>()
@@ -91,8 +85,6 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
       onSearch,
       onClick,
       renderListFilter,
-      maxTagCount,
-      maxTagPlaceholder,
       ...rest
     } = this.props
     let tempSelect = selected as MoreSelectDataItem<V>[]
@@ -137,8 +129,6 @@ 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,98 +318,6 @@ 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

@@ -70,7 +70,3 @@
     }
   }
 }
-
-.gm-more-select-default-bottom {
-  border-top: 1px solid var(--gm-color-border);
-}

package/src/component/more_select/types.ts

@@ -1,13 +1,11 @@
+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
 }
 
@@ -38,13 +36,10 @@ interface MoreSelectCommonProps<V extends string | number = string> {
   renderListItem?(value: MoreSelectDataItem<V>, index: number): ReactNode
 
   /** 自定义popup底部渲染 */
-  renderCustomizedBottom?(
-    ref: React.RefObject<Popover>,
-    defaultBottom: () => ReactNode
-  ): ReactNode
+  renderCustomizedBottom?(ref: React.RefObject<Popover>): ReactNode
 
   /**
-   * 自定义"空状态"渲染
+   * 自定义“空状态”渲染
    *
    * 若函数返回 undefined 则使用默认的空状态
    */
@@ -65,25 +60,6 @@ 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
-
-  /** 是否展示全选以及过滤已删除商品 */
-  isRenderDefaultBottom?: boolean
-  /** 是否展示已删除商品 */
-  isShowDeletedSwitch?: boolean
-  /** 是否展示全选 */
-  isShowCheckedAll?: boolean
-  /** 当设置 maxTagCount 的时候的宽度, 根据这个去计算显示内容 */
-  tagItemWidth?: number
-  /** +N 显示的宽度 */
-  omittedTagWidth?: number
 }
 
 interface MoreSelectBaseProps<V extends string | number = string>
@@ -104,12 +80,6 @@ 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> =

package/src/component/nav/nav.tsx

@@ -13,6 +13,7 @@ const Nav: FC<NavProps> = ({
   onPushCreate,
   showActive,
   other,
+  otherFirst,
   className,
   style,
   footerImage,
@@ -78,6 +79,8 @@ const Nav: FC<NavProps> = ({
     >
       <div className='gm-nav-logo'>{logo}</div>
       <Flex flex column className='gm-nav-content'>
+        {otherFirst}
+
         {data.map((one) => (
           <NavItem
             key={one.link}

package/src/component/nav/types.ts

@@ -50,6 +50,7 @@ interface NavProps extends NavExtraProps {
   /** 控制 浮层的线上，如商品库传 merchandise */
   showActive?: string
   other?: ReactNode
+  otherFirst?: ReactNode
   className?: string
   style?: CSSProperties
   /** 底部 iot 图片 & 数据 */

package/src/component/switch/style.less

@@ -6,10 +6,6 @@
   border-radius: calc(var(--gm-switch-size-height) / 2);
   background-color: var(--gm-color-bg-switch);
 
-  &.gm-switch-small {
-    --gm-switch-size-height: 16px;
-  }
-
   &::before {
     position: absolute;
     content: '';

package/src/component/switch/switch.tsx

@@ -11,7 +11,6 @@ interface SwitchProps {
   onChange?(checked: boolean): void
   className?: string
   style?: CSSProperties
-  size?: 'small' | 'middle'
 }
 
 interface SwitchState {
@@ -27,11 +26,10 @@ class Switch extends Component<SwitchProps, SwitchState> {
     on: '',
     off: '',
     onChange: _.noop,
-    size: 'middle',
   }
 
   readonly state: SwitchState = {
-    checked: !!this.props.checked,
+    checked: this.props.checked,
     labelWidth: null,
     isReady: false,
   }
@@ -55,7 +53,7 @@ class Switch extends Component<SwitchProps, SwitchState> {
   UNSAFE_componentWillReceiveProps(nextProps: Readonly<SwitchProps>) {
     if ('checked' in nextProps) {
       this.setState({
-        checked: !!nextProps.checked,
+        checked: nextProps.checked,
       })
     }
   }
@@ -84,7 +82,6 @@ class Switch extends Component<SwitchProps, SwitchState> {
       disabled,
       on,
       off,
-      size,
       ...rest
     } = this.props
 
@@ -104,9 +101,8 @@ class Switch extends Component<SwitchProps, SwitchState> {
           ref={this._inputOffRef}
           className={classNames('gm-switch gm-switch-' + type, className, {
             disabled,
-            [`gm-switch-${size}`]: size,
           })}
-          style={style as any}
+          style={style}
           data-attr={this.state.labelWidth}
           disabled={disabled}
           type='checkbox'