9c4c325e5a
* remove submodules * add api and ui files * update github actions * use sparse checkout * update node setup * update checkout * update docker * change permissions * update mariadb health check * update changelog
131 lines
4.0 KiB
TypeScript
131 lines
4.0 KiB
TypeScript
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons/lib'
|
|
import { Button, Card, Form, Input, Switch, Tabs } from 'antd'
|
|
import { TabPaneProps } from 'antd/lib/tabs'
|
|
import React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { InputColor } from '../../input/color'
|
|
|
|
export const EndPageTab: React.FC<TabPaneProps> = (props) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<Tabs.TabPane {...props}>
|
|
<Form.Item
|
|
label={t('form:endPage.show')}
|
|
name={[
|
|
'form', 'endPage', 'show',
|
|
]}
|
|
valuePropName={'checked'}
|
|
>
|
|
<Switch />
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('form:endPage.title')} name={[
|
|
'form', 'endPage', 'title',
|
|
]}>
|
|
<Input />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={t('form:endPage.paragraph')}
|
|
name={[
|
|
'form', 'endPage', 'paragraph',
|
|
]}
|
|
extra={t('type:descriptionInfo')}
|
|
>
|
|
<Input.TextArea autoSize />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label={t('form:endPage.continueButtonText')}
|
|
name={[
|
|
'form', 'endPage', 'buttonText',
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
|
|
<Form.List name={[
|
|
'form', 'endPage', 'buttons',
|
|
]}>
|
|
{(fields, { add, remove }) => {
|
|
return (
|
|
<div>
|
|
{fields.map((field, index) => (
|
|
<Form.Item
|
|
wrapperCol={{
|
|
sm: { offset: index === 0 ? 0 : 6 },
|
|
}}
|
|
label={index === 0 ? t('form:endPage.buttons') : ''}
|
|
key={field.key}
|
|
>
|
|
<Card actions={[<DeleteOutlined key={'delete'} onClick={() => remove(index)} />]}>
|
|
<Form.Item
|
|
label={t('form:endPage.url')}
|
|
name={[field.key, 'url']}
|
|
rules={[{ type: 'url', message: t('validation:invalidUrl') }]}
|
|
labelCol={{ span: 6 }}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t('form:endPage.action')}
|
|
name={[field.key, 'action']}
|
|
labelCol={{ span: 6 }}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t('form:endPage.text')}
|
|
name={[field.key, 'text']}
|
|
labelCol={{ span: 6 }}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t('form:endPage.bgColor')}
|
|
name={[field.key, 'bgColor']}
|
|
labelCol={{ span: 6 }}
|
|
>
|
|
<InputColor />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t('form:endPage.activeColor')}
|
|
name={[field.key, 'activeColor']}
|
|
labelCol={{ span: 6 }}
|
|
>
|
|
<InputColor />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label={t('form:endPage.color')}
|
|
name={[field.key, 'color']}
|
|
labelCol={{ span: 6 }}
|
|
>
|
|
<InputColor />
|
|
</Form.Item>
|
|
</Card>
|
|
</Form.Item>
|
|
))}
|
|
<Form.Item
|
|
wrapperCol={{
|
|
sm: { offset: 6 },
|
|
}}
|
|
>
|
|
<Button
|
|
type="dashed"
|
|
onClick={() => {
|
|
add()
|
|
}}
|
|
style={{ width: '60%' }}
|
|
>
|
|
<PlusOutlined /> {t('form:endPage.addButton')}
|
|
</Button>
|
|
</Form.Item>
|
|
</div>
|
|
)
|
|
}}
|
|
</Form.List>
|
|
</Tabs.TabPane>
|
|
)
|
|
}
|