gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-25 15:55:48 +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>; optionComponent?: OptionComponent<T>;
components?: Partial<typeof ReactSelectComponents>; components?: Partial<typeof ReactSelectComponents>;
isDisabled?: boolean; isDisabled?: boolean;
readOnly?: boolean;
isLoading?: boolean; isLoading?: boolean;
isClearable?: boolean; isClearable?: boolean;
isRtl?: boolean; isRtl?: boolean;
@@ -156,6 +157,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
closeMenuOnSelect, closeMenuOnSelect,
hideSelectedOptions, hideSelectedOptions,
onMenuScrollToBottom, onMenuScrollToBottom,
readOnly,
} = props; } = props;
const [internalInputValue, setInternalInputValue] = useState(''); const [internalInputValue, setInternalInputValue] = useState('');
@@ -235,7 +237,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
onInputChange={internalInputChangeHandler} onInputChange={internalInputChangeHandler}
onMenuClose={() => setInternalInputValue('')} onMenuClose={() => setInternalInputValue('')}
isMulti={isMulti} isMulti={isMulti}
isDisabled={isDisabled} isDisabled={isDisabled || readOnly}
isLoading={isLoading} isLoading={isLoading}
isClearable={isClearable} isClearable={isClearable}
isRtl={isRtl} isRtl={isRtl}
@@ -247,30 +249,37 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
classNames={{ classNames={{
...(!startAdornment && { ...(!startAdornment && {
control: ({ isFocused, isDisabled }) => control: ({ isFocused, isDisabled }) =>
cn( cn('w-full rounded-lg! border bg-white transition-shadow', {
'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!', '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,
'border-base-content/10!': !isError && !isFocused, 'border-base-content/10!': !isError && !isFocused,
'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled, 'bg-gray-100 text-gray-400 cursor-not-allowed':
} isDisabled && !readOnly,
), 'bg-transparent! cursor-not-allowed!': readOnly,
valueContainer: () => cn('flex-1 p-3! py-2! gap-1'), }),
valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
}), }),
placeholder: () => placeholder: () =>
cn({ 'text-gray-400': !isError, 'text-red-300!': isError }), cn({
'text-gray-400 text-sm leading-tight': !isError,
'text-red-300!': isError,
}),
singleValue: () => singleValue: () =>
cn({ 'text-gray-900': !isError, 'text-error!': isError }), cn({
input: () => cn('text-gray-900 m-0! p-0!'), 'm-0! text-gray-900 text-sm leading-tight': !isError,
indicatorsContainer: () => cn('flex items-center gap-1 pr-2'), '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 }) => dropdownIndicator: ({ isFocused }) =>
cn('p-1! rounded hover:bg-gray-100', { cn('p-0! rounded hover:bg-gray-100', {
'text-gray-900': isFocused, 'text-gray-900': isFocused,
'text-gray-500': !isFocused, 'text-gray-500': !isFocused,
'text-error!': isError, 'text-error!': isError,
}), }),
clearIndicator: () => cn('p-1! rounded hover:bg-gray-100'), clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
menu: () => menu: () =>
cn( cn(
'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!' 'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'