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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.28.0-beta.9",
+  "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-beta.9",
+    "@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": "7fc1c5f55a36184f94825f800a6759d925bcf1ab"
+  "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
@@ -401,19 +408,75 @@ class MoreSelectBase<V extends string | number = string> extends Component<
         renderListItem,
         listHeight,
       } = this.props
+
+      const selectedValues = new Set(selected?.map((v) => v.value))
+
+      // 分离已勾选和未勾选的数据
+      const availableGroups: MoreSelectGroupDataItem<V>[] = []
+      // 已选中区域直接使用 selected 构建，不受筛选影响
+      const selectedGroups: MoreSelectGroupDataItem<V>[] = []
+
+      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 (selected.length > 0) {
+          selectedGroups.push({
+            label: '',
+            children: selected,
+          })
+        }
+      }
+
       return (
-        <ListBase
-          selected={selected.map((v) => v.value)}
-          data={filterData}
-          multiple={multiple}
-          isGroupList={isGroupList}
-          className='gm-border-0'
-          renderItem={renderListItem}
-          onSelect={this._handleSelect}
-          isScrollTo
-          willActiveIndex={willActiveIndex!}
-          style={{ height: listHeight }}
-        />
+        <div style={{ height: listHeight, overflow: 'auto' }}>
+          {selected.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={selectedGroups}
+                multiple={multiple}
+                isGroupList={false}
+                className='gm-border-0'
+                renderItem={renderListItem}
+                onSelect={this._handleSelect}
+                isScrollTo={false}
+              />
+            </>
+          )}
+          <>
+            {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={multiple ? availableGroups : filterData}
+              multiple={multiple}
+              isGroupList={isGroupList}
+              className='gm-border-0'
+              renderItem={renderListItem}
+              onSelect={this._handleSelect}
+              isScrollTo
+              willActiveIndex={willActiveIndex!}
+            />
+          </>
+        </div>
       )
     }
   }
@@ -581,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}
+          />
         </>
       )
     }

package/src/component/more_select/more_select.tsx

@@ -8,7 +8,7 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
     renderSelected: (item: MoreSelectDataItem<any>) => item.text,
     renderListItem: (item: MoreSelectDataItem<any>) => item.text,
     delay: 500,
-    listHeight: '180px',
+    listHeight: '280px',
     renderListFilterType: 'default',
     popoverType: 'focus',
     onKeyDown: _.noop,