mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-22 06:15:47 +00:00
refactor(FE-114): simplify CheckboxInput component and enhance styling options
This commit is contained in:
rstubryan
@@ -1,279 +1,87 @@
|
||||
'use client';
|
||||
|
||||
import { ChangeEventHandler, FocusEventHandler, ReactNode, useId } from 'react';
|
||||
|
||||
import { HTMLProps, useEffect, useRef } from 'react';
|
||||
import { cn } from '@/lib/helper';
|
||||
import FieldMessage from '@/components/helper/FieldMessage';
|
||||
|
||||
export interface CheckboxInputProps {
|
||||
// Basic Props
|
||||
interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
|
||||
name: string;
|
||||
label?: string;
|
||||
bottomLabel?: string;
|
||||
checked?: boolean;
|
||||
value?: string | number;
|
||||
indeterminate?: boolean;
|
||||
naked?: boolean; // New prop for checkbox-only mode
|
||||
|
||||
// Styling Props
|
||||
className?: {
|
||||
classNames?: {
|
||||
wrapper?: string;
|
||||
label?: string;
|
||||
inputWrapper?: string;
|
||||
checkbox?: string;
|
||||
input?: string;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
// State Props
|
||||
isError?: boolean;
|
||||
isValid?: boolean;
|
||||
errorMessage?: string;
|
||||
disabled?: boolean;
|
||||
readOnly?: boolean;
|
||||
required?: boolean;
|
||||
isLoading?: boolean;
|
||||
|
||||
// Adornment Props
|
||||
startAdornment?: ReactNode;
|
||||
endAdornment?: ReactNode;
|
||||
|
||||
// Event Handlers
|
||||
onChange?: ChangeEventHandler<HTMLInputElement>;
|
||||
onBlur?: FocusEventHandler<HTMLInputElement>;
|
||||
onFocus?: FocusEventHandler<HTMLInputElement>;
|
||||
|
||||
// Additional Props
|
||||
tooltip?: string;
|
||||
description?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
variant?:
|
||||
| 'default'
|
||||
| 'primary'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'info'
|
||||
| 'error';
|
||||
}
|
||||
|
||||
const CheckboxInput = ({
|
||||
indeterminate,
|
||||
name,
|
||||
label,
|
||||
bottomLabel,
|
||||
checked = false,
|
||||
value,
|
||||
indeterminate = false,
|
||||
naked = false,
|
||||
className,
|
||||
classNames,
|
||||
isValid,
|
||||
isError,
|
||||
errorMessage,
|
||||
disabled = false,
|
||||
readOnly = false,
|
||||
required = false,
|
||||
isLoading = false,
|
||||
startAdornment,
|
||||
endAdornment,
|
||||
onChange,
|
||||
onBlur,
|
||||
onFocus,
|
||||
tooltip,
|
||||
description,
|
||||
size = 'md',
|
||||
variant = 'default',
|
||||
...rest
|
||||
}: CheckboxInputProps) => {
|
||||
const showErrorMessage = Boolean(isError && errorMessage);
|
||||
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
|
||||
const ref = useRef<HTMLInputElement>(null!);
|
||||
|
||||
// Size classes
|
||||
const sizeClasses = {
|
||||
sm: 'checkbox-sm',
|
||||
md: 'checkbox-md',
|
||||
lg: 'checkbox-lg',
|
||||
};
|
||||
|
||||
// Variant classes
|
||||
const variantClasses = {
|
||||
default: '',
|
||||
primary: 'checkbox-primary',
|
||||
secondary: 'checkbox-secondary',
|
||||
success: 'checkbox-success',
|
||||
warning: 'checkbox-warning',
|
||||
info: 'checkbox-info',
|
||||
error: 'checkbox-error',
|
||||
};
|
||||
|
||||
// Generate unique ID for accessibility using React's useId hook for SSR compatibility
|
||||
const generatedId = useId();
|
||||
const checkboxId = `checkbox-${name}-${generatedId}`;
|
||||
|
||||
// Naked mode - only checkbox, no wrapper structure
|
||||
if (naked) {
|
||||
return (
|
||||
<div className='relative'>
|
||||
<input
|
||||
type='checkbox'
|
||||
id={checkboxId}
|
||||
name={name}
|
||||
value={value}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
onFocus={onFocus}
|
||||
disabled={disabled}
|
||||
readOnly={readOnly}
|
||||
className={cn(
|
||||
'checkbox',
|
||||
sizeClasses[size],
|
||||
variantClasses[variant],
|
||||
{
|
||||
'opacity-50 cursor-not-allowed': disabled,
|
||||
'cursor-pointer': !disabled && !readOnly,
|
||||
},
|
||||
className?.checkbox
|
||||
)}
|
||||
ref={(input) => {
|
||||
if (input) {
|
||||
input.indeterminate = indeterminate;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
<div className='absolute inset-0 flex items-center justify-center'>
|
||||
<span className='loading loading-spinner loading-xs opacity-50' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
useEffect(() => {
|
||||
if (typeof indeterminate === 'boolean') {
|
||||
ref.current.indeterminate = !rest.checked && indeterminate;
|
||||
}
|
||||
}, [ref, indeterminate]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-full flex flex-col gap-2 text-start',
|
||||
className?.wrapper
|
||||
)}
|
||||
className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
|
||||
>
|
||||
{/* Label with Tooltip Support */}
|
||||
{label && (
|
||||
<label
|
||||
htmlFor={checkboxId}
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-row justify-center items-center gap-2',
|
||||
classNames?.inputWrapper
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type='checkbox'
|
||||
ref={ref}
|
||||
id={name}
|
||||
name={name}
|
||||
className={cn(
|
||||
'w-full text-sm font-normal leading-5 flex items-start gap-2',
|
||||
'checkbox cursor-pointer',
|
||||
{
|
||||
'text-error': isError,
|
||||
'text-gray-500': disabled,
|
||||
'border-error': isError,
|
||||
'border-success': isValid,
|
||||
},
|
||||
className?.label
|
||||
className,
|
||||
classNames?.checkbox
|
||||
)}
|
||||
>
|
||||
{/* Checkbox */}
|
||||
<div className='flex items-center gap-2'>
|
||||
{/* Start Adornment */}
|
||||
{startAdornment && (
|
||||
<span className={cn({ 'opacity-50': disabled })}>
|
||||
{startAdornment}
|
||||
</span>
|
||||
{...rest}
|
||||
/>
|
||||
|
||||
{label && (
|
||||
<label
|
||||
htmlFor={name}
|
||||
className={cn(
|
||||
'text-inherit',
|
||||
{
|
||||
'text-error': isError,
|
||||
'text-success': isValid,
|
||||
},
|
||||
classNames?.label
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Checkbox Input */}
|
||||
<div className='relative'>
|
||||
<input
|
||||
type='checkbox'
|
||||
id={checkboxId}
|
||||
name={name}
|
||||
value={value}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
onFocus={onFocus}
|
||||
disabled={disabled}
|
||||
readOnly={readOnly}
|
||||
className={cn(
|
||||
'checkbox',
|
||||
sizeClasses[size],
|
||||
variantClasses[variant],
|
||||
{
|
||||
'opacity-50 cursor-not-allowed': disabled,
|
||||
'cursor-pointer': !disabled && !readOnly,
|
||||
},
|
||||
className?.checkbox
|
||||
)}
|
||||
ref={(input) => {
|
||||
if (input) {
|
||||
input.indeterminate = indeterminate;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
<div className='absolute inset-0 flex items-center justify-center'>
|
||||
<span className='loading loading-spinner loading-xs opacity-50' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Label Text */}
|
||||
<span
|
||||
className={cn('flex-1', {
|
||||
'line-through opacity-50': disabled,
|
||||
})}
|
||||
>
|
||||
{label}
|
||||
{required && (
|
||||
<>
|
||||
{' '}
|
||||
<span
|
||||
className={cn('tooltip', {
|
||||
'tooltip-error': isError,
|
||||
'tooltip-base': !isError,
|
||||
})}
|
||||
data-tip={tooltip || 'required'}
|
||||
>
|
||||
<span
|
||||
className={cn('text-xs font-bold', {
|
||||
'text-error': isError,
|
||||
'text-base-content/70': !isError,
|
||||
})}
|
||||
>
|
||||
*
|
||||
</span>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{/* End Adornment */}
|
||||
{endAdornment && (
|
||||
<span className={cn({ 'opacity-50': disabled })}>
|
||||
{endAdornment}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{description && (
|
||||
<p
|
||||
className={cn('text-xs leading-4', {
|
||||
'text-gray-500': !isError,
|
||||
'text-error': isError,
|
||||
'opacity-50': disabled,
|
||||
})}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Error Message or Bottom Label */}
|
||||
{!isError && bottomLabel && (
|
||||
<p className='w-full text-sm opacity-60'>{bottomLabel}</p>
|
||||
)}
|
||||
{isError && errorMessage && (
|
||||
<p className='w-full text-sm text-error'>{errorMessage}</p>
|
||||
)}
|
||||
{errorMessage && <span className='text-error'>{errorMessage}</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user