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

The community edition of the MUI X Tree View components.

'use client';

import * as React from 'react';
import { useStore } from '@mui/x-internals/store';
import { useTreeViewContext } from "../../TreeViewProvider/index.js";
import { labelSelectors } from "./selectors.js";
export const useLabelEditingItemPlugin = ({
  props
}) => {
  const {
    store
  } = useTreeViewContext();
  const {
    label,
    itemId
  } = props;
  const [labelInputValue, setLabelInputValue] = React.useState(label);
  const isItemEditable = useStore(store, labelSelectors.isItemEditable, itemId);
  const isItemBeingEdited = useStore(store, 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'
        };
      }
    }
  };
};