@gm-pc/keyboard 1.24.7 → 1.24.9-beat.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/types.ts CHANGED
@@ -1,87 +1,87 @@
1
- import { TableXColumn } from '@gm-pc/table-x'
2
-
3
- type KeyboardTableXColumn = {
4
- isKeyboard?: boolean
5
- } & TableXColumn
6
-
7
- interface KeyboardTableXProps {
8
- /* 通过 id 来确定本单元格内通信,避免多表格时混了。请确保 id 唯一 */
9
- id: string
10
- columns: KeyboardTableXColumn[]
11
- /** 按下键是否允许增加一行数据 */
12
- allowAddRowOnDownKey?: boolean
13
- /* 增加一行数据 */
14
- onAddRow(): void
15
- onBeforeDispatch?(options: {
16
- actionName: string
17
- to: { rowKey: number; columnKey: string }
18
- from: { rowKey: number; columnKey: string }
19
- }): boolean
20
- }
21
-
22
- type KeyboardDirection = 'left' | 'right' | 'up' | 'down'
23
- interface KeyboardCustomEvent {
24
- cellKey: string
25
- direction: KeyboardDirection
26
- }
27
-
28
- interface KeyboardWrapData {
29
- id: string
30
- fixedWidths: {
31
- leftFixedWidth: number
32
- rightFixedWidth: number
33
- }
34
- }
35
-
36
- interface KeyboardCellProps {
37
- /** wrap 传过来的数据 */
38
- wrapData: KeyboardWrapData
39
- /** Cell 的身份标志,让 Wrap 更方便找到 */
40
- cellKey: string
41
- /** Wrap 要 focus 到单元格的时候触发 onFocus,请实现此功能 */
42
- onFocus(): void
43
- /** 表格多的时候需要滚到视窗 */
44
- onScroll(data: KeyboardWrapData['fixedWidths']): void
45
- /** 是否具有响应能力 */
46
- disabled?: boolean
47
- }
48
-
49
- interface WrapProps {
50
- /** 通过 id 来确定本单元格内通信,避免多表格时混了,请确保 id 唯一 */
51
- id: string
52
- /** 增加一行数据 */
53
- onAddRow(): void
54
- onBeforeDispatch?(options: {
55
- actionName: string
56
- to: { rowKey: number; columnKey: string }
57
- from: { rowKey: number; columnKey: string }
58
- }): boolean
59
-
60
- /** 按下键是否允许增加一行数据 */
61
- allowAddRowOnDownKey?: boolean
62
-
63
- /** Wrap 需要知道字段集合,以便能找到相应的单元格,请确保表格的顺序一致 */
64
- columnKeys: string[]
65
- /** Wrap 需要知道有多少行,以便能找到相应的单元格,同时必要时会触发 onAddRow,告知调用方需要增加一行数据 */
66
- dataLength: number
67
- fixedWidths: {
68
- leftFixedWidth: number
69
- rightFixedWidth: number
70
- }
71
- }
72
-
73
- type MoreSelectRef = {
74
- /** 默认搜索 */
75
- handleInitSearch: (q?: string) => void
76
- }
77
-
78
- export type {
79
- KeyboardCellProps,
80
- WrapProps,
81
- KeyboardTableXProps,
82
- KeyboardTableXColumn,
83
- KeyboardCustomEvent,
84
- KeyboardDirection,
85
- KeyboardWrapData,
86
- MoreSelectRef,
87
- }
1
+ import { TableXColumn } from '@gm-pc/table-x'
2
+
3
+ type KeyboardTableXColumn = {
4
+ isKeyboard?: boolean
5
+ } & TableXColumn
6
+
7
+ interface KeyboardTableXProps {
8
+ /* 通过 id 来确定本单元格内通信,避免多表格时混了。请确保 id 唯一 */
9
+ id: string
10
+ columns: KeyboardTableXColumn[]
11
+ /** 按下键是否允许增加一行数据 */
12
+ allowAddRowOnDownKey?: boolean
13
+ /* 增加一行数据 */
14
+ onAddRow(): void
15
+ onBeforeDispatch?(options: {
16
+ actionName: string
17
+ to: { rowKey: number; columnKey: string }
18
+ from: { rowKey: number; columnKey: string }
19
+ }): boolean
20
+ }
21
+
22
+ type KeyboardDirection = 'left' | 'right' | 'up' | 'down'
23
+ interface KeyboardCustomEvent {
24
+ cellKey: string
25
+ direction: KeyboardDirection
26
+ }
27
+
28
+ interface KeyboardWrapData {
29
+ id: string
30
+ fixedWidths: {
31
+ leftFixedWidth: number
32
+ rightFixedWidth: number
33
+ }
34
+ }
35
+
36
+ interface KeyboardCellProps {
37
+ /** wrap 传过来的数据 */
38
+ wrapData: KeyboardWrapData
39
+ /** Cell 的身份标志,让 Wrap 更方便找到 */
40
+ cellKey: string
41
+ /** Wrap 要 focus 到单元格的时候触发 onFocus,请实现此功能 */
42
+ onFocus(): void
43
+ /** 表格多的时候需要滚到视窗 */
44
+ onScroll(data: KeyboardWrapData['fixedWidths']): void
45
+ /** 是否具有响应能力 */
46
+ disabled?: boolean
47
+ }
48
+
49
+ interface WrapProps {
50
+ /** 通过 id 来确定本单元格内通信,避免多表格时混了,请确保 id 唯一 */
51
+ id: string
52
+ /** 增加一行数据 */
53
+ onAddRow(): void
54
+ onBeforeDispatch?(options: {
55
+ actionName: string
56
+ to: { rowKey: number; columnKey: string }
57
+ from: { rowKey: number; columnKey: string }
58
+ }): boolean
59
+
60
+ /** 按下键是否允许增加一行数据 */
61
+ allowAddRowOnDownKey?: boolean
62
+
63
+ /** Wrap 需要知道字段集合,以便能找到相应的单元格,请确保表格的顺序一致 */
64
+ columnKeys: string[]
65
+ /** Wrap 需要知道有多少行,以便能找到相应的单元格,同时必要时会触发 onAddRow,告知调用方需要增加一行数据 */
66
+ dataLength: number
67
+ fixedWidths: {
68
+ leftFixedWidth: number
69
+ rightFixedWidth: number
70
+ }
71
+ }
72
+
73
+ type MoreSelectRef = {
74
+ /** 默认搜索 */
75
+ handleInitSearch: (q?: string) => void
76
+ }
77
+
78
+ export type {
79
+ KeyboardCellProps,
80
+ WrapProps,
81
+ KeyboardTableXProps,
82
+ KeyboardTableXColumn,
83
+ KeyboardCustomEvent,
84
+ KeyboardDirection,
85
+ KeyboardWrapData,
86
+ MoreSelectRef,
87
+ }
@@ -1,21 +1,21 @@
1
- const KEYBOARD_ONFOCUS = 'KEYBOARD_ONFOCUS_'
2
- const KEYBOARD_DIRECTION = 'KEYBOARD_DIRECTION_'
3
- const KEYBOARD_ENTER = 'KEYBOARD_ENTER_'
4
- const KEYBOARD_TAB = 'KEYBOARD_TAB_'
5
-
6
- const KeyboardActionsName = {
7
- ENTER: 'enter',
8
- TAB: 'tab',
9
- UP: 'up',
10
- DOWN: 'down',
11
- LEFT: 'left',
12
- RIGHT: 'right',
13
- }
14
-
15
- export {
16
- KEYBOARD_ONFOCUS,
17
- KeyboardActionsName,
18
- KEYBOARD_DIRECTION,
19
- KEYBOARD_TAB,
20
- KEYBOARD_ENTER,
21
- }
1
+ const KEYBOARD_ONFOCUS = 'KEYBOARD_ONFOCUS_'
2
+ const KEYBOARD_DIRECTION = 'KEYBOARD_DIRECTION_'
3
+ const KEYBOARD_ENTER = 'KEYBOARD_ENTER_'
4
+ const KEYBOARD_TAB = 'KEYBOARD_TAB_'
5
+
6
+ const KeyboardActionsName = {
7
+ ENTER: 'enter',
8
+ TAB: 'tab',
9
+ UP: 'up',
10
+ DOWN: 'down',
11
+ LEFT: 'left',
12
+ RIGHT: 'right',
13
+ }
14
+
15
+ export {
16
+ KEYBOARD_ONFOCUS,
17
+ KeyboardActionsName,
18
+ KEYBOARD_DIRECTION,
19
+ KEYBOARD_TAB,
20
+ KEYBOARD_ENTER,
21
+ }
@@ -1,4 +1,4 @@
1
- import { createContext } from 'react'
2
-
3
- export const CellKeyContext = createContext<string>('')
4
- export const WrapContext = createContext<string>('')
1
+ import { createContext } from 'react'
2
+
3
+ export const CellKeyContext = createContext<string>('')
4
+ export const WrapContext = createContext<string>('')
@@ -1,14 +1,14 @@
1
- import { KEYBOARD_ONFOCUS } from './constant'
2
- import { KeyboardCustomEvent } from '../types'
3
-
4
- function doFocus(id: string, rowKey: number, columnKey: string) {
5
- window.dispatchEvent(
6
- new CustomEvent<Pick<KeyboardCustomEvent, 'cellKey'>>(`${KEYBOARD_ONFOCUS}${id}`, {
7
- detail: {
8
- cellKey: `${rowKey}_${columnKey}`,
9
- },
10
- })
11
- )
12
- }
13
-
14
- export default doFocus
1
+ import { KEYBOARD_ONFOCUS } from './constant'
2
+ import { KeyboardCustomEvent } from '../types'
3
+
4
+ function doFocus(id: string, rowKey: number, columnKey: string) {
5
+ window.dispatchEvent(
6
+ new CustomEvent<Pick<KeyboardCustomEvent, 'cellKey'>>(`${KEYBOARD_ONFOCUS}${id}`, {
7
+ detail: {
8
+ cellKey: `${rowKey}_${columnKey}`,
9
+ },
10
+ })
11
+ )
12
+ }
13
+
14
+ export default doFocus
@@ -1,11 +1,11 @@
1
- import _ from 'lodash'
2
- import { KeyboardTableXColumn } from '../types'
3
-
4
- function getColumnKey(column: KeyboardTableXColumn) {
5
- if (_.isString(column.accessor)) return column.accessor
6
- else if (_.isFunction(column.accessor) && column.id) return column.id
7
- else if (column.id) return column.id
8
- return null
9
- }
10
-
11
- export default getColumnKey
1
+ import _ from 'lodash'
2
+ import { KeyboardTableXColumn } from '../types'
3
+
4
+ function getColumnKey(column: KeyboardTableXColumn) {
5
+ if (_.isString(column.accessor)) return column.accessor
6
+ else if (_.isFunction(column.accessor) && column.id) return column.id
7
+ else if (column.id) return column.id
8
+ return null
9
+ }
10
+
11
+ export default getColumnKey
@@ -1,8 +1,8 @@
1
- function getKey(cellKey: string) {
2
- const index = cellKey.indexOf('_')
3
- const rowKey = parseInt(cellKey.slice(0, index), 10)
4
- const columnKey = cellKey.slice(index + 1)
5
- return { rowKey, columnKey }
6
- }
7
-
8
- export default getKey
1
+ function getKey(cellKey: string) {
2
+ const index = cellKey.indexOf('_')
3
+ const rowKey = parseInt(cellKey.slice(0, index), 10)
4
+ const columnKey = cellKey.slice(index + 1)
5
+ return { rowKey, columnKey }
6
+ }
7
+
8
+ export default getKey
@@ -1,8 +1,8 @@
1
- export { default as getColumnKey } from './get_column_key'
2
- export * from './context'
3
- export * from './constant'
4
- export { default as getKey } from './get_key'
5
- export { default as doFocus } from './do_focus'
6
- export { default as useContextData } from './use_context_data'
7
- export { default as isInputUnBoundary } from './is_input_un_boundary'
8
- export { default as scrollIntoViewFixedWidth } from './scroll_into_view_fixed_width'
1
+ export { default as getColumnKey } from './get_column_key'
2
+ export * from './context'
3
+ export * from './constant'
4
+ export { default as getKey } from './get_key'
5
+ export { default as doFocus } from './do_focus'
6
+ export { default as useContextData } from './use_context_data'
7
+ export { default as isInputUnBoundary } from './is_input_un_boundary'
8
+ export { default as scrollIntoViewFixedWidth } from './scroll_into_view_fixed_width'
@@ -1,29 +1,29 @@
1
- import { KeyboardEvent } from 'react'
2
-
3
- function is_input_un_boundary(event: KeyboardEvent<HTMLElement>): boolean {
4
- const { key, target } = event
5
- const {
6
- tagName,
7
- type,
8
- selectionStart,
9
- selectionEnd,
10
- value,
11
- } = target as HTMLInputElement
12
-
13
- if (
14
- tagName === 'INPUT' &&
15
- type === 'text' &&
16
- (key === 'ArrowLeft' || key === 'ArrowRight')
17
- ) {
18
- // 有选择文本
19
- if (selectionStart !== selectionEnd) return true
20
- else if (event.key === 'ArrowLeft') {
21
- if (selectionStart !== 0) return true
22
- } else if (event.key === 'ArrowRight') {
23
- if (selectionEnd !== value.length) return true
24
- }
25
- }
26
- return false
27
- }
28
-
29
- export default is_input_un_boundary
1
+ import { KeyboardEvent } from 'react'
2
+
3
+ function is_input_un_boundary(event: KeyboardEvent<HTMLElement>): boolean {
4
+ const { key, target } = event
5
+ const {
6
+ tagName,
7
+ type,
8
+ selectionStart,
9
+ selectionEnd,
10
+ value,
11
+ } = target as HTMLInputElement
12
+
13
+ if (
14
+ tagName === 'INPUT' &&
15
+ type === 'text' &&
16
+ (key === 'ArrowLeft' || key === 'ArrowRight')
17
+ ) {
18
+ // 有选择文本
19
+ if (selectionStart !== selectionEnd) return true
20
+ else if (event.key === 'ArrowLeft') {
21
+ if (selectionStart !== 0) return true
22
+ } else if (event.key === 'ArrowRight') {
23
+ if (selectionEnd !== value.length) return true
24
+ }
25
+ }
26
+ return false
27
+ }
28
+
29
+ export default is_input_un_boundary
@@ -1,71 +1,71 @@
1
- import { TableXUtil } from '@gm-pc/table-x'
2
-
3
- import { KeyboardWrapData } from '../types'
4
- const { TABLE_X } = TableXUtil
5
-
6
- function scrollIntoViewFixedWidth(
7
- dom: HTMLElement,
8
- fixedWidth: KeyboardWrapData['fixedWidths']
9
- ) {
10
- const td = getTd(dom)
11
- if (!td) return
12
-
13
- const table = getTable(dom)
14
- if (!table) return
15
-
16
- const tableRect = table.getBoundingClientRect()
17
- const tdRect = td.getBoundingClientRect()
18
-
19
- const { leftFixedWidth, rightFixedWidth } = fixedWidth
20
- const { scrollLeft } = table
21
- const { offsetLeft, offsetWidth } = td
22
-
23
- if (offsetLeft - leftFixedWidth < scrollLeft) {
24
- table.scrollLeft = offsetLeft - leftFixedWidth
25
- } else if (
26
- offsetLeft + offsetWidth - (table.offsetWidth - rightFixedWidth) >
27
- scrollLeft
28
- ) {
29
- table.scrollLeft = offsetLeft + offsetWidth - (table.offsetWidth - rightFixedWidth)
30
- }
31
-
32
- // 只 tablex 生效
33
- if (table.classList.contains('gm-table-x-virtualized')) {
34
- // 如果被遮挡
35
- if (tdRect.top - tableRect.top < TABLE_X.HEIGHT_HEAD_TR) {
36
- // 则滚一个 tr 距离
37
- table.scrollTop = table.scrollTop - TABLE_X.HEIGHT_TR
38
- }
39
- }
40
- }
41
-
42
- export default scrollIntoViewFixedWidth
43
-
44
- function getTd(dom: HTMLElement) {
45
- let parentNode = dom?.parentNode as HTMLElement
46
- while (
47
- !(
48
- parentNode.classList.contains('rt-td') ||
49
- parentNode.classList.contains('gm-table-x-td')
50
- )
51
- ) {
52
- parentNode = parentNode.parentNode as HTMLElement
53
- if (parentNode === document.body) return null
54
- }
55
-
56
- return parentNode
57
- }
58
-
59
- function getTable(dom: HTMLElement) {
60
- let parentNode = dom?.parentNode as HTMLElement
61
- while (
62
- !(
63
- parentNode.classList.contains('gm-table-x') ||
64
- parentNode.classList.contains('gm-table-x-virtualized')
65
- )
66
- ) {
67
- parentNode = parentNode.parentNode as HTMLElement
68
- if (parentNode === document.body) return null
69
- }
70
- return parentNode
71
- }
1
+ import { TableXUtil } from '@gm-pc/table-x'
2
+
3
+ import { KeyboardWrapData } from '../types'
4
+ const { TABLE_X } = TableXUtil
5
+
6
+ function scrollIntoViewFixedWidth(
7
+ dom: HTMLElement,
8
+ fixedWidth: KeyboardWrapData['fixedWidths']
9
+ ) {
10
+ const td = getTd(dom)
11
+ if (!td) return
12
+
13
+ const table = getTable(dom)
14
+ if (!table) return
15
+
16
+ const tableRect = table.getBoundingClientRect()
17
+ const tdRect = td.getBoundingClientRect()
18
+
19
+ const { leftFixedWidth, rightFixedWidth } = fixedWidth
20
+ const { scrollLeft } = table
21
+ const { offsetLeft, offsetWidth } = td
22
+
23
+ if (offsetLeft - leftFixedWidth < scrollLeft) {
24
+ table.scrollLeft = offsetLeft - leftFixedWidth
25
+ } else if (
26
+ offsetLeft + offsetWidth - (table.offsetWidth - rightFixedWidth) >
27
+ scrollLeft
28
+ ) {
29
+ table.scrollLeft = offsetLeft + offsetWidth - (table.offsetWidth - rightFixedWidth)
30
+ }
31
+
32
+ // 只 tablex 生效
33
+ if (table.classList.contains('gm-table-x-virtualized')) {
34
+ // 如果被遮挡
35
+ if (tdRect.top - tableRect.top < TABLE_X.HEIGHT_HEAD_TR) {
36
+ // 则滚一个 tr 距离
37
+ table.scrollTop = table.scrollTop - TABLE_X.HEIGHT_TR
38
+ }
39
+ }
40
+ }
41
+
42
+ export default scrollIntoViewFixedWidth
43
+
44
+ function getTd(dom: HTMLElement) {
45
+ let parentNode = dom?.parentNode as HTMLElement
46
+ while (
47
+ !(
48
+ parentNode.classList.contains('rt-td') ||
49
+ parentNode.classList.contains('gm-table-x-td')
50
+ )
51
+ ) {
52
+ parentNode = parentNode.parentNode as HTMLElement
53
+ if (parentNode === document.body) return null
54
+ }
55
+
56
+ return parentNode
57
+ }
58
+
59
+ function getTable(dom: HTMLElement) {
60
+ let parentNode = dom?.parentNode as HTMLElement
61
+ while (
62
+ !(
63
+ parentNode.classList.contains('gm-table-x') ||
64
+ parentNode.classList.contains('gm-table-x-virtualized')
65
+ )
66
+ ) {
67
+ parentNode = parentNode.parentNode as HTMLElement
68
+ if (parentNode === document.body) return null
69
+ }
70
+ return parentNode
71
+ }
@@ -1,12 +1,12 @@
1
- import { useContext } from 'react'
2
- import { WrapContext, CellKeyContext } from './context'
3
- import { KeyboardWrapData } from '../types'
4
-
5
- function useContextData() {
6
- const wrapData: KeyboardWrapData = JSON.parse(useContext(WrapContext))
7
- const cellKey = useContext(CellKeyContext)
8
-
9
- return { wrapData, cellKey }
10
- }
11
-
12
- export default useContextData
1
+ import { useContext } from 'react'
2
+ import { WrapContext, CellKeyContext } from './context'
3
+ import { KeyboardWrapData } from '../types'
4
+
5
+ function useContextData() {
6
+ const wrapData: KeyboardWrapData = JSON.parse(useContext(WrapContext))
7
+ const cellKey = useContext(CellKeyContext)
8
+
9
+ return { wrapData, cellKey }
10
+ }
11
+
12
+ export default useContextData