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): 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>
) => {
const { children, innerProps, className } = props;
const { children, innerProps } = props;
const customProps = props.selectProps as unknown as {
shouldShowAdornment?: boolean;
@@ -101,10 +101,7 @@ const CustomControl = <
return (
<ReactSelectComponents.Control {...props}>
<div
className={`${className} flex-1 pl-3 gap-1 flex items-center transition-all duration-200`}
{...innerProps}
>
<div className='flex-1 pl-3 gap-1 flex items-center' {...innerProps}>
{shouldShowAdornment && startAdornment}
{children}
</div>
@@ -280,21 +277,20 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
hideSelectedOptions={hideSelectedOptions}
className={cn('w-full flex-1', className?.select)}
classNames={{
...(!startAdornment && {
control: ({ isFocused, isDisabled }) =>
cn('w-full rounded-lg! border bg-white transition-shadow', {
'cursor-pointer!': !readOnly && !isDisabled,
'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200': isFocused,
'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
'rounded-l-none!': inputPrefix,
'rounded-r-none!': inputSuffix,
}),
valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
}),
control: ({ isFocused, isDisabled }) =>
cn('w-full border bg-white transition-shadow', 'rounded-lg!', {
'cursor-pointer!': !readOnly && !isDisabled,
'border-red-500! ring-2 ring-red-200': isError,
'border-indigo-500 ring-2 ring-indigo-200':
isFocused && !startAdornment,
'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !readOnly,
'bg-transparent! cursor-not-allowed!': readOnly,
'rounded-l-none!': inputPrefix && !startAdornment,
'rounded-r-none!': inputSuffix && !startAdornment,
}),
valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
placeholder: () =>
cn({
'text-gray-400 text-sm leading-tight': !isError,
@@ -406,19 +402,23 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
hideSelectedOptions={hideSelectedOptions}
className={cn('w-full', className?.select)}
classNames={{
...(!startAdornment && {
control: ({ isFocused, isDisabled }) =>
cn('w-full rounded-lg! border bg-white transition-shadow', {
control: ({ isFocused, isDisabled }) =>
cn(
'w-full border bg-white transition-shadow',
// Gunakan rounded-lg untuk semua kasus
'rounded-lg!',
{
'cursor-pointer!': !readOnly && !isDisabled,
'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,
'bg-gray-100 text-gray-400 cursor-not-allowed':
isDisabled && !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: () =>
cn({
'text-gray-400 text-sm leading-tight': !isError,