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';
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,38 +304,40 @@ export default class AirTable extends Component<TableProps, TableState> {
} = showColumns[columnIndex];
return (
<div className={styles.headerCell} key={key} style={style}>
<ResizableBox
width={style.width}
handle={
<span
className={styles.handleWidth}
onClick={(e) => {
e.stopPropagation();
}}
<DragSorted>
<ResizableBox
width={style.width}
handle={
<span
className={styles.handleWidth}
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}
/>
}
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>
</ResizableBox>
</DragSorted>
</div>
);
};
......@@ -470,300 +474,344 @@ export default class AirTable extends Component<TableProps, TableState> {
<ScrollSync>
{({ onScroll, scrollLeft, scrollTop }: any) => {
return (
<div
className={
this.props.onScroll
? classNames(styles.tableContainer, styles.scroll)
: styles.tableContainer
}
style={{
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`,
}}
>
{
// 左侧表头
<DragDropContext>
<Droppable droppableId="droppable-1" type="PERSON">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
{...provided.droppableProps}
>
<div
className={styles.leftSideHeaderContainer}
className={
this.props.onScroll
? classNames(styles.tableContainer, styles.scroll)
: styles.tableContainer
}
style={{
left: 0,
paddingRight: this.props.onScroll ? paddingRight : 0,
}}
>
<Grid
ref={(dom: any) => {
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,
id="tableContainer"
ref={(dom) => {
this.tableContainer = dom;
}}
>
<Grid
ref={(dom: any) => {
this.grid2 = dom;
}}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, {
showColumns: leftColumns,
showData: leftData,
position: 'left',
})}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns: leftColumns,
})}
onScroll={(...arg: Array<Object>) => {
onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]);
}}
columnCount={leftCount}
width={leftWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
scrollTop={scrollTop}
/>
</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;
{totalWidth > tableWidth && leftCount > 0 && (
<div
className={styles.leftSideContainer}
style={{
width: `${leftWidth}px`,
height: `${totalHeight -
scrollbarWidth +
headerHeight}px`,
}}
>
{
// 左侧表头
<div
className={styles.leftSideHeaderContainer}
style={{
left: 0,
}}
>
<Grid
ref={(dom: any) => {
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,
}}
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;
this.grid2 = dom;
}}
className={styles.centerGrid}
overscanColumnCount={overscanColumnCount}
className={styles.sideGrid}
overscanRowCount={overscanRowCount}
cellRenderer={this.renderBodyCell.bind(this, {
showColumns: leftColumns,
showData: leftData,
position: 'left',
})}
columnWidth={this.getColumnWidth.bind(this, {
columns: showColumns,
showColumns,
showColumns: leftColumns,
})}
columnCount={columnCount}
width={realWidth}
rowHeight={rowHeight}
rowCount={rowCount}
onScroll={(...arg: Array<Object>) => {
onScroll(...arg);
onScroll({ scrollTop: arg[0].scrollTop });
this.onScroll(arg[0]);
}}
columnCount={leftCount}
width={leftWidth + scrollbarWidth}
rowHeight={rowHeight}
rowCount={rowCount}
height={totalHeight - scrollbarWidth}
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, {
showColumns,
showData,
position: 'center',
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}
/>
) : (
columnCount > 0 &&
!loading && (
<Empty
className={styles.defaultEmpty}
description={
noDataPlaceholder || locale.empty
}
/>
)
)}
</div>
}
</div>
}
</div>
)}
<div className={styles.fillHandleWrapper} />
<div
className={styles.loading}
style={{ top: `${totalHeight / 2}px` }}
>
{loading && (loadComp ? loadComp : <Spin />)}
</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;
<div
className={styles.widthHandleWrapper}
id="dividerWrap"
ref={(dom) => {
this.widthHandleWrapper = 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, {
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
className={styles.widthHandle}
id="divider"
ref={(dom) => {
this.widthHandle = dom;
}}
/>
</div>
</div>
}
</div>
)}
<div className={styles.fillHandleWrapper} />
<div className={styles.loading} style={{ top: `${totalHeight / 2}px` }}>
{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>
{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