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 optionWrapClassName?: string
optionClassName?: string optionClassName?: string
hideChecked?: boolean hideChecked?: boolean
notClearable?: boolean
renderOption?: ({ renderOption?: ({
item, item,
selected, selected,
@ -179,6 +180,7 @@ const SimpleSelect: FC<ISelectProps> = ({
optionWrapClassName, optionWrapClassName,
optionClassName, optionClassName,
hideChecked, hideChecked,
notClearable,
renderOption, renderOption,
}) => { }) => {
const { t } = useTranslation() 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='w-full'>{renderTrigger(selectedItem)}</Listbox.Button>}
{!renderTrigger && ( {!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)}> <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', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span> <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"> <span className="absolute inset-y-0 right-0 flex items-center pr-2">
{selectedItem {(selectedItem && !notClearable)
? ( ? (
<XMarkIcon <XMarkIcon
onClick={(e) => { onClick={(e) => {

View File

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