@gm-pc/react 1.17.0-beta.9 → 1.18.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.17.0-beta.9",
+  "version": "1.18.0-beta.1",
   "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.17.0-beta.9",
+    "@gm-pc/locales": "^1.18.0-beta.1",
     "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": "f2aadd59989a196ce17bc6e4d79ffd5fb36b5003"
+  "gitHead": "38d92355431b842668df4dd938b549f8887f7606"
 }

package/src/component/auto_complete/auto_complete.tsx

@@ -140,20 +140,16 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((props, ref)
   }
 
   const renderItem = useMemo(() => {
-    if (renderOption) {
-      return (value: ListDataItem<string>, index: number) => {
-        return renderOption({ value: value.value }, index)
-      }
+    if (!renderOption) return
+    return (value: ListDataItem<string>, index: number) => {
+      return renderOption({ value: value.value }, index)
     }
-    return undefined
   }, [renderOption])
 
-  useImperativeHandle(ref, () => {
-    return {
-      input: inputNode.current,
-      triggerPopover,
-    }
-  })
+  useImperativeHandle(ref, () => ({
+    input: inputNode.current,
+    triggerPopover,
+  }))
 
   return (
     <Popover

package/src/component/more_select/base.tsx

@@ -46,6 +46,8 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   private _baseRef = createRef<HTMLDivElement>()
   private _selectionRef = createRef<HTMLDivElement>()
   private _popoverRef = createRef<Popover>()
+  private _inputRef = createRef<HTMLInputElement>()
+
   private _filterData: MoreSelectGroupDataItem<V>[] | undefined
 
   constructor(props: MoreSelectBaseProps<V>) {
@@ -123,10 +125,20 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     }
   }
 
-  public _handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+  public _handleChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    isInitSearch?: boolean
+  ): void => {
     const searchValue = event.target.value
     this.setState({ searchValue })
     this._debounceDoSearch(searchValue)
+    setTimeout(() => {
+      // eslint-disable-next-line no-unused-expressions
+      isInitSearch && this._inputRef.current?.select()
+      if (this.props.searchWhenActive) {
+        localStorage.setItem('_GM-PC_MORESELECT_SEARCHVALUE', this.state.searchValue)
+      }
+    }, 100)
   }
 
   private _doSearch = (query: string): void => {
@@ -239,6 +251,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       >
         <div className='gm-more-select-popup-input'>
           <Input
+            ref={this._inputRef}
             autoFocus
             value={searchValue}
             onChange={this._handleChange}
@@ -282,6 +295,20 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     }
   }
 
+  private _handlePopoverVisibleChange = (active: boolean) => {
+    if (active && this.props.searchWhenActive) {
+      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)
+      }
+    }
+  }
+
   render() {
     const {
       isInPopup,
@@ -316,6 +343,9 @@ class MoreSelectBase<V extends string | number = string> extends Component<
           popup={this._renderList}
           disabled={disabled}
           isInPopup={isInPopup}
+          onVisibleChange={(active) => {
+            this._handlePopoverVisibleChange(active)
+          }}
         >
           {children ?? (
             <Flex

package/src/component/more_select/more_select.tsx

@@ -53,9 +53,12 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
 
   public _handleInitSearch = (q?: string) => {
     // eslint-disable-next-line no-unused-expressions
-    this._moreSelectBaseRef?.current?._handleChange({
-      target: { value: q },
-    } as ChangeEvent<HTMLInputElement>)
+    this._moreSelectBaseRef?.current?._handleChange(
+      {
+        target: { value: q },
+      } as ChangeEvent<HTMLInputElement>,
+      true
+    )
   }
 
   _renderListFilter = (data: MoreSelectGroupDataItem<V>[], searchValue: string) => {

package/src/component/more_select/types.ts

@@ -78,6 +78,8 @@ interface MoreSelectBaseProps<V extends string | number = string>
     data: MoreSelectGroupDataItem<V>[],
     searchValue: string
   ): MoreSelectGroupDataItem<V>[]
+  /** 是否在active的时候搜索，订单业务相关，searchValue放在localstorage */
+  searchWhenActive?: boolean
 }
 
 type MoreSelectData<V extends string | number = string> =
@@ -88,7 +90,8 @@ type MoreSelectSelected<V extends string | number = string> =
   | MoreSelectDataItem<V>
 
 interface MoreSelectProps<V extends string | number = string>
-  extends MoreSelectCommonProps<V> {
+  extends MoreSelectCommonProps<V>,
+    Pick<MoreSelectBaseProps, 'searchWhenActive'> {
   data?: MoreSelectData<V>
   selected?: MoreSelectSelected<V>
   value?: V | V[]