added tooltip to input fields, "hit enter to save"

sinamics · Aug 19, 2023 · cda4774 · cda4774
1 parent 0bff050
commit cda4774
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 49 deletions.
diff --git a/src/components/elements/input.tsx b/src/components/elements/input.tsx
@@ -1,8 +1,11 @@
-import { forwardRef, useEffect } from "react";
+import { forwardRef, useEffect, useState } from "react";
+import cn from "classnames";
+import { useTranslations } from "next-intl";
 
 interface InputProps {
 	placeholder: string;
 	value?: string | number;
+	useTooltip?: boolean;
 	name: string;
 	type: string;
 	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -25,18 +28,30 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 			className = "",
 			defaultValue,
 			focus = false,
+			useTooltip = false,
 			...rest
 		}: InputProps,
 		forwardedRef,
 	) => {
+		const t = useTranslations("input");
+		const [isFocused, setIsFocused] = useState(false);
 		const handleRef = (instance: HTMLInputElement | null) => {
 			if (typeof forwardedRef === "function") {
 				forwardedRef(instance);
 			} else if (forwardedRef) {
 				forwardedRef.current = instance;
 			}
 		};
+		const handleFocus = () => {
+			setIsFocused(true);
+		};
 
+		const handleBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
+			setIsFocused(false);
+			if (onBlur) {
+				onBlur(event);
+			}
+		};
 		useEffect(() => {
 			if (focus && forwardedRef && "current" in forwardedRef) {
 				forwardedRef.current?.focus();
@@ -61,16 +76,22 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 		}, [defaultValue, onChange, forwardedRef]);
 
 		return (
-			<input
-				name={name}
-				defaultValue={defaultValue}
-				value={value}
-				onChange={onChange}
-				onBlur={onBlur}
-				className={`input ${className}`}
-				ref={handleRef}
-				{...rest}
-			/>
+			<div
+				className={cn({ tooltip: useTooltip && isFocused })}
+				data-tip={t("enterToSave")}
+			>
+				<input
+					name={name}
+					defaultValue={defaultValue}
+					value={value}
+					onChange={onChange}
+					onBlur={handleBlur}
+					onFocus={handleFocus}
+					className={`input ${className}`}
+					ref={handleRef}
+					{...rest}
+				/>
+			</div>
 		);
 	},
 );

diff --git a/src/components/modules/anotation.tsx b/src/components/modules/anotation.tsx
@@ -100,6 +100,7 @@ const Anotation = ({ nwid, nodeid }: IProps) => {
 				</div>
 				<form>
 					<Input
+						useTooltip
 						type="text"
 						className="input-bordered input-sm"
 						name="name"

diff --git a/src/components/modules/networkDescription.tsx b/src/components/modules/networkDescription.tsx
@@ -10,6 +10,7 @@ import {
 } from "@tanstack/react-query";
 import { type CentralNetwork } from "~/types/central/network";
 import { type NetworkEntity } from "~/types/local/network";
+import cn from "classnames";
 
 interface IProp {
 	central?: boolean;
@@ -46,14 +47,37 @@ const updateCache = ({
 	);
 };
 const NetworkDescription = ({ central = false }: IProp) => {
-	const t = useTranslations("networkById");
-	const client = useQueryClient();
-	const { query } = useRouter();
+	const t = useTranslations();
+	const textareaRef = React.useRef<HTMLTextAreaElement>(null); // <-- Create a ref for the textarea
 	const [state, setState] = useState({
 		toggleDescriptionInput: false,
 		description: "",
 	});
 
+	useEffect(() => {
+		if (state.toggleDescriptionInput && textareaRef.current) {
+			textareaRef.current.focus(); // <-- Programmatically set focus when toggleDescriptionInput is true
+		}
+	}, [state.toggleDescriptionInput]);
+
+	const [isTextareaFocused, setTextareaFocused] = useState(false);
+
+	const handleTextareaFocus = () => {
+		setTextareaFocused(true);
+
+		if (textareaRef.current) {
+			const length = textareaRef.current.value.length;
+			textareaRef.current.selectionStart = length;
+			textareaRef.current.selectionEnd = length;
+		}
+	};
+
+	const handleTextareaBlur = () => {
+		setTextareaFocused(false);
+	};
+	const client = useQueryClient();
+	const { query } = useRouter();
+
 	const {
 		data: networkById,
 		isLoading: loadingNetwork,
@@ -101,8 +125,8 @@ const NetworkDescription = ({ central = false }: IProp) => {
 					{errorNetwork.message}
 				</h1>
 				<ul className="list-disc">
-					<li>{t("errorSteps.step1")}</li>
-					<li>{t("errorSteps.step2")}</li>
+					<li>{t("networkById.errorSteps.step1")}</li>
+					<li>{t("networkById.errorSteps.step2")}</li>
 				</ul>
 			</div>
 		);
@@ -137,44 +161,52 @@ const NetworkDescription = ({ central = false }: IProp) => {
 						className="cursor-pointer border-l-4 border-primary p-2 leading-snug"
 						style={{ caretColor: "transparent" }}
 					>
-						{t("addDescription")}
+						{t("networkById.addDescription")}
 					</div>
 				)
 			) : (
 				<form>
-					<textarea
-						rows={3}
-						value={state?.description}
-						name="description"
-						onChange={eventHandler}
-						maxLength={255}
-						style={{ maxHeight: "100px" }}
-						className="custom-scrollbar textarea textarea-primary w-full leading-snug "
-						placeholder={t("descriptionPlaceholder")}
-						onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-							if (e.key === "Enter" && !e.shiftKey) {
-								e.preventDefault();
-								// submit form when Enter key is pressed and Shift key is not held down.
-								const target = e.target as HTMLTextAreaElement;
-								networkDescription(
-									{
-										nwid: network.id,
-										central,
-										updateParams: { description: target.value },
-									},
-									{
-										onSuccess: () => {
-											void refetchNetwork();
-											setState({
-												...state,
-												toggleDescriptionInput: !state.toggleDescriptionInput,
-											});
+					<div
+						className={cn("w-full", { tooltip: isTextareaFocused })}
+						data-tip={t("input.enterToSave")}
+					>
+						<textarea
+							ref={textareaRef}
+							rows={3}
+							value={state?.description}
+							name="description"
+							onChange={eventHandler}
+							maxLength={255}
+							style={{ maxHeight: "100px" }}
+							className="custom-scrollbar textarea textarea-primary w-full leading-snug "
+							placeholder={t("networkById.descriptionPlaceholder")}
+							onFocus={handleTextareaFocus}
+							onBlur={handleTextareaBlur}
+							onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+								if (e.key === "Enter" && !e.shiftKey) {
+									e.preventDefault();
+									// submit form when Enter key is pressed and Shift key is not held down.
+									const target = e.target as HTMLTextAreaElement;
+									networkDescription(
+										{
+											nwid: network.id,
+											central,
+											updateParams: { description: target.value },
 										},
-									},
-								);
-							}
-						}}
-					></textarea>
+										{
+											onSuccess: () => {
+												void refetchNetwork();
+												setState({
+													...state,
+													toggleDescriptionInput: !state.toggleDescriptionInput,
+												});
+											},
+										},
+									);
+								}
+							}}
+						></textarea>
+					</div>
 				</form>
 			)}
 		</div>

diff --git a/src/components/modules/networkName.tsx b/src/components/modules/networkName.tsx
@@ -139,6 +139,7 @@ const NetworkName = ({ central = false }: IProp) => {
 					<form onSubmit={changeNameHandler}>
 						<Input
 							focus
+							useTooltip
 							name="networkName"
 							onChange={eventHandler}
 							defaultValue={network?.name}

diff --git a/src/components/modules/table/memberEditCell.tsx b/src/components/modules/table/memberEditCell.tsx
@@ -126,6 +126,7 @@ const MemberEditCell = ({ nwid, central = false }: IProp) => {
 									></div>
 								))}
 							<Input
+								useTooltip
 								ref={inputRef}
 								placeholder={t("networkMembersTable.tableRow.updateName")}
 								name="networkName"

diff --git a/src/locales/en/common.json b/src/locales/en/common.json
@@ -1,4 +1,7 @@
 {
+	"input": {
+		"enterToSave": "Hit Enter to save"
+	},
 	"changeButton": {
 		"change": "Change",
 		"submit": "Submit",

diff --git a/src/locales/es/common.json b/src/locales/es/common.json
@@ -1,4 +1,7 @@
 {
+	"input": {
+		"enterToSave": "Pulsa Enter para guardar"
+	},
 	"changeButton": {
 		"change": "Cambiar",
 		"submit": "Enviar",

diff --git a/src/locales/no/common.json b/src/locales/no/common.json
@@ -1,4 +1,7 @@
 {
+	"input": {
+		"enterToSave": "Trykk Enter for å lagre"
+	},
 	"changeButton": {
 		"change": "Endre",
 		"submit": "Send inn",

diff --git a/src/locales/zh/common.json b/src/locales/zh/common.json
@@ -1,4 +1,7 @@
 {
+	"input": {
+		"enterToSave": "按 Enter 保存"
+	},
 	"changeButton": {
 		"change": "更改",
 		"submit": "提交",