@mui/x-charts/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

The community edition of MUI X Charts components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useChartHighlight = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _warning = require("@mui/x-internals/warning");
var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
var _useChartSeries = require("../../corePlugins/useChartSeries/useChartSeries");
const useChartHighlight = ({
  store,
  params,
  instance
}) => {
  (0, _useAssertModelConsistency.useAssertModelConsistency)({
    warningPrefix: 'MUI X Charts',
    componentName: 'Chart',
    propName: 'highlightedItem',
    controlled: params.highlightedItem,
    defaultValue: null
  });
  (0, _useEnhancedEffect.default)(() => {
    if (store.state.highlight.item !== params.highlightedItem) {
      if (params.highlightedItem === null) {
        store.set('highlight', (0, _extends2.default)({}, store.state.highlight, {
          item: null
        }));
        return;
      }
      const cleanItem = instance.identifierWithType(params.highlightedItem, 'highlightItem');
      const item = instance.cleanIdentifier(cleanItem, 'highlightItem');
      store.set('highlight', (0, _extends2.default)({}, store.state.highlight, {
        item
      }));
    }
    if (process.env.NODE_ENV !== 'production') {
      if (params.highlightedItem !== undefined && !store.state.highlight.isControlled) {
        (0, _warning.warnOnce)(['MUI X Charts: The `highlightedItem` switched between controlled and uncontrolled state.', 'To remove the highlight when using controlled state, you must provide `null` to the `highlightedItem` prop instead of `undefined`.'].join('\n'));
      }
    }
  }, [store, params.highlightedItem, instance]);
  const clearHighlight = (0, _useEventCallback.default)(() => {
    params.onHighlightChange?.(null);
    const prevHighlight = store.state.highlight;
    if (prevHighlight.item === null || prevHighlight.isControlled) {
      return;
    }
    store.set('highlight', {
      item: null,
      lastUpdate: 'pointer',
      isControlled: false
    });
  });
  const setHighlight = (0, _useEventCallback.default)(newItem => {
    const prevHighlight = store.state.highlight;
    const identifierWithType = instance.identifierWithType(newItem, 'highlightItem');
    const cleanedIdentifier = instance.cleanIdentifier(identifierWithType, 'highlightItem');
    if ((0, _fastObjectShallowCompare.fastObjectShallowCompare)(prevHighlight.item, cleanedIdentifier)) {
      return;
    }
    params.onHighlightChange?.(cleanedIdentifier);
    if (prevHighlight.isControlled) {
      return;
    }
    store.set('highlight', {
      item: cleanedIdentifier,
      lastUpdate: 'pointer',
      isControlled: false
    });
  });
  return {
    instance: {
      clearHighlight,
      setHighlight
    }
  };
};
exports.useChartHighlight = useChartHighlight;
useChartHighlight.getInitialState = (params, currentState) => ({
  highlight: {
    item: params.highlightedItem == null ? params.highlightedItem : (0, _useChartSeries.createIdentifierWithType)(currentState)(
    // Need some as because the generic SeriesType can't be propagated to plugins methods.
    params.highlightedItem),
    lastUpdate: 'pointer',
    isControlled: params.highlightedItem !== undefined
  }
});
useChartHighlight.params = {
  highlightedItem: true,
  onHighlightChange: true
};