CustomSearch Component Library POC
CustomSearch component is a reusable React.js compnonent which can be injected in any application.
This componet can be injected in Angular and React.js projects
The library adintel-lib-poc
contains multiple reusable components like Button
and CustomSearchWrapper
Commands
Install the component library using below command
npm install adintel-lib-poc
Angular Example
Install react and react-dom as dependencies
npm install react@16.12.0 react-dom@16.12.0
yarn add react@16.12.0 react-dom@16.12.0
Create an angular component as below
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
import { CustomSearchWrapper } from 'adintel-lib-poc';
import { debounce } from 'lodash';
@Component({
selector: 'react-custom-search',
template: '<div id="rootId"></div>',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ReactSearchComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
public rootId = 'rootId';
public isSearchClear = false;
@Input() searchData = { columns: [], searchResults: [] };
@Input() plainQuery: string = '';
@Output() getColumnDetails = new EventEmitter();
@Output() handleSearch = new EventEmitter();
@Output() setSearchString = new EventEmitter();
@Input() clearSearchData: boolean;
@Input() changedSearchText: string;
@Input() isLoading: boolean;
@Input() showEmptyOption: boolean;
ngOnInit() {
this.getColumnDetails.emit();
}
ngOnChanges() {
this.render();
}
ngAfterViewInit(): void {
this.render();
}
ngOnDestroy(): void {
}
public handleSearchData = (payload: any) => {
this.handleSearch.emit(payload);
}
public handleOnChange = (searchQuery, searchText, isValid) => {
this.setSearchString.emit({ text: searchText, query: searchQuery, isValid: isValid })
}
debouncedSearch = debounce(this.handleSearchData, 600);
private render() {
ReactDOM.render(React.createElement(CustomSearchWrapper,
{
searchData: this.searchData,
handleSearchData: this.debouncedSearch,
plainQuery: '',
onChange: this.handleOnChange,
onClearSearch: this.clearSearchData,
changedSearchText: this.changedSearchText,
isLoading: this.isLoading,
showEmptyOption: this.showEmptyOption
}
), document.getElementById(this.rootId));
}
}
Add the stylesheet path as below in angular.json file
"styles": [
"node_modules/adintel-lib-poc/dist/adintel-lib-poc.cjs.development.css"
],