121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import ModalFoot from '../modal-foot'
|
|
import type { Options } from '../config-select'
|
|
import ConfigSelect from '../config-select'
|
|
import ConfigString from '../config-string'
|
|
import SelectTypeItem from '../select-type-item'
|
|
import s from './style.module.css'
|
|
import Toast from '@/app/components/base/toast'
|
|
import type { PromptVariable } from '@/models/debug'
|
|
import { getNewVar } from '@/utils/var'
|
|
|
|
import Modal from '@/app/components/base/modal'
|
|
|
|
export type IConfigModalProps = {
|
|
payload: PromptVariable
|
|
type?: string
|
|
isShow: boolean
|
|
onClose: () => void
|
|
onConfirm: (newValue: { type: string; value: any }) => void
|
|
}
|
|
|
|
const ConfigModal: FC<IConfigModalProps> = ({
|
|
payload,
|
|
isShow,
|
|
onClose,
|
|
onConfirm,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const { type, name, key, options, max_length } = payload || getNewVar('')
|
|
|
|
const [tempType, setTempType] = useState(type)
|
|
useEffect(() => {
|
|
setTempType(type)
|
|
}, [type])
|
|
const handleTypeChange = (type: string) => {
|
|
return () => {
|
|
setTempType(type)
|
|
}
|
|
}
|
|
|
|
const isStringInput = tempType === 'string'
|
|
const title = isStringInput ? t('appDebug.variableConig.maxLength') : t('appDebug.variableConig.options')
|
|
|
|
// string type
|
|
const [tempMaxLength, setTempMaxValue] = useState(max_length)
|
|
useEffect(() => {
|
|
setTempMaxValue(max_length)
|
|
}, [max_length])
|
|
|
|
// select type
|
|
const [tempOptions, setTempOptions] = useState<Options>(options || [])
|
|
useEffect(() => {
|
|
setTempOptions(options || [])
|
|
}, [options])
|
|
|
|
const handleConfirm = () => {
|
|
if (isStringInput) {
|
|
onConfirm({ type: tempType, value: tempMaxLength })
|
|
}
|
|
else {
|
|
if (tempOptions.length === 0) {
|
|
Toast.notify({ type: 'error', message: 'At least one option requied' })
|
|
return
|
|
}
|
|
const obj: Record<string, boolean> = {}
|
|
let hasRepeatedItem = false
|
|
tempOptions.forEach((o) => {
|
|
if (obj[o]) {
|
|
hasRepeatedItem = true
|
|
return
|
|
}
|
|
obj[o] = true
|
|
})
|
|
if (hasRepeatedItem) {
|
|
Toast.notify({ type: 'error', message: 'Has repeat items' })
|
|
return
|
|
}
|
|
onConfirm({ type: tempType, value: tempOptions })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
title={t('appDebug.variableConig.modalTitle')}
|
|
isShow={isShow}
|
|
onClose={onClose}
|
|
>
|
|
<div className='mb-8'>
|
|
<div className='mt-2 mb-8 text-sm text-gray-500'>{t('appDebug.variableConig.description', { varName: `{{${name || key}}}` })}</div>
|
|
<div className='mb-2'>
|
|
<div className={s.title}>{t('appDebug.variableConig.fieldType')}</div>
|
|
<div className='flex space-x-2'>
|
|
<SelectTypeItem type='string' selected={isStringInput} onClick={handleTypeChange('string')} />
|
|
<SelectTypeItem type='select' selected={!isStringInput} onClick={handleTypeChange('select')} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mt-6'>
|
|
<div className={s.title}>{title}</div>
|
|
{isStringInput
|
|
? (
|
|
<ConfigString value={tempMaxLength} onChange={setTempMaxValue} />
|
|
)
|
|
: (
|
|
<ConfigSelect options={tempOptions} onChange={setTempOptions} />
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
<ModalFoot
|
|
onConfirm={handleConfirm}
|
|
onCancel={onClose}
|
|
/>
|
|
</Modal>
|
|
)
|
|
}
|
|
export default React.memo(ConfigModal)
|