react-inclusive-sortable-table - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/index.es.js

@@ -91,19 +91,89 @@ import React, { Component } from 'react';
 
-var Arrow = function Arrow(_ref) {
-  var sortDir = _ref.sortDir,
-      isCurrent = _ref.isCurrent;
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
 
-  var ascending = sortDir === 'ascending';
-  return React.createElement(
-    'svg',
-    { viewBox: '0 0 100 200', width: '100', height: '200' },
-    !(!ascending && isCurrent) && React.createElement('polyline', { points: '20 50, 50 20, 80 50' }),
-    React.createElement('line', { x1: '50', y1: '20', x2: '50', y2: '180' }),
-    !(ascending && isCurrent) && React.createElement('polyline', { points: '20 150, 50 180, 80 150' })
-  );
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
 };
 
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
+var Arrow = function (_Component) {
+  inherits(Arrow, _Component);
+
+  function Arrow() {
+    classCallCheck(this, Arrow);
+    return possibleConstructorReturn(this, (Arrow.__proto__ || Object.getPrototypeOf(Arrow)).apply(this, arguments));
+  }
+
+  createClass(Arrow, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          sortDir = _props.sortDir,
+          isCurrent = _props.isCurrent,
+          customArrow = _props.customArrow;
+
+      var ascending = sortDir === 'ascending';
+
+      if (customArrow && typeof customArrow === 'function') {
+        return customArrow(sortDir, isCurrent);
+      }
+
+      return React.createElement(
+        'svg',
+        { viewBox: '0 0 100 200', width: '100', height: '200' },
+        !(!ascending && isCurrent) && React.createElement('polyline', { points: '20 50, 50 20, 80 50' }),
+        React.createElement('line', { x1: '50', y1: '20', x2: '50', y2: '180' }),
+        !(ascending && isCurrent) && React.createElement('polyline', { points: '20 150, 50 180, 80 150' })
+      );
+    }
+  }]);
+  return Arrow;
+}(Component);
+
+
 Arrow.propTypes = {
   sortDir: PropTypes.string,
-  isCurrent: PropTypes.bool
+  isCurrent: PropTypes.bool,
+  customArrow: PropTypes.func
 };
@@ -121,3 +191,4 @@
       sortDir = _ref.sortDir,
-      sortable = _ref.sortable;
+      sortable = _ref.sortable,
+      customArrow = _ref.customArrow;
 
@@ -139,3 +210,7 @@ var sortableColumn = Array.isArray(sortable) && sortable.includes(i) || sortable === true;
         } },
-      React.createElement(Arrow, { sortDir: sortDir, isCurrent: sortedBy === i }),
+      React.createElement(Arrow, {
+        sortDir: sortDir,
+        isCurrent: sortedBy === i,
+        customArrow: customArrow
+      }),
       React.createElement(
@@ -155,2 +230,3 @@ 'span',
 th.propTypes = {
+  customArrow: PropTypes.func,
   header: PropTypes.string.isRequired,
@@ -164,50 +240,2 @@ i: PropTypes.number.isRequired,
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
 var Table = function (_Component) {
@@ -275,8 +303,9 @@ inherits(Table, _Component);
       var _props = this.props,
-          rows = _props.rows,
           caption = _props.caption,
+          className = _props.className,
+          customArrow = _props.customArrow,
           headers = _props.headers,
-          sortable = _props.sortable,
           rowHeaders = _props.rowHeaders,
-          className = _props.className;
+          rows = _props.rows,
+          sortable = _props.sortable;
 
@@ -327,3 +356,4 @@
                     sortDir: _this2.state.sortDir,
-                    sortedBy: _this2.state.sortedBy
+                    sortedBy: _this2.state.sortedBy,
+                    customArrow: customArrow
                   });
@@ -362,2 +392,3 @@ })
   className: PropTypes.string,
+  customArrow: PropTypes.func,
   headers: PropTypes.array.isRequired,
@@ -364,0 +395,0 @@ rowHeaders: PropTypes.bool,

dist/index.js

@@ -96,19 +96,89 @@ 'use strict';
 
-var Arrow = function Arrow(_ref) {
-  var sortDir = _ref.sortDir,
-      isCurrent = _ref.isCurrent;
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
 
-  var ascending = sortDir === 'ascending';
-  return React__default.createElement(
-    'svg',
-    { viewBox: '0 0 100 200', width: '100', height: '200' },
-    !(!ascending && isCurrent) && React__default.createElement('polyline', { points: '20 50, 50 20, 80 50' }),
-    React__default.createElement('line', { x1: '50', y1: '20', x2: '50', y2: '180' }),
-    !(ascending && isCurrent) && React__default.createElement('polyline', { points: '20 150, 50 180, 80 150' })
-  );
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
 };
 
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
+var Arrow = function (_Component) {
+  inherits(Arrow, _Component);
+
+  function Arrow() {
+    classCallCheck(this, Arrow);
+    return possibleConstructorReturn(this, (Arrow.__proto__ || Object.getPrototypeOf(Arrow)).apply(this, arguments));
+  }
+
+  createClass(Arrow, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          sortDir = _props.sortDir,
+          isCurrent = _props.isCurrent,
+          customArrow = _props.customArrow;
+
+      var ascending = sortDir === 'ascending';
+
+      if (customArrow && typeof customArrow === 'function') {
+        return customArrow(sortDir, isCurrent);
+      }
+
+      return React__default.createElement(
+        'svg',
+        { viewBox: '0 0 100 200', width: '100', height: '200' },
+        !(!ascending && isCurrent) && React__default.createElement('polyline', { points: '20 50, 50 20, 80 50' }),
+        React__default.createElement('line', { x1: '50', y1: '20', x2: '50', y2: '180' }),
+        !(ascending && isCurrent) && React__default.createElement('polyline', { points: '20 150, 50 180, 80 150' })
+      );
+    }
+  }]);
+  return Arrow;
+}(React.Component);
+
+
 Arrow.propTypes = {
   sortDir: PropTypes.string,
-  isCurrent: PropTypes.bool
+  isCurrent: PropTypes.bool,
+  customArrow: PropTypes.func
 };
@@ -126,3 +196,4 @@
       sortDir = _ref.sortDir,
-      sortable = _ref.sortable;
+      sortable = _ref.sortable,
+      customArrow = _ref.customArrow;
 
@@ -144,3 +215,7 @@ var sortableColumn = Array.isArray(sortable) && sortable.includes(i) || sortable === true;
         } },
-      React__default.createElement(Arrow, { sortDir: sortDir, isCurrent: sortedBy === i }),
+      React__default.createElement(Arrow, {
+        sortDir: sortDir,
+        isCurrent: sortedBy === i,
+        customArrow: customArrow
+      }),
       React__default.createElement(
@@ -160,2 +235,3 @@ 'span',
 th.propTypes = {
+  customArrow: PropTypes.func,
   header: PropTypes.string.isRequired,
@@ -169,50 +245,2 @@ i: PropTypes.number.isRequired,
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
 var Table = function (_Component) {
@@ -280,8 +308,9 @@ inherits(Table, _Component);
       var _props = this.props,
-          rows = _props.rows,
           caption = _props.caption,
+          className = _props.className,
+          customArrow = _props.customArrow,
           headers = _props.headers,
-          sortable = _props.sortable,
           rowHeaders = _props.rowHeaders,
-          className = _props.className;
+          rows = _props.rows,
+          sortable = _props.sortable;
 
@@ -332,3 +361,4 @@
                     sortDir: _this2.state.sortDir,
-                    sortedBy: _this2.state.sortedBy
+                    sortedBy: _this2.state.sortedBy,
+                    customArrow: customArrow
                   });
@@ -367,2 +397,3 @@ })
   className: PropTypes.string,
+  customArrow: PropTypes.func,
   headers: PropTypes.array.isRequired,
@@ -369,0 +400,0 @@ rowHeaders: PropTypes.bool,

package.json

 {
   "name": "react-inclusive-sortable-table",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "An accessible, sortable table based off of Heydon Pickering's Sortable Table from Inclusive Components.",
+  "keywords": ["accessibility", "a11y", "react", "inclusive components", "responsive", "table"],
   "author": "benjamingrobertson",
   "license": "MIT",
   "repository": "benjamingrobertson/react-inclusive-sortable-table",
+  "bugs": "https://github.com/benjamingrobertson/react-inclusive-sortable-table/issues",
   "main": "dist/index.js",
@@ -9,0 +11,0 @@ "module": "dist/index.es.js",

README.md

 # react-inclusive-sortable-table
 
-> An accessible, sortable table based off of Heydon Pickering's Sortable Table from Inclusive Components.
+> An accessible, responsive, sortable table based off of Heydon Pickering's Sortable Table from Inclusive Components.
 
 [![NPM](https://img.shields.io/npm/v/react-inclusive-sortable-table.svg)](https://www.npmjs.com/package/react-inclusive-sortable-table) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
+Read the artice! [Data Tables](https://inclusive-components.design/data-tables/)
+
+This component displays a `<table>` on large viewports and a definition list `<dl>` on small viewports.
+
 ## Install
@@ -78,2 +82,41 @@
 
+### customArrow
+
+A render props method for using a custom arrow icon.
+
+Here is an example of how you override the arrow with a custom component:
+
+```jsx
+<Table
+  customArrow={(sortDir, isCurrent) => (
+    <p>
+      {sortDir}, {isCurrent}
+    </p>
+  )}
+  caption="Front end websites"
+  headers={headers}
+  rows={rows}
+  sortable
+/>
+
+```
+
+The default arrow looks like this (it uses sortDirection and isCurrent to determine which way the arrow should point):
+
+```jsx
+let ascending = sortDir === 'ascending'
+
+return (
+  <svg viewBox='0 0 100 200' width='100' height='200'>
+    {!(!ascending && isCurrent) && (
+      <polyline points='20 50, 50 20, 80 50' />
+    )}
+    <line x1='50' y1='20' x2='50' y2='180' />
+    {!(ascending && isCurrent) && (
+      <polyline points='20 150, 50 180, 80 150' />
+    )}
+  </svg>
+)
+```
+
 ### headers
@@ -153,3 +196,2 @@
 
-- Customizable sorting button
 - Customizable sorting methods
@@ -156,0 +198,0 @@

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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58056

increased by8.05%

Lines of code

717

increased by7.82%

Number of lines in readme file

200

increased by26.58%

No dependency changes