@arim-aisdc/public-components 0.0.14 → 0.0.16

package/dist/components/TableMax/TableBody/Row.d.ts

@@ -2,7 +2,7 @@ import { OnSelectChangeType } from "../type";
 import { Table } from '@tanstack/react-table';
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import './index.less';
-declare const Row: ({ table, tableId, row, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, reorderRow, tableContainerWidth, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, rowHeight, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, handleEditRowWhenDClick, canEditRowWhenDClick, theme, pinShadowVisible, dragBeforeStart, }: {
+declare const Row: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, reorderRow, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, rowHeight, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, handleEditRowWhenDClick, canEditRowWhenDClick, theme, pinShadowVisible, dragBeforeStart, }: {
     table: Table<any>;
     tableId: string;
     row: any;
@@ -10,7 +10,7 @@ declare const Row: ({ table, tableId, row, rowSelectedId, setRowSelectedId, sele
     setRowSelectedId?: Dispatch<SetStateAction<string | undefined>>;
     selectedRowChange?: (row: any) => void;
     onSelectChange?: OnSelectChangeType;
-    tableContainerWidth?: number;
+    tableBodyRef: any;
     canSelection?: boolean;
     selectionWithoutChecked?: boolean;
     reorderRow?: (targetRowIndex: any, draggedRowIndex: any) => void;

package/dist/components/TableMax/TableBody/Row.js

@@ -23,8 +23,9 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var initselectedIndex;
 var Row = function Row(_ref) {
-  var _row, _row2;
-  var table = _ref.table,
+  var _row, _row2, _tableBodyRef$current, _tableBodyRef$current2;
+  var tableBodyRef = _ref.tableBodyRef,
+    table = _ref.table,
     tableId = _ref.tableId,
     row = _ref.row,
     rowSelectedId = _ref.rowSelectedId,
@@ -34,7 +35,6 @@ var Row = function Row(_ref) {
     canSelection = _ref.canSelection,
     selectionWithoutChecked = _ref.selectionWithoutChecked,
     reorderRow = _ref.reorderRow,
-    tableContainerWidth = _ref.tableContainerWidth,
     canRowDrag = _ref.canRowDrag,
     rowClassName = _ref.rowClassName,
     cellClassName = _ref.cellClassName,
@@ -287,13 +287,13 @@ var Row = function Row(_ref) {
         style: {
           padding: 0
         },
-        children: tableContainerWidth && /*#__PURE__*/_jsx("div", {
+        children: (tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.clientWidth) && /*#__PURE__*/_jsx("div", {
           id: "".concat(tableId, "_expand-table"),
           className: "subRowWrapper"
           // 减去10，避免被父表滚动条覆盖
           ,
           style: {
-            width: "".concat(tableContainerWidth - (hasVerticalScrollBar ? 10 : 0), "px")
+            width: "".concat(tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.clientWidth, "px")
           },
           children: renderSubComponent && renderSubComponent({
             row: row

package/dist/components/TableMax/TableBody/index.d.ts

@@ -3,6 +3,7 @@ import { OnSelectChangeType } from "../type";
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import './index.less';
 type TableBodyPropsType = {
+    tableBodyRef?: any;
     table: Table<any>;
     tableId: string;
     theme: string;
@@ -14,9 +15,6 @@ type TableBodyPropsType = {
     canFilter: boolean;
     canSelection: boolean;
     selectionWithoutChecked?: boolean;
-    tableBodyHeight: number;
-    bodyContentHeight: number;
-    tableContainerWidth: number;
     selectedRowDragging: boolean;
     setSelectedRowDragging: Dispatch<SetStateAction<boolean>>;
     canRowDrag: boolean;
@@ -53,5 +51,5 @@ type TableBodyPropsType = {
     };
     dragBeforeStart: (datas: any) => boolean;
 };
-declare const TableBody: ({ table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableBodyHeight, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, emptyDataHeight, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, pinShadowVisible, dragBeforeStart, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
+declare const TableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, hasVerticalScrollBar, datas, emptyDataHeight, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, pinShadowVisible, dragBeforeStart, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;

package/dist/components/TableMax/TableBody/index.js

@@ -12,7 +12,6 @@ import { useDrop } from 'react-dnd';
 import { CustomDragLayer } from "../components/CustomDragerLayer";
 // import RowContent from "../components/RowContent";
 
-import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import Row from "./Row";
 import "./index.less";
@@ -21,7 +20,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var TableBody = function TableBody(_ref) {
   var _headerGroups;
-  var table = _ref.table,
+  var tableBodyRef = _ref.tableBodyRef,
+    table = _ref.table,
     tableId = _ref.tableId,
     theme = _ref.theme,
     reorderRow = _ref.reorderRow,
@@ -31,8 +31,6 @@ var TableBody = function TableBody(_ref) {
     onSelectChange = _ref.onSelectChange,
     canSelection = _ref.canSelection,
     selectionWithoutChecked = _ref.selectionWithoutChecked,
-    tableBodyHeight = _ref.tableBodyHeight,
-    tableContainerWidth = _ref.tableContainerWidth,
     selectedRowDragging = _ref.selectedRowDragging,
     setSelectedRowDragging = _ref.setSelectedRowDragging,
     canRowDrag = _ref.canRowDrag,
@@ -164,6 +162,7 @@ var TableBody = function TableBody(_ref) {
     _useDrop2 = _slicedToArray(_useDrop, 2),
     dropRef = _useDrop2[1];
   var EmptyContent = function EmptyContent() {
+    var _tableBodyRef$current;
     return /*#__PURE__*/_jsx("tr", {
       className: "empty-container",
       style: {
@@ -172,7 +171,7 @@ var TableBody = function TableBody(_ref) {
       children: /*#__PURE__*/_jsx("td", {
         className: "empty-wapper",
         style: {
-          width: "".concat(tableContainerWidth - (hasVerticalScrollBar ? 10 : 0), "px"),
+          width: "".concat(tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.clientWidth, "px"),
           height: emptyDataHeight
         },
         children: loading ? /*#__PURE__*/_jsx(_Spin, {}) : /*#__PURE__*/_jsxs("span", {
@@ -195,9 +194,11 @@ var TableBody = function TableBody(_ref) {
       // 当前行是否编辑中
       var rowEditing = row.id === editingRowId;
       return /*#__PURE__*/_jsx(Row, {
+        tableBodyRef: tableBodyRef,
         table: table,
-        tableId: tableId,
-        tableContainerWidth: tableContainerWidth,
+        tableId: tableId
+        // tableContainerWidth={tableContainerWidth}
+        ,
         row: row,
         rowKey: rowKey,
         theme: theme,
@@ -239,9 +240,11 @@ var TableBody = function TableBody(_ref) {
     }
     return EmptyContent();
   };
-  useEffect(function () {
-    console.log(tableBodyHeight, 'tableBodyHeight*******************');
-  }, [tableBodyHeight]);
+
+  // useEffect(() => {
+  //   console.log(tableBodyHeight, 'tableBodyHeight*******************');
+  // }, [tableBodyHeight]);
+
   return (
     /*#__PURE__*/
     // 修复筛选数据为空时，滚动条丢失

package/dist/components/TableMax/TableHeader/index.js

@@ -7,7 +7,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 // import { Column, flexRender } from '@tanstack/react-table';
 // import { useDrag, useDrop } from 'ahooks';
 
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Filter } from "../components/ColumnFilter";
 import { getShadowInfo } from "../utils";
 import Cell from "./Cell";
@@ -31,10 +31,9 @@ var TableHeader = function TableHeader(_ref) {
     var columnPinning = table.getState().columnPinning;
     return JSON.stringify(columnPinning.left) !== '[]' || JSON.stringify(columnPinning.right) !== '[]' ? true : false;
   }, [table.getState().columnPinning]);
-
-  // useEffect(() => {
-  //   console.log(hasVerticalScrollBar, '********************hasVerticalScrollBar====================');
-  // }, [hasVerticalScrollBar]);
+  useEffect(function () {
+    console.log(hasVerticalScrollBar, '********************hasVerticalScrollBar====================');
+  }, [hasVerticalScrollBar]);
 
   // const [headerGroups, setHeaderGroups] = useState([])
 

package/dist/components/TableMax/TableHeader/index.less

@@ -26,7 +26,7 @@ table {
   font-weight: 400;
   padding: 0 8px;
   text-align: left;
-  border-bottom: 1px solid @tableColor2;
+  // border-bottom: 1px solid @tableColor2;
 
   .cell-left {
     flex: 1;

package/dist/components/TableMax/TableMax.js

@@ -54,7 +54,7 @@ export var ColumnType = /*#__PURE__*/function (ColumnType) {
 }({});
 export var TableContext = /*#__PURE__*/createContext({});
 var TableMax = function TableMax(_ref) {
-  var _JSON$parse, _tableHeaderRef$curre2, _tableContentRef$curr3;
+  var _JSON$parse, _tableHeaderRef$curre2, _tableBodyRef$current3, _tableBodyRef$current4, _tableBodyRef$current5;
   var tableId = _ref.tableId,
     originColumns = _ref.columns,
     _ref$datas = _ref.datas,
@@ -357,36 +357,18 @@ var TableMax = function TableMax(_ref) {
     _useState36 = _slicedToArray(_useState35, 2),
     tableHeadHeight = _useState36[0],
     setTableHeadHeight = _useState36[1];
-  var _useState37 = useState(0),
-    _useState38 = _slicedToArray(_useState37, 2),
-    tableBodyHeight = _useState38[0],
-    setTableBodyHeight = _useState38[1];
+
+  // const [tableBodyHeight, setTableBodyHeight] = useState(0);
 
   /**table-head高度 */
   useEffect(function () {
     var _tableHeaderRef$curre;
     setTableHeadHeight(tableHeaderRef === null || tableHeaderRef === void 0 || (_tableHeaderRef$curre = tableHeaderRef.current) === null || _tableHeaderRef$curre === void 0 ? void 0 : _tableHeaderRef$curre.clientHeight);
   }, [tableHeaderRef === null || tableHeaderRef === void 0 || (_tableHeaderRef$curre2 = tableHeaderRef.current) === null || _tableHeaderRef$curre2 === void 0 ? void 0 : _tableHeaderRef$curre2.clientHeight, enableFilters]);
-
-  /**table-body高度 */
-  useEffect(function () {
-    var _tableContentRef$curr, _tableContentRef$curr2;
-    var horizontalScrollHeight = table.getTotalSize() > (tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.offsetWidth) ? 10 : 0;
-    setTableBodyHeight(autoHeight ? (tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr2 = tableContentRef.current) === null || _tableContentRef$curr2 === void 0 ? void 0 : _tableContentRef$curr2.clientHeight) - tableHeadHeight - horizontalScrollHeight : defaultScrollY - tableHeadHeight - horizontalScrollHeight);
-  }, [table.getTotalSize(), defaultScrollY, autoHeight, tableContentRef === null || tableContentRef === void 0 ? void 0 : tableContentRef.current, tableContentRef === null || tableContentRef === void 0 || (_tableContentRef$curr3 = tableContentRef.current) === null || _tableContentRef$curr3 === void 0 ? void 0 : _tableContentRef$curr3.clientHeight, tableHeadHeight]);
-
-  /**table-body-content 高度 */
-  var bodyContentHeight = useMemo(function () {
-    return datas.length * Number(rowHeight);
-  }, [datas.length, rowHeight]);
-  var hasVerticalScrollBar = useMemo(function () {
-    return tableBodyHeight - bodyContentHeight + 10 < 0;
-  }, [tableBodyHeight, bodyContentHeight]);
-
-  // const tableViewWidth = useMemo(
-  //   () => table.getTotalSize() + (hasVerticalScrollBar ? 10 : 0),
-  //   [table.getTotalSize(), hasVerticalScrollBar],
-  // );
+  var _useState37 = useState(false),
+    _useState38 = _slicedToArray(_useState37, 2),
+    hasVerticalScrollBar = _useState38[0],
+    setHasVerticalScrollBar = _useState38[1];
 
   // 暴露给外部的api
   useImperativeHandle(refInstance, function () {
@@ -556,18 +538,20 @@ var TableMax = function TableMax(_ref) {
     setTableColumns(cloneDeep(newColumns));
     return getSizeInfo(newColumns);
   }, [columns]);
-
-  // 剩余宽度
-  var emptyColumnWidth = useMemo(function () {
-    var _document$getElementB;
+  var _useState39 = useState(),
+    _useState40 = _slicedToArray(_useState39, 2),
+    emptyColumnWidth = _useState40[0],
+    setEmptyColumnWidth = _useState40[1];
+  useEffect(function () {
+    var _tableBodyRef$current, _tableBodyRef$current2;
     var hasSizeAllWidth = columnSizeInfo.hasSizeAllWidth;
     //表格宽度，offsetWidth?下面监听里用的clientWidth
-    var tableContainerWidth = ((_document$getElementB = document.getElementById("".concat(tableId, "-TableCore"))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.offsetWidth) || 1000;
+    var tableContainerWidth = (_tableBodyRef$current = tableBodyRef.current) === null || _tableBodyRef$current === void 0 ? void 0 : _tableBodyRef$current.clientWidth;
     // 滚动条宽度
-    var scrollBarWidth = hasVerticalScrollBar ? 10 : 0;
-    var remainWidth = tableContainerWidth - hasSizeAllWidth - scrollBarWidth - table.getLeftTotalSize() - (table === null || table === void 0 ? void 0 : table.getRightTotalSize());
-    return remainWidth;
-  }, [tableContainerWidth, hasVerticalScrollBar, Math.round(table.getLeftTotalSize()), Math.round(table === null || table === void 0 ? void 0 : table.getRightTotalSize())]);
+    var remainWidth = tableContainerWidth - hasSizeAllWidth - table.getLeftTotalSize() - (table === null || table === void 0 ? void 0 : table.getRightTotalSize()) || 0;
+    setHasVerticalScrollBar(datas.length * rowHeight - ((_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.clientHeight) > 0);
+    setEmptyColumnWidth(remainWidth);
+  }, [(_tableBodyRef$current3 = tableBodyRef.current) === null || _tableBodyRef$current3 === void 0 ? void 0 : _tableBodyRef$current3.clientWidth, (_tableBodyRef$current4 = tableBodyRef.current) === null || _tableBodyRef$current4 === void 0 ? void 0 : _tableBodyRef$current4.clientHeight, (_tableBodyRef$current5 = tableBodyRef.current) === null || _tableBodyRef$current5 === void 0 ? void 0 : _tableBodyRef$current5.scrollWidth, datas.length, Math.round(table.getLeftTotalSize()), Math.round(table === null || table === void 0 ? void 0 : table.getRightTotalSize())]);
   useEffect(function () {
     //默认宽度
     var defaultSize = 60;
@@ -588,15 +572,15 @@ var TableMax = function TableMax(_ref) {
       newColumns = setRemainColumnsWidth(newColumns);
     }
     setInitTableSizeColumns(cloneDeep(newColumns));
-    setTableColumns(cloneDeep(newColumns));
+    // setTableColumns(cloneDeep(newColumns));
   }, [columnSizeInfo, emptyColumnWidth]);
 
   // 添加空白列
   useLayoutEffect(function () {
     var centerTableSize = table.getTotalSize();
-    var containerWidth = tableContainerWidth;
-    var scrollBarWidth = tableBodyHeight < bodyContentHeight ? 10 : 0;
-    var centerTableContainerWidth = containerWidth - scrollBarWidth;
+    var containerWidth = tableBodyRef.current.clientWidth;
+    // const scrollBarWidth = tableBodyRef.current.clientWidth - tableBodyRef.current.scrollHeight < 0 ? 10 : 0;
+    var centerTableContainerWidth = containerWidth;
     var centerTableRemainWidth = centerTableContainerWidth - centerTableSize;
     var placeholderColumn = table.getAllColumns().some(function (item) {
       return item.id === ColumnType.PlaceHolder;
@@ -954,6 +938,7 @@ var TableMax = function TableMax(_ref) {
     setEditingRowId(row.id);
   };
   var tableBodyProps = {
+    tableBodyRef: tableBodyRef,
     emptyDataHeight: emptyDataHeight,
     table: table,
     tableId: tableId,
@@ -967,10 +952,10 @@ var TableMax = function TableMax(_ref) {
     selectionWithoutChecked: selectionWithoutChecked,
     // scroll,
     // setScroll,
-    tableBodyHeight: tableBodyHeight,
+    // tableBodyHeight,
     // tableHeadHeight,
     // setTableHeadHeight,
-    bodyContentHeight: bodyContentHeight,
+    // bodyContentHeight,
     // setBodyContentHeight,
     tableContainerWidth: tableContainerWidth,
     selectedRowDragging: selectedRowDragging,
@@ -1006,10 +991,10 @@ var TableMax = function TableMax(_ref) {
     hasVerticalScrollBar: hasVerticalScrollBar
   };
   var getPinShadowInfo = useCallback(function () {
-    var _tableBodyRef$current = tableBodyRef.current,
-      scrollWidth = _tableBodyRef$current.scrollWidth,
-      clientWidth = _tableBodyRef$current.clientWidth,
-      scrollLeft = _tableBodyRef$current.scrollLeft;
+    var _tableBodyRef$current6 = tableBodyRef.current,
+      scrollWidth = _tableBodyRef$current6.scrollWidth,
+      clientWidth = _tableBodyRef$current6.clientWidth,
+      scrollLeft = _tableBodyRef$current6.scrollLeft;
     var newLeftShadowVisible, newRightShadowVisible;
     newLeftShadowVisible = scrollLeft > 0;
     newRightShadowVisible = scrollLeft < scrollWidth - clientWidth;
@@ -1126,7 +1111,7 @@ var TableMax = function TableMax(_ref) {
             className: "table-center",
             ref: tableContentRef,
             style: {
-              height: !autoHeight ? defaultScrollY : 'fix-content'
+              maxHeight: !autoHeight ? defaultScrollY : 'fix-content'
             },
             children: [/*#__PURE__*/_jsx("div", {
               ref: tableHeaderRef,

package/dist/components/TableMax/components/ColumnEdit/index.d.ts

@@ -22,7 +22,8 @@ interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
     numberMin: number;
     children: React.ReactNode;
     precision: number | undefined;
-    ellipsis: boolean;
+    ellipsis?: boolean;
+    tooltip?: boolean;
 }
 export declare const EditableCell: React.FC<EditableCellProps>;
 export {};

package/dist/components/TableMax/components/ColumnEdit/index.js

@@ -34,7 +34,8 @@ export var EditableCell = function EditableCell(_ref) {
     numberMin = _ref.numberMin,
     _ref$editOptions = _ref.editOptions,
     editOptions = _ref$editOptions === void 0 ? [] : _ref$editOptions,
-    ellipsis = _ref.ellipsis;
+    ellipsis = _ref.ellipsis,
+    tooltip = _ref.tooltip;
   var getEditComponent = function getEditComponent() {
     switch (editComType) {
       case InputType.InputNumber:
@@ -93,7 +94,7 @@ export var EditableCell = function EditableCell(_ref) {
       // onClick={e => e.stopPropagation()}
       ,
       children: getEditComponent()
-    }) : ellipsis ? /*#__PURE__*/_jsx(_Tooltip, {
+    }) : ellipsis || tooltip ? /*#__PURE__*/_jsx(_Tooltip, {
       placement: "topLeft",
       title: children,
       mouseEnterDelay: 0.5,

package/dist/components/TableMax/components/ColumnEdit/index.less

@@ -2,6 +2,9 @@
   // display: inline-block;
   width: 100%;
   padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   .ellipsis {
     overflow: hidden;

package/dist/components/TableMax/tableMax.less

@@ -172,7 +172,7 @@
   }
 
   .table-max-footer {
-    height: 24px;
+    // height: 24px;
     margin-top: 12px;
   }
 

package/dist/components/TableMax/type.d.ts

@@ -263,8 +263,12 @@ export interface TableMaxColumnType {
         value: any;
         label: any;
     }[];
-    /**内容超过单元格宽度显示省略号 */
+    /** @deprecated 已废弃，使用tooltip替代；现在表格单元格默认就是超出部分省略号展示
+     * 是否显示tooltip
+     */
     ellipsis?: boolean;
+    /**是否显示tooltip */
+    tooltip?: boolean;
     /**当前列是否可排序 */
     enableSorting?: boolean;
     /**排序函数 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,4 +90,4 @@
   "authors": [
     "na.xu2278@foxmail.com"
   ]
-}
+}