adintel-lib-poc

CustomSearch component is a reusable React.js compnonent which can be injected in any application.

0.2.4

latest

GitHub

npm

Version published: 2 days ago

Maintainers: 1

Weekly downloads: 303; decreased by-84.07%

Weekly downloads

Readme

Source

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 # 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"
  ],

FAQs

What is adintel-lib-poc?

Is adintel-lib-poc popular?

Is adintel-lib-poc well maintained?

Last updated on 30 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket