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

refactor(FE): Refactor SelectInput styles for improved readability

Browse Source
This commit is contained in:
rstubryan
2026-02-13 09:32:45 +07:00
parent d5962f94a1
commit 684f67593f
1 changed files with 23 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/SelectInput.tsx
+23 -30
View File
@@ -284,23 +284,22 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
isDisabled && !readOnly, isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly, 'bg-transparent! cursor-not-allowed!': readOnly,
'cursor-pointer!': !readOnly && !isDisabled, 'cursor-pointer!': !readOnly && !isDisabled,
'border-red-500! ring-2 ring-red-200': isError, 'border-error!': isError,
'ring-2 ring-error/20': isError,
'border-indigo-500 ring-2 ring-indigo-200': 'border-indigo-500 ring-2 ring-indigo-200':
isFocused && !startAdornment, isFocused && !startAdornment && !isError,
'border-base-content/10!': !isError && !isFocused, 'border-base-content/10!': !isError && !isFocused,
'rounded-l-none!': inputPrefix && !startAdornment, 'rounded-l-none!': inputPrefix && !startAdornment,
'rounded-r-none!': inputSuffix && !startAdornment, 'rounded-r-none!': inputSuffix && !startAdornment,
}), }),
valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'), valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
placeholder: () => placeholder: () =>
cn({ cn('text-gray-400 text-sm leading-tight', {
'text-gray-400 text-sm leading-tight': !isError, 'text-error!': isError,
'text-red-300!': isError,
}), }),
singleValue: () => singleValue: () =>
cn({ cn('m-0! text-gray-900 text-sm leading-tight', {
'm-0! text-gray-900 text-sm leading-tight': !isError, 'text-error!': isError && !readOnly,
'text-error!': isError,
'text-gray-900!': readOnly, 'text-gray-900!': readOnly,
}), }),
input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'), input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
@@ -404,32 +403,26 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
className={cn('w-full', className?.select)} className={cn('w-full', className?.select)}
classNames={{ classNames={{
control: ({ isFocused, isDisabled }) => control: ({ isFocused, isDisabled }) =>
cn( cn('w-full border transition-shadow rounded-lg!', {
'w-full border transition-shadow', 'bg-base-100!': !isDisabled && !readOnly,
// Gunakan rounded-lg untuk semua kasus 'bg-base-200! text-gray-400 cursor-not-allowed':
'rounded-lg!', isDisabled && !readOnly,
{ 'bg-transparent! cursor-not-allowed!': readOnly,
'bg-base-100!': !isDisabled && !readOnly, 'cursor-pointer!': !readOnly && !isDisabled,
'bg-base-200! text-gray-400 cursor-not-allowed': 'border-error!': isError,
isDisabled && !readOnly, 'ring-2 ring-error/20': isError,
'bg-transparent! cursor-not-allowed!': readOnly, 'border-indigo-500 ring-2 ring-indigo-200':
'cursor-pointer!': !readOnly && !isDisabled, isFocused && !startAdornment && !isError,
'border-red-500! ring-2 ring-red-200': isError, 'border-base-content/10!': !isError && !isFocused,
'border-indigo-500 ring-2 ring-indigo-200': }),
isFocused && !startAdornment,
'border-base-content/10!': !isError && !isFocused,
}
),
valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'), valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
placeholder: () => placeholder: () =>
cn({ cn('text-gray-400 text-sm leading-tight', {
'text-gray-400 text-sm leading-tight': !isError, 'text-error!': isError,
'text-red-300!': isError,
}), }),
singleValue: () => singleValue: () =>
cn({ cn('m-0! text-gray-900 text-sm leading-tight', {
'm-0! text-gray-900 text-sm leading-tight': !isError, 'text-error!': isError && !readOnly,
'text-error!': isError,
'text-gray-900!': readOnly, 'text-gray-900!': readOnly,
}), }),
input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'), input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),