stardust - npm Package Compare versions

Comparing version 0.9.5 to 0.9.6

CHANGELOG.md

 # Change Log
 
+## [v0.9.6](https://github.com/TechnologyAdvice/stardust/tree/v0.9.6) (2016-01-22)
+[Full Changelog](https://github.com/TechnologyAdvice/stardust/compare/v0.9.5...v0.9.6)
+
+**Merged pull requests:**
+
+- feat\(Table\): accept sort/onSortChange properties to display sorted state [\#148](https://github.com/TechnologyAdvice/stardust/pull/148) ([davezuko](https://github.com/davezuko))
+
 ## [v0.9.5](https://github.com/TechnologyAdvice/stardust/tree/v0.9.5) (2016-01-21)
@@ -4,0 +11,0 @@ [Full Changelog](https://github.com/TechnologyAdvice/stardust/compare/v0.9.4...v0.9.5)

package.json

 {
   "name": "stardust",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "Semantic UI components for React.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/collections/Table/Table.js

@@ -13,2 +13,7 @@ import _ from 'lodash';
     data: PropTypes.array,
+    onSortChange: PropTypes.func,
+    sort: PropTypes.shape({
+      key: PropTypes.string,
+      direction: PropTypes.string, // descending|ascending, defaults to descending
+    }),
   };
@@ -21,9 +26,27 @@
 
+  _handleSortHeaderChange(key, direction) {
+    const {onSortChange} = this.props;
+    if (onSortChange) {
+      onSortChange(key, direction);
+    }
+  }
+
   _getHeaders() {
     return Children.map(this.props.children, (column) => {
+      const key = column.props.dataKey;
       const content = column.props.headerRenderer
         ? column.props.headerRenderer(this.props.data[0])
         : _.startCase(column.props.dataKey);
+      const sorted = _.get(this, 'props.sort.key') === key;
+      const direction = _.get(this, 'props.sort.direction', 'descending');
+      const onClick = () => this._handleSortHeaderChange(
+        key, direction === 'ascending' ? 'descending' : 'ascending'
+      );
+      const classes = classNames('sd-table-header', {
+        sorted,
+        ascending: sorted && direction === 'ascending',
+        descending: sorted && direction === 'descending',
+      });
 
-      return <th className='sd-table-header' key={column.props.dataKey}>{content}</th>;
+      return <th className={classes} key={key} onClick={onClick}>{content}</th>;
     });
@@ -30,0 +53,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

80594

increased by1.53%

Lines of code

1983

increased by1.12%

No dependency changes