mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -847,7 +847,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
selectedProducts.length &&
|
||||
formik.values.products?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedProducts(
|
||||
formik.values.products?.map(
|
||||
@@ -858,8 +860,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
setSelectedProducts([]);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
@@ -890,11 +894,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
<tr key={`product-row-${idx}-${product.product_id}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex flex-col items-center gap-2'>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`product-${idx}`}
|
||||
checked={selectedProducts.includes(idx)}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedProducts([
|
||||
...selectedProducts,
|
||||
@@ -906,8 +912,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
@@ -1061,7 +1069,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
selectedDeliveries.length &&
|
||||
formik.values.deliveries?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedDeliveries(
|
||||
formik.values.deliveries?.map(
|
||||
@@ -1072,8 +1082,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
setSelectedDeliveries([]);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
@@ -1150,11 +1162,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
<tr key={`delivery-row-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex flex-col items-start gap-2'>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`delivery-${idx}`}
|
||||
checked={selectedDeliveries.includes(idx)}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedDeliveries([
|
||||
...selectedDeliveries,
|
||||
@@ -1168,8 +1182,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
|
||||
);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -760,29 +760,30 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr>
|
||||
{type !== 'detail' && (
|
||||
<th>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name='select-all-feed'
|
||||
checked={
|
||||
formik.values.feed_data?.length ===
|
||||
selectedFeed.length &&
|
||||
formik.values.feed_data?.length > 0
|
||||
<CheckboxInput
|
||||
name='select-all-feed'
|
||||
checked={
|
||||
formik.values.feed_data?.length ===
|
||||
selectedFeed.length &&
|
||||
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) {
|
||||
setSelectedFeed(
|
||||
formik.values.feed_data?.map(
|
||||
(_, idx) => idx
|
||||
) ?? []
|
||||
);
|
||||
} else {
|
||||
setSelectedFeed([]);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
/>
|
||||
</div>
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
<th>
|
||||
@@ -812,11 +813,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr key={`feed-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex flex-col items-center gap-2'>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`feed-${idx}`}
|
||||
checked={selectedFeed.includes(idx)}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedFeed([...selectedFeed, idx]);
|
||||
} else {
|
||||
@@ -825,8 +828,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
@@ -1007,7 +1012,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
selectedWeight.length &&
|
||||
formik.values.body_weight?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedWeight(
|
||||
formik.values.body_weight?.map(
|
||||
@@ -1018,8 +1025,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
setSelectedWeight([]);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
@@ -1059,11 +1068,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr key={`weight-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex flex-col items-center gap-2'>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`weight-${idx}`}
|
||||
checked={selectedWeight.includes(idx)}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedWeight([...selectedWeight, idx]);
|
||||
} else {
|
||||
@@ -1072,8 +1083,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
@@ -1248,7 +1261,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
selectedVaccine.length &&
|
||||
formik.values.vaccination?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedVaccine(
|
||||
formik.values.vaccination?.map(
|
||||
@@ -1259,8 +1274,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
setSelectedVaccine([]);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
@@ -1292,11 +1309,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr key={`vaccine-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex flex-col items-center gap-2'>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`vaccine-${idx}`}
|
||||
checked={selectedVaccine.includes(idx)}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedVaccine([...selectedVaccine, idx]);
|
||||
} else {
|
||||
@@ -1305,8 +1324,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
@@ -1503,7 +1524,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
selectedMortality.length &&
|
||||
formik.values.mortality?.length > 0
|
||||
}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedMortality(
|
||||
formik.values.mortality?.map(
|
||||
@@ -1514,8 +1537,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
setSelectedMortality([]);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
@@ -1546,11 +1571,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
<tr key={`mortality-${idx}`}>
|
||||
{type !== 'detail' && (
|
||||
<td>
|
||||
<div className='flex flex-col items-center gap-2'>
|
||||
<div className='flex justify-center'>
|
||||
<CheckboxInput
|
||||
name={`mortality-${idx}`}
|
||||
checked={selectedMortality.includes(idx)}
|
||||
onChange={(e) => {
|
||||
onChange={(
|
||||
e: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
if (e.target.checked) {
|
||||
setSelectedMortality([
|
||||
...selectedMortality,
|
||||
@@ -1562,8 +1589,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
|
||||
);
|
||||
}
|
||||
}}
|
||||
naked={true}
|
||||
size='sm'
|
||||
classNames={{
|
||||
wrapper: 'flex justify-center',
|
||||
checkbox: 'checkbox checkbox-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user