Skip to content

S
submodule
Commit 6f2e5aeb authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

add react-resizeable

parent 34441bae
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 28 deletions
components/apolloTable/component/Table.less
View file @ 6f2e5aeb
...@@ -107,3 +107,13 @@ ...@@ -107,3 +107,13 @@
.defaultEmpty { .defaultEmpty {
padding-top: 100px; padding-top: 100px;
} }
.handleWidth{
position: absolute;
width: 10px;
height: 100%;
bottom: 0;
right: -5px;
cursor: col-resize;
z-index: 1;
background: #ececec;
}
components/apolloTable/component/Table.tsx
View file @ 6f2e5aeb
...@@ -3,6 +3,7 @@ import classNames from 'classnames'; ...@@ -3,6 +3,7 @@ import classNames from 'classnames';
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import { Empty, Spin } from 'antd'; import { Empty, Spin } from 'antd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized'; import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
import { Resizable } from 'react-resizable';
import _ from 'lodash'; import _ from 'lodash';
import scrollbarSize from 'dom-helpers/scrollbarSize'; import scrollbarSize from 'dom-helpers/scrollbarSize';
import styles from './Table.less'; import styles from './Table.less';
...@@ -215,6 +216,31 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -215,6 +216,31 @@ export default class AirTable extends Component<TableProps, TableState> {
}); });
}; };
// 列伸缩回调
onResizeWidth = (columnName: string, e, { size }) => {
const { columns } = this.state;
const newColumns: any = [];
columns.map((item) => {
if (item.columnName === columnName) {
item.width = size.width;
}
newColumns.push(item);
});
this.setState(
{
columns: newColumns,
},
() => {
this.grid1 && this.grid1.recomputeGridSize();
this.grid2 && this.grid2.recomputeGridSize();
this.grid3 && this.grid3.recomputeGridSize();
this.grid4 && this.grid4.recomputeGridSize();
this.grid5 && this.grid5.recomputeGridSize();
this.grid6 && this.grid6.recomputeGridSize();
},
);
};
// 渲染表头 // 渲染表头
renderHeaderCell = ( renderHeaderCell = (
{ showColumns, position }: { showColumns: ColumnProps[]; position?: string }, { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
...@@ -233,23 +259,37 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -233,23 +259,37 @@ export default class AirTable extends Component<TableProps, TableState> {
requiredFlag, requiredFlag,
} = showColumns[columnIndex]; } = showColumns[columnIndex];
return ( return (
<div className={styles.headerCell} key={key} style={style}> <Resizable
<Column width={style.width}
columnType={String(columnType)} handle={
columnName={columnName} <span
columnChsName={columnChsName} className={styles.handleWidth}
columnAttrObj={columnAttrObj} onClick={(e) => {
sortFlag={sortFlag} e.stopPropagation();
sortConfig={sortConfig} }}
columnIndex={columnIndex} />
showIndex={position === 'right' ? false : showIndex} }
questionText={questionText} onResize={this.onResizeWidth.bind(this, columnName)}
rowSelection={position === 'right' ? false : rowSelection} draggableOpts={{ enableUserSelectHack: false }}
dataSource={dataSource} >
icon={icon} <div className={styles.headerCell} key={key} style={style}>
required={requiredFlag} <Column
/> columnType={String(columnType)}
</div> columnName={columnName}
columnChsName={columnChsName}
columnAttrObj={columnAttrObj}
sortFlag={sortFlag}
sortConfig={sortConfig}
columnIndex={columnIndex}
showIndex={position === 'right' ? false : showIndex}
questionText={questionText}
rowSelection={position === 'right' ? false : rowSelection}
dataSource={dataSource}
icon={icon}
required={requiredFlag}
/>
</div>
</Resizable>
); );
}; };
...@@ -537,16 +577,16 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -537,16 +577,16 @@ export default class AirTable extends Component<TableProps, TableState> {
})} })}
/> />
) : ( ) : (
columnCount > 0 && columnCount > 0 &&
!loading && ( !loading && (
<Empty <Empty
className={styles.defaultEmpty} className={styles.defaultEmpty}
description={ description={
noDataPlaceholder || locale.empty noDataPlaceholder || locale.empty
} }
/> />
) )
)} )}
</div> </div>
} }
</div> </div>
...@@ -628,7 +668,9 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -628,7 +668,9 @@ export default class AirTable extends Component<TableProps, TableState> {
</div> </div>
)} )}
<div className={styles.fillHandleWrapper} /> <div className={styles.fillHandleWrapper} />
<div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>{loading && (loadComp ? loadComp : <Spin />)}</div> <div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>
{loading && (loadComp ? loadComp : <Spin />)}
</div>
</div> </div>
); );
}} }}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment