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

``bash
npm install adintel-lib-poc # or yarn add adintel-lib-poc
`




$3

Install react and react-dom as dependencies

`bash
npm install react@16.12.0 react-dom@16.12.0


or


yarn add react@16.12.0 react-dom@16.12.0
`

Create an angular component as below

`js
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: '

',
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
`js

"styles": [
"node_modules/adintel-lib-poc/dist/adintel-lib-poc.cjs.development.css"
],

`