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

chore: add readOnly prop and adjust SelectInput styling

Browse Source
This commit is contained in:
ValdiANS
2026-01-27 16:54:44 +07:00
parent 98608576b9
commit 02fbd677fc
1 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/input/SelectInput.tsx
+23 -14
View File
@@ -42,6 +42,7 @@ interface SelectInputBaseProps<T = OptionType> {
optionComponent?: OptionComponent<T>;
components?: Partial<typeof ReactSelectComponents>;
isDisabled?: boolean;
readOnly?: boolean;
isLoading?: boolean;
isClearable?: boolean;
isRtl?: boolean;
@@ -156,6 +157,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
closeMenuOnSelect,
hideSelectedOptions,
onMenuScrollToBottom,
readOnly,
} = props;
const [internalInputValue, setInternalInputValue] = useState('');
@@ -235,7 +237,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
onInputChange={internalInputChangeHandler}
onMenuClose={() => setInternalInputValue('')}
isMulti={isMulti}
isDisabled={isDisabled}
isDisabled={isDisabled || readOnly}
isLoading={isLoading}
isClearable={isClearable}
isRtl={isRtl}
@@ -247,30 +249,37 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
classNames={{
...(!startAdornment && {
control: ({ isFocused, isDisabled }) =>
cn(
'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
{
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,
}
),
valueContainer: () => cn('flex-1 p-3! py-2! gap-1'),
'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'),
}),
placeholder: () =>
cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
cn({
'text-gray-400 text-sm leading-tight': !isError,
'text-red-300!': isError,
}),
singleValue: () =>
cn({ 'text-gray-900': !isError, 'text-error!': isError }),
input: () => cn('text-gray-900 m-0! p-0!'),
indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
cn({
'm-0! text-gray-900 text-sm leading-tight': !isError,
'text-error!': isError,
'text-gray-900!': readOnly,
}),
input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
indicatorsContainer: () => cn('flex items-center gap-1 pr-3 py-2'),
dropdownIndicator: ({ isFocused }) =>
cn('p-1! rounded hover:bg-gray-100', {
cn('p-0! rounded hover:bg-gray-100', {
'text-gray-900': isFocused,
'text-gray-500': !isFocused,
'text-error!': isError,
}),
clearIndicator: () => cn('p-1! rounded hover:bg-gray-100'),
clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
menu: () =>
cn(
'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'