gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 07:45:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-114): simplify CheckboxInput component and enhance styling options

Browse Source
This commit is contained in:
rstubryan
2025-10-23 13:49:43 +07:00
parent 7e53743b07
commit 2de32dc944
3 changed files with 157 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/CheckboxInput.tsx
+51 -243
View File
@@ -1,279 +1,87 @@
'use client'; 'use client';
import { ChangeEventHandler, FocusEventHandler, ReactNode, useId } from 'react'; import { HTMLProps, useEffect, useRef } from 'react';
import { cn } from '@/lib/helper'; import { cn } from '@/lib/helper';
import FieldMessage from '@/components/helper/FieldMessage';
export interface CheckboxInputProps { interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
// Basic Props
name: string; name: string;
label?: string; label?: string;
bottomLabel?: string;
checked?: boolean;
value?: string | number;
indeterminate?: boolean; indeterminate?: boolean;
naked?: boolean; // New prop for checkbox-only mode classNames?: {
// Styling Props
className?: {
wrapper?: string; wrapper?: string;
label?: string; inputWrapper?: string;
checkbox?: string; checkbox?: string;
input?: string; label?: string;
}; };
// State Props
isError?: boolean; isError?: boolean;
isValid?: boolean; isValid?: boolean;
errorMessage?: string; 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 = ({ const CheckboxInput = ({
indeterminate,
name, name,
label, label,
bottomLabel,
checked = false,
value,
indeterminate = false,
naked = false,
className, className,
classNames,
isValid,
isError, isError,
errorMessage, errorMessage,
disabled = false, ...rest
readOnly = false,
required = false,
isLoading = false,
startAdornment,
endAdornment,
onChange,
onBlur,
onFocus,
tooltip,
description,
size = 'md',
variant = 'default',
}: CheckboxInputProps) => { }: CheckboxInputProps) => {
const showErrorMessage = Boolean(isError && errorMessage); const ref = useRef<HTMLInputElement>(null!);
const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
// Size classes useEffect(() => {
const sizeClasses = { if (typeof indeterminate === 'boolean') {
sm: 'checkbox-sm', ref.current.indeterminate = !rest.checked && indeterminate;
md: 'checkbox-md', }
lg: 'checkbox-lg', }, [ref, indeterminate]);
};
// 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>
);
}
return ( return (
<div <div
className={cn( className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
'w-full flex flex-col gap-2 text-start',
className?.wrapper
)}
> >
{/* Label with Tooltip Support */} <div
{label && ( className={cn(
<label 'flex flex-row justify-center items-center gap-2',
htmlFor={checkboxId} classNames?.inputWrapper
)}
>
<input
type='checkbox'
ref={ref}
id={name}
name={name}
className={cn( className={cn(
'w-full text-sm font-normal leading-5 flex items-start gap-2', 'checkbox cursor-pointer',
{ {
'text-error': isError, 'border-error': isError,
'text-gray-500': disabled, 'border-success': isValid,
}, },
className?.label className,
classNames?.checkbox
)} )}
> {...rest}
{/* Checkbox */} />
<div className='flex items-center gap-2'>
{/* Start Adornment */} {label && (
{startAdornment && ( <label
<span className={cn({ 'opacity-50': disabled })}> htmlFor={name}
{startAdornment} className={cn(
</span> 'text-inherit',
{
'text-error': isError,
'text-success': isValid,
},
classNames?.label
)} )}
>
{label}
</label>
)}
</div>
{/* Checkbox Input */} {errorMessage && <span className='text-error'>{errorMessage}</span>}
<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>
)}
</div> </div>
); );
}; };
src/components/pages/inventory/movement/form/MovementForm.tsx
+30 -14
View File
@@ -847,7 +847,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
selectedProducts.length && selectedProducts.length &&
formik.values.products?.length > 0 formik.values.products?.length > 0
} }
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedProducts( setSelectedProducts(
formik.values.products?.map( formik.values.products?.map(
@@ -858,8 +860,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
setSelectedProducts([]); setSelectedProducts([]);
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</th> </th>
@@ -890,11 +894,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<tr key={`product-row-${idx}-${product.product_id}`}> <tr key={`product-row-${idx}-${product.product_id}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<div className='flex flex-col items-center gap-2'> <div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`product-${idx}`} name={`product-${idx}`}
checked={selectedProducts.includes(idx)} checked={selectedProducts.includes(idx)}
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedProducts([ setSelectedProducts([
...selectedProducts, ...selectedProducts,
@@ -906,8 +912,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
); );
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</td> </td>
@@ -1061,7 +1069,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
selectedDeliveries.length && selectedDeliveries.length &&
formik.values.deliveries?.length > 0 formik.values.deliveries?.length > 0
} }
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedDeliveries( setSelectedDeliveries(
formik.values.deliveries?.map( formik.values.deliveries?.map(
@@ -1072,8 +1082,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
setSelectedDeliveries([]); setSelectedDeliveries([]);
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</th> </th>
@@ -1150,11 +1162,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
<tr key={`delivery-row-${idx}`}> <tr key={`delivery-row-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<div className='flex flex-col items-start gap-2'> <div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`delivery-${idx}`} name={`delivery-${idx}`}
checked={selectedDeliveries.includes(idx)} checked={selectedDeliveries.includes(idx)}
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedDeliveries([ setSelectedDeliveries([
...selectedDeliveries, ...selectedDeliveries,
@@ -1168,8 +1182,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
); );
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</td> </td>
src/components/pages/production/recording/form/RecordingForm.tsx
+76 -47
View File
@@ -760,29 +760,30 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr> <tr>
{type !== 'detail' && ( {type !== 'detail' && (
<th> <th>
<div className='flex justify-center'> <CheckboxInput
<CheckboxInput name='select-all-feed'
name='select-all-feed' checked={
checked={ formik.values.feed_data?.length ===
formik.values.feed_data?.length === selectedFeed.length &&
selectedFeed.length && formik.values.feed_data?.length > 0
formik.values.feed_data?.length > 0 }
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) {
setSelectedFeed(
formik.values.feed_data?.map((_, idx) => idx) ??
[]
);
} else {
setSelectedFeed([]);
} }
onChange={(e) => { }}
if (e.target.checked) { classNames={{
setSelectedFeed( wrapper: 'flex justify-center',
formik.values.feed_data?.map( checkbox: 'checkbox checkbox-sm',
(_, idx) => idx }}
) ?? [] />
);
} else {
setSelectedFeed([]);
}
}}
naked={true}
size='sm'
/>
</div>
</th> </th>
)} )}
<th> <th>
@@ -812,11 +813,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`feed-${idx}`}> <tr key={`feed-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<div className='flex flex-col items-center gap-2'> <div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`feed-${idx}`} name={`feed-${idx}`}
checked={selectedFeed.includes(idx)} checked={selectedFeed.includes(idx)}
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedFeed([...selectedFeed, idx]); setSelectedFeed([...selectedFeed, idx]);
} else { } else {
@@ -825,8 +828,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</td> </td>
@@ -1007,7 +1012,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
selectedWeight.length && selectedWeight.length &&
formik.values.body_weight?.length > 0 formik.values.body_weight?.length > 0
} }
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedWeight( setSelectedWeight(
formik.values.body_weight?.map( formik.values.body_weight?.map(
@@ -1018,8 +1025,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedWeight([]); setSelectedWeight([]);
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</th> </th>
@@ -1059,11 +1068,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`weight-${idx}`}> <tr key={`weight-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<div className='flex flex-col items-center gap-2'> <div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`weight-${idx}`} name={`weight-${idx}`}
checked={selectedWeight.includes(idx)} checked={selectedWeight.includes(idx)}
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedWeight([...selectedWeight, idx]); setSelectedWeight([...selectedWeight, idx]);
} else { } else {
@@ -1072,8 +1083,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</td> </td>
@@ -1248,7 +1261,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
selectedVaccine.length && selectedVaccine.length &&
formik.values.vaccination?.length > 0 formik.values.vaccination?.length > 0
} }
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedVaccine( setSelectedVaccine(
formik.values.vaccination?.map( formik.values.vaccination?.map(
@@ -1259,8 +1274,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedVaccine([]); setSelectedVaccine([]);
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</th> </th>
@@ -1292,11 +1309,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`vaccine-${idx}`}> <tr key={`vaccine-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<div className='flex flex-col items-center gap-2'> <div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`vaccine-${idx}`} name={`vaccine-${idx}`}
checked={selectedVaccine.includes(idx)} checked={selectedVaccine.includes(idx)}
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedVaccine([...selectedVaccine, idx]); setSelectedVaccine([...selectedVaccine, idx]);
} else { } else {
@@ -1305,8 +1324,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</td> </td>
@@ -1503,7 +1524,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
selectedMortality.length && selectedMortality.length &&
formik.values.mortality?.length > 0 formik.values.mortality?.length > 0
} }
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedMortality( setSelectedMortality(
formik.values.mortality?.map( formik.values.mortality?.map(
@@ -1514,8 +1537,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
setSelectedMortality([]); setSelectedMortality([]);
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</th> </th>
@@ -1546,11 +1571,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
<tr key={`mortality-${idx}`}> <tr key={`mortality-${idx}`}>
{type !== 'detail' && ( {type !== 'detail' && (
<td> <td>
<div className='flex flex-col items-center gap-2'> <div className='flex justify-center'>
<CheckboxInput <CheckboxInput
name={`mortality-${idx}`} name={`mortality-${idx}`}
checked={selectedMortality.includes(idx)} checked={selectedMortality.includes(idx)}
onChange={(e) => { onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => {
if (e.target.checked) { if (e.target.checked) {
setSelectedMortality([ setSelectedMortality([
...selectedMortality, ...selectedMortality,
@@ -1562,8 +1589,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
); );
} }
}} }}
naked={true} classNames={{
size='sm' wrapper: 'flex justify-center',
checkbox: 'checkbox checkbox-sm',
}}
/> />
</div> </div>
</td> </td>