Skip to content

Commit f0d269d

Browse files
ArathyKumarArathyKumar
committed
chore: code cleanup
1 parent 76b553d commit f0d269d

File tree

1 file changed

+38
-80
lines changed

1 file changed

+38
-80
lines changed

‎elements/pf-radio/pf-radio.ts‎

Lines changed: 38 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ export class PfRadio extends LitElement {
2424
fromAttribute: value => value === 'true',
2525
},
2626
reflect: true,
27-
}) checked = false;
27+
})
28+
checked = false;
2829

2930
@property({
3031
type: Boolean,
@@ -33,15 +34,15 @@ export class PfRadio extends LitElement {
3334
fromAttribute: value => value === 'true',
3435
},
3536
reflect: true,
36-
}) disabled = false;
37+
})
38+
disabled = false;
3739

38-
@property({ attribute: 'name', reflect: true }) name = 'radio-test';
40+
@property({ attribute: 'name', reflect: true }) name = '';
3941
@property({ attribute: 'label', reflect: true }) label?: string;
4042
@property({ attribute: 'value', reflect: true }) value = '';
4143
@property({ attribute: 'id', reflect: true }) id = '';
4244
@property({ attribute: 'tabindex', reflect: true }) tabIndex = -1;
4345

44-
4546
constructor() {
4647
super();
4748
}
@@ -58,7 +59,7 @@ export class PfRadio extends LitElement {
5859
let radioGroup: NodeListOf<PfRadio>;
5960
if (root instanceof Document || root instanceof ShadowRoot) {
6061
radioGroup = root.querySelectorAll('pf-radio');
61-
radioGroup.forEach(radio => {
62+
radioGroup.forEach((radio: PfRadio) => {
6263
const element: HTMLElement = radio as HTMLElement;
6364
element?.removeAttribute('checked');
6465
element.tabIndex = -1;
@@ -69,104 +70,61 @@ export class PfRadio extends LitElement {
6970
}
7071
}
7172

73+
// Function to handle tab key navigation
7274
#onKeyPress = (event: KeyboardEvent) => {
7375
const root: Node = this.getRootNode();
74-
let radioGroup: NodeListOf<PfRadio>;
75-
let isRadioChecked = false;
7676
if (root instanceof Document || root instanceof ShadowRoot) {
77-
radioGroup = root.querySelectorAll('pf-radio');
77+
const radioGroup: NodeListOf<PfRadio> = root.querySelectorAll('pf-radio');
78+
const isRadioChecked: boolean = Array.from(radioGroup).some(
79+
(radio: PfRadio) => radio.checked
80+
);
7881
if (event.key === 'Tab') {
79-
radioGroup.forEach((radio, index) => {
80-
radio.tabIndex = -1;
81-
if (radio.checked === true) {
82-
radio.tabIndex = 0;
83-
isRadioChecked = true;
84-
}
82+
radioGroup.forEach((radio: PfRadio) => {
83+
radio.tabIndex = radio.checked ? 0 : -1;
8584
});
8685
if (!isRadioChecked) {
87-
if (event.key === 'Tab') {
88-
radioGroup.forEach((radio, index) => {
89-
radio.tabIndex = -1;
90-
if ( event.shiftKey ) {
91-
if (index === (radioGroup.length - 1)) {
92-
radio.tabIndex = 0;
93-
} else {
94-
radio.tabIndex = -1;
95-
}
86+
radioGroup.forEach((radio: PfRadio, index: number) => {
87+
radio.tabIndex = -1;
88+
if (event.shiftKey) {
89+
if (index === radioGroup.length - 1) {
90+
radio.tabIndex = 0;
9691
}
97-
if (!event.shiftKey) {
98-
if (index === 0) {
99-
radio.tabIndex = 0;
100-
} else {
101-
radio.tabIndex = -1;
102-
}
103-
}
104-
});
105-
}
92+
} else if (index === 0) {
93+
radio.tabIndex = 0;
94+
}
95+
});
10696
}
10797
}
10898
}
10999
};
110100

101+
// Function to handle keyboard navigation
111102
#onKeydown = (event: KeyboardEvent) => {
112-
if (event.key === 'ArrowDown'
113-
|| event.key === 'ArrowRight'
114-
|| event.key === 'ArrowUp'
115-
|| event.key === 'ArrowLeft') {
103+
const arrowKeys: string[] = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'];
104+
if (arrowKeys.includes(event.key)) {
116105
const root: Node = this.getRootNode();
117-
let radioGroup: NodeListOf<PfRadio>;
118106
if (root instanceof Document || root instanceof ShadowRoot) {
119-
radioGroup = root.querySelectorAll('pf-radio');
120-
radioGroup.forEach((radio, index) => {
121-
const element: HTMLElement = radio as HTMLElement;
122-
element?.removeAttribute('checked');
107+
const radioGroup: NodeListOf<PfRadio> = root.querySelectorAll('pf-radio');
108+
radioGroup.forEach((radio: PfRadio, index: number) => {
123109
this.checked = false;
124-
radio.tabIndex = 0;
125-
if (radioGroup[index] === event.target ) {
126-
if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
127-
if ((radioGroup.length - 1) === index) {
128-
radioGroup[0].focus();
129-
radioGroup[0].checked = true;
130-
} else {
131-
radioGroup[index + 1].focus();
132-
radioGroup[index + 1].checked = true;
133-
}
134-
} else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
135-
if (index === 0) {
136-
radioGroup[radioGroup.length - 1].focus();
137-
radioGroup[radioGroup.length - 1].checked = true;
138-
} else {
139-
radioGroup[index - 1].focus();
140-
radioGroup[index - 1].checked = true;
141-
}
110+
this.tabIndex = 0;
111+
112+
if (radio === event.target) {
113+
const isArrowDownOrRight: boolean = ['ArrowDown', 'ArrowRight'].includes(event.key);
114+
const isArrowUpOrLeft: boolean = ['ArrowUp', 'ArrowLeft'].includes(event.key);
115+
const direction: 1 | 0 | -1 = isArrowDownOrRight ? 1 : isArrowUpOrLeft ? -1 : 0;
116+
if (direction === 0) {
117+
return;
142118
}
119+
const nextIndex: number = (index + direction + radioGroup.length) % radioGroup.length;
120+
radioGroup[nextIndex].focus();
121+
radioGroup[nextIndex].checked = true;
143122
}
144123
});
145124
}
146125
}
147126
};
148127

149-
150-
// #onKeydown1 = (event: KeyboardEvent) => {
151-
// switch (event.key) {
152-
// case "ArrowDown":
153-
// //this.#onArrowDown(event);
154-
// // Do something for "down arrow" key press.
155-
// break;
156-
// case "ArrowUp":
157-
// // Do something for "up arrow" key press.
158-
// break;
159-
// case "ArrowLeft":
160-
// // Do something for "left arrow" key press.
161-
// break;
162-
// case "ArrowRight":
163-
// // Do something for "right arrow" key press.
164-
// break;
165-
// default:
166-
// return; // Quit when this doesn't handle the key event.
167-
// }
168-
// };
169-
170128
render(): TemplateResult<1> {
171129
return html`
172130
<label for=${this.id}>${this.label}</label>

0 commit comments

Comments
 (0)