src/components/table/table.template.js - master - eb/js-excel

src/components/table/table.template.js
120 строк3 KB
Evgeniy Budaev
Finish redux and table logic
16 июн 2020, 10:52
16 июн 2020, 10:52b7d4906
import {toInlineStyles} from "@core/utils";
import {defaultStyles} from "@/constants";
import {parse} from "@core/parse";

const CODES = {
  A: 65,
  Z: 90
}

const DEFAULT_WIDTH = 120
const DEFAULT_HEIGHT = 24

function getWidth(state, index) {
  return (state[index] || DEFAULT_WIDTH) + 'px'
}

function getHeight(state, index) {
  return (state[index] || DEFAULT_HEIGHT) + 'px'
}

function toCell(state, row) {
  return function(_, col) {
    // console.log(state.colState[col])
    const id = `${row}:${col}`
    const width = getWidth(state.colState, col)
    const data = state.dataState[id]
    const styles = toInlineStyles({
      ...defaultStyles,
      ...state.stylesState[id]
    })
    return `
      <div 
        class="cell" 
        contenteditable 
        data-col="${col}"
        data-type="cell"
        data-id="${id}"
        data-value="${data || ''}"
        style="${styles}; width: ${width}"
      >${parse(data) || ''}</div>
    `
  }
}

function toColumn({col, index, width}) {
  return `
  <div 
     class="column" 
     data-type="resizable"
     data-col="${index}" 
     style="width: ${width}"
   >
      ${col}
    <div class="col-resize" data-resize="col"></div>
   </div>
  `
}

function createRow(index, content, state) {
  const resizer = index ? '<div class="row-resize"  data-resize="row"></div>' : ''
  const height = getHeight(state, index)
  return `
  <div 
  class="row"
   data-type="resizable" 
   data-row="${index}"
   style="height: ${height}"
   >
    <div class="row-info">
      ${index ? index : ''}
      ${resizer}
    </div>
    <div class="row-data">${content}</div>
</div>
  `
}

function toChar(_, index) {
  return String.fromCharCode(CODES.A + index)
}

function withWidthFrom(state) {
  return function(col, index) {
    return {
      col, index, width: getWidth(state.colState, index)
    }
  }
}

export function createTable(rowsCount = 30, state ={}) {
  // console.log(state)
  const colsCount = CODES.Z - CODES.A + 1
  const rows = []

  const cols = new Array(colsCount)
      .fill('')
      .map(toChar)
      .map(withWidthFrom(state))
      .map(toColumn)
      // .map((col, index) => {
      //   const width = getWidth(state.colState, index)
      //   return toColumn(col, index, width)
      // })
      .join('')
  // console.log(cols)

  rows.push(createRow(null, cols, {}))

  for (let row = 0; row < rowsCount; row++) {
    const cells = new Array(colsCount)
        .fill('')
        // .map((_, col) => toCell(row, col))
        .map(toCell(state, row))
        .join('')

    rows.push(createRow(row + 1, cells, state.rowState))
  }

  return rows.join('')
}