0.3.100 • Published 6 months ago

adintel-lib-poc v0.3.100

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

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"
  ],
@fortawesome/fontawesome-svg-core@fortawesome/free-regular-svg-icons@fortawesome/free-solid-svg-icons@fortawesome/react-fontawesome@types/react-flatpickrbootstrapbrowserslistcanvasreact-bootstrapreact-flatpickrreact-image-magnifiersreact-image-magnifyreact-magnifierreact-toastify
@everything-registry/sub-chunk-1099@infinitebrahmanuniverse/nolb-adi@zalastax/nolb-adi
0.3.100

6 months ago

0.4.1

7 months ago

0.3.99

7 months ago

0.3.98

8 months ago

0.3.97

8 months ago

0.3.96

8 months ago

0.3.95

8 months ago

0.3.94

9 months ago

0.3.93

10 months ago

0.3.92

10 months ago

0.3.91

10 months ago

0.3.90

1 year ago

0.3.89

1 year ago

0.3.88

1 year ago

0.3.87

1 year ago

0.3.86

1 year ago

0.3.85

1 year ago

0.3.84

1 year ago

0.3.83

1 year ago

0.3.82

1 year ago

0.3.81

1 year ago

0.3.80

1 year ago

0.3.79

1 year ago

0.3.78

1 year ago

0.3.77

1 year ago

0.3.75

1 year ago

0.3.76

1 year ago

0.3.74

1 year ago

0.3.73

1 year ago

0.3.72

1 year ago

0.3.71

1 year ago

0.3.70

1 year ago

0.3.69

1 year ago

0.3.68

1 year ago

0.3.67

1 year ago

0.3.66

1 year ago

0.3.64

1 year ago

0.3.65

1 year ago

0.3.63

1 year ago

0.3.62

1 year ago

0.3.61

1 year ago

0.3.60

1 year ago

0.3.59

1 year ago

0.3.53

2 years ago

0.3.52

2 years ago

0.3.51

2 years ago

0.3.50

2 years ago

0.3.58

2 years ago

0.3.57

2 years ago

0.3.56

2 years ago

0.3.54

2 years ago

0.3.42

2 years ago

0.3.41

2 years ago

0.3.40

2 years ago

0.3.49

2 years ago

0.3.48

2 years ago

0.3.47

2 years ago

0.3.46

2 years ago

0.3.45

2 years ago

0.3.44

2 years ago

0.3.43

2 years ago

0.3.31

2 years ago

0.3.30

2 years ago

0.3.39

2 years ago

0.3.38

2 years ago

0.3.37

2 years ago

0.3.36

2 years ago

0.3.35

2 years ago

0.3.34

2 years ago

0.3.33

2 years ago

0.3.32

2 years ago

0.3.28

2 years ago

0.3.27

2 years ago

0.3.26

2 years ago

0.3.24

2 years ago

0.3.23

2 years ago

0.3.22

2 years ago

0.3.20

2 years ago

0.3.21

2 years ago

0.3.19

2 years ago

0.3.18

2 years ago

0.3.17

2 years ago

0.3.16

2 years ago

0.3.15

2 years ago

0.3.14

2 years ago

0.3.13

2 years ago

0.3.12

2 years ago

0.3.11

2 years ago

0.3.0

2 years ago

0.3.6

2 years ago

0.3.5

2 years ago

0.3.8

2 years ago

0.3.7

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.3.9

2 years ago

0.3.10

2 years ago

0.2.27

2 years ago

0.2.26

2 years ago

0.2.25

2 years ago

0.2.24

2 years ago

0.2.23

2 years ago

0.2.22

2 years ago

0.2.21

2 years ago

0.2.20

2 years ago

0.1.118

2 years ago

0.1.117

2 years ago

0.1.114

2 years ago

0.2.19

2 years ago

0.1.113

2 years ago

0.2.18

2 years ago

0.1.116

2 years ago

0.2.17

2 years ago

0.1.115

2 years ago

0.1.110

2 years ago

0.1.112

2 years ago

0.1.111

2 years ago

0.2.16

2 years ago

0.2.15

2 years ago

0.2.14

2 years ago

0.2.13

2 years ago

0.2.12

2 years ago

0.2.11

2 years ago

0.2.10

2 years ago

0.1.121

2 years ago

0.1.120

2 years ago

0.1.123

2 years ago

0.1.122

2 years ago

0.1.96

2 years ago

0.1.97

2 years ago

0.1.98

2 years ago

0.1.99

2 years ago

0.1.90

2 years ago

0.1.91

2 years ago

0.1.92

2 years ago

0.1.93

2 years ago

0.1.94

2 years ago

0.1.95

2 years ago

0.1.88

2 years ago

0.1.89

2 years ago

0.2.30

2 years ago

0.2.32

2 years ago

0.2.31

2 years ago

0.1.107

2 years ago

0.1.106

2 years ago

0.2.1

2 years ago

0.1.109

2 years ago

0.2.0

2 years ago

0.1.108

2 years ago

0.1.103

2 years ago

0.1.102

2 years ago

0.2.29

2 years ago

0.1.105

2 years ago

0.2.28

2 years ago

0.1.104

2 years ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.9

2 years ago

0.1.101

2 years ago

0.2.8

2 years ago

0.1.100

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.1.87

2 years ago

0.1.86

2 years ago

0.1.85

2 years ago

0.1.84

2 years ago

0.1.83

2 years ago

0.1.82

2 years ago

0.1.81

2 years ago

0.1.80

2 years ago

0.1.79

2 years ago

0.1.78

2 years ago

0.1.75

2 years ago

0.1.74

2 years ago

0.1.73

2 years ago

0.1.72

2 years ago

0.1.71

2 years ago

0.1.70

2 years ago

0.1.69

2 years ago

0.1.68

2 years ago

0.1.67

2 years ago

0.1.66

2 years ago

0.1.65

2 years ago

0.1.64

2 years ago

0.1.63

2 years ago

0.1.62

2 years ago

0.1.61

2 years ago

0.1.60

2 years ago

0.1.59

3 years ago

0.1.58

3 years ago

0.1.57

3 years ago

0.1.56

3 years ago

0.1.55

3 years ago

0.1.54

3 years ago

0.1.53

3 years ago

0.1.52

3 years ago

0.1.51

3 years ago

0.1.50

3 years ago

0.1.49

3 years ago

0.1.48

3 years ago

0.1.47

3 years ago

0.1.46

3 years ago

0.1.45

3 years ago

0.1.44

3 years ago

0.1.43

3 years ago

0.1.42

3 years ago

0.1.41

3 years ago

0.1.40

3 years ago

0.1.39

3 years ago

0.1.38

3 years ago

0.1.37

3 years ago

0.1.36

3 years ago

0.1.35

3 years ago

0.1.34

3 years ago

0.1.33

3 years ago

0.1.32

3 years ago

0.1.31

3 years ago

0.1.30

3 years ago

0.1.29

3 years ago

0.1.28

3 years ago

0.1.27

3 years ago

0.1.26

3 years ago

0.1.25

3 years ago

0.1.24

3 years ago

0.1.23

3 years ago

0.1.22

3 years ago

0.1.21

3 years ago

0.1.20

3 years ago

0.1.19

3 years ago

0.1.18

3 years ago

0.1.17

3 years ago

0.1.16

3 years ago

0.1.15

3 years ago

0.1.14

3 years ago

0.1.13

3 years ago

0.1.12

3 years ago

0.1.11

3 years ago

0.1.10

3 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago