selectabular - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+2.0.0 / 2016-11-26
+==================
+
+  * Breaking - Rewrite the API so that instead of `import select from 'selectabular';` it exposes a multiple functions. To achieve the old behavior, use `import * as select from 'selectabular'.
+  * Feature - Integrate `select.byArrowKeys` React helper from `reactabular-select`. See README for an usage example.
+
 1.0.0 / 2016-11-25
@@ -2,0 +8,0 @@ ==================

dist/index.js

@@ -9,2 +9,13 @@ 'use strict';
 
+var _byArrowKeys = require('./by-arrow-keys');
+
+Object.defineProperty(exports, 'byArrowKeys', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_byArrowKeys).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -52,24 +63,25 @@
 
-var select = {
-  all: function all(rows) {
-    return rows.map(setSelectedTo(true));
-  },
-  none: function none(rows) {
-    return rows.map(setSelectedTo(false));
-  },
-  rows: function rows(filter) {
-    return function (rows) {
-      return {
-        rows: actOnMatching(setSelectedTo(true))(filter)(rows),
-        selectedRows: actOnFiltered(returnRow)(filter)(rows)
-      };
+var selectAll = function selectAll(rows) {
+  return rows.map(setSelectedTo(true));
+};
+var selectNone = function selectNone(rows) {
+  return rows.map(setSelectedTo(false));
+};
+var selectRows = function selectRows(filter) {
+  return function (rows) {
+    return {
+      rows: actOnMatching(setSelectedTo(true))(filter)(rows),
+      selectedRows: actOnFiltered(returnRow)(filter)(rows)
     };
-  },
-  toggle: function toggle(filter) {
-    return function (rows) {
-      return actOnMatching(toggleRow)(filter)(rows);
-    };
-  }
+  };
 };
+var selectToggle = function selectToggle(filter) {
+  return function (rows) {
+    return actOnMatching(toggleRow)(filter)(rows);
+  };
+};
 
-exports.default = select;
+exports.all = selectAll;
+exports.none = selectNone;
+exports.rows = selectRows;
+exports.toggle = selectToggle;

package.json

 {
   "name": "selectabular",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Selection utilities",
@@ -59,6 +59,6 @@ "scripts": {
     "babel-jest": "^17.0.2",
-    "babel-loader": "^6.2.8",
     "babel-plugin-syntax-object-rest-spread": "^6.13.0",
     "babel-plugin-transform-object-rest-spread": "^6.19.0",
     "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
     "eslint": "^3.10.2",
@@ -71,4 +71,10 @@ "eslint-config-airbnb": "^13.0.0",
     "jest": "^17.0.3",
+    "react": "^15.4.1",
+    "react-addons-test-utils": "^15.4.1",
+    "react-dom": "^15.4.1",
     "rimraf": "^2.5.4"
   },
+  "peerDependencies": {
+    "react": ">= 15.0.0 < 16.0.0"
+  },
   "pre-push": [
@@ -75,0 +81,0 @@ "test:all"

README.md

@@ -12,17 +12,21 @@ [![build status](https://secure.travis-ci.org/reactabular/selectabular.svg)](http://travis-ci.org/reactabular/selectabular) [![bitHound Score](https://www.bithound.io/github/reactabular/selectabular/badges/score.svg)](https://www.bithound.io/github/reactabular/selectabular) [![codecov](https://codecov.io/gh/reactabular/selectabular/branch/master/graph/badge.svg)](https://codecov.io/gh/reactabular/selectabular)
 
-### `select.all(rows)`
+```javascript
+import * as select from 'selectabular';
 
-#### Returns:
+// Or you can cherry-pick
+import { all } from 'selectabular';
+import { all as selectAll } from 'selectabular';
+```
 
-- `rows` array where each row has a `.selected=true` attribute
+### `select.all(rows) => [<row>]`
 
-### `select.none(rows)`
+- Returned `rows` is an array where each row has a `.selected=true` attribute
 
-#### Returns:
+### `select.none(rows) => [<row>]`
 
-- `rows` array where each row has a `.selected=false` attribute
+- Returned `rows` is an array where each row has a `.selected=false` attribute
 
-### `select.rows(filter)(rows)`
+### `select.rows(filter)(rows) => { rows: [<row>], selectedRows: [<matchingRow>]}`
 
-Given a filter, it will select the matching rows and return them
+Given a filter, it will select the matching rows and return them:
 
@@ -52,16 +56,9 @@ ```javascript
 
-#### Returns:
+**Important!**
 
-- `rows`: original rows, where each row's `.selected` is set to `true` if it matches the filter.
-- `selectedRows`: array containing *only* those rows matching the filter.
-
-#### Notes:
-
 - `rows` does *not* toggle the rows that do not match the filter; please use `select.none` a priori for that.
 - As shown in the example, `rows`, and `selectedRows` are internal variable names, used in the implementation; which can be easily renamed inline (See example where `selectedRows` is renamed to `result`)
 
-### `select.toggle(filter)(rows)`
+### `select.toggle(filter)(rows) => [<row>]`
 
-#### Returns:
-
 - Input rows where each filter-matching row is toggled its `selected` attribute.
@@ -87,4 +84,147 @@
 
+## React Helpers
+
+### Selecting by Arrow Keys
+
+There's a single React specific helper that makes it easier to track up/down arrows. The API consists of a single higher order function: `select.byArrowKeys({ rows: <rows>, selectedRowIndex: <number>, onSelectRow: (selectedRowIndex) => <any>})(<React element>) => <React element>`
+
+If there is a selection (`selectedRowIndex`), then it triggers `onSelectRow` with the new `selectedRowIndex` which you can then use to update your selection state.
+
+### How to Use?
+
+The following example illustrates how to use the functionality with a Reactabular based table. You can select a row by clicking in the following example. If there's a selection, you can move up and down using the arrow keys.
+
+```jsx
+/*
+import React from 'react';
+import classnames from 'classnames';
+import cloneDeep from 'lodash/cloneDeep';
+import find from 'lodash/find';
+import findIndex from 'lodash/findIndex';
+import { Table } from 'reactabular';
+import { compose } from 'redux';
+import * as select from 'selectabular';
+*/
+
+const rows = [
+  {
+    id: 100,
+    name: 'Adam',
+    age: 55
+  },
+  {
+    id: 102,
+    name: 'Joe',
+    age: 12
+  },
+  {
+    id: 101,
+    name: 'Brian',
+    age: 62
+  },
+  {
+    id: 103,
+    name: 'Mike',
+    age: 22
+  },
+  {
+    id: 104,
+    name: 'Jack',
+    age: 33
+  }
+];
+
+const columns = [
+  {
+    property: 'name',
+    header: {
+      label: 'Name'
+    }
+  },
+  {
+    property: 'age',
+    header: {
+      label: 'Age'
+    }
+  }
+];
+
+class SelectionTable extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      rows,
+      columns,
+      selectedRows: []
+    };
+
+    this.onRow = this.onRow.bind(this);
+    this.onSelectRow = this.onSelectRow.bind(this);
+    this.getSelectedRowIndex = this.getSelectedRowIndex.bind(this);
+  }
+  render() {
+    const { columns, rows, selectedRows } = this.state;
+    const selectedRowIndex = this.getSelectedRowIndex(selectedRows);
+
+    return select.byArrowKeys({
+      rows,
+      selectedRowIndex,
+      onSelectRow: this.onSelectRow
+    })(
+      <div>
+        <Table.Provider
+          className="pure-table pure-table-striped"
+          columns={columns}
+        >
+          <Table.Header />
+
+          <Table.Body
+            rows={rows}
+            rowKey="id"
+            onRow={this.onRow}
+          />
+
+          <tfoot>
+            <tr>
+              <td>Selected: {selectedRows[0] && selectedRows[0].name}</td>
+              <td></td>
+            </tr>
+          </tfoot>
+        </Table.Provider>
+      </div>
+    );
+  }
+  onRow(row, { rowIndex }) {
+    return {
+      className: classnames(
+        rowIndex % 2 ? 'odd-row' : 'even-row',
+        row.selected && 'selected-row'
+      ),
+      onClick: () => this.onSelectRow(rowIndex)
+    };
+  }
+  onSelectRow(selectedRowIndex) {
+    const { rows } = this.state;
+    const selectedRowId = rows[selectedRowIndex].id;
+
+    this.setState(
+      compose(
+        select.rows(row => row.id === selectedRowId),
+        select.none
+      )(rows)
+    );
+  }
+  getSelectedRowIndex(selectedRows) {
+    return findIndex(this.state.rows, {
+      id: selectedRows[0] && selectedRows[0].id
+    });
+  }
+}
+
+<SelectionTable />
+```
+
 ## License
 
 MIT. See LICENSE for details.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17149

increased by96.78%

Number of package files

7

increased by40%

Lines of code

163

increased by158.73%

Number of lines in readme file

228

increased by159.09%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

19

increased by18.75%

No dependency changes