11666639130

Committed 04 Nov 2024 02:49PM UTC coverage: 98.302% (-0.009%) from 98.311%

Build # 11666639130

Build Type

Pull #1464

github

Committed by

web-flow

Commit Message

Merge aac8bf009 into aad60d385

Pull Request Pull Request #1464: feat: Expose defaultValue/defaultChecked property for React bindings

Run Details

3882 of 4077 branches covered (95.22%)

Branch coverage included in aggregate %.

115 of 127 new or added lines in 3 files covered. (90.55%)

60 existing lines in 9 files now uncovered.

24436 of 24730 relevant lines covered (98.81%)

454.58 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

91.22

/src/components/combo/controllers/navigation.ts

import type { ReactiveController } from 'lit';

import type IgcComboListComponent from '../combo-list.js';
import type { ComboHost, ComboRecord } from '../types.js';

const START_INDEX: Readonly<number> = -1;

enum DIRECTION {
  Up = -1,
  Down = 1,
}

export class NavigationController<T extends object>
  implements ReactiveController
{
  protected hostHandlers = new Map(
    Object.entries({
      Escape: this.escape,
    })
  );

  protected mainInputHandlers = new Map(
    Object.entries({
      Escape: this.escape,
      ArrowUp: this.hide,
      ArrowDown: this.mainInputArrowDown,
      Tab: this.tab,
      Enter: this.enter,
    })
  );

  protected searchInputHandlers = new Map(
    Object.entries({
      Escape: this.escape,
      ArrowUp: this.escape,
      ArrowDown: this.inputArrowDown,
      Tab: this.inputArrowDown,
    })
  );

  protected listHandlers = new Map(
    Object.entries({
      ArrowDown: this.arrowDown,
      ArrowUp: this.arrowUp,
      ' ': this.space,
      Enter: this.enter,
      Escape: this.escape,
      Tab: this.tab,
      Home: this.home,
      End: this.end,
    })
  );

  protected _active = START_INDEX;

  public get input() {
    // @ts-expect-error protected access
    return this.host.singleSelect ? this.host.target : this.host.input;
  }

  public get dataState() {
    // @ts-expect-error protected access
    return this.host.dataState;
  }

  public show() {
    // @ts-expect-error protected access
    this.host._show(true);
  }

  public hide() {
    // @ts-expect-error protected access
    this.host._hide(true);
  }

  public toggleSelect(index: number) {
    // @ts-expect-error protected access
    this.host.toggleSelect(index);
  }

  public select(index: number) {
    // @ts-expect-error protected access
    this.host.selectByIndex(index);
  }

  protected get currentItem() {
    const item = this.active;
    return item === START_INDEX ? START_INDEX : item;
  }

  protected get firstItem() {
    return this.dataState.findIndex((i: ComboRecord<T>) => i.header !== true);
  }

  protected get lastItem() {
    return this.dataState.length - 1;
  }

  protected scrollToActive(
    container: IgcComboListComponent,
    behavior: ScrollBehavior = 'auto'
  ) {
    container.element(this.active)?.scrollIntoView({
      block: 'center',
      behavior,
    });

    container.requestUpdate();
  }

  public get active() {
    return this._active;
  }

  public set active(node: number) {
    this._active = node;
    this.host.requestUpdate();
  }

  constructor(protected host: ComboHost<T>) {
    this.host.addController(this);
  }

  protected home(container: IgcComboListComponent) {
    this.active = this.firstItem;
    this.scrollToActive(container, 'smooth');
  }

  protected end(container: IgcComboListComponent) {
    this.active = this.lastItem;
    this.scrollToActive(container, 'smooth');
  }

  protected space() {
    if (this.active === START_INDEX) {
      return;
    }

    const item = this.dataState[this.active];

    if (!item.header) {
      this.toggleSelect(this.active);
    }
  }

  protected escape() {
    this.hide();
    this.host.focus();
  }

  protected enter() {
    if (this.active === START_INDEX) {
      return;
    }

    const item = this.dataState[this.active];

    if (!item.header && this.host.singleSelect) {
      this.select(this.active);
    }

    this.hide();
    requestAnimationFrame(() => this.input.select());
    this.host.focus();
  }

  protected inputArrowDown(container: IgcComboListComponent) {
    container.focus();
    this.arrowDown(container);
  }

  protected async mainInputArrowDown(container: IgcComboListComponent) {
    this.show();
    await container.updateComplete;

    if (this.host.singleSelect) {
      container.focus();
      this.arrowDown(container);
    }
  }

  protected tab() {
    this.hide();
    this.host.blur();
  }

  protected arrowDown(container: IgcComboListComponent) {
    this.getNextItem(DIRECTION.Down);
    this.scrollToActive(container);
  }

  protected arrowUp(container: IgcComboListComponent) {
    this.getNextItem(DIRECTION.Up);
    this.scrollToActive(container);
  }

  protected getNextItem(direction: DIRECTION) {
    const next = this.getNearestItem(this.currentItem, direction);

    if (next === -1) {
      if (this.active === this.firstItem) {
        this.input.focus();
        this.active = START_INDEX;
      }
      return;
    }

    this.active = next;
  }

  protected getNearestItem(startIndex: number, direction: number) {
    let index = startIndex;
    const items = this.dataState;

    while (items[index + direction]?.header) {
      index += direction;
    }

    index += direction;

    if (index >= 0 && index < items.length) {
      return index;
    }
    return -1;
  }

  public hostConnected() {}

  public hostDisconnected() {
    this.active = START_INDEX;
  }

  public navigateTo(item: T, container: IgcComboListComponent) {
    this.active = this.dataState.findIndex((i) => i === item);
    this.scrollToActive(container, 'smooth');
  }

  public navigateHost(event: KeyboardEvent) {
    if (this.hostHandlers.has(event.key)) {
      event.preventDefault();
      this.hostHandlers.get(event.key)!.call(this);
    }
  }

  public navigateMainInput(
    event: KeyboardEvent,
    container: IgcComboListComponent
  ) {
    event.stopPropagation();

    if (this.mainInputHandlers.has(event.key)) {
      event.preventDefault();
      this.mainInputHandlers.get(event.key)!.call(this, container);
    }
  }

  public navigateSearchInput(
    event: KeyboardEvent,
    container: IgcComboListComponent
  ) {
    event.stopPropagation();

    if (this.searchInputHandlers.has(event.key)) {
      event.preventDefault();
      this.searchInputHandlers.get(event.key)!.call(this, container);
    }
  }

  public navigateList(event: KeyboardEvent, container: IgcComboListComponent) {
    event.stopPropagation();

    if (this.listHandlers.has(event.key)) {
      event.preventDefault();
      this.listHandlers.get(event.key)!.call(this, container);
    }
  }
}

1	import type { ReactiveController } from 'lit';	11✔
2		11✔
3	import type IgcComboListComponent from '../combo-list.js';	11✔
4	import type { ComboHost, ComboRecord } from '../types.js';	11✔
5		11✔
6	const START_INDEX: Readonly<number> = -1;	11✔
7		11✔
8	enum DIRECTION {	11✔
9	Up = -1,	11✔
10	Down = 1,	11✔
11	}	11✔
12		11✔
13	export class NavigationController<T extends object>	11✔
14	implements ReactiveController	11✔
15	{	11✔
16	protected hostHandlers = new Map(	11✔
17	Object.entries({	11✔
18	Escape: this.escape,	11✔
19	})	11✔
20	);	11✔
21		11✔
22	protected mainInputHandlers = new Map(	11✔
23	Object.entries({	11✔
24	Escape: this.escape,	11✔
25	ArrowUp: this.hide,	11✔
26	ArrowDown: this.mainInputArrowDown,	11✔
27	Tab: this.tab,	11✔
28	Enter: this.enter,	11✔
29	})	11✔
30	);	11✔
31		11✔
32	protected searchInputHandlers = new Map(	11✔
33	Object.entries({	11✔
34	Escape: this.escape,	11✔
35	ArrowUp: this.escape,	11✔
36	ArrowDown: this.inputArrowDown,	11✔
37	Tab: this.inputArrowDown,	11✔
38	})	11✔
39	);	11✔
40		11✔
41	protected listHandlers = new Map(	11✔
42	Object.entries({	11✔
43	ArrowDown: this.arrowDown,	11✔
44	ArrowUp: this.arrowUp,	11✔
45	' ': this.space,	11✔
46	Enter: this.enter,	11✔
47	Escape: this.escape,	11✔
48	Tab: this.tab,	11✔
49	Home: this.home,	11✔
50	End: this.end,	11✔
51	})	11✔
52	);	11✔
53		11✔
54	protected _active = START_INDEX;	11✔
55		11✔
56	public get input() {	11✔
57	// @ts-expect-error protected access	4✔
58	return this.host.singleSelect ? this.host.target : this.host.input;	4!
59	}	4✔
60		11✔
61	public get dataState() {	11✔
62	// @ts-expect-error protected access	22✔
63	return this.host.dataState;	22✔
64	}	22✔
65		11✔
66	public show() {	11✔
67	// @ts-expect-error protected access	4✔
68	this.host._show(true);	4✔
69	}	4✔
70		11✔
71	public hide() {	11✔
72	// @ts-expect-error protected access	5✔
73	this.host._hide(true);	5✔
74	}	5✔
75		11✔
76	public toggleSelect(index: number) {	11✔
77	// @ts-expect-error protected access	4✔
78	this.host.toggleSelect(index);	4✔
79	}	4✔
80		11✔
81	public select(index: number) {	11✔
82	// @ts-expect-error protected access	4✔
83	this.host.selectByIndex(index);	4✔
84	}	4✔
85		11✔
86	protected get currentItem() {	11✔
87	const item = this.active;	12✔
88	return item === START_INDEX ? START_INDEX : item;	12✔
89	}	12✔
90		11✔
91	protected get firstItem() {	11✔
92	return this.dataState.findIndex((i: ComboRecord<T>) => i.header !== true);	1✔
93	}	1✔
94		11✔
95	protected get lastItem() {	11✔
96	return this.dataState.length - 1;	1✔
97	}	1✔
98		11✔
99	protected scrollToActive(	11✔
100	container: IgcComboListComponent,	14✔
101	behavior: ScrollBehavior = 'auto'	14✔
102	) {	14✔
103	container.element(this.active)?.scrollIntoView({	14✔
104	block: 'center',	14✔
105	behavior,	14✔
106	});	14✔
107		14✔
108	container.requestUpdate();	14✔
109	}	14✔
110		11✔
111	public get active() {	11✔
112	return this._active;	842✔
113	}	842✔
114		11✔
115	public set active(node: number) {	11✔
116	this._active = node;	143✔
117	this.host.requestUpdate();	143✔
118	}	143✔
119		11✔
120	constructor(protected host: ComboHost<T>) {	11✔
121	this.host.addController(this);	80✔
122	}	80✔
123		11✔
124	protected home(container: IgcComboListComponent) {	11✔
125	this.active = this.firstItem;	1✔
126	this.scrollToActive(container, 'smooth');	1✔
127	}	1✔
128		11✔
129	protected end(container: IgcComboListComponent) {	11✔
130	this.active = this.lastItem;	1✔
131	this.scrollToActive(container, 'smooth');	1✔
132	}	1✔
133		11✔
134	protected space() {	11✔
135	if (this.active === START_INDEX) {	4!
UNCOV 136	return;	×
UNCOV 137	}	×
138		4✔
139	const item = this.dataState[this.active];	4✔
140		4✔
141	if (!item.header) {	4✔
142	this.toggleSelect(this.active);	4✔
143	}	4✔
144	}	4✔
145		11✔
146	protected escape() {	11✔
147	this.hide();	1✔
148	this.host.focus();	1✔
149	}	1✔
150		11✔
151	protected enter() {	11✔
152	if (this.active === START_INDEX) {	4!
UNCOV 153	return;	×
UNCOV 154	}	×
155		4✔
156	const item = this.dataState[this.active];	4✔
157		4✔
158	if (!item.header && this.host.singleSelect) {	4✔
159	this.select(this.active);	4✔
160	}	4✔
161		4✔
162	this.hide();	4✔
163	requestAnimationFrame(() => this.input.select());	4✔
164	this.host.focus();	4✔
165	}	4✔
166		11✔
167	protected inputArrowDown(container: IgcComboListComponent) {	11✔
168	container.focus();	1✔
169	this.arrowDown(container);	1✔
170	}	1✔
171		11✔
172	protected async mainInputArrowDown(container: IgcComboListComponent) {	11✔
173	this.show();	4✔
174	await container.updateComplete;	4✔
175		4✔
176	if (this.host.singleSelect) {	4✔
177	container.focus();	2✔
178	this.arrowDown(container);	2✔
179	}	2✔
180	}	4✔
181		11✔
182	protected tab() {	11✔
UNCOV 183	this.hide();	×
UNCOV 184	this.host.blur();	×
UNCOV 185	}	×
186		11✔
187	protected arrowDown(container: IgcComboListComponent) {	11✔
188	this.getNextItem(DIRECTION.Down);	11✔
189	this.scrollToActive(container);	11✔
190	}	11✔
191		11✔
192	protected arrowUp(container: IgcComboListComponent) {	11✔
193	this.getNextItem(DIRECTION.Up);	1✔
194	this.scrollToActive(container);	1✔
195	}	1✔
196		11✔
197	protected getNextItem(direction: DIRECTION) {	11✔
198	const next = this.getNearestItem(this.currentItem, direction);	12✔
199		12✔
200	if (next === -1) {	12!
UNCOV 201	if (this.active === this.firstItem) {	×
UNCOV 202	this.input.focus();	×
UNCOV 203	this.active = START_INDEX;	×
204	}	×
205	return;	×
206	}	×
207		12✔
208	this.active = next;	12✔
209	}	12✔
210		11✔
211	protected getNearestItem(startIndex: number, direction: number) {	11✔
212	let index = startIndex;	12✔
213	const items = this.dataState;	12✔
214		12✔
215	while (items[index + direction]?.header) {	12✔
216	index += direction;	7✔
217	}	7✔
218		12✔
219	index += direction;	12✔
220		12✔
221	if (index >= 0 && index < items.length) {	12✔
222	return index;	12✔
223	}	12✔
UNCOV 224	return -1;	×
UNCOV 225	}	×
226		11✔
227	public hostConnected() {}	11✔
228		11✔
229	public hostDisconnected() {	11✔
230	this.active = START_INDEX;	80✔
231	}	80✔
232		11✔
233	public navigateTo(item: T, container: IgcComboListComponent) {	11✔
UNCOV 234	this.active = this.dataState.findIndex((i) => i === item);	×
UNCOV 235	this.scrollToActive(container, 'smooth');	×
UNCOV 236	}	×
237		11✔
238	public navigateHost(event: KeyboardEvent) {	11✔
239	if (this.hostHandlers.has(event.key)) {	×
UNCOV 240	event.preventDefault();	×
UNCOV 241	this.hostHandlers.get(event.key)!.call(this);	×
242	}	×
243	}	×
244		11✔
245	public navigateMainInput(	11✔
246	event: KeyboardEvent,	6✔
247	container: IgcComboListComponent	6✔
248	) {	6✔
249	event.stopPropagation();	6✔
250		6✔
251	if (this.mainInputHandlers.has(event.key)) {	6✔
252	event.preventDefault();	6✔
253	this.mainInputHandlers.get(event.key)!.call(this, container);	6✔
254	}	6✔
255	}	6✔
256		11✔
257	public navigateSearchInput(	11✔
258	event: KeyboardEvent,	2✔
259	container: IgcComboListComponent	2✔
260	) {	2✔
261	event.stopPropagation();	2✔
262		2✔
263	if (this.searchInputHandlers.has(event.key)) {	2✔
264	event.preventDefault();	2✔
265	this.searchInputHandlers.get(event.key)!.call(this, container);	2✔
266	}	2✔
267	}	2✔
268		11✔
269	public navigateList(event: KeyboardEvent, container: IgcComboListComponent) {	11✔
270	event.stopPropagation();	17✔
271		17✔
272	if (this.listHandlers.has(event.key)) {	17✔
273	event.preventDefault();	17✔
274	this.listHandlers.get(event.key)!.call(this, container);	17✔
275	}	17✔
276	}	17✔
277	}	11✔

IgniteUI / igniteui-webcomponents / 11666639130

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous