@king-design/intact 3.6.1 → 3.6.2-beta.0
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/components/dropdown/constants.ts +25 -0
- package/components/dropdown/item.ts +1 -2
- package/components/dropdown/menu.ts +1 -1
- package/components/dropdown/useItemKeyboard.ts +38 -0
- package/components/dropdown/{useKeyboard.ts → useMenuKeyboard.ts} +3 -62
- package/es/components/dropdown/constants.d.ts +22 -0
- package/es/components/dropdown/constants.js +7 -0
- package/es/components/dropdown/item.js +1 -1
- package/es/components/dropdown/menu.js +1 -1
- package/es/components/dropdown/useItemKeyboard.d.ts +6 -0
- package/es/components/dropdown/useItemKeyboard.js +32 -0
- package/es/components/dropdown/useMenuKeyboard.d.ts +2 -0
- package/es/components/dropdown/{useKeyboard.js → useMenuKeyboard.js} +3 -38
- package/es/index.d.ts +2 -2
- package/es/index.js +2 -2
- package/index.ts +2 -2
- package/package.json +1 -1
- package/es/components/dropdown/useKeyboard.d.ts +0 -23
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import {Component} from 'intact';
|
|
2
|
+
import type {DropdownItem} from './item';
|
|
3
|
+
|
|
4
|
+
export interface ItemEvents {
|
|
5
|
+
onFocusin: () => void;
|
|
6
|
+
onFocusout: () => void;
|
|
7
|
+
onShowMenu: () => void;
|
|
8
|
+
onHideMenu: () => void;
|
|
9
|
+
onSelect: () => void;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export enum Direction {
|
|
13
|
+
Up,
|
|
14
|
+
Down
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export type MenuKeyboardMethods = {
|
|
18
|
+
reset: () => void;
|
|
19
|
+
focus: (item: DropdownItem) => void;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export type ItemComponent = Component<{disabled: boolean}>
|
|
23
|
+
|
|
24
|
+
export const ITEM_EVENTS = 'ItemEvents';
|
|
25
|
+
export const MENU_KEYBOARD = 'MenuKeyboard';
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import {Component, TypeDefs, inject, VNodeComponentClass} from 'intact';
|
|
2
2
|
import template from './item.vdt';
|
|
3
3
|
import {bind} from '../utils';
|
|
4
|
-
import {useItemKeyboard
|
|
4
|
+
import {useItemKeyboard} from './useItemKeyboard';
|
|
5
5
|
import {Dropdown, DROPDOWN} from './dropdown';
|
|
6
6
|
import {type DropdownMenu, DROPDOWN_MENU} from './menu';
|
|
7
|
-
import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
|
|
8
7
|
import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
|
|
9
8
|
import { useConfigContext } from '../config';
|
|
10
9
|
import type { Tooltip } from '../tooltip/tooltip';
|
|
@@ -3,7 +3,7 @@ import template from './menu.vdt';
|
|
|
3
3
|
import {bind} from '../utils';
|
|
4
4
|
import {Dropdown, DROPDOWN} from './dropdown';
|
|
5
5
|
import {useTransition} from './useTransition';
|
|
6
|
-
import {useMenuKeyboard} from './
|
|
6
|
+
import {useMenuKeyboard} from './useMenuKeyboard';
|
|
7
7
|
import {useMouseOutsidable} from '../../hooks/useMouseOutsidable';
|
|
8
8
|
import {FeedbackCallback} from './usePosition';
|
|
9
9
|
import { useConfigContext } from '../config';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import {useInstance, inject} from 'intact';
|
|
2
|
+
import {useRecordItem} from '../../hooks/useRecordComponent';
|
|
3
|
+
import {useState} from '../../hooks/useState';
|
|
4
|
+
import type {DropdownItem} from './item';
|
|
5
|
+
import { ItemEvents, MENU_KEYBOARD, MenuKeyboardMethods, ITEM_EVENTS } from './constants';
|
|
6
|
+
|
|
7
|
+
export function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>) {
|
|
8
|
+
const isFocus = useState(false);
|
|
9
|
+
const keyboard = inject<MenuKeyboardMethods>(MENU_KEYBOARD)!;
|
|
10
|
+
const instance = useInstance() as DropdownItem;
|
|
11
|
+
|
|
12
|
+
useRecordItem<DropdownItem, ItemEvents>(ITEM_EVENTS, instance, {
|
|
13
|
+
...itemEvents,
|
|
14
|
+
onFocusin() {
|
|
15
|
+
isFocus.set(true);
|
|
16
|
+
},
|
|
17
|
+
onFocusout() {
|
|
18
|
+
isFocus.set(false);
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
return {
|
|
23
|
+
onMouseEnter(e: MouseEvent) {
|
|
24
|
+
instance.trigger('mouseenter', e);
|
|
25
|
+
if (instance.get('disabled')) return;
|
|
26
|
+
keyboard.focus(instance);
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
onMouseLeave(e: MouseEvent) {
|
|
30
|
+
instance.trigger('mouseleave', e);
|
|
31
|
+
keyboard.reset();
|
|
32
|
+
// If it is a virtual item, it needs to be reset manually because the DOM is reused.
|
|
33
|
+
isFocus.set(false);
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
isFocus,
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -5,47 +5,21 @@ import {
|
|
|
5
5
|
useInstance,
|
|
6
6
|
findDomFromVNode,
|
|
7
7
|
provide,
|
|
8
|
-
inject,
|
|
9
8
|
Component,
|
|
10
|
-
Children,
|
|
11
|
-
VNodeComponentClass,
|
|
12
9
|
isComponentClass,
|
|
13
10
|
isComponentFunction,
|
|
14
11
|
hasVNodeChildren,
|
|
15
12
|
hasMultipleChildren,
|
|
16
13
|
VNode,
|
|
17
14
|
} from 'intact';
|
|
18
|
-
import {useRecordParent
|
|
15
|
+
import {useRecordParent} from '../../hooks/useRecordComponent';
|
|
19
16
|
import {useKeyboard} from '../../hooks/useKeyboard';
|
|
20
|
-
import {
|
|
21
|
-
import {eachChildren, isComponentVNode} from '../utils';
|
|
17
|
+
import {isComponentVNode} from '../utils';
|
|
22
18
|
import {DropdownItem} from './item';
|
|
23
19
|
// can not import DropdownMenu from index.ts, otherwise it will cause circle reference
|
|
24
20
|
// import {DropdownMenu} from './';
|
|
25
21
|
import {DropdownMenu} from './menu';
|
|
26
|
-
|
|
27
|
-
interface ItemEvents {
|
|
28
|
-
onFocusin: () => void;
|
|
29
|
-
onFocusout: () => void;
|
|
30
|
-
onShowMenu: () => void;
|
|
31
|
-
onHideMenu: () => void;
|
|
32
|
-
onSelect: () => void;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export enum Direction {
|
|
36
|
-
Up,
|
|
37
|
-
Down
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export type MenuKeyboardMethods = {
|
|
41
|
-
reset: () => void;
|
|
42
|
-
focus: (item: DropdownItem) => void;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
type ItemComponent = Component<{disabled: boolean}>
|
|
46
|
-
|
|
47
|
-
const ITEM_EVENTS = 'ItemEvents';
|
|
48
|
-
const MENU_KEYBOARD = 'MenuKeyboard';
|
|
22
|
+
import { ITEM_EVENTS, ItemEvents, Direction, MenuKeyboardMethods, MENU_KEYBOARD } from './constants';
|
|
49
23
|
|
|
50
24
|
export function useMenuKeyboard() {
|
|
51
25
|
const items: DropdownItem[] = [];
|
|
@@ -178,39 +152,6 @@ export function useMenuKeyboard() {
|
|
|
178
152
|
] as const;
|
|
179
153
|
}
|
|
180
154
|
|
|
181
|
-
export function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>) {
|
|
182
|
-
const isFocus = useState(false);
|
|
183
|
-
const keyboard = inject<MenuKeyboardMethods>(MENU_KEYBOARD)!;
|
|
184
|
-
const instance = useInstance() as DropdownItem;
|
|
185
|
-
|
|
186
|
-
useRecordItem<DropdownItem, ItemEvents>(ITEM_EVENTS, instance, {
|
|
187
|
-
...itemEvents,
|
|
188
|
-
onFocusin() {
|
|
189
|
-
isFocus.set(true);
|
|
190
|
-
},
|
|
191
|
-
onFocusout() {
|
|
192
|
-
isFocus.set(false);
|
|
193
|
-
},
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
return {
|
|
197
|
-
onMouseEnter(e: MouseEvent) {
|
|
198
|
-
instance.trigger('mouseenter', e);
|
|
199
|
-
if (instance.get('disabled')) return;
|
|
200
|
-
keyboard.focus(instance);
|
|
201
|
-
},
|
|
202
|
-
|
|
203
|
-
onMouseLeave(e: MouseEvent) {
|
|
204
|
-
instance.trigger('mouseleave', e);
|
|
205
|
-
keyboard.reset();
|
|
206
|
-
// If it is a virtual item, it needs to be reset manually because the DOM is reused.
|
|
207
|
-
isFocus.set(false);
|
|
208
|
-
},
|
|
209
|
-
|
|
210
|
-
isFocus,
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
|
|
214
155
|
function fixIndex(index: number, max: number) {
|
|
215
156
|
if (index > max) {
|
|
216
157
|
index = 0;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Component } from 'intact';
|
|
2
|
+
import type { DropdownItem } from './item';
|
|
3
|
+
export interface ItemEvents {
|
|
4
|
+
onFocusin: () => void;
|
|
5
|
+
onFocusout: () => void;
|
|
6
|
+
onShowMenu: () => void;
|
|
7
|
+
onHideMenu: () => void;
|
|
8
|
+
onSelect: () => void;
|
|
9
|
+
}
|
|
10
|
+
export declare enum Direction {
|
|
11
|
+
Up = 0,
|
|
12
|
+
Down = 1
|
|
13
|
+
}
|
|
14
|
+
export type MenuKeyboardMethods = {
|
|
15
|
+
reset: () => void;
|
|
16
|
+
focus: (item: DropdownItem) => void;
|
|
17
|
+
};
|
|
18
|
+
export type ItemComponent = Component<{
|
|
19
|
+
disabled: boolean;
|
|
20
|
+
}>;
|
|
21
|
+
export declare const ITEM_EVENTS = "ItemEvents";
|
|
22
|
+
export declare const MENU_KEYBOARD = "MenuKeyboard";
|
|
@@ -4,7 +4,7 @@ import { __decorate } from "tslib";
|
|
|
4
4
|
import { Component, inject } from 'intact';
|
|
5
5
|
import template from './item.vdt';
|
|
6
6
|
import { bind } from '../utils';
|
|
7
|
-
import { useItemKeyboard } from './
|
|
7
|
+
import { useItemKeyboard } from './useItemKeyboard';
|
|
8
8
|
import { DROPDOWN } from './dropdown';
|
|
9
9
|
import { DROPDOWN_MENU } from './menu';
|
|
10
10
|
import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
|
|
@@ -6,7 +6,7 @@ import template from './menu.vdt';
|
|
|
6
6
|
import { bind } from '../utils';
|
|
7
7
|
import { DROPDOWN } from './dropdown';
|
|
8
8
|
import { useTransition } from './useTransition';
|
|
9
|
-
import { useMenuKeyboard } from './
|
|
9
|
+
import { useMenuKeyboard } from './useMenuKeyboard';
|
|
10
10
|
import { useMouseOutsidable } from '../../hooks/useMouseOutsidable';
|
|
11
11
|
import { useConfigContext } from '../config';
|
|
12
12
|
import { usePositionForDropdownMenu } from './usePosition';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ItemEvents } from './constants';
|
|
2
|
+
export declare function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>): {
|
|
3
|
+
onMouseEnter(e: MouseEvent): void;
|
|
4
|
+
onMouseLeave(e: MouseEvent): void;
|
|
5
|
+
isFocus: import("../../hooks/useState").State<boolean>;
|
|
6
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
|
+
import { useInstance, inject } from 'intact';
|
|
3
|
+
import { useRecordItem } from '../../hooks/useRecordComponent';
|
|
4
|
+
import { useState } from '../../hooks/useState';
|
|
5
|
+
import { MENU_KEYBOARD, ITEM_EVENTS } from './constants';
|
|
6
|
+
export function useItemKeyboard(itemEvents) {
|
|
7
|
+
var isFocus = useState(false);
|
|
8
|
+
var keyboard = inject(MENU_KEYBOARD);
|
|
9
|
+
var instance = useInstance();
|
|
10
|
+
useRecordItem(ITEM_EVENTS, instance, _extends({}, itemEvents, {
|
|
11
|
+
onFocusin: function onFocusin() {
|
|
12
|
+
isFocus.set(true);
|
|
13
|
+
},
|
|
14
|
+
onFocusout: function onFocusout() {
|
|
15
|
+
isFocus.set(false);
|
|
16
|
+
}
|
|
17
|
+
}));
|
|
18
|
+
return {
|
|
19
|
+
onMouseEnter: function onMouseEnter(e) {
|
|
20
|
+
instance.trigger('mouseenter', e);
|
|
21
|
+
if (instance.get('disabled')) return;
|
|
22
|
+
keyboard.focus(instance);
|
|
23
|
+
},
|
|
24
|
+
onMouseLeave: function onMouseLeave(e) {
|
|
25
|
+
instance.trigger('mouseleave', e);
|
|
26
|
+
keyboard.reset();
|
|
27
|
+
// If it is a virtual item, it needs to be reset manually because the DOM is reused.
|
|
28
|
+
isFocus.set(false);
|
|
29
|
+
},
|
|
30
|
+
isFocus: isFocus
|
|
31
|
+
};
|
|
32
|
+
}
|
|
@@ -1,20 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { useRecordParent, useRecordItem } from '../../hooks/useRecordComponent';
|
|
1
|
+
import { onBeforeUpdate, onMounted, onUpdated, useInstance, findDomFromVNode, provide, isComponentClass, isComponentFunction, hasVNodeChildren, hasMultipleChildren } from 'intact';
|
|
2
|
+
import { useRecordParent } from '../../hooks/useRecordComponent';
|
|
4
3
|
import { useKeyboard } from '../../hooks/useKeyboard';
|
|
5
|
-
import { useState } from '../../hooks/useState';
|
|
6
4
|
import { isComponentVNode } from '../utils';
|
|
7
5
|
import { DropdownItem } from './item';
|
|
8
6
|
// can not import DropdownMenu from index.ts, otherwise it will cause circle reference
|
|
9
7
|
// import {DropdownMenu} from './';
|
|
10
8
|
import { DropdownMenu } from './menu';
|
|
11
|
-
|
|
12
|
-
(function (Direction) {
|
|
13
|
-
Direction[Direction["Up"] = 0] = "Up";
|
|
14
|
-
Direction[Direction["Down"] = 1] = "Down";
|
|
15
|
-
})(Direction || (Direction = {}));
|
|
16
|
-
var ITEM_EVENTS = 'ItemEvents';
|
|
17
|
-
var MENU_KEYBOARD = 'MenuKeyboard';
|
|
9
|
+
import { ITEM_EVENTS, Direction, MENU_KEYBOARD } from './constants';
|
|
18
10
|
export function useMenuKeyboard() {
|
|
19
11
|
var items = [];
|
|
20
12
|
var itemEvents = useRecordParent(ITEM_EVENTS, true);
|
|
@@ -121,33 +113,6 @@ export function useMenuKeyboard() {
|
|
|
121
113
|
enter: makeEventCall('onSelect')
|
|
122
114
|
}), focusByIndex, reset];
|
|
123
115
|
}
|
|
124
|
-
export function useItemKeyboard(itemEvents) {
|
|
125
|
-
var isFocus = useState(false);
|
|
126
|
-
var keyboard = inject(MENU_KEYBOARD);
|
|
127
|
-
var instance = useInstance();
|
|
128
|
-
useRecordItem(ITEM_EVENTS, instance, _extends({}, itemEvents, {
|
|
129
|
-
onFocusin: function onFocusin() {
|
|
130
|
-
isFocus.set(true);
|
|
131
|
-
},
|
|
132
|
-
onFocusout: function onFocusout() {
|
|
133
|
-
isFocus.set(false);
|
|
134
|
-
}
|
|
135
|
-
}));
|
|
136
|
-
return {
|
|
137
|
-
onMouseEnter: function onMouseEnter(e) {
|
|
138
|
-
instance.trigger('mouseenter', e);
|
|
139
|
-
if (instance.get('disabled')) return;
|
|
140
|
-
keyboard.focus(instance);
|
|
141
|
-
},
|
|
142
|
-
onMouseLeave: function onMouseLeave(e) {
|
|
143
|
-
instance.trigger('mouseleave', e);
|
|
144
|
-
keyboard.reset();
|
|
145
|
-
// If it is a virtual item, it needs to be reset manually because the DOM is reused.
|
|
146
|
-
isFocus.set(false);
|
|
147
|
-
},
|
|
148
|
-
isFocus: isFocus
|
|
149
|
-
};
|
|
150
|
-
}
|
|
151
116
|
function fixIndex(index, max) {
|
|
152
117
|
if (index > max) {
|
|
153
118
|
index = 0;
|
package/es/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.6.
|
|
2
|
+
* @king-design v3.6.2-beta.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -66,4 +66,4 @@ export * from './components/upload';
|
|
|
66
66
|
export * from './components/view';
|
|
67
67
|
export * from './components/virtualList';
|
|
68
68
|
export * from './components/wave';
|
|
69
|
-
export declare const version = "3.6.
|
|
69
|
+
export declare const version = "3.6.2-beta.0";
|
package/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.6.
|
|
2
|
+
* @king-design v3.6.2-beta.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -67,5 +67,5 @@ export * from './components/upload';
|
|
|
67
67
|
export * from './components/view';
|
|
68
68
|
export * from './components/virtualList';
|
|
69
69
|
export * from './components/wave';
|
|
70
|
-
export var version = '3.6.
|
|
70
|
+
export var version = '3.6.2-beta.0';
|
|
71
71
|
/* generate end */
|
package/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @king-design v3.6.
|
|
2
|
+
* @king-design v3.6.2-beta.0
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) Kingsoft Cloud
|
|
5
5
|
* Released under the MIT License
|
|
@@ -71,6 +71,6 @@ export * from './components/view';
|
|
|
71
71
|
export * from './components/virtualList';
|
|
72
72
|
export * from './components/wave';
|
|
73
73
|
|
|
74
|
-
export const version = '3.6.
|
|
74
|
+
export const version = '3.6.2-beta.0';
|
|
75
75
|
|
|
76
76
|
/* generate end */
|
package/package.json
CHANGED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { DropdownItem } from './item';
|
|
2
|
-
interface ItemEvents {
|
|
3
|
-
onFocusin: () => void;
|
|
4
|
-
onFocusout: () => void;
|
|
5
|
-
onShowMenu: () => void;
|
|
6
|
-
onHideMenu: () => void;
|
|
7
|
-
onSelect: () => void;
|
|
8
|
-
}
|
|
9
|
-
export declare enum Direction {
|
|
10
|
-
Up = 0,
|
|
11
|
-
Down = 1
|
|
12
|
-
}
|
|
13
|
-
export type MenuKeyboardMethods = {
|
|
14
|
-
reset: () => void;
|
|
15
|
-
focus: (item: DropdownItem) => void;
|
|
16
|
-
};
|
|
17
|
-
export declare function useMenuKeyboard(): readonly [readonly [() => void, () => void, (v: boolean) => boolean], (index: number, direction?: Direction) => void, () => void];
|
|
18
|
-
export declare function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFocusout'>): {
|
|
19
|
-
onMouseEnter(e: MouseEvent): void;
|
|
20
|
-
onMouseLeave(e: MouseEvent): void;
|
|
21
|
-
isFocus: import("../../hooks/useState").State<boolean>;
|
|
22
|
-
};
|
|
23
|
-
export {};
|