[feat] add test case and readme

uxcore · Mar 12, 2019 · 7b70277 · 7b70277
1 parent 37ef425
commit 7b70277
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -133,7 +133,7 @@ $ npm start
 |defaultEditable     |boolean             |optional  |false       | 10.4.16   |默认开启行编辑模式|
 |useListActionBar    |boolean             |optional  |false       | 10.5.0    |新版listActionBar开关，actionBar配置，详细[见此](#actionbar)|
 |getTooltipContainer |function()          |optional  |null        | 10.5.2    |单元格编辑状态下，tooltip位置可控
-|columnResizeable    |boolean             |optional  |false       | 10.5.3    |表格列可拖拽
+|columnResizeable    |boolean             |optional  |true        | 10.5.3    |表格列可拖拽
 
 
 ### 折叠展开专用

diff --git a/src/Header/HeaderCell.jsx b/src/Header/HeaderCell.jsx
@@ -239,18 +239,32 @@ class HeaderCell extends React.Component {
     }
     return null;
   }
-  onDrag = (e, node, column) => {
-    const changeWidth = node.lastX - this.state.lastColumnWidth;
-    this.props.handleColumnResize(e, changeWidth, column, node.node)
+  onDrag = (e, data, column) => {
+    const changeWidth = data.lastX - this.state.lastColumnWidth;
+    // console.log(data.lastX, this.state.lastColumnWidth, changeWidth)
+
+    this.props.handleColumnResize(e, changeWidth, column, data.node)
     this.setState({
-      lastColumnWidth: node.lastX
+      lastColumnWidth: data.lastX
     })
   }
 
+  needResize(column) {
+    const { columnResizeable, last } = this.props
+    return columnResizeable
+      && column.type !== 'treeIcon'
+      && column.type !== 'checkboxSelector'
+      && column.type !== 'radioSelector'
+      // && !column.fixed
+      && !column.rightFixed
+      && !column.hidden
+      && !last
+  }
+
   render() {
     const me = this;
     const {
-      renderModel, prefixCls, column, index, hasGroup, last, tablePrefixCls, columnResizeable
+      renderModel, prefixCls, column, index, hasGroup, last, tablePrefixCls
     } = me.props;
     const rowSelectorInTreeMode = (['checkboxSelector', 'radioSelector'].indexOf(column.type) !== -1)
       && (renderModel === 'tree');
@@ -321,19 +335,13 @@ class HeaderCell extends React.Component {
         {me.renderFilterIcon(column)}
         <MessageIcon message={column.message} prefixCls={`${prefixCls}-msg`} />
         {
-          columnResizeable
-          && column.type !== 'treeIcon'
-          && column.type !== 'checkboxSelector'
-          && column.type !== 'radioSelector'
-          // && !column.fixed
-          && !column.rightFixed
-          && !column.hidden
-          && !last
+
+          this.needResize(column)
             ? <Draggable
                 axis="x"
                 onDrag={(e, dragNode) => {this.onDrag(e, dragNode, column)}}
               >
-              <div style={{height: '50px', right: '0', width: '10px', background: 'rgba(0,0,0,0)', cursor: 'ew-resize', position: 'absolute', zIndex: 99}} />
+              <span className={`${tablePrefixCls}-cell-resize-icon`} style={{width: '10px', right: '0'}} />
             </Draggable>
             : null }
       </div>

diff --git a/src/prop.js b/src/prop.js
@@ -66,7 +66,7 @@ const defaultProps = {
   showColumnPickerCheckAll: false,
   defaultEditable: false,
   getTooltipContainer: null,
-  columnResizeable: false,
+  columnResizeable: true,
 };
 
 // http://facebook.github.io/react/docs/reusable-components.html

diff --git a/src/style/Header.less b/src/style/Header.less
@@ -29,6 +29,14 @@
   margin-left: 4px;
   vertical-align: -1px;
 }
+.@{__tablePrefixCls}-cell-resize-icon {
+  display: inline-block;
+  height: 50px;
+  background: rgba(0,0,0,0);
+  cursor: ew-resize;
+  position: absolute;
+  z-index: 99;
+}
 
 .@{__tablePrefixCls}-header-item-filter-dropdown {
   box-shadow: @box-shadow-1;