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");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  getI18n
} = _core.VxeUI;
const sourceType = 'gantt';
const viewType = 'header';
var _default = exports.default = (0, _comp.defineVxeComponent)({
  name: 'VxeGanttViewHeader',
  setup() {
    const $xeGantt = (0, _vue.inject)('$xeGantt', {});
    const $xeGanttView = (0, _vue.inject)('$xeGanttView', {});
    const {
      computeTaskViewOpts
    } = $xeGantt.getComputeMaps();
    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 {
        headerGroups,
        viewCellWidth
      } = reactData;
      const {
        todayDateMaps,
        visibleColumn
      } = internalData;
      const taskViewOpts = computeTaskViewOpts.value;
      const {
        showNowLine
      } = taskViewOpts;
      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', {}, visibleColumn.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,
          titleFormat,
          titleMethod,
          headerCellStyle,
          slots
        } = scaleItem;
        const titleSlot = slots ? slots.title : null;
        const isLast = $rowIndex === headerGroups.length - 1;
        const todayValue = isLast && showNowLine ? todayDateMaps[type] : null;
        return (0, _vue.h)('tr', {
          key: $rowIndex
        }, columns.map((column, cIndex) => {
          const {
            field,
            childCount,
            dateObj
          } = column;
          let label = `${column.title}`;
          if (scaleItem.type === 'day') {
            label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
          } else {
            if ($rowIndex) {
              label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
            } else {
              if (isLast && scaleItem.type === 'week') {
                label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
              } else {
                label = getI18n(`vxe.gantt.tFullFormat.${type}`, dateObj);
              }
            }
          }
          let cellVNs = label;
          const ctParams = {
            source: sourceType,
            type: viewType,
            column,
            scaleObj: scaleItem,
            title: label,
            dateObj: dateObj,
            $rowIndex
          };
          if (titleSlot) {
            cellVNs = $xeGantt.callSlot(titleSlot, ctParams);
          } else if (titleMethod) {
            cellVNs = `${titleMethod(ctParams)}`;
          } else if (titleFormat) {
            cellVNs = _xeUtils.default.toDateString(dateObj.date, titleFormat);
          }
          let cellStys = {};
          if (headerCellStyle) {
            if (_xeUtils.default.isFunction(headerCellStyle)) {
              cellStys = headerCellStyle(ctParams) || null;
            } else {
              cellStys = headerCellStyle;
            }
          }
          return (0, _vue.h)('th', {
            key: cIndex,
            class: ['vxe-gantt-view--header-column', {
              'is--now': showNowLine && todayValue && todayValue === field
            }],
            colspan: childCount || null,
            title: titleSlot ? null : label,
            style: cellStys || undefined,
            onContextmenu(evnt) {
              $xeGantt.handleTaskHeaderContextmenuEvent(evnt, ctParams);
            }
          }, cellVNs);
        }));
      }))])])]);
    };
    (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;
  }
});