@kyfe/ks-query-table 0.0.2 → 0.0.3

package/components/pe-table/utils/render-cells.js

@@ -1,424 +0,0 @@
-/** @format */
-// import Vue from 'vue'
-const Vue = window.Vue // 在此项目中，Vue使用的是public下的运行时的vue.reuntime.min.js。所以此时需要保持一致
-import CellRenderer from '../cell.js'
-import HeaderRenderer from '../header.js'
-import { getClasses } from './tools.js'
-import { tableCellFormatterResult } from './formatter.js'
-const CellRendererConstructor = Vue.extend(CellRenderer)
-const HeaderRendererConstructor = Vue.extend(HeaderRenderer)
-
-const createHeaderCellOption = ({
-  isRenderFixedCell,
-  column = {},
-  grid,
-  columnIndex,
-  columns
-}) => {
-  const { headerCellClassName, headerAlign, children } = column || {}
-  const params = {
-    columnIndex: columnIndex,
-    column: column,
-    align: headerAlign || (children && children.length && 'center'),
-    grid,
-    // isHeader: true
-  }
-  return {
-    text: isRenderFixedCell ? '' : column.label,
-    columnIndex,
-    columns,
-    placeholderSign: isRenderFixedCell, // 渲染空节点
-    headerCellClassName: getClasses(headerCellClassName, params),
-    globalHeaderCellClassName: getClasses(grid.headerCellClassName, params),
-    top: column.top,
-    height: column.height,
-    sortable:
-      (!column.children || !column.children.length) &&
-      (column.sortable || column.sortKeys), // 兼容sortKeys
-    collapseKeys: column.collapseKeys,
-    collapsed: column.collapsed,
-    sortOrder: grid.sortMap.key === column.key && grid.sortMap.order,
-    cellResizable: grid.cellResizable,
-    isOpenTwoHeaderBg: grid.isOpenTwoHeaderBg,
-    // 方法
-    sortChange: grid.sortChange,
-    changeCollapseKeys: grid.changeCollapseKeys,
-    cellResize: grid.cellResize,
-  }
-}
-
-const createRowCellOption = ({
-  isRenderFixedCell,
-  cell = {},
-  rowIndex,
-  columnIndex,
-  grid,
-  column,
-  originRowData,
-}) => {
-  const { key, cellClassName, align = 'left' } = column || {}
-  let text = ''
-  if (!isRenderFixedCell) {
-    text = tableCellFormatterResult({column, originRowData, rowIndex, columnIndex, displayText: cell[key]})
-  }
-  const params = {
-    column,
-    value: text,
-    rowData: originRowData,
-    columnIndex: columnIndex,
-    rowIndex: rowIndex,
-    align: align,
-    placeholderSign: isRenderFixedCell, // 渲染空节点
-    grid
-  }
-  return {
-    text,
-    rowIndex,
-    placeholderSign: isRenderFixedCell,
-    cellClassName: getClasses(cellClassName, params),
-    globalCellClassName: getClasses(grid.cellClassName, params),
-  }
-}
-
-/**
- *
- * #@description 渲染单元格的方法
- * @param {*} {
- *     cell,
- *     columns,
- *     isRenderFixedCells,
- *     cellComponentMap,
- *     removeCells,
- *     rowData,
- *     rowKey,
- *     gridOffsetX,
- *     isHeader,
- *     handleEvent,
- *     rowIndex,
- *     grid,
- *     rowContainerDom,
- *   }
- * @param {*} i
- * @return {*}
- */
-const renderCellComponent = (
-  {
-    cell = {},
-    columns,
-    isRenderFixedCells,
-    cellComponentMap,
-    removeCells,
-    rowData,
-    rowKey,
-    gridOffsetX,
-    isHeader,
-    handleEvent,
-    rowIndex,
-    grid,
-    rowContainerDom,
-    originRowData,
-    lastCellIndex,
-    isParentCol
-  },
-  i
-) => {
-  const cellId = cell[rowKey]
-  const column = columns[i]
-  const columnIndex = i
-  const { width, offsetX, fixed } = column || {}
-  let offset
-  if (isRenderFixedCells) {
-    offset = offsetX
-  } else {
-    offset = fixed ? offsetX : offsetX - gridOffsetX
-  }
-  const existingCell = cellComponentMap[cellId]
-  // if (existingCell != null) {
-  //   // 复用的组件，更新偏移值
-  //   existingCell.setOffset(offset)
-  //   if (isHeader) {
-  //     // 更新排序的按钮
-  //     existingCell.setSortOrder(
-  //       grid.sortMap.key === column.key && grid.sortMap.order
-  //     )
-  //   }
-  //   return true
-  // }
-  const commonCellParams = {
-    id: cellId,
-    offset,
-    width,
-    column,
-    fixed: isRenderFixedCells,
-    lastFixedCell: lastCellIndex && isRenderFixedCells,
-    isParentCol,
-    rowData,
-    originRowData,
-    handleEvent,
-    columnIndex,
-  }
-  // 如果不是渲染固定列，并且是固定列，则渲染空标签
-  const isRenderFixedCell = isRenderFixedCells === false && fixed
-  const headerCellParams = createHeaderCellOption({
-    isRenderFixedCell,
-    column,
-    grid,
-    columns,
-  })
-  const rowCellParams = createRowCellOption({
-    isRenderFixedCell,
-    rowIndex,
-    columnIndex,
-    grid,
-    column,
-    cell,
-    originRowData,
-  })
-  // const rowCellParams = {
-  //   text: isRenderFixedCell ? '' : cell[columnKey],
-  //   rowIndex,
-  //   cellClassName: grid.cellClassName,
-  // }
-  const cellParams = {
-    ...commonCellParams,
-    ...(isHeader ? headerCellParams : rowCellParams),
-  }
-  if (existingCell != null) {
-    // 复用的组件，更新偏移值
-    existingCell.setOffset(offset)
-    existingCell.reuse(cellParams)
-    if (isHeader) {
-      // 更新排序的按钮
-      existingCell.setSortOrder(
-        grid.sortMap.key === (column && column.key) && grid.sortMap.order
-      )
-    }
-    return true
-  }
-  const reuseCell = removeCells.pop()
-  if (reuseCell != null) {
-    delete cellComponentMap[reuseCell.id]
-    reuseCell.reuse && reuseCell.reuse(cellParams)
-    cellComponentMap[reuseCell.id] = reuseCell
-    return true
-  }
-
-  const params = {
-    el: document.createElement('div'),
-  }
-  let cellComponet = isHeader
-    ? new HeaderRendererConstructor(params)
-    : new CellRendererConstructor(params)
-
-  // 属性合并
-  for (let prop in cellParams) {
-    cellComponet[prop] = cellParams[prop]
-  }
-  // 添加到行内
-  rowContainerDom.appendChild(cellComponet.$el)
-  cellComponentMap[cellComponet.id] = cellComponet
-}
-
-export function removeCellComponents(componentMap, rowContainerDom) {
-  for (const removeCellComponet of Object.values(componentMap)) {
-    delete componentMap[removeCellComponet.id]
-    rowContainerDom.removeChild(removeCellComponet.$el)
-    removeCellComponet.$destroy()
-  }
-}
-
-/**
- *
- * @description 计算可视区域单元格渲染逻辑
- * @export
- * @param {*} {
- *   columns,
- *   startCell,
- *   endCell,
- *   cells,
- *   cellComponentMap,
- *   type,
- *   rowContainerDom,
- *   isRenderFixedCells,
- *   gridOffsetX,
- *   rowKey,
- *   handleEvent,
- *   rowData,
- *   rowIndex,
- *   grid = {},
- *   headerParentColcellComponentMap,
- * }
- */
-export function calculateRenderCells({
-  columns,
-  startCell,
-  endCell,
-  cells,
-  cellComponentMap,
-  type,
-  rowContainerDom,
-  isRenderFixedCells,
-  gridOffsetX,
-  rowKey,
-  handleEvent,
-  rowData,
-  rowIndex,
-  grid = {},
-  headerParentColcellComponentMap,
-  originRowData,
-}) {
-  // 不存在列不处理
-  // if (!columns || !columns.length) {
-  //   removeCellComponents(cellComponentMap, rowContainerDom)
-  //   removeCellComponents(headerParentColcellComponentMap, rowContainerDom)
-  //   return
-  // }
-  const commonRowParams = {
-    rowContainerDom,
-    isRenderFixedCells,
-    gridOffsetX,
-    rowKey,
-    handleEvent,
-    rowData,
-    rowIndex,
-    grid,
-    originRowData,
-  }
-  const renderCells = {}
-  const renderParentCells = {}
-  const parentCols = []
-  const isHeader = type === 'header'
-  let _parentNodeKeySet = new Set()
-  // 存储需要渲染的列集合
-  for (let i = startCell; i <= endCell; i++) {
-    const cell = cells[i] || {}
-    const cellID = cell[rowKey]
-    renderCells[cellID] = true
-    if (isHeader) {
-      const { parentNodeKey } = cell
-      if (parentNodeKey) {
-        const parentCol = grid.mainColumns.find(
-          (col) => col.key === parentNodeKey
-        )
-        if (parentCol && !_parentNodeKeySet.has(parentNodeKey)) {
-          const parentCellId = parentCol[rowKey]
-          renderParentCells[parentCellId] = true
-          parentCols.push(parentCol)
-          _parentNodeKeySet.add(parentNodeKey)
-        }
-      }
-    }
-  }
-
-  const removeCells = []
-  for (const id in cellComponentMap) {
-    if (id in renderCells) {
-      continue
-    }
-    const cell = cellComponentMap[id]
-    removeCells.push(cell)
-  }
-  for (let i = startCell; i <= endCell; i++) {
-    const cell = cells[i]
-    const params = {
-      cell,
-      columns,
-      isRenderFixedCells,
-      lastCellIndex: endCell === i,
-      cellComponentMap,
-      removeCells,
-      isHeader,
-      ...commonRowParams,
-    }
-    const isContinue = renderCellComponent(params, i)
-    if (isContinue) {
-      continue
-    }
-  }
-  for (const removeCellComponet of removeCells) {
-    delete cellComponentMap[removeCellComponet.id]
-    removeCellComponet.$destroy()
-    rowContainerDom.removeChild(removeCellComponet.$el)
-  }
-  if (parentCols.length) {
-    calculateHeaderParentColRenderCells({
-      parentCols,
-      headerParentColcellComponentMap,
-      renderParentCells,
-      ...commonRowParams,
-    })
-  }
-}
-/**
- *
- * @description 计算表头父节点单元格渲染逻辑
- * @export
- * @param {*} {
- *   parentCols,
- *   headerParentColcellComponentMap,
- *   renderParentCells,
- *   rowContainerDom,
- *   isRenderFixedCells,
- *   gridOffsetX,
- *   rowKey,
- *   handleEvent,
- *   rowData,
- *   rowIndex,
- *   grid,
- * }
- */
-export function calculateHeaderParentColRenderCells({
-  parentCols,
-  headerParentColcellComponentMap,
-  renderParentCells,
-  rowContainerDom,
-  isRenderFixedCells,
-  gridOffsetX,
-  rowKey,
-  handleEvent,
-  rowData,
-  rowIndex,
-  grid,
-}) {
-  // 不存在列不处理
-  if (!renderParentCells || !Object.keys(renderParentCells).length) {
-    return
-  }
-  const removeCells = []
-  for (const id in headerParentColcellComponentMap) {
-    if (id in renderParentCells) {
-      continue
-    }
-    const cell = headerParentColcellComponentMap[id]
-    removeCells.push(cell)
-  }
-  for (let i = 0; i < parentCols.length; i++) {
-    const cell = parentCols[i]
-    const params = {
-      cell,
-      columns: parentCols,
-      isRenderFixedCells,
-      lastCellIndex: i === (parentCols.length - 1),
-      cellComponentMap: headerParentColcellComponentMap,
-      isParentCol: true,
-      removeCells,
-      rowData,
-      rowKey,
-      gridOffsetX,
-      isHeader: true,
-      handleEvent,
-      rowIndex,
-      grid,
-      rowContainerDom,
-    }
-    const isContinue = renderCellComponent(params, i)
-    if (isContinue) {
-      continue
-    }
-  }
-  for (const removeCellComponet of removeCells) {
-    delete headerParentColcellComponentMap[removeCellComponet.id]
-    removeCellComponet.$destroy()
-    rowContainerDom.removeChild(removeCellComponet.$el)
-  }
-}

package/components/pe-table/utils/slot.js

@@ -1,28 +0,0 @@
-export default {
-  functional: true,
-  props: {
-    renderFn: {
-      type: Function,
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-  },
-  render(h, context) {
-    // const style = {
-    //   opacity: context.props.show ? 1 : 0,
-    // }
-    const slots = context.slots() || {}
-    const children = slots.default || []
-    const [slot] = children
-    const createNode = () => {
-      if (slot) {
-        return slot
-      }
-      return [<div>{context.props.title || ''}</div>]
-    }
-    let node = createNode()
-    return node
-  },
-}

package/components/pe-table/utils/tools.js

@@ -1,84 +0,0 @@
-/** @format */
-
-import isFunction from 'lodash/isFunction'
-export function getRenderRange(offsetX, containerWidth, columns) {
-  let totalWidth = 0
-  const accumulatedWidths = []
-
-  // 计算总宽度和每个位置的累加宽度
-  for (let i = 0; i < columns.length; i++) {
-    const width = columns[i]
-    totalWidth += width
-    accumulatedWidths.push(totalWidth)
-  }
-
-  // 处理 offsetX 小于 0 的边界情况
-  if (offsetX < 0) {
-    offsetX = 0
-  }
-
-  // 处理 offsetX 超过总宽度的边界情况
-  if (offsetX >= totalWidth - containerWidth) {
-    offsetX = Math.max(0, totalWidth - containerWidth)
-  }
-
-  // 使用二分法查找起始索引
-  let startIndex = binarySearch(accumulatedWidths, offsetX)
-
-  // 计算起始位置的剩余偏移量
-  let startOffset =
-    offsetX - (startIndex > 0 ? accumulatedWidths[startIndex - 1] : 0)
-  let remainingWidth = containerWidth + startOffset
-
-  // 找到结束索引
-  let endIndex = startIndex
-  for (let i = startIndex; i < columns.length; i++) {
-    const width = columns[i]
-    if (remainingWidth - width <= 0) {
-      endIndex = i
-      break
-    }
-    remainingWidth -= width
-    if (i === columns.length - 1) {
-      endIndex = i
-    }
-  }
-
-  return { startIndex, endIndex }
-}
-
-function binarySearch(arr, target) {
-  let left = 0
-  let right = arr.length - 1
-  let result = arr.length
-
-  while (left <= right) {
-    const mid = Math.floor((left + right) / 2)
-    if (arr[mid] > target) {
-      result = mid
-      right = mid - 1
-    } else {
-      left = mid + 1
-    }
-  }
-
-  return result
-}
-
-export function getClasses(cellClassName, params) {
-  const { align, grid, ...restParams } = params
-  let classNames = [align, params.column && params.column.collapseBg, grid.overflow && 'overflow'].filter(Boolean)
-  if (cellClassName) {
-    if (isFunction(cellClassName)) {
-      const classes = cellClassName(restParams)
-      if (Array.isArray(classes)) {
-        classNames = [...classNames, ...classes]
-      } else {
-        classNames = [...classNames, classes]
-      }
-    } else {
-      classNames = [...classNames, cellClassName]
-    }
-  }
-  return classNames
-}