[![wercker status](https://app.wercker.com/status/c8f17b0cb91dbe6d1713a5aa0749b711/m/ 'wercker status')](https://app.wercker.com/project/byKey/c8f17b0cb91dbe6d1713a5aa0749b711)

# nd-react-common

An NPM package of common react components to be utilized within nSight 2.0

## Installation

To install this in your project, run `npm login` then `npm install @ndustrial/nd-react-common react react-dom react-router-dom underscore`.

_NOTE:_ `react`, `react-dom`, `react-router-dom`, and `underscore` are peer dependencies -- you may already have these installed.

After it is installed, it can be utilized in your react project as follows:

### Header

##### Import

```
import { Header } from '@ndustrial/nd-react-common'
```

---

### Dropdown

##### Import

```
import { Dropdown } from '@ndustrial/nd-react-common'
```

##### Usage

```
<Dropdown data={json object} filterable={false} label="Select Option"/>
```

###### data (required)

JSON object to populate the dropdown list

###### filterable (optional)

Should the user be able to type and filter the list.

---

### User Dropdown

##### Import

```
import { UserDropdown } from '@ndustrial/nd-react-common'
```

##### Usage

```
<UserDropdown user={json object}/>
```

###### user (required)

JSON object to populate the user name and image

```
{
  "user":
    {
      "id": 1,
      "userName": "Bret Kruse",
      "profileImage": "https://readjack.files.wordpress.com/2010/11/e-train1.jpg"
    }

}
```

---

### DatePickerInput

Leverages [react-day-picker](https://github.com/gpbl/react-day-picker). Additional props available can be found in their [documentation](http://react-day-picker.js.org/api/DayPickerInput).

##### Import

```
import { DatePickerInput } from '@ndustrial/nd-react-common';
```

##### Usage

```
<DatePickerInput
  containerClassName="input__container"
  format={'D MMMM YYYY'}
  inputProps={{
    autocomplete: 'off',
    className: "input__input"
  }}
  onDayChange={(date) => onChange(date ? date.toISOString() : null)}
  value={props.value ? moment(props.value).format('D MMMM YYYY') : ''}
/>
```

###### containerClassName (optional)

Class name applied to the outer containing `div`.

###### inputProps (optional)

An object containing props that are applied to the Input field.

###### inputProps -- className (optional)

Class name applied to the input field that triggers the opening of the calendar overlay.

###### inputProps -- Other Props (optional)

Any other props that can be applied to an `input` element can also be passed as part of the inputProps object.

###### onDayChange (required)

Function called when selecting a date. Used to update the state of a parent component or a Redux store.

###### overlayClassName (optional)

Class name applied to the calendar overlay `div`.

###### overlayWrapperClassName (optional)

Class name applied to the calendar overlay wrapper `div`.

###### Other Props (optional)

Any other props listed in the [react-day-picker DayPickerInput documentation](http://react-day-picker.js.org/api/DayPickerInput) can also be passed.

---

### List

##### Import

```
import { List } from '@ndustrial/nd-react-common'
```

##### Usage

```
<List filterable={true} data={json object} name="organizations" callback={(value) => { this.callback(value); }}/>
```

###### data (required)

JSON object to populate the list

###### filterable (optional)

Should the user be able to type and filter the list.

###### name (optional)

Used to provide a placeholder and filtering labels i.e. "Filter organizations" or "No organizations found"

###### callback (optional)

Triggered when an item and selected. Returns selected object from json object

---

### Table

##### Import

```
import { Table } from '@ndustrial/nd-react-common'
```

##### Usage

```
<Table
  className="table_className"
  data={[json object]}
  filterable
  headers={["strings"]}
  isLoading
  label="Table Data"
/>
```

Table can also be extended if you need custom rendering:

```
import { Table } from '@ndustrial/nd-react-common';
import PropTypes from 'prop-types';
import React from 'react';

class ExampleTable extends Table {
  static propTypes = {
    ...Table.propTypes,
    renderItem: PropTypes.func.isRequired
  };

  generateRows() {
    if (!(this.state.data && this.state.data.length)) {
      return (
        <tr key="no_data">
          <td colSpan={this.state.headers.length}>
            No {this.props.label || 'Data'} Available
          </td>
        </tr>
      );
    }

    return this.state.data.map((item) =>
      this.props.renderItem({ item, handleDragEnd: this.props.handleDragEnd })
    );
  }

  render() {
    return (
      <div className={`nd-table ${this.props.className}`}>
        {this.renderSearchBox()}
        {this.renderResults()}
        <div className="nd-table__container">
          <table className="dnd__source-table">
            <thead>
              <tr>{this.generateHeaders()}</tr>
            </thead>

            <tbody>
              {this.renderLoader()}
              {!this.props.isLoading && this.generateRows()}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default ExampleTable;
```

###### className (optional)

String to be appended to the table className

Default:`''`

###### data (optional)

Array of JSON objects to populate the table
JSON object to populate the table

###### filterable (optional)

Boolean that allows the table to be filterable

Default: `false`

###### headers (optional)

Array of strings to set the headers in the table

###### isLoading (optional)

Boolean to determine if data is being fetched for the table.

If set to true, loading indicator and text displays in the table.

###### label (optional)

Used to provide a more specific message for loading and no data available text.

Example : `label = "Test Items"`

- Loading message = `Loading Test Items`
- No Data Found message = `No Test Items Found`

Default: `Data`