Skip to content

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

temp

parent 49d5daeb
Hide whitespace changes
Inline Side-by-side
Showing with 378 additions and 302 deletions
components/apolloTable/component/DragSorted.tsx 0 → 100644
View file @ add74c78
import React, { useCallback } from 'react';
import { Draggable } from 'react-beautiful-dnd';
const DragSorted = (props) => {
// using useCallback is optional
const onBeforeCapture = useCallback(() => {}, []);
const onBeforeDragStart = useCallback(() => {}, []);
const onDragStart = useCallback(() => {
debugger;
}, []);
const onDragUpdate = useCallback(() => {}, []);
const onDragEnd = useCallback(() => {}, []);
return (
<Draggable draggableId="draggable-1" index={0}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{props.children}
</div>
)}
</Draggable>
);
};
export default DragSorted;
components/apolloTable/component/Table.tsx
View file @ add74c78
...@@ -2,6 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import classNames from 'classnames'; 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 { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized'; import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
import { Resizable, ResizableBox } from 'react-resizable'; import { Resizable, ResizableBox } from 'react-resizable';
import _ from 'lodash'; import _ from 'lodash';
...@@ -11,6 +12,7 @@ import { TableProps, TableState, ColumnProps, RowProps } from './interface'; ...@@ -11,6 +12,7 @@ import { TableProps, TableState, ColumnProps, RowProps } from './interface';
import Column from './Column'; import Column from './Column';
import Cell from './Cell'; import Cell from './Cell';
import LeftDragFixed from './DragFixed'; import LeftDragFixed from './DragFixed';
import DragSorted from './DragSorted';
import { getMergeClassName, getMergeStyle } from '../utils/utils'; import { getMergeClassName, getMergeStyle } from '../utils/utils';
import { Consumer } from './context'; import { Consumer } from './context';
...@@ -302,38 +304,40 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -302,38 +304,40 @@ export default class AirTable extends Component<TableProps, TableState> {
} = showColumns[columnIndex]; } = showColumns[columnIndex];
return ( return (
<div className={styles.headerCell} key={key} style={style}> <div className={styles.headerCell} key={key} style={style}>
<ResizableBox <DragSorted>
width={style.width} <ResizableBox
handle={ width={style.width}
<span handle={
className={styles.handleWidth} <span
onClick={(e) => { className={styles.handleWidth}
e.stopPropagation(); onClick={(e) => {
}} e.stopPropagation();
}}
/>
}
minConstraints={[100, 100]}
onResize={this.onResizeWidth}
onResizeStart={this.onResizeWidthStart}
onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
draggableOpts={{ enableUserSelectHack: false }}
>
<Column
columnType={String(columnType)}
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}
/> />
} </ResizableBox>
minConstraints={[100, 100]} </DragSorted>
onResize={this.onResizeWidth}
onResizeStart={this.onResizeWidthStart}
onResizeStop={this.onResizeWidthStop.bind(this, columnName)}
draggableOpts={{ enableUserSelectHack: false }}
>
<Column
columnType={String(columnType)}
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}
/>
</ResizableBox>
</div> </div>
); );
}; };
...@@ -470,300 +474,344 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -470,300 +474,344 @@ export default class AirTable extends Component<TableProps, TableState> {
<ScrollSync> <ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => { {({ onScroll, scrollLeft, scrollTop }: any) => {
return ( return (
<div <DragDropContext>
className={ <Droppable droppableId="droppable-1" type="PERSON">
this.props.onScroll {(provided, snapshot) => (
? classNames(styles.tableContainer, styles.scroll) <div
: styles.tableContainer ref={provided.innerRef}
} style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
style={{ {...provided.droppableProps}
paddingRight: this.props.onScroll ? paddingRight : 0, >
}}
id="tableContainer"
ref={(dom) => {
this.tableContainer = dom;
}}
>
{totalWidth > tableWidth && leftCount > 0 && (
<div
className={styles.leftSideContainer}
style={{
width: `${leftWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`,
}}
>
{
// 左侧表头
<div <div
className={styles.leftSideHeaderContainer} className={
this.props.onScroll
? classNames(styles.tableContainer, styles.scroll)
: styles.tableContainer
}
style={{ style={{
left: 0, paddingRight: this.props.onScroll ? paddingRight : 0,
}} }}
> id="tableContainer"
<Grid ref={(dom) => {
ref={(dom: any) => { this.tableContainer = dom;
this.grid1 = dom;
}}
className={styles.headerGrid}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: leftColumns,
})}
columnCount={leftCount}
width={leftWidth}
rowHeight={headerHeight}
rowCount={1}
height={headerHeight}
cellRenderer={this.renderHeaderCell.bind(this, {
showColumns: leftColumns,
})}
/>
</div>
}
{
// 左侧固定列
<div
className={styles.leftSideGridContainer}
style={{
left: 0,
top: headerHeight,
}} }}
> >
<Grid {totalWidth > tableWidth && leftCount > 0 && (
ref={(dom: any) => { <div
this.grid2 = dom; className={styles.leftSideContainer}
}} style={{
className={styles.sideGrid} width: `${leftWidth}px`,
overscanRowCount={overscanRowCount} height: `${totalHeight -
cellRenderer={this.renderBodyCell.bind(this, { scrollbarWidth +
showColumns: leftColumns, headerHeight}px`,
showData: leftData, }}
position: 'left', >
})} {
columnWidth={this.getColumnWidth.bind(this, { // 左侧表头
columns: showColumns, <div
showColumns: leftColumns, className={styles.leftSideHeaderContainer}
})} style={{
onScroll={(...arg: Array<Object>) => { left: 0,
onScroll({ scrollTop: arg[0].scrollTop }); }}
this.onScroll(arg[0]); >
}} <Grid
columnCount={leftCount} ref={(dom: any) => {
width={leftWidth + scrollbarWidth} this.grid1 = dom;
rowHeight={rowHeight} }}
rowCount={rowCount} className={styles.headerGrid}
height={totalHeight - scrollbarWidth} columnWidth={this.getColumnWidth.bind(this, {
scrollTop={scrollTop} columns: showColumns,
/> showColumns: leftColumns,
</div> })}
} columnCount={leftCount}
</div> width={leftWidth}
)} rowHeight={headerHeight}
{canFixed && ( rowCount={1}
<LeftDragFixed height={headerHeight}
initLeft={leftWidth} cellRenderer={this.renderHeaderCell.bind(this, {
initTop={headerHeight} showColumns: leftColumns,
tableWidth={tableWidth} })}
showColumns={showColumns} />
columnWidth={columnWidth} </div>
columns={columns} }
onResizeStart={this.onResizeStartLeftDragFixed} {
onResizeStop={this.onResizeStopLeftDragFixed} // 左侧固定列
/> <div
)} className={styles.leftSideGridContainer}
<div className={styles.centerContainer}> style={{
<AutoSizer onResize={this.onResize}> left: 0,
{({ width, height }: any) => { top: headerHeight,
return (
<div>
{
// 中部表头
<div
style={{
backgroundColor: 'rgba(246, 246, 246, 1)',
height: headerHeight,
width,
}}
>
<Grid
ref={(dom: any) => {
this.grid3 = dom;
}} }}
className={styles.headerGrid} >
overscanColumnCount={overscanColumnCount}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns,
})}
columnCount={columnCount}
width={width}
rowHeight={headerHeight}
rowCount={1}
height={headerHeight}
scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell.bind(this, {
showColumns,
})}
/>
</div>
}
{
// 中部内容
<div
style={{
height: totalHeight,
// height: height - headerHeight,
// minHeight:
// !dataSource || dataSource.length === 0
// ? '300px'
// : 'auto',
width: tableWidth,
}}
>
{rowCount > 0 ? (
<Grid <Grid
ref={(dom: any) => { ref={(dom: any) => {
this.grid4 = dom; this.grid2 = dom;
}} }}
className={styles.centerGrid} className={styles.sideGrid}
overscanColumnCount={overscanColumnCount}
overscanRowCount={overscanRowCount} overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, {
showColumns: leftColumns,
showData: leftData,
position: 'left',
})}
columnWidth={this.getColumnWidth.bind(this, { columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns, columns: showColumns,
showColumns, showColumns: leftColumns,
})} })}
columnCount={columnCount}
width={realWidth}
rowHeight={rowHeight}
rowCount={rowCount}
onScroll={(...arg: Array<Object>) => { onScroll={(...arg: Array<Object>) => {
onScroll(...arg); onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]); this.onScroll(arg[0]);
}} }}
columnCount={leftCount}
width={leftWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
scrollTop={scrollTop} scrollTop={scrollTop}
height={totalHeight} />
</div>
}
</div>
)}
{canFixed && (
<LeftDragFixed
initLeft={leftWidth}
initTop={headerHeight}
tableWidth={tableWidth}
showColumns={showColumns}
columnWidth={columnWidth}
columns={columns}
onResizeStart={this.onResizeStartLeftDragFixed}
onResizeStop={this.onResizeStopLeftDragFixed}
/>
)}
<div className={styles.centerContainer}>
<AutoSizer onResize={this.onResize}>
{({ width, height }: any) => {
return (
<div>
{
// 中部表头
<div
style={{
backgroundColor:
'rgba(246, 246, 246, 1)',
height: headerHeight,
width,
}}
>
<Grid
ref={(dom: any) => {
this.grid3 = dom;
}}
className={styles.headerGrid}
overscanColumnCount={
overscanColumnCount
}
columnWidth={this.getColumnWidth.bind(
this,
{
columns: showColumns,
showColumns,
},
)}
columnCount={columnCount}
width={width}
rowHeight={headerHeight}
rowCount={1}
height={headerHeight}
scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell.bind(
this,
{
showColumns,
},
)}
/>
</div>
}
{
// 中部内容
<div
style={{
height: totalHeight,
// height: height - headerHeight,
// minHeight:
// !dataSource || dataSource.length === 0
// ? '300px'
// : 'auto',
width: tableWidth,
}}
>
{rowCount > 0 ? (
<Grid
ref={(dom: any) => {
this.grid4 = dom;
}}
className={styles.centerGrid}
overscanColumnCount={
overscanColumnCount
}
overscanRowCount={
overscanRowCount
}
columnWidth={this.getColumnWidth.bind(
this,
{
columns: showColumns,
showColumns,
},
)}
columnCount={columnCount}
width={realWidth}
rowHeight={rowHeight}
rowCount={rowCount}
onScroll={(
...arg: Array<Object>
) => {
onScroll(...arg);
this.onScroll(arg[0]);
}}
scrollTop={scrollTop}
height={totalHeight}
cellRenderer={this.renderBodyCell.bind(
this,
{
showColumns,
showData,
position: 'center',
},
)}
/>
) : (
columnCount > 0 &&
!loading && (
<Empty
className={
styles.defaultEmpty
}
description={
noDataPlaceholder ||
locale.empty
}
/>
)
)}
</div>
}
</div>
);
}}
</AutoSizer>
</div>
{totalWidth > tableWidth && rightCount > 0 && (
<div
className={styles.rightSideContainer}
style={{
width: `${rightWidth}px`,
height: `${totalHeight -
scrollbarWidth +
headerHeight}px`,
}}
>
{
// 右侧表头
<div
className={styles.rightSideHeaderContainer}
style={{
right: 0,
}}
>
<Grid
ref={(dom: any) => {
this.grid5 = dom;
}}
className={styles.headerGrid}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: rightColumns,
})}
columnCount={rightCount}
width={rightWidth}
rowHeight={headerHeight}
rowCount={1}
height={headerHeight}
cellRenderer={this.renderHeaderCell.bind(this, {
showColumns: rightColumns,
position: 'right',
})}
/>
</div>
}
{
// 右侧固定列
<div
className={styles.rightSideGridContainer}
style={{
position: 'absolute',
right: 0,
top: headerHeight,
marginRight: -scrollbarWidth,
}}
>
<Grid
ref={(dom: any) => {
this.grid6 = dom;
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, { cellRenderer={this.renderBodyCell.bind(this, {
showColumns, showColumns: rightColumns,
showData, showData: rightData,
position: 'center', position: 'right',
})}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: rightColumns,
})} })}
onScroll={(...arg: Array<Object>) => {
onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]);
}}
columnCount={rightCount}
width={rightWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
scrollTop={scrollTop}
/> />
) : ( </div>
columnCount > 0 && }
!loading && ( </div>
<Empty )}
className={styles.defaultEmpty} <div className={styles.fillHandleWrapper} />
description={ <div
noDataPlaceholder || locale.empty className={styles.loading}
} style={{ top: `${totalHeight / 2}px` }}
/> >
) {loading && (loadComp ? loadComp : <Spin />)}
)}
</div>
}
</div> </div>
); <div
}} className={styles.widthHandleWrapper}
</AutoSizer> id="dividerWrap"
</div> ref={(dom) => {
{totalWidth > tableWidth && rightCount > 0 && ( this.widthHandleWrapper = dom;
<div
className={styles.rightSideContainer}
style={{
width: `${rightWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`,
}}
>
{
// 右侧表头
<div
className={styles.rightSideHeaderContainer}
style={{
right: 0,
}}
>
<Grid
ref={(dom: any) => {
this.grid5 = dom;
}} }}
className={styles.headerGrid} >
columnWidth={this.getColumnWidth.bind(this, { <div
columns: showColumns, className={styles.widthHandle}
showColumns: rightColumns, id="divider"
})} ref={(dom) => {
columnCount={rightCount} this.widthHandle = dom;
width={rightWidth} }}
rowHeight={headerHeight} />
rowCount={1} </div>
height={headerHeight}
cellRenderer={this.renderHeaderCell.bind(this, {
showColumns: rightColumns,
position: 'right',
})}
/>
</div>
}
{
// 右侧固定列
<div
className={styles.rightSideGridContainer}
style={{
position: 'absolute',
right: 0,
top: headerHeight,
marginRight: -scrollbarWidth,
}}
>
<Grid
ref={(dom: any) => {
this.grid6 = dom;
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, {
showColumns: rightColumns,
showData: rightData,
position: 'right',
})}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: rightColumns,
})}
onScroll={(...arg: Array<Object>) => {
onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]);
}}
columnCount={rightCount}
width={rightWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
scrollTop={scrollTop}
/>
</div> </div>
} {provided.placeholder}
</div> </div>
)} )}
<div className={styles.fillHandleWrapper} /> </Droppable>
<div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}> </DragDropContext>
{loading && (loadComp ? loadComp : <Spin />)}
</div>
<div
className={styles.widthHandleWrapper}
id="dividerWrap"
ref={(dom) => {
this.widthHandleWrapper = dom;
}}
>
<div
className={styles.widthHandle}
id="divider"
ref={(dom) => {
this.widthHandle = dom;
}}
/>
</div>
</div>
); );
}} }}
</ScrollSync> </ScrollSync>
......
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