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. Additional props available can be found in their documentation.

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 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