| | |
| | | import React, { useState } from 'react' |
| | | import { useTranslation } from 'react-i18next' |
| | | import { ChevronDownIcon } from '@heroicons/react/24/outline' |
| | | import s from './style.module.css' |
| | | import cn from '@/utils/classnames' |
| | | import { |
| | | PortalToFollowElem, |
| | |
| | | } |
| | | |
| | | const VarItem: FC<{ item: Option }> = ({ item }) => ( |
| | | <div className='flex h-[18px] items-center space-x-1 rounded bg-[#EFF8FF] px-1'> |
| | | <div className='flex items-center h-[18px] px-1 bg-[#EFF8FF] rounded space-x-1'> |
| | | <IconTypeIcon type={item.type as IInputTypeIconProps['type']} className='text-[#1570EF]' /> |
| | | <div className='flex text-xs font-medium text-[#1570EF]'> |
| | | <span className='opacity-60'>{'{{'}</span> |
| | |
| | | > |
| | | <PortalToFollowElemTrigger className={cn(triggerClassName)} onClick={() => setOpen(v => !v)}> |
| | | <div className={cn( |
| | | s.trigger, |
| | | className, |
| | | notSetVar ? 'border-[#FEDF89] bg-[#FFFCF5] text-[#DC6803]' : ' border-components-button-secondary-border text-text-accent hover:bg-components-button-secondary-bg', |
| | | open ? 'bg-components-button-secondary-bg' : 'bg-transparent', |
| | | notSetVar ? 'bg-[#FFFCF5] border-[#FEDF89] text-[#DC6803]' : ' hover:bg-gray-50 border-gray-200 text-primary-600', |
| | | open ? 'bg-gray-50' : 'bg-white', |
| | | ` |
| | | flex h-8 cursor-pointer items-center justify-center space-x-1 rounded-lg border px-2 text-[13px] |
| | | font-medium shadow-xs |
| | | flex items-center h-8 justify-center px-2 space-x-1 rounded-lg border shadow-xs cursor-pointer |
| | | text-[13px] font-medium |
| | | `)}> |
| | | <div> |
| | | {value |
| | |
| | | {notSelectedVarTip || t('appDebug.feature.dataSet.queryVariable.choosePlaceholder')} |
| | | </div>)} |
| | | </div> |
| | | <ChevronDownIcon className={cn(open && 'rotate-180 text-text-tertiary', 'h-3.5 w-3.5')} /> |
| | | <ChevronDownIcon className={cn(s.dropdownIcon, open && 'rotate-180 text-[#98A2B3]', 'w-3.5 h-3.5')} /> |
| | | </div> |
| | | </PortalToFollowElemTrigger> |
| | | <PortalToFollowElemContent style={{ zIndex: 1000 }}> |
| | | {options.length > 0 |
| | | ? (<div className='max-h-[50vh] w-[240px] overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg'> |
| | | ? (<div className='w-[240px] max-h-[50vh] overflow-y-auto p-1 border bg-white border-gray-200 rounded-lg shadow-lg'> |
| | | {options.map(({ name, value, type }, index) => ( |
| | | <div |
| | | key={index} |
| | | className='flex cursor-pointer rounded-lg px-3 py-1 hover:bg-state-base-hover' |
| | | className='px-3 py-1 flex rounded-lg hover:bg-gray-50 cursor-pointer' |
| | | onClick={() => { |
| | | onChange(value) |
| | | setOpen(false) |
| | |
| | | ))} |
| | | </div>) |
| | | : ( |
| | | <div className='w-[240px] rounded-lg border border-components-panel-border bg-components-panel-bg p-6 shadow-lg'> |
| | | <div className='mb-1 text-sm font-medium text-text-secondary'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div> |
| | | <div className='text-xs leading-normal text-text-tertiary'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div> |
| | | <div className='w-[240px] p-6 bg-white border border-gray-200 rounded-lg shadow-lg'> |
| | | <div className='mb-1 text-sm font-medium text-gray-700'>{t('appDebug.feature.dataSet.queryVariable.noVar')}</div> |
| | | <div className='text-xs leading-normal text-gray-500'>{t('appDebug.feature.dataSet.queryVariable.noVarTip')}</div> |
| | | </div> |
| | | )} |
| | | |