* Copyright (C) 2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BaseElement, element } from '../BaseElement';
import { selectHtmlStr } from './LitSelectHtml';
import { LitSelectOption } from './LitSelectOption';
import { SpSystemTrace } from '../../trace/component/SpSystemTrace';
@element('lit-select')
export class LitSelect extends BaseElement {
private focused: unknown;
private selectInputEl: unknown;
private selectSearchInputEl: HTMLInputElement | null | undefined;
private selectVInputEl: HTMLInputElement | null | undefined;
private selectOptions: HTMLDivElement | null | undefined;
private selectItem: string = '';
private selectClearEl: unknown;
private selectIconEl: unknown;
private bodyEl: unknown;
private selectSearchEl: unknown;
private selectMultipleRootEl: unknown;
private currentSelectedValue: string = '';
static get observedAttributes(): string[] {
return [
'value',
'default-value',
'placeholder',
'disabled',
'loading',
'allow-clear',
'show-search',
'list-height',
'border',
'mode',
'showSearchInput',
'tabSelect'
];
}
get value(): string {
return this.getAttribute('value') || this.defaultValue;
}
set value(selectValue) {
this.setAttribute('value', selectValue);
}
get rounded(): boolean {
return this.hasAttribute('rounded');
}
set rounded(selectRounded: boolean) {
if (selectRounded) {
this.setAttribute('rounded', '');
} else {
this.removeAttribute('rounded');
}
}
get placement(): string {
return this.getAttribute('placement') || '';
}
set placement(selectPlacement: string) {
if (selectPlacement) {
this.setAttribute('placement', selectPlacement);
} else {
this.removeAttribute('placement');
}
}
get border(): string {
return this.getAttribute('border') || 'true';
}
set border(selectBorder) {
if (selectBorder) {
this.setAttribute('border', 'true');
} else {
this.setAttribute('border', 'false');
}
}
get listHeight(): string {
return this.getAttribute('list-height') || '256px';
}
set listHeight(selectListHeight) {
this.setAttribute('list-height', selectListHeight);
}
get defaultPlaceholder(): string {
return this.getAttribute('placeholder') || '请选择';
}
set canInsert(can: boolean) {
if (can) {
this.setAttribute('canInsert', '');
} else {
this.removeAttribute('canInsert');
}
}
get canInsert(): boolean {
return this.hasAttribute('canInsert');
}
get showSearch(): boolean {
return this.hasAttribute('show-search');
}
get defaultValue(): string {
return this.getAttribute('default-value') || '';
}
set defaultValue(selectDefaultValue) {
this.setAttribute('default-value', selectDefaultValue);
}
get placeholder(): string {
return this.getAttribute('placeholder') || this.defaultPlaceholder;
}
set placeholder(selectPlaceHolder) {
this.setAttribute('placeholder', selectPlaceHolder);
}
get loading(): boolean {
return this.hasAttribute('loading');
}
set loading(selectLoading) {
if (selectLoading) {
this.setAttribute('loading', '');
} else {
this.removeAttribute('loading');
}
}
get showSearchInput(): boolean {
return this.hasAttribute('showSearchInput');
}
set showSearchInput(isHide: boolean) {
if (isHide) {
this.setAttribute('showSearchInput', '');
} else {
this.removeAttribute('showSearchInput');
}
}
set showItem(item: string) {
this.selectItem = item;
}
set dataSource(selectDataSource: unknown) {
this.innerHTML = '<slot></slot><slot name="footer"></slot>';
if (selectDataSource.length > 0) {
this.bodyEl!.style.display = 'flex';
this.querySelectorAll('lit-select-option').forEach((a) => {
this.removeChild(a);
});
let valuesSet = new Set();
let flag = true;
selectDataSource.forEach(item => {
if (valuesSet.has(item.value)) {
flag = false;
return;
}
valuesSet.add(item.value);
});
selectDataSource.forEach((dateSourceBean: unknown) => {
if (dateSourceBean) {
let selectOption = document.createElement('lit-select-option');
let optionData = {
value: dateSourceBean.value ? dateSourceBean.value : dateSourceBean.name || dateSourceBean,
name: dateSourceBean.name ? dateSourceBean.name : dateSourceBean,
};
if (!flag) {
optionData = {
value: dateSourceBean.name ? dateSourceBean.name : dateSourceBean,
name: dateSourceBean.name ? dateSourceBean.name : dateSourceBean,
};
}
selectOption.textContent = optionData.name;
selectOption.setAttribute('value', optionData.value);
if (this.currentSelectedValue === optionData.value) {
selectOption.setAttribute('selected', '');
}
this.selectInputEl!.value = '';
this.append(selectOption);
}
});
this.initOptions();
} else {
this.bodyEl!.style.display = 'none';
}
}
initElements(): void {
this.selectVInputEl = this.shadowRoot!.querySelector('#select-input') as HTMLInputElement;
this.selectVInputEl?.addEventListener('keyup', (e) => {
if (e.code === 'Enter' || e.code === 'NumpadEnter') {
this.selectVInputEl.blur();
this.selectInputEl.value = this.selectVInputEl.value;
}
});
if (this.showSearchInput) {
this.shadowRoot!.querySelector<HTMLDivElement>('.body-select')!.style.display = 'block';
this.selectSearchInputEl = this.shadowRoot!.querySelector('#search-input') as HTMLInputElement;
this.selectSearchInputEl?.addEventListener('keyup', (evt) => {
let options = [];
options = [...this.querySelectorAll<LitSelectOption>('lit-select-option')];
options.filter((a: LitSelectOption) => {
if (a.textContent!.indexOf(this.selectSearchInputEl!.value) <= -1) {
a.style.display = 'none';
} else {
a.style.display = 'flex';
}
});
evt.preventDefault();
evt.stopPropagation();
});
}
}
initHtml(): string {
return `
${selectHtmlStr(this.listHeight)}
<div class="root noSelect" tabindex="0" hidefocus="true">
<div class="multipleRoot">
<input id="select-input" placeholder="${this.placeholder}" autocomplete="off" ${this.showSearch || this.canInsert ? '' : 'readonly'} tabindex="0">
</div>
<lit-loading class="loading" size="12"></lit-loading>
<lit-icon class="icon" name='down' color="#c3c3c3"></lit-icon>
<lit-icon class="clear" name='close-circle-fill'></lit-icon>
<lit-icon class="search" name='search'></lit-icon>
</div>
<div class="body">
<div class="body-select" style="display: none;">
<input id="search-input" placeholder="Search">
</div>
<div class="body-opt">
<slot></slot>
<slot name="footer"></slot>
</div>
</div>
`;
}
isMultiple(): boolean {
return this.hasAttribute('mode') && this.getAttribute('mode') === 'multiple';
}
newTag(value: unknown, text: unknown): HTMLDivElement {
let tag: unknown = document.createElement('div');
let icon: unknown = document.createElement('lit-icon');
icon.classList.add('tag-close');
icon.name = 'close';
let span = document.createElement('span');
tag.classList.add('tag');
span.dataset.value = value;
span.textContent = text;
tag.append(span);
tag.append(icon);
icon.onclick = (ev: unknown): void => {
tag.parentElement.removeChild(tag);
this.querySelector(`lit-select-option[value=${value}]`)!.removeAttribute('selected');
if (this.shadowRoot!.querySelectorAll('.tag').length === 0) {
this.selectInputEl.style.width = 'auto';
this.selectInputEl.placeholder = this.defaultPlaceholder;
}
ev.stopPropagation();
};
tag.value = value;
tag.dataset.value = value;
tag.text = text;
tag.dataset.text = text;
return tag;
}
connectedCallback(): void {
this.tabIndex = 0;
this.focused = false;
this.bodyEl = this.shadowRoot!.querySelector('.body');
this.selectInputEl = this.shadowRoot!.querySelector('input');
this.selectClearEl = this.shadowRoot!.querySelector('.clear');
this.selectIconEl = this.shadowRoot!.querySelector('.icon');
this.selectSearchEl = this.shadowRoot!.querySelector('.search');
this.selectMultipleRootEl = this.shadowRoot!.querySelector('.multipleRoot');
this.selectOptions = this.shadowRoot!.querySelector('.body-opt') as HTMLDivElement;
this.setEventClick();
this.setEvent();
this.selectInputEl.onblur = (ev: unknown): void => {
if (this.hasAttribute('disabled')) {
return;
}
if (this.isMultiple()) {
if (this.hasAttribute('show-search')) {
this.selectSearchEl.style.display = 'none';
this.selectIconEl.style.display = 'flex';
}
} else {
if (this.selectInputEl.placeholder !== this.defaultPlaceholder) {
this.selectInputEl.value = this.selectInputEl.placeholder;
this.selectInputEl.placeholder = this.defaultPlaceholder;
}
if (this.hasAttribute('show-search')) {
this.selectSearchEl.style.display = 'none';
this.selectIconEl.style.display = 'flex';
}
}
};
this.setOninput();
this.setOnkeydown();
}
setOninput(): void {
this.selectInputEl.oninput = (ev: unknown): void => {
let els: Element[] = [...this.querySelectorAll('lit-select-option')];
if (this.hasAttribute('show-search')) {
if (!ev.target.value) {
els.forEach((a: unknown) => (a.style.display = 'flex'));
} else {
this.setSelectItem(els, ev);
}
} else {
this.value = ev.target.value;
}
};
}
setSelectItem(els: Element[], ev: unknown): void {
els.forEach((a: unknown) => {
let value = a.getAttribute('value');
if (
value.toLowerCase().indexOf(ev.target.value.toLowerCase()) !== -1 ||
a.textContent.toLowerCase().indexOf(ev.target.value.toLowerCase()) !== -1
) {
a.style.display = 'flex';
} else {
a.style.display = 'none';
}
});
}
setEventClick(): void {
this.selectClearEl.onclick = (ev: unknown): void => {
if (this.isMultiple()) {
let delNodes: Array<unknown> = [];
this.selectMultipleRootEl.childNodes.forEach((a: unknown) => {
if (a.tagName === 'DIV') {
delNodes.push(a);
}
});
for (let i = 0; i < delNodes.length; i++) {
delNodes[i].remove();
}
if (this.shadowRoot!.querySelectorAll('.tag').length === 0) {
this.selectInputEl.style.width = 'auto';
this.selectInputEl.placeholder = this.defaultPlaceholder;
}
}
this.querySelectorAll('lit-select-option').forEach((a) => a.removeAttribute('selected'));
this.selectInputEl.value = '';
this.selectClearEl.style.display = 'none';
this.selectIconEl.style.display = 'flex';
this.blur();
ev.stopPropagation();
this.dispatchEvent(new CustomEvent('onClear', { detail: ev }));
};
this.initOptions();
this.onclick = (ev: unknown): void => {
if (ev.target.tagName === 'LIT-SELECT') {
if (this.focused === false) {
this.selectInputEl.focus();
this.focused = true;
this.bodyEl!.style.display = 'flex';
} else {
this.focused = false;
}
}
};
}
setEvent(): void {
this.onmouseover = this.onfocus = (ev): void => {
if (this.focused === false && this.hasAttribute('adaptive-expansion')) {
if (this.parentElement!.offsetTop < this.bodyEl!.clientHeight) {
this.bodyEl!.classList.add('body-bottom');
} else {
this.bodyEl!.classList.remove('body-bottom');
}
}
if (this.hasAttribute('allow-clear')) {
if (this.selectInputEl.value.length > 0 || this.selectInputEl.placeholder !== this.defaultPlaceholder) {
this.selectClearEl.style.display = 'flex';
this.selectIconEl.style.display = 'none';
} else {
this.selectClearEl.style.display = 'none';
this.selectIconEl.style.display = 'flex';
}
}
};
this.onmouseout = this.onblur = (ev): void => {
if (this.hasAttribute('allow-clear')) {
this.selectClearEl.style.display = 'none';
this.selectIconEl.style.display = 'flex';
}
this.focused = false;
};
this.selectInputEl.onfocus = (ev: unknown): void => {
if (this.hasAttribute('disabled')) {
return;
}
if (this.selectInputEl.value.length > 0) {
this.selectInputEl.placeholder = this.selectInputEl.value;
this.selectInputEl.value = '';
}
if (this.hasAttribute('show-search')) {
this.selectSearchEl.style.display = 'flex';
this.selectIconEl.style.display = 'none';
}
this.querySelectorAll('lit-select-option').forEach((a) => {
a.style.display = 'flex';
});
};
}
setOnkeydown(): void {
this.selectInputEl.onkeydown = (ev: KeyboardEvent): void => {
ev.stopPropagation();
if (this.hasAttribute('tabselect')) {
this.selectInputEl.readOnly = true;
} else {
if (ev.key === 'Backspace') {
if (this.isMultiple()) {
let tag = this.selectMultipleRootEl.lastElementChild.previousElementSibling;
if (tag) {
this.querySelector(`lit-select-option[value=${tag.value}]`)?.removeAttribute('selected');
tag.remove();
if (this.shadowRoot!.querySelectorAll('.tag').length === 0) {
this.selectInputEl.style.width = 'auto';
this.selectInputEl.placeholder = this.defaultPlaceholder;
}
}
} else {
this.clear();
this.dispatchEvent(new CustomEvent('onClear', { detail: ev }));
}
} else if (ev.key === 'Enter') {
if (!this.canInsert) {
let filter = [...this.querySelectorAll('lit-select-option')].filter(
(a: unknown) => a.style.display !== 'none'
);
if (filter.length > 0) {
this.selectInputEl.value = filter[0].textContent;
this.selectInputEl.placeholder = filter[0].textContent;
this.blur();
this.value = filter[0].getAttribute('value');
this.dispatchEvent(
new CustomEvent('change', {
detail: {
selected: true,
value: filter[0].getAttribute('value'),
text: filter[0].textContent,
},
})
);
}
}
} else if (ev.key === '0' && ev.target.value.length === 1 && ev.target.value === '0') {
ev.preventDefault();
}
}
};
}
initOptions(): void {
this.querySelectorAll('lit-select-option').forEach((a) => {
if (this.isMultiple()) {
a.setAttribute('check', '');
if (a.getAttribute('value') === this.defaultValue) {
let tag = this.newTag(a.getAttribute('value'), a.textContent);
this.selectMultipleRootEl.insertBefore(tag, this.selectInputEl);
this.selectInputEl.placeholder = '';
this.selectInputEl.value = '';
this.selectInputEl.style.width = '1px';
a.setAttribute('selected', '');
}
} else {
if (a.hasAttribute('selected')) {
a.removeAttribute('selected');
}
if (a.getAttribute('value') === this.defaultValue) {
this.selectInputEl.value = a.textContent;
a.setAttribute('selected', '');
}
}
a.addEventListener('mouseup', (e) => {
e.stopPropagation();
});
a.addEventListener('mousedown', (e) => {
e.stopPropagation();
});
this.onSelectedEvent(a);
});
}
onSelectedEvent(a: Element): void {
a.addEventListener('onSelected', (e: unknown) => {
if (this.isMultiple()) {
if (a.hasAttribute('selected')) {
let tag = this.shadowRoot!.querySelector(`div[data-value=${e.detail.value}]`) as HTMLElement;
if (tag) {
tag.parentElement!.removeChild(tag);
}
e.detail.selected = false;
} else {
let tag = this.newTag(e.detail.value, e.detail.text);
this.selectMultipleRootEl.insertBefore(tag, this.selectInputEl);
this.selectInputEl.placeholder = '';
this.selectInputEl.value = '';
this.selectInputEl.style.width = '1px';
}
if (this.shadowRoot!.querySelectorAll('.tag').length === 0) {
this.selectInputEl.style.width = 'auto';
this.selectInputEl.placeholder = this.defaultPlaceholder;
}
this.selectInputEl.focus();
} else {
[...this.querySelectorAll('lit-select-option')].forEach((item) => {
if (item.hasAttribute('selected')) {
this.currentSelectedValue = item.getAttribute('value') || '';
}
item.removeAttribute('selected');
});
this.blur();
this.bodyEl!.style.display = 'none';
this.selectInputEl.value = e.detail.text;
}
if (a.getAttribute('value') === this.currentSelectedValue) {
a.removeAttribute('selected');
this.currentSelectedValue = '';
this.selectInputEl.value = '';
this.selectInputEl.placeholder = this.defaultPlaceholder;
} else {
this.currentSelectedValue = a.getAttribute('value') || '';
a.setAttribute('selected', '');
}
this.value = this.currentSelectedValue;
this.dispatchEvent(new CustomEvent('change', { detail: { selectValue: this.currentSelectedValue, text: e.detail.text } }));
});
}
clear(): void {
this.selectInputEl.value = '';
this.selectInputEl.placeholder = this.defaultPlaceholder;
}
reset(): void {
this.querySelectorAll('lit-select-option').forEach((a) => {
[...this.querySelectorAll('lit-select-option')].forEach((a) => a.removeAttribute('selected'));
if (a.getAttribute('value') === this.defaultValue) {
this.selectInputEl.value = a.textContent;
a.setAttribute('selected', '');
}
});
}
disconnectedCallback(): void { }
adoptedCallback(): void { }
attributeChangedCallback(name: unknown, oldValue: unknown, newValue: unknown): void {
if (name === 'value' && this.selectInputEl) {
if (newValue) {
[...this.querySelectorAll('lit-select-option')].forEach((a) => {
if (a.getAttribute('value') === newValue) {
this.currentSelectedValue = a.getAttribute('value') || '';
a.setAttribute('selected', '');
this.selectInputEl.value = a.textContent;
} else {
a.removeAttribute('selected');
}
});
} else {
this.clear();
}
}
}
}