Add sort action

Connect item table header to sort action
tropy · Feb 14, 2017 · b971a3d · b971a3d
1 parent 8bdc43f
commit b971a3d
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 26 deletions.
diff --git a/src/components/item/iterator.js b/src/components/item/iterator.js
@@ -105,7 +105,8 @@ class ItemIterator extends PureComponent {
     onContextMenu: func.isRequired,
     onItemOpen: func.isRequired,
     onPhotoMove: func.isRequired,
-    onSelect: func.isRequired
+    onSelect: func.isRequired,
+    onSort: func.isRequired
   }
 }
 

diff --git a/src/components/item/table-head.js b/src/components/item/table-head.js
@@ -2,38 +2,96 @@
 
 const React = require('react')
 const { PureComponent, PropTypes } = React
-const { shape, string, bool, object, arrayOf, oneOf } = PropTypes
+const { shape, func, string, bool, object, arrayOf, oneOf } = PropTypes
 const cn = require('classnames')
 const { IconChevron7 } = require('../icons')
 
 
+class ItemTableHeadCell extends PureComponent {
+  get classes() {
+    return {
+      'metadata-head': true,
+      [this.props.type]: true,
+      [this.direction]: this.props.isActive
+    }
+  }
+
+  get style() {
+    return {
+      width: this.props.width
+    }
+  }
+
+  get direction() {
+    return this.props.isAscending ? 'ascending' : 'descending'
+  }
+
+  handleClick = () => {
+    const { uri, isActive, isAscending, onClick } = this.props
+
+    onClick({
+      type: 'property',
+      column: uri,
+      asc: !isActive || !isAscending
+    })
+  }
+
+  render() {
+    const { label, isActive } = this.props
+
+    return (
+      <th
+        style={this.style}
+        className={cn(this.classes)}
+        onClick={this.handleClick}>
+        <div className="metadata-head-container">
+          <div className="label">{label}</div>
+          {isActive && <IconChevron7/>}
+        </div>
+      </th>
+    )
+  }
+
+
+  static propTypes = {
+    isActive: bool,
+    isAscending: bool.isRequired,
+    label: string.isRequired,
+    type: string.isRequired,
+    uri: string.isRequired,
+    width: string.isRequired,
+    onClick: func.isRequired
+  }
+
+  static defaultProps = {
+    type: 'text'
+  }
+}
+
+
 class ItemTableHead extends PureComponent {
+  get isAscending() {
+    return this.props.sort.asc
+  }
 
-  order(uri) {
-    if (uri !== this.props.sort.column) return null
-    return this.props.sort.asc ? 'ascending' : 'descending'
+  isActive(uri) {
+    return (uri === this.props.sort.column)
   }
 
   render() {
-    const { columns } = this.props
+    const { columns, onSort } = this.props
 
     return (
       <table className="table-head">
         <thead>
           <tr>
-            {columns.map(({ width, property }) => (
-              <th
+            {columns.map(({ width, property }) =>
+              <ItemTableHeadCell {...property}
                 key={property.uri}
-                className={cn([
-                  'metadata-head', property.type, this.order(property.uri)
-                ])}
-                style={{ width }}>
-                <div className={cn(['metadata-head-container'])}>
-                  <div className="label">{property.label}</div>
-                  <IconChevron7/>
-                </div>
-              </th>
-            ))}
+                width={width}
+                isActive={this.isActive(property.uri)}
+                isAscending={this.isAscending}
+                onClick={onSort}/>)}
           </tr>
         </thead>
       </table>
@@ -47,10 +105,12 @@ class ItemTableHead extends PureComponent {
     })).isRequired,
 
     sort: shape({
-      asc: bool,
+      asc: bool.isRequired,
       column: string.isRequired,
       type: oneOf(['property']).isRequired
-    }).isRequired
+    }).isRequired,
+
+    onSort: func.isRequired
   }
 }
 

diff --git a/src/components/item/table.js b/src/components/item/table.js
@@ -27,12 +27,13 @@ class ItemTable extends ItemIterator {
       sort,
       onEdit,
       onEditCancel,
-      onMetadataSave
+      onMetadataSave,
+      onSort
     } = this.props
 
     return (
       <div className="item-table">
-        <ItemTableHead columns={columns} sort={sort}/>
+        <ItemTableHead columns={columns} sort={sort} onSort={onSort}/>
 
         {this.connect(
           <div

diff --git a/src/components/project/container.js b/src/components/project/container.js
@@ -106,7 +106,7 @@ class ProjectContainer extends Component {
 
 
   render() {
-    const { dt, items, data, columns, ...props } = this.props
+    const { dt, items, data, columns, onSort, ...props } = this.props
 
     return dt(
       <div
@@ -118,7 +118,8 @@ class ProjectContainer extends Component {
         <ProjectView {...props}
           items={items}
           data={data}
-          columns={columns}/>
+          columns={columns}
+          onSort={onSort}/>
 
         <ItemView {...props}/>
         <DragLayer cache={props.cache}/>
@@ -143,7 +144,8 @@ class ProjectContainer extends Component {
 
     onContextMenu: PropTypes.func.isRequired,
     onProjectOpen: PropTypes.func.isRequired,
-    onModeChange: PropTypes.func.isRequired
+    onModeChange: PropTypes.func.isRequired,
+    onSort: PropTypes.func.isRequired
   }
 
   static defaultProps = {
@@ -216,6 +218,10 @@ module.exports = {
         dispatch(actions.nav.select(...args))
       },
 
+      onSort(...args) {
+        dispatch(actions.nav.sort(...args))
+      },
+
       onItemSelect(id, mod) {
         dispatch(actions.item.select(id, { mod }))
       },

diff --git a/test/components/item/table-head_test.js b/test/components/item/table-head_test.js
@@ -22,6 +22,6 @@ describe('ItemTableHead', () => {
     }
 
     expect(shallow(<ItemTableHead columns={columns} sort={sort}/>))
-      .to.have.exactly(2).descendants('.metadata-head')
+      .to.have.exactly(2).descendants('ItemTableHeadCell')
   })
 })