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

refactor(FE): Simplify SelectInput control styling

Browse Source
This commit is contained in:
rstubryan
2026-01-29 11:05:06 +07:00
parent 711536975c
commit 079d69dffb
1 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/SelectInput.tsx
+27 -27
View File
@@ -89,7 +89,7 @@ const CustomControl = <
>( >(
props: ControlProps<Option, IsMulti, Group> props: ControlProps<Option, IsMulti, Group>
) => { ) => {
const { children, innerProps, className } = props; const { children, innerProps } = props;
const customProps = props.selectProps as unknown as { const customProps = props.selectProps as unknown as {
shouldShowAdornment?: boolean; shouldShowAdornment?: boolean;
@@ -101,10 +101,7 @@ const CustomControl = <
return ( return (
<ReactSelectComponents.Control {...props}> <ReactSelectComponents.Control {...props}>
<div <div className='flex-1 pl-3 gap-1 flex items-center' {...innerProps}>
className={`${className} flex-1 pl-3 gap-1 flex items-center transition-all duration-200`}
{...innerProps}
>
{shouldShowAdornment && startAdornment} {shouldShowAdornment && startAdornment}
{children} {children}
</div> </div>
@@ -280,21 +277,20 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
hideSelectedOptions={hideSelectedOptions} hideSelectedOptions={hideSelectedOptions}
className={cn('w-full flex-1', className?.select)} className={cn('w-full flex-1', className?.select)}
classNames={{ classNames={{
...(!startAdornment && { control: ({ isFocused, isDisabled }) =>
control: ({ isFocused, isDisabled }) => cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
cn('w-full rounded-lg! border bg-white transition-shadow', { 'cursor-pointer!': !readOnly && !isDisabled,
'cursor-pointer!': !readOnly && !isDisabled, 'border-red-500! ring-2 ring-red-200': isError,
'border-red-500! ring-2 ring-red-200': isError, 'border-indigo-500 ring-2 ring-indigo-200':
'border-indigo-500 ring-2 ring-indigo-200': isFocused, isFocused && !startAdornment,
'border-base-content/10!': !isError && !isFocused, 'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed': 'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !readOnly, isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly, 'bg-transparent! cursor-not-allowed!': readOnly,
'rounded-l-none!': inputPrefix, 'rounded-l-none!': inputPrefix && !startAdornment,
'rounded-r-none!': inputSuffix, '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': !isError, 'text-gray-400 text-sm leading-tight': !isError,
@@ -406,19 +402,23 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
hideSelectedOptions={hideSelectedOptions} hideSelectedOptions={hideSelectedOptions}
className={cn('w-full', className?.select)} className={cn('w-full', className?.select)}
classNames={{ classNames={{
...(!startAdornment && { control: ({ isFocused, isDisabled }) =>
control: ({ isFocused, isDisabled }) => cn(
cn('w-full rounded-lg! border bg-white transition-shadow', { 'w-full border bg-white transition-shadow',
// Gunakan rounded-lg untuk semua kasus
'rounded-lg!',
{
'cursor-pointer!': !readOnly && !isDisabled, 'cursor-pointer!': !readOnly && !isDisabled,
'border-red-500! ring-2 ring-red-200': isError, 'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200': isFocused, 'border-indigo-500 ring-2 ring-indigo-200':
isFocused && !startAdornment,
'border-base-content/10!': !isError && !isFocused, 'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed': 'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !readOnly, isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly, 'bg-transparent! cursor-not-allowed!': readOnly,
}), }
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': !isError, 'text-gray-400 text-sm leading-tight': !isError,