gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-20 21:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-114): enhance NumberInput component with improved styling and disabled state handling

Browse Source
This commit is contained in:
rstubryan
2025-10-21 09:54:14 +07:00
parent 7c6e079f56
commit 1ecdff855e
1 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/NumberInput.tsx
+39 -5
View File
@@ -397,8 +397,20 @@ const NumberInput = ({
<div className='relative flex'>
{/* Prefix Block */}
{inputPrefix && (
<div className='inline-flex items-center px-4 py-2 bg-gray-100 border border-r-0 border-gray-300 rounded-l-md'>
<span className='text-sm font-medium text-gray-600 select-none whitespace-nowrap'>
<div className={cn(
'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
{
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
}
)}>
<span className={cn(
'text-sm font-medium select-none whitespace-nowrap',
{
'text-gray-600': !disabled,
'text-gray-400': disabled,
}
)}>
{inputPrefix}
</span>
</div>
@@ -413,6 +425,9 @@ const NumberInput = ({
'border-success!': isValid,
'rounded-l-none!': inputPrefix,
'rounded-r-none!': inputSuffix,
'input-disabled': disabled,
'cursor-not-allowed': disabled,
'bg-gray-50': disabled,
},
className?.inputWrapper
)}
@@ -449,7 +464,14 @@ const NumberInput = ({
onFocus={onFocus}
onBlur={onBlur}
disabled={disabled}
className={cn('grow bg-transparent outline-none', className?.input)}
className={cn(
'grow bg-transparent outline-none',
{
'cursor-not-allowed': disabled,
'text-gray-500': disabled,
},
className?.input
)}
readOnly={readOnly}
inputMode='decimal'
/>
@@ -483,8 +505,20 @@ const NumberInput = ({
{/* Suffix Block */}
{inputSuffix && (
<div className='inline-flex items-center px-4 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md'>
<span className='text-sm font-medium text-gray-600 select-none whitespace-nowrap'>
<div className={cn(
'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
{
'bg-gray-100 border-gray-300': !disabled,
'bg-gray-50 border-gray-200': disabled,
}
)}>
<span className={cn(
'text-sm font-medium select-none whitespace-nowrap',
{
'text-gray-600': !disabled,
'text-gray-400': disabled,
}
)}>
{inputSuffix}
</span>
</div>