@mui/x-data-grid-pro/colDef/gridMultiSelectColDef.js

The Pro plan edition of the MUI X Data Grid components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getGridMultiSelectQuickFilterFn = exports.GRID_MULTI_SELECT_COL_DEF = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _internals = require("@mui/x-data-grid/internals");
var _gridMultiSelectOperators = require("./gridMultiSelectOperators");
var _GridMultiSelectCell = require("../components/cell/GridMultiSelectCell");
var _GridEditMultiSelectCell = require("../components/cell/GridEditMultiSelectCell");
const isArrayOfObjects = options => {
  return typeof options[0] === 'object';
};
const multiSelectKey = value => {
  if (!Array.isArray(value) || value.length === 0) {
    return null;
  }
  return [...value].sort().join(',');
};
const defaultGetOptionValue = value => {
  return (0, _internals.isObject)(value) ? value.value : value;
};
const defaultGetOptionLabel = value => {
  return (0, _internals.isObject)(value) ? value.label : String(value);
};
const getGridMultiSelectQuickFilterFn = value => {
  if (!value) {
    return null;
  }
  const filterRegex = new RegExp((0, _internals.escapeRegExp)(value), 'i');
  return (_, row, column, apiRef) => {
    let formattedValue = apiRef.current.getRowFormattedValue(row, column);
    if (apiRef.current.ignoreDiacritics) {
      formattedValue = (0, _internals.removeDiacritics)(formattedValue);
    }
    return formattedValue != null ? filterRegex.test(formattedValue.toString()) : false;
  };
};
exports.getGridMultiSelectQuickFilterFn = getGridMultiSelectQuickFilterFn;
const GRID_MULTI_SELECT_COL_DEF = exports.GRID_MULTI_SELECT_COL_DEF = (0, _extends2.default)({}, _internals.GRID_STRING_COL_DEF, {
  type: 'multiSelect',
  display: 'flex',
  // @ts-ignore premium-only
  availableAggregationFunctions: ['size'],
  // @ts-ignore premium-only
  pivotable: false,
  // @ts-ignore premium-only
  chartable: true,
  // @ts-ignore premium-only
  groupingValueGetter: value => multiSelectKey(value),
  getOptionLabel: defaultGetOptionLabel,
  getOptionValue: defaultGetOptionValue,
  sortComparator: (v1, v2) => {
    const empty1 = !v1 || v1.length === 0;
    const empty2 = !v2 || v2.length === 0;
    if (empty1 && empty2) {
      return 0;
    }
    if (empty1) {
      return -1;
    }
    if (empty2) {
      return 1;
    }
    // Join with a separator so element boundaries are preserved — otherwise
    // ['a','bc'] and ['ab','c'] would both collapse to "abc" and compare equal.
    return v1.join(',').localeCompare(v2.join(','));
  },
  rowSpanValueGetter: value => multiSelectKey(value),
  renderCell: _GridMultiSelectCell.renderMultiSelectCell,
  renderEditCell: _GridEditMultiSelectCell.renderEditMultiSelectCell,
  valueFormatter: (value, row, rawColDef, apiRef) => {
    const rowId = (0, _internals.gridRowIdSelector)(apiRef, row);
    // Always a multiSelect colDef here — this formatter only lives on `GRID_MULTI_SELECT_COL_DEF`.
    const colDef = rawColDef;
    if (!Array.isArray(value)) {
      // Non-array values can come from aggregation (e.g. size count). Pass through so
      // the aggregation cell renders the number; arrays go through the formatter below.
      return value == null ? '' : value;
    }
    if (value.length === 0) {
      return '';
    }
    const valueOptions = (0, _internals.getValueOptions)(colDef, {
      id: rowId,
      row
    });
    const separator = colDef.separator ?? ',';
    if (!valueOptions || !isArrayOfObjects(valueOptions)) {
      return value.map(v => colDef.getOptionLabel(v)).join(separator);
    }
    const optionByValue = new Map(valueOptions.map(option => [colDef.getOptionValue(option), option]));
    return value.map(v => {
      const valueOption = optionByValue.get(v);
      return valueOption ? colDef.getOptionLabel(valueOption) : String(v);
    }).join(separator);
  },
  filterOperators: (0, _gridMultiSelectOperators.getGridMultiSelectOperators)(),
  getApplyQuickFilterFn: getGridMultiSelectQuickFilterFn,
  // @ts-ignore premium-only
  pastedValueParser: (value, _row, column) => {
    const colDef = column;
    const valueOptions = (0, _internals.getValueOptions)(colDef) || [];
    const getOptionValue = colDef.getOptionValue;
    const getOptionLabel = colDef.getOptionLabel;

    // Split on the column's configured separator in addition to the common delimiters, so a
    // custom `separator` round-trips through copy/paste.
    const separator = colDef.separator ?? ',';
    const delimiters = separator ? `${(0, _internals.escapeRegExp)(separator)}|[,;\\t\\n|]` : '[,;\\t\\n|]';
    const pastedValues = value.split(new RegExp(`(?:${delimiters})+`)).map(v => v.trim()).filter(v => v.length > 0);
    const validValues = pastedValues.map(v => {
      const lower = v.toLowerCase();
      const matchingOption = valueOptions.find(option => {
        const optValue = String(getOptionValue(option)).toLowerCase();
        const optLabel = String(getOptionLabel(option)).toLowerCase();
        return optValue === lower || optLabel === lower;
      });
      return matchingOption ? getOptionValue(matchingOption) : null;
    }).filter(v => v !== null);

    // Drop duplicates so a paste like "React, React" stores a single value.
    const uniqueValues = Array.from(new Set(validValues));
    return uniqueValues.length > 0 ? uniqueValues : undefined;
  }
});