Edit in place hook

packages/components/src/index.js

@@ -164,3 +164,5 @@ export {
 	__unstableWithNext,
 	__unstableComponentSystemProvider,
 } from './__next/context';
+
+export { useInlineEdit } from './inline-edit';

packages/components/src/inline-edit/README.MD

@@ -0,0 +1,6 @@
+Hook providing with data to bend two elements.
+
+One of which sets 'isEdit' state to true upon clicking, second sets 'isEdit' state to false on 'Enter'/onBlur event and triggering onCommit callback with its value.
+
+
+The hook was designed to be a component in the first place, but hook gives more flexibility. See more: https://github.com/WordPress/gutenberg/pull/28924

packages/components/src/inline-edit/hook.js

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import { isUndefined, negate, noop, flow } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, useRef } from '@wordpress/element';
+
+const cancelEvent = ( event ) => (
+	event.preventDefault(), event.stopPropagation(), event
+);
+
+const getEventValue = ( { target: { value } } ) => value;
+const mergeEvent = ( ...handlers ) => ( event ) =>
+	handlers.forEach( ( handler = noop ) => handler( event ) );
+
+export default function useInlineEdit( {
+	validate = negate( isUndefined ),
+	onWrongInput = noop,
+	onCommit = noop,
+	value: propValue,
+} ) {
+	const [ isInEditMode, setIsInEditMode ] = useState( false );
+	const [ editingValue, setEditingValue ] = useState( propValue );
+	const inputRef = useRef();
+	const toggleRef = useRef();
+	const isInvalid = negate( validate );
+	const changeToEditMode = () => setIsInEditMode( true );
+	const changeToToggleMode = () => setIsInEditMode( false );
+
+	useEffect( () => {
+		setEditingValue( propValue );
+		if ( isInvalid( value ) ) onWrongInput( value );
+	}, [ propValue ] );
+
+	useEffect( () => {
+		if ( isInEditMode ) {
+			inputRef.current.focus();
+			inputRef.current.select();
+			setEditingValue( propValue );
+		} else {
+			toggleRef.current.focus();
+		}
+	}, [ isInEditMode ] );
+
+	const commit = ( event ) => {
+		const { value } = event.target;
+		cancelEvent( event );
+		if ( validate( value ) ) {
+			changeToToggleMode();
+			onCommit( value );
+		} else {
+			onWrongInput( value );
+		}
+	};
+
+	const handleInputActions = ( event ) => {
+		if ( 'Enter' === event.key ) {
+			commit( event );
+		}
+		if ( 'Escape' === event.key ) {
+			cancelEvent( event );
+			event.target.blur();
+			changeToToggleMode();
+		} else {
+			const { value } = event.target;
+			setEditingValue( value );
+		}
+	};
+
+	const amendInputProps = ( {
+		onChange,
+		onKeyDown,
+		onBlur,
+		...inputProps
+	} = {} ) => ( {
+		ref: inputRef,
+		onChange: mergeEvent(
+			flow( [ getEventValue, setEditingValue ] ),
+			onChange
+		),
+		onKeyDown: mergeEvent( handleInputActions, onKeyDown ),
+		onBlur: mergeEvent( commit, onBlur ),
+		...inputProps,
+	} );
+
+	const amendToggleProps = ( { onClick, ...toggleProps } = {} ) => ( {
+		ref: toggleRef,
+		onClick: mergeEvent( changeToEditMode, onClick ),
+		...toggleProps,
+	} );
+
+	const value = isInEditMode ? editingValue : propValue;
+
+	return {
+		isEdit: isInEditMode,
+		amendInputProps,
+		amendToggleProps,
+		value,
+	};
+}

packages/components/src/inline-edit/index.js

@@ -0,0 +1 @@
+export { default as useInlineEdit } from './hook';

packages/components/src/inline-edit/stories/index.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { pick } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import useInlineEdit from '../hook';
+
+export default {
+	title: 'Components/EditInPlaceControl',
+	component: MyCustomEditInPlaceControl,
+};
+
+function MyCustomEditInPlaceControl( props = {} ) {
+	const { isEdit, amendInputProps, amendToggleProps, value } = useInlineEdit(
+		props
+	);
+	return (
+		<>
+			{ isEdit ? (
+				<input { ...amendInputProps( { value } ) } />
+			) : (
+				<button { ...amendToggleProps( pick( props, 'onClick' ) ) }>
+					{ value }
+				</button>
+			) }
+		</>
+	);
+}
+
+export const _default = () => {
+	const validate = ( _value = '' ) => _value.length > 0;
+	const initialValue = text( 'Initial value', 'Input initial value' );
+	const [ onClickCallbacks, setOnClickCallbacks ] = useState( 0 );
+	const [ ocCommitCallbacks, setOnCommitCallbacks ] = useState( 0 );
+	const [ value, setValue ] = useState( initialValue );
+	const [ isInputValid, setIsInputValid ] = useState( true );
+
+	const incrementOnClickCallbacks = () =>
+		setOnClickCallbacks( 1 + onClickCallbacks );
+
+	const incrementOnCommitCallbacks = () =>
+		setOnCommitCallbacks( 1 + ocCommitCallbacks );
+
+	const props = {
+		value,
+		validate,
+		onClick: incrementOnClickCallbacks,
+		inputValidator: validate,
+		onCommit: ( _value ) => (
+			setValue( _value ),
+			incrementOnCommitCallbacks(),
+			setIsInputValid( true )
+		),
+		onWrongInput: () => setIsInputValid( false ),
+	};
+
+	return (
+		<>
+			<MyCustomEditInPlaceControl { ...props } />
+			<ul>
+				<li> onClick callbacks: { onClickCallbacks } </li>
+				<li> onCommit callback: { ocCommitCallbacks } </li>
+				<li> inputValidator: is defined </li>
+				<li> is commited input valid: { isInputValid + '' } </li>
+			</ul>
+		</>
+	);
+};