chore: file selct trigger

This commit is contained in:
Joel 2024-08-21 16:45:18 +08:00
parent b50e94d681
commit 85b25ebe1b
2 changed files with 11 additions and 7 deletions

View File

@ -41,6 +41,7 @@ export type ISelectProps = {
optionWrapClassName?: string
optionClassName?: string
hideChecked?: boolean
notClearable?: boolean
renderOption?: ({
item,
selected,
@ -179,6 +180,7 @@ const SimpleSelect: FC<ISelectProps> = ({
optionWrapClassName,
optionClassName,
hideChecked,
notClearable,
renderOption,
}) => {
const { t } = useTranslation()
@ -205,13 +207,13 @@ const SimpleSelect: FC<ISelectProps> = ({
}
}}
>
<div className={classNames('relative h-9', wrapperClassName)}>
<div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
{renderTrigger && <Listbox.Button className='w-full'>{renderTrigger(selectedItem)}</Listbox.Button>}
{!renderTrigger && (
<Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
<span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
<Listbox.Button className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
<span className={classNames('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2">
{selectedItem
{(selectedItem && !notClearable)
? (
<XMarkIcon
onClick={(e) => {

View File

@ -248,13 +248,15 @@ const ConditionItem = ({
}
{
!comparisonOperatorNotRequireValue(condition.comparison_operator) && isSelect && (
<div className='p-1'>
<div className='border-t border-t-divider-subtle'>
<Select
wrapperClassName='h-6'
className='pl-0 text-xs'
wrapperClassName='h-8'
className='px-2 text-xs rounded-t-none'
defaultValue={condition.value}
items={selectOptions}
onSelect={item => handleUpdateConditionValue(item.value as string)}
hideChecked
notClearable
/>
</div>
)