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'; ...@@ -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,6 +304,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -302,6 +304,7 @@ 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}>
<DragSorted>
<ResizableBox <ResizableBox
width={style.width} width={style.width}
handle={ handle={
...@@ -334,6 +337,7 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -334,6 +337,7 @@ export default class AirTable extends Component<TableProps, TableState> {
required={requiredFlag} required={requiredFlag}
/> />
</ResizableBox> </ResizableBox>
</DragSorted>
</div> </div>
); );
}; };
...@@ -470,6 +474,14 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -470,6 +474,14 @@ export default class AirTable extends Component<TableProps, TableState> {
<ScrollSync> <ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => { {({ onScroll, scrollLeft, scrollTop }: any) => {
return ( return (
<DragDropContext>
<Droppable droppableId="droppable-1" type="PERSON">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
{...provided.droppableProps}
>
<div <div
className={ className={
this.props.onScroll this.props.onScroll
...@@ -489,7 +501,9 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -489,7 +501,9 @@ export default class AirTable extends Component<TableProps, TableState> {
className={styles.leftSideContainer} className={styles.leftSideContainer}
style={{ style={{
width: `${leftWidth}px`, 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> { ...@@ -580,7 +594,8 @@ export default class AirTable extends Component<TableProps, TableState> {
// 中部表头 // 中部表头
<div <div
style={{ style={{
backgroundColor: 'rgba(246, 246, 246, 1)', backgroundColor:
'rgba(246, 246, 246, 1)',
height: headerHeight, height: headerHeight,
width, width,
}} }}
...@@ -590,20 +605,28 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -590,20 +605,28 @@ export default class AirTable extends Component<TableProps, TableState> {
this.grid3 = dom; this.grid3 = dom;
}} }}
className={styles.headerGrid} className={styles.headerGrid}
overscanColumnCount={overscanColumnCount} overscanColumnCount={
columnWidth={this.getColumnWidth.bind(this, { overscanColumnCount
}
columnWidth={this.getColumnWidth.bind(
this,
{
columns: showColumns, columns: showColumns,
showColumns, showColumns,
})} },
)}
columnCount={columnCount} columnCount={columnCount}
width={width} width={width}
rowHeight={headerHeight} rowHeight={headerHeight}
rowCount={1} rowCount={1}
height={headerHeight} height={headerHeight}
scrollLeft={scrollLeft} scrollLeft={scrollLeft}
cellRenderer={this.renderHeaderCell.bind(this, { cellRenderer={this.renderHeaderCell.bind(
this,
{
showColumns, showColumns,
})} },
)}
/> />
</div> </div>
} }
...@@ -626,35 +649,50 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -626,35 +649,50 @@ export default class AirTable extends Component<TableProps, TableState> {
this.grid4 = dom; this.grid4 = dom;
}} }}
className={styles.centerGrid} className={styles.centerGrid}
overscanColumnCount={overscanColumnCount} overscanColumnCount={
overscanRowCount={overscanRowCount} overscanColumnCount
columnWidth={this.getColumnWidth.bind(this, { }
overscanRowCount={
overscanRowCount
}
columnWidth={this.getColumnWidth.bind(
this,
{
columns: showColumns, columns: showColumns,
showColumns, showColumns,
})} },
)}
columnCount={columnCount} columnCount={columnCount}
width={realWidth} width={realWidth}
rowHeight={rowHeight} rowHeight={rowHeight}
rowCount={rowCount} rowCount={rowCount}
onScroll={(...arg: Array<Object>) => { onScroll={(
...arg: Array<Object>
) => {
onScroll(...arg); onScroll(...arg);
this.onScroll(arg[0]); this.onScroll(arg[0]);
}} }}
scrollTop={scrollTop} scrollTop={scrollTop}
height={totalHeight} height={totalHeight}
cellRenderer={this.renderBodyCell.bind(this, { cellRenderer={this.renderBodyCell.bind(
this,
{
showColumns, showColumns,
showData, showData,
position: 'center', position: 'center',
})} },
)}
/> />
) : ( ) : (
columnCount > 0 && columnCount > 0 &&
!loading && ( !loading && (
<Empty <Empty
className={styles.defaultEmpty} className={
styles.defaultEmpty
}
description={ description={
noDataPlaceholder || locale.empty noDataPlaceholder ||
locale.empty
} }
/> />
) )
...@@ -671,7 +709,9 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -671,7 +709,9 @@ export default class AirTable extends Component<TableProps, TableState> {
className={styles.rightSideContainer} className={styles.rightSideContainer}
style={{ style={{
width: `${rightWidth}px`, 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> { ...@@ -745,7 +785,10 @@ 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` }}> <div
className={styles.loading}
style={{ top: `${totalHeight / 2}px` }}
>
{loading && (loadComp ? loadComp : <Spin />)} {loading && (loadComp ? loadComp : <Spin />)}
</div> </div>
<div <div
...@@ -764,6 +807,11 @@ export default class AirTable extends Component<TableProps, TableState> { ...@@ -764,6 +807,11 @@ export default class AirTable extends Component<TableProps, TableState> {
/> />
</div> </div>
</div> </div>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
); );
}} }}
</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