react-kd.ui
===

This is the code repository for the react karmadata ui components, this is a node module that developers can import and use in their projects to use the karmadata widgets to build custom apps.

Installation
---

```jsx
npm install react-kd.ui —save
```


Importing the library as a node dependency
---

```jsx
import * as KdUi from 'react-kd.ui';
```

List of Components
---

####KdSelectEntity

This components is used when the developer want's the user to select a value from one of the karmadata entities, the user can do a search using an autocomplete input that make suggestions based on the input.

Example of usage:

```jsx
// importing the node package
import React from 'react';
import { KdSelectEntity } from 'react-kd.ui';

// custom handler for the change selection
// send the selection to a google search
function onSelect(object) {
  console.log(`selected: ${object.data.value} ${object.data.label}`);
  window.open(`http://www.google.com/search?q=${object.data.label}`);
}

// function to render the item in the options of the component
function onSuccess(item) {
  const valuesForAC = {
    myCustomLabel: `<b>${item.KdLabel}</b>`,
  };

  return Object.assign({}, item, valuesForAC);
}

// function to render the item description in the options of the component
function onRender(item) {
  let customLabel = '';
  if (item != null) {
    if (item.myCustomLabel != null || item.myCustomLabel != null) {
      customLabel += `${item.myCustomLabel}<br />`;
    }
    if (item.KdId != null || item.KdId != null) {
      customLabel += `KdId: ${item.KdId}`;
    }
    if (item.BrandName != null || item.BrandName != null) {
      if (item.KdLabel != null || item.KdLabel != null) {
        customLabel += ' - ';
      }
      customLabel += `BrandName: ${item.BrandName}`;
    }
    if (item.BrandName != null || item.BrandName != null) {
      if (item.BrandName != null || item.BrandName != null) {
        customLabel += ' - ';
      }
      customLabel += `Generic: ${item.Ingredient}`;
    }
  }

  return customLabel;
}

// options for the main selector of the component
const mainSelectorOptions = {
  visible: false,
  selected: '',
  optionValues: {
    anyOption: {
      visible: true,
    },
    customOptions: null,
    userSpecifiedOption: {
      visible: true,
    },
  },
};

// options for the auto-complete of the component
const autoCompleteOptions = {
  placeholderText: 'Custom Placeholder...',
  onSuccess,
  onRender,
};

// options for the api for the component
const apiOptions = {
  url: 'https://api.karmadata.com/Select',
  key: 'ApiKey...',
};

// definition of the events for the component
const events = {
  onSelect,
  onChange: null,
};

// select behavior, can be 'None', 'AddChicklet' or 'AddChickletSingle'
const selectBehavior = 'None';

<KdSelectEntity
  mainSelector={mainSelectorOptions}
  autoComplete={autoCompleteOptions}
  api={apiOptions}
  events={events}
  selectBehavior={selectBehavior}
  kdFilterModel={kd.FilterItem('KdDrugRxNorm', 'KdId', 'KdDrugRxNorm', null)}
/>;
```
