handsontable/renderers/multiSelectRenderer/multiSelectRenderer.js

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

"use strict";

exports.__esModule = true;
exports.multiSelectRenderer = multiSelectRenderer;
var _baseRenderer = require("../baseRenderer");
var _element = require("../../helpers/dom/element");
var _mixed = require("../../helpers/mixed");
var _utils = require("./utils/utils");
exports.CHIP_CLASS = _utils.CHIP_CLASS;
const RENDERER_TYPE = exports.RENDERER_TYPE = 'multiselect';
const MULTISELECT_RENDERER_CLASS = 'ht-multi-select-renderer';
const CHIPS_CONTAINER_CLASS = 'ht-multi-select-chips-container';

/**
 * Multi-select renderer that displays values as chips.
 *
 * @private
 * @param {Core} hotInstance The Handsontable instance.
 * @param {HTMLTableCellElement} TD The rendered cell element.
 * @param {number} row The visual row index.
 * @param {number} col The visual column index.
 * @param {number|string} prop The column property (passed when datasource is an array of objects).
 * @param {*} value The rendered value (array of strings or objects with "key" and "value" props).
 * @param {object} cellProperties The cell meta object (see {@link Core#getCellMeta}).
 */
function multiSelectRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
  _baseRenderer.baseRenderer.apply(this, [hotInstance, TD, row, col, prop, value, cellProperties]);
  let escaped = value;
  if (!escaped && cellProperties.placeholder) {
    escaped = cellProperties.placeholder;
    escaped = (0, _mixed.stringify)(escaped);
    (0, _element.fastInnerText)(TD, escaped);
    return;
  }
  const {
    rootDocument
  } = hotInstance;
  const isAriaEnabled = hotInstance.getSettings().ariaTags;
  const physicalRow = hotInstance.toPhysicalRow(row);
  const physicalColumn = typeof col === 'string' ? col : hotInstance.toPhysicalColumn(col);
  const sourceData = hotInstance.getSourceDataAtCell(physicalRow, physicalColumn);
  const values = (0, _utils.parseValue)(sourceData);
  (0, _element.empty)(TD);
  (0, _element.addClass)(TD, MULTISELECT_RENDERER_CLASS);
  if (values.length === 0) {
    TD.appendChild(rootDocument.createTextNode(''));
    return;
  }
  const chipsContainer = rootDocument.createElement('div');
  chipsContainer.className = CHIPS_CONTAINER_CLASS;
  values.forEach(item => {
    const chip = (0, _utils.createChipElement)(rootDocument, item, isAriaEnabled, row, prop);
    chipsContainer.appendChild(chip);
  });
  TD.appendChild(chipsContainer);
  (0, _utils.registerChipRemovingEvents)(hotInstance, RENDERER_TYPE);
  const columnWidth = (0, _utils.cacheColumnWidthAndRegisterResizeHook)(hotInstance, col);
  (0, _utils.handleChipsOverflow)(columnWidth, chipsContainer, rootDocument);
}
multiSelectRenderer.RENDERER_TYPE = RENDERER_TYPE;