GW_MC/YANPM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add InfoIcon component with tooltip support and integrate into TextField

Browse Source
This commit is contained in:
GW_MC
2025-12-19 20:08:39 +08:00
parent 737797f6dd
commit a0a9584a4d
4 changed files with 69 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/frontend/app/components/Form/TextField.tsx
View File

@@ -1,6 +1,7 @@
import type { AnyFieldMeta } from '@tanstack/react-form';
import { LucideEye, LucideEyeClosed } from 'lucide-react';
import { useCallback, useId, useState } from 'react';
import { InfoIcon, type InfoIconProps } from '../info';
export type TextFieldProps = {
label?: string;
@@ -8,12 +9,13 @@ export type TextFieldProps = {
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
labelDivProps?: React.HTMLAttributes<HTMLDivElement>;
infoIconProps?: InfoIconProps;
} & React.InputHTMLAttributes<HTMLInputElement> & {
type?: 'password';
showPasswordToggle?: boolean;
};
export function TextField({ label, value, onChange, labelProps, labelDivProps, showPasswordToggle, ...rest }: TextFieldProps) {
export function TextField({ label, value, onChange, labelProps, labelDivProps, showPasswordToggle, infoIconProps, ...rest }: TextFieldProps) {
const id = useId();
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const handlePasswordVisibilitySet = useCallback(
@@ -24,11 +26,13 @@ export function TextField({ label, value, onChange, labelProps, labelDivProps, s
},
[rest.type]
);
return (
<label htmlFor={id} style={{ display: 'block', marginBottom: 8 }} {...labelProps}>
{label && (
<div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6 }} {...labelDivProps}>
<div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6, display: 'flex', alignItems: 'center' }} {...labelDivProps}>
{label}
{infoIconProps && <InfoIcon {...infoIconProps} style={{ marginLeft: 4, verticalAlign: 'middle' }} />}
</div>
)}
<div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8 }}>