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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.28.0-beta.0",
+  "version": "1.28.0-beta.1",
   "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.0",
+    "@gm-pc/locales": "^1.28.0-beta.1",
     "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": "107461a0dd5c644e10482ed5f3ed8638fee436cc"
+  "gitHead": "994ee00d0f8515ba21e8522f0e66f717bc0859d9"
 }

package/src/component/more_select/base.tsx

@@ -46,7 +46,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     loading: false,
     willActiveIndex: this.props.isKeyboard ? 0 : null,
     isCheckedAll: false,
-    isFilterDelete: false,
+    isFilterDelete: true,
     displayCount: 0,
   }
 
@@ -71,15 +71,14 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   }
 
   componentDidMount() {
-    const { maxTagCount } = this.props
+    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 omittedTagWidth = 50 // for "+N..."
           const availableWidth = width - omittedTagWidth
-          const newDisplayCount = Math.floor(availableWidth / 80)
+          const newDisplayCount = Math.floor(availableWidth / tagItemWidth)
           if (this.state.displayCount !== newDisplayCount) {
             this.setState({ displayCount: newDisplayCount > 0 ? newDisplayCount : 0 })
           }
@@ -90,12 +89,11 @@ class MoreSelectBase<V extends string | number = string> extends Component<
         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)
+          const newDisplayCount = Math.floor(availableWidth / tagItemWidth)
 
           if (this.state.displayCount !== newDisplayCount) {
-            this.setState({ displayCount: newDisplayCount > 0 ? newDisplayCount : 0 })
+            this.setState({ displayCount: newDisplayCount })
           }
         }
       })
@@ -300,9 +298,8 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     return (
       <Flex
         justifyBetween
-        className='tw-p-[8px]'
+        className='tw-p-[8px] gm-more-select-default-bottom'
         alignCenter
-        style={{ borderTop: '1px solid #aeaeae' }}
       >
         {isShowCheckedAll && (
           <Checkbox
@@ -323,7 +320,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               }
             }}
           >
-            全选
+            全选({availableData.length})
           </Checkbox>
         )}
         {isShowDeletedSwitch && (
@@ -464,7 +461,6 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       children,
       maxTagCount,
       maxTagPlaceholder,
-      isRenderDefaultBottom = false,
     } = this.props
 
     // 处理 maxTagCount 逻辑

package/src/component/more_select/more_select.tsx

@@ -12,6 +12,12 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
     renderListFilterType: 'default',
     popoverType: 'focus',
     onKeyDown: _.noop,
+    /** 是否展示全选以及过滤已删除商品 */
+    isRenderDefaultBottom: false,
+    /** 是否展示已删除商品 */
+    isShowDeletedSwitch: true,
+    /** 是否展示全选 */
+    isShowCheckedAll: true,
   }
 
   private _moreSelectBaseRef = createRef<MoreSelectBase>()

package/src/component/more_select/style.less

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

package/src/component/more_select/types.ts

@@ -73,6 +73,17 @@ interface MoreSelectCommonProps<V extends string | number = string> {
     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>