@gmfe/table-x 2.14.20 → 2.14.26-beta.0

package/src/hoc/expand_table_x/index.js

@@ -1,140 +1,140 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import TableX from '../../base'
-import _ from 'lodash'
-import { TABLE_X, TABLE_X_EXPAND_ID } from '../../util'
-import { Expand, ExpandContext } from './util'
-
-const ExpandHeader = React.memo(() => {
-  return (
-    <ExpandContext.Consumer>
-      {({ isExpandAll, onExpandAll }) => (
-        <Expand active={isExpandAll} onChange={onExpandAll} />
-      )}
-    </ExpandContext.Consumer>
-  )
-})
-
-const ExpandCell = React.memo(({ row }) => {
-  return (
-    <ExpandContext.Consumer>
-      {({ expanded, onExpand }) => {
-        const isExpanded = !!expanded[row.index]
-
-        return (
-          <Expand
-            active={isExpanded}
-            onChange={() => {
-              onExpand({
-                ...expanded,
-                [row.index]: !isExpanded
-              })
-            }}
-          />
-        )
-      }}
-    </ExpandContext.Consumer>
-  )
-})
-
-ExpandCell.propTypes = {
-  row: PropTypes.object.isRequired
-}
-
-function getNewColumns(columns, fixedExpand) {
-  return [
-    {
-      id: TABLE_X_EXPAND_ID,
-      width: TABLE_X.WIDTH_FUN,
-      maxWidth: TABLE_X.WIDTH_FUN,
-      fixed: fixedExpand ? 'left' : null,
-      thClassName: 'gm-table-x-icon',
-      tdClassName: 'gm-table-x-icon',
-      Header: () => <ExpandHeader />,
-      // eslint-disable-next-line
-      Cell: ({ row }) => <ExpandCell row={row} />
-    }
-  ].concat(columns)
-}
-
-function expandTableXHOC(Component) {
-  const ExpandTableX = ({
-    columns,
-    data,
-    SubComponent,
-    fixedExpand,
-    expanded: expandedFromProps,
-    onExpand,
-    ...rest
-  }) => {
-    // expanded状态是否由调用方控制
-    const isControlByProps = expandedFromProps !== undefined
-
-    const [expanded, setExpanded] = isControlByProps
-      ? [expandedFromProps, onExpand]
-      : useState({})
-
-    const isExpandAll = _.filter(expanded, v => v).length === data.length
-
-    const handleExpand = expanded => {
-      setExpanded(expanded)
-    }
-
-    const handleExpandAll = () => {
-      if (isExpandAll) {
-        setExpanded({})
-      } else {
-        const newExpanded = {}
-        _.each(data, (v, i) => {
-          newExpanded[i] = true
-        })
-        setExpanded(newExpanded)
-      }
-    }
-
-    const renderSubComponent = row => {
-      const isExpanded = expanded[row.index]
-      if (!isExpanded) {
-        return null
-      }
-
-      return SubComponent(row)
-    }
-
-    // columns 即可，其他都是死的。
-    const newColumns = React.useMemo(() => {
-      return getNewColumns(columns, fixedExpand)
-    }, [columns])
-
-    return (
-      <ExpandContext.Provider
-        value={{
-          expanded,
-          onExpand: handleExpand,
-          isExpandAll,
-          onExpandAll: handleExpandAll
-        }}
-      >
-        <Component
-          {...rest}
-          columns={newColumns}
-          data={data}
-          SubComponent={renderSubComponent}
-        />
-      </ExpandContext.Provider>
-    )
-  }
-
-  ExpandTableX.propTypes = {
-    ...TableX.propTypes,
-    fixedExpand: PropTypes.bool,
-    SubComponent: PropTypes.func.isRequired,
-    /** 传了expanded，组件expand交由外部props控制，则必须也要传onExpand。 */
-    expanded: PropTypes.object,
-    onExpand: PropTypes.func
-  }
-
-  return ExpandTableX
-}
-
-export default expandTableXHOC
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import TableX from '../../base'
+import _ from 'lodash'
+import { TABLE_X, TABLE_X_EXPAND_ID } from '../../util'
+import { Expand, ExpandContext } from './util'
+
+const ExpandHeader = React.memo(() => {
+  return (
+    <ExpandContext.Consumer>
+      {({ isExpandAll, onExpandAll }) => (
+        <Expand active={isExpandAll} onChange={onExpandAll} />
+      )}
+    </ExpandContext.Consumer>
+  )
+})
+
+const ExpandCell = React.memo(({ row }) => {
+  return (
+    <ExpandContext.Consumer>
+      {({ expanded, onExpand }) => {
+        const isExpanded = !!expanded[row.index]
+
+        return (
+          <Expand
+            active={isExpanded}
+            onChange={() => {
+              onExpand({
+                ...expanded,
+                [row.index]: !isExpanded
+              })
+            }}
+          />
+        )
+      }}
+    </ExpandContext.Consumer>
+  )
+})
+
+ExpandCell.propTypes = {
+  row: PropTypes.object.isRequired
+}
+
+function getNewColumns(columns, fixedExpand) {
+  return [
+    {
+      id: TABLE_X_EXPAND_ID,
+      width: TABLE_X.WIDTH_FUN,
+      maxWidth: TABLE_X.WIDTH_FUN,
+      fixed: fixedExpand ? 'left' : null,
+      thClassName: 'gm-table-x-icon',
+      tdClassName: 'gm-table-x-icon',
+      Header: () => <ExpandHeader />,
+      // eslint-disable-next-line
+      Cell: ({ row }) => <ExpandCell row={row} />
+    }
+  ].concat(columns)
+}
+
+function expandTableXHOC(Component) {
+  const ExpandTableX = ({
+    columns,
+    data,
+    SubComponent,
+    fixedExpand,
+    expanded: expandedFromProps,
+    onExpand,
+    ...rest
+  }) => {
+    // expanded状态是否由调用方控制
+    const isControlByProps = expandedFromProps !== undefined
+
+    const [expanded, setExpanded] = isControlByProps
+      ? [expandedFromProps, onExpand]
+      : useState({})
+
+    const isExpandAll = _.filter(expanded, v => v).length === data.length
+
+    const handleExpand = expanded => {
+      setExpanded(expanded)
+    }
+
+    const handleExpandAll = () => {
+      if (isExpandAll) {
+        setExpanded({})
+      } else {
+        const newExpanded = {}
+        _.each(data, (v, i) => {
+          newExpanded[i] = true
+        })
+        setExpanded(newExpanded)
+      }
+    }
+
+    const renderSubComponent = row => {
+      const isExpanded = expanded[row.index]
+      if (!isExpanded) {
+        return null
+      }
+
+      return SubComponent(row)
+    }
+
+    // columns 即可，其他都是死的。
+    const newColumns = React.useMemo(() => {
+      return getNewColumns(columns, fixedExpand)
+    }, [columns])
+
+    return (
+      <ExpandContext.Provider
+        value={{
+          expanded,
+          onExpand: handleExpand,
+          isExpandAll,
+          onExpandAll: handleExpandAll
+        }}
+      >
+        <Component
+          {...rest}
+          columns={newColumns}
+          data={data}
+          SubComponent={renderSubComponent}
+        />
+      </ExpandContext.Provider>
+    )
+  }
+
+  ExpandTableX.propTypes = {
+    ...TableX.propTypes,
+    fixedExpand: PropTypes.bool,
+    SubComponent: PropTypes.func.isRequired,
+    /** 传了expanded，组件expand交由外部props控制，则必须也要传onExpand。 */
+    expanded: PropTypes.object,
+    onExpand: PropTypes.func
+  }
+
+  return ExpandTableX
+}
+
+export default expandTableXHOC

package/src/hoc/expand_table_x/util.js

@@ -1,27 +1,27 @@
-import React, { createContext } from 'react'
-import SVGCloseup from '../../../svg/closeup.svg'
-import SVGExpand from '../../../svg/expand.svg'
-import PropTypes from 'prop-types'
-
-const ExpandContext = createContext({
-  dataLength: 0,
-  expanded: [],
-  isExpandAll: false,
-  onExpand: () => {},
-  onExpandAll: () => {}
-})
-
-const Expand = ({ active, onChange }) => {
-  return (
-    <div className='gm-cursor gm-table-x-expand' onClick={onChange}>
-      {active ? <SVGCloseup className='gm-text-primary' /> : <SVGExpand />}
-    </div>
-  )
-}
-
-Expand.propTypes = {
-  active: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired
-}
-
-export { ExpandContext, Expand }
+import React, { createContext } from 'react'
+import SVGCloseup from '../../../svg/closeup.svg'
+import SVGExpand from '../../../svg/expand.svg'
+import PropTypes from 'prop-types'
+
+const ExpandContext = createContext({
+  dataLength: 0,
+  expanded: [],
+  isExpandAll: false,
+  onExpand: () => {},
+  onExpandAll: () => {}
+})
+
+const Expand = ({ active, onChange }) => {
+  return (
+    <div className='gm-cursor gm-table-x-expand' onClick={onChange}>
+      {active ? <SVGCloseup className='gm-text-primary' /> : <SVGExpand />}
+    </div>
+  )
+}
+
+Expand.propTypes = {
+  active: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export { ExpandContext, Expand }

package/src/hoc/fixed_columns_table_x.js

@@ -1,29 +1,29 @@
-import React from 'react'
-import TableX from '../base'
-import _ from 'lodash'
-
-function fixedColumnsTableXHOC(Component) {
-  const FixedColumnTableX = ({ columns, ...rest }) => {
-    return <Component {...rest} columns={columns} />
-  }
-
-  FixedColumnTableX.propTypes = {
-    ...TableX.propTypes,
-    /** 需要固定的 column 有 fixed 字段 */
-    columns: props => {
-      const { columns } = props
-
-      _.each(columns, column => {
-        if (column.fixed) {
-          if (column.fixed !== 'left' && column.fixed !== 'right') {
-            console.error('column fixed need to be left or right', column)
-          }
-        }
-      })
-    }
-  }
-
-  return FixedColumnTableX
-}
-
-export default fixedColumnsTableXHOC
+import React from 'react'
+import TableX from '../base'
+import _ from 'lodash'
+
+function fixedColumnsTableXHOC(Component) {
+  const FixedColumnTableX = ({ columns, ...rest }) => {
+    return <Component {...rest} columns={columns} />
+  }
+
+  FixedColumnTableX.propTypes = {
+    ...TableX.propTypes,
+    /** 需要固定的 column 有 fixed 字段 */
+    columns: props => {
+      const { columns } = props
+
+      _.each(columns, column => {
+        if (column.fixed) {
+          if (column.fixed !== 'left' && column.fixed !== 'right') {
+            console.error('column fixed need to be left or right', column)
+          }
+        }
+      })
+    }
+  }
+
+  return FixedColumnTableX
+}
+
+export default fixedColumnsTableXHOC

package/src/hoc/select_table_x/cell.js

@@ -1,51 +1,51 @@
-import { SelectContext } from './util'
-import { Checkbox, Radio } from '@gmfe/react'
-import _ from 'lodash'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const SelectCell = ({ selectType, keyField, row, isSelectorDisable }) => {
-  const value = row.original[keyField]
-
-  return (
-    <SelectContext.Consumer>
-      {({ selected, onSelect }) => {
-        const isChecked = selected.includes(value)
-        const disabled = isSelectorDisable(row.original)
-
-        if (selectType === 'checkbox') {
-          return (
-            <Checkbox
-              className='gm-table-x-select'
-              disabled={disabled}
-              checked={isChecked}
-              onChange={() => {
-                onSelect(_.xor(selected, [value]))
-              }}
-            />
-          )
-        } else {
-          return (
-            <Radio
-              className='gm-table-x-select'
-              disabled={disabled}
-              checked={isChecked}
-              onClick={() => {
-                onSelect(isChecked ? [] : [value])
-              }}
-            />
-          )
-        }
-      }}
-    </SelectContext.Consumer>
-  )
-}
-
-SelectCell.propTypes = {
-  selectType: PropTypes.string.isRequired,
-  keyField: PropTypes.string.isRequired,
-  row: PropTypes.object.isRequired,
-  isSelectorDisable: PropTypes.func.isRequired
-}
-
-export default SelectCell
+import { SelectContext } from './util'
+import { Checkbox, Radio } from '@gmfe/react'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const SelectCell = ({ selectType, keyField, row, isSelectorDisable }) => {
+  const value = row.original[keyField]
+
+  return (
+    <SelectContext.Consumer>
+      {({ selected, onSelect }) => {
+        const isChecked = selected.includes(value)
+        const disabled = isSelectorDisable(row.original)
+
+        if (selectType === 'checkbox') {
+          return (
+            <Checkbox
+              className='gm-table-x-select'
+              disabled={disabled}
+              checked={isChecked}
+              onChange={() => {
+                onSelect(_.xor(selected, [value]))
+              }}
+            />
+          )
+        } else {
+          return (
+            <Radio
+              className='gm-table-x-select'
+              disabled={disabled}
+              checked={isChecked}
+              onClick={() => {
+                onSelect(isChecked ? [] : [value])
+              }}
+            />
+          )
+        }
+      }}
+    </SelectContext.Consumer>
+  )
+}
+
+SelectCell.propTypes = {
+  selectType: PropTypes.string.isRequired,
+  keyField: PropTypes.string.isRequired,
+  row: PropTypes.object.isRequired,
+  isSelectorDisable: PropTypes.func.isRequired
+}
+
+export default SelectCell

package/src/hoc/select_table_x/header.js

@@ -1,28 +1,28 @@
-import React from 'react'
-import { SelectContext } from './util'
-import { Checkbox } from '@gmfe/react'
-import PropTypes from 'prop-types'
-
-const SelectHeader = React.memo(({ selectType }) => {
-  if (selectType !== 'checkbox') {
-    return null
-  }
-
-  return (
-    <SelectContext.Consumer>
-      {({ isSelectAll, onSelectAll }) => (
-        <Checkbox
-          className='gm-table-x-select'
-          checked={isSelectAll}
-          onChange={onSelectAll}
-        />
-      )}
-    </SelectContext.Consumer>
-  )
-})
-
-SelectHeader.propTypes = {
-  selectType: PropTypes.string.isRequired
-}
-
-export default SelectHeader
+import React from 'react'
+import { SelectContext } from './util'
+import { Checkbox } from '@gmfe/react'
+import PropTypes from 'prop-types'
+
+const SelectHeader = React.memo(({ selectType }) => {
+  if (selectType !== 'checkbox') {
+    return null
+  }
+
+  return (
+    <SelectContext.Consumer>
+      {({ isSelectAll, onSelectAll }) => (
+        <Checkbox
+          className='gm-table-x-select'
+          checked={isSelectAll}
+          onChange={onSelectAll}
+        />
+      )}
+    </SelectContext.Consumer>
+  )
+})
+
+SelectHeader.propTypes = {
+  selectType: PropTypes.string.isRequired
+}
+
+export default SelectHeader