Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-23 10:51:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: remove unnecessary useMemo hooks

Browse Source
This commit is contained in:
whintersnow0
2025-10-15 19:19:08 +02:00
parent a4cc35fc20
commit 3dc71a8d1f
1 changed files with 14 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/renderer/src/components/text-field/text-field.tsx
View File

@@ -1,16 +1,13 @@
import React, { useId, useMemo, useState } from "react"; import React, { useId, useState } from "react";
import { EyeClosedIcon, EyeIcon } from "@primer/octicons-react"; import { EyeClosedIcon, EyeIcon } from "@primer/octicons-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import cn from "classnames"; import cn from "classnames";
import "./text-field.scss"; import "./text-field.scss";
export interface TextFieldProps export interface TextFieldProps extends React.DetailedHTMLProps<
extends React.DetailedHTMLProps< React.InputHTMLAttributes<HTMLInputElement>,
React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement
HTMLInputElement > {
> {
theme?: "primary" | "dark"; theme?: "primary" | "dark";
label?: string | React.ReactNode; label?: string | React.ReactNode;
hint?: string | React.ReactNode; hint?: string | React.ReactNode;
@@ -42,44 +39,27 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
) => { ) => {
const id = useId(); const id = useId();
const [isFocused, setIsFocused] = useState(false); const [isFocused, setIsFocused] = useState(false);
const [isPasswordVisible, setIsPasswordVisible] = useState(false); const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const { t } = useTranslation("forms"); const { t } = useTranslation("forms");
const showPasswordToggleButton = props.type === "password"; const showPasswordToggleButton = props.type === "password";
const inputType = props.type === "password" && isPasswordVisible ? "text" : props.type ?? "text";
const inputType = useMemo(() => { const hintContent = error ? (
if (props.type === "password" && isPasswordVisible) return "text"; <small className="text-field-container__error-label">{error}</small>
return props.type ?? "text"; ) : hint ? (
}, [props.type, isPasswordVisible]); <small>{hint}</small>
) : null;
const hintContent = useMemo(() => {
if (error)
return (
<small className="text-field-container__error-label">{error}</small>
);
if (hint) return <small>{hint}</small>;
return null;
}, [hint, error]);
const handleFocus: React.FocusEventHandler<HTMLInputElement> = (event) => { const handleFocus: React.FocusEventHandler<HTMLInputElement> = (event) => {
setIsFocused(true); setIsFocused(true);
if (props.onFocus) props.onFocus(event); props.onFocus?.(event);
}; };
const handleBlur: React.FocusEventHandler<HTMLInputElement> = (event) => { const handleBlur: React.FocusEventHandler<HTMLInputElement> = (event) => {
setIsFocused(false); setIsFocused(false);
if (props.onBlur) props.onBlur(event); props.onBlur?.(event);
}; };
const hasError = !!error; const hasError = !!error;
return ( return (
<div className="text-field-container" {...containerProps}> <div className="text-field-container" {...containerProps}>
{label && <label htmlFor={id}>{label}</label>} {label && <label htmlFor={id}>{label}</label>}
<div className="text-field-container__text-field-wrapper"> <div className="text-field-container__text-field-wrapper">
<div <div
className={cn( className={cn(
@@ -104,7 +84,6 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
onBlur={handleBlur} onBlur={handleBlur}
type={inputType} type={inputType}
/> />
{showPasswordToggleButton && ( {showPasswordToggleButton && (
<button <button
type="button" type="button"
@@ -120,14 +99,11 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
</button> </button>
)} )}
</div> </div>
{rightContent} {rightContent}
</div> </div>
{hintContent} {hintContent}
</div> </div>
); );
} }
); );
TextField.displayName = "TextField";
TextField.displayName = "TextField";