feat(@clayui/form): LPD-53483 Add ClayInput.InlineText

Author: pat270

packages/clay-form/src/Input.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import ClayIcon from '@clayui/icon';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -155,6 +156,97 @@ const GroupInsetItem = React.forwardRef<
 
 GroupInsetItem.displayName = 'ClayInputGroupInsetItem';
 
+interface IInlineTextProps
+	extends React.HTMLAttributes<
+		HTMLDivElement | HTMLSpanElement | HTMLLabelElement
+	> {
+	/**
+	 * The id of the component
+	 */
+	id?: string;
+
+	/**
+	 * Text that hints at the expected data type to be entered.
+	 */
+	placeholder?: string;
+
+	/**
+	 * A flag that sets the component as noneditable.
+	 */
+	readOnly?: boolean;
+
+	/**
+	 * Path to the spritemap that Icon should use when referencing symbols.
+	 */
+	spritemap?: string;
+}
+
+const InlineText = React.forwardRef<
+	HTMLDivElement | HTMLSpanElement | HTMLLabelElement,
+	IInlineTextProps
+>(
+	({
+		children,
+		className,
+		id,
+		placeholder,
+		readOnly,
+		spritemap,
+		...otherProps
+	}: IInlineTextProps) => {
+		const inputRef = React.useRef<HTMLDivElement>(null);
+
+		const [inputValue, setInputValue] = React.useState('');
+
+		return (
+			<div className="form-control-fit-content inline-text-input">
+				<div className={classNames('form-control', className)}>
+					<Input
+						aria-hidden
+						className="form-control-hidden"
+						id={id}
+						onFocus={() => {
+							inputRef.current?.focus();
+						}}
+						readOnly
+						tabIndex={-1}
+						type="text"
+						value={inputValue}
+					/>
+					<span
+						className="form-control-inset"
+						// @ts-ignore
+						contentEditable={readOnly ? false : 'plaintext-only'}
+						onBlur={(event) => {
+							if (inputValue.trim() === '') {
+								const input = event.target as HTMLElement;
+
+								input.innerHTML = '';
+							}
+						}}
+						onInput={(event) => {
+							const input = event.target as HTMLElement;
+
+							setInputValue(input.innerText);
+						}}
+						placeholder={placeholder}
+						ref={inputRef}
+						role="textbox"
+						tabIndex={0}
+						{...otherProps}
+					/>
+					<span className="form-control-indicator form-control-item">
+						<ClayIcon spritemap={spritemap} symbol="pencil" />
+					</span>
+					{children}
+				</div>
+			</div>
+		);
+	}
+);
+
+InlineText.displayName = 'ClayInlineText';
+
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	/**
 	 * Input component to render. Can either be a string like 'input' or 'textarea' or a component.
@@ -183,6 +275,7 @@ interface IForwardRef<T, P = {}>
 	GroupInsetItem: typeof GroupInsetItem;
 	GroupItem: typeof GroupItem;
 	GroupText: typeof GroupText;
+	InlineText: typeof InlineText;
 }
 
 function forwardRef<T, P = {}>(component: React.RefForwardingComponent<T, P>) {
@@ -221,5 +314,6 @@ Input.Group = Group;
 Input.GroupInsetItem = GroupInsetItem;
 Input.GroupItem = GroupItem;
 Input.GroupText = GroupText;
+Input.InlineText = InlineText;
 
 export default Input;