Skip to content

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

update

parent d6707733
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 74 deletions
components/apolloTable/component/DragResized.tsx 0 → 100644
View file @ ce24a1ce
import React from 'react';
import { ResizableBox } from 'react-resizable';
import styles from '@/submodule/components/apolloTable/component/Table.less';
const DragResized = (props: any) => {
const { style, columnName, onDragFixed, tableId, onResizeCb } = props;
// 表格
const container: any = document.querySelector(`#apolloTable_${tableId}`);
// 分割线wrap
const dividerWrap: any = document.querySelector('#dividerWrap');
// 分割线
const divider: any = document.querySelector('#divider');
// 列伸缩开始
const onResizeWidthStart = (e: any) => {
const { x } = container.getBoundingClientRect();
divider.style.left = `${e.x - x}px`;
dividerWrap.style.display = 'block';
};
// 列伸缩回调
const onResizeWidth = (e: any) => {
const { x } = container.getBoundingClientRect();
divider.style.left = `${e.x - x}px`;
};
// 列伸缩结束
const onResizeWidthStop = (e: any, { size }: { size: { width: number } }) => {
dividerWrap.style.display = 'none';
if (typeof onDragFixed === 'function') {
onDragFixed([{ columnName, width: size.width }]);
}
if (typeof onResizeCb === 'function') {
onResizeCb(columnName, size.width);
}
};
return (
<ResizableBox
style={style}
width={style.width}
height={style.height}
handle={
<span
className={styles.handleWidth}
onClick={(e) => {
e.stopPropagation();
}}
/>
}
minConstraints={[100, 100]}
onResizeStart={onResizeWidthStart}
onResize={onResizeWidth}
onResizeStop={onResizeWidthStop}
draggableOpts={{ enableUserSelectHack: false }}
>
{props.children}
</ResizableBox>
);
};
export default DragResized;
components/apolloTable/component/DragSorted.less
View file @ ce24a1ce
@import '../common';
.draggableDiv{
.sortedWrap {
width: 100%;
height: 100%;
}
.draggableDiv {
cursor: move;
}
\ No newline at end of file
}
components/apolloTable/component/DragSorted.tsx
View file @ ce24a1ce
import React, { useCallback, useRef } from 'react';
import classNames from 'classnames';
import s from './DragSorted.less';
const DragSorted = (props: any) => {
const {
className, style, columnName, orderNo, onDropFinish, onScroll, canDrag,
} = props;
const { className, columnName, orderNo, onDropFinish, onScroll, canDrag, tableId } = props;
// 长按计时器
const timer: any = useRef(null);
// 表格滚动计时器
const timerInterval: any = useRef(null);
// 表格
const container: any = document.querySelector('#tableContainer');
const container: any = document.querySelector(`#apolloTable_${tableId}`);
// 拖拽列时的影子div
const columnCopyDiv: any = document.querySelector('#columnCopyDiv');
// 分割线wrap
......@@ -27,7 +26,8 @@ const DragSorted = (props: any) => {
// 所有列
const draggableColumns = document.querySelectorAll('.draggableColumn');
const leftFixedHandleWrapRectX = (leftFixedHandleWrap && leftFixedHandleWrap.getBoundingClientRect().x) || 0;
const rightFixedHandleWrapRectX = (rightFixedHandleWrap && rightFixedHandleWrap.getBoundingClientRect().x) || tableRect.right;
const rightFixedHandleWrapRectX =
(rightFixedHandleWrap && rightFixedHandleWrap.getBoundingClientRect().x) || tableRect.right;
const columnCopyDivRect = columnCopyDiv.getBoundingClientRect();
const columnCopyDivWidth = columnCopyDivRect.width;
......@@ -44,10 +44,10 @@ const DragSorted = (props: any) => {
const domRect = dom.getBoundingClientRect();
// 当前节点在左侧固定列与右侧固定列之间有效
if (
domRect.x > leftFixedHandleWrapRectX
&& domRect.x < rightFixedHandleWrapRectX
&& columnCopyDivMid > domRect.x
&& columnCopyDivMid < domRect.x + domRect.width
domRect.x > leftFixedHandleWrapRectX &&
domRect.x < rightFixedHandleWrapRectX &&
columnCopyDivMid > domRect.x &&
columnCopyDivMid < domRect.x + domRect.width
) {
// 影子div中点在投放目标中
divider.style.left = `${domRect.x - tableRect.x}px`;
......@@ -185,8 +185,7 @@ const DragSorted = (props: any) => {
return (
<div
className={classNames('draggableColumn', className)}
style={style}
className={classNames('draggableColumn', s.sortedWrap, className)}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
data-column-name={columnName}
......
components/apolloTable/component/Table.tsx
View file @ ce24a1ce
......@@ -3,7 +3,6 @@ import classNames from 'classnames';
import memoizeOne from 'memoize-one';
import { Empty, Spin } from 'antd';
import { ScrollSync, Grid, AutoSizer } from 'react-virtualized';
import { Resizable, ResizableBox } from 'react-resizable';
import _ from 'lodash';
import scrollbarSize from 'dom-helpers/scrollbarSize';
import styles from './Table.less';
......@@ -13,6 +12,7 @@ import Cell from './Cell';
import LeftDragFixed from './DragFixed';
import RightDragFixed from './RightDragFixed';
import DragSorted from './DragSorted';
import DragResized from './DragResized';
import { getMergeClassName, getMergeStyle } from '../utils/utils';
import { Consumer } from './context';
......@@ -32,9 +32,6 @@ export default class AirTable extends Component<TableProps, TableState> {
grid5: any;
grid6: any;
tableContainer: any;
widthHandleWrapper: any;
widthHandle: any;
memoizeData: Function;
......@@ -105,7 +102,7 @@ export default class AirTable extends Component<TableProps, TableState> {
// 获取表格显示列
getShowColumns = (columns: ColumnProps[]) => {
return columns.filter((item) => {
return !!item.showStatus && (!item.hideScope || item.hideScope.indexOf('LIST') === -1);
return !item.hideScope || item.hideScope.indexOf('LIST') === -1;
});
};
......@@ -213,34 +210,16 @@ export default class AirTable extends Component<TableProps, TableState> {
}
};
// 列伸缩回调
onResizeWidth = (e) => {
const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0;
if (this.widthHandle) {
this.widthHandle.style.left = `${e.x - originLeft}px`;
}
};
// 列伸缩开始
onResizeWidthStart = (e) => {
const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0;
if (this.widthHandleWrapper && this.widthHandle) {
this.widthHandle.style.left = `${e.x - originLeft}px`;
this.widthHandleWrapper.style.display = 'block';
}
};
// 列伸缩结束
onResizeWidthStop = (columnName: string, e, { size }) => {
onResizeCb = (columnName: string, width: number) => {
const { columns } = this.state;
const newColumns: any = [];
columns.map((item) => {
if (item.columnName === columnName) {
item.width = size.width;
item.width = width;
}
newColumns.push(item);
});
if (this.widthHandleWrapper) {
this.widthHandleWrapper.style.display = 'none';
}
this.setState(
{
columns: newColumns,
......@@ -353,7 +332,7 @@ export default class AirTable extends Component<TableProps, TableState> {
{ columnIndex, key, style }: any,
) => {
if (showColumns.length === 0) return null;
const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted } = this.props;
const { sortConfig, showIndex, rowSelection, dataSource, onDragSorted, tableId, onDragFixed } = this.props;
const {
columnType = 1,
columnName,
......@@ -366,32 +345,22 @@ export default class AirTable extends Component<TableProps, TableState> {
orderNo,
} = showColumns[columnIndex];
return (
<DragSorted
<DragResized
columnName={columnName}
orderNo={orderNo}
onDropFinish={this.onDragSorted}
onScroll={this.onScrollHor}
className={styles.headerCell}
key={key}
style={style}
canDrag={!!onDragSorted}
onDragFixed={onDragFixed}
tableId={tableId}
onResizeCb={this.onResizeCb}
>
<ResizableBox
width={style.width}
height={style.height}
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 }}
<DragSorted
columnName={columnName}
orderNo={orderNo}
onDropFinish={this.onDragSorted}
onScroll={this.onScrollHor}
className={styles.headerCell}
key={key}
canDrag={!!onDragSorted}
tableId={tableId}
>
<Column
columnType={String(columnType)}
......@@ -408,8 +377,8 @@ export default class AirTable extends Component<TableProps, TableState> {
icon={icon}
required={requiredFlag}
/>
</ResizableBox>
</DragSorted>
</DragSorted>
</DragResized>
);
};
......@@ -560,9 +529,6 @@ export default class AirTable extends Component<TableProps, TableState> {
paddingRight: this.props.onScroll ? paddingRight : 0,
}}
id={`apolloTable_${tableId}`}
ref={(dom) => {
this.tableContainer = dom;
}}
>
{totalWidth > tableWidth && leftCount > 0 && (
<div
......@@ -842,16 +808,10 @@ export default class AirTable extends Component<TableProps, TableState> {
<div
className={styles.widthHandleWrapper}
id="dividerWrap"
ref={(dom) => {
this.widthHandleWrapper = dom;
}}
>
<div
className={styles.widthHandle}
id="divider"
ref={(dom) => {
this.widthHandle = dom;
}}
/>
</div>
<div id="columnCopyDiv" className={styles.columnCopyDiv} draggable={true} />
......
components/apolloTable/component/index.tsx
View file @ ce24a1ce
......@@ -88,6 +88,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
onDragSorted,
onEmitMsg,
tableId,
onDragFixed,
} = this.props;
const sortConfig = operateConfig
&& operateConfig.menusGroup
......@@ -149,6 +150,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
onDragSorted={onDragSorted}
onEmitMsg={onEmitMsg}
tableId={tableId}
onDragFixed={onDragFixed}
/>
</div>
</div>
......
components/apolloTable/component/interface.tsx
View file @ ce24a1ce
......@@ -77,6 +77,7 @@ export interface TableProps extends LoadConfigProps {
canSorted?: boolean;// 是否可以拖拽自定义列排序
canResized?: boolean;// 是否可以拖拽自定义列伸缩
onDragSorted?:Function;// 拖拽更改列排序回调
onDragFixed?:Function;// 拖拽更改列排序回调
onEmitMsg?: Function;
tableId?:string|number;// tableId
}
......@@ -96,7 +97,6 @@ export interface CommonProps extends TableProps {
showCondition?: boolean;
id?:string;
onEmitMsg?:Function;
tableId?:string|number;
}
export interface CommonState extends TableState {}
......
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