@gm-pc/react 1.17.0-beta.8 → 1.18.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.17.0-beta.8",
+  "version": "1.18.0-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.17.0-beta.8",
+    "@gm-pc/locales": "^1.18.0-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": "8a04790de682b7a6ef9187d8434c8c8a535bea63"
+  "gitHead": "558b652c8c55d7d2955d85fb509fb6a7202a0b74"
 }

package/src/component/auto_complete/auto_complete.tsx

@@ -99,11 +99,15 @@ const AutoComplete = forwardRef<AutoCompleteRef, AutoCompleteProps>((props, ref)
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      triggerPopover(false)
       if (willActiveIndex >= 0) {
         const val = options[willActiveIndex]?.value
         if (!_.isNil(val) && value !== val) {
           onChange && onChange(val)
+          triggerPopover(false)
+          return
+        }
+        if (popoverVisible.current) {
+          triggerPopover(false)
           return
         }
       }
@@ -136,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}
@@ -276,6 +289,17 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   }
 
   private _handleMoreSelectClick = () => {
+    if (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)
+      }
+    }
     const { onClick, selected } = this.props
     if (typeof onClick === 'function') {
       return onClick(selected)

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[]