Skip to content

Commit

Permalink
enhancement-506-2: fix all prettier issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@IvanPostu
IvanPostu committed Sep 16, 2024
1 parent 9f9aace commit 30c62ea
Show file tree
Hide file tree
Showing 28 changed files with 1,015 additions and 845 deletions.
2 changes: 1 addition & 1 deletion eslint.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default [

// TODO: to improve because the basic rules cause
// thousands of errors, for this reason, they have been marked as WARN
'prettier/prettier': 'warn',
'prettier/prettier': 'error',

'prefer-const': 'warn',
'prefer-rest-params': 'warn',
Expand Down
106 changes: 53 additions & 53 deletions src/autocomplete.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Utils } from "./utils";
import { Dropdown, DropdownOptions } from "./dropdown";
import { Component, BaseOptions, InitElements, MElement } from "./component";
import { Utils } from './utils';
import { Dropdown, DropdownOptions } from './dropdown';
import { Component, BaseOptions, InitElements, MElement } from './component';

export interface AutocompleteData {
/**
/**
* A primitive value that can be converted to string.
* If "text" is not provided, it will also be used as "option text" as well
*/
Expand Down Expand Up @@ -66,7 +66,7 @@ export interface AutocompleteOptions extends BaseOptions {
* @default {}
*/
dropdownOptions: Partial<DropdownOptions>;
};
}

let _defaults: AutocompleteOptions = {
data: [], // Autocomplete data set
Expand All @@ -82,9 +82,10 @@ let _defaults: AutocompleteOptions = {
onSearch: (text: string, autocomplete: Autocomplete) => {
const normSearch = text.toLocaleLowerCase();
autocomplete.setMenuItems(
autocomplete.options.data.filter((option) =>
option.id.toString().toLocaleLowerCase().includes(normSearch)
|| option.text?.toLocaleLowerCase().includes(normSearch)
autocomplete.options.data.filter(
(option) =>
option.id.toString().toLocaleLowerCase().includes(normSearch) ||
option.text?.toLocaleLowerCase().includes(normSearch)
)
);
},
Expand All @@ -101,7 +102,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
/** Index of the current selected option. */
activeIndex: number;
private oldVal: string;
private $active: HTMLElement|null;
private $active: HTMLElement | null;
private _mousedown: boolean;
container: HTMLElement;
/** Instance of the dropdown plugin for this autocomplete. */
Expand All @@ -118,11 +119,11 @@ export class Autocomplete extends Component<AutocompleteOptions> {
...Autocomplete.defaults,
...options
};

this.isOpen = false;
this.count = 0;
this.activeIndex = -1;
this.oldVal = "";
this.oldVal = '';
this.selectedValues = [];
this.menuItems = this.options.data || [];
this.$active = null;
Expand All @@ -146,13 +147,19 @@ export class Autocomplete extends Component<AutocompleteOptions> {
* @param els HTML elements.
* @param options Component options.
*/
static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<AutocompleteOptions>): Autocomplete[];
static init(
els: InitElements<HTMLInputElement | MElement>,
options?: Partial<AutocompleteOptions>
): Autocomplete[];
/**
* Initializes instances of Autocomplete.
* @param els HTML elements.
* @param options Component options.
*/
static init(els: HTMLInputElement | InitElements<HTMLInputElement | MElement>, options: Partial<AutocompleteOptions> = {}): Autocomplete | Autocomplete[] {
static init(
els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
options: Partial<AutocompleteOptions> = {}
): Autocomplete | Autocomplete[] {
return super.init(els, options, Autocomplete);
}

Expand All @@ -172,16 +179,10 @@ export class Autocomplete extends Component<AutocompleteOptions> {
this.el.addEventListener('focus', this._handleInputKeyupAndFocus);
this.el.addEventListener('keydown', this._handleInputKeydown);
this.el.addEventListener('click', this._handleInputClick);
this.container.addEventListener(
'mousedown',
this._handleContainerMousedownAndTouchstart
);
this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchend);
if (typeof window.ontouchstart !== 'undefined') {
this.container.addEventListener(
'touchstart',
this._handleContainerMousedownAndTouchstart
);
this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstart);
this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchend);
}
}
Expand All @@ -192,21 +193,12 @@ export class Autocomplete extends Component<AutocompleteOptions> {
this.el.removeEventListener('focus', this._handleInputKeyupAndFocus);
this.el.removeEventListener('keydown', this._handleInputKeydown);
this.el.removeEventListener('click', this._handleInputClick);
this.container.removeEventListener(
'mousedown',
this._handleContainerMousedownAndTouchstart
);
this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchend);

if (typeof window.ontouchstart !== 'undefined') {
this.container.removeEventListener(
'touchstart',
this._handleContainerMousedownAndTouchstart
);
this.container.removeEventListener(
'touchend',
this._handleContainerMouseupAndTouchend
);
this.container.removeEventListener('touchstart', this._handleContainerMousedownAndTouchstart);
this.container.removeEventListener('touchend', this._handleContainerMouseupAndTouchend);
}
}

Expand All @@ -217,7 +209,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
this.container.classList.add('autocomplete-content', 'dropdown-content');
this.el.setAttribute('data-target', this.container.id);

this.menuItems.forEach(menuItem => {
this.menuItems.forEach((menuItem) => {
const itemElement = this._createDropdownItem(menuItem);
this.container.append(itemElement);
});
Expand Down Expand Up @@ -268,14 +260,19 @@ export class Autocomplete extends Component<AutocompleteOptions> {
this.close();
this._resetAutocomplete();
}
}
};

_handleInputKeyupAndFocus = (e: KeyboardEvent) => {
if (e.type === 'keyup') Autocomplete._keydown = false;
this.count = 0;
const actualValue = this.el.value.toLocaleLowerCase();
// Don't capture enter or arrow key usage.
if (Utils.keys.ENTER.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) return;
if (
Utils.keys.ENTER.includes(e.key) ||
Utils.keys.ARROW_UP.includes(e.key) ||
Utils.keys.ARROW_DOWN.includes(e.key)
)
return;
// Check if the input isn't empty
// Check if focus triggered by tab
if (this.oldVal !== actualValue && (Utils.tabPressed || e.type !== 'focus')) {
Expand All @@ -292,7 +289,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
this._triggerChanged();
}
this.oldVal = actualValue;
}
};

_handleInputKeydown = (e: KeyboardEvent) => {
Autocomplete._keydown = true;
Expand All @@ -311,7 +308,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {
if (Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) {
e.preventDefault();
if (Utils.keys.ARROW_UP.includes(e.key) && this.activeIndex > 0) this.activeIndex--;
if (Utils.keys.ARROW_DOWN.includes(e.key) && this.activeIndex < numItems - 1) this.activeIndex++;
if (Utils.keys.ARROW_DOWN.includes(e.key) && this.activeIndex < numItems - 1)
this.activeIndex++;
this.$active?.classList.remove('active');
if (this.activeIndex >= 0) {
this.$active = this.container.querySelectorAll('li')[this.activeIndex];
Expand All @@ -324,19 +322,19 @@ export class Autocomplete extends Component<AutocompleteOptions> {
});
}
}
}
};

_handleInputClick = () => {
this.open();
}
};

_handleContainerMousedownAndTouchstart = () => {
this._mousedown = true;
}
};

_handleContainerMouseupAndTouchend = () => {
this._mousedown = false;
}
};

_resetCurrentElementPosition() {
this.activeIndex = -1;
Expand Down Expand Up @@ -409,7 +407,10 @@ export class Autocomplete extends Component<AutocompleteOptions> {
item.appendChild(itemText);
item.querySelector('.item-text').appendChild(div);
// Description
if (typeof entry.description === 'string' || (typeof entry.description === 'number' && !isNaN(entry.description))) {
if (
typeof entry.description === 'string' ||
(typeof entry.description === 'number' && !isNaN(entry.description))
) {
const description = document.createElement('small');
description.setAttribute(
'style',
Expand Down Expand Up @@ -444,9 +445,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {
}

_setStatusLoading() {
this.el.parentElement.querySelector(
'.status-info'
).innerHTML = `<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
this.el.parentElement.querySelector('.status-info').innerHTML =
`<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
<circle fill="#888c" stroke="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"/></circle>
<circle fill="#888c" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"/></circle>
<circle fill="#888c" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.3"/></circle>
Expand All @@ -456,7 +456,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {
_updateSelectedInfo() {
const statusElement = this.el.parentElement.querySelector('.status-info');
if (statusElement) {
if (this.options.isMultiSelect) statusElement.innerHTML = this.selectedValues.length.toString();
if (this.options.isMultiSelect)
statusElement.innerHTML = this.selectedValues.length.toString();
else statusElement.innerHTML = '';
}
}
Expand Down Expand Up @@ -490,16 +491,15 @@ export class Autocomplete extends Component<AutocompleteOptions> {
setTimeout(() => {
this.dropdown.open();
}, 0); // TODO: why?
}
else this.dropdown.recalculateDimensions(); // Recalculate dropdown when its already open
}
} else this.dropdown.recalculateDimensions(); // Recalculate dropdown when its already open
};

/**
* Hide autocomplete.
*/
close = () => {
this.dropdown.close();
}
};

/**
* Updates the visible or selectable items shown in the menu.
Expand Down Expand Up @@ -532,10 +532,10 @@ export class Autocomplete extends Component<AutocompleteOptions> {
const entry = this.menuItems.find((item) => item.id == id);
if (!entry) return;
// Toggle Checkbox
const li = this.container.querySelector('li[data-id="'+id+'"]');
const li = this.container.querySelector('li[data-id="' + id + '"]');
if (!li) return;
if (this.options.isMultiSelect) {
const checkbox = <HTMLInputElement|null>li.querySelector('input[type="checkbox"]');
const checkbox = <HTMLInputElement | null>li.querySelector('input[type="checkbox"]');
checkbox.checked = !checkbox.checked;
if (checkbox.checked) this.selectedValues.push(entry);
else
Expand Down
Loading

0 comments on commit 30c62ea

Please sign in to comment.