All files / src/components/zd-iterable search.ts

100% Statements 27/27
100% Branches 12/12
100% Functions 4/4
100% Lines 26/26

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 8793x 93x 93x 93x   93x         93x                     6x   6x   6x   6x   6x                                               6x 6x 2x 4x 3x   1x         2x     6x     6x       7x   1x 1x 1x     1x       93x  
import { Metadata } from '@zeedhi/core';
import debounce from 'lodash.debounce';
import { InputFactory } from '../zd-input/input-factory';
import { TextInput } from '../zd-text-input/text-input';
import { ISearch } from './interfaces';
import { Iterable } from './iterable';
 
/**
 * Base class for Search component
 */
export class Search extends TextInput implements ISearch {
	/**
	 * Iterable component name
	 */
	public iterableComponentName!: string;
 
	/**
	 * Iterable component name
	 */
	public iterableComponent!: Iterable;
 
	public showLabel = false;
 
	public showHelper = false;
 
	public appendIcon = 'magnify';
 
	public placeholder = 'SEARCH';
 
	public lazyAttach = false;
 
	/* istanbul ignore next */
	/**
	 * Creates a new Iterable Page component.
	 * @param props Iterable page component properties
	 */
	constructor(props: ISearch) {
		super(props);
		this.iterableComponentName = this.getInitValue(
			'iterableComponentName',
			props.iterableComponentName,
			this.iterableComponent,
		);
		this.showHelper = this.getInitValue('showHelper', props.showHelper, this.showHelper);
		this.showLabel = this.getInitValue('showLabel', props.showLabel, this.showLabel);
		this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, this.appendIcon);
		this.placeholder = this.getInitValue('placeholder', props.placeholder, this.placeholder);
		this.lazyAttach = this.getInitValue('lazyAttach', props.lazyAttach, this.lazyAttach);
		if (!this.lazyAttach) this.setIterableComponent();
		this.createAccessors();
	}
 
	public setIterableComponent(name?: string) {
		this.iterableComponentName = name || this.iterableComponentName;
		if (this.iterableComponentName && Metadata.getInstances(this.iterableComponentName).length > 0) {
			this.iterableComponent = Metadata.getInstance(this.iterableComponentName) as Iterable;
		} else if (this.parent instanceof Iterable) {
			this.iterableComponent = this.parent;
		} else {
			throw new Error(`Could not find the iterable component associated with ${this.name}`);
		}
	}
 
	protected async setSearch(search: string) {
		await this.iterableComponent.setSearch(search);
	}
 
	public debounceSetSearch: (search: string) => void = debounce(this.setSearch, 500);
 
	get value() {
		return this.iterableComponent?.datasource.search || '';
	}
 
	set value(value: string) {
		if (!this.iterableComponent) return;
 
		if (this.internalValue !== value) {
			this.internalDisplayValue = this.formatter(value);
			this.iterableComponent.datasource.search = value;
		}
 
		this.debounceSetSearch(value);
	}
}
 
InputFactory.register('ZdSearch', Search);