DMC/studentportalen
1
1
Fork 0
Code Issues 50 Pull Requests 1 Actions Projects 1 Wiki Activity

Text input component #30

Merged
stne3960 merged 35 commits from text_input into main 2025-12-16 17:59:33 +01:00
Conversation 6 Commits 35 Files Changed 3 +12 -13
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1fe96800ca - Show all commits

25
frontend/src/components/TextInput/TextInput.tsx
View File

@ -1,4 +1,4 @@
import type { InputHTMLAttributes, ReactNode, CSSProperties } from 'react'; import type { InputHTMLAttributes, ReactNode } from 'react';
// isValidElement: checks if something is a React element (e.g., <svg>, <MyComponent />) // isValidElement: checks if something is a React element (e.g., <svg>, <MyComponent />)
// cloneElement: creates a copy of a React element with modified/additional props // cloneElement: creates a copy of a React element with modified/additional props
import { cloneElement, isValidElement } from 'react'; import { cloneElement, isValidElement } from 'react';
@ -40,16 +40,16 @@ const textClasses: Record<TextInputSize, string> = {
lg: 'body-normal-lg', lg: 'body-normal-lg',
}; };
const iconContainerStyles: Record<TextInputSize, CSSProperties> = { const iconContainerSizeClasses: Record<TextInputSize, string> = {
sm: { width: 'var(--control-height-sm)', height: 'var(--control-height-sm)' }, sm: 'w-(--control-height-sm) h-(--control-height-sm)',
md: { width: 'var(--control-height-md)', height: 'var(--control-height-md)' }, md: 'w-(--control-height-md) h-(--control-height-md)',
lg: { width: 'var(--control-height-lg)', height: 'var(--control-height-lg)' }, lg: 'w-(--control-height-lg) h-(--control-height-lg)',
}; };
const iconStyles: Record<TextInputSize, CSSProperties> = { const iconSizeClasses: Record<TextInputSize, string> = {
sm: { width: 'var(--font-size-body-md)', height: 'var(--font-size-body-md)' }, sm: 'w-(--font-size-body-md) h-(--font-size-body-md)',
md: { width: 'var(--font-size-body-md)', height: 'var(--font-size-body-md)' }, md: 'w-(--font-size-body-md) h-(--font-size-body-md)',
lg: { width: 'var(--font-size-body-lg)', height: 'var(--font-size-body-lg)' }, lg: 'w-(--font-size-body-lg) h-(--font-size-body-lg)',
}; };
const baseClasses = 'bg-base-canvas border-[length:var(--border-width-sm)] border-base-ink-medium'; const baseClasses = 'bg-base-canvas border-[length:var(--border-width-sm)] border-base-ink-medium';
@ -84,11 +84,10 @@ export default function TextInput({
> >
{icon && ( {icon && (
<div <div
className="flex items-center justify-center shrink-0 text-base-ink-placeholder" className={`flex items-center justify-center shrink-0 text-base-ink-placeholder ${iconContainerSizeClasses[size]}`}
style={iconContainerStyles[size]}
> >
{isValidElement<{ style?: CSSProperties }>(icon) {isValidElement<{ className?: string }>(icon)
? cloneElement(icon, { style: iconStyles[size] }) ? cloneElement(icon, { className: iconSizeClasses[size] })
: icon} : icon}
</div> </div>
)} )}