@gm-pc/keyboard 1.17.0-beta.0 → 1.17.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/keyboard",
-  "version": "1.17.0-beta.0",
+  "version": "1.17.0-beta.1",
   "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.17.0-beta.0",
-    "@gm-pc/table-x": "^1.17.0-beta.0",
+    "@gm-pc/react": "^1.17.0-beta.1",
+    "@gm-pc/table-x": "^1.17.0-beta.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19"
   },
-  "gitHead": "4ded82c728d9153ce0f837ad39777ac461a57d1f"
+  "gitHead": "1781bbccfc4d5ebcddad1572fcec3f855d19b9f5"
 }

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/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'