mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 02:51:54 +03:00
UBER-681 Do not select objects when not navigating via keyboard (#3569)
Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>
This commit is contained in:
parent
6ef7d36fd8
commit
551432ff3b
@ -36,12 +36,14 @@
|
||||
|
||||
let list: List
|
||||
|
||||
const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
|
||||
if (dir === 'vertical') {
|
||||
// Select next
|
||||
list?.select(offset, of)
|
||||
const listProvider = new ListSelectionProvider(
|
||||
(offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
|
||||
if (dir === 'vertical') {
|
||||
// Select next
|
||||
list?.select(offset, of, noScroll)
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
let docs: Doc[] = []
|
||||
function select () {
|
||||
listProvider.update(docs)
|
||||
|
@ -107,10 +107,16 @@ contextStore.subscribe((it) => {
|
||||
$contextStore = it
|
||||
})
|
||||
|
||||
export function select (evt: Event | undefined, offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection): void {
|
||||
export function select (
|
||||
evt: Event | undefined,
|
||||
offset: 1 | -1 | 0,
|
||||
of?: Doc,
|
||||
direction?: SelectDirection,
|
||||
noScroll?: boolean
|
||||
): void {
|
||||
closeTooltip()
|
||||
if ($focusStore.provider?.select !== undefined) {
|
||||
$focusStore.provider?.select(offset, of, direction)
|
||||
$focusStore.provider?.select(offset, of, direction, noScroll)
|
||||
evt?.preventDefault()
|
||||
previewDocument.update((old) => {
|
||||
if (old !== undefined) {
|
||||
|
@ -170,7 +170,7 @@
|
||||
dispatch('row-focus', object)
|
||||
}
|
||||
|
||||
export function select (offset: 1 | -1 | 0, of?: Doc): void {
|
||||
export function select (offset: 1 | -1 | 0, of?: Doc, noScroll?: boolean): void {
|
||||
let pos = (of !== undefined ? objects.findIndex((it) => it._id === of._id) : selection) ?? -1
|
||||
pos += offset
|
||||
if (pos < 0) {
|
||||
@ -182,7 +182,7 @@
|
||||
const r = refs[pos]
|
||||
selection = pos
|
||||
onRow(objects[pos])
|
||||
if (r !== undefined) {
|
||||
if (r !== undefined && !noScroll) {
|
||||
r?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
|
||||
}
|
||||
}
|
||||
|
@ -40,12 +40,14 @@
|
||||
export let loadingProps: LoadingProps | undefined = undefined
|
||||
|
||||
let table: Table
|
||||
const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
|
||||
if (dir === 'vertical') {
|
||||
// Select next
|
||||
table?.select(offset, of)
|
||||
const listProvider = new ListSelectionProvider(
|
||||
(offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
|
||||
if (dir === 'vertical') {
|
||||
// Select next
|
||||
table?.select(offset, of, noScroll)
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
onMount(() => {
|
||||
;(document.activeElement as HTMLElement)?.blur()
|
||||
|
@ -30,7 +30,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
$: select(undefined, 0, element, 'vertical')
|
||||
$: select(undefined, 0, element, 'vertical', true)
|
||||
</script>
|
||||
|
||||
{#if $focusStore.focus !== undefined && $focusStore.provider !== undefined}
|
||||
|
@ -98,9 +98,9 @@
|
||||
selectedObjectIds = []
|
||||
}
|
||||
|
||||
export function select (offset: 2 | -2 | 1 | -1 | 0, of?: Doc): void {
|
||||
export function select (offset: 2 | -2 | 1 | -1 | 0, of?: Doc, noScroll?: boolean): void {
|
||||
if (of !== undefined || offset !== 0) {
|
||||
listCategories?.select(offset, of)
|
||||
listCategories?.select(offset, of, undefined, noScroll)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -188,7 +188,12 @@
|
||||
return -1
|
||||
}
|
||||
|
||||
export function select (offset: 2 | 1 | -2 | -1 | 0, of?: Doc, dir?: 'vertical' | 'horizontal'): void {
|
||||
export function select (
|
||||
offset: 2 | 1 | -2 | -1 | 0,
|
||||
of?: Doc,
|
||||
dir?: 'vertical' | 'horizontal',
|
||||
noScroll?: boolean
|
||||
): void {
|
||||
let pos = (of != null ? docs.findIndex((it) => it._id === of._id) : selection) ?? -1
|
||||
if (pos === -1) {
|
||||
for (const st of categories) {
|
||||
@ -276,7 +281,7 @@
|
||||
} else {
|
||||
const obj = stateObjs[statePos - 1]
|
||||
if (obj !== undefined) {
|
||||
scrollInto(objState, obj)
|
||||
if (!noScroll) scrollInto(objState, obj)
|
||||
dispatch('row-focus', obj)
|
||||
}
|
||||
}
|
||||
@ -296,7 +301,7 @@
|
||||
} else {
|
||||
const obj = stateObjs[statePos + 1]
|
||||
if (obj !== undefined) {
|
||||
scrollInto(objState, obj)
|
||||
if (!noScroll) scrollInto(objState, obj)
|
||||
dispatch('row-focus', obj)
|
||||
}
|
||||
}
|
||||
@ -304,11 +309,11 @@
|
||||
}
|
||||
}
|
||||
if (offset === 0) {
|
||||
scrollInto(objState, obj)
|
||||
if (!noScroll) scrollInto(objState, obj)
|
||||
dispatch('row-focus', obj)
|
||||
}
|
||||
} else {
|
||||
listCategory[objState]?.select(offset, of, dir)
|
||||
listCategory[objState]?.select(offset, of, dir, noScroll)
|
||||
}
|
||||
}
|
||||
function scrollInto (statePos: number, obj: Doc): void {
|
||||
|
@ -29,12 +29,14 @@
|
||||
let divScroll: HTMLDivElement
|
||||
let listWidth: number
|
||||
|
||||
const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
|
||||
if (dir === 'vertical') {
|
||||
// Select next
|
||||
list?.select(offset, of)
|
||||
const listProvider = new ListSelectionProvider(
|
||||
(offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
|
||||
if (dir === 'vertical') {
|
||||
// Select next
|
||||
list?.select(offset, of, noScroll)
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
onMount(() => {
|
||||
;(document.activeElement as HTMLElement)?.blur()
|
||||
|
@ -16,7 +16,7 @@ export interface SelectionFocusProvider {
|
||||
// * If vertical, next will return item under.
|
||||
// * If horizontal, next will return item on right.
|
||||
// of - document offset from we requesting.
|
||||
select?: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection) => void
|
||||
select?: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean) => void
|
||||
|
||||
// Update documents content
|
||||
update: (docs: Doc[]) => void
|
||||
@ -110,7 +110,7 @@ export class ListSelectionProvider implements SelectionFocusProvider {
|
||||
_current?: FocusSelection
|
||||
private readonly unsubscribe: Unsubscriber
|
||||
constructor (
|
||||
private readonly delegate: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection) => void,
|
||||
private readonly delegate: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean) => void,
|
||||
autoDestroy = true
|
||||
) {
|
||||
this.unsubscribe = focusStore.subscribe((doc) => {
|
||||
@ -154,10 +154,11 @@ export class ListSelectionProvider implements SelectionFocusProvider {
|
||||
this.unsubscribe()
|
||||
}
|
||||
|
||||
select (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection): void {
|
||||
this.delegate(offset, of, direction)
|
||||
select (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean): void {
|
||||
this.delegate(offset, of, direction, noScroll)
|
||||
}
|
||||
|
||||
// this is the main method that is called when docs are updated
|
||||
update (docs: Doc[]): void {
|
||||
this._docs = docs
|
||||
|
||||
@ -171,7 +172,7 @@ export class ListSelectionProvider implements SelectionFocusProvider {
|
||||
this.delegate(0, undefined, 'vertical')
|
||||
} else {
|
||||
// Check if we don't have object, we need to select first one.
|
||||
this.delegate(0, this._current?.focus, 'vertical')
|
||||
this.delegate(0, this._current?.focus, 'vertical', true)
|
||||
}
|
||||
if (this._current?.focus === undefined) {
|
||||
updateFocus({ focus: this._current?.focus, provider: this })
|
||||
|
Loading…
Reference in New Issue
Block a user