@gm-pc/react 1.28.0-beta.10 → 1.28.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.28.0-beta.10",
+  "version": "1.28.0-beta.11",
   "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.10",
+    "@gm-pc/locales": "^1.28.0-beta.11",
     "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": "4312bf2ebd2891c4d1ca2e37da666535bc11cf21"
+  "gitHead": "740fa35594c216a01956599921e3ed94038ffdb3"
 }

package/src/component/more_select/base.tsx

@@ -401,19 +401,74 @@ class MoreSelectBase<V extends string | number = string> extends Component<
         renderListItem,
         listHeight,
       } = this.props
+
+      const selectedValues = new Set(selected.map((v) => v.value))
+
+      // 分离已勾选和未勾选的数据
+      const selectedGroups: MoreSelectGroupDataItem<V>[] = []
+      const availableGroups: MoreSelectGroupDataItem<V>[] = []
+
+      filterData.forEach((group) => {
+        const selectedChildren = group.children.filter((item) =>
+          selectedValues.has(item.value)
+        )
+        const availableChildren = group.children.filter(
+          (item) => !selectedValues.has(item.value)
+        )
+
+        if (selectedChildren.length > 0) {
+          selectedGroups.push({
+            ...group,
+            children: selectedChildren,
+          })
+        }
+        if (availableChildren.length > 0) {
+          availableGroups.push({
+            ...group,
+            children: availableChildren,
+          })
+        }
+      })
+
       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' }}>
+          {selectedGroups.length > 0 && (
+            <>
+              <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={isGroupList}
+                className='gm-border-0'
+                renderItem={renderListItem}
+                onSelect={this._handleSelect}
+                isScrollTo={false}
+                willActiveIndex={willActiveIndex!}
+              />
+            </>
+          )}
+          {availableGroups.length > 0 && (
+            <>
+              <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!}
+              />
+            </>
+          )}
+        </div>
       )
     }
   }

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,