@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
264 lines (260 loc) • 8.19 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_context = require('../../utils/context.cjs');
const require_effect = require('../../utils/effect.cjs');
const require_ref = require('../../utils/ref.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_use_field_props = require('../field/use-field-props.cjs');
const require_hooks_use_focus_index = require('../../hooks/use-focus/index.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
//#region src/components/editable/use-editable.ts
const [EditableContext, useEditableContext] = require_context.createContext({ name: "EditableContext" });
const useEditable = (props = {}) => {
const { props: { id, defaultValue, disabled, placeholder, previewFocusable = true, readOnly, required, selectAllOnFocus = true, startWithEditView, submitOnBlur = true, value: valueProp, onCancel: onCancelProp, onChange: onChangeProp, onEdit: onEditProp, onSubmit: onSubmitProp,...rest }, ariaProps, dataProps, eventProps } = require_use_field_props.useFieldProps(props);
const onEditRef = require_ref.useCallbackRef(onEditProp);
const [editing, setEditing] = (0, react.useState)(!!startWithEditView && !disabled);
const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
defaultValue: defaultValue || "",
value: valueProp,
onChange: onChangeProp
});
const interactive = !editing && !disabled;
const emptyValue = value.length === 0;
const [prevValue, setPrevValue] = (0, react.useState)(value);
const inputRef = (0, react.useRef)(null);
const previewRef = (0, react.useRef)(null);
const editRef = (0, react.useRef)(null);
const cancelRef = (0, react.useRef)(null);
const submitRef = (0, react.useRef)(null);
const onChange = (0, react.useCallback)((ev) => setValue(ev.currentTarget.value), [setValue]);
const onUpdatePrevValue = (0, react.useCallback)(() => setPrevValue(value), [value]);
const onEdit = (0, react.useCallback)(() => {
if (interactive) setEditing(true);
}, [interactive]);
const onCancel = (0, react.useCallback)(() => {
setEditing(false);
setValue(prevValue);
onCancelProp?.(prevValue);
}, [
prevValue,
onCancelProp,
setValue
]);
const onSubmit = (0, react.useCallback)(() => {
setEditing(false);
setPrevValue(value);
onSubmitProp?.(value);
}, [onSubmitProp, value]);
const onKeyDown = (0, react.useCallback)((ev) => {
if (ev.key !== "Escape" && ev.key !== "Enter") return;
ev.preventDefault();
if (ev.key === "Escape") onCancel();
else {
const { metaKey, shiftKey } = ev;
if (!shiftKey && !metaKey) onSubmit();
}
}, [onCancel, onSubmit]);
const onKeyDownWithoutSubmit = (0, react.useCallback)((ev) => {
if (ev.key !== "Escape") return;
ev.preventDefault();
onCancel();
}, [onCancel]);
const onBlur = (0, react.useCallback)((ev) => {
if (!editing) return;
const ownerDocument = ev.currentTarget.ownerDocument;
const relatedTarget = ev.relatedTarget ?? ownerDocument.activeElement;
const targetIsCancel = (0, require_utils_index.utils_exports.contains)(cancelRef.current, relatedTarget);
const targetIsSubmit = (0, require_utils_index.utils_exports.contains)(submitRef.current, relatedTarget);
if (!(!targetIsCancel && !targetIsSubmit)) return;
if (submitOnBlur) onSubmit();
else onCancel();
}, [
editing,
submitOnBlur,
onSubmit,
onCancel
]);
require_hooks_use_focus_index.useFocusOnPointerDown({
ref: inputRef,
elements: [cancelRef, submitRef],
enabled: editing
});
require_effect.useSafeLayoutEffect(() => {
if (!editing) return;
inputRef.current?.focus();
if (selectAllOnFocus) inputRef.current?.select();
}, []);
require_effect.useUpdateEffect(() => {
if (!editing) {
editRef.current?.focus();
return;
}
inputRef.current?.focus();
if (selectAllOnFocus) inputRef.current?.select();
onEditRef();
}, [
editing,
onEditRef,
selectAllOnFocus
]);
(0, react.useEffect)(() => {
if (editing) return;
const el = inputRef.current;
if (el?.ownerDocument.activeElement === el) el?.blur();
}, [editing]);
const getRootProps = (0, react.useCallback)((props$1) => ({
...rest,
...dataProps,
...props$1
}), [rest, dataProps]);
const getPreviewProps = (0, react.useCallback)(({ ref,...props$1 } = {}) => ({
...dataProps,
...props$1,
ref: require_ref.mergeRefs(previewRef, ref),
children: emptyValue ? placeholder : value,
hidden: editing,
tabIndex: interactive && previewFocusable ? 0 : void 0,
onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, onEdit, onUpdatePrevValue)
}), [
dataProps,
editing,
interactive,
previewFocusable,
emptyValue,
onEdit,
onUpdatePrevValue,
placeholder,
value
]);
const getInputProps = (0, react.useCallback)(({ ref,...props$1 } = {}) => ({
...dataProps,
...ariaProps,
...props$1,
id,
ref: require_ref.mergeRefs(inputRef, ref),
disabled,
hidden: !editing,
placeholder,
readOnly,
required,
value,
onBlur: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur, onBlur),
onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onChange),
onFocus: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus, onUpdatePrevValue),
onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
}), [
dataProps,
ariaProps,
id,
disabled,
editing,
placeholder,
readOnly,
required,
value,
eventProps.onBlur,
eventProps.onFocus,
onBlur,
onChange,
onUpdatePrevValue,
onKeyDown
]);
const getTextareaProps = (0, react.useCallback)(({ ref,...props$1 } = {}) => ({
...dataProps,
...ariaProps,
...props$1,
id,
ref: require_ref.mergeRefs(inputRef, ref),
disabled,
hidden: !editing,
placeholder,
readOnly,
required,
value,
onBlur: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur, onBlur),
onChange: (0, require_utils_index.utils_exports.handlerAll)(props$1.onChange, onChange),
onFocus: (0, require_utils_index.utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus, onUpdatePrevValue),
onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onKeyDown, onKeyDownWithoutSubmit)
}), [
dataProps,
ariaProps,
id,
disabled,
editing,
placeholder,
readOnly,
required,
value,
eventProps.onBlur,
eventProps.onFocus,
onBlur,
onChange,
onUpdatePrevValue,
onKeyDownWithoutSubmit
]);
const getControlProps = (0, react.useCallback)((props$1) => ({
...dataProps,
role: "group",
...props$1
}), [dataProps]);
const getEditProps = (0, react.useCallback)(({ ref,...props$1 } = {}) => ({
...dataProps,
...props$1,
ref: require_ref.mergeRefs(editRef, ref),
disabled,
hidden: editing,
onClick: (0, require_utils_index.utils_exports.handlerAll)(props$1.onClick, onEdit)
}), [
dataProps,
disabled,
editing,
onEdit
]);
const getSubmitProps = (0, react.useCallback)(({ ref,...props$1 } = {}) => ({
...dataProps,
...props$1,
ref: require_ref.mergeRefs(submitRef, ref),
disabled,
hidden: !editing,
onClick: (0, require_utils_index.utils_exports.handlerAll)(props$1.onClick, onSubmit)
}), [
dataProps,
disabled,
editing,
onSubmit
]);
return {
editing,
value,
getCancelProps: (0, react.useCallback)(({ ref,...props$1 } = {}) => ({
...dataProps,
...props$1,
ref: require_ref.mergeRefs(cancelRef, ref),
disabled,
hidden: !editing,
onClick: (0, require_utils_index.utils_exports.handlerAll)(props$1.onClick, onCancel)
}), [
dataProps,
disabled,
editing,
onCancel
]),
getControlProps,
getEditProps,
getInputProps,
getPreviewProps,
getRootProps,
getSubmitProps,
getTextareaProps,
onCancel,
onEdit,
onSubmit
};
};
//#endregion
exports.EditableContext = EditableContext;
exports.useEditable = useEditable;
exports.useEditableContext = useEditableContext;
//# sourceMappingURL=use-editable.cjs.map