table sort

Author: Lobos

docs/src/js/pages/formItem.jsx

@@ -1,6 +1,5 @@
 'use strict';
 
-import { Component } from 'react';
 import Code from '../Code';
 import Example from '../Example';
 const { Form, FormControl, FormItem } = global.uiRequire();
@@ -24,7 +23,7 @@ module.exports = () => {
         <div>可以直接当作Component，把自定义组件当作children传入。一个FormItem只能接受一个自定义组件，并且这个组件必须实现一个<em>onChange(value)</em>事件返回值，接受<em>value</em>作为props传入值</div>
         <Code>
 {`<FormItem
-  className="string",     // 需要额外添加的 className
+  className="string"      // 需要额外添加的 className
   name={string}           // 数据key名称，唯一
   type={string}           // 自动验证以下type: email,integer,number,alpha,alphanum,tel,url
   min={int}               // 值类型为 string 时，最小长度；为 number 时，最小值；为 array 时，最少选项数

docs/src/js/pages/table.jsx

@@ -63,7 +63,7 @@ headers = [{
   content:{string|func}   // 表格显示内容，{}格式字符串模板或一个返回ReactElement的方法
   hidden:{bool}           // 是否显示，默认为true
   name:{string}           // 必填，字段名称，和data对应，如果不填content，使用name获取数据
-  sortAble:{bool}         // 是否可以排序，默认值为false
+  sort:{bool}             // 是否可以排序，默认值为false
   width:{number}          // 宽度
   header:{string|element} // 表头内容，string或者ReactElement
 }]
@@ -158,19 +158,31 @@ headers = [{
   width={this.state.width}
   height={this.state.height}
   fetch={this.state.fetch}
-  headers={[
-    { name: 'name', sortAble: true, header: 'Name',
+  columns={[
+    { name: 'name', sort: true, header: 'Name',
       content: (d) => {
         return <a onClick={() => { Modal.alert('点击了:' + d.name); }}>{d.name}</a>;
       }
     },
     { name: 'position', hidden: true },
-    { name: 'office', sortAble: true, header: 'Office' },
-    { name: 'start_date', sortAble: true, content: '{start_date}', header: 'Start Date' },
-    { name: 'salary', content: '{salary}', header: 'Salary' },
+    { name: 'office', sort: true, header: 'Office' },
+    { name: 'start_date', content: '{start_date}', header: 'Start Date', sort: [
+      (a, b) => a.start_date > b.start_date ? 1 : -1,
+      (a, b) => a.start_date < b.start_date ? 1 : -1
+    ] },
+    { name: 'salary', content: '{salary}', header: 'Salary', sort: (a, b) => {
+      return parseInt(a.salary.replace(/[\$,]/g, '')) >
+        parseInt(b.salary.replace(/[\$,]/g, '')) ? 1 : -1;
+    } },
     { name: 'tools', width: 60,
       content: (d) => {
-        return <a onClick={() => { Modal.confirm('确定要删除' + d.name + '吗', () => { console.log('just a kidding.'); }); }}>删除</a>;
+        return (
+          <a onClick={() => {
+            Modal.confirm('确定要删除' + d.name + '吗', () => {
+              console.log('just a kidding.');
+            });
+          }}>删除</a>
+        );
       }
     }
   ]}

src/Form.js

@@ -138,9 +138,9 @@ class Form extends Component {
       // send clone data
       let data = clone(this.state.data);
 
-      // remove ignore value
+      // remove disabled value
       forEach(this.items, (item) => {
-        if (item.ignore) {
+        if (item.disabled) {
           delete data[item.name];
         }
       });

src/Table/Header.js

@@ -1,57 +1,53 @@
 'use strict';
 
-import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from '../utils/proptypes';
 
-export default class Header extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      asc: 0
-    };
-    this.onSort = this.onSort.bind(this);
-  }
+import _tables from '../styles/_tables.scss';
 
-  onSort () {
-    let asc = this.state.asc === 0 ? 1 : 0;
-    this.setState({ asc });
-    this.props.onSort(this.props.name, asc);
-  }
+function getClassName (base, name, asc, status) {
+  return classnames(
+    base,
+    name === status.key && asc === status.asc && _tables.active
+  );
+}
+
+export default function Header (props) {
+  const { onSort, sortStatus, name, sort, header, children } = props;
 
-  render () {
-    let sort = [];
-    let onSort = null;
-    let style = {};
-
-    if (this.props.sortAble) {
-      sort.push(<i key="up" className={classnames('arrow-up', {active: this.props.name === this.props.sort.name && this.state.asc === 1})} />);
-      sort.push(<i key="down" className={classnames('arrow-down', {active: this.props.name === this.props.sort.name && this.state.asc === 0})} />);
-
-      onSort = this.onSort;
-      style = { cursor: 'pointer' };
-    }
-
-    return (
-      <th style={style} onClick={onSort}>
-        {this.props.header}
-        {sort}
-      </th>
-    );
+  const handleSort = (asc, fn) => {
+    if (name === sortStatus.key && asc === sortStatus.asc) return;
+    return () => onSort(name, asc, fn);
+  };
+
+  let icons;
+
+  if (sort === true || Array.isArray(sort)) {
+    let fns = sort === true ? [] : sort;
+    icons = [
+      <a key="up" onClick={handleSort(0, fns[0])} className={getClassName(_tables['sort-up'], name, 0, sortStatus)} />,
+      <a key="down" onClick={handleSort(1, fns[1])} className={getClassName(_tables['sort-down'], name, 1, sortStatus)} />
+    ];
+  } else if (typeof sort === 'function') {
+    icons = <a onClick={handleSort(0, sort)} className={getClassName(_tables['sort-one'], name, 0, sortStatus)} />;
   }
+
+  return <th>{header}{children}{icons}</th>;
 }
 
 Header.propTypes = {
+  children: PropTypes.any,
   content: PropTypes.any,
   header: PropTypes.any,
   hidden: PropTypes.bool,
   name: PropTypes.string,
   onSort: PropTypes.func,
-  sort: PropTypes.object,
-  sortAble: PropTypes.bool,
+  sort: PropTypes.bool_func,
+  sortStatus: PropTypes.object,
   width: PropTypes.number_string
 };
 
 Header.defaultProps = {
-  hidden: false
+  hidden: false,
+  sortStatus: {}
 };

src/Table/Table.js

@@ -14,10 +14,6 @@ import _tables from '../styles/_tables.scss';
 export default class Table extends Component {
   constructor (props) {
     super(props);
-    this.state = {
-      sort: {}
-    };
-
     this.onBodyScroll = this.onBodyScroll.bind(this);
   }
 
@@ -54,7 +50,6 @@ export default class Table extends Component {
     if (!tr) return;
 
     let ths = this.refs.header.querySelectorAll('th');
-
     let tds = tr.querySelectorAll('td');
 
     if (tds.length <= 1) return;
@@ -66,16 +61,6 @@ export default class Table extends Component {
     }
   }
 
-  getSelected (name) {
-    let values = [];
-    this.state.data.forEach((d) => {
-      if (d.$checked) {
-        values.push(name ? d[name] : d);
-      }
-    });
-    return values;
-  }
-
   onBodyScroll (e) {
     let hc = this.refs.headerContainer;
     hc.style.marginLeft = (0 - e.target.scrollLeft) + 'px';
@@ -86,13 +71,14 @@ export default class Table extends Component {
   }
 
   renderBody (data) {
-    const { selectAble, headers } = this.props;
+    const { selectAble } = this.props;
+    const columns = this.getColumns();
 
     if (!Array.isArray(data)) {
-      return <tbody><tr><td colSpan={headers.length}>{data}</td></tr></tbody>;
+      return <tbody><tr><td colSpan={columns.length}>{data}</td></tr></tbody>;
     }
 
-    const headerKeys = headers.map((h) => {
+    const headerKeys = columns.map((h) => {
       return h.name || hashcode(h);
     });
 
@@ -106,7 +92,7 @@ export default class Table extends Component {
         );
       }
       let rowKey = d.id ? d.id : hashcode(d);
-      headers.map((h, j) => {
+      columns.map((h, j) => {
         if (h.hidden) {
           return;
         }
@@ -127,17 +113,21 @@ export default class Table extends Component {
   }
 
   renderColgroup () {
-    const { selectAble, headers } = this.props;
+    const { selectAble } = this.props;
     let cols = [];
     if (selectAble) {
       cols.push(<col key="check" />);
     }
-    headers.forEach((h, i) => {
+    this.getColumns().forEach((h, i) => {
       cols.push(<col key={i} style={h.width ? { width: h.width } : undefined} />);
     });
     return <colgroup>{cols}</colgroup>;
   }
 
+  getColumns () {
+    return this.props.columns || this.props.headers();
+  }
+
   renderHeader () {
     let headers = [];
     if (this.props.selectAble) {
@@ -147,19 +137,20 @@ export default class Table extends Component {
         } />
       );
     }
-    this.props.headers.map((header, i) => {
+
+    const { onSort, sortStatus } = this.props;
+
+    this.getColumns().forEach((header, i) => {
       if (header.hidden) {
         return;
       }
 
-      let props = {
-        key: header.name || i,
-        onSort: this.props.onSort,
-        sort: this.state.sort
-      };
-
       headers.push(
-        <Header {...header} {...props} />
+        <Header {...header}
+          key={header.name || i}
+          onSort={onSort}
+          sortStatus={sortStatus}
+        />
       );
     });
     return <tr>{headers}</tr>;
@@ -170,7 +161,7 @@ export default class Table extends Component {
     if (!pagination) return;
 
     return (
-      <div className={_tables[`pagi_${pagination.position}`]}>
+      <div className={_tables[`pagi-${pagination.position}`]}>
         <Pagination {...pagination} />
       </div>
     );
@@ -236,13 +227,15 @@ Table.propTypes = {
   bordered: PropTypes.bool,
   children: PropTypes.array,
   className: PropTypes.string,
+  columns: PropTypes.array,
   data: PropTypes.array,
   filters: PropTypes.array,
   headers: PropTypes.array,
   height: PropTypes.number_string,
   onSort: PropTypes.func,
   pagination: PropTypes.object,
   selectAble: PropTypes.bool,
+  sortStatus: PropTypes.object,
   striped: PropTypes.bool,
   style: PropTypes.object,
   width: PropTypes.number_string

src/higherOrders/FormItem.js

@@ -87,7 +87,7 @@ export const valueble = (ComposedComponent) => {
     }
 
     bindToForm (props, value) {
-      const { name, validator, ignore, itemBind } = props;
+      const { name, validator, disabled, ignore, itemBind } = props;
       this.id = nextUid();
       let valiBind;
       if (validator && validator.bind) {
@@ -101,7 +101,7 @@ export const valueble = (ComposedComponent) => {
         id: this.id,
         name,
         valiBind,
-        ignore,
+        disabled: disabled || ignore,
         value,
         validate: this.validate.bind(this)
       });
@@ -183,6 +183,7 @@ export const valueble = (ComposedComponent) => {
 
   FormItem.propTypes = {
     className: PropTypes.string,
+    disabled: PropTypes.bool,
     formData: PropTypes.object,
     ignore: PropTypes.bool,
     itemBind: PropTypes.func,

src/higherOrders/Sort.js

@@ -2,6 +2,17 @@
 
 import React from 'react';
 import PropTypes from '../utils/proptypes';
+import { isEmpty } from '../utils/objects';
+
+const defaultSort = (key, asc) => (a, b) => {
+  let x = a[key];
+  let y = b[key];
+  if (asc === 0) {
+    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+  } else {
+    return ((x > y) ? -1 : ((x < y) ? 1 : 0));
+  }
+};
 
 export function sortable (Component) {
   class Sort extends React.Component {
@@ -12,30 +23,26 @@ export function sortable (Component) {
       this.handleSort = this.handleSort.bind(this);
     }
 
-    handleSort (key, asc) {
-      this.setState({ key, asc });
+    handleSort (key, asc, fn) {
+      this.setState({ key, asc, fn });
       this.props.onSort && this.props.onSort(key, asc);
     }
 
-    sort (data, key, asc) {
-      return data.sort(function (a, b) {
-        var x = a[key];
-        var y = b[key];
-        if (asc) {
-          return ((x < y) ? -1 : ((x > y) ? 1 : 0));
-        } else {
-          return ((x > y) ? -1 : ((x < y) ? 1 : 0));
-        }
-      });
+    sort (data, { key, asc, fn }) {
+      return data.sort(typeof fn === 'function' ? fn : defaultSort(key, asc));
     }
 
     render () {
-      const { key, asc } = this.state;
+      const state = this.state;
       const { data, ...props } = this.props;
-
-      let sortData = key ? this.sort(data, key, asc) : data;
-
-      return <Component {...props} onSort={this.handleSort} data={sortData} />;
+      let sortData = isEmpty(state) ? data : this.sort(data, state);
+
+      return (
+        <Component {...props}
+          onSort={this.handleSort}
+          sortStatus={{ key: state.key, asc: state.asc }}
+          data={sortData} />
+      );
     }
   }