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

package/package.json

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

package/src/component/more_select/base.tsx

@@ -20,8 +20,8 @@ import { getLocale } from '@gm-pc/locales'
 import { ListBase } from '../list'
 import { findDOMNode } from 'react-dom'
 import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
-import { Checkbox, Switch } from '@gm-pc/react'
-
+import { Checkbox } from '../checkbox'
+import { Switch } from '../switch'
 interface MoreSelectBaseState {
   searchValue: string
   loading: boolean
@@ -172,8 +172,14 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     event: ChangeEvent<HTMLInputElement>,
     isInitSearch?: boolean
   ): void => {
+    const { onSearch } = this.props
     const searchValue = event.target.value
     this.setState({ searchValue })
+    if (onSearch && !this._isUnmounted) {
+      this.setState({
+        loading: true,
+      })
+    }
     this._debounceDoSearch(searchValue)
     setTimeout(() => {
       // eslint-disable-next-line no-unused-expressions
@@ -187,14 +193,12 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   private _doSearch = (query: string): void => {
     const { onSearch, data = [] } = this.props
     if (!this._isUnmounted && onSearch) {
-      const result = onSearch(query, data)
-      if (!result) {
-        return
-      }
       this.setState({ loading: true })
-
+      const result = onSearch(query, data)
       Promise.resolve(result).finally(() => {
-        this.setState({ loading: false })
+        setTimeout(() => {
+          this.setState({ loading: false })
+        }, 50)
       })
     }
   }
@@ -243,9 +247,9 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   }
 
   private _getFilterData = () => {
-    const { data = [], renderListFilter, renderListFilterType } = this.props
+    const { data = [], renderListFilter, renderListFilterType, onSearch } = this.props
     const { searchValue } = this.state
-    let filterData: MoreSelectGroupDataItem<V>[]
+    let filterData: MoreSelectGroupDataItem<V>[] = []
     if (renderListFilter) {
       filterData = renderListFilter(data, searchValue)
     } else if (renderListFilterType === 'pinyin') {
@@ -313,10 +317,20 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               if (isChecked) {
                 // 全选当前过滤后的可用数据
                 const valuesToSelect = availableData.map((item) => item.value)
-                this._handleSelect(valuesToSelect)
+                const prevSelectedValue = selected.map((item) => item.value)
+                // console.log(valuesToSelect, selected)
+                const newSelected = Array.from(
+                  new Set([...prevSelectedValue, ...valuesToSelect])
+                )
+                this._handleSelect(newSelected)
               } else {
-                // 取消全选
-                this._handleSelect([])
+                // 取消全选 - 只反勾选availableData的数据
+                const { selected = [] } = this.props
+                const availableValues = availableData.map((item) => item.value)
+                const newSelected = selected.filter(
+                  (item) => !availableValues.includes(item.value)
+                )
+                this._handleSelect(newSelected.map((item) => item.value))
               }
             }}
           >
@@ -327,36 +341,140 @@ class MoreSelectBase<V extends string | number = string> extends Component<
           <Flex alignCenter>
             <Flex row>
               <Switch
-                style={{ width: 48 }}
+                size='small'
+                style={{ width: 32 }}
                 checked={isFilterDelete}
                 onChange={(open) => {
                   this.setState({
                     isFilterDelete: open,
                   })
-                  if (isCheckedAll) {
-                    const newAvailableData = open
-                      ? flatFilterData.filter((item) => !item.deleted)
-                      : flatFilterData
-
-                    const valuesToSelect = newAvailableData.map((item) => item.value)
-                    this._handleSelect(valuesToSelect)
-                  }
+                  // if (isCheckedAll) {
+                  //   const newAvailableData = open
+                  //     ? flatFilterData.filter((item) => !item.deleted)
+                  //     : flatFilterData
+
+                  //   const valuesToSelect = newAvailableData.map((item) => item.value)
+                  //   this._handleSelect(valuesToSelect)
+                  // }
                 }}
               />
             </Flex>
-            <span className='gm-margin-left-5'>过滤已删除商品</span>
+            <span className='gm-margin-left-5'>过滤已删除数据</span>
           </Flex>
         )}
       </Flex>
     )
   }
 
+  renderContent = () => {
+    const { loading, willActiveIndex, isFilterDelete } = this.state
+
+    if (loading) {
+      return (
+        <Flex alignCenter justifyCenter className='gm-bg gm-padding-5'>
+          <Loading size='20px' />
+        </Flex>
+      )
+    }
+
+    let filterData = this._getFilterData()
+
+    // 如果开启了过滤已删除商品功能，需要过滤掉已删除的商品
+    if (isFilterDelete) {
+      filterData = filterData
+        .map((group) => ({
+          ...group,
+          children: group.children.filter((item) => !item.deleted),
+        }))
+        .filter((group) => group.children.length > 0)
+    }
+
+    if (!loading && filterData.length === 0) {
+      return this._renderEmpty()
+    }
+
+    if (!loading && filterData.length > 0) {
+      const {
+        selected = [],
+        multiple,
+        isGroupList,
+        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 (
+        <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>
+      )
+    }
+  }
+
   private _renderList = (config: ConfigProviderProps): ReactNode => {
     const {
-      selected = [],
-      multiple,
-      isGroupList,
-      renderListItem,
       searchPlaceholder,
       listHeight,
       popupClassName,
@@ -391,28 +509,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               placeholder={searchPlaceholder}
             />
           </div>
-          <div style={{ height: listHeight }}>
-            {loading && (
-              <Flex alignCenter justifyCenter className='gm-bg gm-padding-5'>
-                <Loading size='20px' />
-              </Flex>
-            )}
-            {!loading && !filterData.length && this._renderEmpty()}
-            {!loading && !!filterData.length && (
-              <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>
+          <div style={{ height: listHeight }}>{this.renderContent()}</div>
           {!loading &&
             !!filterData.length &&
             (renderCustomizedBottom

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,

package/src/component/more_select/types.ts

@@ -93,7 +93,7 @@ interface MoreSelectBaseProps<V extends string | number = string>
   onSelect(selected: MoreSelectDataItem<V>[]): void
 
   /** 搜索回调 */
-  onSearch?(searchWord: string, data: MoreSelectGroupDataItem<V>[]): Promise<void> | void
+  onSearch?(searchWord: string, data: MoreSelectGroupDataItem<V>[]): Promise<any> | any
   /** 点击回调 */
   onClick?(selected: MoreSelectSelected<V>[]): void
 
@@ -128,7 +128,7 @@ interface MoreSelectProps<V extends string | number = string>
   onSelect?(selected?: MoreSelectSelected<V>): void
   onChange?(value: V | V[]): void
   /** 搜索回调 */
-  onSearch?(searchWord: string, data: MoreSelectData<V>): Promise<void> | void
+  onSearch?(searchWord: string, data: MoreSelectData<V>): Promise<void | any> | any
   /** 点击回调 */
   onClick?(selected: MoreSelectSelected<V>[]): void
 

package/src/component/switch/style.less

@@ -6,6 +6,10 @@
   border-radius: calc(var(--gm-switch-size-height) / 2);
   background-color: var(--gm-color-bg-switch);
 
+  &.gm-switch-small {
+    --gm-switch-size-height: 16px;
+  }
+
   &::before {
     position: absolute;
     content: '';

package/src/component/switch/switch.tsx

@@ -11,6 +11,7 @@ interface SwitchProps {
   onChange?(checked: boolean): void
   className?: string
   style?: CSSProperties
+  size?: 'small' | 'middle'
 }
 
 interface SwitchState {
@@ -26,10 +27,11 @@ class Switch extends Component<SwitchProps, SwitchState> {
     on: '',
     off: '',
     onChange: _.noop,
+    size: 'middle',
   }
 
   readonly state: SwitchState = {
-    checked: this.props.checked,
+    checked: !!this.props.checked,
     labelWidth: null,
     isReady: false,
   }
@@ -53,7 +55,7 @@ class Switch extends Component<SwitchProps, SwitchState> {
   UNSAFE_componentWillReceiveProps(nextProps: Readonly<SwitchProps>) {
     if ('checked' in nextProps) {
       this.setState({
-        checked: nextProps.checked,
+        checked: !!nextProps.checked,
       })
     }
   }
@@ -82,6 +84,7 @@ class Switch extends Component<SwitchProps, SwitchState> {
       disabled,
       on,
       off,
+      size,
       ...rest
     } = this.props
 
@@ -101,8 +104,9 @@ class Switch extends Component<SwitchProps, SwitchState> {
           ref={this._inputOffRef}
           className={classNames('gm-switch gm-switch-' + type, className, {
             disabled,
+            [`gm-switch-${size}`]: size,
           })}
-          style={style}
+          style={style as any}
           data-attr={this.state.labelWidth}
           disabled={disabled}
           type='checkbox'