| | |
| | | const handleKeyChange = useCallback((index: number) => { |
| | | return (e: React.ChangeEvent<HTMLInputElement>) => { |
| | | const newList = produce(list, (draft: any[]) => { |
| | | if (!/^\w+$/.test(e.target.value)) |
| | | if (!/^[a-zA-Z0-9_]+$/.test(e.target.value)) |
| | | return notify({ type: 'error', message: 'key is can only contain letters, numbers and underscores' }) |
| | | draft[index].key = e.target.value |
| | | }) |
| | |
| | | {/* Key */} |
| | | <div className='w-[120px] border-r border-gray-200'> |
| | | <input |
| | | className='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active' |
| | | className='block px-2 w-full h-7 text-text-secondary system-xs-regular appearance-none outline-none caret-primary-600 hover:bg-state-base-hover focus:bg-components-input-bg-active placeholder:system-xs-regular placeholder:text-components-input-text-placeholder' |
| | | placeholder={t('workflow.chatVariable.modal.objectKey') || ''} |
| | | value={list[index].key} |
| | | onChange={handleKeyChange(index)} |
| | |
| | | {/* Value */} |
| | | <div className='relative w-[230px]'> |
| | | <input |
| | | className='system-xs-regular placeholder:system-xs-regular block h-7 w-full appearance-none px-2 text-text-secondary caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:bg-state-base-hover focus:bg-components-input-bg-active' |
| | | className='block px-2 w-full h-7 text-text-secondary system-xs-regular appearance-none outline-none caret-primary-600 hover:bg-state-base-hover focus:bg-components-input-bg-active placeholder:system-xs-regular placeholder:text-components-input-text-placeholder' |
| | | placeholder={t('workflow.chatVariable.modal.objectValue') || ''} |
| | | value={list[index].value} |
| | | onChange={handleValueChange(index)} |
| | |
| | | /> |
| | | {list.length > 1 && !isFocus && ( |
| | | <RemoveButton |
| | | className='absolute right-1 top-0.5 z-10 hidden group-hover:block' |
| | | className='z-10 group-hover:block hidden absolute right-1 top-0.5' |
| | | onClick={handleItemRemove(index)} |
| | | /> |
| | | )} |