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

package/src/hoc/select_table_x/index.js

@@ -1,139 +1,139 @@
-import React, { useMemo } from 'react'
-import PropTypes from 'prop-types'
-import TableX from '../../base'
-import { TABLE_X, TABLE_X_SELECT_ID } from '../../util'
-import { Flex } from '@gmfe/react'
-import { devWarn } from '@gm-common/tool'
-import { SelectContext } from './util'
-import SelectHeader from './header'
-import SelectCell from './cell'
-import _ from 'lodash'
-
-// 利用 Context 做到按需更新
-
-function getNewColumns(
-  columns,
-  fixedSelect,
-  selectType,
-  keyField,
-  isSelectorDisable
-) {
-  return [
-    {
-      id: TABLE_X_SELECT_ID,
-      width: TABLE_X.WIDTH_FUN,
-      maxWidth: TABLE_X.WIDTH_FUN,
-      thClassName: 'gm-table-x-icon',
-      tdClassName: 'gm-table-x-icon',
-      fixed: fixedSelect ? 'left' : null,
-      Header: () => <SelectHeader selectType={selectType} />,
-      // eslint-disable-next-line
-      Cell: ({ row }) => (
-        <SelectCell
-          selectType={selectType}
-          keyField={keyField}
-          row={row}
-          isSelectorDisable={isSelectorDisable}
-        />
-      )
-    }
-  ].concat(columns)
-}
-
-function selectTableXHOC(Component) {
-  const SelectTableX = props => {
-    const {
-      selected,
-      onSelect,
-      batchActionBar,
-      isSelectorDisable,
-      selectType,
-      keyField,
-      fixedSelect,
-      columns,
-      data,
-      ...rest
-    } = props
-
-    devWarn(() => {
-      if (props.onSelectAll) {
-        throw Error('onSelectAll已经废弃，使用onSelect即可！')
-      }
-    })
-
-    const canSelectData = data.filter(row => !isSelectorDisable(row))
-
-    let isSelectAll = false
-    if (selected.length > 0) {
-      isSelectAll = selected.length === canSelectData.length
-    }
-
-    const handleSelect = selected => {
-      onSelect(selected)
-    }
-
-    const handleSelectAll = () => {
-      onSelect(!isSelectAll ? _.map(canSelectData, v => v[keyField]) : [])
-    }
-
-    // columns 即可，其他都是死的。 isSelectorDisable 呢？
-    const newColumns = useMemo(() => {
-      return getNewColumns(
-        columns,
-        fixedSelect,
-        selectType,
-        keyField,
-        isSelectorDisable
-      )
-    }, [columns])
-
-    return (
-      <SelectContext.Provider
-        value={{
-          selected,
-          onSelect: handleSelect,
-          isSelectAll,
-          onSelectAll: handleSelectAll
-        }}
-      >
-        <div className='gm-table-x-select-container'>
-          {batchActionBar && (
-            <div className='gm-table-x-select-batch-action-bar-container'>
-              <Flex
-                column
-                justifyCenter
-                className='gm-table-x-select-batch-action-bar'
-              >
-                {batchActionBar}
-              </Flex>
-            </div>
-          )}
-          <Component {...rest} columns={newColumns} data={data} />
-        </div>
-      </SelectContext.Provider>
-    )
-  }
-
-  SelectTableX.propTypes = {
-    ...TableX.propTypes,
-
-    // select 专有
-    selected: PropTypes.array.isRequired,
-    onSelect: PropTypes.func.isRequired,
-    batchActionBar: PropTypes.element,
-    isSelectorDisable: PropTypes.func,
-    selectType: PropTypes.oneOf(['checkbox', 'radio']),
-    keyField: PropTypes.string,
-    fixedSelect: PropTypes.bool
-  }
-
-  SelectTableX.defaultProps = {
-    selectType: 'checkbox',
-    keyField: 'value',
-    isSelectorDisable: () => false
-  }
-
-  return SelectTableX
-}
-
-export default selectTableXHOC
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import TableX from '../../base'
+import { TABLE_X, TABLE_X_SELECT_ID } from '../../util'
+import { Flex } from '@gmfe/react'
+import { devWarn } from '@gm-common/tool'
+import { SelectContext } from './util'
+import SelectHeader from './header'
+import SelectCell from './cell'
+import _ from 'lodash'
+
+// 利用 Context 做到按需更新
+
+function getNewColumns(
+  columns,
+  fixedSelect,
+  selectType,
+  keyField,
+  isSelectorDisable
+) {
+  return [
+    {
+      id: TABLE_X_SELECT_ID,
+      width: TABLE_X.WIDTH_FUN,
+      maxWidth: TABLE_X.WIDTH_FUN,
+      thClassName: 'gm-table-x-icon',
+      tdClassName: 'gm-table-x-icon',
+      fixed: fixedSelect ? 'left' : null,
+      Header: () => <SelectHeader selectType={selectType} />,
+      // eslint-disable-next-line
+      Cell: ({ row }) => (
+        <SelectCell
+          selectType={selectType}
+          keyField={keyField}
+          row={row}
+          isSelectorDisable={isSelectorDisable}
+        />
+      )
+    }
+  ].concat(columns)
+}
+
+function selectTableXHOC(Component) {
+  const SelectTableX = props => {
+    const {
+      selected,
+      onSelect,
+      batchActionBar,
+      isSelectorDisable,
+      selectType,
+      keyField,
+      fixedSelect,
+      columns,
+      data,
+      ...rest
+    } = props
+
+    devWarn(() => {
+      if (props.onSelectAll) {
+        throw Error('onSelectAll已经废弃，使用onSelect即可！')
+      }
+    })
+
+    const canSelectData = data.filter(row => !isSelectorDisable(row))
+
+    let isSelectAll = false
+    if (selected.length > 0) {
+      isSelectAll = selected.length === canSelectData.length
+    }
+
+    const handleSelect = selected => {
+      onSelect(selected)
+    }
+
+    const handleSelectAll = () => {
+      onSelect(!isSelectAll ? _.map(canSelectData, v => v[keyField]) : [])
+    }
+
+    // columns 即可，其他都是死的。 isSelectorDisable 呢？
+    const newColumns = useMemo(() => {
+      return getNewColumns(
+        columns,
+        fixedSelect,
+        selectType,
+        keyField,
+        isSelectorDisable
+      )
+    }, [columns])
+
+    return (
+      <SelectContext.Provider
+        value={{
+          selected,
+          onSelect: handleSelect,
+          isSelectAll,
+          onSelectAll: handleSelectAll
+        }}
+      >
+        <div className='gm-table-x-select-container'>
+          {batchActionBar && (
+            <div className='gm-table-x-select-batch-action-bar-container'>
+              <Flex
+                column
+                justifyCenter
+                className='gm-table-x-select-batch-action-bar'
+              >
+                {batchActionBar}
+              </Flex>
+            </div>
+          )}
+          <Component {...rest} columns={newColumns} data={data} />
+        </div>
+      </SelectContext.Provider>
+    )
+  }
+
+  SelectTableX.propTypes = {
+    ...TableX.propTypes,
+
+    // select 专有
+    selected: PropTypes.array.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    batchActionBar: PropTypes.element,
+    isSelectorDisable: PropTypes.func,
+    selectType: PropTypes.oneOf(['checkbox', 'radio']),
+    keyField: PropTypes.string,
+    fixedSelect: PropTypes.bool
+  }
+
+  SelectTableX.defaultProps = {
+    selectType: 'checkbox',
+    keyField: 'value',
+    isSelectorDisable: () => false
+  }
+
+  return SelectTableX
+}
+
+export default selectTableXHOC

package/src/hoc/select_table_x/util.js

@@ -1,10 +1,10 @@
-import { createContext } from 'react'
-
-const SelectContext = createContext({
-  selected: [],
-  isSelectAll: false,
-  onSelect: () => {},
-  onSelectAll: () => {}
-})
-
-export { SelectContext }
+import { createContext } from 'react'
+
+const SelectContext = createContext({
+  selected: [],
+  isSelectAll: false,
+  onSelect: () => {},
+  onSelectAll: () => {}
+})
+
+export { SelectContext }

package/src/hoc/sortable_table_x.js

@@ -1,52 +1,52 @@
-import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
-import TableX from '../base'
-import SortableJS from 'sortablejs'
-import _ from 'lodash'
-
-function sortableTableX(Component) {
-  const SortableTableX = ({ id, data, onSortChange, keyField, ...rest }) => {
-    id = id || 'id' + +new Date() + '' + String(Math.random()).slice(2)
-
-    useEffect(() => {
-      const target = document.querySelector(`#${id} .gm-table-x-tbody`)
-
-      const sortable = new SortableJS(target, {
-        animation: 150,
-        onStart: () => {
-          target.classList.add('gm-table-x-sortable-active')
-        },
-        onEnd: () => {
-          target.classList.remove('gm-table-x-sortable-active')
-        },
-        onUpdate: evt => {
-          const newIds = sortable.toArray()
-          const newData = _.sortBy(data.slice(), v =>
-            newIds.indexOf(v[keyField])
-          )
-          onSortChange(newData)
-        }
-      })
-
-      return () => {
-        sortable.destroy()
-      }
-    }, [data])
-    return <Component {...rest} id={id} data={data} keyField={keyField} />
-  }
-
-  SortableTableX.propTypes = {
-    ...TableX.propTypes,
-
-    keyField: PropTypes.string,
-    onSortChange: PropTypes.func.isRequired
-  }
-
-  SortableTableX.defaultProps = {
-    keyField: 'value'
-  }
-
-  return SortableTableX
-}
-
-export default sortableTableX
+import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
+import TableX from '../base'
+import SortableJS from 'sortablejs'
+import _ from 'lodash'
+
+function sortableTableX(Component) {
+  const SortableTableX = ({ id, data, onSortChange, keyField, ...rest }) => {
+    id = id || 'id' + +new Date() + '' + String(Math.random()).slice(2)
+
+    useEffect(() => {
+      const target = document.querySelector(`#${id} .gm-table-x-tbody`)
+
+      const sortable = new SortableJS(target, {
+        animation: 150,
+        onStart: () => {
+          target.classList.add('gm-table-x-sortable-active')
+        },
+        onEnd: () => {
+          target.classList.remove('gm-table-x-sortable-active')
+        },
+        onUpdate: evt => {
+          const newIds = sortable.toArray()
+          const newData = _.sortBy(data.slice(), v =>
+            newIds.indexOf(v[keyField])
+          )
+          onSortChange(newData)
+        }
+      })
+
+      return () => {
+        sortable.destroy()
+      }
+    }, [data])
+    return <Component {...rest} id={id} data={data} keyField={keyField} />
+  }
+
+  SortableTableX.propTypes = {
+    ...TableX.propTypes,
+
+    keyField: PropTypes.string,
+    onSortChange: PropTypes.func.isRequired
+  }
+
+  SortableTableX.defaultProps = {
+    keyField: 'value'
+  }
+
+  return SortableTableX
+}
+
+export default sortableTableX

package/src/hoc/sub_table_x.js

@@ -1,44 +1,44 @@
-import React from 'react'
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import TableX from '../base'
-import { TABLE_X, TABLE_X_SUB_TABLE_ID } from '../util'
-
-const subTableXHOC = Component => {
-  const SubTable = ({ subTableIndent, columns, className, ...rest }) => {
-    const _columns = React.useMemo(
-      () =>
-        [
-          {
-            id: TABLE_X_SUB_TABLE_ID,
-            width: subTableIndent,
-            maxWidth: subTableIndent,
-            Header: ''
-          }
-        ].concat(columns),
-      [columns, subTableIndent]
-    )
-
-    return (
-      <Component
-        {...rest}
-        columns={_columns}
-        className={classNames('gm-table-x-sub-table', className)}
-      />
-    )
-  }
-
-  SubTable.propTypes = {
-    ...TableX.propTypes,
-    /** 默认功能区的宽度 */
-    subTableIndent: PropTypes.number
-  }
-
-  SubTable.defaultProps = {
-    subTableIndent: TABLE_X.WIDTH_FUN
-  }
-
-  return SubTable
-}
-
-export default subTableXHOC
+import React from 'react'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import TableX from '../base'
+import { TABLE_X, TABLE_X_SUB_TABLE_ID } from '../util'
+
+const subTableXHOC = Component => {
+  const SubTable = ({ subTableIndent, columns, className, ...rest }) => {
+    const _columns = React.useMemo(
+      () =>
+        [
+          {
+            id: TABLE_X_SUB_TABLE_ID,
+            width: subTableIndent,
+            maxWidth: subTableIndent,
+            Header: ''
+          }
+        ].concat(columns),
+      [columns, subTableIndent]
+    )
+
+    return (
+      <Component
+        {...rest}
+        columns={_columns}
+        className={classNames('gm-table-x-sub-table', className)}
+      />
+    )
+  }
+
+  SubTable.propTypes = {
+    ...TableX.propTypes,
+    /** 默认功能区的宽度 */
+    subTableIndent: PropTypes.number
+  }
+
+  SubTable.defaultProps = {
+    subTableIndent: TABLE_X.WIDTH_FUN
+  }
+
+  return SubTable
+}
+
+export default subTableXHOC

package/src/index.js

@@ -1,53 +1,53 @@
-import TableX from './base'
-import TableXVirtualized from './base/virtualized'
-import selectTableXHOC from './hoc/select_table_x'
-import expandTableXHOC from './hoc/expand_table_x'
-import fixedColumnsTableXHOC from './hoc/fixed_columns_table_x'
-import sortableTableXHOC from './hoc/sortable_table_x'
-import subTableXHOC from './hoc/sub_table_x'
-import editTableXHOC from './hoc/edit_table_x'
-import diyTableXHOC from './hoc/diy_table_x'
-
-import {
-  TABLE_X,
-  BatchActionBar,
-  OperationHeader,
-  OperationDelete,
-  OperationRecover,
-  OperationDetail,
-  OperationCell,
-  OperationRowEdit,
-  OperationIconTip,
-  EditButton,
-  EditOperation,
-  SortHeader
-} from './util'
-
-const TableXUtil = {
-  TABLE_X,
-
-  BatchActionBar,
-  SortHeader,
-  OperationRecover,
-  OperationHeader,
-  OperationDelete,
-  OperationDetail,
-  OperationCell,
-  OperationRowEdit,
-  OperationIconTip,
-  EditButton,
-  EditOperation
-}
-
-export {
-  TableXUtil,
-  TableX,
-  TableXVirtualized,
-  selectTableXHOC,
-  expandTableXHOC,
-  fixedColumnsTableXHOC,
-  subTableXHOC,
-  editTableXHOC,
-  diyTableXHOC,
-  sortableTableXHOC
-}
+import TableX from './base'
+import TableXVirtualized from './base/virtualized'
+import selectTableXHOC from './hoc/select_table_x'
+import expandTableXHOC from './hoc/expand_table_x'
+import fixedColumnsTableXHOC from './hoc/fixed_columns_table_x'
+import sortableTableXHOC from './hoc/sortable_table_x'
+import subTableXHOC from './hoc/sub_table_x'
+import editTableXHOC from './hoc/edit_table_x'
+import diyTableXHOC from './hoc/diy_table_x'
+
+import {
+  TABLE_X,
+  BatchActionBar,
+  OperationHeader,
+  OperationDelete,
+  OperationRecover,
+  OperationDetail,
+  OperationCell,
+  OperationRowEdit,
+  OperationIconTip,
+  EditButton,
+  EditOperation,
+  SortHeader
+} from './util'
+
+const TableXUtil = {
+  TABLE_X,
+
+  BatchActionBar,
+  SortHeader,
+  OperationRecover,
+  OperationHeader,
+  OperationDelete,
+  OperationDetail,
+  OperationCell,
+  OperationRowEdit,
+  OperationIconTip,
+  EditButton,
+  EditOperation
+}
+
+export {
+  TableXUtil,
+  TableX,
+  TableXVirtualized,
+  selectTableXHOC,
+  expandTableXHOC,
+  fixedColumnsTableXHOC,
+  subTableXHOC,
+  editTableXHOC,
+  diyTableXHOC,
+  sortableTableXHOC
+}