@gmfe/table-x 2.14.15 → 2.14.19-beta.0

package/src/stories/table_x.stories.js

@@ -1,324 +1,324 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { TableX, TableXUtil } from '../index'
-import { observable } from 'mobx/lib/mobx'
-import moment from 'moment'
-import { observer } from 'mobx-react'
-
-const { SortHeader, EditButton, OperationHeader, OperationRecover, OperationCell, OperationDelete } = TableXUtil
-
-const sortDateTime = (a, b) => {
-  const mA = moment(a)
-  const mB = moment(b)
-
-  if (mA > mB) {
-    return 1
-  } else if (mA < mB) {
-    return -1
-  } else {
-    return 0
-  }
-}
-
-const initData = [
-  {
-    total_money: 111,
-    id: 'T5991-JHD-2018-07-25-00027',
-    sku_money: '2390.00',
-    supplier_customer_id: 'LDP20180117',
-    submit_time: '2018-07-25',
-    status: 2,
-    supplier_name: '-',
-    date_time: '2018-07-25',
-    delta_money: 0,
-    settle_supplier_id: 'T10953',
-    address: {
-      value: 33,
-      text: '西乡fdsfsdf9'
-    }
-  },
-  {
-    total_money: 176,
-    id: 'T5991-JHD-2018-07-25-00026',
-    sku_money: '176.00',
-    supplier_customer_id: 'A2926',
-    submit_time: '2018-07-26',
-    status: 2,
-    supplier_name: '段虎',
-    date_time: '2018-07-25',
-    delta_money: 0,
-    settle_supplier_id: 'T14319',
-    address: {
-      value: 9,
-      text: '西乡9'
-    }
-  },
-  {
-    total_money: 279,
-    id: 'T5991-JHD-2018-07-25-00025',
-    sku_money: '279.02',
-    supplier_customer_id: 'sc215',
-    submit_time: '2018-07-27',
-    status: 2,
-    supplier_name: '黑市桥蔬菜批发',
-    date_time: '2018-07-25',
-    delta_money: -2.0,
-    settle_supplier_id: 'T13324',
-    address: {
-      value: 4,
-      text: '宝安'
-    }
-  },
-  {
-    total_money: 176,
-    id: 'T5991-JHD-2018-07-25-00024',
-    sku_money: '279.02',
-    supplier_customer_id: 'sc215',
-    submit_time: '2018-07-27',
-    status: 2,
-    supplier_name: '黑市桥蔬菜批发',
-    date_time: '2018-07-25',
-    delta_money: -2.0,
-    settle_supplier_id: 'T13324',
-    address: {
-      value: 4,
-      text: '宝安'
-    }
-  }
-]
-
-const store = observable({
-  data: initData.slice(),
-  sortTimeType: null,
-  setSortTime(type) {
-    console.log(type)
-    this.sortTimeType = type
-
-    if (!type) {
-      this.data = initData.slice()
-      return
-    }
-
-    let newData = this.data.sort((a, b) => {
-      return sortDateTime(a.submit_time, b.submit_time)
-    })
-
-    if (type === 'desc') {
-      newData = newData.reverse()
-    }
-
-    this.data = newData
-  }
-})
-
-const columns = [
-  // 获取索引
-  {
-    Header: '序号',
-    accessor: 'index',
-    Cell: ({ row }) => row.index + 1,
-    width: 50
-  },
-  // 常规用法
-  {
-    Header: '建单时间',
-    accessor: 'submit_time',
-    show: false
-  },
-  // accessor 有点用法
-  {
-    Header: '地址',
-    accessor: 'address.text',
-    width: 200, // 定宽
-    maxWidth: 200
-  },
-  // accessor 是 func，需要提供 id
-  {
-    Header: '供应商信息',
-    accessor: data => data.supplier_name,
-    id: 'supplier_name'
-  },
-  // 自定义整个单元格
-  {
-    Header: '入库金额2',
-    accessor: 'total_money',
-    Cell: cellProps => {
-      const { row } = cellProps
-      return <div>{row.original.total_money}</div>
-    }
-  },
-  {
-    Header: OperationHeader,
-    accessor: 'operator',
-    Cell: cellProps => (
-      <OperationCell>
-        <OperationRecover
-          title='确认恢复'
-          onClick={() => store.deleteItemByID(cellProps.original.id)}
-        >
-          恢复这个很危险! 确定?
-        </OperationRecover>
-      </OperationCell>
-    )
-  }
-]
-
-const editColumns = [
-  {
-    id: 'name',
-    Header: '名字',
-    Cell: () => (
-      <div>
-        <input type='text' />
-        <EditButton popupRender={() => <div>lalala</div>} />
-      </div>
-    )
-  },
-  {
-    id: 'age',
-    Header: '年龄',
-    Cell: () => (
-      <div>
-        <input type='text' />
-        <EditButton
-          popupRender={() => (
-            <div>lalala123j4123;lk4j;132lkj4;lk12j34;lk123j;4lkj123;l4kj;</div>
-          )}
-        />
-      </div>
-    )
-  }
-]
-
-const groupColumns = [
-  {
-    Header: '序号',
-    columns: [
-      {
-        Header: '序号',
-        accessor: 'index',
-        Cell: ({ row }) => row.index + 1
-      }
-    ]
-  },
-  {
-    Header: '其他信息',
-    columns: [
-      {
-        Header: '建单时间',
-        accessor: 'submit_time',
-        show: false
-      },
-      // accessor 有点用法
-
-      // 自定义整个单元格
-      {
-        Header: '入库金额',
-        accessor: 'total_money',
-        Cell: cellProps => {
-          const { row } = cellProps
-          return <div>{row.original.total_money}</div>
-        }
-      }
-    ]
-  },
-  {
-    Header: '供应商信息',
-    columns: [
-      {
-        Header: '地址',
-        accessor: 'address.text',
-        width: 200 // 定宽
-      },
-      // accessor 是 func，需要提供 id
-      {
-        Header: '供应商信息',
-        accessor: data => data.supplier_name,
-        id: 'supplier_name'
-      }
-    ]
-  }
-]
-
-const sortColumnsBackEnd = [
-  {
-    Header: observer(() => (
-      <div>
-        建单时间
-        <SortHeader
-          type={store.sortTimeType}
-          onChange={type => store.setSortTime(type)}
-        />
-      </div>
-    )),
-    accessor: 'submit_time'
-  },
-  {
-    Header: '供应商信息',
-    accessor: data => data.supplier_name,
-    id: 'supplier_name'
-  },
-  {
-    Header: '入库金额',
-    accessor: 'total_money',
-    Cell: cellProps => {
-      const { row } = cellProps
-      return <div>{row.original.total_money}</div>
-    }
-  }
-]
-
-storiesOf('TableX|TableX', module)
-  .add('说明', () => <div />, {
-    info: {
-      text: `
-react-table 文档见 https://github.com/tannerlinsley/react-table
-
-用法见 story 源码，不要用 story 之外的，如果有，联系我补充 story。
-
-较 Table 新增
-- hoc select 增加 fixedSelect, hoc expand fixedExpand 用来固定
-- 其他 hoc， sortableTableXHOC
-- TableXVirtualized
-
-Table 切 TableX 关注点：
-- Cell 不提供 index original，即 Cell: ({index, original}) => () 不 work，用 Cell: ({ row }) => (row.index row.original)
-- 取消单元格没内容显示 -
-- fixedColumn column 可以不提供 width
-- selectTable 废弃 onSelectAll ，因为没有意义
-- OperationHeader 是一个组件
-- EditTableOperation 换成  EditOperation
-- 宽度常量收归到 TableUtil.TABLE_X
-`
-    }
-  })
-  .add('default', () => <TableX data={store.data} columns={columns} />)
-  .add('group', () => <TableX data={store.data} columns={groupColumns} />)
-  .add('loading & nodata & tiled', () => (
-    <div>
-      <TableX loading data={store.data} columns={columns} />
-      <TableX data={[]} columns={columns} />
-      <TableX data={[]} columns={columns} className='gm-margin-10' tiled />
-    </div>
-  ))
-  .add('排序', () => (
-    <TableX data={store.data.slice()} columns={sortColumnsBackEnd} />
-  ))
-  .add('limit height', () => (
-    <TableX
-      data={store.data}
-      columns={columns}
-      style={{
-        height: '200px'
-      }}
-    />
-  ))
-  .add('edit button', () => <TableX data={store.data} columns={editColumns} />)
-  .add('isTrDisable && isTrHighlight', () => (
-    <TableX
-      data={store.data}
-      columns={columns}
-      isTrDisable={(item, index) => index % 2 === 0}
-      isTrHighlight={(item, index) => index === 0}
-    />
-  ))
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { TableX, TableXUtil } from '../index'
+import { observable } from 'mobx/lib/mobx'
+import moment from 'moment'
+import { observer } from 'mobx-react'
+
+const { SortHeader, EditButton, OperationHeader, OperationRecover, OperationCell, OperationDelete } = TableXUtil
+
+const sortDateTime = (a, b) => {
+  const mA = moment(a)
+  const mB = moment(b)
+
+  if (mA > mB) {
+    return 1
+  } else if (mA < mB) {
+    return -1
+  } else {
+    return 0
+  }
+}
+
+const initData = [
+  {
+    total_money: 111,
+    id: 'T5991-JHD-2018-07-25-00027',
+    sku_money: '2390.00',
+    supplier_customer_id: 'LDP20180117',
+    submit_time: '2018-07-25',
+    status: 2,
+    supplier_name: '-',
+    date_time: '2018-07-25',
+    delta_money: 0,
+    settle_supplier_id: 'T10953',
+    address: {
+      value: 33,
+      text: '西乡fdsfsdf9'
+    }
+  },
+  {
+    total_money: 176,
+    id: 'T5991-JHD-2018-07-25-00026',
+    sku_money: '176.00',
+    supplier_customer_id: 'A2926',
+    submit_time: '2018-07-26',
+    status: 2,
+    supplier_name: '段虎',
+    date_time: '2018-07-25',
+    delta_money: 0,
+    settle_supplier_id: 'T14319',
+    address: {
+      value: 9,
+      text: '西乡9'
+    }
+  },
+  {
+    total_money: 279,
+    id: 'T5991-JHD-2018-07-25-00025',
+    sku_money: '279.02',
+    supplier_customer_id: 'sc215',
+    submit_time: '2018-07-27',
+    status: 2,
+    supplier_name: '黑市桥蔬菜批发',
+    date_time: '2018-07-25',
+    delta_money: -2.0,
+    settle_supplier_id: 'T13324',
+    address: {
+      value: 4,
+      text: '宝安'
+    }
+  },
+  {
+    total_money: 176,
+    id: 'T5991-JHD-2018-07-25-00024',
+    sku_money: '279.02',
+    supplier_customer_id: 'sc215',
+    submit_time: '2018-07-27',
+    status: 2,
+    supplier_name: '黑市桥蔬菜批发',
+    date_time: '2018-07-25',
+    delta_money: -2.0,
+    settle_supplier_id: 'T13324',
+    address: {
+      value: 4,
+      text: '宝安'
+    }
+  }
+]
+
+const store = observable({
+  data: initData.slice(),
+  sortTimeType: null,
+  setSortTime(type) {
+    console.log(type)
+    this.sortTimeType = type
+
+    if (!type) {
+      this.data = initData.slice()
+      return
+    }
+
+    let newData = this.data.sort((a, b) => {
+      return sortDateTime(a.submit_time, b.submit_time)
+    })
+
+    if (type === 'desc') {
+      newData = newData.reverse()
+    }
+
+    this.data = newData
+  }
+})
+
+const columns = [
+  // 获取索引
+  {
+    Header: '序号',
+    accessor: 'index',
+    Cell: ({ row }) => row.index + 1,
+    width: 50
+  },
+  // 常规用法
+  {
+    Header: '建单时间',
+    accessor: 'submit_time',
+    show: false
+  },
+  // accessor 有点用法
+  {
+    Header: '地址',
+    accessor: 'address.text',
+    width: 200, // 定宽
+    maxWidth: 200
+  },
+  // accessor 是 func，需要提供 id
+  {
+    Header: '供应商信息',
+    accessor: data => data.supplier_name,
+    id: 'supplier_name'
+  },
+  // 自定义整个单元格
+  {
+    Header: '入库金额2',
+    accessor: 'total_money',
+    Cell: cellProps => {
+      const { row } = cellProps
+      return <div>{row.original.total_money}</div>
+    }
+  },
+  {
+    Header: OperationHeader,
+    accessor: 'operator',
+    Cell: cellProps => (
+      <OperationCell>
+        <OperationRecover
+          title='确认恢复'
+          onClick={() => store.deleteItemByID(cellProps.original.id)}
+        >
+          恢复这个很危险! 确定?
+        </OperationRecover>
+      </OperationCell>
+    )
+  }
+]
+
+const editColumns = [
+  {
+    id: 'name',
+    Header: '名字',
+    Cell: () => (
+      <div>
+        <input type='text' />
+        <EditButton popupRender={() => <div>lalala</div>} />
+      </div>
+    )
+  },
+  {
+    id: 'age',
+    Header: '年龄',
+    Cell: () => (
+      <div>
+        <input type='text' />
+        <EditButton
+          popupRender={() => (
+            <div>lalala123j4123;lk4j;132lkj4;lk12j34;lk123j;4lkj123;l4kj;</div>
+          )}
+        />
+      </div>
+    )
+  }
+]
+
+const groupColumns = [
+  {
+    Header: '序号',
+    columns: [
+      {
+        Header: '序号',
+        accessor: 'index',
+        Cell: ({ row }) => row.index + 1
+      }
+    ]
+  },
+  {
+    Header: '其他信息',
+    columns: [
+      {
+        Header: '建单时间',
+        accessor: 'submit_time',
+        show: false
+      },
+      // accessor 有点用法
+
+      // 自定义整个单元格
+      {
+        Header: '入库金额',
+        accessor: 'total_money',
+        Cell: cellProps => {
+          const { row } = cellProps
+          return <div>{row.original.total_money}</div>
+        }
+      }
+    ]
+  },
+  {
+    Header: '供应商信息',
+    columns: [
+      {
+        Header: '地址',
+        accessor: 'address.text',
+        width: 200 // 定宽
+      },
+      // accessor 是 func，需要提供 id
+      {
+        Header: '供应商信息',
+        accessor: data => data.supplier_name,
+        id: 'supplier_name'
+      }
+    ]
+  }
+]
+
+const sortColumnsBackEnd = [
+  {
+    Header: observer(() => (
+      <div>
+        建单时间
+        <SortHeader
+          type={store.sortTimeType}
+          onChange={type => store.setSortTime(type)}
+        />
+      </div>
+    )),
+    accessor: 'submit_time'
+  },
+  {
+    Header: '供应商信息',
+    accessor: data => data.supplier_name,
+    id: 'supplier_name'
+  },
+  {
+    Header: '入库金额',
+    accessor: 'total_money',
+    Cell: cellProps => {
+      const { row } = cellProps
+      return <div>{row.original.total_money}</div>
+    }
+  }
+]
+
+storiesOf('TableX|TableX', module)
+  .add('说明', () => <div />, {
+    info: {
+      text: `
+react-table 文档见 https://github.com/tannerlinsley/react-table
+
+用法见 story 源码，不要用 story 之外的，如果有，联系我补充 story。
+
+较 Table 新增
+- hoc select 增加 fixedSelect, hoc expand fixedExpand 用来固定
+- 其他 hoc， sortableTableXHOC
+- TableXVirtualized
+
+Table 切 TableX 关注点：
+- Cell 不提供 index original，即 Cell: ({index, original}) => () 不 work，用 Cell: ({ row }) => (row.index row.original)
+- 取消单元格没内容显示 -
+- fixedColumn column 可以不提供 width
+- selectTable 废弃 onSelectAll ，因为没有意义
+- OperationHeader 是一个组件
+- EditTableOperation 换成  EditOperation
+- 宽度常量收归到 TableUtil.TABLE_X
+`
+    }
+  })
+  .add('default', () => <TableX data={store.data} columns={columns} />)
+  .add('group', () => <TableX data={store.data} columns={groupColumns} />)
+  .add('loading & nodata & tiled', () => (
+    <div>
+      <TableX loading data={store.data} columns={columns} />
+      <TableX data={[]} columns={columns} />
+      <TableX data={[]} columns={columns} className='gm-margin-10' tiled />
+    </div>
+  ))
+  .add('排序', () => (
+    <TableX data={store.data.slice()} columns={sortColumnsBackEnd} />
+  ))
+  .add('limit height', () => (
+    <TableX
+      data={store.data}
+      columns={columns}
+      style={{
+        height: '200px'
+      }}
+    />
+  ))
+  .add('edit button', () => <TableX data={store.data} columns={editColumns} />)
+  .add('isTrDisable && isTrHighlight', () => (
+    <TableX
+      data={store.data}
+      columns={columns}
+      isTrDisable={(item, index) => index % 2 === 0}
+      isTrHighlight={(item, index) => index === 0}
+    />
+  ))