@gm-pc/keyboard 1.16.0 → 1.17.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/keyboard",
-  "version": "1.16.0",
+  "version": "1.17.0-beta.10",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/react": "^1.16.0",
-    "@gm-pc/table-x": "^1.16.0",
+    "@gm-pc/react": "^1.17.0-beta.10",
+    "@gm-pc/table-x": "^1.17.0-beta.10",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19"
   },
-  "gitHead": "c08a6d0ad16a833ece42b381d36d8c10be4d29b2"
+  "gitHead": "b7017b352488f540d5108043888c7bea8d2c499a"
 }

package/src/cell/auto_complete.tsx

@@ -0,0 +1,79 @@
+import React, { FC, useRef, FocusEvent, KeyboardEvent } from 'react'
+import { AutoComplete, AutoCompleteRef, AutoCompleteProps } from '@gm-pc/react'
+
+import KeyboardCell from '../core/cell'
+import { isInputUnBoundary, scrollIntoViewFixedWidth, useContextData } from '../utils'
+import { KeyboardWrapData } from '../types'
+
+const KCAutoComplete: FC<AutoCompleteProps> = (props) => {
+  const { onFocus, onKeyDown, disabled, ...rest } = props
+
+  const cellRef = useRef<KeyboardCell>(null)
+  const autoCompleteRef = useRef<AutoCompleteRef>(null)
+  const { wrapData, cellKey } = useContextData()
+
+  const handleFocus = () => {
+    // eslint-disable-next-line
+    autoCompleteRef.current?.input?.focus()
+    // eslint-disable-next-line
+    autoCompleteRef.current?.triggerPopover(true)
+  }
+
+  const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {
+    if (onFocus) {
+      onFocus(event)
+      return
+    }
+    event.target && event.target.select()
+  }
+
+  const handleScroll = (fixedWidths: KeyboardWrapData['fixedWidths']) => {
+    scrollIntoViewFixedWidth(autoCompleteRef.current!.input!, fixedWidths)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    onKeyDown && onKeyDown(event)
+    if (isInputUnBoundary(event)) return
+    if (
+      event.key === 'ArrowUp' ||
+      event.key === 'ArrowRight' ||
+      event.key === 'ArrowDown' ||
+      event.key === 'ArrowLeft'
+    ) {
+      // 需要阻止
+      // 如果下一个是 input，切换过去的时候光标会右移一位
+      event.preventDefault()
+      // eslint-disable-next-line
+      cellRef.current?.apiDoDirectionByEventKey(event.key)
+    } else if (event.key === 'Tab') {
+      // 要阻止默认
+      // eslint-disable-next-line
+      cellRef.current?.apiDoTab()
+    } else if (event.key === 'Enter') {
+      // 要阻止默认
+      event.preventDefault()
+      // eslint-disable-next-line
+      cellRef.current?.apiDoEnter()
+    }
+  }
+  return (
+    <KeyboardCell
+      ref={cellRef}
+      wrapData={wrapData}
+      cellKey={cellKey}
+      disabled={disabled}
+      onScroll={handleScroll}
+      onFocus={handleFocus}
+    >
+      <AutoComplete
+        ref={autoCompleteRef}
+        {...rest}
+        onFocus={handleInputFocus}
+        disabled={disabled}
+        onKeyDown={handleKeyDown}
+      />
+    </KeyboardCell>
+  )
+}
+
+export default KCAutoComplete

package/src/cell/input_number.tsx

@@ -31,7 +31,7 @@ const KCInputNumber: ForwardRefRenderFunction<RefFunctionProps, InputNumberProps
 
   const handleFocus = () => {
     // eslint-disable-next-line
-    targetRef.current?.apiDoSelect()
+    targetRef.current?.apiDoFocus()
   }
 
   const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {

package/src/cell/more_select.tsx

@@ -1,16 +1,25 @@
-import React, { useRef, KeyboardEvent } from 'react'
+import React, { useRef, KeyboardEvent, forwardRef, useImperativeHandle } from 'react'
 import { MoreSelect, MoreSelectProps } from '@gm-pc/react'
 import { findDOMNode } from 'react-dom'
 
 import KeyboardCell from '../core/cell'
 import { isInputUnBoundary, scrollIntoViewFixedWidth, useContextData } from '../utils'
-import { KeyboardWrapData } from '../types'
+import { KeyboardWrapData, MoreSelectRef } from '../types'
 
-function KCMoreSelect<V>({ disabled, onKeyDown, ...rest }: MoreSelectProps<V>) {
+function KCMoreSelect<V>(
+  { disabled, onKeyDown, ...rest }: MoreSelectProps<V>,
+  ref: React.ForwardedRef<MoreSelectRef>
+) {
   const cellRef = useRef<KeyboardCell>(null)
   const targetRef = useRef<MoreSelect>(null)
   const { wrapData, cellKey } = useContextData()
 
+  useImperativeHandle(ref, () => {
+    return {
+      handleInitSearch,
+    }
+  })
+
   const handleFocus = () => {
     // eslint-disable-next-line
     targetRef.current?.apiDoFocus()
@@ -45,6 +54,11 @@ function KCMoreSelect<V>({ disabled, onKeyDown, ...rest }: MoreSelectProps<V>) {
     }
   }
 
+  const handleInitSearch = (q?: string) => {
+    // eslint-disable-next-line no-unused-expressions
+    targetRef.current?._handleInitSearch(q)
+  }
+
   return (
     <KeyboardCell
       ref={cellRef}
@@ -66,4 +80,4 @@ function KCMoreSelect<V>({ disabled, onKeyDown, ...rest }: MoreSelectProps<V>) {
   )
 }
 
-export default KCMoreSelect
+export default forwardRef(KCMoreSelect)

package/src/index.ts

@@ -5,6 +5,7 @@ export const KeyboardUtil = { isInputUnBoundary, scrollIntoViewFixedWidth, doFoc
 export { default as keyboardTableXHOC } from './hoc/keyboard_table_x'
 
 export { default as KC } from './cell/cell'
+export { default as KCAutoComplete } from './cell/auto_complete'
 export { default as KCInput } from './cell/input'
 export { default as KCMoreSelect } from './cell/more_select'
 export { default as KCInputNumber } from './cell/input_number'

package/src/types.ts

@@ -65,6 +65,11 @@ interface WrapProps {
   }
 }
 
+type MoreSelectRef = {
+  /**  默认搜索 */
+  handleInitSearch: (q?: string) => void
+}
+
 export type {
   KeyboardCellProps,
   WrapProps,
@@ -73,4 +78,5 @@ export type {
   KeyboardCustomEvent,
   KeyboardDirection,
   KeyboardWrapData,
+  MoreSelectRef,
 }