Skip to content

useTreeFocus

@astryxdesign/core v0.7.1 · useTreeFocus

参数 ​

名称类型默认值说明
optionsUseTreeFocusOptions—树形焦点行为的配置。必传,里面的字段都是可选的。
options.itemSelectorstring'[role="treeitem"]'树里可见节点的选择器,按 DOM 顺序。
options.isItemDisabled(item: HTMLElement) => boolean—判断某个节点是否停用、导航时要跳过。不传时读 data-tree-disabled 和 aria-disabled。
options.getLevel(item: HTMLElement) => number—读某个节点的层级(从 1 开始)。不传时读 aria-level 属性。
options.onToggleExpand(id: string) => void—展开或收起指定 id 的节点时调用:右方向键按在收起的父节点上、左方向键按在展开的父节点上、以及父节点自己没有动作时按 Enter 或空格。id 取节点的 data-tree-id,没有就取它的 id 属性。
options.onActivate(item: HTMLElement, id: string | undefined) => boolean | void—Enter 或空格激活节点时调用。你自己处理了就返回 true;返回 false 或不返回,hook 会退回去切换展开状态。
options.onActiveChange(id: string | undefined) => void—hook 把焦点移到某个节点之后通知。tab 停靠点不归 hook 管时,用它自己挪;也可以用它同步自己的选中状态。
options.hasRovingTabIndexbooleanfalse为 true 时由 hook 管唯一的 tab 停靠点:给各项打上 tabindex 0/-1,挂载时对齐一次,导航时跟着走。挂载时已有的 tabindex="0" 会被保留为起点。点了之后想让它对齐,把返回的 handleFocus 接上。
options.typeaheadbooleantrue是否启用 typeahead:敲一个可打印字符,跳到下一个文本以这些字符开头的节点。

返回值 ​

名称类型说明
treeRefRef<HTMLElement | null>绑到树容器(role="tree")上的 ref。
handleKeyDown(event: KeyboardEvent) => void绑到树容器上的按键处理函数。
handleFocus(event?: FocusEvent) => void绑到容器 @focus 上的处理函数。hasRovingTabIndex 打开时靠它把 tab 停靠点对齐,没打开时它什么都不做,所以一直绑着也不会有副作用。
focusFirst() => void聚焦第一个可用的可见节点。
focusLast() => void聚焦最后一个可用的可见节点。