React-React components 1.4.0: A collection of reusable React components with their own Flux lifecycle.

icon
Latest Release: 1.4.0

Use default exported Request Handler

Source code(tar.gz)
Source code(zip)

react-components

A collection of reusable React components with their own Flux lifecycle.

NPM version MIT License Build Status

What's inside react-components?

Table Component

From a simple table to multi-column filtering, column sorting, row selection, client side pagination, and more.

Search Component

Search against large sets of data, populate results, and take action with all the sweet hot keys your power users are after.

Pie Chart Component

Display complex data with our pie chart's drill in/out functionality, hover animations, and result list.

Modal Component

A simple single page modal that renders in it's own DOM tree and operates outside the render cycles of an application.

Confirm Dialog Component

A page level component that displays a confirmation dialog to the user with OK/Cancel buttons.

Page Message Component

A page level component that animates in and out for success, error, warning, info, and custom messages.

Getting Started

NPM Install react-components

$ npm install dataminr-react-components --save

If using a component which requests data from your APIs, add a mapping to your webpack config for the component which will be responsible for making requests

resolve: {
    alias: {
        RequestHandler$: path.join(__dirname, 'path', 'to', 'request', 'library'),
    }
},

Add external style sheet

<link type="text/css" rel="stylesheet" href="/node_modules/react-components/dist/react-components.css" />

Submitting Issues

If you are submitting a bug, please create a jsfiddle demonstrating the issue if possible.

Contributing

Fork the library and follow the Install Dependencies steps below.
$ git clone https://github.com/dataminr/react-components.git
$ git checkout master

Important Notes

  • Pull requests should be made to the master branch with proper unit tests.
  • Do not include the distribution files in your pull request. These are only sent to NPM

We use the following libraries within our project

  • React JavaScript library for building user interfaces
  • Flux Application architecture for building user interfaces
  • lodash JavaScript utility library
  • Moment Parse, validate, manipulate, and display dates in JavaScript
  • d3 Manipulate documents based on data with Data-Driven Documents
Style
  • Compass Css authoring framework
  • Sass CSS with superpowers
Unit testing and style checking
  • Jasmine Behavior-driven development framework for testing JavaScript code
  • Istanbul JavaScript statement, line, function, and branch code coverage when running unit tests
  • ESLint The pluggable linting utility for JavaScript and JSX

Install Dependencies

Node

node.js.org

Compass & Sass
$ gem install compass
Grunt command line interface
$ npm install -g grunt-cli
Finally, install third-party dependencies and start watchers:
$ cd ~/path/to/react-components/root
$ npm install
$ grunt

If you find your css build results are empty, update your sass gem.

Use the sample app in your browser to develop

/react-components/examples/index.html

Grunt Tasks

The default grunt task will start webpack to compile all JS/Sass and startup webpack dev server to serve combined files.

$ grunt

Run Karma unit tests and eslint

$ grunt test

Same as grunt test, however, this task will run code coverage and launch the code coverage in your browser.

$ grunt test:cov

License

MIT

Special Thanks To:

The developers that made this project possible by contributing to the the following libraries and frameworks:

React, Flux, Compass, Sass, Require, Grunt, Jasmine, Istanbul, ESLint, Watch, d3, lodash, and Moment

Comments

  • Module not found: Can't resolve 'RequestHandler'
    Module not found: Can't resolve 'RequestHandler'

    Sep 8, 2017

    I'm tried to create a basic piechart using static data in the component and I receive these compile errors:

    ./node_modules/dataminr-react-components/dist/lib/StoreBase.js
    Module not found: Can't resolve 'RequestHandler' in '.../node_modules/dataminr-react-components/dist/lib'
    

    full code: http://dpaste.com/17JP2Y4

    Reply
  • How to run the example
    How to run the example

    Jul 21, 2015

    Please I want to run the example inside folder. I did grunt and bower install but anything works. The index.html file inside /src/js/examples folder requires /dist and src/. How do I generate this folders? Thanks

    Reply
  • formatting a string with moment is allowed
    formatting a string with moment is allowed

    Aug 29, 2018

    this continues the revert of the componentDidUpdate changes, which tried to bypass 're-formatting' data by ignoring times that are strings

    Reply
  • Add footer to modal
    Add footer to modal

    Apr 1, 2016

    Add a footer to the modal component. The footer is optional. To include it, send in a name for the button, and a callback method for when the button is clicked. The button will be displayed in a footer area in the bottom of the modal.

    Reply
  • Added className to rowClasses
    Added className to rowClasses

    Aug 21, 2018

    Support adding specified className to tableRowItem

    Reply
  • Cancel outstanding requests
    Cancel outstanding requests

    Aug 7, 2018

    Historically, previous 'requests for term' were only cancelled if the current request was not coming from cache. This can cause a previous keystroke to overwrite the results of a current keystroke/search that was retrieved from the cache.

    Reply
  • Format data in different field
    Format data in different field

    Aug 23, 2018

    Instead of reformatting the data in place, use the new field to save the formatted value. This should prevent issues related to re-rendering and re-formatting of already-formatted data.

    This change does impact the field that hoverProperty may wish to reference. For example, if you wish to have a hover property on a timestamp, you should probably reference fieldName, while before you would reference fieldNameTimestamp.

    Reply
  • remove componentWillReceiveProps from Table component
    remove componentWillReceiveProps from Table component

    Aug 29, 2018

    calling TableStore.onDataReceived out of the normal data lifecycle can cause issues

    Reply
  • Fix cache key
    Fix cache key

    Aug 2, 2018

    Use original searchTerm for cache key and include additionalFilters

    Reply
  • Advanced filter changes: Namespace input ids, Place input before label
    Advanced filter changes: Namespace input ids, Place input before label

    Apr 20, 2016

    Associate the input to the label implicityly

    • There was an issue when trying to place multiple tables on a single page where clicking a label would toggle the wrong checkbox. This fixes the problem.
    Reply
  • Column filtering
    Column filtering

    Nov 4, 2015

    Adds the ability to filter by a value in a specified column in the table component.

    Reply