@gmfe/table-x 2.14.17 → 2.14.20

package/README.md

@@ -1,13 +1,13 @@
-## tableX 踩的坑，阅读后改代码更自信
-
-- 注意不要随意升级版本，目前使用 7.0.0-rc.11
-- 7.0.0-rc.11 天然不支持 column.show, 所以自行实现了 column.show 的支持.[issue](https://github.com/tannerlinsley/react-table/issues/1665)
-- defaultColumn 的值不要轻易改动，具体看代码。目前实现了 minWidth，width，maxWidth 逻辑与 v6 一致，且需语义一致。
-- 使用 useResizeColumns 后，无法兼容到 v6 的 minWidth，width，maxWidth 的实现，所以去掉了 useResizeColumns
-- 斑马线，不能用 css 的 `:even` 和 `:odd` 实现。因为在使用虚拟列表的时候有坑。
-- 使用.gm-table-x-td 定义 background 是有原因的，比如 使用 fixedColumnHOC 时候的背景穿透问题
-- 虚拟列表的实现是 copy 了一份 TableX，请保证一致
-- 改动需要考虑 keyboard 那边
-- keyboard 测试 向上下左右是否有问题，特别是不在显示区域的是否可以滚动到显示区域
-- keyboard 新增一行的性能，行数很大的时候的性能
-- keyboard 的 input 不会因为新增而换掉 dom。即 控制台打出该 dom，在新增后 hover 到控制台的 dom 还能找到
+## tableX 踩的坑，阅读后改代码更自信
+
+- 注意不要随意升级版本，目前使用 7.0.0-rc.11
+- 7.0.0-rc.11 天然不支持 column.show, 所以自行实现了 column.show 的支持.[issue](https://github.com/tannerlinsley/react-table/issues/1665)
+- defaultColumn 的值不要轻易改动，具体看代码。目前实现了 minWidth，width，maxWidth 逻辑与 v6 一致，且需语义一致。
+- 使用 useResizeColumns 后，无法兼容到 v6 的 minWidth，width，maxWidth 的实现，所以去掉了 useResizeColumns
+- 斑马线，不能用 css 的 `:even` 和 `:odd` 实现。因为在使用虚拟列表的时候有坑。
+- 使用.gm-table-x-td 定义 background 是有原因的，比如 使用 fixedColumnHOC 时候的背景穿透问题
+- 虚拟列表的实现是 copy 了一份 TableX，请保证一致
+- 改动需要考虑 keyboard 那边
+- keyboard 测试 向上下左右是否有问题，特别是不在显示区域的是否可以滚动到显示区域
+- keyboard 新增一行的性能，行数很大的时候的性能
+- keyboard 的 input 不会因为新增而换掉 dom。即 控制台打出该 dom，在新增后 hover 到控制台的 dom 还能找到

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/table-x",
-  "version": "2.14.17",
+  "version": "2.14.20",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@gm-common/tool": "^1.0.0",
-    "@gmfe/locales": "^2.14.17",
-    "@gmfe/react": "^2.14.17",
+    "@gmfe/locales": "^2.14.20",
+    "@gmfe/react": "^2.14.20",
     "classnames": "^2.2.5",
     "lodash": "^4.17.14",
     "prop-types": "^15.7.2",
@@ -36,5 +36,5 @@
     "react-window": "^1.8.5",
     "sortablejs": "^1.10.1"
   },
-  "gitHead": "b67a2bc4a20a13c4cb8c99cd4b5ed80f12e7c879"
+  "gitHead": "ffd6acec5aca29adfa9e078ea8a0bcbec7a9cd74"
 }

package/src/base/index.js

@@ -1,142 +1,142 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { useTable } from 'react-table'
-import { Empty, Loading, afterScroll, __DEFAULT_COLUMN } from '../util'
-import classNames from 'classnames'
-import _ from 'lodash'
-import THead from './thead'
-import Tr from './tr'
-
-// 给定初始值，交由getColumnStyle控制。width逻辑保持跟react-table（v6）的用法一致。
-const defaultColumn = __DEFAULT_COLUMN
-
-const TableX = ({
-  columns,
-  data,
-  loading,
-  SubComponent,
-  keyField,
-  className,
-  tiled,
-  onScroll,
-  isTrDisable,
-  isTrHighlight,
-  ...rest
-}) => {
-  // diy fixed(最新rc12不支持column.show,自己实现)
-  columns = React.useMemo(() => columns.filter(c => c.show !== false), [
-    columns
-  ])
-
-  const {
-    getTableProps,
-    headerGroups,
-    getTableBodyProps,
-    rows,
-    prepareRow
-  } = useTable({
-    columns,
-    data,
-    defaultColumn
-  })
-
-  let totalWidth = 0
-  if (rows[0] && rows[0].cells.length > 0) {
-    prepareRow(rows[0])
-    const last = rows[0].cells[rows[0].cells.length - 1].column
-    totalWidth = last.totalLeft + last.totalWidth
-  }
-
-  const gtp = getTableProps()
-  const tableProps = {
-    ...gtp,
-    style: { minWidth: totalWidth + 'px' },
-    className: classNames('gm-table-x-table', gtp.className)
-  }
-
-  const gtbp = getTableBodyProps()
-  const tableBodyProps = {
-    ...gtbp,
-    className: 'gm-table-x-tbody'
-  }
-
-  const handleScroll = e => {
-    onScroll && onScroll(e)
-    afterScroll()
-  }
-
-  // eslint-disable-next-line
-  const RenderRow = ({ index, style }) => {
-    const row = rows[index]
-    prepareRow(row)
-
-    return (
-      <Tr
-        key={row.index}
-        row={row}
-        SubComponent={SubComponent}
-        keyField={keyField}
-        style={style}
-        totalWidth={totalWidth}
-        isTrDisable={isTrDisable}
-        isTrHighlight={isTrHighlight}
-      />
-    )
-  }
-
-  return (
-    <div
-      {...rest}
-      className={classNames(
-        'gm-table-x',
-        {
-          'gm-table-x-empty': data.length === 0,
-          'gm-table-x-tiled': tiled
-        },
-        className
-      )}
-      onScroll={handleScroll}
-    >
-      <table {...tableProps}>
-        <THead headerGroups={headerGroups} totalWidth={totalWidth} />
-        <tbody {...tableBodyProps}>
-          {_.map(rows, row =>
-            RenderRow({
-              index: row.index,
-              style: {}
-            })
-          )}
-        </tbody>
-      </table>
-      {loading && <Loading />}
-      {!loading && data.length === 0 && <Empty />}
-    </div>
-  )
-}
-
-TableX.propTypes = {
-  columns: PropTypes.array.isRequired,
-  data: PropTypes.array.isRequired,
-  loading: PropTypes.bool,
-  SubComponent: PropTypes.func,
-  /** 由其他 hoc 传下来 */
-  keyField: PropTypes.string,
-  /** table是否平铺 */
-  tiled: PropTypes.bool,
-  /** 当前行是否disable */
-  isTrDisable: PropTypes.func,
-  /** 当前行是否高亮 */
-  isTrHighlight: PropTypes.func,
-  onScroll: PropTypes.func,
-  className: PropTypes.string,
-  style: PropTypes.object
-}
-
-TableX.defaultProps = {
-  keyField: 'value',
-  tiled: false,
-  isTrDisable: () => false,
-  isTrHighlight: () => false
-}
-
-export default TableX
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useTable } from 'react-table'
+import { Empty, Loading, afterScroll, __DEFAULT_COLUMN } from '../util'
+import classNames from 'classnames'
+import _ from 'lodash'
+import THead from './thead'
+import Tr from './tr'
+
+// 给定初始值，交由getColumnStyle控制。width逻辑保持跟react-table（v6）的用法一致。
+const defaultColumn = __DEFAULT_COLUMN
+
+const TableX = ({
+  columns,
+  data,
+  loading,
+  SubComponent,
+  keyField,
+  className,
+  tiled,
+  onScroll,
+  isTrDisable,
+  isTrHighlight,
+  ...rest
+}) => {
+  // diy fixed(最新rc12不支持column.show,自己实现)
+  columns = React.useMemo(() => columns.filter(c => c.show !== false), [
+    columns
+  ])
+
+  const {
+    getTableProps,
+    headerGroups,
+    getTableBodyProps,
+    rows,
+    prepareRow
+  } = useTable({
+    columns,
+    data,
+    defaultColumn
+  })
+
+  let totalWidth = 0
+  if (rows[0] && rows[0].cells.length > 0) {
+    prepareRow(rows[0])
+    const last = rows[0].cells[rows[0].cells.length - 1].column
+    totalWidth = last.totalLeft + last.totalWidth
+  }
+
+  const gtp = getTableProps()
+  const tableProps = {
+    ...gtp,
+    style: { minWidth: totalWidth + 'px' },
+    className: classNames('gm-table-x-table', gtp.className)
+  }
+
+  const gtbp = getTableBodyProps()
+  const tableBodyProps = {
+    ...gtbp,
+    className: 'gm-table-x-tbody'
+  }
+
+  const handleScroll = e => {
+    onScroll && onScroll(e)
+    afterScroll()
+  }
+
+  // eslint-disable-next-line
+  const RenderRow = ({ index, style }) => {
+    const row = rows[index]
+    prepareRow(row)
+
+    return (
+      <Tr
+        key={row.index}
+        row={row}
+        SubComponent={SubComponent}
+        keyField={keyField}
+        style={style}
+        totalWidth={totalWidth}
+        isTrDisable={isTrDisable}
+        isTrHighlight={isTrHighlight}
+      />
+    )
+  }
+
+  return (
+    <div
+      {...rest}
+      className={classNames(
+        'gm-table-x',
+        {
+          'gm-table-x-empty': data.length === 0,
+          'gm-table-x-tiled': tiled
+        },
+        className
+      )}
+      onScroll={handleScroll}
+    >
+      <table {...tableProps}>
+        <THead headerGroups={headerGroups} totalWidth={totalWidth} />
+        <tbody {...tableBodyProps}>
+          {_.map(rows, row =>
+            RenderRow({
+              index: row.index,
+              style: {}
+            })
+          )}
+        </tbody>
+      </table>
+      {loading && <Loading />}
+      {!loading && data.length === 0 && <Empty />}
+    </div>
+  )
+}
+
+TableX.propTypes = {
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired,
+  loading: PropTypes.bool,
+  SubComponent: PropTypes.func,
+  /** 由其他 hoc 传下来 */
+  keyField: PropTypes.string,
+  /** table是否平铺 */
+  tiled: PropTypes.bool,
+  /** 当前行是否disable */
+  isTrDisable: PropTypes.func,
+  /** 当前行是否高亮 */
+  isTrHighlight: PropTypes.func,
+  onScroll: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+TableX.defaultProps = {
+  keyField: 'value',
+  tiled: false,
+  isTrDisable: () => false,
+  isTrHighlight: () => false
+}
+
+export default TableX

package/src/base/td.js

@@ -1,56 +1,56 @@
-import classNames from 'classnames'
-import { getColumnStyle } from '../util'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-// cell.render('Cell') 是一个react组件,如果这个组件return undefined,那就就会报错
-// 这里是为了兼容 cell.render('Cell') 返回undefined的情况
-class TdCatchErr extends React.Component {
-  componentDidCatch(error, errorInfo) {
-    console.warn(error)
-    console.warn(errorInfo.componentStack)
-  }
-
-  render() {
-    return this.props.children
-  }
-}
-
-const Td = ({ cell, totalWidth }) => {
-  const cp = cell.getCellProps()
-  const { tdClassName } = cell.column
-  const tdProps = {
-    ...cp,
-    className: classNames('gm-table-x-td', tdClassName, {
-      'gm-table-x-fixed-left': cell.column.fixed === 'left',
-      'gm-table-x-fixed-right': cell.column.fixed === 'right'
-    }),
-    style: {
-      ...cp.style,
-      ...getColumnStyle(cell.column)
-    }
-  }
-
-  if (cell.column.fixed === 'left') {
-    // 用到 fixed，可以利用 totalLeft
-    tdProps.style.left = cell.column.totalLeft
-  } else if (cell.column.fixed === 'right') {
-    tdProps.style.right =
-      totalWidth - cell.column.totalLeft - cell.column.totalWidth
-  }
-
-  return (
-    <td {...tdProps}>
-      <TdCatchErr>{cell.render('Cell')}</TdCatchErr>
-    </td>
-  )
-}
-
-Td.whyDidYouRender = true
-
-Td.propTypes = {
-  cell: PropTypes.object.isRequired,
-  totalWidth: PropTypes.number.isRequired
-}
-
-export default React.memo(Td)
+import classNames from 'classnames'
+import { getColumnStyle } from '../util'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+// cell.render('Cell') 是一个react组件,如果这个组件return undefined,那就就会报错
+// 这里是为了兼容 cell.render('Cell') 返回undefined的情况
+class TdCatchErr extends React.Component {
+  componentDidCatch(error, errorInfo) {
+    console.warn(error)
+    console.warn(errorInfo.componentStack)
+  }
+
+  render() {
+    return this.props.children
+  }
+}
+
+const Td = ({ cell, totalWidth }) => {
+  const cp = cell.getCellProps()
+  const { tdClassName } = cell.column
+  const tdProps = {
+    ...cp,
+    className: classNames('gm-table-x-td', tdClassName, {
+      'gm-table-x-fixed-left': cell.column.fixed === 'left',
+      'gm-table-x-fixed-right': cell.column.fixed === 'right'
+    }),
+    style: {
+      ...cp.style,
+      ...getColumnStyle(cell.column)
+    }
+  }
+
+  if (cell.column.fixed === 'left') {
+    // 用到 fixed，可以利用 totalLeft
+    tdProps.style.left = cell.column.totalLeft
+  } else if (cell.column.fixed === 'right') {
+    tdProps.style.right =
+      totalWidth - cell.column.totalLeft - cell.column.totalWidth
+  }
+
+  return (
+    <td {...tdProps}>
+      <TdCatchErr>{cell.render('Cell')}</TdCatchErr>
+    </td>
+  )
+}
+
+Td.whyDidYouRender = true
+
+Td.propTypes = {
+  cell: PropTypes.object.isRequired,
+  totalWidth: PropTypes.number.isRequired
+}
+
+export default React.memo(Td)

package/src/base/th.js

@@ -1,48 +1,48 @@
-import classNames from 'classnames'
-import { getColumnStyle, SortHeader } from '../util'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const Th = ({ column, totalWidth }) => {
-  const hp = column.getHeaderProps()
-  const { thClassName, style } = column
-  const thProps = {
-    ...hp,
-    className: classNames('gm-table-x-th', hp.className, thClassName, {
-      'gm-table-x-fixed-left': column.fixed === 'left',
-      'gm-table-x-fixed-right': column.fixed === 'right'
-    }),
-    style: {
-      ...hp.style,
-      ...style,
-      ...getColumnStyle(column)
-    }
-  }
-
-  if (column.fixed === 'left') {
-    thProps.style.left = column.totalLeft
-  } else if (column.fixed === 'right') {
-    thProps.style.right = totalWidth - column.totalLeft - column.totalWidth
-  }
-
-  return (
-    <th {...thProps}>
-      {column.render('Header')}
-      {column.canSort && (
-        <SortHeader
-          {...column.getSortByToggleProps()}
-          type={column.isSorted ? (column.isSortedDesc ? 'desc' : 'asc') : null}
-        />
-      )}
-    </th>
-  )
-}
-
-Th.whyDidYouRender = true
-
-Th.propTypes = {
-  column: PropTypes.object.isRequired,
-  totalWidth: PropTypes.number.isRequired
-}
-
-export default React.memo(Th)
+import classNames from 'classnames'
+import { getColumnStyle, SortHeader } from '../util'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Th = ({ column, totalWidth }) => {
+  const hp = column.getHeaderProps()
+  const { thClassName, style } = column
+  const thProps = {
+    ...hp,
+    className: classNames('gm-table-x-th', hp.className, thClassName, {
+      'gm-table-x-fixed-left': column.fixed === 'left',
+      'gm-table-x-fixed-right': column.fixed === 'right'
+    }),
+    style: {
+      ...hp.style,
+      ...style,
+      ...getColumnStyle(column)
+    }
+  }
+
+  if (column.fixed === 'left') {
+    thProps.style.left = column.totalLeft
+  } else if (column.fixed === 'right') {
+    thProps.style.right = totalWidth - column.totalLeft - column.totalWidth
+  }
+
+  return (
+    <th {...thProps}>
+      {column.render('Header')}
+      {column.canSort && (
+        <SortHeader
+          {...column.getSortByToggleProps()}
+          type={column.isSorted ? (column.isSortedDesc ? 'desc' : 'asc') : null}
+        />
+      )}
+    </th>
+  )
+}
+
+Th.whyDidYouRender = true
+
+Th.propTypes = {
+  column: PropTypes.object.isRequired,
+  totalWidth: PropTypes.number.isRequired
+}
+
+export default React.memo(Th)

package/src/base/thead.js

@@ -1,26 +1,26 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Th from './th'
-
-const THead = ({ headerGroups, totalWidth }) => {
-  return (
-    <thead className='gm-table-x-thead'>
-      {headerGroups.map((headerGroup, i) => (
-        <tr key={i} className='gm-table-x-tr'>
-          {headerGroup.headers.map((column, i) => (
-            <Th key={i} column={column} totalWidth={totalWidth} />
-          ))}
-        </tr>
-      ))}
-    </thead>
-  )
-}
-
-THead.whyDidYouRender = true
-
-THead.propTypes = {
-  headerGroups: PropTypes.array.isRequired,
-  totalWidth: PropTypes.number.isRequired
-}
-
-export default React.memo(THead)
+import PropTypes from 'prop-types'
+import React from 'react'
+import Th from './th'
+
+const THead = ({ headerGroups, totalWidth }) => {
+  return (
+    <thead className='gm-table-x-thead'>
+      {headerGroups.map((headerGroup, i) => (
+        <tr key={i} className='gm-table-x-tr'>
+          {headerGroup.headers.map((column, i) => (
+            <Th key={i} column={column} totalWidth={totalWidth} />
+          ))}
+        </tr>
+      ))}
+    </thead>
+  )
+}
+
+THead.whyDidYouRender = true
+
+THead.propTypes = {
+  headerGroups: PropTypes.array.isRequired,
+  totalWidth: PropTypes.number.isRequired
+}
+
+export default React.memo(THead)