From ce24a1ce151afefab118fb4afae992aa423e00cd Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Thu, 6 Aug 2020 15:45:46 +0800 Subject: [PATCH] update --- .../apolloTable/component/DragResized.tsx | 61 ++++++++++++++ .../apolloTable/component/DragSorted.less | 8 +- .../apolloTable/component/DragSorted.tsx | 21 +++-- components/apolloTable/component/Table.tsx | 80 +++++-------------- components/apolloTable/component/index.tsx | 2 + .../apolloTable/component/interface.tsx | 2 +- 6 files changed, 100 insertions(+), 74 deletions(-) create mode 100644 components/apolloTable/component/DragResized.tsx diff --git a/components/apolloTable/component/DragResized.tsx b/components/apolloTable/component/DragResized.tsx new file mode 100644 index 0000000..d556dd4 --- /dev/null +++ b/components/apolloTable/component/DragResized.tsx @@ -0,0 +1,61 @@ +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 ( + { + e.stopPropagation(); + }} + /> + } + minConstraints={[100, 100]} + onResizeStart={onResizeWidthStart} + onResize={onResizeWidth} + onResizeStop={onResizeWidthStop} + draggableOpts={{ enableUserSelectHack: false }} + > + {props.children} + + ); +}; +export default DragResized; diff --git a/components/apolloTable/component/DragSorted.less b/components/apolloTable/component/DragSorted.less index 46728e6..051f152 100644 --- a/components/apolloTable/component/DragSorted.less +++ b/components/apolloTable/component/DragSorted.less @@ -1,5 +1,9 @@ @import '../common'; -.draggableDiv{ +.sortedWrap { + width: 100%; + height: 100%; +} +.draggableDiv { cursor: move; -} \ No newline at end of file +} diff --git a/components/apolloTable/component/DragSorted.tsx b/components/apolloTable/component/DragSorted.tsx index 2c745f1..0c4989c 100644 --- a/components/apolloTable/component/DragSorted.tsx +++ b/components/apolloTable/component/DragSorted.tsx @@ -1,16 +1,15 @@ 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 (
{ grid5: any; grid6: any; - tableContainer: any; - widthHandleWrapper: any; - widthHandle: any; memoizeData: Function; @@ -105,7 +102,7 @@ export default class AirTable extends Component { // 获取表格显示列 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 { } }; - // 列伸缩回调 - 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 { { 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 { orderNo, } = showColumns[columnIndex]; return ( - - { - e.stopPropagation(); - }} - /> - } - minConstraints={[100, 100]} - onResize={this.onResizeWidth} - onResizeStart={this.onResizeWidthStart} - onResizeStop={this.onResizeWidthStop.bind(this, columnName)} - draggableOpts={{ enableUserSelectHack: false }} + { icon={icon} required={requiredFlag} /> - - + + ); }; @@ -560,9 +529,6 @@ export default class AirTable extends Component { paddingRight: this.props.onScroll ? paddingRight : 0, }} id={`apolloTable_${tableId}`} - ref={(dom) => { - this.tableContainer = dom; - }} > {totalWidth > tableWidth && leftCount > 0 && (
{
{ - this.widthHandleWrapper = dom; - }} >
{ - this.widthHandle = dom; - }} />
diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx index 9079b2a..71571fb 100644 --- a/components/apolloTable/component/index.tsx +++ b/components/apolloTable/component/index.tsx @@ -88,6 +88,7 @@ class AirTable extends React.Component { onDragSorted, onEmitMsg, tableId, + onDragFixed, } = this.props; const sortConfig = operateConfig && operateConfig.menusGroup @@ -149,6 +150,7 @@ class AirTable extends React.Component { onDragSorted={onDragSorted} onEmitMsg={onEmitMsg} tableId={tableId} + onDragFixed={onDragFixed} />
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index fe2c768..f6ecb9d 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -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 {} -- 2.21.0