es-grid-template 1.9.53 → 1.9.56

package/es/ali-table/base-table/html-table-new.js

@@ -0,0 +1,417 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import cx from 'classnames';
+import React from 'react';
+import { internals } from "../internals";
+import { Colgroup } from "./colgroup";
+import SpanManager from "./helpers/SpanManager";
+import { Classes } from "./styles";
+import { nonActionColumn } from "../../grid-component/hooks";
+import { Space } from 'rc-master-ui';
+import Command from "../../table-component/components/command/Command";
+import { renderValueCell } from "../../table-component/hook/useColumns";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DragDrop } from 'becoxy-icons';
+const RowDragHandleCell = ({
+  rowId
+}) => {
+  const {
+    attributes,
+    listeners
+  } = useSortable({
+    id: rowId
+  });
+  return (
+    /*#__PURE__*/
+    // Alternatively, you could set these attributes on the rows themselves
+    React.createElement("span", _extends({}, attributes, listeners), /*#__PURE__*/React.createElement(DragDrop, {
+      fontSize: 14
+    }))
+  );
+};
+function renderBodyCell(args) {
+  const {
+    row,
+    rowIndex,
+    column,
+    colIndex,
+    spanManager,
+    format,
+    Cell,
+    commandClick,
+    originData,
+    id,
+    verInfo,
+    hozInfo,
+    hoz,
+    leftFlatCount,
+    fullFlatCount,
+    rightFlatCount,
+    tbodyHtmlTag
+  } = args;
+  if (spanManager.testSkip(rowIndex, colIndex)) {
+    return null;
+  }
+  const value = internals.safeGetValue(column, row, rowIndex);
+  const cellProps = column.getCellProps?.(value, row, rowIndex) ?? {};
+  const a = renderValueCell(column, value, row, rowIndex, colIndex, format, false);
+
+  // let cellContent: ReactNode = value
+  let cellContent = a;
+
+  // if (column.render) {
+  //   cellContent = column.render(value, row, rowIndex)
+  // }
+  // if (column.field === '#') {
+
+  //   cellContent = findItemPath(originData, row, primaryKey)
+  // }
+
+  if (column.field === 'drag-handle') {
+    cellContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RowDragHandleCell, {
+      rowId: row.rowId
+    }));
+  }
+  if (column.field === 'command') {
+    const commands = column.commandItems ? column.commandItems.map(it => {
+      return {
+        ...it,
+        visible: typeof it.visible === 'function' ? it.visible?.(row) : it.visible
+      };
+    }) : [];
+    cellContent = /*#__PURE__*/React.createElement("div", {
+      className: "ui-rc_cell-content"
+    }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
+      return /*#__PURE__*/React.createElement(Command, {
+        id: id,
+        key: item.id,
+        item: item,
+        record: row,
+        onClick: () => {
+          commandClick?.({
+            id: item.id,
+            // rowId: getRowKey(record, index) as any,
+            rowId: row.rowId,
+            rowData: row,
+            index: rowIndex,
+            rows: [...originData]
+          });
+        }
+      });
+    })));
+  }
+  if (column.template) {
+    cellContent = column.template({
+      value,
+      rowData: row,
+      index: rowIndex,
+      field: column.field ?? ''
+    });
+  }
+
+  // 
+
+  let colSpan = 1;
+  let rowSpan = 1;
+  if (column.getSpanRect) {
+    const spanRect = column.getSpanRect(value, row, rowIndex);
+    colSpan = spanRect == null ? 1 : spanRect.right - colIndex;
+    rowSpan = spanRect == null ? 1 : spanRect.bottom - rowIndex;
+  } else {
+    if (cellProps.colSpan != null) {
+      colSpan = cellProps.colSpan;
+    }
+    if (cellProps.rowSpan != null) {
+      rowSpan = cellProps.rowSpan;
+    }
+  }
+
+  // rowSpan/colSpan should not be too large to avoid affecting cells that are not rendered due to virtual scrolling
+  rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
+  colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex - colIndex);
+  const hasSpan = colSpan > 1 || rowSpan > 1;
+  if (hasSpan) {
+    spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
+  }
+  const positionStyle = {};
+  if (colIndex < leftFlatCount) {
+    positionStyle.position = 'sticky';
+    positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
+  } else if (colIndex >= fullFlatCount - rightFlatCount) {
+    positionStyle.position = 'sticky';
+    positionStyle.right = hozInfo.stickyRightMap.get(colIndex);
+  }
+  const tdProps = {
+    ...cellProps,
+    className: cx(Classes.tableCell, cellProps.className, {
+      first: colIndex === 0,
+      last: colIndex + colSpan === fullFlatCount,
+      'lock-left': colIndex < leftFlatCount,
+      'lock-right': colIndex >= fullFlatCount - rightFlatCount
+    }),
+    ...(hasSpan ? {
+      colSpan,
+      rowSpan
+    } : null),
+    style: {
+      textAlign: column.textAlign,
+      ...cellProps.style,
+      ...positionStyle
+    },
+    // children: <div className='ui-rc_cell-content'>{cellContent}</div>
+
+    children: cellContent
+    // children: () => {
+    //   return (
+    //     <span className='abcccc'>{cellContent}</span>
+    //   )
+    // },
+  };
+  if (tbodyHtmlTag === 'tfoot') {
+    if (!nonActionColumn.includes(column.field) && column.isSummary !== false) {
+      return /*#__PURE__*/React.createElement("td", _extends({
+        key: colIndex
+      }, tdProps));
+    } else {
+      return /*#__PURE__*/React.createElement("td", _extends({
+        key: colIndex
+      }, tdProps), '');
+    }
+  }
+  if (Cell != null && tbodyHtmlTag === 'tbody') {
+    return /*#__PURE__*/React.createElement(Cell, {
+      key: colIndex,
+      tdProps: tdProps,
+      row: row,
+      rowIndex: rowIndex,
+      column: column,
+      colIndex: colIndex
+    });
+  } else {
+    return /*#__PURE__*/React.createElement("td", _extends({
+      key: colIndex
+    }, tdProps));
+  }
+}
+const RenderRow = props => {
+  const {
+    verInfo,
+    hozInfo,
+    spanManager,
+    getRowProps,
+    row,
+    i,
+    tbodyHtmlTag,
+    primaryKey,
+    Row,
+    fullFlatCount,
+    hoz,
+    leftFlatCount,
+    rightFlatCount,
+    id,
+    originData,
+    Cell,
+    commandClick,
+    format
+  } = props;
+  const {
+    transform,
+    transition,
+    setNodeRef,
+    isDragging
+  } = useSortable({
+    id: row.rowId
+  });
+  const rowIndex = verInfo.offset + i;
+  spanManager.stripUpwards(rowIndex);
+  const rowProps = getRowProps(row, rowIndex);
+  const rowClass = cx(Classes.tableRow, {
+    first: rowIndex === verInfo.first,
+    last: rowIndex === verInfo.last,
+    even: rowIndex % 2 === 0,
+    odd: rowIndex % 2 === 1
+  }, rowProps?.className);
+  const onContextMenu = rowProps?.onContextMenu;
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    // translate instead of transform to avoid squishing
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: 'relative'
+  };
+  const trProps = {
+    ...rowProps,
+    ref: setNodeRef,
+    className: rowClass,
+    style: {
+      ...rowProps.style,
+      ...style
+    },
+    onContextMenu: tbodyHtmlTag === 'tbody' ? onContextMenu : undefined,
+    'data-rowindex': rowIndex,
+    children: hozInfo.visible.map(descriptor => {
+      if (descriptor.type === 'blank') {
+        return /*#__PURE__*/React.createElement("td", {
+          key: descriptor.blankSide
+        });
+      }
+      return renderBodyCell({
+        row,
+        rowIndex,
+        column: descriptor.col,
+        colIndex: descriptor.colIndex,
+        fullFlatCount,
+        hoz,
+        hozInfo,
+        id,
+        leftFlatCount,
+        rightFlatCount,
+        originData,
+        spanManager,
+        tbodyHtmlTag,
+        verInfo,
+        Cell,
+        commandClick,
+        format
+      });
+    })
+  };
+  const key = internals.safeGetRowKey(primaryKey, row, rowIndex);
+  if (Row != null && tbodyHtmlTag === 'tbody') {
+    return /*#__PURE__*/React.createElement(Row, {
+      key,
+      row,
+      rowIndex,
+      trProps
+    });
+  } else {
+    return /*#__PURE__*/React.createElement("tr", _extends({
+      key: key
+    }, trProps));
+  }
+};
+export function HtmlTable({
+  tbodyHtmlTag,
+  getRowProps,
+  primaryKey,
+  data,
+  originData,
+  format,
+  commandClick,
+  id,
+  verticalRenderInfo: verInfo,
+  horizontalRenderInfo: hozInfo,
+  components: {
+    Row,
+    Cell,
+    TableBody
+  }
+}) {
+  const {
+    flat,
+    horizontalRenderRange: hoz
+  } = hozInfo;
+  const spanManager = new SpanManager();
+  const fullFlatCount = flat.full.length;
+  const leftFlatCount = flat.left.length;
+  const rightFlatCount = flat.right.length;
+  const tbody = TableBody != null && tbodyHtmlTag === 'tbody' ? /*#__PURE__*/React.createElement(TableBody, {
+    tbodyProps: {
+      children: data.map((row, i) => {
+        return /*#__PURE__*/React.createElement(RenderRow, {
+          key: row.rowid,
+          getRowProps: getRowProps,
+          hozInfo: hozInfo,
+          i: i,
+          primaryKey: primaryKey,
+          row: row,
+          spanManager: spanManager,
+          tbodyHtmlTag: tbodyHtmlTag,
+          verInfo: verInfo,
+          Row: Row,
+          fullFlatCount: fullFlatCount,
+          leftFlatCount: leftFlatCount,
+          rightFlatCount: rightFlatCount,
+          Cell: Cell,
+          hoz: hoz,
+          id: id,
+          originData: originData,
+          commandClick: commandClick,
+          format: format
+        });
+      })
+    }
+  }) : ( /*#__PURE__*/React.createElement(tbodyHtmlTag, null, data.map((row, i) => {
+    return /*#__PURE__*/React.createElement(RenderRow, {
+      key: row.rowid,
+      getRowProps: getRowProps,
+      hozInfo: hozInfo,
+      i: i,
+      primaryKey: primaryKey,
+      row: row,
+      spanManager: spanManager,
+      tbodyHtmlTag: tbodyHtmlTag,
+      verInfo: verInfo,
+      Row: Row,
+      fullFlatCount: fullFlatCount,
+      leftFlatCount: leftFlatCount,
+      rightFlatCount: rightFlatCount,
+      Cell: Cell,
+      hoz: hoz,
+      id: id,
+      originData: originData,
+      commandClick: commandClick,
+      format: format
+    });
+  })));
+  return /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement(Colgroup, {
+    descriptors: hozInfo.visible
+  }), tbody);
+
+  // function renderRow(row: any, i: number) {
+  //   const rowIndex = verInfo.offset + i
+  //   spanManager.stripUpwards(rowIndex)
+
+  //   const rowProps = getRowProps(row, rowIndex)
+
+  //   const rowClass = cx(
+  //     Classes.tableRow,
+  //     {
+  //       first: rowIndex === verInfo.first,
+  //       last: rowIndex === verInfo.last,
+  //       even: rowIndex % 2 === 0,
+  //       odd: rowIndex % 2 === 1,
+  //     },
+  //     rowProps?.className,
+  //   )
+
+  //   const onContextMenu = rowProps?.onContextMenu
+
+  //   const trProps = {
+  //     ...rowProps,
+  //     className: rowClass,
+  //     onContextMenu: tbodyHtmlTag === 'tbody' ? onContextMenu : undefined,
+  //     'data-rowindex': rowIndex,
+  //     children: hozInfo.visible.map((descriptor) => {
+  //       if (descriptor.type === 'blank') {
+  //         return <td key={descriptor.blankSide} />
+  //       }
+  //       return renderBodyCell(row, rowIndex, descriptor.col, descriptor.colIndex)
+  //     }),
+  //   }
+
+  //   const key = internals.safeGetRowKey(primaryKey, row, rowIndex)
+
+  //   if (Row != null && tbodyHtmlTag === 'tbody') {
+
+  //     return React.createElement(Row, { key, row, rowIndex, trProps })
+
+  //   } else {
+
+  //     return <tr key={key} {...trProps} />
+
+  //   }
+
+  // }
+}