@gm-pc/react 1.28.1-beta.0 → 1.28.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.28.1-beta.0",
+  "version": "1.28.1-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.1-beta.0",
+    "@gm-pc/locales": "^1.28.1-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": "21e6355e34d987a7243fbdb16d3d3c4981a59344"
+  "gitHead": "16774306f2bd425112cf4279f4aa844b5ec9d2ee"
 }

package/src/component/list/base.tsx

@@ -4,12 +4,14 @@ import { xor, flatMap, isNil, noop } from 'lodash'
 import { ListBaseProps } from './types'
 import { ListDataItem } from '../../types'
 import { ConfigConsumer } from '../config_provider'
+import SVGOk from '../../svg/ok.svg'
 
 class Base<V = any> extends Component<ListBaseProps<V>> {
   static defaultProps = {
     onSelect: noop,
     renderItem: (value: any) => value.text,
     getItemProps: () => ({}),
+    showSelectedIcon: true,
   }
 
   private _listRef = createRef<HTMLDivElement>()
@@ -61,9 +63,9 @@ class Base<V = any> extends Component<ListBaseProps<V>> {
     }
     const { multiple, selected, onSelect } = this.props
     if (multiple) {
-      onSelect && onSelect(xor(selected, [item.value]))
+      onSelect && onSelect(xor(selected, [item.value]), item)
     } else {
-      onSelect && onSelect([item.value])
+      onSelect && onSelect([item.value], item)
     }
   }
 
@@ -79,6 +81,7 @@ class Base<V = any> extends Component<ListBaseProps<V>> {
       className,
       willActiveIndex,
       getItemProps,
+      showSelectedIcon,
       ...rest
     } = this.props
 
@@ -115,6 +118,9 @@ class Base<V = any> extends Component<ListBaseProps<V>> {
                       onClick={() => this._handleSelect(item)}
                     >
                       {renderItem!(item, index)}
+                      {multiple && showSelectedIcon && selected.includes(item.value) && (
+                        <SVGOk />
+                      )}
                     </div>
                   )
                 })}

package/src/component/list/style.less

@@ -15,6 +15,8 @@
 
     &.active {
       color: var(--gm-color-primary-active);
+      display: flex;
+      justify-content: space-between;
     }
 
     .gmDisabledWith();

package/src/component/list/types.ts

@@ -12,12 +12,14 @@ interface CommonListProps<V> {
   getItemProps?(item: ListDataItem<V>): HTMLAttributes<HTMLDivElement>
   className?: string
   style?: CSSProperties
+  /** 是否显示选中状态的图标，默认为 true */
+  showSelectedIcon?: boolean
 }
 
 interface ListBaseProps<V> extends CommonListProps<V> {
   data: ListGroupDataItem<V>[]
   selected: V[]
-  onSelect?(selected: V[]): void
+  onSelect?(selected: V[], item: ListDataItem<V>): void
 }
 
 interface ListProps<V> extends CommonListProps<V> {

package/src/component/more_select/base.tsx

@@ -31,6 +31,9 @@ interface MoreSelectBaseState {
   isCheckedAll: boolean
   isFilterDelete: boolean
   displayCount: number
+  // isPopupJustOpened: boolean
+  previousSelected?: MoreSelectDataItem<V>[]
+  previousCurrentSelected: MoreSelectDataItem<V>[]
 }
 
 // @todo keydown item disabled
@@ -49,6 +52,8 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     isCheckedAll: false,
     isFilterDelete: true,
     displayCount: 0,
+    previousSelected: [],
+    previousCurrentSelected: [],
   }
 
   private _isUnmounted = false
@@ -176,6 +181,10 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     const { onSearch } = this.props
     const searchValue = event.target.value
     this.setState({ searchValue })
+    this.setState({
+      previousSelected: this.props.selected,
+      previousCurrentSelected: this.props.selected,
+    })
     if (onSearch && !this._isUnmounted) {
       this.setState({
         loading: true,
@@ -206,8 +215,10 @@ class MoreSelectBase<V extends string | number = string> extends Component<
 
   private _debounceDoSearch = _.debounce(this._doSearch, this.props.delay)
 
-  private _handleClear = (clearItem: MoreSelectDataItem<V>, event: MouseEvent): void => {
-    event.stopPropagation()
+  private _handleClear = (clearItem: MoreSelectDataItem<V>, event?: MouseEvent): void => {
+    if (event) {
+      event.stopPropagation()
+    }
     const { onSelect = _.noop, selected = [] } = this.props
     const willSelected = selected.filter((item) => item.value !== clearItem.value)
     onSelect(willSelected)
@@ -330,6 +341,12 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                   new Set([...prevSelectedValue, ...valuesToSelect])
                 )
                 this._handleSelect(newSelected)
+                // 更新 previousCurrentSelected
+                this.setState({
+                  previousCurrentSelected: Array.from(
+                    new Set([...this.state.previousCurrentSelected, ...availableData])
+                  ),
+                })
               } else {
                 // 取消全选 - 只反勾选availableData的数据
                 const { selected = [] } = this.props
@@ -338,6 +355,12 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                   (item) => !availableValues.includes(item.value)
                 )
                 this._handleSelect(newSelected.map((item) => item.value))
+                // 更新 previousCurrentSelected
+                this.setState({
+                  previousCurrentSelected: this.state.previousCurrentSelected.filter(
+                    (item) => !availableValues.includes(item.value)
+                  ),
+                })
               }
             }}
           >
@@ -407,9 +430,11 @@ class MoreSelectBase<V extends string | number = string> extends Component<
         isGroupList,
         renderListItem,
         listHeight,
+        showSelectedIcon,
       } = this.props
+      const { previousSelected = [], previousCurrentSelected = [] } = this.state
 
-      const selectedValues = new Set(selected?.map((v) => v.value))
+      const selectedValues = new Set(previousSelected?.map((v) => v.value))
 
       // 分离已勾选和未勾选的数据
       const availableGroups: MoreSelectGroupDataItem<V>[] = []
@@ -418,9 +443,10 @@ class MoreSelectBase<V extends string | number = string> extends Component<
 
       if (multiple) {
         filterData.forEach((group) => {
-          const availableChildren = group.children.filter(
-            (item) => !selectedValues.has(item.value)
-          )
+          const availableChildren = group.children.filter((item) => {
+            // return true
+            return !selectedValues.has(item.value)
+          })
 
           if (availableChildren.length > 0) {
             availableGroups.push({
@@ -430,43 +456,65 @@ class MoreSelectBase<V extends string | number = string> extends Component<
           }
         })
 
-        if (selected.length > 0) {
+        if (previousSelected.length > 0) {
           selectedGroups.push({
             label: '',
-            children: selected,
+            children: previousSelected,
           })
         }
       }
 
       return (
         <div style={{ height: listHeight, overflow: 'auto' }}>
-          {selected.length > 0 && multiple && (
+          {previousSelected.length > 0 && multiple && !this.state.searchValue && (
             <>
               <div className='gm-more-select-section-title gm-padding-5 gm-text-desc gm-text-12'>
                 已选中
               </div>
               <ListBase
-                selected={selected.map((v) => v.value)}
+                showSelectedIcon={showSelectedIcon}
+                selected={previousCurrentSelected.map((v) => v.value)}
                 data={selectedGroups}
                 multiple={multiple}
                 isGroupList={false}
                 className='gm-border-0'
                 renderItem={renderListItem}
-                onSelect={this._handleSelect}
+                onSelect={(v, target) => {
+                  this._handleSelect(v)
+                  // 判断是勾选还是反选：如果 v 中包含 target.value，说明是勾选操作；否则是反选操作
+                  const isChecked = v.includes(target.value)
+                  if (isChecked) {
+                    // 勾选：添加到 previousCurrentSelected
+                    this.setState({
+                      previousCurrentSelected: [
+                        ...this.state.previousCurrentSelected,
+                        target,
+                      ],
+                    })
+                  } else {
+                    // 反选：从 previousCurrentSelected 中移除
+                    this.setState({
+                      previousCurrentSelected: this.state.previousCurrentSelected?.filter(
+                        (item) => item.value !== target.value
+                      ),
+                    })
+                  }
+                }}
                 isScrollTo={false}
               />
             </>
           )}
           <>
-            {multiple && (
+            {multiple && !this.state.searchValue && (
               <div className='gm-more-select-section-title gm-padding-5 gm-text-desc gm-text-12'>
                 未选中
               </div>
             )}
 
             <ListBase
+              showSelectedIcon={showSelectedIcon}
               selected={selected?.map((v) => v.value)}
-              data={multiple ? availableGroups : filterData}
+              data={multiple && !this.state.searchValue ? availableGroups : filterData}
               multiple={multiple}
               isGroupList={isGroupList}
               className='gm-border-0'
@@ -538,15 +586,21 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   }
 
   private _handlePopoverVisibleChange = (active: boolean) => {
-    if (active && this.props.searchOnActive) {
-      const searchValue = localStorage.getItem('_GM-PC_MORESELECT_SEARCHVALUE')
-      if (searchValue) {
-        this.setState({ searchValue })
-        setTimeout(() => {
-          // eslint-disable-next-line no-unused-expressions
-          this._inputRef.current?.select()
-          this._debounceDoSearch(searchValue)
-        }, 0)
+    if (active) {
+      this.setState({
+        previousSelected: this.props.selected,
+        previousCurrentSelected: this.props.selected,
+      })
+      if (this.props.searchOnActive) {
+        const searchValue = localStorage.getItem('_GM-PC_MORESELECT_SEARCHVALUE')
+        if (searchValue) {
+          this.setState({ searchValue })
+          setTimeout(() => {
+            // eslint-disable-next-line no-unused-expressions
+            this._inputRef.current?.select()
+            this._debounceDoSearch(searchValue)
+          }, 0)
+        }
       }
     }
   }

package/src/component/more_select/more_select.tsx

@@ -18,6 +18,7 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
     isShowDeletedSwitch: true,
     /** 是否展示全选 */
     isShowCheckedAll: true,
+    showSelectedIcon: true,
   }
 
   private _moreSelectBaseRef = createRef<MoreSelectBase>()

package/src/component/more_select/types.ts

@@ -110,6 +110,7 @@ interface MoreSelectBaseProps<V extends string | number = string>
   isShowDeletedSwitch?: boolean
   /** 是否展示全选 */
   isShowCheckedAll?: boolean
+  showSelectedIcon?: boolean
 }
 
 type MoreSelectData<V extends string | number = string> =