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

package/src/hoc/diy_table_x/components/diy_table_x_modal.js

@@ -1,135 +1,135 @@
-import React, { useState } from 'react'
-import { Flex, Button } from '@gmfe/react'
-import _ from 'lodash'
-import Selector from './modal_selector'
-import List from './modal_list'
-import PropTypes from 'prop-types'
-import { getLocale } from '@gmfe/locales'
-
-const DiyTableModal = ({ columns, onSave, diyGroupSorting, onCancel }) => {
-  const [diyCols, setDiyCols] = useState(columns)
-  const [showCols, setShowCols] = useState(columns.filter(o => o.show))
-
-  const handleColsChange = (key, curShow) => {
-    const index = _.findIndex(diyCols, o => o.key === key)
-    const _diyCols = diyCols.slice()
-
-    const curItem = _diyCols[index]
-    curItem.show = !curShow
-
-    setDiyCols(_diyCols)
-
-    if (curItem.show) {
-      // 把当前项增加到排序列表中
-      setShowCols(_diyCols.filter(o => o.show))
-    } else {
-      // 把当前项从排序列表去掉
-      const _showCols = showCols.slice()
-      _.remove(_showCols, item => item.key === key)
-      setShowCols(_showCols)
-    }
-  }
-
-  const handleColsRemove = key => {
-    const _showCols = showCols.slice()
-    _.remove(_showCols, o => o.key === key)
-    setShowCols(_showCols)
-
-    const index = _.findIndex(diyCols, o => o.key === key)
-    const _diyCols = diyCols.slice()
-    _diyCols[index].show = false
-    setDiyCols(_diyCols)
-  }
-
-  const handleColsSort = (beforeKey, afterKey) => {
-    //移动到前面，移动到后面
-    let beforeIndex, afterIndex;
-    _.forEach(diyCols, (item, index)=>{
-      if(beforeKey === item.key){
-        beforeIndex = index
-      }
-      if(afterKey === item.key){
-        afterIndex = index
-      }
-    })
-    diyCols.splice(afterIndex + 1, 0, diyCols[beforeIndex]);
-    if(afterIndex > beforeIndex){
-      diyCols.splice(beforeIndex, 1);
-    }
-    if(afterIndex < beforeIndex){
-      diyCols.splice(beforeIndex + 1, 1);
-    }
-    setDiyCols(diyCols)
-    setShowCols(columns.filter(o => o.show))
-  }
-
-  const handleSave = () => {
-    const columns = diyCols.map(col => {
-      return {
-        ...col,
-        show: _.findIndex(showCols, v => v.key === col.key) > -1 // 大于-1才会显示
-      }
-    })
-
-    onSave(columns)
-    onCancel()
-  }
-
-  return (
-    <div className='gm-react-table-x-diy-modal'>
-      <Flex
-        className='gm-react-table-x-diy-modal-header gm-padding-tb-5'
-        justifyBetween
-        alignCenter
-      >
-        <div className='gm-react-table-x-diy-modal-header-title gm-margin-left-10 gm-padding-left-5'>
-          {getLocale('表头设置')}
-        </div>
-        <button
-          className='gm-react-table-x-diy-modal-header-close gm-margin-right-10'
-          onClick={onCancel}
-        >
-          ×
-        </button>
-      </Flex>
-      <Flex className='gm-react-table-x-diy-modal-content'>
-        <div className='gm-react-table-x-diy-modal-selector'>
-          <div className='gm-react-table-x-diy-modal-title'>
-            可选字段
-          </div>
-          <Selector
-            diyGroupSorting={diyGroupSorting}
-            cols={diyCols}
-            onColsChange={handleColsChange}
-          />
-        </div>
-        <div className='gm-react-table-x-diy-modal-list'>
-          <div className='gm-react-table-x-diy-modal-title'>
-            当前选定的字段
-          </div>
-          <List cols={showCols} onColsRemove={handleColsRemove} onColsSort={handleColsSort}/>
-        </div>
-      </Flex>
-      <Flex justifyEnd className='gm-padding-10'>
-        <Button onClick={onCancel}>取消</Button>
-        <div className='gm-gap-10' />
-        <Button
-          type='primary'
-          onClick={handleSave}
-          className='gm-margin-right-10'
-        >
-          保存
-        </Button>
-      </Flex>
-    </div>
-  )
-}
-
-DiyTableModal.propTypes = {
-  columns: PropTypes.array.isRequired,
-  diyGroupSorting: PropTypes.array.isRequired,
-  onSave: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired
-}
-
-export default DiyTableModal
+import React, { useState } from 'react'
+import { Flex, Button } from '@gmfe/react'
+import _ from 'lodash'
+import Selector from './modal_selector'
+import List from './modal_list'
+import PropTypes from 'prop-types'
+import { getLocale } from '@gmfe/locales'
+
+const DiyTableModal = ({ columns, onSave, diyGroupSorting, onCancel }) => {
+  const [diyCols, setDiyCols] = useState(columns)
+  const [showCols, setShowCols] = useState(columns.filter(o => o.show))
+
+  const handleColsChange = (key, curShow) => {
+    const index = _.findIndex(diyCols, o => o.key === key)
+    const _diyCols = diyCols.slice()
+
+    const curItem = _diyCols[index]
+    curItem.show = !curShow
+
+    setDiyCols(_diyCols)
+
+    if (curItem.show) {
+      // 把当前项增加到排序列表中
+      setShowCols(_diyCols.filter(o => o.show))
+    } else {
+      // 把当前项从排序列表去掉
+      const _showCols = showCols.slice()
+      _.remove(_showCols, item => item.key === key)
+      setShowCols(_showCols)
+    }
+  }
+
+  const handleColsRemove = key => {
+    const _showCols = showCols.slice()
+    _.remove(_showCols, o => o.key === key)
+    setShowCols(_showCols)
+
+    const index = _.findIndex(diyCols, o => o.key === key)
+    const _diyCols = diyCols.slice()
+    _diyCols[index].show = false
+    setDiyCols(_diyCols)
+  }
+
+  const handleColsSort = (beforeKey, afterKey) => {
+    //移动到前面，移动到后面
+    let beforeIndex, afterIndex;
+    _.forEach(diyCols, (item, index)=>{
+      if(beforeKey === item.key){
+        beforeIndex = index
+      }
+      if(afterKey === item.key){
+        afterIndex = index
+      }
+    })
+    diyCols.splice(afterIndex + 1, 0, diyCols[beforeIndex]);
+    if(afterIndex > beforeIndex){
+      diyCols.splice(beforeIndex, 1);
+    }
+    if(afterIndex < beforeIndex){
+      diyCols.splice(beforeIndex + 1, 1);
+    }
+    setDiyCols(diyCols)
+    setShowCols(columns.filter(o => o.show))
+  }
+
+  const handleSave = () => {
+    const columns = diyCols.map(col => {
+      return {
+        ...col,
+        show: _.findIndex(showCols, v => v.key === col.key) > -1 // 大于-1才会显示
+      }
+    })
+
+    onSave(columns)
+    onCancel()
+  }
+
+  return (
+    <div className='gm-react-table-x-diy-modal'>
+      <Flex
+        className='gm-react-table-x-diy-modal-header gm-padding-tb-5'
+        justifyBetween
+        alignCenter
+      >
+        <div className='gm-react-table-x-diy-modal-header-title gm-margin-left-10 gm-padding-left-5'>
+          {getLocale('表头设置')}
+        </div>
+        <button
+          className='gm-react-table-x-diy-modal-header-close gm-margin-right-10'
+          onClick={onCancel}
+        >
+          ×
+        </button>
+      </Flex>
+      <Flex className='gm-react-table-x-diy-modal-content'>
+        <div className='gm-react-table-x-diy-modal-selector'>
+          <div className='gm-react-table-x-diy-modal-title'>
+            可选字段
+          </div>
+          <Selector
+            diyGroupSorting={diyGroupSorting}
+            cols={diyCols}
+            onColsChange={handleColsChange}
+          />
+        </div>
+        <div className='gm-react-table-x-diy-modal-list'>
+          <div className='gm-react-table-x-diy-modal-title'>
+            当前选定的字段
+          </div>
+          <List cols={showCols} onColsRemove={handleColsRemove} onColsSort={handleColsSort}/>
+        </div>
+      </Flex>
+      <Flex justifyEnd className='gm-padding-10'>
+        <Button onClick={onCancel}>取消</Button>
+        <div className='gm-gap-10' />
+        <Button
+          type='primary'
+          onClick={handleSave}
+          className='gm-margin-right-10'
+        >
+          保存
+        </Button>
+      </Flex>
+    </div>
+  )
+}
+
+DiyTableModal.propTypes = {
+  columns: PropTypes.array.isRequired,
+  diyGroupSorting: PropTypes.array.isRequired,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired
+}
+
+export default DiyTableModal

package/src/hoc/diy_table_x/components/modal_list.js

@@ -1,78 +1,78 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import SVGRemove from '../../../../svg/remove.svg'
-import _ from 'lodash'
-
-const ModalList = ({ cols, onColsRemove, onColsSort }) => {
-  const onRemove = (key, e) => {
-    e.stopPropagation()
-    onColsRemove(key)
-  }
-
-  const handleDragEnter = (key, e) => {
-    if(!e.target){
-      return
-    }
-    e.target.style.borderBottom = '2px dashed #008dff';
-    e.stopPropagation()
-    e.preventDefault()
-  }
-
-  const throttleDragEnter = _.throttle(handleDragEnter,1500)
-
-  const handleDragLeave = (key, e) => {
-    e.target.style.border = '';
-    e.target.style.boxShadow = '';
-    e.stopPropagation()
-    e.preventDefault()
-  }
-
-  const handleDragStart = (key, e) => {
-    e.dataTransfer.setData("key", key);
-  }
-
-  const handleDrop = (key, e) => {
-    if(!e.target){
-      return
-    }
-    const beforekey = e.dataTransfer.getData("key");
-    const afterkey = e.target?.attributes?.dragkey?.value
-    e.target && (e.target.style.border = '')
-    e.target && (e.target.style.boxShadow = '')
-    onColsSort(beforekey, afterkey)
-    e.stopPropagation()
-    e.preventDefault()
-  }
-  return (
-    <ul className='gm-react-table-x-diy-modal-list-ul'>
-      {cols.map(item => {
-        const { diyItemText, Header, key, diyEnable } = item
-        const text = diyItemText || Header
-        return (
-          <li style={{boxSizing:"border-box"}} className='gm-react-table-x-diy-modal-list-li' dragkey={key} key={key} onDragEnter={throttleDragEnter.bind(this, key)}
-          onDragLeave={handleDragLeave.bind(this, key)}
-          onDragOver={handleDragEnter.bind(this, key)}
-          onDragStart={handleDragStart.bind(this, key)}
-          onDrop={handleDrop.bind(this, key)}
-          draggable="true">
-            {text}
-            {diyEnable && (
-              <SVGRemove
-                onClick={onRemove.bind(this, key)}
-                className='gm-cursor gm-react-table-x-diy-modal-list-li-remove'
-              />
-            )}
-          </li>
-        )
-      })}
-    </ul>
-  )
-}
-
-ModalList.propTypes = {
-  cols: PropTypes.array.isRequired,
-  onColsRemove: PropTypes.func.isRequired,
-  onColsSort: PropTypes.func.isRequired,
-}
-
-export default ModalList
+import React from 'react'
+import PropTypes from 'prop-types'
+import SVGRemove from '../../../../svg/remove.svg'
+import _ from 'lodash'
+
+const ModalList = ({ cols, onColsRemove, onColsSort }) => {
+  const onRemove = (key, e) => {
+    e.stopPropagation()
+    onColsRemove(key)
+  }
+
+  const handleDragEnter = (key, e) => {
+    if(!e.target){
+      return
+    }
+    e.target.style.borderBottom = '2px dashed #008dff';
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  const throttleDragEnter = _.throttle(handleDragEnter,1500)
+
+  const handleDragLeave = (key, e) => {
+    e.target.style.border = '';
+    e.target.style.boxShadow = '';
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  const handleDragStart = (key, e) => {
+    e.dataTransfer.setData("key", key);
+  }
+
+  const handleDrop = (key, e) => {
+    if(!e.target){
+      return
+    }
+    const beforekey = e.dataTransfer.getData("key");
+    const afterkey = e.target?.attributes?.dragkey?.value
+    e.target && (e.target.style.border = '')
+    e.target && (e.target.style.boxShadow = '')
+    onColsSort(beforekey, afterkey)
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  return (
+    <ul className='gm-react-table-x-diy-modal-list-ul'>
+      {cols.map(item => {
+        const { diyItemText, Header, key, diyEnable } = item
+        const text = diyItemText || Header
+        return (
+          <li style={{boxSizing:"border-box"}} className='gm-react-table-x-diy-modal-list-li' dragkey={key} key={key} onDragEnter={throttleDragEnter.bind(this, key)}
+          onDragLeave={handleDragLeave.bind(this, key)}
+          onDragOver={handleDragEnter.bind(this, key)}
+          onDragStart={handleDragStart.bind(this, key)}
+          onDrop={handleDrop.bind(this, key)}
+          draggable="true">
+            {text}
+            {diyEnable && (
+              <SVGRemove
+                onClick={onRemove.bind(this, key)}
+                className='gm-cursor gm-react-table-x-diy-modal-list-li-remove'
+              />
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+ModalList.propTypes = {
+  cols: PropTypes.array.isRequired,
+  onColsRemove: PropTypes.func.isRequired,
+  onColsSort: PropTypes.func.isRequired,
+}
+
+export default ModalList

package/src/hoc/diy_table_x/components/modal_selector.js

@@ -1,56 +1,56 @@
-import React from 'react'
-import _ from 'lodash'
-import { Checkbox, Flex } from '@gmfe/react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
-const Item = styled.div`
-  width: 25%;
-  padding: 5px 0;
-`
-
-const ModalSelector = ({ cols, onColsChange, diyGroupSorting }) => {
-  const colGroup = _.groupBy(cols, 'diyGroupName')
-
-  return (
-    <div>
-      {_.map(diyGroupSorting, (groupName) => {
-        const cols = colGroup[groupName]
-        return (
-          <div key={groupName}>
-            <div className='gm-margin-tb-5'>{groupName}</div>
-            <Flex wrap>
-              {_.map(cols, (item) => {
-                const { show, Header, diyItemText, diyEnable, key } = item
-                const text = diyItemText || Header
-
-                return (
-                  <Item key={key}>
-                    <Checkbox
-                      value={key}
-                      disabled={!diyEnable} // 不能编辑的字段,disable
-                      checked={show}
-                      onChange={() => {
-                        onColsChange(key, show)
-                      }}
-                    >
-                      {text}
-                    </Checkbox>
-                  </Item>
-                )
-              })}
-            </Flex>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-ModalSelector.propTypes = {
-  cols: PropTypes.array.isRequired,
-  diyGroupSorting: PropTypes.array.isRequired,
-  onColsChange: PropTypes.func.isRequired,
-}
-
-export default ModalSelector
+import React from 'react'
+import _ from 'lodash'
+import { Checkbox, Flex } from '@gmfe/react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+const Item = styled.div`
+  width: 25%;
+  padding: 5px 0;
+`
+
+const ModalSelector = ({ cols, onColsChange, diyGroupSorting }) => {
+  const colGroup = _.groupBy(cols, 'diyGroupName')
+
+  return (
+    <div>
+      {_.map(diyGroupSorting, (groupName) => {
+        const cols = colGroup[groupName]
+        return (
+          <div key={groupName}>
+            <div className='gm-margin-tb-5'>{groupName}</div>
+            <Flex wrap>
+              {_.map(cols, (item) => {
+                const { show, Header, diyItemText, diyEnable, key } = item
+                const text = diyItemText || Header
+
+                return (
+                  <Item key={key}>
+                    <Checkbox
+                      value={key}
+                      disabled={!diyEnable} // 不能编辑的字段,disable
+                      checked={show}
+                      onChange={() => {
+                        onColsChange(key, show)
+                      }}
+                    >
+                      {text}
+                    </Checkbox>
+                  </Item>
+                )
+              })}
+            </Flex>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+ModalSelector.propTypes = {
+  cols: PropTypes.array.isRequired,
+  diyGroupSorting: PropTypes.array.isRequired,
+  onColsChange: PropTypes.func.isRequired,
+}
+
+export default ModalSelector