@gm-pc/react 1.28.0-y.0 → 1.28.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.28.0-y.0",
+  "version": "1.28.1-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.28.0-y.0",
+    "@gm-pc/locales": "^1.28.1-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": "553a50edcf56e3bc001e96d2e6f752344b51021d"
+  "gitHead": "21e6355e34d987a7243fbdb16d3d3c4981a59344"
 }

package/src/component/more_select/base.tsx

@@ -23,6 +23,7 @@ import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_p
 import { Checkbox } from '../checkbox'
 import { Switch } from '../switch'
 interface MoreSelectBaseState {
+  canClear?: boolean
   searchValue: string
   loading: boolean
   /* keyboard 默认第一个位置 */
@@ -212,6 +213,12 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     onSelect(willSelected)
   }
 
+  private _handleClearAll = (event: MouseEvent): void => {
+    event.stopPropagation()
+    const { onSelect = _.noop } = this.props
+    onSelect([])
+  }
+
   private _handlePopupKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
     const { onKeyDown } = this.props
     let willActiveIndex = this.state.willActiveIndex as number
@@ -402,36 +409,38 @@ class MoreSelectBase<V extends string | number = string> extends Component<
         listHeight,
       } = this.props
 
-      const selectedValues = new Set(selected.map((v) => v.value))
+      const selectedValues = new Set(selected?.map((v) => v.value))
 
       // 分离已勾选和未勾选的数据
       const availableGroups: MoreSelectGroupDataItem<V>[] = []
+      // 已选中区域直接使用 selected 构建，不受筛选影响
+      const selectedGroups: MoreSelectGroupDataItem<V>[] = []
 
-      filterData.forEach((group) => {
-        const availableChildren = group.children.filter(
-          (item) => !selectedValues.has(item.value)
-        )
+      if (multiple) {
+        filterData.forEach((group) => {
+          const availableChildren = group.children.filter(
+            (item) => !selectedValues.has(item.value)
+          )
+
+          if (availableChildren.length > 0) {
+            availableGroups.push({
+              ...group,
+              children: availableChildren,
+            })
+          }
+        })
 
-        if (availableChildren.length > 0) {
-          availableGroups.push({
-            ...group,
-            children: availableChildren,
+        if (selected.length > 0) {
+          selectedGroups.push({
+            label: '',
+            children: selected,
           })
         }
-      })
-
-      // 已选中区域直接使用 selected 构建，不受筛选影响
-      const selectedGroups: MoreSelectGroupDataItem<V>[] = []
-      if (selected.length > 0) {
-        selectedGroups.push({
-          label: '',
-          children: selected,
-        })
       }
 
       return (
         <div style={{ height: listHeight, overflow: 'auto' }}>
-          {selectedGroups.length > 0 && (
+          {selected.length > 0 && multiple && (
             <>
               <div className='gm-more-select-section-title gm-padding-5 gm-text-desc gm-text-12'>
                 已选中
@@ -445,28 +454,28 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                 renderItem={renderListItem}
                 onSelect={this._handleSelect}
                 isScrollTo={false}
-                willActiveIndex={willActiveIndex!}
               />
             </>
           )}
-          {availableGroups.length > 0 && (
-            <>
+          <>
+            {multiple && (
               <div className='gm-more-select-section-title gm-padding-5 gm-text-desc gm-text-12'>
                 未选中
               </div>
-              <ListBase
-                selected={selected.map((v) => v.value)}
-                data={availableGroups}
-                multiple={multiple}
-                isGroupList={isGroupList}
-                className='gm-border-0'
-                renderItem={renderListItem}
-                onSelect={this._handleSelect}
-                isScrollTo={false}
-                willActiveIndex={willActiveIndex!}
-              />
-            </>
-          )}
+            )}
+
+            <ListBase
+              selected={selected?.map((v) => v.value)}
+              data={multiple ? availableGroups : filterData}
+              multiple={multiple}
+              isGroupList={isGroupList}
+              className='gm-border-0'
+              renderItem={renderListItem}
+              onSelect={this._handleSelect}
+              isScrollTo
+              willActiveIndex={willActiveIndex!}
+            />
+          </>
         </div>
       )
     }
@@ -635,6 +644,10 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               )}
             </Flex>
           )}
+          <SVGRemove
+            className='gm-cursor gm-more-select-clear-btn'
+            onClick={disabled ? _.noop : this._handleClearAll}
+          />
         </>
       )
     }