@mui/x-tree-view/internals/plugins/useTreeViewLabel/itemPlugin.js

The community edition of the MUI X Tree View components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTreeViewLabelItemPlugin = void 0;
var React = _interopRequireWildcard(require("react"));
var _store = require("@mui/x-internals/store");
var _TreeViewProvider = require("../../TreeViewProvider");
var _useTreeViewLabel = require("./useTreeViewLabel.selectors");
const useTreeViewLabelItemPlugin = ({
  props
}) => {
  const {
    store
  } = (0, _TreeViewProvider.useTreeViewContext)();
  const {
    label,
    itemId
  } = props;
  const [labelInputValue, setLabelInputValue] = React.useState(label);
  const isItemEditable = (0, _store.useStore)(store, _useTreeViewLabel.labelSelectors.isItemEditable, itemId);
  const isItemBeingEdited = (0, _store.useStore)(store, _useTreeViewLabel.labelSelectors.isItemBeingEdited, itemId);
  React.useEffect(() => {
    if (!isItemBeingEdited) {
      setLabelInputValue(label);
    }
  }, [isItemBeingEdited, label]);
  return {
    propsEnhancers: {
      label: () => ({
        editable: isItemEditable
      }),
      labelInput: ({
        externalEventHandlers,
        interactions
      }) => {
        if (!isItemEditable) {
          return {};
        }
        const handleKeydown = event => {
          externalEventHandlers.onKeyDown?.(event);
          if (event.defaultMuiPrevented) {
            return;
          }
          const target = event.target;
          if (event.key === 'Enter' && target.value) {
            interactions.handleSaveItemLabel(event, target.value);
          } else if (event.key === 'Escape') {
            interactions.handleCancelItemLabelEditing(event);
          }
        };
        const handleBlur = event => {
          externalEventHandlers.onBlur?.(event);
          if (event.defaultMuiPrevented) {
            return;
          }
          if (event.target.value) {
            interactions.handleSaveItemLabel(event, event.target.value);
          }
        };
        const handleInputChange = event => {
          externalEventHandlers.onChange?.(event);
          setLabelInputValue(event.target.value);
        };
        return {
          value: labelInputValue ?? '',
          'data-element': 'labelInput',
          onChange: handleInputChange,
          onKeyDown: handleKeydown,
          onBlur: handleBlur,
          autoFocus: true,
          type: 'text'
        };
      }
    }
  };
};
exports.useTreeViewLabelItemPlugin = useTreeViewLabelItemPlugin;