adintel-lib-poc v0.3.89
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 likeButton
andCustomSearchWrapper
Commands
Install the component library using below command
npm install adintel-lib-poc # or yarn add adintel-lib-poc
Angular Example
Install react and react-dom as dependencies
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
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"
],
3 days ago
3 days ago
4 days ago
6 days ago
7 days ago
21 days ago
29 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago