b485dce7f2
Handle instant peer changing correctly Display unread badge only in chats Delay opening on ESG hover Lazy load sticker sets thumbs Fix onchanging profile info flick Hide shared media menu tabs Scroll on click to shared media tab Fix media tabs scroll position Fix voice messages playback in search on iOS Hover & play on waveform Better input fields border animation Don't lock scroll on horizontal scrollables if unnecessary Restrict editing & deleting outgoing messages Display avatars in notifications Open chat on notification click Don't close country selector on scrolling Select single country by enter Fix jumping text in context menus Changed preloader color
87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
//import { getRichValue } from "../helpers/dom";
|
|
import { LangPackKey } from "../lib/langPack";
|
|
import InputField from "./inputField";
|
|
|
|
export default class InputSearch {
|
|
public container: HTMLElement;
|
|
public input: HTMLElement;
|
|
public inputField: InputField;
|
|
public clearBtn: HTMLElement;
|
|
|
|
public prevValue = '';
|
|
public timeout = 0;
|
|
public onChange: (value: string) => void;
|
|
public onClear: () => void;
|
|
|
|
constructor(placeholder: LangPackKey, onChange?: (value: string) => void) {
|
|
this.inputField = new InputField({
|
|
placeholder,
|
|
plainText: true
|
|
});
|
|
|
|
this.container = this.inputField.container;
|
|
this.container.classList.remove('input-field');
|
|
this.container.classList.add('input-search');
|
|
|
|
this.onChange = onChange;
|
|
|
|
this.input = this.inputField.input;
|
|
this.input.classList.add('input-search-input');
|
|
|
|
const searchIcon = document.createElement('i');
|
|
searchIcon.classList.add('tgico', 'tgico-search');
|
|
|
|
this.clearBtn = document.createElement('i');
|
|
this.clearBtn.classList.add('tgico', 'btn-icon', 'tgico-close');
|
|
|
|
this.input.addEventListener('input', this.onInput);
|
|
this.clearBtn.addEventListener('click', this.onClearClick);
|
|
|
|
this.container.append(searchIcon, this.clearBtn);
|
|
}
|
|
|
|
onInput = () => {
|
|
if(!this.onChange) return;
|
|
|
|
let value = this.value;
|
|
|
|
//this.input.classList.toggle('is-empty', !value.trim());
|
|
|
|
if(value !== this.prevValue) {
|
|
this.prevValue = value;
|
|
clearTimeout(this.timeout);
|
|
this.timeout = window.setTimeout(() => {
|
|
this.onChange(value);
|
|
}, 200);
|
|
}
|
|
};
|
|
|
|
onClearClick = () => {
|
|
this.value = '';
|
|
this.onChange && this.onChange('');
|
|
this.onClear && this.onClear();
|
|
};
|
|
|
|
get value() {
|
|
return this.inputField.value;
|
|
}
|
|
|
|
set value(value: string) {
|
|
this.prevValue = value;
|
|
clearTimeout(this.timeout);
|
|
this.inputField.value = value;
|
|
}
|
|
|
|
public remove() {
|
|
clearTimeout(this.timeout);
|
|
this.input.removeEventListener('input', this.onInput);
|
|
this.clearBtn.removeEventListener('click', this.onClearClick);
|
|
}
|
|
}
|