vxe-gantt/lib/gantt/src/gantt-header.js

A vue based gantt component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _core = require("@vxe-ui/core");
const {
  getI18n
} = _core.VxeUI;
var _default = exports.default = (0, _comp.defineVxeComponent)({
  name: 'VxeGanttViewHeader',
  setup() {
    const $xeGanttView = (0, _vue.inject)('$xeGanttView', {});
    const {
      reactData,
      internalData
    } = $xeGanttView;
    const refElem = (0, _vue.ref)();
    const refHeaderScroll = (0, _vue.ref)();
    const refHeaderTable = (0, _vue.ref)();
    const refHeaderXSpace = (0, _vue.ref)();
    const renderVN = () => {
      const {
        tableColumn,
        headerGroups,
        viewCellWidth
      } = reactData;
      return (0, _vue.h)('div', {
        ref: refElem,
        class: 'vxe-gantt-view--header-wrapper'
      }, [(0, _vue.h)('div', {
        ref: refHeaderScroll,
        class: 'vxe-gantt-view--header-inner-wrapper',
        onScroll: $xeGanttView.triggerHeaderScrollEvent
      }, [(0, _vue.h)('div', {
        ref: refHeaderXSpace,
        class: 'vxe-body--x-space'
      }), (0, _vue.h)('table', {
        ref: refHeaderTable,
        class: 'vxe-gantt-view--header-table'
      }, [(0, _vue.h)('colgroup', {}, tableColumn.map((column, cIndex) => {
        return (0, _vue.h)('col', {
          key: cIndex,
          style: {
            width: `${viewCellWidth}px`
          }
        });
      })), (0, _vue.h)('thead', {}, headerGroups.map(({
        scaleItem,
        columns
      }, $rowIndex) => {
        const {
          type,
          titleMethod
        } = scaleItem;
        return (0, _vue.h)('tr', {
          key: $rowIndex
        }, columns.map((column, cIndex) => {
          const dateObj = column.params;
          let label = `${column.title}`;
          if ($rowIndex < headerGroups.length - 1) {
            if (scaleItem.type === 'day') {
              label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
            } else {
              label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
            }
          }
          if (titleMethod) {
            label = `${titleMethod({
              scaleObj: scaleItem,
              title: label,
              dateObj: dateObj,
              $rowIndex
            })}`;
          }
          return (0, _vue.h)('th', {
            key: cIndex,
            class: 'vxe-gantt-view--header-column',
            colspan: column.childCount || null,
            title: label
          }, label);
        }));
      }))])])]);
    };
    (0, _vue.onMounted)(() => {
      const {
        elemStore
      } = internalData;
      const prefix = 'main-header-';
      elemStore[`${prefix}wrapper`] = refElem;
      elemStore[`${prefix}scroll`] = refHeaderScroll;
      elemStore[`${prefix}table`] = refHeaderTable;
      elemStore[`${prefix}xSpace`] = refHeaderXSpace;
    });
    (0, _vue.onUnmounted)(() => {
      const {
        elemStore
      } = internalData;
      const prefix = 'main-header-';
      elemStore[`${prefix}wrapper`] = null;
      elemStore[`${prefix}scroll`] = null;
      elemStore[`${prefix}table`] = null;
      elemStore[`${prefix}xSpace`] = null;
    });
    return renderVN;
  }
});