rsuite/cjs/InlineEdit/useEditState.js

A suite of react components

'use client';
"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = require("react");
var _hooks = require("../internals/hooks");
const useEditState = props => {
  const {
    value: valueProp,
    defaultValue,
    disabled,
    onChange,
    onEdit,
    onCancel,
    onSave,
    onClick,
    onFocus,
    ...htmlProps
  } = props;
  const [isEditing, setIsEditing] = (0, _react.useState)(false);
  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);

  // When editing, the value is not updated, and the original value is restored when canceling
  const [resetValue, setResetValue] = (0, _react.useState)();
  const handleClick = (0, _hooks.useEventCallback)(event => {
    if (disabled) {
      return;
    }
    onClick?.(event);
    onEdit?.(event);
    setIsEditing(true);
    setResetValue(value);
  });
  const handleFocus = (0, _hooks.useEventCallback)(event => {
    if (disabled || isEditing) return;
    onFocus?.(event);
    setIsEditing(true);
    setResetValue(value);
  });
  const handleChange = (0, _hooks.useEventCallback)((value, event) => {
    setValue(value);
    onChange?.(value, event);
  });
  const handleCancel = (0, _hooks.useEventCallback)(event => {
    setIsEditing(false);
    setValue(resetValue);
    onCancel?.(event);
    event?.stopPropagation?.();
  });
  const handleSave = (0, _hooks.useEventCallback)(event => {
    setIsEditing(false);
    onSave?.(event);
    event?.stopPropagation?.();
  });
  const handleKeyDown = (0, _hooks.useEventCallback)(event => {
    if (isEditing) {
      switch (event.key) {
        case 'Enter':
          if (event.target?.tagName === 'INPUT') {
            handleSave(event);
          }
          break;
        case 'Escape':
          handleCancel(event);
          break;
      }
    }
  });
  return {
    isEditing,
    value,
    onClick: handleClick,
    onChange: handleChange,
    onFocus: handleFocus,
    onCancel: handleCancel,
    onSave: handleSave,
    onKeyDown: handleKeyDown,
    htmlProps
  };
};
var _default = exports.default = useEditState;