Skip to content

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

temp

parent 49d5daeb
Show 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';
import classNames from 'classnames';
import memoizeOne from 'memoize-one';
import { Empty, Spin } from 'antd';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
import { Resizable, ResizableBox } from 'react-resizable';
import _ from 'lodash';
......@@ -11,6 +12,7 @@ import { TableProps, TableState, ColumnProps, RowProps } from './interface';
import Column from './Column';
import Cell from './Cell';
import LeftDragFixed from './DragFixed';
import DragSorted from './DragSorted';
import { getMergeClassName, getMergeStyle } from '../utils/utils';
import { Consumer } from './context';
......@@ -302,6 +304,7 @@ export default class AirTable extends Component<TableProps, TableState> {
} = showColumns[columnIndex];
return (
<div className={styles.headerCell} key={key} style={style}>
<DragSorted>
<ResizableBox
width={style.width}
handle={
......@@ -334,6 +337,7 @@ export default class AirTable extends Component<TableProps, TableState> {
required={requiredFlag}
/>
</ResizableBox>
</DragSorted>
</div>
);
};
......@@ -470,6 +474,14 @@ export default class AirTable extends Component<TableProps, TableState> {
<ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => {
return (
<DragDropContext>
<Droppable droppableId="droppable-1" type="PERSON">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
{...provided.droppableProps}
>
<div
className={
this.props.onScroll
......@@ -489,7 +501,9 @@ export default class AirTable extends Component<TableProps, TableState> {
className={styles.leftSideContainer}
style={{
width: `${leftWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`,
height: `${totalHeight -
scrollbarWidth +
headerHeight}px`,
}}
>
{
......@@ -580,7 +594,8 @@ export default class AirTable extends Component<TableProps, TableState> {
// 中部表头
<div
style={{
backgroundColor: 'rgba(246, 246, 246, 1)',
backgroundColor:
'rgba(246, 246, 246, 1)',
height: headerHeight,
width,
}}
......@@ -590,20 +605,28 @@ export default class AirTable extends Component<TableProps, TableState> {
this.grid3 = dom;
}}
className={styles.headerGrid}
overscanColumnCount={overscanColumnCount}
columnWidth={this.getColumnWidth.bind(this, {
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, {
cellRenderer={this.renderHeaderCell.bind(
this,
{
showColumns,
})}
},
)}
/>
</div>
}
......@@ -626,35 +649,50 @@ export default class AirTable extends Component<TableProps, TableState> {
this.grid4 = dom;
}}
className={styles.centerGrid}
overscanColumnCount={overscanColumnCount}
overscanRowCount={overscanRowCount}
columnWidth={this.getColumnWidth.bind(this, {
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: Array<Object>
) => {
onScroll(...arg);
this.onScroll(arg[0]);
}}
scrollTop={scrollTop}
height={totalHeight}
cellRenderer={this.renderBodyCell.bind(this, {
cellRenderer={this.renderBodyCell.bind(
this,
{
showColumns,
showData,
position: 'center',
})}
},
)}
/>
) : (
columnCount > 0 &&
!loading && (
<Empty
className={styles.defaultEmpty}
className={
styles.defaultEmpty
}
description={
noDataPlaceholder || locale.empty
noDataPlaceholder ||
locale.empty
}
/>
)
......@@ -671,7 +709,9 @@ export default class AirTable extends Component<TableProps, TableState> {
className={styles.rightSideContainer}
style={{
width: `${rightWidth}px`,
height: `${totalHeight - scrollbarWidth + headerHeight}px`,
height: `${totalHeight -
scrollbarWidth +
headerHeight}px`,
}}
>
{
......@@ -745,7 +785,10 @@ export default class AirTable extends Component<TableProps, TableState> {
</div>
)}
<div className={styles.fillHandleWrapper} />
<div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>
<div
className={styles.loading}
style={{ top: `${totalHeight / 2}px` }}
>
{loading && (loadComp ? loadComp : <Spin />)}
</div>
<div
......@@ -764,6 +807,11 @@ export default class AirTable extends Component<TableProps, TableState> {
/>
</div>
</div>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
}}
</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