@gm-pc/keyboard 1.25.0-beta.0 → 1.25.0

package/src/cell/table_select.tsx

@@ -1,70 +1,70 @@
-import React, { useRef, KeyboardEvent } from 'react'
-import { MoreSelect, TableSelect, TableSelectProps } from '@gm-pc/react'
-import { findDOMNode } from 'react-dom'
-
-import KeyboardCell from '../core/cell'
-import { isInputUnBoundary, scrollIntoViewFixedWidth, useContextData } from '../utils'
-import { KeyboardWrapData } from '../types'
-
-function KCTableSelect<V = any>({ disabled, onKeyDown, ...rest }: TableSelectProps<V>) {
-  const cellRef = useRef<KeyboardCell>(null)
-  const targetRef = useRef<MoreSelect>(null)
-  const { wrapData, cellKey } = useContextData()
-
-  const handleScroll = (fixedWidths: KeyboardWrapData['fixedWidths']) => {
-    scrollIntoViewFixedWidth(findDOMNode(targetRef.current!) as HTMLElement, fixedWidths)
-  }
-
-  const handleFocus = () => {
-    // eslint-disable-next-line
-    targetRef.current?.apiDoFocus()
-  }
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
-    onKeyDown && onKeyDown(event)
-    if (isInputUnBoundary(event)) return
-
-    if (
-      event.key === 'ArrowUp' ||
-      event.key === 'ArrowDown' ||
-      event.key === 'ArrowLeft' ||
-      event.key === 'ArrowRight'
-    ) {
-      event.preventDefault()
-      // eslint-disable-next-line
-      cellRef.current?.apiDoDirectionByEventKey(event.key)
-    } else if (event.key === 'Tab') {
-      event.preventDefault()
-      // eslint-disable-next-line
-      cellRef.current?.apiDoTab()
-    } else if (event.key === 'Enter') {
-      event.preventDefault()
-      // @ts-ignore
-      targetRef.current.apiDoSelectWillActive()
-      // eslint-disable-next-line
-      cellRef.current?.apiDoEnter()
-    }
-  }
-
-  return (
-    <KeyboardCell
-      disabled={disabled}
-      ref={cellRef}
-      wrapData={wrapData}
-      cellKey={cellKey}
-      onFocus={handleFocus}
-      onScroll={handleScroll}
-    >
-      <TableSelect
-        {...(rest as any)}
-        ref={targetRef}
-        popoverType='realFocus'
-        onKeyDown={handleKeyDown}
-        isKeyboard
-        disabled={disabled}
-      />
-    </KeyboardCell>
-  )
-}
-
-export default KCTableSelect
+import React, { useRef, KeyboardEvent } from 'react'
+import { MoreSelect, TableSelect, TableSelectProps } from '@gm-pc/react'
+import { findDOMNode } from 'react-dom'
+
+import KeyboardCell from '../core/cell'
+import { isInputUnBoundary, scrollIntoViewFixedWidth, useContextData } from '../utils'
+import { KeyboardWrapData } from '../types'
+
+function KCTableSelect<V = any>({ disabled, onKeyDown, ...rest }: TableSelectProps<V>) {
+  const cellRef = useRef<KeyboardCell>(null)
+  const targetRef = useRef<MoreSelect>(null)
+  const { wrapData, cellKey } = useContextData()
+
+  const handleScroll = (fixedWidths: KeyboardWrapData['fixedWidths']) => {
+    scrollIntoViewFixedWidth(findDOMNode(targetRef.current!) as HTMLElement, fixedWidths)
+  }
+
+  const handleFocus = () => {
+    // eslint-disable-next-line
+    targetRef.current?.apiDoFocus()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    onKeyDown && onKeyDown(event)
+    if (isInputUnBoundary(event)) return
+
+    if (
+      event.key === 'ArrowUp' ||
+      event.key === 'ArrowDown' ||
+      event.key === 'ArrowLeft' ||
+      event.key === 'ArrowRight'
+    ) {
+      event.preventDefault()
+      // eslint-disable-next-line
+      cellRef.current?.apiDoDirectionByEventKey(event.key)
+    } else if (event.key === 'Tab') {
+      event.preventDefault()
+      // eslint-disable-next-line
+      cellRef.current?.apiDoTab()
+    } else if (event.key === 'Enter') {
+      event.preventDefault()
+      // @ts-ignore
+      targetRef.current.apiDoSelectWillActive()
+      // eslint-disable-next-line
+      cellRef.current?.apiDoEnter()
+    }
+  }
+
+  return (
+    <KeyboardCell
+      disabled={disabled}
+      ref={cellRef}
+      wrapData={wrapData}
+      cellKey={cellKey}
+      onFocus={handleFocus}
+      onScroll={handleScroll}
+    >
+      <TableSelect
+        {...(rest as any)}
+        ref={targetRef}
+        popoverType='realFocus'
+        onKeyDown={handleKeyDown}
+        isKeyboard
+        disabled={disabled}
+      />
+    </KeyboardCell>
+  )
+}
+
+export default KCTableSelect

package/src/core/cell.tsx

@@ -1,96 +1,96 @@
-import { cloneElement, Component, ReactElement } from 'react'
-import {
-  KEYBOARD_DIRECTION,
-  KEYBOARD_ENTER,
-  KEYBOARD_ONFOCUS,
-  KEYBOARD_TAB,
-} from '../utils'
-import { KeyboardCustomEvent, KeyboardDirection, KeyboardCellProps } from '../types'
-
-// 缓存起来，方便 Cell 不可用时把命令传给下一个响应者
-const dispatchCache: {
-  [id: string]: { eventName: string; detail?: Partial<KeyboardCustomEvent> }
-} = {}
-
-/**
- * Cell 和 Wrap 配合使用，使单元格具有响应键盘能力
- *
- * 使用：
- * - 实现 onFocus
- * - 监听 keydown，并根据自身需要处理 keydown 事件，每个组件都会不太一样
- * - 把动作 方向、Tab、Enter 通过 Cell 提供的方法 refCell.current.apiDoXXX 反馈给 Cell。具体方法见代码
- */
-class KeyboardCell extends Component<KeyboardCellProps> {
-  apiDoDirection = (direction: KeyboardDirection) => {
-    this._dispatch(KEYBOARD_DIRECTION, { direction })
-  }
-
-  apiDoDirectionByEventKey = (eventKey: string) => {
-    this.apiDoDirection(eventKey.slice(5).toLowerCase() as KeyboardDirection)
-  }
-
-  apiDoTab = () => {
-    this._dispatch(KEYBOARD_TAB)
-  }
-
-  apiDoEnter = () => {
-    this._dispatch(KEYBOARD_ENTER)
-  }
-
-  private _dispatch = (eventName: string, detail?: Partial<KeyboardCustomEvent>) => {
-    const { wrapData, cellKey } = this.props
-    dispatchCache[wrapData.id] = {
-      eventName,
-      detail,
-    }
-
-    window.dispatchEvent(
-      new CustomEvent(`${eventName}${wrapData.id}`, { detail: { ...detail, cellKey } })
-    )
-  }
-
-  private _handleFocus = (event: CustomEvent<KeyboardCustomEvent>) => {
-    const { wrapData, onFocus, onScroll, cellKey, disabled } = this.props
-
-    if (event.detail.cellKey !== cellKey) {
-      return
-    }
-
-    if (!disabled) {
-      onFocus()
-      onScroll(wrapData.fixedWidths)
-    }
-    // 不可响应，则抛给下一个响应者
-    else {
-      this._dispatch(
-        dispatchCache[wrapData.id].eventName,
-        dispatchCache[wrapData.id].detail
-      )
-    }
-  }
-
-  componentDidMount() {
-    const { wrapData } = this.props
-    window.addEventListener(
-      `${KEYBOARD_ONFOCUS}${wrapData.id}`,
-      (this._handleFocus as any) as EventListener
-    )
-  }
-
-  componentWillUnmount() {
-    const { wrapData } = this.props
-    window.removeEventListener(
-      `${KEYBOARD_ONFOCUS}${wrapData.id}`,
-      (this._handleFocus as any) as EventListener
-    )
-  }
-
-  render() {
-    const { children, cellKey } = this.props
-    return cloneElement(children as ReactElement, {
-      'data-cell-key': cellKey,
-    })
-  }
-}
-
-export default KeyboardCell
+import { cloneElement, Component, ReactElement } from 'react'
+import {
+  KEYBOARD_DIRECTION,
+  KEYBOARD_ENTER,
+  KEYBOARD_ONFOCUS,
+  KEYBOARD_TAB,
+} from '../utils'
+import { KeyboardCustomEvent, KeyboardDirection, KeyboardCellProps } from '../types'
+
+// 缓存起来，方便 Cell 不可用时把命令传给下一个响应者
+const dispatchCache: {
+  [id: string]: { eventName: string; detail?: Partial<KeyboardCustomEvent> }
+} = {}
+
+/**
+ * Cell 和 Wrap 配合使用，使单元格具有响应键盘能力
+ *
+ * 使用：
+ * - 实现 onFocus
+ * - 监听 keydown，并根据自身需要处理 keydown 事件，每个组件都会不太一样
+ * - 把动作 方向、Tab、Enter 通过 Cell 提供的方法 refCell.current.apiDoXXX 反馈给 Cell。具体方法见代码
+ */
+class KeyboardCell extends Component<KeyboardCellProps> {
+  apiDoDirection = (direction: KeyboardDirection) => {
+    this._dispatch(KEYBOARD_DIRECTION, { direction })
+  }
+
+  apiDoDirectionByEventKey = (eventKey: string) => {
+    this.apiDoDirection(eventKey.slice(5).toLowerCase() as KeyboardDirection)
+  }
+
+  apiDoTab = () => {
+    this._dispatch(KEYBOARD_TAB)
+  }
+
+  apiDoEnter = () => {
+    this._dispatch(KEYBOARD_ENTER)
+  }
+
+  private _dispatch = (eventName: string, detail?: Partial<KeyboardCustomEvent>) => {
+    const { wrapData, cellKey } = this.props
+    dispatchCache[wrapData.id] = {
+      eventName,
+      detail,
+    }
+
+    window.dispatchEvent(
+      new CustomEvent(`${eventName}${wrapData.id}`, { detail: { ...detail, cellKey } })
+    )
+  }
+
+  private _handleFocus = (event: CustomEvent<KeyboardCustomEvent>) => {
+    const { wrapData, onFocus, onScroll, cellKey, disabled } = this.props
+
+    if (event.detail.cellKey !== cellKey) {
+      return
+    }
+
+    if (!disabled) {
+      onFocus()
+      onScroll(wrapData.fixedWidths)
+    }
+    // 不可响应，则抛给下一个响应者
+    else {
+      this._dispatch(
+        dispatchCache[wrapData.id].eventName,
+        dispatchCache[wrapData.id].detail
+      )
+    }
+  }
+
+  componentDidMount() {
+    const { wrapData } = this.props
+    window.addEventListener(
+      `${KEYBOARD_ONFOCUS}${wrapData.id}`,
+      (this._handleFocus as any) as EventListener
+    )
+  }
+
+  componentWillUnmount() {
+    const { wrapData } = this.props
+    window.removeEventListener(
+      `${KEYBOARD_ONFOCUS}${wrapData.id}`,
+      (this._handleFocus as any) as EventListener
+    )
+  }
+
+  render() {
+    const { children, cellKey } = this.props
+    return cloneElement(children as ReactElement, {
+      'data-cell-key': cellKey,
+    })
+  }
+}
+
+export default KeyboardCell